/* ─────────────────────────────────────────────────────────────
   PureSkinHQ — glass + glow theme
   Loaded after every page's own styles (see injectGlassTheme in
   server.js). The compiled app CSS can't be edited, so the store pages
   are restyled here through their stable Tailwind class names, scoped
   under #root. Guide / learn / reviews pages share the plain class
   names below the "Standalone pages" divider.
   ───────────────────────────────────────────────────────────── */

:root {
  --g-bg: #04080F;
  --g-text: #EEF2FF;
  --g-text-2: #B4BFDA;
  --g-text-3: #8D9BBD;
  --g-gold: #D4AF37;
  --g-gold-hi: #F0D078;
  --g-glass: linear-gradient(145deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.03) 100%);
  --g-glass-flat: rgba(255,255,255,.045);
  --g-glass-dark: rgba(8,13,28,.58);
  --g-line: rgba(255,255,255,.12);
  --g-line-soft: rgba(255,255,255,.08);
  --g-hi: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.04);
  --g-blur: blur(18px) saturate(165%);
  --g-glow: 0 0 0 1px rgba(240,208,120,.22), 0 10px 44px -10px rgba(212,175,55,.5);
  --g-glow-soft: 0 8px 32px -12px rgba(212,175,55,.35);
}

/* ── Aurora canvas ─────────────────────────────────────────── */
html { background: var(--g-bg); }
body {
  background-color: var(--g-bg) !important;
  background-image:
    radial-gradient(60% 45% at 12% 0%,  rgba(212,175,55,.16) 0%, transparent 62%),
    radial-gradient(50% 50% at 92% 18%, rgba(110,80,220,.17) 0%, transparent 62%),
    radial-gradient(55% 45% at 78% 100%, rgba(30,170,190,.12) 0%, transparent 62%),
    radial-gradient(45% 40% at 0% 85%,  rgba(212,120,90,.09) 0%, transparent 62%);
  background-attachment: fixed;
}
/* the home page already paints its own fixed orbs on body::after */
body::after {
  background:
    radial-gradient(60% 45% at 12% 0%,  rgba(212,175,55,.16) 0%, transparent 62%),
    radial-gradient(50% 50% at 92% 18%, rgba(110,80,220,.17) 0%, transparent 62%),
    radial-gradient(55% 45% at 78% 100%, rgba(30,170,190,.12) 0%, transparent 62%),
    radial-gradient(45% 40% at 0% 85%,  rgba(212,120,90,.09) 0%, transparent 62%),
    var(--g-bg) !important;
}

/* ══ STORE (React app) ═════════════════════════════════════════ */

/* page backgrounds become transparent so the aurora shows through */
#root .bg-background,
#root .bg-\[\#FAFAFA\] { background-color: transparent !important; }
#root { color: var(--g-text); }

/* header — frosted bar with a thin gold glow line */
#root header.sticky {
  background: rgba(8,13,28,.5) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-bottom: 1px solid var(--g-line) !important;
  box-shadow: 0 1px 0 rgba(240,208,120,.12), 0 12px 40px -18px rgba(0,0,0,.7) !important;
}
#root header nav a { transition: color .25s, text-shadow .25s; }
#root header nav a:hover { text-shadow: 0 0 14px rgba(240,208,120,.65); }

/* footer */
#root footer {
  background: rgba(6,10,22,.6) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-top: 1px solid var(--g-line) !important;
}

/* dark banner sections (shop hero, home "story" band) */
#root main section.bg-\[\#1A1918\]:not(.relative),
#root main .bg-\[\#1A1918\].py-16 {
  background: linear-gradient(160deg, rgba(212,175,55,.09), rgba(8,13,28,.55) 55%, rgba(110,80,220,.08)) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-top: 1px solid var(--g-line-soft); border-bottom: 1px solid var(--g-line-soft);
}
/* gold ribbon strip */
#root .bg-\[\#D4AF37\]\/10 {
  background: linear-gradient(90deg, rgba(212,175,55,.06), rgba(212,175,55,.16), rgba(212,175,55,.06)) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-color: rgba(240,208,120,.28) !important;
  box-shadow: 0 0 60px -20px rgba(212,175,55,.5);
}

/* panels / cards (checkout, cart, account, tracking …) */
#root .bg-white,
#root .bg-card {
  background: var(--g-glass) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-color: var(--g-line) !important;
  border-radius: 16px;
  box-shadow: var(--g-hi), 0 18px 50px -24px rgba(0,0,0,.75);
  color: var(--g-text);
}
#root .bg-gray-50, #root .bg-secondary\/50 { background: var(--g-glass-flat) !important; border-radius: 12px; }
#root .bg-gray-200 { background: rgba(255,255,255,.12) !important; }

/* text */
#root .text-\[\#1A1918\], #root .text-gray-900, #root .text-foreground,
#root .text-card-foreground, #root .text-foreground\/50 { color: var(--g-text) !important; }
#root .text-foreground\/50 { opacity: .6; }
#root .text-gray-600, #root .text-gray-500 { color: var(--g-text-2) !important; }
#root .text-gray-400, #root .text-muted-foreground { color: var(--g-text-3) !important; }
#root .text-gray-300 { color: #C7D0E6 !important; }
#root .text-gray-200 { color: #DDE3F2 !important; }
#root .placeholder\:text-muted-foreground::placeholder { color: var(--g-text-3) !important; }
/* …but dark-on-gold stays dark */
#root .bg-\[\#D4AF37\], #root .bg-primary { color: #1a1308 !important; }
#root .bg-\[\#D4AF37\] .text-\[\#1A1918\], #root .bg-\[\#D4AF37\].text-\[\#1A1918\] { color: #1a1308 !important; }

/* gold: glow on text, badges, icons */
#root h1 .text-\[\#D4AF37\], #root h2 .text-\[\#D4AF37\] {
  text-shadow: 0 0 28px rgba(240,208,120,.55), 0 0 64px rgba(212,175,55,.3);
}
#root .text-\[\#D4AF37\] svg { filter: drop-shadow(0 0 6px rgba(240,208,120,.55)); }
#root span.bg-\[\#D4AF37\], #root div.bg-\[\#D4AF37\]:not(.w-full) {
  background: linear-gradient(135deg, #F6DD8E, #D4AF37) !important;
  box-shadow: 0 0 18px rgba(240,208,120,.55);
}

/* borders */
#root .border-gray-100, #root .border-gray-200, #root .border-gray-300 { border-color: var(--g-line) !important; }
#root .border-\[\#2C2A25\], #root .border-gray-700, #root .border-gray-800 { border-color: var(--g-line-soft) !important; }
#root .border-\[\#1A1918\] { border-color: rgba(240,208,120,.45) !important; }

/* primary buttons: dark → glowing gold glass */
#root button.bg-\[\#1A1918\], #root a.bg-\[\#1A1918\]:not(.aspect-square):not(.group) {
  background: linear-gradient(135deg, #F6DD8E 0%, #D4AF37 55%, #B8962E 100%) !important;
  color: #1a1308 !important;
  border: 1px solid rgba(255,236,170,.6) !important;
  border-radius: 12px;
  box-shadow: var(--g-glow), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s;
}
#root button.bg-\[\#1A1918\]:hover:not(:disabled), #root a.bg-\[\#1A1918\]:hover:not(.aspect-square):not(.group) {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(255,236,170,.5), 0 14px 56px -8px rgba(240,208,120,.75), inset 0 1px 0 rgba(255,255,255,.6);
}
#root button.bg-\[\#1A1918\]:disabled { filter: grayscale(.6) brightness(.7); box-shadow: none; }
/* gold buttons */
#root a.bg-\[\#D4AF37\], #root button.bg-\[\#D4AF37\] {
  background: linear-gradient(135deg, #F6DD8E 0%, #D4AF37 60%, #C09A2C 100%) !important;
  border-radius: 12px;
  box-shadow: var(--g-glow), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .25s ease, box-shadow .25s ease;
}
#root a.bg-\[\#D4AF37\]:hover, #root button.bg-\[\#D4AF37\]:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,236,170,.55), 0 16px 60px -8px rgba(240,208,120,.8), inset 0 1px 0 rgba(255,255,255,.55);
}
/* outline buttons (hero "Explore") → glass */
#root a.border.border-white, #root button.border.border-white {
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-color: rgba(255,255,255,.35) !important; border-radius: 12px;
  box-shadow: var(--g-hi);
  transition: box-shadow .25s, transform .25s;
}
#root a.border.border-white:hover, #root button.border.border-white:hover {
  transform: translateY(-2px); box-shadow: 0 0 36px -6px rgba(255,255,255,.55);
}

/* inputs */
#root input, #root select, #root textarea {
  background: rgba(255,255,255,.05) !important;
  color: var(--g-text) !important;
  border: 1px solid var(--g-line) !important;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
#root input::placeholder, #root textarea::placeholder { color: var(--g-text-3); }
#root input:focus, #root select:focus, #root textarea:focus {
  outline: none; background: rgba(255,255,255,.08) !important;
  border-color: rgba(240,208,120,.7) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,.2), 0 0 26px -4px rgba(212,175,55,.5) !important;
}
#root select, #root input, #root textarea { border-radius: 10px !important; }
#root select option { background: #0A1120; color: var(--g-text); }
#root input[type="checkbox"], #root input[type="radio"] { accent-color: var(--g-gold); }

/* product + category tiles */
#root a.group.flex.flex-col {
  background: var(--g-glass);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-line); border-radius: 18px; padding: 10px 10px 16px;
  box-shadow: var(--g-hi), 0 20px 50px -28px rgba(0,0,0,.8);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
#root a.group.flex.flex-col:hover {
  transform: translateY(-6px);
  border-color: rgba(240,208,120,.45);
  box-shadow: var(--g-hi), var(--g-glow);
}
#root a.group.flex.flex-col > div:first-child { border-radius: 12px; overflow: hidden; }
#root a.group.flex.flex-col > div:not(:first-child) { padding-left: 6px; padding-right: 6px; }
#root a.group.aspect-square {
  border-radius: 18px; border: 1px solid var(--g-line);
  box-shadow: var(--g-hi), 0 20px 50px -28px rgba(0,0,0,.8);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
#root a.group.aspect-square:hover { transform: translateY(-5px); border-color: rgba(240,208,120,.5); box-shadow: var(--g-glow); }

/* ── Product photos: fit the whole picture, never crop or zoom ──
   Photos come in every shape (phone shots, portrait/landscape), so they are
   contained inside a soft neutral frame instead of being cropped to fill it.
   Decorative images (hero, category tiles, "story" image) keep cover. */
#root a.group.flex.flex-col .aspect-\[4\/5\],
#root .aspect-square.bg-white,
#root .w-24.h-24.bg-white,
#root .w-16.h-16.bg-gray-50 {
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), inset 0 -20px 40px -30px rgba(120,100,60,.25) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#root a.group.flex.flex-col .aspect-\[4\/5\] img,
#root .aspect-square.bg-white img,
#root .w-24.h-24.bg-white img,
#root .w-16.h-16.bg-gray-50 img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
}
/* small thumbnails need less breathing room */
#root .w-24.h-24.bg-white img, #root .w-16.h-16.bg-gray-50 img { padding: 3%; }
/* the zoom-on-hover crops fitted photos; keep it subtle */
#root a.group.flex.flex-col:hover .aspect-\[4\/5\] img { transform: scale(1.03) !important; }
#root a.group.flex.flex-col .aspect-\[4\/5\] { border-radius: 12px; overflow: hidden; }

/* "Low stock" pill: the app styles it bg-red-600, but that class is missing from
   the compiled stylesheet, so it was bare white text that vanished on light photos. */
#root .bg-red-600 {
  background: linear-gradient(135deg, #E04646, #B3261E) !important;
  color: #fff !important; border-radius: 999px;
  box-shadow: 0 0 16px rgba(224,70,70,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
#root a.group.flex.flex-col .aspect-\[4\/5\] > div.absolute { border-radius: 999px; }

/* off-canvas / floating dark bits */
#root .fixed.bg-\[\#1A1918\], #root [role="dialog"] {
  background: rgba(8,13,28,.72) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border-color: var(--g-line) !important;
}
#root hr, #root .border-t, #root .border-b { border-color: var(--g-line-soft); }

/* ── Injected site-wide nav / trust strip ───────────────────── */
#psq-guides-nav {
  background: linear-gradient(180deg, rgba(8,13,28,.5), rgba(4,8,15,.85)) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-top: 1px solid var(--g-line) !important;
  box-shadow: 0 -30px 80px -40px rgba(212,175,55,.35);
}
#psq-guides-nav a { transition: color .2s, text-shadow .2s; }
#psq-guides-nav a:hover { color: var(--g-gold-hi) !important; text-shadow: 0 0 12px rgba(240,208,120,.6); }
#psq-guides-nav a[href="/shop"] {
  background: linear-gradient(135deg, #F6DD8E, #D4AF37) !important;
  border-radius: 12px !important; box-shadow: var(--g-glow); color: #1a1308 !important;
}
#psq-footer-legal { background: rgba(6,10,22,.7) !important; -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }

/* WhatsApp */
#wa-float { box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 8px 34px rgba(37,211,102,.55), inset 0 1px 0 rgba(255,255,255,.35) !important; }

/* ══ Standalone pages (guides, /learn, /reviews, legal) ════════ */
.hero { position: relative; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, rgba(212,175,55,.18), transparent 70%);
}
.badge {
  background: var(--g-glass) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid rgba(240,208,120,.5) !important;
  box-shadow: var(--g-hi), 0 0 22px -6px rgba(212,175,55,.5);
}
.card, .faq-item, .why-item, .review, .stat, .step {
  background: var(--g-glass) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-line) !important;
  box-shadow: var(--g-hi), 0 18px 46px -26px rgba(0,0,0,.8);
}
.card:hover, .why-item:hover { border-color: rgba(240,208,120,.5) !important; box-shadow: var(--g-hi), var(--g-glow); }
.card, .faq-item, .why-item { border-radius: 16px !important; }
.why-item { padding: 22px 24px !important; }
.faq-item[open] { border-color: rgba(240,208,120,.4) !important; box-shadow: var(--g-hi), var(--g-glow-soft); }
.cta-btn, .cta, .closing-cta a, a.cta-btn {
  background: linear-gradient(135deg, #F6DD8E 0%, #D4AF37 60%, #C09A2C 100%) !important;
  color: #1a1308 !important; border-radius: 12px !important;
  box-shadow: var(--g-glow), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.cta-btn:hover, .cta:hover, .closing-cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,236,170,.55), 0 16px 60px -8px rgba(240,208,120,.8), inset 0 1px 0 rgba(255,255,255,.55);
}
.hero .highlight, h1 .highlight { text-shadow: 0 0 30px rgba(240,208,120,.5), 0 0 70px rgba(212,175,55,.28); }
.closing-cta { background: linear-gradient(160deg, rgba(212,175,55,.12), rgba(110,80,220,.07)) !important; border-top: 1px solid var(--g-line) !important; }

/* graceful fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #root header.sticky, #root footer { background: #0b1220 !important; }
  #root .bg-white, #root .bg-card, .card, .faq-item, .why-item, .review { background: #0d1526 !important; }
}
@media (prefers-reduced-motion: reduce) {
  #root *, .card, .cta-btn { transition: none !important; }
}
/* big blur is expensive on low-end phones: soften it */
@media (max-width: 640px) { :root { --g-blur: blur(12px) saturate(150%); } }

/* ── Luxury logo (SPA header/footer) ─────────────────────── */
#root a[href="/"] > span.font-serif { font-family:'Cormorant Garamond',Georgia,serif !important; letter-spacing:.02em; text-transform:none; font-size:1.7rem !important; font-weight:600 !important; color:#fff !important; background:none !important; -webkit-text-fill-color:#fff; }
#root a[href="/"] > span.font-sans { font-family:'Cormorant Garamond',Georgia,serif !important; letter-spacing:.06em; font-weight:700 !important; font-size:1.7rem !important; margin-left:.08em !important; color:#E2BE63 !important; text-transform:uppercase; }
#root header a[href="/"]:has(> span.font-serif), #root footer a[href="/"]:has(> span.font-serif) { display:inline-flex; align-items:center; }
#root header a[href="/"]:has(> span.font-serif)::before, #root footer a[href="/"]:has(> span.font-serif)::before {
  content:'P'; font-family:'Cinzel',serif; font-weight:700; font-size:17px; line-height:1; width:32px; height:32px; margin-right:11px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color:#F0D078;
  background:#070D18; border:1px solid rgba(240,208,120,.7); box-shadow:0 0 14px rgba(201,168,76,.35), inset 0 0 0 3px #070D18, inset 0 0 0 4px rgba(201,168,76,.3); }

/* ── Luxury polish ───────────────────────────────────────── */
::selection { background:rgba(201,168,76,.35); color:#fff; }
html { scrollbar-color:#8a6f2c #070D18; scrollbar-width:thin; }
::-webkit-scrollbar { width:10px; } ::-webkit-scrollbar-track { background:#070D18; }
::-webkit-scrollbar-thumb { background:linear-gradient(#C9A84C,#7a5f22); border-radius:10px; border:2px solid #070D18; }
:focus-visible { outline:2px solid #F0D078; outline-offset:3px; border-radius:6px; }
#root h1, #root h2 { letter-spacing:.01em; }
#root h2::after { content:''; display:block; width:48px; height:1px; margin:14px auto 0; background:linear-gradient(90deg,transparent,#C9A84C,transparent); }
#root .text-left h2::after, #root h2.text-left::after { margin-left:0; background:linear-gradient(90deg,#C9A84C,transparent); }
.psq-brandbar { display:flex; justify-content:center; padding:18px 16px 4px; }
.psq-brandbar a { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; letter-spacing:.02em; font-size:26px; line-height:1; color:#fff; }
.psq-brandbar svg { width:30px; height:30px; filter:drop-shadow(0 0 8px rgba(201,168,76,.4)); }
.psq-brandbar em { font-style:normal; font-weight:700; letter-spacing:.06em; margin-left:calc(.08em - 10px); color:#E2BE63; }

/* ── Luxury landing pages (guides / SEO pages) ───────────── */
body > header.hero, body > .psq-brandbar + header.hero { padding: 90px 20px 70px; overflow: hidden;
  background: radial-gradient(ellipse 70% 90% at 50% -10%, rgba(240,208,120,.16), transparent 65%), radial-gradient(ellipse 40% 60% at 90% 100%, rgba(110,80,220,.12), transparent 70%); }
.psq-brandbar + header.hero { padding-top: 46px; }
body > header.hero .container::before { content:''; display:block; width:64px; height:1px; margin:0 auto 26px;
  background: linear-gradient(90deg, transparent, #F0D078, transparent); box-shadow: 0 0 14px rgba(240,208,120,.6); }
body > header.hero h1 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:clamp(2.3rem,5.4vw,3.7rem) !important; line-height:1.12 !important; letter-spacing:.005em; }
body > header.hero h1 .highlight { font-style:italic; background:linear-gradient(135deg,#FDF3D0,#F0D078 45%,#C9A84C); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 0 22px rgba(240,208,120,.35)); }
body > header.hero p.sub { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.35rem !important; font-style:italic; color:#C5CEE6 !important; }
body > header.hero .badge { font-size:.78rem !important; letter-spacing:.08em; text-transform:uppercase; }
body > header.hero ~ section h2, body > header.hero ~ .closing-cta h2 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:clamp(1.9rem,4vw,2.6rem) !important; letter-spacing:.005em; }
body > header.hero ~ section h2::after { content:'◆'; display:block; text-align:center; margin:14px auto 0; font-size:9px; color:#F0D078; letter-spacing:0; text-shadow:0 0 12px rgba(240,208,120,.8); }
body > header.hero ~ section .section-sub { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.15rem; font-style:italic; }
body > header.hero ~ section .intro p:first-child::first-letter { float:left; font-family:'Cormorant Garamond',Georgia,serif; font-size:4.1rem; line-height:.8; padding:8px 12px 0 0; color:#F0D078; text-shadow:0 0 24px rgba(240,208,120,.45); }
body > header.hero ~ section .intro { text-align:left; }
body > header.hero ~ section .card { position:relative; overflow:hidden; }
body > header.hero ~ section .card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,#F0D078,transparent); opacity:.55; }
body > header.hero ~ section .card h3, body > header.hero ~ section .why-item h3 { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.45rem !important; font-weight:600; letter-spacing:.01em; }
body > header.hero ~ section .card a.card-link { letter-spacing:.1em; text-transform:uppercase; font-size:.72rem !important; }
body > header.hero ~ section .why-item { border-left:1px solid rgba(240,208,120,.35) !important; background:linear-gradient(160deg,rgba(255,255,255,.04),transparent) !important; }
body > header.hero ~ section .faq-item summary { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.25rem; font-weight:600; }
body > header.hero ~ .cta-btn, .cta-btn { letter-spacing:.12em; text-transform:uppercase; font-size:.82rem !important; }
body > header.hero ~ .closing-cta { position:relative; padding:90px 20px !important; }
body > header.hero ~ .closing-cta::before { content:''; display:block; width:64px; height:1px; margin:0 auto 28px; background:linear-gradient(90deg,transparent,#F0D078,transparent); box-shadow:0 0 14px rgba(240,208,120,.6); }
body > header.hero ~ footer { border-top:1px solid transparent !important; border-image:linear-gradient(90deg,transparent,rgba(240,208,120,.5),transparent) 1; }
@media (max-width:600px){ body > header.hero ~ section .intro p:first-child::first-letter{ font-size:3.2rem; } }

/* ── Slick experience layer ──────────────────────────────── */
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
a, button, [role="button"], input, select, summary, label { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
body { animation:psqPageIn .4s ease-out; }
/* opacity only: a transform on <body> would turn it into the containing block for every position:fixed element */
@keyframes psqPageIn { from { opacity:0; } to { opacity:1; } }
/* tactile press feedback */
#root button, #root a[class*="rounded"], .cta-btn, .psq-btn { transition:transform .16s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease, border-color .2s ease; }
#root button:not(:disabled):active, #root a[class*="rounded"]:active, .cta-btn:active { transform:scale(.97); filter:brightness(.95); }
#root button:disabled { cursor:not-allowed; opacity:.55; }
/* images fade in instead of popping, with a shimmer while they load */
img.psq-lazy { opacity:0; transition:opacity .5s ease; }
img.psq-lazy.psq-in { opacity:1; }
.psq-shimmer { position:relative; overflow:hidden; }
.psq-shimmer::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,transparent 20%,rgba(240,208,120,.10) 50%,transparent 80%); background-size:200% 100%; animation:psqShim 1.3s linear infinite; }
@keyframes psqShim { from { background-position:200% 0; } to { background-position:-200% 0; } }
/* scroll reveal (static/landing pages) */
.psq-reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.psq-reveal.psq-in { opacity:1; transform:none; }
/* back to top */
#psq-top { position:fixed; left:16px; bottom:18px; width:44px; height:44px; border-radius:14px; border:1px solid rgba(201,168,76,.55); background:rgba(7,13,24,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#F0D078; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:90; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s, transform .25s; box-shadow:0 8px 24px rgba(0,0,0,.4); }
#psq-top.show { opacity:1; transform:none; pointer-events:auto; }
#psq-top svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
/* thin gold reading/scroll progress */
#psq-progress { position:fixed; top:0; left:0; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,#8a6f2c,#F0D078,#C9A84C); z-index:200; pointer-events:none; }
/* nicer inputs on mobile: avoid iOS zoom, comfortable targets */
@media (max-width:640px) { input, select, textarea { font-size:16px !important; } #root button, #root a[class*="rounded"] { min-height:40px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } body { animation:none; } .psq-reveal { opacity:1; transform:none; transition:none; } img.psq-lazy { opacity:1; transition:none; } .psq-shimmer::after { animation:none; } }

/* ── Home page extras (injected by experience.js) ─────────── */
.psq-hx { padding:84px 0; position:relative; }
.psq-hx .in { max-width:1180px; margin:0 auto; padding:0 20px; }
.psq-hx .eyebrow { display:block; text-align:center; font:600 11px/1 'Cinzel',serif; letter-spacing:.34em; color:#C9A84C; text-transform:uppercase; margin-bottom:14px; }
.psq-hx h2 { text-align:center; font:600 clamp(30px,4.6vw,46px)/1.1 'Cormorant Garamond',Georgia,serif; color:#fff; margin:0 0 12px; }
.psq-hx h2 em { color:#E2BE63; font-style:italic; }
.psq-hx .sub { text-align:center; color:#A8B4D0; font-size:15px; max-width:560px; margin:0 auto 38px; line-height:1.6; }
.psq-hx .grid6 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.psq-hx .tile { display:block; text-decoration:none; padding:24px 22px; border-radius:18px; border:1px solid rgba(201,168,76,.22); background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .25s, border-color .25s, box-shadow .25s; }
.psq-hx .tile:hover { transform:translateY(-4px); border-color:rgba(240,208,120,.7); box-shadow:0 18px 50px -18px rgba(240,208,120,.45); }
.psq-hx .tile .ic { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; background:#070D18; border:1px solid rgba(201,168,76,.45); }
.psq-hx .tile b { display:block; font:600 21px/1.2 'Cormorant Garamond',Georgia,serif; color:#fff; margin-bottom:6px; }
.psq-hx .tile span { display:block; color:#A8B4D0; font-size:13.5px; line-height:1.5; }
.psq-hx .tile i { display:inline-block; margin-top:12px; font:600 11px/1 'Cinzel',serif; letter-spacing:.18em; color:#E2BE63; font-style:normal; text-transform:uppercase; }
.psq-hx .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:s; }
.psq-hx .step { text-align:center; padding:28px 22px; border-radius:18px; border:1px solid rgba(201,168,76,.18); background:rgba(255,255,255,.03); }
.psq-hx .step .n { width:46px; height:46px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:700 18px 'Cinzel',serif; color:#1a1406; background:linear-gradient(135deg,#FDF3D0,#E2BE63 50%,#96782A); }
.psq-hx .step b { display:block; font:600 22px 'Cormorant Garamond',Georgia,serif; color:#fff; margin-bottom:6px; }
.psq-hx .step span { color:#A8B4D0; font-size:14px; line-height:1.55; }
.psq-hx .guides { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.psq-hx .gcard { display:block; text-decoration:none; padding:22px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); transition:border-color .25s, transform .25s; }
.psq-hx .gcard:hover { border-color:rgba(240,208,120,.6); transform:translateY(-3px); }
.psq-hx .gcard small { color:#C9A84C; font:600 10px 'Cinzel',serif; letter-spacing:.22em; text-transform:uppercase; }
.psq-hx .gcard b { display:block; margin:8px 0 6px; font:600 20px/1.25 'Cormorant Garamond',Georgia,serif; color:#fff; }
.psq-hx .gcard span { color:#A8B4D0; font-size:13.5px; line-height:1.5; }
.psq-hx .more { text-align:center; margin-top:26px; }
.psq-hx .more a { color:#E2BE63; text-decoration:none; font:600 12px 'Cinzel',serif; letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid rgba(226,190,99,.5); padding-bottom:4px; }
.psq-hx.hxcta .box { text-align:center; padding:52px 24px; border-radius:26px; border:1px solid rgba(201,168,76,.4); background:radial-gradient(120% 140% at 50% 0%,rgba(212,175,55,.16),rgba(7,13,24,.2) 70%); }
.psq-hx.hxcta .btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.psq-hx.hxcta a.b { text-decoration:none; padding:14px 26px; border-radius:12px; font:700 12px 'Cinzel',serif; letter-spacing:.16em; text-transform:uppercase; transition:transform .2s, box-shadow .2s; }
.psq-hx.hxcta a.b.gold { color:#1a1406; background:linear-gradient(135deg,#FDF3D0,#E2BE63 50%,#B8963A); box-shadow:0 10px 30px -8px rgba(240,208,120,.6); }
.psq-hx.hxcta a.b.wa { color:#fff; background:#128C4A; box-shadow:0 10px 30px -8px rgba(37,211,102,.5); }
.psq-hx.hxcta a.b:hover { transform:translateY(-2px); }
@media (max-width:820px) { .psq-hx { padding:56px 0; } .psq-hx .grid6, .psq-hx .guides { grid-template-columns:1fr 1fr; } .psq-hx .steps { grid-template-columns:1fr; } }
@media (max-width:480px) { .psq-hx .guides { grid-template-columns:1fr; } .psq-hx .grid6 { gap:10px; } .psq-hx .tile { padding:16px 14px; border-radius:14px; } .psq-hx .tile .ic { width:36px; height:36px; font-size:17px; margin-bottom:10px; } .psq-hx .tile b { font-size:17px; } .psq-hx .tile span { font-size:12.5px; } .psq-hx .tile i { margin-top:8px; } }
/* never allow sideways page scroll (off-canvas drawers) */
html, body { overflow-x:clip; }

/* ── Guide pages: compact hero + "In this guide" jump bar ──── */
body > header.hero .badges { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.psq-jump { position:relative; z-index:2; max-width:980px; margin:-18px auto 0; padding:0 16px; }
.psq-jump .in { display:flex; align-items:center; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:10px 12px; border-radius:16px; border:1px solid rgba(201,168,76,.28); background:rgba(7,13,24,.78); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 14px 40px -16px rgba(0,0,0,.6); }
.psq-jump .in::-webkit-scrollbar { display:none; }
.psq-jump b { flex:none; font:600 10px/1 'Cinzel',serif; letter-spacing:.2em; text-transform:uppercase; color:#C9A84C; padding:0 6px 0 4px; }
.psq-jump a { flex:none; text-decoration:none; color:#EEF2FF; font-size:13px; padding:8px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); white-space:nowrap; transition:border-color .2s, color .2s; }
.psq-jump a:hover, .psq-jump a.on { border-color:#E2BE63; color:#F0D078; }
section[id], h2[id] { scroll-margin-top:16px; }
@media (max-width:640px) {
  body > header.hero, body > .psq-brandbar + header.hero { padding:30px 16px 34px; }
  .psq-brandbar + header.hero { padding-top:24px; }
  body > header.hero .container::before { margin-bottom:14px; width:48px; }
  body > header.hero h1 { font-size:1.75rem !important; line-height:1.15 !important; margin-bottom:10px !important; }
  body > header.hero p.sub { font-size:1.02rem !important; line-height:1.45 !important; margin:0 auto 14px !important; }
  body > header.hero .badges { gap:6px; margin:0 0 16px !important; }
  body > header.hero .badge { font-size:.62rem !important; padding:6px 10px !important; letter-spacing:.05em !important; white-space:nowrap; }
  body > header.hero .cta-btn { padding:12px 28px !important; display:inline-block; }
  .psq-jump { margin-top:-14px; padding:0 10px; }
  body > header.hero ~ section { padding-top:34px !important; padding-bottom:34px !important; }
}
@media (min-width:641px) { body > header.hero, body > .psq-brandbar + header.hero { padding:64px 20px 56px; } .psq-brandbar + header.hero { padding-top:40px; } }

/* ── Product page extras ─────────────────────────────────── */
.psq-pdp { margin:18px 0 6px; }
.psq-pdp .psq-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.psq-chip { font-size:12.5px; padding:8px 12px; border-radius:999px; border:1px solid rgba(201,168,76,.3); background:rgba(255,255,255,.04); color:#C5CEE6; }
.psq-chip.warn { border-color:rgba(255,155,120,.6); color:#ffb59c; background:rgba(255,120,80,.08); font-weight:600; }
.psq-ask { display:inline-block; font-size:13.5px; color:#8be0ab; text-decoration:none; border-bottom:1px solid rgba(139,224,171,.4); padding-bottom:2px; }
.psq-related { padding:56px 0 70px; }
.psq-rel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.psq-rel { display:block; text-decoration:none; padding:12px; border-radius:16px; border:1px solid rgba(201,168,76,.2); background:rgba(255,255,255,.03); transition:transform .25s,border-color .25s; }
.psq-rel:hover { transform:translateY(-4px); border-color:rgba(240,208,120,.65); }
.psq-rel .ph { aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#efe9dc; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.psq-rel .ph img { width:100%; height:100%; object-fit:cover; }
.psq-rel .ph span { font:600 16px 'Cormorant Garamond',Georgia,serif; color:#6b5a2a; } .psq-rel .ph span b { display:inline; font:inherit; margin:0; color:#B8963A; }
.psq-rel small { display:block; color:#C9A84C; font:600 9.5px 'Cinzel',serif; letter-spacing:.18em; text-transform:uppercase; }
.psq-rel b { display:block; color:#fff; font:600 16px/1.25 'Cormorant Garamond',Georgia,serif; margin:4px 0; }
.psq-rel span { color:#E2BE63; font-size:14px; font-weight:600; }
@media (max-width:820px) { .psq-rel-grid { grid-template-columns:1fr 1fr; } }

/* ── "What people say online" ─────────────────────────────── */
.psq-online { padding:56px 0 24px; }
.psq-online .psq-ratings { display:flex; flex-direction:column; gap:8px; max-width:760px; margin:0 auto 22px; }
.psq-online .psq-ratings span { font-size:13.5px; color:#F0D078; padding:10px 14px; border-radius:12px; border:1px solid rgba(201,168,76,.28); background:rgba(201,168,76,.07); text-align:center; }
.psq-online .psq-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.psq-online .psq-two > div { padding:20px; border-radius:18px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.03); }
.psq-online .psq-two h3 { margin:0 0 10px; font:600 20px 'Cormorant Garamond',Georgia,serif; color:#fff; }
.psq-online ul { list-style:disc; margin:0; padding-left:20px; color:#C5CEE6; font-size:14px; line-height:1.6; } .psq-online li { margin-bottom:7px; }
.psq-online .psq-fit { margin-top:14px; padding:16px 20px; border-radius:16px; border:1px solid rgba(201,168,76,.25); background:rgba(201,168,76,.06); }
.psq-online .psq-fit p { margin:4px 0; color:#EEF2FF; font-size:14px; line-height:1.55; } .psq-online .psq-fit b { color:#E2BE63; }
.psq-online .psq-src { margin:18px 0 6px; font-size:13px; color:#A8B4D0; text-align:center; } .psq-online .psq-src a { color:#E2BE63; }
.psq-online .psq-disc { margin:0 auto; max-width:700px; font-size:12px; line-height:1.55; color:#8fa0c6; text-align:center; }
@media (max-width:720px) { .psq-online .psq-two { grid-template-columns:1fr; } }

/* image fallback: brand placeholder instead of blank cream box */
img.psq-broken{background:radial-gradient(circle at 50% 40%,#1a2236,#0a1220);object-fit:contain}

/* static-page navs: keep logo on one line on phones */
@media (max-width:520px){
  nav .nav-links{gap:14px!important;flex-shrink:0}
  nav .nav-links a:first-child:not(.active),nav .nav-links a:nth-child(n+3):not(.active){display:none}
  nav{padding-right:64px!important}
  nav .nav-logo{min-width:0}
  nav .psq-word{font-size:22px!important;white-space:nowrap}
}
nav .nav-logo .psq-mark{width:30px!important;height:30px!important;flex:none!important}
nav .nav-logo{gap:10px!important}
nav .psq-word em{margin-left:.08em!important}


/* ── shared header (hamburger · logo · search · bag) ── */
.psq-hdr{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;height:80px;padding:0 70px 0 16px;box-sizing:border-box;background:rgba(8,13,28,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.12);color:#fff;font-family:'Helvetica Neue',Arial,sans-serif}
.psq-hb{background:none;border:0;color:#fff;padding:8px;margin-left:-8px;cursor:pointer;display:inline-flex}
.psq-hb:hover,.psq-hr a:hover,.psq-hclose:hover{color:#E2BE63}
.psq-hl{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:26px;line-height:1;letter-spacing:.02em;white-space:nowrap}
.psq-hl .psq-lm{width:30px;height:30px;flex:none;filter:drop-shadow(0 0 8px rgba(201,168,76,.4))}
.psq-hl span{display:inline-flex}
.psq-hl em{font-style:normal;font-weight:700;letter-spacing:.06em;color:#E2BE63;margin-left:.06em}
.psq-hn{display:none}
.psq-hr{display:flex;align-items:center;gap:6px}
.psq-hr a{color:#fff;padding:8px;display:inline-flex;position:relative;text-decoration:none}
.psq-bag b{position:absolute;top:2px;right:0;min-width:16px;height:16px;border-radius:8px;background:#E2BE63;color:#070D18;font-size:10px;line-height:16px;text-align:center;font-weight:700;padding:0 3px}
.psq-hd{position:fixed;inset:0;z-index:9990;background:linear-gradient(180deg,#0b1222,#070d18);padding:96px 20px 28px;overflow:auto;display:flex;flex-direction:column}
.psq-hd[hidden]{display:none}
.psq-hclose{position:absolute;top:28px;right:18px;background:none;border:0;color:#fff;padding:8px;cursor:pointer}
.psq-hdl{display:flex;flex-direction:column}
.psq-hdl a{color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font-size:19px;font-weight:500;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.psq-hdl a:hover{color:#E2BE63}
.psq-hwa{margin-top:28px;text-align:center;background:linear-gradient(135deg,#F0D078,#C9A84C);color:#070D18;font-weight:700;border-radius:10px;padding:14px;text-decoration:none}
html.psq-lock,html.psq-lock body{overflow:hidden}
body.psq-hdr-on > nav:not(.psq-hn),body.psq-hdr-on > .psq-brandbar{display:none!important}
@media (min-width:768px){
  .psq-hb{display:none}
  .psq-hdr{padding:0 84px 0 32px}
  .psq-hn{display:flex;gap:30px;margin:0 auto}
  .psq-hn a{color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:13px;font-weight:500}
  .psq-hn a:hover,.psq-hn a.on{color:#E2BE63}
}
/* shop app's own mobile menu: solid panel, same look as the shared drawer */
#root .fixed.inset-0.z-40.bg-\[\#1A1918\]{background:linear-gradient(180deg,#0b1222,#070d18)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}