/* ==========================================================
   LYNX ROLEPLAY v8 — premium SHOP CTA in navigation
   ========================================================== */

.header-nav .nav-shop {
  --shop-gold: #f0cf68;
  --shop-gold-2: #b88a16;
  min-height: 38px;
  padding: 0 13px 0 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(240,207,104,.56);
  border-radius: 12px;
  overflow: hidden;
  color: #0a0906 !important;
  background:
    radial-gradient(90px 44px at 16% 0%, rgba(255,255,255,.52), transparent 64%),
    linear-gradient(135deg,#f4d777 0%,#d4af37 44%,#b78918 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(95,62,4,.34),
    0 10px 28px rgba(212,175,55,.15),
    0 0 0 1px rgba(212,175,55,.04);
  text-shadow: 0 1px 0 rgba(255,255,255,.24);
  isolation: isolate;
  transition: transform .34s var(--ease-premium), box-shadow .34s ease, border-color .34s ease, filter .34s ease !important;
}

/* animated light sweep */
.header-nav .nav-shop::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -45% -32%;
  border-radius: inherit;
  background: linear-gradient(108deg,transparent 31%,rgba(255,255,255,.58) 47%,rgba(255,247,196,.18) 55%,transparent 68%);
  transform: translateX(-68%) rotate(4deg);
  opacity: .68;
  transition: transform .72s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
  pointer-events: none;
}

/* fine inner frame */
.header-nav .nav-shop::after {
  content: '' !important;
  position: absolute;
  inset: 2px;
  border-radius: 9px;
  border: 1px solid rgba(255,247,203,.22);
  opacity: .72;
  pointer-events: none;
}

.header-nav .nav-shop:hover {
  transform: translateY(-2px) scale(1.035) !important;
  border-color: rgba(255,226,128,.92);
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(95,62,4,.38),
    0 16px 38px rgba(212,175,55,.25),
    0 0 28px rgba(212,175,55,.12);
}
.header-nav .nav-shop:hover::before {
  transform: translateX(68%) rotate(4deg);
  opacity: .92;
}
.header-nav .nav-shop:focus-visible {
  outline: 2px solid rgba(255,226,128,.95);
  outline-offset: 3px;
}

.nav-shop-icon,
.nav-shop-arrow {
  position: relative;
  z-index: 2;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-shop-icon { width: 16px; height: 16px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.18)); }
.nav-shop-arrow { width: 13px; height: 13px; margin-left: -2px; transition: transform .32s var(--ease-premium); }
.header-nav .nav-shop span { position: relative; z-index: 2; letter-spacing: .17em; }
.header-nav .nav-shop:hover .nav-shop-arrow { transform: translate(2px,-2px); }

/* Shop is an external CTA, never an active scroll-section item. */
.header-nav .nav-shop.is-active {
  color: #0a0906 !important;
  background:
    radial-gradient(90px 44px at 16% 0%, rgba(255,255,255,.52), transparent 64%),
    linear-gradient(135deg,#f4d777 0%,#d4af37 44%,#b78918 100%) !important;
}

/* Mobile version inside the slide-out menu */
.mobile-menu .mobile-shop {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 12px 0 4px;
  padding: 16px 18px !important;
  border: 1px solid rgba(240,207,104,.42) !important;
  border-radius: 13px;
  color: #0b0905;
  background: linear-gradient(135deg,#f1d06b,#d4af37 52%,#b78616);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38),0 12px 30px rgba(212,175,55,.12);
}
.mobile-menu .mobile-shop .nav-shop-arrow { margin-left: auto; }

@media (max-width: 1230px) and (min-width: 1101px) {
  .header-nav { gap: 4px !important; }
  .header-nav a { padding-inline: 8px !important; }
  .header-nav .nav-shop { padding-inline: 10px !important; gap: 6px; }
  .header-nav .nav-shop span { letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  .header-nav .nav-shop::before,
  .header-nav .nav-shop,
  .header-nav .nav-shop-arrow { transition: none !important; }
}