@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&display=swap');

/* ============================================================
   Devious Glow - Gold Premium
   custom.css loads AFTER built.css. Additive/override only.
   Direction: clean & premium storefront. Warm gold accent on a
   deep warm-black surface. Subtle, smooth motion only.
   ============================================================ */

:root{
  --ds-acc: var(--cl-accent);            /* premium gold (from settings) */
  --ds-line: 255, 255, 255;
  --ds-ink: 13, 11, 8;                   /* deep warm-black (gold premium) */
  --ds-head: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: .18s;
  --t-med: .28s;
}

/* ---------- ROUNDING (soft, circular buttons) ------------ */
.dSR [class*="rounded-full"]{ border-radius: 9999px !important; }
.dSR [class*="rounded-2xl"]{ border-radius: 20px !important; }
.dSR [class*="rounded-xl"]{ border-radius: 16px !important; }
.dSR [class*="rounded-lg"]{ border-radius: 12px !important; }
.dSR [class*="rounded-md"]{ border-radius: 9px !important; }
.dSR input, .dSR select, .dSR textarea{ border-radius: 12px !important; }
.dSR [class~="rounded"]{ border-radius: 8px !important; }
.dSR [class*="rounded-t-xl"]{ border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; }
.dSR [class*="rounded-b-xl"]{ border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; }

/* ---------- BASE + SOFT AMBIENT GLOW --------------------- */
body.dSR{
  position: relative;
  background-color: rgb(var(--ds-ink)) !important;
}
/* one quiet, static accent glow up top - premium, not busy */
body.dSR::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 34% at 50% -6%, rgba(248, 232, 180, 0.17), rgba(var(--ds-acc), 0.09) 45%, transparent 74%),
    radial-gradient(42% 32% at 86% 2%, rgba(var(--ds-acc), 0.08), transparent 70%);
}
/* #app lifts all real content above the fixed glow.
   NOTE: do NOT give .component a z-index - the sticky header
   lives in the same #app stacking context and sections would
   paint over it on scroll. position:relative (no z-index) is
   enough for section-local absolute children. */
#app{ position: relative; z-index: 1; }
.component{ position: relative; }

/* soften every page's hero/footer glow blob (static) */
section [class*="blur-\[200px\]"],
footer [class*="blur-\[200px\]"]{
  opacity: 0.26 !important;
  filter: blur(170px) !important;
}
/* soften the smaller in-card lime blobs (about / stats / socials) */
.component [class*="blur-3xl"][class*="bg-accent-500"]{ opacity: 0.5 !important; }

/* ---------- TYPOGRAPHY (clean sans, normal case) --------- */
h1, h2, h3, h4,
.component h1, .component h2, .component h3{
  font-family: var(--ds-head) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  text-transform: none !important;
  line-height: 1.1;
}
h1.text-5xl{
  font-size: clamp(2.6rem, 6vw, 4.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  line-height: 1.05;
  /* liquid-gold headline with a slow shimmer sweep (moon shine) */
  background-image: linear-gradient(100deg, #C9A24B 0%, #E6C36A 22%, #F8ECBE 47%, #FFF7DA 52%, #E6C36A 76%, #C9A24B 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 22px rgba(230, 195, 106, 0.30));
  animation: ds-goldshine 6.5s linear infinite;
}
/* all gold text gets a faint luminous halo */
.text-accent-500{ color: rgb(var(--ds-acc)) !important; text-shadow: 0 0 12px rgba(var(--ds-acc), 0.28); }
/* section titles go gold with a soft glow (more gold everywhere) */
.component h2{ color: rgb(var(--ds-acc)) !important; -webkit-text-fill-color: currentColor; text-shadow: 0 0 26px rgba(var(--ds-acc), 0.20); }

/* eyebrow labels: soft lime pill, small tracked caps (sans) */
.component span.inline-block.rounded-full,
span.inline-block.px-6.py-2.rounded-full{
  font-family: inherit !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-color: rgba(var(--ds-acc), 0.22) !important;
  background: rgba(var(--ds-acc), 0.08) !important;
  color: rgb(var(--ds-acc)) !important;
  padding: 0.4rem 0.9rem !important;
}

/* ---------- ANNOUNCEMENT (calm, opaque bar) ------------- */
.announcement > div.bg-accent-500{
  background: #17130b !important;   /* opaque warm dark: content can't show through when sticky */
  color: rgba(var(--cl-t-primary), 0.85) !important;
  border-bottom: 1px solid rgba(var(--ds-line), 0.06);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- NAVBAR --------------------------------------- */
nav.component div.bg-background\/50.backdrop-blur-2xl{
  background: rgba(13, 11, 8, 0.78) !important;
  backdrop-filter: blur(18px) saturate(1.05);
  border-bottom: 1px solid rgba(var(--ds-acc), 0.14) !important;
  box-shadow: 0 8px 30px -18px rgba(0,0,0,0.6);
}
nav img{ transition: transform var(--t-med) var(--ease); }
nav img:hover{ transform: translateY(-1px); }

/* nav TEXT links only (exclude chips + button-shape links) */
nav a.rounded-full.border-2:not(.bg-white\/5):not(.bg-accent-500){
  font-weight: 500;
  border-color: transparent !important;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
nav a.rounded-full.border-2:not(.bg-white\/5):not(.bg-accent-500)::after{
  content:"";
  position:absolute; left: 1rem; right: 1rem; bottom: 4px;
  height: 2px; border-radius: 2px;
  background: rgb(var(--ds-acc));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
nav a.rounded-full.border-2:not(.bg-white\/5):not(.bg-accent-500):hover{ color: rgb(var(--ds-acc)) !important; }
nav a.rounded-full.border-2:not(.bg-white\/5):not(.bg-accent-500):hover::after{ transform: scaleX(1); }
nav a.rounded-full.border-2.opacity-50{ opacity: 1 !important; }
nav a.rounded-full.border-2.text-t-primary\/70{ color: rgba(var(--cl-t-primary), 0.6) !important; }
nav a.rounded-full.border-2.text-gray-100{ color: rgb(var(--ds-acc)) !important; opacity: 1 !important; }
nav a.rounded-full.border-2.text-gray-100::after{ transform: scaleX(1); }

/* nav chips (Login / My Account / cart / currency): soft lime */
nav a.rounded-full.bg-white\/5,
nav button.rounded-full.bg-white\/5{
  background: rgba(var(--ds-acc), 0.06) !important;
  border-color: rgba(var(--ds-acc), 0.22) !important;
  color: rgb(var(--ds-acc)) !important;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
nav a.rounded-full.bg-white\/5:hover,
nav button.rounded-full.bg-white\/5:hover{
  background: rgba(var(--ds-acc), 0.13) !important;
  border-color: rgba(var(--ds-acc), 0.45) !important;
  transform: translateY(-1px);
}
nav a.rounded-full.bg-white\/5 svg{ color: rgb(var(--ds-acc)); }
nav .bg-accent-500{ color: rgb(var(--cl-t-accent)) !important; }
.currency-selector.lg .choices__inner{
  background: rgba(var(--ds-acc), 0.06) !important;
  border-color: rgba(var(--ds-acc), 0.22) !important;
}
.currency-selector.lg .choices.is-open .choices__inner{ border-color: rgba(var(--ds-acc), 0.45) !important; }
.currency-selector .choices__inner .symbol{ color: rgb(var(--ds-acc)) !important; }

/* ---------- BUTTONS (clean pills, gentle hover) --------- */
a.inline-flex.border-2.rounded-full.font-semibold.px-8{
  font-weight: 600;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
a.inline-flex.border-2.rounded-full.font-semibold.px-8:hover{ transform: translateY(-2px); }
/* primary: brushed-metal gold + gleaming glint sweep + strong glow */
a.inline-flex.border-2.rounded-full.font-semibold.px-8.bg-accent-500{
  background-image: linear-gradient(135deg, #D9B45A 0%, #E6C36A 38%, #F6E6AE 50%, #E6C36A 62%, #C9A24B 100%) !important;
  background-size: 200% auto;
  border-color: rgba(246, 230, 174, 0.5) !important;
  color: rgb(var(--cl-t-accent)) !important;
  box-shadow:
    0 10px 30px -8px rgba(230, 195, 106, 0.6),
    0 0 0 1px rgba(246, 230, 174, 0.35) inset,
    0 1px 0 rgba(255, 250, 220, 0.5) inset;
  position: relative;
  overflow: hidden;
}
a.inline-flex.border-2.rounded-full.font-semibold.px-8.bg-accent-500::before{
  content:""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 252, 235, 0.7), transparent);
  transform: skewX(-18deg);
  animation: ds-glare 5s ease-in-out infinite;
  pointer-events: none;
}
a.inline-flex.border-2.rounded-full.font-semibold.px-8.bg-accent-500:hover{
  background-position: right center !important;
  filter: brightness(1.09);
  box-shadow:
    0 16px 40px -8px rgba(230, 195, 106, 0.8),
    0 0 0 1px rgba(246, 230, 174, 0.55) inset !important;
}
/* secondary / outline */
a.inline-flex.border-2.rounded-full.font-semibold.px-8:not(.bg-accent-500):not(.border-accent-500){
  border-color: rgba(var(--ds-line), 0.12) !important;
}
a.inline-flex.border-2.rounded-full.font-semibold.px-8.border-accent-500:not(.bg-accent-500){
  border-color: rgba(var(--ds-acc), 0.5) !important;
}
a.inline-flex.border-2.rounded-full.font-semibold.px-8:not(.bg-accent-500):hover{
  border-color: rgba(var(--ds-acc), 0.5) !important;
  color: rgb(var(--ds-acc)) !important;
}

/* ---------- PRODUCT CARDS (clean, soft lift) ------------ */
a.border-2.border-white\/5.rounded-xl{
  border-color: rgba(var(--ds-acc), 0.14) !important;
  background: rgba(var(--ds-line), 0.02) !important;
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
a.border-2.border-white\/5.rounded-xl:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--ds-acc), 0.3) !important;
  background: rgba(var(--ds-line), 0.035) !important;
  box-shadow: 0 22px 44px -26px rgba(0,0,0,0.7);
}
a.border-2.border-white\/5.rounded-xl img.aspect-video{
  transition: transform var(--t-med) var(--ease);
}
a.border-2.border-white\/5.rounded-xl:hover img.aspect-video{ transform: scale(1.03); }
a.border-2.border-white\/5.rounded-xl h3.text-xl{ font-family: var(--ds-head) !important; letter-spacing: -0.01em; }
a.border-2.border-white\/5.rounded-xl span.text-accent-500{ font-weight: 700 !important; color: rgb(var(--ds-acc)) !important; }
/* arrow chip (svg lives inside span.text-accent-500) nudges on hover */
a.border-2.border-white\/5.rounded-xl span.text-accent-500 > svg{ transition: transform var(--t-fast) var(--ease); }
a.border-2.border-white\/5.rounded-xl:hover span.text-accent-500 > svg{ transform: translateX(3px); }

/* ---------- STATS (clean big numbers, not mono) --------- */
.component p.text-5xl{
  font-family: var(--ds-head) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
.component p.text-5xl.font-semibold + h4{
  color: rgba(var(--cl-t-primary), 0.55) !important;
}

/* ---------- FAQ (clean question + smooth chevron) ------- */
.component div[x-data] > button > h4{
  font-family: var(--ds-head) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
}
.component div[x-data] > button:has(> h4) > svg{
  transition: transform var(--t-med) var(--ease), color var(--t-fast) var(--ease);
}
.component div[x-data] > button:has(> h4):hover > svg{ color: rgb(var(--ds-acc)); }

/* ---------- FOOTER -------------------------------------- */
footer.component{ border-top: 1px solid rgba(var(--ds-acc), 0.14); }
footer.component a:not(:has(svg)){ transition: color var(--t-fast) var(--ease); }
footer.component a:not(:has(svg)):hover{ color: rgb(var(--ds-acc)) !important; }

/* ---------- SCROLLBAR / SELECTION / FOCUS --------------- */
*{ scrollbar-width: thin; scrollbar-color: rgba(var(--ds-line),0.18) transparent; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: rgba(var(--ds-acc), 0.30); border-radius: 9999px; border: 2px solid rgb(var(--ds-ink)); }
::-webkit-scrollbar-thumb:hover{ background: rgba(var(--ds-acc), 0.5); }
::selection{ background: rgba(var(--ds-acc), 0.85); color: rgb(var(--ds-ink)); }
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid rgb(var(--ds-acc)) !important;
  outline-offset: 2px !important;
}

/* ---------- GOLD SHINE KEYFRAMES ------------------------ */
@keyframes ds-goldshine{
  0%{ background-position: 200% center; }
  100%{ background-position: -60% center; }
}
@keyframes ds-glare{
  0%{ left: -60%; }
  18%{ left: 150%; }
  100%{ left: 150%; }
}

/* ---------- REDUCED MOTION ------------------------------ */
@media (prefers-reduced-motion: reduce){
  html, html.scroll-smooth{ scroll-behavior: auto !important; }
  *, *::before, *::after{ transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}