/*
 * dezayer-figma.css — figma-aligned theme override (light cream + brown + gold).
 * Design tokens extracted directly from the Figma file via /v1/files API on
 * 2026-05-04. Loaded LAST in the layout, so its declarations win over the
 * dark-mode app.css and dezayer-extended.css. Restyles the existing class
 * hooks (.ann, .hdr, .hero, .sec, .prod-card, .news, .foot, etc.) to match
 * the Figma frames — no new template scaffolding required.
 *
 * Color tokens (from /v1/files frequency analysis):
 *   #f8f1e7 cream body (most common BG)
 *   #fcf8f1 lightest cream (cards)
 *   #faf5ec cream-soft (alt sections)
 *   #f6edd8 warm cream (notice bar)
 *   #2a2520 brown-ink (NOT pure black — most common dark)
 *   #38322b ink-2
 *   #6b5f50 muted brown body text
 *   #a89d8c soft brown
 *   #c8a668 PRIMARY gold (lighter, dominant)
 *   #a68549 deep gold
 *   #a8895a mid gold
 *   #e5d3ab sand (badges/accents)
 *   #cbbfae beige
 *   #3d7a4f success green
 *
 * Type tokens:
 *   Playfair Display — display serif (headings + italic-gold word treatments)
 *   DM Sans — body / nav / eyebrow caps
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
    /* Re-bind the existing variable surface to figma values */
    --gold:#c8a668; --gl:#e5d3ab; --gold-dim:#a68549;
    --gold-bg:rgba(200,166,104,.12);
    --gold-bdr:rgba(200,166,104,.32);
    --gold-glow:rgba(200,166,104,.28);

    --bg:#f8f1e7;       /* body cream */
    --bg2:#fcf8f1;      /* card cream */
    --bg3:#faf5ec;      /* alt section cream */

    --card:#fcf8f1;
    --card2:#faf5ec;

    --txt:#2a2520;      /* primary ink */
    --dim:#6b5f50;      /* muted body */
    --white:#2a2520;    /* "white" (used in headings) repurposed to ink */

    --emerald:#3d7a4f;
    --rose:#a04040;     /* keep a warm muted rose for sale badges */

    --bdr:rgba(42,37,32,.10);
    --bdr2:rgba(42,37,32,.16);

    --fd:'Playfair Display',Georgia,serif;
    --fb:'DM Sans',system-ui,sans-serif;

    --shadow:0 6px 24px rgba(42,37,32,.08);
    --shadow-lg:0 18px 50px rgba(42,37,32,.14);

    /* New figma-only tokens */
    --ink:#2a2520;
    --ink-2:#38322b;
    --ink-mute:#6b5f50;
    --ink-soft:#a89d8c;
    --cream:#f8f1e7;
    --cream-light:#fcf8f1;
    --cream-warm:#f6edd8;
    --sand:#e5d3ab;
    --beige:#cbbfae;
    --gold-deep:#a68549;
    --gold-mid:#a8895a;
}

body{background:var(--cream);color:var(--ink);font-family:var(--fb);font-weight:400;line-height:1.6}
::selection{background:var(--gold);color:var(--ink)}

/* ═══ FLOATING AI SIDEBAR (light invert) ═══ */
.ai-sidebar{background:rgba(252,248,241,.96);border:1px solid var(--bdr);border-left:0;box-shadow:var(--shadow)}
.ai-sb-ic{border:1px solid var(--bdr2);background:#fff}
.ai-sb-ic svg{stroke:var(--gold-deep)}
.ai-sb-txt{color:var(--ink-mute)}
.ai-sb-item:hover{background:rgba(200,166,104,.12)}
.ai-sb-item:hover .ai-sb-ic{border-color:var(--gold);box-shadow:0 0 12px var(--gold-glow)}
.ai-sb-item:hover .ai-sb-txt{color:var(--gold-deep)}
.ai-sb-badge{background:var(--emerald);border:2px solid var(--cream-light)}
.ai-sb-div{background:var(--bdr)}

/* ═══ TOP NOTICE BAR ═══ */
.ann{background:var(--ink);color:var(--cream-warm);text-align:center;padding:9px 20px;font-size:11px;font-weight:500;font-family:var(--fb);letter-spacing:2.16px;text-transform:uppercase}
.ann a{color:var(--gold);text-decoration:none;margin-left:10px;border-bottom:1px solid var(--gold);padding-bottom:1px}

/* ═══ HEADER ═══ */
.hdr{background:var(--cream);border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:1000}
.hdr-top{padding:16px 0;gap:24px}
.hdr-logo{display:inline-flex;align-items:center;line-height:0;text-decoration:none}
.hdr-logo img{height:88px;width:auto;display:block}
@media(max-width:640px){.hdr-logo img{height:64px}}
.hdr-search input{padding:10px 18px 10px 40px;border-radius:50px;border:1px solid var(--bdr2);background:#fff;color:var(--ink);font-family:var(--fb);font-size:13px}
.hdr-search input:focus{border-color:var(--gold)}
.hdr-search input::placeholder{color:var(--ink-soft)}
.hdr-search svg{stroke:var(--ink-mute)}
.hdr-act{color:var(--ink-mute);font-size:9.5px;letter-spacing:1.2px;font-family:var(--fb);font-weight:600}
.hdr-act:hover{color:var(--gold-deep)}
.hdr-act svg{stroke:currentColor}
.hdr-act.has-badge::after{display:none}  /* hide the legacy "2" pseudo-badge; real cart count is rendered in PHP */
.hdr-nav{border-top:1px solid var(--bdr);overflow:visible}
.hdr-nav a{color:var(--ink);font-size:11px;font-weight:600;letter-spacing:1.8px;font-family:var(--fb);padding:13px 18px}
.hdr-nav a:hover,.hdr-nav a.active{color:var(--gold-deep)}
.hdr-nav a.active::after{background:var(--gold);bottom:0}
.hdr-nav .nav-ai{background:var(--ink);color:var(--cream-warm);border-radius:30px;padding:8px 18px;letter-spacing:1.4px}
.hdr-nav .nav-ai:hover{background:var(--gold-deep);color:var(--cream-light);opacity:1}

/* Header search suggest dropdown — repaint for cream theme */
#hdr-search-suggest{background:#fff !important;border:1px solid var(--bdr2) !important;box-shadow:var(--shadow-lg) !important}

/* ═══ HERO ═══ */
/* Hero — full-bleed per Figma frame 46:2 (escapes .ctn 1220px container) */
.hero{background:var(--cream-warm);overflow:hidden}
.hero-in.ctn{max-width:100% !important;padding:0 !important;margin:0 !important}
.hero-in{min-height:900px;display:flex !important;align-items:stretch !important}
/* Kill the fadeUp staged animations from app.css — they made elements invisible
 * during the .22s/.35s/.48s delay window which broke headless screenshots and
 * felt slow on first paint. Direct visibility is more honest and faster. */
.hero-ai-tag,.hero-h,.hero-p,.hero-btns,.hero-stats{animation:none !important;opacity:1 !important;transform:none !important}
.hero-ai-tag{background:transparent;border:0;color:var(--gold-deep);letter-spacing:3.6px;font-size:12px;font-weight:500;font-family:var(--fb);padding:0;margin-bottom:22px}
.hero-ai-tag svg{stroke:var(--gold-deep)}
.hero-h{font-family:var(--fd);font-size:clamp(32px,3.8vw,52px);font-weight:500;line-height:1.06;color:var(--ink);letter-spacing:-0.5px;max-width:100%;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}
.hero-h em{font-style:italic;font-weight:400;color:var(--gold-deep)}
.hero-p{font-size:15px;color:var(--ink-mute);max-width:480px;line-height:1.75;margin-left:auto;margin-right:auto}

/* Buttons — solid dark pill + outlined cream */
.btn-g{padding:14px 30px;border-radius:50px;background:var(--ink);color:var(--cream-light);font-family:var(--fb);font-size:13px;font-weight:600;letter-spacing:.5px;border:0;transition:all .3s}
.btn-g::after{display:none}  /* kill the diagonal shine — figma uses solid */
.btn-g:hover{background:var(--ink-2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(42,37,32,.18)}
.btn-o{padding:14px 30px;border-radius:50px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--fb);font-size:13px;font-weight:600;letter-spacing:.5px}
.btn-o:hover{border-color:var(--gold-deep);color:var(--gold-deep);background:transparent}

/* Gold pill — used for "Capture Photo", "Subscribe", checkout CTAs */
.btn-gold{padding:14px 32px;border-radius:50px;background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%);color:var(--ink);font-family:var(--fb);font-size:13px;font-weight:600;letter-spacing:.5px;border:0;cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;gap:8px}
.btn-gold:hover{background:linear-gradient(180deg,var(--gold-deep) 0%,var(--gold-mid) 100%);box-shadow:0 8px 22px var(--gold-glow);transform:translateY(-2px)}

/* Crop the hero asset to the velvet-bust+earrings region per Figma —
   the source jpg has a small model-inset circle and an "AR Try-On Live"
   pill burnt into the top corners that don't exist in the Figma comp.
   `object-position` shifts the visible window onto the bust; `clip-path`
   trims the top sliver where the pill sits. Re-render with a real export
   from Figma when the rate-limit clears. */
.hero-stats{bottom:34px;left:-24px}
.hero-stat{background:var(--ink);color:var(--cream-light);border:0;backdrop-filter:none;box-shadow:0 12px 30px rgba(42,37,32,.18)}
.hero-stat-n{font-family:var(--fd);font-size:24px;font-weight:500;color:var(--gold)}
.hero-stat-t{color:var(--cream-warm);letter-spacing:1.8px;font-size:9.5px;font-weight:500}

/* ═══ DARK STATS STRIP (under hero) — figma shows a thin dark band ═══ */
.stats-strip{background:var(--ink);color:var(--cream-light);padding:22px 0}
.stats-strip-in{display:flex;justify-content:space-around;gap:24px;flex-wrap:wrap}
.stats-strip-it{text-align:center;padding:0 12px}
.stats-strip-n{font-family:var(--fd);font-size:24px;font-weight:500;color:var(--gold);line-height:1}
.stats-strip-t{font-size:10px;font-weight:500;letter-spacing:2px;color:var(--cream-warm);margin-top:6px;text-transform:uppercase}

/* ═══ AI FEATURES BANNER (3-pill row) ═══ */
.ai-banner{background:var(--ink);border-top:0;border-bottom:0;padding:24px 0}
.ai-pill{background:transparent;border:1px solid rgba(229,211,171,.20);border-radius:50px;padding:10px 22px;color:var(--cream-warm)}
.ai-pill:hover{border-color:var(--gold);background:rgba(200,166,104,.08);box-shadow:none}
.ai-pill-ic{background:transparent;border:1px solid rgba(229,211,171,.30);width:32px;height:32px}
.ai-pill-ic svg{stroke:var(--gold)}
.ai-pill-tt{color:var(--cream-light);font-size:12.5px;font-weight:600}
.ai-pill-ds{color:rgba(229,211,171,.65);font-size:10px}
.ai-pill-arrow{color:var(--gold)}

/* ═══ TRUST MARQUEE ═══ */
.trust{background:var(--cream-light);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
.trust-i{color:var(--ink-mute)}
.trust-dot{background:var(--gold-deep)}

/* ═══ SECTIONS ═══ */
.sec{padding:72px 0}
.sec-ey{font-size:11px;letter-spacing:3.6px;color:var(--gold-deep);font-weight:500;font-family:var(--fb);margin-bottom:16px;text-transform:uppercase}
.sec-h{font-family:var(--fd);font-size:clamp(28px,3.6vw,40px);font-weight:500;color:var(--ink);line-height:1.15;letter-spacing:-0.3px}
.sec-h em{font-style:italic;font-weight:400;color:var(--gold-deep)}
.sec-h .gold{font-style:normal;font-weight:500;color:var(--gold-deep)}
.sec-link{color:var(--gold-deep);font-size:12px;font-weight:600;letter-spacing:.5px}
.sec-link:hover{color:var(--ink)}

/* ═══ CATEGORIES (circular thumbs) ═══ */
.cat-img{width:130px;height:130px;border:0;background:var(--cream-light);box-shadow:0 8px 22px rgba(42,37,32,.10)}
.cat-card:hover .cat-img{box-shadow:0 12px 30px var(--gold-glow)}
.cat-nm{font-family:var(--fd);font-size:16px;font-weight:500;color:var(--ink)}
.cat-ct{font-size:10.5px;color:var(--ink-mute);letter-spacing:.5px}

/* ═══ PRODUCT CARDS ═══ */
.prod-card{background:var(--cream-light);border:1px solid var(--bdr);border-radius:14px}
.prod-card:hover{box-shadow:var(--shadow-lg);border-color:var(--gold-bdr)}
.prod-img{background:var(--cream)}
.prod-badge{font-size:9px;font-weight:600;letter-spacing:1px;border-radius:4px;padding:5px 10px}
.badge-new{background:var(--emerald);color:#fff}
.badge-sale{background:var(--rose);color:#fff}
.badge-hot{background:var(--gold-deep);color:#fff}
.prod-wish{background:rgba(252,248,241,.92);border:1px solid var(--bdr2)}
.prod-wish svg{stroke:var(--ink)}
.prod-quick{background:rgba(42,37,32,.92)}
.prod-qb{background:var(--gold);color:var(--ink);font-weight:600}
.prod-qb:hover{background:var(--gold-deep);color:var(--cream-light)}
.prod-cat{color:var(--ink-mute);font-size:10.5px;letter-spacing:1.4px;font-weight:500;text-transform:uppercase}
.prod-nm{font-family:var(--fd);font-size:16px;font-weight:500;color:var(--ink)}
.prod-pn{font-family:var(--fb);font-size:14px;font-weight:600;color:var(--ink)}
.prod-pw{color:var(--ink-soft);font-size:12px}
.prod-star{fill:var(--gold-deep)}
.prod-star-e{fill:var(--bdr2)}

/* ═══ AI SHOWCASE (cream cards on cream BG) ═══ */
.aix-card{background:var(--cream-light);border:1px solid var(--bdr);border-radius:18px;padding:36px 30px}
.aix-card::before{display:none}
.aix-card:hover{border-color:var(--gold-bdr);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.aix-num{color:rgba(200,166,104,.20);font-family:var(--fd);font-weight:400;font-size:64px}
.aix-ic{background:transparent;border:1px solid var(--gold-bdr)}
.aix-ic svg{stroke:var(--gold-deep)}
.aix-tt{font-family:var(--fd);font-size:22px;font-weight:500;color:var(--ink)}
.aix-ds{color:var(--ink-mute);font-size:13px;line-height:1.7}
.aix-lk{color:var(--gold-deep);font-size:12px;font-weight:600}
.aix-tag{background:var(--gold-deep);color:#fff;font-weight:600;letter-spacing:1px}

/* ═══ BRIDAL BANNER (dark CTA section) ═══ */
.banner{background:var(--ink);border:0;border-radius:18px;color:var(--cream-light);box-shadow:0 16px 50px rgba(42,37,32,.18)}
.banner-ct{color:var(--cream-light);padding:60px 50px}
.banner-ey{color:var(--gold);letter-spacing:3.6px;font-size:11px;font-weight:500;font-family:var(--fb);text-transform:uppercase;margin-bottom:14px}
.banner-h{font-family:var(--fd);font-size:clamp(28px,3.4vw,40px);font-weight:500;color:var(--cream-light);line-height:1.15;letter-spacing:-0.2px}
.banner-h em{font-style:italic;font-weight:400;color:var(--gold)}
.banner-p{color:rgba(229,211,171,.78);font-size:14px;line-height:1.75}
.banner .btn-g{background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%);color:var(--ink)}
.banner .btn-g:hover{background:linear-gradient(180deg,var(--gold-deep) 0%,var(--gold-mid) 100%);box-shadow:0 8px 22px var(--gold-glow)}

/* ═══ REVIEWS ═══ */
.rev-card{background:var(--cream-light);border:1px solid var(--bdr);border-radius:14px}
.rev-card:hover{border-color:var(--gold-bdr);box-shadow:var(--shadow)}
.rev-av{background:var(--ink);color:var(--cream-light);font-weight:600}
.rev-nm{color:var(--ink);font-weight:600;font-size:13px}
.rev-loc{color:var(--ink-mute);font-size:10.5px}
.rev-star2{fill:var(--gold-deep)}
.rev-txt{color:var(--ink-mute);font-size:13px;line-height:1.7}
.rev-prod{background:var(--cream);border:1px solid var(--bdr)}
.rev-prod-nm{color:var(--ink);font-weight:600}
.rev-prod-pr{color:var(--gold-deep)}

/* ═══ NEWSLETTER ═══ */
.news{background:var(--ink);border:0;border-radius:18px;color:var(--cream-light);padding:54px 40px}
.news .sec-ey{color:var(--gold);letter-spacing:3.6px}
.news .sec-h{color:var(--cream-light);font-family:var(--fd);font-weight:500}
.news .sec-h em{color:var(--gold);font-style:italic;font-weight:400}
.news p{color:rgba(229,211,171,.78) !important}
.news-form{margin-top:22px}
.news-inp{background:var(--cream-warm);border:0;color:var(--ink);font-family:var(--fb);font-size:14px;padding:14px 22px;border-radius:50px}
.news-inp:focus{box-shadow:0 0 0 2px var(--gold)}
.news-inp::placeholder{color:var(--ink-mute)}
.news .btn-g{background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%);color:var(--ink);font-weight:600}
.news .btn-g:hover{background:linear-gradient(180deg,var(--gold-deep) 0%,var(--gold-mid) 100%)}

/* ═══ FOOTER (full dark) ═══ */
.foot{background:var(--ink);color:rgba(229,211,171,.62);padding:60px 0 26px;margin-top:0;border-top:0}
.foot-brand-link{display:inline-block;line-height:0;margin-bottom:16px}
.foot-brand-img{height:48px;width:auto;display:block;filter:brightness(1.1)}
.foot-brand{font-family:var(--fd);font-size:24px;font-weight:600;color:var(--gold);letter-spacing:1.5px}
.foot-desc{color:rgba(229,211,171,.55);font-size:12px;line-height:1.75}
.foot-col-h{font-size:11px;letter-spacing:2.4px;color:var(--gold);font-weight:500;font-family:var(--fb);text-transform:uppercase;margin-bottom:14px}
.foot-col a{color:rgba(229,211,171,.62);font-size:12.5px;font-family:var(--fb);font-weight:400;padding:4px 0}
.foot-col a:hover{color:var(--gold)}
.foot-bot{border-top:1px solid rgba(229,211,171,.10);font-size:11px;color:rgba(229,211,171,.45);padding-top:22px}
.foot-pay{background:rgba(229,211,171,.06);border:1px solid rgba(229,211,171,.10);color:rgba(229,211,171,.62);font-size:9.5px;letter-spacing:1px;font-weight:500}

/* ═══ WHATSAPP FAB (unchanged — green is brand-correct on light too) ═══ */
.wa{box-shadow:0 6px 20px rgba(37,211,102,.35)}

/* ═══ PRODUCT PAGE — italic-gold brand line ═══ */
.h-em{font-style:italic;color:var(--gold-deep);font-weight:400}
.h-display{font-family:var(--fd);font-weight:500;color:var(--ink);letter-spacing:-0.2px;line-height:1.15}
.eyebrow{font-family:var(--fb);font-size:11px;font-weight:500;letter-spacing:3.6px;color:var(--gold-deep);text-transform:uppercase}

/* ═══ MISC: alert-warn / co-card / cb-row used elsewhere — keep readable on cream ═══ */
.alert-warn{background:rgba(168,137,90,.10);border:1px solid var(--gold-bdr);color:var(--ink);border-radius:10px;padding:14px 18px}
.co-card{background:var(--cream-light);border:1px solid var(--bdr);border-radius:14px;padding:22px}
.co-h{font-family:var(--fd);font-size:20px;font-weight:500;color:var(--ink)}
.cb-row:hover{border-color:var(--gold-bdr) !important}

/* ═══ ACCOUNT NAV / PROFILE — readable on cream ═══ */
.acct-layout{display:grid;grid-template-columns:240px 1fr;gap:30px}
.acct-nav a{display:block;padding:10px 14px;border-radius:8px;color:var(--ink-mute);font-size:13px;text-decoration:none}
.acct-nav a:hover{background:var(--cream-light);color:var(--ink)}
.acct-nav a.active{background:var(--ink);color:var(--cream-light);font-weight:500}
@media(max-width:768px){.acct-layout{grid-template-columns:1fr}}

/* ═══ Search-suggest dropdown internal styles (overrides inline color vars used in JS) ═══ */
#hdr-search-suggest [style*="color:var(--gold)"]{color:var(--gold-deep) !important}
#hdr-search-suggest [style*="color:var(--dim)"]{color:var(--ink-mute) !important}

/* ═══ PAGINATION (custom view used via Paginator::defaultView) ═══ */
.dz-pag{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:32px 0 8px;font-family:var(--fb)}
.dz-pag-l{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--bdr);background:var(--cream-light);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;transition:all .2s;line-height:1}
.dz-pag-l:hover{border-color:var(--gold-bdr);color:var(--gold-deep);background:var(--cream-warm)}
.dz-pag-active{background:var(--ink);color:var(--cream-light);border-color:var(--ink)}
.dz-pag-active:hover{background:var(--ink);color:var(--cream-light)}
.dz-pag-disabled{opacity:.4;cursor:not-allowed}
.dz-pag-disabled:hover{border-color:var(--bdr);color:var(--ink);background:var(--cream-light)}
.dz-pag-dot{border:0;background:transparent;color:var(--ink-mute);min-width:auto;padding:0 4px}
.dz-pag-dot:hover{background:transparent;border:0;color:var(--ink-mute)}
.dz-pag-info{margin-left:auto;color:var(--ink-mute);font-size:12.5px}
@media(max-width:520px){.dz-pag-info{flex:1 0 100%;margin:6px 0 0;text-align:center}}

/* Hard-block any oversized SVGs that might leak from third-party paginators */
.dz-pag svg,nav[role="navigation"] svg{width:14px !important;height:14px !important}

/* ═══ PRODUCT-PAGE "TRY ON VIRTUALLY" LAUNCHER ═══ */
.pd-main-img{position:relative}
.pd-tryon{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:50px;background:rgba(42,37,32,.92);color:var(--cream-light);font-family:var(--fb);font-size:12px;font-weight:600;letter-spacing:.5px;text-decoration:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(229,211,171,.18);transition:all .25s;z-index:5}
.pd-tryon:hover{background:var(--ink);border-color:var(--gold);transform:translateY(-1px);box-shadow:0 10px 24px rgba(42,37,32,.20)}
.pd-tryon svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:480px){.pd-tryon span{display:none}.pd-tryon{padding:10px;width:42px;height:42px;justify-content:center}.pd-tryon svg{width:18px;height:18px}}

/* ═══ AI TRY-ON WIZARD (vertical stepper) ═══ */
.tw-wrap{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.tw-step{background:var(--cream-light);border:1px solid var(--bdr);border-radius:18px;padding:32px 36px;transition:all .35s;position:relative}
.tw-step.is-locked{opacity:.45;pointer-events:none}
.tw-step.is-active{border-color:var(--gold-bdr);box-shadow:0 12px 38px rgba(42,37,32,.10)}
.tw-step.is-done{background:var(--cream-warm)}
.tw-step-num{position:absolute;top:24px;right:28px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--gold);font-family:var(--fd);font-weight:500;font-size:14px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.tw-step.is-locked .tw-step-num{background:var(--bdr2);color:var(--ink-soft)}
.tw-step.is-done .tw-step-num{background:var(--gold-deep);color:var(--cream-light)}
.tw-step-eye{font-family:var(--fb);font-size:11px;font-weight:500;letter-spacing:3.6px;color:var(--gold-deep);text-transform:uppercase;margin-bottom:6px}
.tw-step-h{font-family:var(--fd);font-size:clamp(22px,2.6vw,30px);font-weight:500;color:var(--ink);line-height:1.2;margin-bottom:14px;letter-spacing:-0.2px}
.tw-step-h em{font-style:italic;color:var(--gold-deep);font-weight:400}
.tw-step-p{font-size:14px;color:var(--ink-mute);line-height:1.7;margin-bottom:18px;max-width:640px}

/* Step 1 — category cards */
.tw-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
@media(max-width:780px){.tw-cats{grid-template-columns:repeat(2,1fr)}}
.tw-cat{background:var(--cream);border:1.5px solid var(--bdr);border-radius:14px;padding:24px 18px 20px;text-align:center;cursor:pointer;font-family:var(--fb);transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:inherit}
.tw-cat:hover{border-color:var(--gold);background:var(--cream-light);transform:translateY(-3px);box-shadow:0 12px 28px rgba(42,37,32,.10)}
.tw-cat.is-active{border-color:var(--gold);background:var(--ink);color:var(--cream-light)}
.tw-cat.is-active .tw-cat-ic{background:var(--gold-bdr);border-color:var(--gold)}
.tw-cat.is-active .tw-cat-ic svg{stroke:var(--gold)}
.tw-cat-ic{width:48px;height:48px;border-radius:50%;background:var(--cream-warm);border:1px solid var(--gold-bdr);display:flex;align-items:center;justify-content:center;transition:all .25s}
.tw-cat-ic svg{width:22px;height:22px;stroke:var(--gold-deep);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tw-cat-nm{font-size:13px;font-weight:600;letter-spacing:.5px}
.tw-cat-tip{font-size:10.5px;color:inherit;opacity:.65;letter-spacing:.5px}

/* Step 2 — piece thumbnails */
.tw-pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.tw-piece{background:var(--cream);border:1.5px solid var(--bdr);border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;transition:all .25s;text-decoration:none;color:inherit;font-family:var(--fb);padding:0}
.tw-piece:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 20px rgba(42,37,32,.10)}
.tw-piece.is-active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-bdr)}
.tw-piece-img{aspect-ratio:1;background:var(--cream-light);overflow:hidden}
.tw-piece-img img{width:100%;height:100%;object-fit:cover}
.tw-piece-bd{padding:10px 12px}
.tw-piece-nm{font-size:12px;font-weight:600;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px}
.tw-piece-pr{font-size:11px;color:var(--gold-deep);font-weight:600}

/* Step 3 — camera + overlay */
.tw-stage{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;margin-top:8px}
@media(max-width:820px){.tw-stage{grid-template-columns:1fr}}
.tw-stage-canvas{position:relative;background:var(--ink);border-radius:14px;overflow:hidden;aspect-ratio:4/5;min-height:380px}
.tw-stage-canvas video,.tw-stage-canvas canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tw-stage-canvas .tw-status{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:rgba(42,37,32,.78);color:var(--cream-light);font-size:13px;font-family:var(--fb);text-align:center;backdrop-filter:blur(6px)}
.tw-stage-side{display:flex;flex-direction:column;gap:14px}
.tw-selected{display:flex;gap:12px;align-items:center;padding:14px;background:var(--cream);border:1px solid var(--bdr);border-radius:12px}
.tw-selected-img{width:64px;height:64px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--cream-light)}
.tw-selected-img img{width:100%;height:100%;object-fit:cover}
.tw-selected-nm{font-family:var(--fd);font-size:16px;color:var(--ink);font-weight:500;line-height:1.2;margin-bottom:2px}
.tw-selected-pr{font-size:12px;color:var(--gold-deep);font-weight:600}
.tw-tip{font-size:12.5px;color:var(--ink-mute);line-height:1.6;padding:12px 14px;background:var(--cream);border-radius:10px;border-left:2px solid var(--gold-bdr)}
.tw-stage-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.tw-stage-actions .btn-g,.tw-stage-actions .btn-o{flex:1 0 auto}

/* Step jump arrow */
.tw-step-jump{margin-top:20px;display:inline-flex;align-items:center;gap:6px;color:var(--gold-deep);font-family:var(--fb);font-size:12px;font-weight:600;letter-spacing:.5px;text-decoration:none;cursor:pointer;background:transparent;border:0;padding:0;font-family:inherit}
.tw-step-jump:hover{color:var(--ink)}
.tw-step-jump:disabled{opacity:.4;cursor:not-allowed}

/* ════════════════════════════════════════════════════════════════════════
   SKY VISTA AUDIT (May 5 2026) — wave 1 components
   ════════════════════════════════════════════════════════════════════════ */

/* ── Announcement bar dots (gold ornaments flanking the brand statement) */
.ann{display:flex;align-items:center;justify-content:center;gap:14px}
.ann-dots{color:var(--gold);letter-spacing:4px;font-weight:600;opacity:.85}
@media(max-width:520px){.ann-dots{display:none}}

/* ── Header theme toggle (light/dark) */
.hdr-theme{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--bdr2);color:var(--ink);cursor:pointer;transition:all .25s;padding:0}
.hdr-theme:hover{border-color:var(--gold-bdr);color:var(--gold-deep)}
.hdr-theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hdr-theme-moon{display:none}
[data-theme="dark"] .hdr-theme-sun{display:none}
[data-theme="dark"] .hdr-theme-moon{display:block}
.hdr-theme-sun{display:block}

/* ── Cart badge (small, gold) */
.hdr-cart-badge{position:absolute;top:-4px;right:calc(50% - 18px);background:var(--gold-deep);color:var(--cream-light);border-radius:999px;min-width:18px;height:18px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-family:var(--fb);line-height:1}

/* ── Header nav "Soon" tag for Clothing/Accessories */
.hdr-nav-soon{position:relative}
.hdr-nav-soon::after{content:attr(data-soon);position:absolute;top:6px;right:2px;font-size:8.5px;letter-spacing:1px;color:var(--gold-deep);background:transparent;padding:0;text-transform:uppercase;font-weight:600;opacity:.7}
.hdr-nav-soon{padding-right:30px !important}

/* ── Footer additions: brand block, socials, Lahore stamp */
.foot-brand-block{display:flex;flex-direction:column;gap:14px}
.foot-social{display:flex;gap:14px;margin-top:6px}
.foot-social a{width:32px;height:32px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:color .2s,transform .25s;padding:0}
.foot-social a:hover{color:var(--gold);transform:translateY(-2px);background:transparent}
.foot-social svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.foot-grid{grid-template-columns:1.6fr repeat(4,1fr) !important}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr !important}}
.foot-locale{color:var(--gold);opacity:.7;margin-left:4px}
.foot-pay{font-size:9.5px;letter-spacing:1.2px;font-weight:600;padding:5px 10px;background:rgba(229,211,171,.05);border:1px solid rgba(229,211,171,.18);border-radius:4px;color:rgba(229,211,171,.85)}

/* ── Hero additions: gold subhead + trust badge */
.hero-sub{font-family:var(--fd);font-size:20px;color:var(--gold-deep);font-style:italic;font-weight:400;margin:14px 0 22px;letter-spacing:.5px;text-align:left}
.hero-trust{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-size:13px;color:var(--ink-mute);font-family:var(--fb);justify-content:flex-start;width:100%}
.hero-trust-stars{color:var(--gold-deep);font-size:14px;letter-spacing:1px}

/* Hero text column: left-aligned, 43% width, hugs left page edge per Figma */
.hero-ct{text-align:left !important;display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:center !important;flex:0 0 46% !important;max-width:46% !important;padding:60px 32px 60px clamp(24px,8vw,140px) !important;overflow:visible}
.hero-ct .hero-h,.hero-ct .hero-p,.hero-ct .hero-ai-tag,.hero-ct .hero-sub{text-align:left;margin-left:0;margin-right:0;max-width:100%}
.hero-btns{justify-content:flex-start;margin-top:28px;flex-wrap:wrap}

/* Hero eyebrow tweak — match audit (gold, italic-friendly) */
.hero-ai-tag{display:inline-block;text-transform:none;letter-spacing:2.4px;font-style:normal}

/* ── Pill button "live" dot prefix (Figma: dark static dot) */
.btn-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:10px;vertical-align:middle}
/* ── Shop Collections gold arrow */
.btn-arrow{color:var(--gold);margin-left:10px;font-weight:400;vertical-align:middle}
.btn-g .btn-arrow{color:var(--gold)}

/* ── Stats strip (4-column dark band, replaces 2-stat hero overlay) */
.stats-strip{padding:30px 0;background:var(--ink);color:var(--cream-light)}
.stats-strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:center}
.stats-strip-in > .stats-strip-it{position:relative}
.stats-strip-in > .stats-strip-it + .stats-strip-it::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:46px;background:rgba(229,211,171,.16)}
.stats-strip-it{text-align:center;padding:0 16px}
.stats-strip-n{font-family:var(--fd);font-size:32px;font-weight:500;color:var(--gold);line-height:1;letter-spacing:-0.5px}
.stats-strip-t{font-size:11px;letter-spacing:2.4px;font-weight:500;color:var(--cream-warm);margin-top:8px;text-transform:uppercase}
@media(max-width:760px){.stats-strip-in{grid-template-columns:repeat(2,1fr);gap:24px}.stats-strip-in > .stats-strip-it + .stats-strip-it::before{display:none}}

/* ── Trust bar — single row (kill the marquee triple-render) */
.trust{padding:20px 0;background:var(--cream-light);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);overflow:visible}
.trust-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;animation:none;width:auto}
.trust-i{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-mute);font-weight:500;font-family:var(--fb);white-space:nowrap}
.trust-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--cream-warm);color:var(--gold-deep);font-size:13px;font-weight:600;line-height:1}
@media(max-width:900px){.trust-row{justify-content:center}.trust-i{font-size:11.5px}}

/* ── Section heading — stacked variant (eyebrow / heading / subtitle) */
.sec-head-stack{flex-direction:column;align-items:flex-start;gap:6px}
.sec-head-stack > div{width:100%}
.sec-sub{font-size:14.5px;color:var(--ink-mute);line-height:1.7;margin-top:10px;max-width:680px}

/* ── AI Tools 3-card grid */
.aix-section{background:var(--cream-light);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
.aix-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.aix-grid-3{grid-template-columns:1fr}}
.aix-grid-3 .aix-card{padding:36px 32px;text-align:left}
.aix-grid-3 .aix-num{font-family:var(--fd);font-size:48px;color:rgba(200,166,104,.22);position:absolute;top:18px;right:24px;line-height:1;font-weight:400}
.aix-grid-3 .aix-ic{width:54px;height:54px;border-radius:50%;background:var(--ink);border:0;color:var(--gold);margin-bottom:20px;display:flex;align-items:center;justify-content:center}
.aix-grid-3 .aix-ic svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.6}

/* ── Bridal banner — gold price tag, vertical inclusions list, gift-wrap caption */
.banner{display:grid;grid-template-columns:1fr 1.2fr;gap:0;align-items:stretch;border-radius:18px;overflow:hidden}
@media(max-width:820px){.banner{grid-template-columns:1fr}}
.banner-img{flex:0 0 auto;height:auto;position:relative;min-height:380px}
.banner-img img{width:100%;height:100%;object-fit:cover;display:block}
.banner-tag{position:absolute;top:24px;right:24px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 22px;background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%);color:var(--ink);border-radius:12px;box-shadow:0 8px 22px rgba(42,37,32,.20);text-align:center;min-width:140px;font-family:var(--fb)}
.banner-tag-from{font-size:10px;letter-spacing:1.6px;font-weight:600;text-transform:uppercase;opacity:.85}
.banner-tag-price{font-family:var(--fd);font-size:24px;font-weight:600;line-height:1;letter-spacing:-0.3px}
.banner-tag-note{font-size:10.5px;letter-spacing:.5px;opacity:.85;font-weight:500}
.banner-ct{padding:54px 50px}
.banner-ey{margin-bottom:14px;text-transform:uppercase;letter-spacing:3.6px;font-size:11px;font-weight:500;color:var(--gold);font-family:var(--fb)}
.banner-list{list-style:none;padding:0;margin:18px 0 22px;color:rgba(229,211,171,.78);font-size:13.5px;line-height:1.85;font-family:var(--fb);font-weight:400}
.banner-list li{padding:2px 0}
.banner-list li::before{content:"";display:inline-block;width:18px;height:1px;background:var(--gold);margin-right:10px;vertical-align:middle;opacity:.5}
.banner-cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.banner-cta-note{font-size:12px;color:rgba(229,211,171,.7);display:inline-flex;align-items:center}
.banner-cta-note .btn-dot{margin-right:6px}

/* ── Testimonials — 6-card grid with gold quote glyph */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
@media(max-width:980px){.tst-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tst-grid{grid-template-columns:1fr}}
.tst-card{position:relative;background:var(--cream-light);border:1px solid var(--bdr);border-radius:14px;padding:30px 26px 24px;margin:0;transition:all .3s;overflow:hidden}
.tst-card:hover{border-color:var(--gold-bdr);box-shadow:var(--shadow);transform:translateY(-2px)}
.tst-quote-mark{position:absolute;top:14px;right:22px;font-family:var(--fd);font-size:60px;color:var(--gold);opacity:.32;line-height:1;font-style:italic;font-weight:400}
.tst-stars{color:var(--gold-deep);font-size:14px;letter-spacing:2px;margin-bottom:12px}
.tst-quote{font-style:italic;font-family:var(--fd);font-size:15.5px;color:var(--ink);line-height:1.6;margin:0 0 22px;font-weight:400;quotes:none}
.tst-cite{display:flex;align-items:center;gap:12px;font-style:normal}
.tst-avatar{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg,var(--cream-warm),var(--sand));color:var(--gold-deep);font-family:var(--fd);font-size:18px;font-weight:500;flex-shrink:0}
.tst-name{display:block;font-family:var(--fb);font-size:13px;font-weight:600;color:var(--ink);line-height:1.2}
.tst-loc{display:block;font-family:var(--fb);font-size:11.5px;color:var(--ink-mute);letter-spacing:.5px;margin-top:2px}

/* Hide the legacy .banner-img mask we set earlier (the new banner uses a
 * fully-painted right-column image, no fade) */
/* Aggressive crop — the source jpg has a model-inset circle on the left
   and an "AR Try-On Live" pill at top-right baked in. Shift focus to the
   bust center and trim the pill region. */
/* Replaced hero-bridal.jpg with the clean Figma source asset
   (216-a1b210aabc94 — velvet bust + earrings on green, no model inset,
   no AR pill). Standard <img> with object-fit:cover is sufficient now. */
.hero-img{align-self:stretch;background:transparent;border-radius:0;flex:0 0 54%;max-width:54%;display:block;overflow:hidden;min-height:900px;position:relative}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% center;border-radius:0;display:block;clip-path:none;background:transparent}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS PASS (May 9 2026) — full audit at 375 / 414 / 768
   Driver: Adnan needs every page premium on phone before native wrapping.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Floating AI sidebar: hide on mobile (overlaps content) ── */
@media(max-width:880px){
  .ai-sidebar{display:none !important}
}

/* ── Announcement bar: clean mobile/tablet single-row layout ── */
@media(max-width:880px){
  .ann-soc{min-width:auto;gap:12px}
  .ann-soc a{width:28px;height:28px}
  .ann-soc svg{width:22px;height:22px}
  .ann-ic{width:28px;height:28px}
  .ann-ic svg{width:22px;height:22px}
  .ann-acts{min-width:auto;gap:14px;padding-right:0}
}
@media(max-width:760px){
  .ann{padding:0}
  .ann-row{flex-direction:row !important;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;flex-wrap:nowrap !important}
  .ann-soc{display:none !important}
  .ann-title{order:1;flex:1 1 auto;font-size:13px;line-height:1.3;min-width:0}
  .ann-acts{order:2;flex:0 0 auto;gap:14px}
  .ann-marquee-item{font-size:12.5px}
}
@media(max-width:480px){
  .ann-acts{gap:10px}
  .ann-ic{width:24px;height:24px}
  .ann-ic svg{width:20px;height:20px}
  .ann-ic-share,.ann-ic[data-panel-toggle="theme"]{display:none}
}

/* ── Modern polish: visible keyboard focus ring (gold, accessible)
 * Sits ABOVE everything via outline-offset; only on keyboard focus, not mouse. */
:where(a, button, [role="button"], [tabindex], input, select, textarea, summary):focus-visible{
  outline:2px solid var(--gold-deep,#C8A24E);
  outline-offset:3px;
  border-radius:6px
}
/* Skip outline on icons inside buttons */
button:focus-visible svg, a:focus-visible svg{outline:none}

/* ── Modern motion: smooth scroll, snap on carousels, no jump on # links */
html{scroll-behavior:smooth;scroll-padding-top:120px}
.prod-carousel-track{scroll-snap-type:x mandatory;scroll-padding:0 16px}
.prod-carousel-item{scroll-snap-align:start}

/* ── Card hover lift (cat-card / prod-card / aiw-card / tst-card) */
.cat-card, .prod-card{transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .2s}
.cat-card:hover, .prod-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(42,37,32,.10),0 4px 10px rgba(200,166,104,.08)}
.aiw-card{transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .2s, background .25s}
.aiw-card:hover{transform:translateY(-3px)}

/* ── Mobile tap-target minimums (WCAG 2.5.5 + Apple HIG 44pt) ──
 * Ensure icon-only / chip interactive elements have a 40px hit area on touch.
 * Limited to known icon buttons so flowing text links aren't bloated. */
@media(max-width:760px){
  .ann-ic, .ann-soc a, .hdr-hamburger, .drawer-close,
  .foot-social a, .drawer-menu-soc a,
  .pd-thumb, .carousel-arrow, .scroll-top,
  .theme-opt, .pd-tryon, .qty-btn{
    min-height:40px;min-width:40px
  }
  /* Touch-friendly form controls */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], select, textarea{
    min-height:44px;font-size:16px /* prevent iOS zoom on focus */
  }
  /* Primary CTAs already large enough — ensure 44px */
  .btn-g, .btn-o, .drawer-menu-cta{min-height:44px}
}

/* ── Hamburger trigger button (mobile/tablet only) ── */
.hdr-hamburger{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:40px;height:40px;background:transparent;border:0;cursor:pointer;
  padding:0;flex-shrink:0;color:var(--ink);
  transition:color .2s
}
.hdr-hamburger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .25s}
.hdr-hamburger:hover{color:var(--gold-deep)}
@media(max-width:880px){
  .hdr-hamburger{display:inline-flex;order:5;margin-left:auto}
  .hdr-logo{order:1;margin-right:auto}
  .hdr-track{order:6;display:none}
}

/* ── Header: tighter padding + search adjustments on mobile ── */
@media(max-width:880px){
  .hdr-top{flex-wrap:wrap;gap:12px;padding:12px 16px}
  .hdr-logo img{height:36px}
  .hdr-search{order:3;flex:1 1 100%;max-width:none}
  .hdr-search input{padding:8px 14px 8px 36px;font-size:13px}
  .hdr-search svg{left:12px}
  /* Hide inline desktop nav — replaced by hamburger drawer */
  .hdr-nav{display:none !important}
}

/* Mobile/tablet nav is handled by the .drawer-menu hamburger; .hdr-nav itself
   is hidden under 880px (see rule above). The old inline-accordion approach
   was removed in favor of the slide-in drawer. */

/* ── Mega-dropdown -> full-width inline accordion on mobile.
 * IMPORTANT: must use display:none (not visibility:hidden) for the
 * default-closed state, otherwise the closed dropdowns still reserve
 * layout space under position:static and push the hero ~600-1000px
 * down the page. */
@media(max-width:880px){
  .hdr-nav-drop,.hdr-nav-drop-mega,.hdr-nav-drop-soon{
    position:static !important;left:auto !important;transform:none !important;
    min-width:0;max-width:100%;width:100%;box-shadow:none;border-radius:0;
    border:0;border-top:1px solid var(--bdr);padding:0 20px !important;
    display:none !important; visibility:hidden !important; opacity:0 !important;
    height:0 !important; max-height:0 !important; overflow:hidden !important;
  }
  .hdr-nav-item.is-open > .hdr-nav-drop,
  .hdr-nav-item.is-open > .hdr-nav-drop-mega,
  .hdr-nav-item.is-open > .hdr-nav-drop-soon{
    display:block !important; visibility:visible !important; opacity:1 !important;
    height:auto !important; max-height:none !important; padding:18px 20px !important;
  }
  .hdr-nav-mega-grid{grid-template-columns:1fr;gap:18px}
  .hdr-nav-item{display:block;width:100%}
}

/* ── Hero: stack vertically on mobile.
 * Desktop rules use !important so this media query must too, or the
 * desktop 43%/57% flex split persists at 390px and produces a blank
 * column where text should be. */
@media(max-width:880px){
  .hero-in.ctn{padding:0 !important;margin:0 !important;max-width:100% !important}
  .hero-in{flex-direction:column !important;min-height:0 !important;align-items:stretch !important}
  .hero-ct{order:2 !important;flex:none !important;max-width:100% !important;width:100% !important;text-align:center !important;align-items:center !important;padding:30px 20px 40px !important}
  .hero-ct .hero-h,.hero-ct .hero-p,.hero-ct .hero-ai-tag,.hero-ct .hero-sub{text-align:center !important;margin-left:auto !important;margin-right:auto !important}
  .hero-h{font-size:clamp(34px,8vw,46px);line-height:1.05}
  .hero-p{margin:14px auto 0;max-width:340px}
  .hero-sub{margin:6px auto 14px}
  .hero-btns{justify-content:center !important}
  .hero-trust{justify-content:center !important}
  .hero-img{order:1 !important;flex:none !important;width:100% !important;max-width:100% !important;min-height:0 !important;height:auto !important;position:relative}
  .hero-img img{position:relative !important;inset:auto !important;width:100% !important;height:380px !important;object-fit:cover !important;object-position:center center !important;
    -webkit-mask-image:none !important; mask-image:none !important;
  }
}

/* ── Product carousels: snap-scroll, hide arrows on touch ── */
@media(max-width:760px){
  .prod-carousel{padding:0 4px}
  .carousel-arrow{display:none}
  .prod-carousel-track{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .prod-carousel-item{scroll-snap-align:start;flex:0 0 70%}
}

/* ── Product cards: tighter spacing on mobile ── */
@media(max-width:520px){
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .prod-card{padding:0}
  .prod-info{padding:10px 12px}
  .prod-nm{font-size:13px;line-height:1.3}
  .prod-prc{font-size:13px}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}

/* ── Section headings + spacing tighter on mobile ── */
@media(max-width:880px){
  .sec{padding:56px 0}
}
@media(max-width:760px){
  .sec{padding:48px 0}
  .sec-h{font-size:clamp(26px,6.5vw,34px);line-height:1.15}
  .sec-sub{font-size:14px;line-height:1.6}
  .sec-head{flex-direction:column;align-items:center;gap:8px;text-align:center}
  .ctn{padding-left:18px;padding-right:18px}
}

/* ── Bridal banner: stack image + content on mobile ── */
@media(max-width:880px){
  .banner{flex-direction:column}
  .banner-img,.banner-ct{width:100%;flex:none}
  .banner-img img{aspect-ratio:1/1;width:100%;object-fit:cover}
  .banner-ct{padding:24px 20px}
  .banner-h{font-size:clamp(30px,7vw,40px);line-height:1.1}
  .banner-list{grid-template-columns:1fr 1fr}
  .banner-cta-row{flex-direction:column;align-items:stretch;gap:10px}
}

/* ── AI Tools showcase: single column on mobile ── */
@media(max-width:760px){
  .aix-grid,.aix-grid-3{grid-template-columns:1fr;gap:14px}
  .aix-card{padding:24px 22px}
  .aix-tt{font-size:18px}
  .aix-ds{font-size:14px;line-height:1.65}
}

/* ── Footer: stacked columns on mobile ── */
@media(max-width:760px){
  .foot{padding:36px 0 24px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  .foot-brand-block{grid-column:1 / -1}
  .foot-bot{flex-direction:column;gap:10px;text-align:center}
  .foot-pays{justify-content:center}
}
@media(max-width:420px){
  .foot-grid{grid-template-columns:1fr}
}

/* ── CTA buttons: full-width on mobile (one-handed reach) ── */
@media(max-width:520px){
  .hero-btns{flex-direction:column;width:100%}
  .hero-btns .btn-g,.hero-btns .btn-o{width:100%;justify-content:center;text-align:center}
  .btn-g,.btn-o{min-height:44px}
}

/* ── Tap targets: minimum 44px (Apple HIG) ── */
@media(hover:none){
  .hdr-nav a,.hdr-nav .hdr-nav-trigger,.foot a,.prod-card a{min-height:44px;display:inline-flex;align-items:center}
}

/* ── Coming-soon hero: smaller heading, full-width form ── */
@media(max-width:760px){
  .cs-hero{padding:48px 18px 36px}
  .cs-h{font-size:clamp(32px,7vw,44px)}
  .cs-form{flex-direction:column;border-radius:18px;padding:8px;gap:6px;max-width:100%}
  .cs-form input{text-align:center;padding:14px 0}
  .cs-form button{width:100%}
  .cs-grid{padding:42px 0}
  .cs-grid-h{font-size:24px;margin-bottom:24px}
  .cs-tile{padding:22px 20px}
}

/* ── Testimonials: 1-col with tighter spacing ── */
@media(max-width:620px){
  .tst-grid{grid-template-columns:1fr;gap:14px}
  .tst-card{padding:22px 20px 18px}
  .tst-quote{font-size:15px}
}

/* ── Newsletter: full-width on mobile ── */
@media(max-width:520px){
  .news-form{flex-direction:column;gap:10px;padding:8px}
  .news-form input,.news-form button{width:100%}
}

/* ════════════════════════════════════════════════════════════════════════
   SKY VISTA TRY-ON AUDIT (May 5 2026) — wave 2 components
   ════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb (gold diamond separators) */
.crumbs.tryon-crumbs{font-family:var(--fb);font-size:11.5px;letter-spacing:1.4px;color:var(--ink-mute);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crumbs.tryon-crumbs a{color:var(--ink-mute);text-decoration:none;transition:color .2s}
.crumbs.tryon-crumbs a:hover{color:var(--gold-deep)}
.crumbs-sep{color:var(--gold-deep);font-size:10px;opacity:.65}
.crumbs.tryon-crumbs .cur{color:var(--gold-deep);font-weight:600}
/* Modern responsive breadcrumb: wrap nicely on mobile, ellipsis on long names */
.crumbs{flex-wrap:wrap;align-items:center;row-gap:4px}
.crumbs .cur{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
@media(max-width:560px){
  .crumbs{font-size:10.5px;gap:6px;row-gap:4px}
  /* Collapse intermediate crumbs to just Home › … › Current */
  .crumbs > a:not(:first-child){display:none}
  .crumbs > .crumbs-sep:nth-of-type(n+2):not(:last-of-type){display:none}
  .crumbs > .crumbs-sep:last-of-type::before{content:"…";color:var(--ink-mute);font-size:14px;margin-right:6px}
  .crumbs .cur{max-width:60vw}
}

/* ── Try-on header (eyebrow + status pill row, then italic-gold title) */
.tryon-head{margin-bottom:24px}
.tryon-head-row{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.tryon-title{font-size:clamp(34px,4.6vw,52px);font-weight:500;letter-spacing:-0.5px}
.tryon-sub{color:var(--ink-mute);font-size:14.5px;line-height:1.7;max-width:560px;margin-top:8px}

/* ── Status pill (idle / starting / ready / off / error) */
.tryon-status-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:50px;background:var(--ink);color:var(--cream-light);font-family:var(--fb);font-size:11.5px;font-weight:500;letter-spacing:.5px}
.tryon-status-dot{width:8px;height:8px;border-radius:50%;background:#d49a3a}
.tryon-status-pill[data-state="ready"]    .tryon-status-dot{background:#3dcc6c;box-shadow:0 0 0 0 rgba(61,204,108,.5);animation:tryon-pulse 2s infinite}
.tryon-status-pill[data-state="starting"] .tryon-status-dot{background:#d4a13a}
.tryon-status-pill[data-state="off"]      .tryon-status-dot{background:#9a8e7e}
.tryon-status-pill[data-state="error"]    .tryon-status-dot{background:#d4525a}
@keyframes tryon-pulse{0%,100%{box-shadow:0 0 0 0 rgba(61,204,108,.5)}50%{box-shadow:0 0 0 6px rgba(61,204,108,0)}}

/* ── Stage layout (viewport + sidebar) */
.tryon-stage{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
@media(max-width:900px){.tryon-stage{grid-template-columns:1fr;gap:16px}}

/* ── Camera viewport */
.tryon-canvas-wrap{position:relative;background:radial-gradient(ellipse at center,rgba(56,50,43,.95) 0%,var(--ink) 100%);border-radius:16px;overflow:hidden;aspect-ratio:4/3;min-height:420px;box-shadow:0 16px 50px rgba(42,37,32,.18)}
.tryon-canvas-wrap video,.tryon-canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* On mobile, the try-on canvas takes over the ENTIRE viewport (fixed
   position) once the user enables camera — like a native AR app. We toggle
   the .is-fullscreen class on the canvas-wrap via JS the moment the camera
   feed starts; before that the canvas sits in normal flow so the page text
   ("AI Virtual Try-On" + description) stays visible at the top. */
@media(max-width:760px){
  .tryon{padding:0 !important;margin:0 !important;max-width:100vw !important}
  .tryon-stage{grid-template-columns:1fr !important;gap:0 !important}
  .tryon-canvas-wrap{
    aspect-ratio:auto;
    width:100vw;
    height:calc(100dvh - 64px);     /* default: large but in-flow */
    min-height:560px;
    max-height:none;
    border-radius:0;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    box-shadow:none;
  }
  /* Fullscreen mode — engaged once camera is live so the user gets the
     biggest possible AR view + the gesture/buttons sit on top of the
     viewport edges. */
  .tryon-canvas-wrap.is-fullscreen{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    z-index:1500;
    border-radius:0;
  }
  /* Bigger icon buttons (44×44 min Apple HIG tap target) + position
     them safely below the URL bar area. Boosted z-index so they sit
     above the camera + canvas. .tryon-canvas-wrap descendant selector
     bumps specificity past the base rule that follows in source order. */
  .tryon-canvas-wrap .tryon-icons{top:12px;right:12px;gap:10px;z-index:1600}
  .tryon-canvas-wrap .tryon-iconbtn{width:44px;height:44px}
  .tryon-canvas-wrap .tryon-iconbtn svg{width:20px;height:20px}
  /* Empty state lifted above the canvas so the user always sees the gold
     "Enable Camera" CTA before the feed kicks in. */
  .tryon-empty{z-index:1610}
  .tryon-empty h2{font-size:22px}
  /* Loader sits above everything mobile-wise too */
  .tryon-loader{z-index:1700}
  /* Shift the "Live · Tracking" pill right of the new Close (×) button
     (44px wide + 12px left = 68px clear). */
  .tryon-canvas-wrap.is-fullscreen .tryon-live-pill{left:68px}
}
/* Older browsers without dvh fall back to vh — same intent, slightly
   shorter when the URL bar is visible. */
@supports not (height: 1dvh){
  @media(max-width:760px){
    .tryon-canvas-wrap{height:calc(100vh - 64px)}
    .tryon-canvas-wrap.is-fullscreen{height:100vh}
  }
}
.tryon-live-pill{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:50px;background:rgba(42,37,32,.78);color:var(--cream-light);font-family:var(--fb);font-size:11.5px;font-weight:500;letter-spacing:.5px;backdrop-filter:blur(8px)}

/* Close (×) button — injected by try-on.js when the canvas enters
   fullscreen on mobile. Without it the user had no way to back out of
   the AR view (the page header is hidden by the position:fixed canvas).
   Top-left corner so it doesn't fight the reset/flip icons in top-right. */
.tryon-close{position:absolute;top:12px;left:12px;z-index:1650;width:44px;height:44px;border-radius:50%;border:1px solid rgba(229,211,171,.20);background:rgba(42,37,32,.78);color:var(--cream-light);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:background .2s,color .2s;padding:0}
.tryon-close:hover{background:rgba(42,37,32,.92);color:var(--gold)}
.tryon-close:active{transform:scale(.94)}
@media(min-width:761px){
  /* On desktop the canvas isn't fullscreen so the close button is mostly
     redundant — fully visible page layout already gives the user a way
     out. Hide it there (it'll only inject on mobile anyway, but keep
     this rule for any future cases). */
  .tryon-close{display:none}
}

/* Gesture hint pill — fades in once the camera starts and disappears after
   the user makes their first adjustment or 6 seconds. Tells them they can
   drag/zoom/rotate the overlay so they don't have to discover it. */
.tryon-gesture-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;padding:8px 16px;border-radius:50px;background:rgba(42,37,32,.85);color:var(--cream-light);font-family:var(--fb);font-size:11.5px;letter-spacing:.4px;backdrop-filter:blur(8px);text-align:center;pointer-events:none;opacity:0;transition:opacity .3s ease;max-width:90%}
.tryon-gesture-hint.is-on{opacity:1}
@media(hover:none){
  /* Mobile / touch device wording */
  .tryon-gesture-hint::before{content:"Drag to move · Pinch to zoom · Twist to rotate"}
}
@media(hover:hover){
  /* Desktop wording */
  .tryon-gesture-hint::before{content:"Drag to move · Scroll to zoom · Shift+scroll to rotate"}
}

/* Loader overlay — shown while MediaPipe scripts load + product image
   decodes + camera initializes. Anchored to .tryon-canvas-wrap so it sits
   right on top of the camera area. Auto-clears when the engine reports
   the first successful render. */
.tryon-loader{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:radial-gradient(ellipse at center,rgba(20,14,8,.92) 0%,rgba(10,7,4,.98) 100%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .25s ease}
.tryon-loader.is-on{display:flex}
.tryon-loader.is-fading{opacity:0;pointer-events:none}
.tryon-loader-ring{width:58px;height:58px;border-radius:50%;border:3px solid rgba(200,166,104,0.18);border-top-color:#c8a668;animation:tryonSpin 0.9s linear infinite}
.tryon-loader-title{font-family:var(--fd);font-style:italic;font-size:18px;color:#f5efe3;letter-spacing:.3px;text-align:center;max-width:80%;line-height:1.4}
.tryon-loader-sub{font-family:var(--fb);font-size:12.5px;color:rgba(245,239,227,.65);letter-spacing:1.4px;text-transform:uppercase;text-align:center}
.tryon-loader-thumb{width:80px;height:80px;border-radius:50%;background:rgba(245,239,227,.04);border:1px solid rgba(200,166,104,.22);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tryon-loader-thumb img{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
@keyframes tryonSpin{to{transform:rotate(360deg)}}
@media(max-width:480px){
  .tryon-loader-title{font-size:15px}
  .tryon-loader-sub{font-size:11px}
}
.tryon-live-dot{width:8px;height:8px;border-radius:50%;background:#3dcc6c;animation:tryon-pulse 2s infinite}

/* Three icon buttons in the top-right of the viewport */
.tryon-icons{position:absolute;top:14px;right:14px;z-index:3;display:flex;gap:8px}
.tryon-iconbtn{width:36px;height:36px;border-radius:50%;border:1px solid rgba(229,211,171,.20);background:rgba(42,37,32,.78);color:var(--cream-light);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:all .2s;padding:0}
.tryon-iconbtn:hover{border-color:var(--gold);color:var(--gold)}
.tryon-iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Empty state inside the viewport */
.tryon-empty{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--cream-light);background:transparent}
.tryon-empty-eye{font-size:11px;font-weight:500;letter-spacing:3.6px;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.tryon-empty h2{font-family:var(--fd);font-size:clamp(20px,2.6vw,28px);font-weight:500;color:var(--cream-light);line-height:1.2;margin:0 0 10px;letter-spacing:-0.2px}
.tryon-empty p{font-size:13.5px;color:rgba(229,211,171,.78);line-height:1.6;max-width:420px;margin:0 auto 22px}

/* ── Category sidebar */
.tryon-side{display:flex;flex-direction:column;gap:14px}
.tryon-side-card{background:var(--cream-light);border:1px solid var(--bdr);border-radius:14px;overflow:hidden;transition:max-height .35s}
.tryon-side-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;font-family:var(--fb);font-size:11px;letter-spacing:3.6px;font-weight:500;color:var(--gold-deep);text-transform:uppercase;border-bottom:1px solid var(--bdr)}
.tryon-collapse{background:transparent;border:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);padding:0;transition:transform .25s}
.tryon-collapse svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tryon-side-card.is-collapsed .tryon-cats{display:none}
.tryon-side-card.is-collapsed .tryon-collapse{transform:rotate(-90deg)}

.tryon-cats{list-style:none;padding:6px 0;margin:0}
.tryon-cat{padding:0}
.tryon-cat label{display:flex;align-items:center;gap:12px;padding:10px 20px;cursor:pointer;font-family:var(--fb);font-size:13.5px;color:var(--ink);transition:background .2s}
.tryon-cat label:hover{background:var(--cream-warm)}
.tryon-cat input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:4px;border:1.5px solid var(--bdr2);background:#fff;cursor:pointer;position:relative;flex-shrink:0;transition:all .2s;margin:0}
.tryon-cat input[type="checkbox"]:checked{background:var(--gold);border-color:var(--gold-deep)}
.tryon-cat input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.tryon-cat input[type="checkbox"]:disabled{cursor:not-allowed;opacity:.5}
.tryon-cat-name{flex:1;font-weight:500}
.tryon-cat input[type="checkbox"]:checked + .tryon-cat-name{color:var(--gold-deep);font-weight:600}
.tryon-cat-count{color:var(--ink-mute);font-size:12px;font-weight:500}
.tryon-cat-soon{font-size:9.5px;letter-spacing:1.4px;font-weight:600;color:var(--gold-deep);text-transform:uppercase;padding:2px 8px;border-radius:50px;background:var(--cream-warm)}
.tryon-cat.is-coming label{cursor:not-allowed}

/* Capture Photo gold pill */
.tryon-capture{width:100%;justify-content:center}
.tryon-capture svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tryon-capture:disabled{opacity:.5;cursor:not-allowed;transform:none !important;box-shadow:none !important}

/* Optional deeplinked piece block (when arriving via product page) */
.tryon-selected{display:flex;align-items:center;gap:12px;padding:12px;background:var(--cream-light);border:1px solid var(--bdr);border-radius:12px;margin-top:6px}
.tryon-selected-img{width:48px;height:48px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--cream-warm)}
.tryon-selected-img img{width:100%;height:100%;object-fit:cover}
.tryon-selected-eye{font-size:9.5px;letter-spacing:1.6px;color:var(--gold-deep);text-transform:uppercase;font-weight:600;margin-bottom:2px}
.tryon-selected-nm{font-family:var(--fd);font-size:14px;color:var(--ink);font-weight:500;line-height:1.2}
.tryon-selected-pr{font-size:11.5px;color:var(--ink-mute);font-weight:500;margin-top:2px}

/* Disclaimer */
.tryon-disclaimer{margin-top:14px;font-size:12.5px;color:var(--ink-mute);font-style:italic;line-height:1.6}
.tryon-disclaimer em{font-style:italic;color:var(--ink);font-weight:500}

/* ── Newsletter section "Heirlooms meet inbox" (audit §10) */
.nl{background:var(--ink);color:var(--cream-light);padding:64px 0;margin-top:60px;border-top:1px solid rgba(229,211,171,.12);border-bottom:1px solid rgba(229,211,171,.12)}
.nl-in{max-width:680px;margin:0 auto;text-align:center}
.nl-eye{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-family:var(--fb);font-size:11px;font-weight:500;letter-spacing:3.6px;text-transform:uppercase;margin-bottom:14px}
.nl-eye-rule{display:inline-block;width:32px;height:1px;background:var(--gold);opacity:.6}
.nl-h{font-family:var(--fd);font-size:clamp(28px,3.6vw,42px);font-weight:500;color:var(--cream-light);line-height:1.15;letter-spacing:-0.3px;margin-bottom:14px}
.nl-h em{font-style:italic;color:var(--gold);font-weight:400}
.nl-p{color:rgba(229,211,171,.78);font-size:14.5px;line-height:1.7;margin:0 auto 22px;max-width:520px}
.nl-form{display:flex;gap:8px;max-width:520px;margin:0 auto 22px;flex-wrap:wrap}
.nl-inp{flex:1 1 240px;min-width:0;padding:14px 22px;border-radius:50px;border:1px solid rgba(229,211,171,.18);background:rgba(229,211,171,.06);color:var(--cream-light);font-family:var(--fb);font-size:14px;outline:0;transition:border-color .2s}
.nl-inp:focus{border-color:var(--gold);background:rgba(229,211,171,.10)}
.nl-inp::placeholder{color:rgba(229,211,171,.45)}
.nl-form .btn-gold{flex:0 0 auto;padding:14px 26px}
.nl-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.nl-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:50px;border:1px solid rgba(229,211,171,.18);font-family:var(--fb);font-size:12px;color:rgba(229,211,171,.78);font-weight:500}
.nl-badge-ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(200,166,104,.20);color:var(--gold);font-size:11px;font-weight:600}

/* The .news block (legacy) is now superseded by .nl — kept for back-compat
 * if any other page references it, but home.blade.php now uses the partial. */

/* ── Product carousel (Wave 6 — Figma audit) ─────────────────────────
 * Horizontal-scroll product carousel with prev/next arrows. Used on
 * home for Best Seller + New Arrivals sections. Scroll-snap on each
 * card so the user lands on a tile after dragging or arrow-tap.
 */
/* Carousel sections inherit base 72px section padding for uniform rhythm */
.prod-carousel{position:relative;margin-top:24px}
.prod-carousel-track{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:8px 4px 22px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.prod-carousel-track::-webkit-scrollbar{display:none}
.prod-carousel-item{flex:0 0 calc(25% - 14px);min-width:240px;scroll-snap-align:start}
@media(max-width:1100px){.prod-carousel-item{flex-basis:calc(33.333% - 12px)}}
@media(max-width:780px){.prod-carousel-item{flex-basis:calc(50% - 9px);min-width:200px}}
@media(max-width:480px){.prod-carousel-item{flex-basis:78%;min-width:0}}
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;border:1px solid var(--gold-bdr,rgba(200,166,104,.32));
  background:#fff;color:var(--ink,#2a2520);font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:serif;
  box-shadow:0 6px 18px rgba(42,37,32,.08);transition:all .2s;z-index:2;
  opacity:.96
}
.carousel-arrow:hover{background:var(--gold-deep,#c8a668);color:#fff;border-color:var(--gold-deep,#c8a668)}
.carousel-arrow-prev{left:-18px}
.carousel-arrow-next{right:-18px}
.carousel-arrow[disabled]{opacity:.32;cursor:not-allowed}
@media(max-width:780px){.carousel-arrow{display:none}}

/* ── Try-on disclaimer overlay (Wave 12 — Figma audit) ──
 * Figma places the disclaimer INSIDE the workspace at the bottom of
 * the viewport. Our previous build had it as a paragraph below the
 * stage. Move it inside, anchored to the bottom-center.
 */
.tryon-disclaimer-overlay{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid rgba(200,166,104,.32);border-radius:50px;
  padding:9px 18px;font-family:var(--fb);font-size:11.5px;
  color:var(--ink);letter-spacing:.2px;line-height:1.5;
  max-width:calc(100% - 32px);text-align:center;z-index:5;
  box-shadow:0 4px 14px rgba(42,37,32,.08)
}
.tryon-disclaimer-overlay em{font-style:italic;color:var(--gold-deep);font-weight:500}

/* ── Product detail Buy It Now (Wave 10 — Figma audit) ──
 * Standalone gold CTA below the qty/add-to-bag/WhatsApp row that
 * skips the cart and lands the customer in checkout immediately.
 */
.pd-buynow-form{margin-top:14px}
.pd-buynow{
  display:block;width:100%;text-align:center;
  padding:18px 22px;font-size:16px;letter-spacing:.4px
}

/* ── Header nav dropdowns (showstopper polish) ─────────────────────
 * Slick cross-platform menu: hover/focus on desktop, tap-toggle on
 * mobile. Theme-matched (cream/gold/Playfair Display). Mega-dropdown
 * for Jewellery (3-column), simple "Coming soon" panel for Apparel +
 * Accessories. JS handles tap-toggle + outside-click + escape.
 */

/* Wrap each dropdown-bearing nav slot so the panel can position
 * relative to the trigger and the chevron rotates on open. */
.hdr-nav .hdr-nav-item{position:relative;display:inline-flex}
.hdr-nav .hdr-nav-item .hdr-nav-trigger{
  display:inline-flex;align-items:center;gap:5px;
  background:transparent;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;
  /* Inherit the same look as plain hdr-nav anchors */
}
.hdr-nav .hdr-nav-chev{
  width:11px;height:11px;flex-shrink:0;color:currentColor;
  transition:transform .25s ease;opacity:.7
}
.hdr-nav .hdr-nav-item.is-open .hdr-nav-chev,
.hdr-nav .hdr-nav-item:hover .hdr-nav-chev{transform:rotate(180deg);opacity:1}

/* The dropdown panel itself */
.hdr-nav-drop{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:#fff;border:1px solid var(--bdr);
  border-radius:14px;padding:24px 26px;min-width:340px;
  box-shadow:0 18px 48px rgba(42,37,32,.12),0 4px 12px rgba(200,166,104,.10);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
  z-index:1200
}
/* Bridge between trigger and panel so hover doesn't drop the menu */
.hdr-nav-drop::before{
  content:"";position:absolute;top:-14px;left:0;right:0;height:14px
}
/* Subtle decorative gold indicator pointing up to the trigger */
.hdr-nav-drop::after{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%) translateY(-50%) rotate(45deg);
  width:10px;height:10px;background:#fff;border-top:1px solid var(--bdr);border-left:1px solid var(--bdr)
}
.hdr-nav-item:hover > .hdr-nav-drop,
.hdr-nav-item:focus-within > .hdr-nav-drop,
.hdr-nav-item.is-open > .hdr-nav-drop{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear 0s
}

/* Coming Soon variant — tighter, single panel */
.hdr-nav-drop-soon{min-width:340px;max-width:380px}
.hdr-nav-drop-eye{font-family:var(--fb);font-size:10.5px;font-weight:600;color:var(--gold-deep);
  letter-spacing:3.2px;text-transform:uppercase;margin-bottom:8px}
.hdr-nav-drop-h{font-family:var(--fd);font-size:18px;font-weight:500;color:var(--ink);
  line-height:1.3;margin-bottom:10px}
.hdr-nav-drop-h em{font-style:italic;color:var(--gold-deep);font-weight:500}
.hdr-nav-drop-p{font-family:var(--fb);font-size:13px;color:var(--ink-mute);line-height:1.65;margin-bottom:14px}
.hdr-nav-drop-cta{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fb);font-size:12.5px;font-weight:500;color:var(--gold-deep);
  text-decoration:none;border-bottom:1px solid var(--gold-deep);padding-bottom:2px;
  transition:color .15s,border-color .15s}
.hdr-nav-drop-cta:hover{color:var(--ink);border-color:var(--ink)}

/* Mega variant — Jewellery (3 columns) */
.hdr-nav-drop-mega{min-width:680px;left:50%;transform:translateX(-50%) translateY(-6px);padding:28px 32px}
.hdr-nav-item:hover > .hdr-nav-drop-mega,
.hdr-nav-item:focus-within > .hdr-nav-drop-mega,
.hdr-nav-item.is-open > .hdr-nav-drop-mega{transform:translateX(-50%) translateY(0)}
.hdr-nav-mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.hdr-nav-mega-h{font-family:var(--fb);font-size:10px;font-weight:600;color:var(--gold-deep);
  letter-spacing:2.6px;text-transform:uppercase;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid var(--bdr)}
.hdr-nav-mega-l{display:block;font-family:var(--fd);font-size:14.5px;font-weight:400;
  color:var(--ink);text-decoration:none;padding:6px 0;
  transition:color .15s,padding .15s}
.hdr-nav-mega-l:hover{color:var(--gold-deep);padding-left:4px}
.hdr-nav-mega-all{display:inline-block;margin-top:14px;
  font-family:var(--fb);font-size:12px;font-weight:500;color:var(--gold-deep);
  text-decoration:none;border-bottom:1px solid var(--gold-deep);padding-bottom:1px;
  letter-spacing:.4px;transition:color .15s,border-color .15s}
.hdr-nav-mega-all:hover{color:var(--ink);border-color:var(--ink)}

/* Sub-category variant — Apparel + Accessories (ISSUE-06, spec May 12 2026)
 * 2-column grid: sub-categories on left, coming-soon teaser on right. */
.hdr-nav-drop-sub{min-width:520px;max-width:560px;left:50%;transform:translateX(-50%) translateY(-6px);padding:24px 28px}
.hdr-nav-item:hover > .hdr-nav-drop-sub,
.hdr-nav-item:focus-within > .hdr-nav-drop-sub,
.hdr-nav-item.is-open > .hdr-nav-drop-sub{transform:translateX(-50%) translateY(0)}
.hdr-nav-sub-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:start}
.hdr-nav-sub-aside{border-left:1px solid var(--bdr);padding-left:24px}
@media(max-width:880px){
  .hdr-nav-drop-sub{min-width:0;max-width:100%}
  .hdr-nav-sub-grid{grid-template-columns:1fr;gap:18px}
  .hdr-nav-sub-aside{border-left:0;border-top:1px solid var(--bdr);padding-left:0;padding-top:16px}
}

/* Mobile collapse — dropdowns become inline expandable groups,
 * triggered by tap (JS toggles .is-open). Below 880px we present
 * the menus as accordion-style stacks anchored under each trigger.
 */
@media(max-width:880px){
  .hdr-nav{flex-wrap:wrap}
  .hdr-nav-drop{
    position:static;transform:none;min-width:0;width:100%;
    margin-top:6px;padding:14px 16px;
    box-shadow:none;border-radius:10px;
    background:var(--cream-warm)
  }
  .hdr-nav-drop::after{display:none}
  .hdr-nav-drop-mega{padding:14px 16px}
  .hdr-nav-mega-grid{grid-template-columns:1fr;gap:14px}
  .hdr-nav-item{width:100%;display:block}
  .hdr-nav-item .hdr-nav-trigger{width:100%;justify-content:space-between;padding:10px 0}
  /* Disable hover-open on touch — only tap (.is-open) triggers */
  .hdr-nav-item:hover > .hdr-nav-drop,
  .hdr-nav-item:focus-within > .hdr-nav-drop{opacity:0;visibility:hidden;pointer-events:none}
  .hdr-nav-item.is-open > .hdr-nav-drop{opacity:1;visibility:visible;pointer-events:auto;transform:none}
}

/* ── Header icon-only action buttons (Figma — no text labels) ──
 * Replaces the labelled .hdr-act with a compact icon-only button.
 * Hover lifts to gold, matches the Figma compact header right side.
 */
.hdr-acts{display:inline-flex;align-items:center;gap:6px}
.hdr-act-ic{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);text-decoration:none;
  transition:all .18s ease;background:transparent
}
.hdr-act-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hdr-act-ic:hover{color:var(--gold-deep);background:rgba(200,166,104,.10)}
.hdr-cart-badge{
  position:absolute;top:2px;right:2px;
  min-width:16px;height:16px;padding:0 4px;border-radius:50px;
  background:var(--gold-deep);color:#fff;
  font-family:var(--fb);font-size:9.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;line-height:1
}

/* ════════════════════════════════════════════════════════════════════════
   FIGMA-EXACT REFIT (May 9 2026) — announcement bar + header + USP band
   Driver: Adnan side-by-side comparison; Figma fonts not respected.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Dark announcement bar (Figma layout: social · title · icons) ── */
/* Full-width edge-to-edge announcement bar per PDF (was boxed pill).
 * Sticky so the 5 header icons remain accessible as the user scrolls.
 * .hdr below it sticks at top:var(--ann-h) — JS sets --ann-h to the
 * measured announcement height on load + resize. */
.ann{background:var(--ink);color:var(--cream-light);padding:0;letter-spacing:normal;text-transform:none;font-family:var(--fb);font-weight:400;position:relative;z-index:1}
.ann-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;width:100%;max-width:none;background:transparent;border-radius:0}
.ann-soc{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;min-width:120px}
.ann-soc a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--cream-light);background:transparent;transition:color .2s}
.ann-soc a:hover{color:var(--gold)}
.ann-soc svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ann-title{flex:1 1 auto;text-align:center;font-family:var(--fb);font-style:normal;font-weight:400;font-size:14px;letter-spacing:.2px;color:var(--cream-light)}
/* Continuous marquee announcement bar — beautified */
.ann-marquee{flex:1 1 auto;display:flex;align-items:center;overflow:hidden;position:relative;min-width:0;mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.ann-marquee-track{display:inline-flex;align-items:center;gap:38px;animation:annMarquee 28s linear infinite;white-space:nowrap;flex-shrink:0;will-change:transform}
.ann-marquee-item{font-family:var(--fd);font-style:italic;font-weight:400;font-size:14.5px;color:var(--cream-light);letter-spacing:.4px;line-height:1}
.ann-marquee-sep{color:var(--gold);font-size:9px;line-height:1;flex-shrink:0;opacity:.85;transform:translateY(-1px)}
.ann-marquee:hover .ann-marquee-track{animation-play-state:paused}
@keyframes annMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){
  .ann-marquee-track{gap:26px;animation-duration:22s}
  .ann-marquee-item{font-size:13px}
}
@media(max-width:520px){
  .ann-marquee-item{font-size:12px;letter-spacing:.3px}
}
.ann-acts{display:inline-flex;align-items:center;gap:18px;flex:0 0 auto;min-width:200px;justify-content:flex-end;padding-right:8px}
.ann-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--cream-light);position:relative;transition:color .2s;border:0;background:transparent;padding:0;margin:0;cursor:pointer;font:inherit;line-height:1;text-decoration:none !important}
.ann-ic:hover{color:var(--gold)}
.ann-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Suppress the legacy .ann a underline + margin so icon links sit clean */
.ann .ann-soc a,.ann .ann-ic{border-bottom:0 !important;padding-bottom:0 !important;margin-left:0 !important;text-decoration:none !important}
.ann-cart-badge{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--gold-deep);color:#fff;font-family:var(--fb);font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
@media(max-width:760px){
  .ann-row{flex-wrap:wrap;justify-content:center;gap:10px;padding:8px 0}
  .ann-title{order:-1;flex:1 1 100%;font-size:13px}
  .ann-soc,.ann-acts{min-width:0}
}

/* ── Header refit: logo · search · track-order ── */
.hdr-top{display:flex;align-items:center;gap:24px}
.hdr-search{flex:1 1 auto;max-width:560px;margin:0 auto}
/* Track-your-order pill — clickable anchor (Figma shows no input field) */
.hdr-track{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  padding:10px 22px;border-radius:50px;border:1px solid var(--bdr2);
  background:#fff;color:var(--ink);font-family:var(--fb);font-size:13px;
  letter-spacing:.2px;text-decoration:none;white-space:nowrap;
  transition:border-color .2s,color .2s,box-shadow .2s;
}
.hdr-track:hover{border-color:var(--gold);color:var(--gold-deep);box-shadow:0 4px 14px rgba(200,166,104,.15)}
@media(max-width:880px){.hdr-track{display:none}}

/* ── Header nav: Figma typography (DM Sans, normal-cased, modest tracking) ── */
.hdr-nav{border-top:1px solid var(--bdr);text-align:center}
.hdr-nav a,.hdr-nav .hdr-nav-trigger{font-family:var(--fb);font-size:14px;font-weight:500;letter-spacing:.4px;text-transform:none;padding:14px 22px;color:var(--ink)}
.hdr-nav .hdr-nav-trigger{background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.hdr-nav a:hover,.hdr-nav a.active,.hdr-nav .hdr-nav-trigger:hover{color:var(--gold-deep)}
.hdr-nav a.active::after{background:var(--gold-deep);bottom:0}

/* Hide the legacy "SOON" pseudo-badge (Figma has no soon tags on nav) */
.hdr-nav-soon::after{display:none !important}
.hdr-nav-soon{padding-right:22px !important}

/* ── USP band (Figma-exact: dark band, 6 cols, italic title + sans subtitle) ── */
.usp-band{background:var(--ink);color:var(--cream-light);padding:26px 0;border-top:1px solid rgba(229,211,171,.10)}
.usp-row{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center}
.usp-it{text-align:center;padding:8px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60px}
.usp-it + .usp-it::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:38px;background:rgba(229,211,171,.16)}
.usp-t{font-family:var(--fd);font-style:italic;font-weight:500;font-size:20px;color:var(--cream-light);line-height:1.2;letter-spacing:.2px}
.usp-sub{font-family:var(--fb);font-size:11px;font-weight:500;color:var(--cream-warm);letter-spacing:1.6px;text-transform:uppercase;margin-top:6px;opacity:.85}
@media(max-width:880px){
  .usp-row{grid-template-columns:repeat(3,1fr);row-gap:24px}
  .usp-it:nth-child(3n+1)::before{display:none}
}
@media(max-width:520px){
  .usp-row{grid-template-columns:repeat(2,1fr)}
  .usp-it::before{display:none}
}

/* ── Coming-soon landing pages (Apparel/Accessories dropdown showcase) ── */
.cs-hero{background:linear-gradient(180deg,var(--cream-light) 0%,var(--cream-warm) 100%);padding:80px 0 60px;text-align:center;position:relative;overflow:hidden}
.cs-hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(200,166,104,.18) 0%,transparent 65%);top:-180px;left:-180px;pointer-events:none}
.cs-hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(200,166,104,.18) 0%,transparent 65%);bottom:-180px;right:-180px;pointer-events:none}
.cs-eye{font-family:var(--fb);font-size:11px;font-weight:600;letter-spacing:3.2px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px}
.cs-h{font-family:var(--fd);font-size:54px;font-weight:500;color:var(--ink);line-height:1.1;margin:0 0 18px;letter-spacing:-.5px}
.cs-h em{font-style:italic;color:var(--gold-deep);font-weight:500}
.cs-p{font-family:var(--fb);font-size:16px;color:var(--ink-mute);max-width:620px;margin:0 auto 32px;line-height:1.7}
.cs-form{display:inline-flex;gap:10px;background:#fff;border:1px solid var(--bdr2);border-radius:50px;padding:6px 6px 6px 22px;max-width:520px;width:100%;align-items:center}
.cs-form input{flex:1;border:0;outline:0;font-family:var(--fb);font-size:14px;color:var(--ink);background:transparent;padding:10px 0}
.cs-form button{border:0;background:var(--ink);color:var(--cream-light);font-family:var(--fb);font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;padding:12px 22px;border-radius:50px;cursor:pointer;transition:background .2s}
.cs-form button:hover{background:var(--gold-deep)}
.cs-meta{margin-top:18px;font-family:var(--fb);font-size:12px;color:var(--ink-soft)}
.cs-grid{padding:64px 0;background:#fff}
.cs-grid-h{font-family:var(--fd);font-size:30px;font-weight:500;color:var(--ink);text-align:center;margin:0 0 36px;font-style:italic}
.cs-grid-h em{color:var(--gold-deep)}
.cs-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cs-tile{background:var(--cream-light);border:1px solid var(--bdr);border-radius:14px;padding:32px 28px;text-align:left;transition:all .25s;display:block;color:inherit;text-decoration:none}
.cs-tile:hover{border-color:var(--gold-bdr);transform:translateY(-2px);box-shadow:0 12px 32px -16px rgba(42,37,32,.18)}
.cs-tile-eye{font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:2.4px;color:var(--gold-deep);text-transform:uppercase;margin-bottom:12px}
.cs-tile-h{font-family:var(--fd);font-size:22px;color:var(--ink);font-weight:500;margin:0 0 10px}
.cs-tile-p{font-family:var(--fb);font-size:14px;color:var(--ink-mute);line-height:1.6;margin:0}
@media(max-width:760px){
  .cs-h{font-size:38px}
  .cs-tiles{grid-template-columns:1fr}
}

/* ═══ HEADER PDF-EXACT OVERRIDES ═══════════════════════════════════════
 * Per the May 9 Landing PDF: nav links are plain text (no chevron arrows,
 * no active-state underline). Loaded LAST so they win over earlier rules
 * that draw the chevron rotator and the gold ::after underline.
 */
.hdr-nav .hdr-nav-chev{display:none !important}
.hdr-nav a.active::after,
.hdr-nav .hdr-nav-link.active::after,
.hdr-nav .hdr-nav-trigger.active::after{display:none !important;background:transparent !important}
.hdr-nav a.active,
.hdr-nav .hdr-nav-link.active,
.hdr-nav .hdr-nav-trigger.active{color:var(--ink) !important}
.hdr-nav a:hover,
.hdr-nav .hdr-nav-trigger:hover{color:var(--gold-deep) !important}

/* Ensure nav buttons get the same padding/spacing as anchor links so the
 * items don't collapse into each other once the chevron is hidden.
 * Higher-specificity than the earlier .hdr-nav .hdr-nav-item .hdr-nav-trigger
 * rule that sets padding:0. */
.hdr-nav .hdr-nav-item .hdr-nav-trigger.hdr-nav-link,
.hdr-nav a.hdr-nav-link{
  color:var(--ink) !important;font-size:11px;font-weight:600;
  letter-spacing:1.8px;font-family:var(--fb);
  padding:13px 18px !important;gap:0 !important;
}

/* ═══ PDF-EXACT LANDING-PAGE EXTRAS ═══════════════════════════════════
 * Classes referenced by the home page + global layout that previously
 * had no styling: cat-card "View more" affordance, AI section CTA row,
 * newsletter trailing note, footer "Join our community" form column,
 * footer Sky Vista byline. Loaded LAST so they sit on top of any
 * earlier rules.
 */

/* "View more" link under each category card (Best seller / Shop by /
 * New Arrivals all use this). Treated as a link, not a button. */
.cat-link{
  display:inline-block;margin-top:8px;font-family:var(--fb);
  font-size:11px;font-weight:500;letter-spacing:.4px;
  color:var(--gold-deep);text-transform:none;
  border-bottom:1px solid transparent;transition:border-color .2s,color .2s;
  text-decoration:underline;text-decoration-color:rgba(200,166,104,.35);
  text-underline-offset:3px;
}
.cat-card:hover .cat-link{border-bottom-color:transparent;color:var(--ink);text-decoration-color:var(--ink)}

/* ═══ CATEGORY CARD — PDF-EXACT (rectangular, full-width image) ═══════
 * The May 9 PDF shows all three category sections (Best seller / Shop by
 * Category / New Arrivals) with RECTANGULAR cards: image fills the top
 * of the card edge-to-edge, label + piece count + "View more" sit below
 * on a small cream platform. Override the older 130x130 circular thumb
 * styling from app.css for the home-page surfaces.
 */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;overflow:visible;padding:0}
.cat-card{
  flex:0 0 auto;display:block;text-align:center;color:inherit;text-decoration:none;
  background:transparent;border:0;padding:0;cursor:pointer;
  transition:transform .25s ease;
}
.cat-card:hover{transform:translateY(-4px)}
.cat-img{
  width:100% !important;height:280px !important;
  border-radius:14px !important;overflow:hidden;
  margin:0 0 14px !important;border:0 !important;
  background:var(--cream-warm);box-shadow:0 4px 18px rgba(42,37,32,.08);
  transition:box-shadow .25s ease;
}
.cat-card:hover .cat-img{box-shadow:0 10px 28px rgba(42,37,32,.16)}
.cat-img img{width:100%;height:100%;object-fit:cover;display:block}
.cat-nm{
  font-family:var(--fd);font-size:18px;font-weight:500;
  color:var(--ink);margin:0 0 4px;line-height:1.2;
}
.cat-ct{
  font-family:var(--fb);font-size:11px;font-weight:400;
  color:var(--ink-mute);letter-spacing:1.2px;
  text-transform:uppercase;margin:0 0 6px;
}

/* Carousel-item width: 6 cards visible across 1440px viewport, fewer on
 * smaller widths. Override the wider product-carousel-item flex-basis. */
.prod-carousel-item{flex:0 0 calc((100% - 90px) / 6) !important;min-width:180px !important;scroll-snap-align:start}
@media(max-width:1100px){.prod-carousel-item{flex-basis:calc((100% - 60px) / 4) !important}}
@media(max-width:780px){.prod-carousel-item{flex-basis:calc((100% - 36px) / 3) !important;min-width:160px !important}}
@media(max-width:540px){.prod-carousel-item{flex-basis:calc((100% - 18px) / 2) !important;min-width:140px !important}}

/* Same card width when the cat-grid is in use (Shop by Category). */
@media(max-width:1100px){.cat-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:780px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:540px){.cat-grid{grid-template-columns:repeat(2,1fr)}}

/* Smaller image height on narrow screens to keep proportion right. */
@media(max-width:1100px){.cat-img{height:240px !important}}
@media(max-width:780px){.cat-img{height:200px !important}}
@media(max-width:540px){.cat-img{height:170px !important}}

/* AI section "Open the AI Concierge" CTA row, centered below the cards */
.aix-cta-row{display:flex;justify-content:center;margin-top:36px}

/* Newsletter trailing "No spam. Unsubscribe with a single message." note */
.nl-foot{
  margin-top:14px;font-family:var(--fb);font-size:11.5px;
  color:rgba(229,211,171,.55);letter-spacing:.2px;
}

/* Footer Join-our-community form column ─────────────────────────────
 * Heading is a large Playfair Display serif (NOT the small gold uppercase
 * used by other footer columns). Inputs are pill-shaped with cream-warm
 * background. Submit is a small dark-on-dark with gold rule.
 */
.foot-col-form{display:flex;flex-direction:column;gap:12px}
.foot-col-form .foot-col-h{
  font-family:var(--fd);font-size:24px;font-weight:500;
  color:var(--gold);text-transform:none;letter-spacing:0;
  margin-bottom:6px;line-height:1.2;
}
.foot-form{display:flex;flex-direction:column;gap:10px;margin-top:0}
.foot-inp{
  width:100%;padding:11px 18px;border-radius:50px;
  border:1px solid rgba(229,211,171,.22);
  background:rgba(229,211,171,.10);
  color:var(--cream-light);font-family:var(--fb);font-size:13px;
  outline:0;transition:border-color .2s,background .2s;
}
.foot-inp:focus{border-color:var(--gold);background:rgba(229,211,171,.16)}
.foot-inp::placeholder{color:rgba(229,211,171,.42)}
.foot-submit{
  align-self:flex-start;padding:8px 22px;
  border:1px solid rgba(229,211,171,.30);border-radius:6px;
  background:rgba(229,211,171,.06);color:var(--cream-light);
  font-family:var(--fb);font-size:11.5px;font-weight:500;
  letter-spacing:.4px;cursor:pointer;transition:all .2s;
}
.foot-submit:hover{background:var(--gold-deep);color:var(--ink);border-color:var(--gold-deep);transform:translateY(-1px)}

/* Footer bottom: copyright + Sky Vista byline left, payment chips right */
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.foot-bot-l{display:flex;flex-direction:column;gap:4px}
.foot-skv{font-size:10.5px;color:var(--gold);opacity:.78;letter-spacing:.4px}
.foot-skv-link{color:inherit;text-decoration:none;transition:color .2s,text-decoration .2s}
.foot-skv-link:hover{color:#C8A668;text-decoration:underline}

@media(max-width:760px){
  .foot-bot{flex-direction:column;align-items:center;text-align:center}
  .foot-bot-l{align-items:center}
  .foot-submit{align-self:center}
}

/* ═══ AI + WHATSAPP CONCIERGE — side-by-side dark section (PDF p11–12) ═══
 * Two columns on a single dark ink background, separated by a thin gold rule.
 * Left: Powered by Dezayer AI (2 cards + Open the AI Concierge CTA).
 * Right: WhatsApp Concierge subscribe form + badges.
 */
.aiw-section{background:var(--ink);color:var(--cream-light);padding:72px 0;border-top:1px solid rgba(229,211,171,.12);border-bottom:1px solid rgba(229,211,171,.12)}
@media(max-width:880px){.aiw-section{padding:56px 0}}
@media(max-width:760px){.aiw-section{padding:48px 0}}
.aiw-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;position:relative}
.aiw-grid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(229,211,171,.14);transform:translateX(-50%)}
.aiw-col{display:flex;flex-direction:column}
.aiw-col-wa{padding-left:24px}
.aiw-col-ai{padding-right:24px}
.aiw-eye{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-family:var(--fb);font-size:11px;font-weight:500;letter-spacing:3.6px;text-transform:uppercase;margin-bottom:16px}
.aiw-eye-rule{display:inline-block;width:32px;height:1px;background:var(--gold);opacity:.6}
.aiw-h{font-family:var(--fd);font-size:clamp(30px,3.6vw,44px);font-weight:500;color:var(--cream-light);line-height:1.12;letter-spacing:-0.3px;margin:0 0 16px}
.aiw-h em{font-style:italic;color:var(--gold);font-weight:400}
.aiw-p{color:rgba(229,211,171,.78);font-size:14.5px;line-height:1.7;margin:0 0 24px;max-width:480px}
.aiw-p strong{color:var(--cream-light);font-weight:600}

/* AI cards (left column) */
.aiw-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
.aiw-card{position:relative;display:block;padding:24px 22px;border-radius:12px;border:1px solid rgba(229,211,171,.16);background:rgba(229,211,171,.04);text-decoration:none;color:inherit;transition:all .25s}
.aiw-card:hover{background:rgba(229,211,171,.07);border-color:var(--gold)}
.aiw-card-num{position:absolute;top:18px;right:20px;font-family:var(--fb);font-size:11px;letter-spacing:1.4px;color:var(--gold);opacity:.7}
.aiw-card-ic{width:42px;height:42px;border-radius:10px;background:var(--cream-light);display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:0 2px 8px rgba(42,37,32,.18)}
.aiw-card-ic svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aiw-card-ic svg.aiw-card-ic-fill{fill:var(--ink)}
.aiw-card-tt{font-family:var(--fd);font-size:18px;color:var(--gold);font-weight:500;margin-bottom:8px}
.aiw-card-ds{font-size:13px;color:rgba(229,211,171,.74);line-height:1.6}

.aiw-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:50px;border:1px solid rgba(229,211,171,.32);background:transparent;color:var(--cream-light);font-family:var(--fb);font-size:13px;font-weight:500;letter-spacing:.4px;text-decoration:none;transition:all .25s}
.aiw-cta:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--ink)}

/* WhatsApp form (right column) */
.aiw-form{display:flex;align-items:center;gap:0;background:rgba(229,211,171,.06);border:1px solid rgba(229,211,171,.18);border-radius:50px;padding:5px 5px 5px 22px;max-width:520px;margin:0 0 18px;flex-wrap:nowrap}
.aiw-inp{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--cream-light);font-family:var(--fb);font-size:14px;padding:11px 0}
.aiw-inp::placeholder{color:rgba(229,211,171,.42)}
.aiw-submit{flex:0 0 auto;border:0;cursor:pointer;background:var(--gold-deep);color:var(--ink);font-family:var(--fb);font-size:13px;font-weight:600;letter-spacing:.4px;padding:12px 24px;border-radius:50px;transition:background .2s,transform .15s}
.aiw-submit:hover{background:var(--gold);transform:translateY(-1px)}

.aiw-badges{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px;max-width:560px}
.aiw-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:50px;border:1px solid rgba(229,211,171,.18);font-family:var(--fb);font-size:12px;color:rgba(229,211,171,.82);font-weight:500}
.aiw-badge-ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(200,166,104,.20);color:var(--gold);font-size:10px;font-weight:600}
.aiw-foot{font-family:var(--fb);font-size:11.5px;color:rgba(229,211,171,.55);letter-spacing:.2px}

@media(max-width:880px){
  .aiw-grid{grid-template-columns:1fr;gap:48px}
  .aiw-grid::before{display:none}
  .aiw-col-ai,.aiw-col-wa{padding:0}
  .aiw-cards{grid-template-columns:1fr}
}

/* ═══ NEW ARRIVALS — gold metallic backdrop (PDF strip 07/08) ═══════════
 * The Best Seller and Shop by Category sections sit on cream-warm. Only
 * New Arrivals gets the gold-satin band so it visually stands apart.
 * Section gold strip cropped from the Figma render at 1905×60 → stretches
 * across the full section width. Card surface stays white for contrast. */
.carousel-sec-gold{
  background:url('/images/figma/section-gold.jpg') center/cover no-repeat,
             linear-gradient(180deg,var(--cream-warm) 0%,#dec79a 50%,var(--cream-warm) 100%);
}
.carousel-sec-gold .sec-h,
.carousel-sec-gold .sec-ey{color:var(--ink)}
.carousel-sec-gold .cat-card .cat-img{
  background:#fff;
  box-shadow:0 8px 24px rgba(42,37,32,.16);
}
.carousel-sec-gold .cat-card .cat-nm,
.carousel-sec-gold .cat-card .cat-ct{color:var(--ink)}
.carousel-sec-gold .carousel-arrow{background:#fff;box-shadow:0 6px 18px rgba(42,37,32,.18)}

/* Best Seller + Shop by Category share the cream-warm tint per Figma */
.carousel-sec:not(.carousel-sec-gold){background:var(--cream-warm)}

/* Card elevation tweaks — white surface beneath each rectangular image so
 * the cards look dimensional on cream/gold backgrounds (Figma p4–p8). */
.cat-card .cat-img{background:#fff;box-shadow:0 6px 22px rgba(42,37,32,.10)}
.cat-card{padding-bottom:8px}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER PANELS — Account / Wishlist / Cart / Theme / Share
   FEATURE-01..05 (spec May 12 2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* CRITICAL: HTML5 [hidden] must win over our display rules on panels.
 * The .modal/.drawer/.panel rules below set display:flex which overrode
 * the user agent's [hidden]{display:none}, causing the share modal to
 * cover every page invisibly and eat all clicks. (Bug found in live
 * review 2026-05-12.) */
[hidden]{display:none !important}

/* Shared backdrop */
.panel-backdrop{position:fixed;inset:0;background:rgba(20,15,10,.5);backdrop-filter:blur(2px);z-index:1500;opacity:0;transition:opacity .25s ease}
.panel-backdrop.is-vis{opacity:1}
body.panel-open{overflow:hidden}

/* Dropdown variant (account + theme) — anchored top-right under the icon */
.panel{position:fixed;background:var(--cream-light);color:var(--ink);box-shadow:0 18px 48px rgba(42,37,32,.22);border-radius:14px;z-index:1600}
.panel.panel-dropdown{top:54px;right:18px;width:280px;padding:18px;border:1px solid var(--bdr)}
.panel-theme{width:220px}
.panel-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.panel-head-stack{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:14px}
.panel-avatar{width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--ink);font-family:var(--fd);font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.panel-h{font-family:var(--fd);font-size:16px;font-weight:500;color:var(--ink);line-height:1.2}
.panel-h-sm{font-family:var(--fb);font-size:11px;font-weight:600;color:var(--gold-deep);letter-spacing:2.4px;text-transform:uppercase;margin-bottom:12px}
.panel-sub{font-family:var(--fb);font-size:12px;color:var(--ink-mute);line-height:1.4;margin-top:2px}
.panel-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.panel-actions .btn-g,.panel-actions .btn-o{width:100%;text-align:center;padding:10px 14px;font-size:13px}
.panel-menu{display:flex;flex-direction:column;border-top:1px solid var(--bdr);padding-top:8px}
.panel-menu-soft{border-top:1px solid var(--bdr);margin-top:8px}
.panel-menu-it{display:block;padding:9px 10px;font-family:var(--fb);font-size:13.5px;color:var(--ink);border-radius:8px;border:0;background:transparent;text-align:left;cursor:pointer;width:100%;text-decoration:none;transition:background .15s,color .15s}
.panel-menu-it:hover{background:var(--cream-warm);color:var(--gold-deep)}
.panel-menu-out{color:var(--ink-mute);margin-top:4px;border-top:1px solid var(--bdr);border-radius:0;padding-top:12px}
.panel-menu-form{margin:0;padding:0}

/* Theme popover */
.theme-opts{display:flex;gap:8px}
.theme-opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border:1px solid var(--bdr);background:transparent;border-radius:10px;cursor:pointer;font-family:var(--fb);font-size:12px;color:var(--ink);transition:border-color .15s,background .15s,color .15s}
.theme-opt:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.theme-opt.is-active{border-color:var(--gold-deep);background:var(--cream-warm);color:var(--gold-deep)}
.theme-opt-ic svg{display:block}

/* Drawer variant (wishlist + cart) — slide in from right */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--cream-light);color:var(--ink);z-index:1600;box-shadow:-12px 0 40px rgba(42,37,32,.18);transform:translateX(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column}
.drawer.is-open{transform:translateX(0)}

/* Try-on camera permission modal — appears over the canvas viewport when
   getUserMedia is denied / unavailable. Centered card with backdrop. */
.tryon-perm-modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(20,14,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:30;padding:24px;animation:tryonPermFade .25s ease both}
.tryon-perm-modal.is-open{display:flex}
.tryon-perm-card{background:var(--cream-light);color:var(--ink);border-radius:16px;padding:28px 28px 22px;max-width:420px;width:100%;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.42);border:1px solid rgba(200,166,104,.25)}
.tryon-perm-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(200,166,104,.16);color:var(--gold-deep);margin-bottom:14px}
.tryon-perm-h{font-family:var(--fd);font-size:22px;font-weight:500;color:var(--ink);margin:0 0 8px;line-height:1.25}
.tryon-perm-body{font-family:var(--fb);font-size:14px;line-height:1.6;color:var(--ink-mute);margin:0 0 16px}
.tryon-perm-steps{list-style:none;counter-reset:step;text-align:left;padding:0;margin:0 0 18px;background:var(--cream-warm);border-radius:12px;border:1px solid rgba(42,37,32,.08);padding:14px 16px}
.tryon-perm-steps li{position:relative;counter-increment:step;font-family:var(--fb);font-size:13px;line-height:1.55;color:var(--ink);padding:6px 0 6px 30px}
.tryon-perm-steps li::before{content:counter(step);position:absolute;left:0;top:6px;width:22px;height:22px;border-radius:50%;background:var(--gold-deep);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;font-family:var(--fb)}
.tryon-perm-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.tryon-perm-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:30px;background:var(--ink);color:var(--cream-light);font-family:var(--fb);font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;border:0;cursor:pointer;transition:background .2s,transform .15s}
.tryon-perm-cta:hover{background:var(--gold-deep);transform:translateY(-1px)}
.tryon-perm-cta-alt{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.tryon-perm-cta-alt:hover{background:var(--ink);color:var(--cream-light);transform:none}
.tryon-perm-foot{font-family:var(--fb);font-size:11.5px;color:var(--ink-mute);letter-spacing:.3px;line-height:1.5;padding-top:10px;border-top:1px solid rgba(42,37,32,.08)}
@keyframes tryonPermFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){
  .tryon-perm-card{padding:22px 18px 16px}
  .tryon-perm-h{font-size:19px}
  .tryon-perm-body{font-size:13.5px}
  .tryon-perm-steps li{font-size:12.5px;padding-left:28px}
  .tryon-perm-cta{padding:0 18px;font-size:12px}
}
[data-theme="dark"] .tryon-perm-card{background:#241810;color:#F5EFE3;border-color:rgba(200,166,104,.20)}
[data-theme="dark"] .tryon-perm-h{color:#F5EFE3}
[data-theme="dark"] .tryon-perm-body,
[data-theme="dark"] .tryon-perm-foot{color:#B8AB95}
[data-theme="dark"] .tryon-perm-steps{background:rgba(245,239,227,.05);border-color:rgba(245,239,227,.10)}
[data-theme="dark"] .tryon-perm-steps li{color:#F5EFE3}
[data-theme="dark"] .tryon-perm-cta{background:#C8A668;color:#1A120B}
[data-theme="dark"] .tryon-perm-cta-alt{background:transparent;color:#F5EFE3;border-color:#F5EFE3}

/* Menu drawer — slide in from LEFT (mobile hamburger menu) */
.drawer-menu{right:auto;left:0;transform:translateX(-100%);box-shadow:12px 0 40px rgba(42,37,32,.18);width:min(360px,88vw)}
.drawer-menu.is-open{transform:translateX(0)}
.drawer-menu .drawer-head{padding:16px 20px}
.drawer-brand img{height:34px;width:auto;display:block}
.drawer-menu-body{padding:0 4px 20px}
.drawer-search{display:flex;align-items:center;gap:8px;padding:12px 16px;margin:14px 16px 6px;background:var(--cream-warm);border:1px solid var(--bdr);border-radius:999px}
.drawer-search svg{width:18px;height:18px;color:var(--ink-mute);flex-shrink:0}
.drawer-search input{flex:1;min-width:0;background:transparent;border:0;outline:none;font-family:var(--fb);font-size:13.5px;color:var(--ink)}
.drawer-search input::placeholder{color:var(--ink-mute)}
.drawer-nav{display:flex;flex-direction:column;padding:6px 0 12px}
.drawer-nav-l,.drawer-nav-grp > summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;font-family:var(--fb);font-size:14px;font-weight:600;letter-spacing:1.2px;
  color:var(--ink);text-transform:uppercase;text-decoration:none;cursor:pointer;
  border-top:1px solid var(--bdr);background:transparent;list-style:none;
  transition:color .15s,background .15s
}
.drawer-nav > a.drawer-nav-l:first-child{border-top:0}
.drawer-nav-l:hover,.drawer-nav-grp > summary:hover{color:var(--gold-deep);background:var(--cream-warm)}
.drawer-nav-l.is-active{color:var(--gold-deep)}
.drawer-nav-grp > summary::-webkit-details-marker{display:none}
.drawer-nav-grp > summary::marker{content:""}
.drawer-nav-chev{font-size:18px;color:var(--ink-mute);transition:transform .25s}
.drawer-nav-grp[open] > summary .drawer-nav-chev{transform:rotate(90deg);color:var(--gold-deep)}
.drawer-nav-grp[open] > summary{color:var(--gold-deep);background:var(--cream-warm)}
.drawer-nav-sub{display:flex;flex-direction:column;padding:4px 26px 14px;background:var(--cream-warm)}
.drawer-nav-sub a{padding:9px 0;font-family:var(--fd);font-size:14.5px;color:var(--ink);text-decoration:none;font-weight:400;transition:color .15s,padding .15s}
.drawer-nav-sub a:hover{color:var(--gold-deep);padding-left:4px}
.drawer-nav-sub-h{margin:14px 0 4px;font-family:var(--fb);font-size:10.5px;letter-spacing:2.6px;color:var(--gold-deep);font-weight:600;text-transform:uppercase}
.drawer-nav-all{margin-top:8px;padding-top:10px !important;border-top:1px solid rgba(200,166,104,.25);color:var(--gold-deep) !important;font-weight:600 !important}
.drawer-menu-foot{display:flex;flex-direction:column;gap:10px;padding:18px 22px 8px;border-top:1px solid var(--bdr);background:var(--cream-light)}
.drawer-menu-cta{display:block;text-align:center;padding:13px 16px;background:var(--ink);color:var(--cream-light);text-decoration:none;font-family:var(--fb);font-size:12.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;border:0;border-radius:30px;cursor:pointer;width:100%;transition:background .2s}
.drawer-menu-cta:hover{background:var(--gold-deep)}
.drawer-menu-cta-alt{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.drawer-menu-cta-alt:hover{background:var(--ink);color:var(--cream-light)}
.drawer-menu-soc{display:flex;justify-content:center;gap:18px;padding:14px 0 4px;color:var(--ink)}
.drawer-menu-soc a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--ink);transition:color .2s}
.drawer-menu-soc a:hover{color:var(--gold-deep)}
.drawer-menu-soc svg{width:22px;height:22px}

/* Dark theme overrides for menu drawer */
[data-theme="dark"] .drawer-menu{background:#241810;color:#F5EFE3}
[data-theme="dark"] .drawer-menu .drawer-head,
[data-theme="dark"] .drawer-menu-foot{background:#241810;border-color:rgba(200,166,104,.20)}
[data-theme="dark"] .drawer-nav-l,
[data-theme="dark"] .drawer-nav-grp > summary{color:#F5EFE3;border-color:rgba(200,166,104,.18)}
[data-theme="dark"] .drawer-nav-l:hover,
[data-theme="dark"] .drawer-nav-grp > summary:hover,
[data-theme="dark"] .drawer-nav-grp[open] > summary{background:rgba(200,166,104,.08);color:#C8A668}
[data-theme="dark"] .drawer-nav-sub{background:rgba(245,239,227,.04)}
[data-theme="dark"] .drawer-nav-sub a{color:#F5EFE3}
[data-theme="dark"] .drawer-menu-cta{background:#C8A668;color:#1A120B}
[data-theme="dark"] .drawer-menu-cta-alt{background:transparent;color:#F5EFE3;border-color:#F5EFE3}
[data-theme="dark"] .drawer-menu-soc a{color:#F5EFE3}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--bdr);flex-shrink:0}
.drawer-head h3{font-family:var(--fd);font-size:18px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:10px;margin:0}
.drawer-count{font-family:var(--fb);font-size:12px;font-weight:500;color:var(--cream-light);background:var(--gold-deep);min-width:22px;height:22px;padding:0 7px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center}
.drawer-close{background:transparent;border:0;font-size:28px;line-height:1;color:var(--ink-mute);cursor:pointer;padding:0 4px;transition:color .15s}
.drawer-close:hover{color:var(--ink)}
.drawer-body{flex:1;overflow-y:auto;padding:0}
.drawer-loading{padding:40px 20px;text-align:center;color:var(--ink-mute);font-size:13px}
.drawer-empty{padding:48px 24px;text-align:center}
.drawer-empty-h{font-family:var(--fd);font-size:18px;color:var(--ink);margin-bottom:8px}
.drawer-empty p{font-family:var(--fb);font-size:13.5px;color:var(--ink-mute);margin-bottom:18px;line-height:1.6}
.drawer-empty .btn-g,.drawer-empty .btn-o{display:inline-block}
.drawer-list{display:flex;flex-direction:column}
.drawer-row{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:14px 20px;border-bottom:1px solid var(--bdr);align-items:start}
.drawer-img{flex-shrink:0;display:block;width:64px;height:80px;background:#fff;border-radius:6px;overflow:hidden}
.drawer-img img{width:100%;height:100%;object-fit:cover;display:block}
.drawer-info{min-width:0}
.drawer-nm{display:block;font-family:var(--fd);font-size:14px;font-weight:500;color:var(--ink);line-height:1.3;text-decoration:none;margin-bottom:4px}
.drawer-nm:hover{color:var(--gold-deep)}
.drawer-meta{font-family:var(--fb);font-size:11.5px;color:var(--ink-mute);margin-bottom:8px}
.drawer-row-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.drawer-qty{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bdr);border-radius:6px;padding:2px 4px;background:#fff}
.drawer-qty button{background:transparent;border:0;width:22px;height:22px;font-size:14px;color:var(--ink);cursor:pointer;line-height:1}
.drawer-qty button:hover{color:var(--gold-deep)}
.drawer-qty span{font-family:var(--fb);font-size:12.5px;color:var(--ink);min-width:18px;text-align:center}
.drawer-line{font-family:var(--fb);font-size:13px;font-weight:600;color:var(--ink);margin-left:auto}
.drawer-rm{background:transparent;border:0;color:var(--ink-mute);font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;transition:color .15s}
.drawer-rm:hover{color:#B5443D}
.btn-mini-g{font-family:var(--fb);font-size:11.5px;font-weight:600;background:var(--gold);color:var(--ink);border:0;padding:6px 12px;border-radius:999px;cursor:pointer;letter-spacing:.3px;transition:background .15s}
.btn-mini-g:hover{background:var(--gold-deep);color:var(--cream-light)}
.drawer-foot{padding:18px 20px;border-top:1px solid var(--bdr);background:var(--cream-warm);flex-shrink:0}
.drawer-totals{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-family:var(--fb);font-size:14px;color:var(--ink)}
.drawer-totals strong{font-weight:600;font-size:16px}
.drawer-actions{display:flex;gap:10px}
.drawer-actions .btn-g,.drawer-actions .btn-o{flex:1;text-align:center;padding:11px 14px;font-size:13px}

/* Modal variant (share) */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1600;padding:20px}
.modal-card{background:var(--cream-light);color:var(--ink);border-radius:16px;padding:28px;max-width:440px;width:100%;box-shadow:0 24px 60px rgba(42,37,32,.30);position:relative}
.modal-close{position:absolute;top:14px;right:14px;background:transparent;border:0;font-size:24px;color:var(--ink-mute);cursor:pointer;line-height:1;padding:4px 8px}
.modal-close:hover{color:var(--ink)}
.modal-h{font-family:var(--fd);font-size:20px;font-weight:500;color:var(--ink);margin-bottom:18px}
.modal-link{display:flex;gap:8px;margin-bottom:18px}
.modal-link-inp{flex:1;border:1px solid var(--bdr);background:#fff;color:var(--ink-mute);font-family:var(--fb);font-size:12.5px;padding:10px 12px;border-radius:8px;min-width:0}
.modal-copy{padding:10px 16px;font-size:13px;white-space:nowrap}
.modal-targets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.modal-target{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border:1px solid var(--bdr);border-radius:10px;color:var(--ink);font-family:var(--fb);font-size:11.5px;text-decoration:none;background:#fff;transition:border-color .15s,color .15s,transform .15s}
.modal-target:hover{border-color:var(--gold-deep);color:var(--gold-deep);transform:translateY(-1px)}
.modal-target svg{display:block}

/* Toast */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--cream-light);font-family:var(--fb);font-size:13px;padding:11px 18px;border-radius:999px;z-index:1700;opacity:0;transition:opacity .25s,transform .25s;box-shadow:0 12px 32px rgba(42,37,32,.32)}
.toast.is-vis{opacity:1;transform:translateX(-50%) translateY(0)}

/* Mobile tweaks */
@media(max-width:520px){
  .panel.panel-dropdown{top:auto;bottom:0;right:0;left:0;width:100%;border-radius:18px 18px 0 0}
  .modal-targets{grid-template-columns:repeat(4,1fr);gap:6px}
  .modal-card{padding:22px 18px}
  .drawer-row{grid-template-columns:56px 1fr auto;gap:10px;padding:12px 16px}
  .drawer-img{width:56px;height:70px}
}

/* ═══════════════════════════════════════════════════════════════════════
   THEME — Dark mode (FEATURE-04, spec May 12 2026)
   PDF dark palette:
     bg #1A120B, surface #2B1F14, text #F5EFE3, dim #B8AB95
     accent gold #C8A668 unchanged
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"]{
  --cream:#1A120B; --cream-light:#241810; --cream-warm:#2B1F14;
  --ink:#F5EFE3; --ink-mute:#B8AB95;
  --gold:#C8A668; --gold-deep:#B8956A; --gold-mid:#D4B57A; --gold-soft:#E8D5A0;
  --bdr:rgba(200,166,104,.20); --fb2:#2B1F14;
}
[data-theme="dark"] body{background:#1A120B;color:#F5EFE3}
[data-theme="dark"] .panel,
[data-theme="dark"] .drawer,
[data-theme="dark"] .modal-card{background:#241810;color:#F5EFE3}
[data-theme="dark"] .panel-menu-it:hover,
[data-theme="dark"] .theme-opt.is-active{background:rgba(200,166,104,.10)}
[data-theme="dark"] .drawer-img,
[data-theme="dark"] .modal-link-inp,
[data-theme="dark"] .drawer-qty,
[data-theme="dark"] .modal-target{background:#2B1F14}
[data-theme="dark"] .modal-target{color:#F5EFE3}
[data-theme="dark"] .drawer-foot{background:#2B1F14}
[data-theme="dark"] .cat-card .cat-img,
[data-theme="dark"] .carousel-sec:not(.carousel-sec-gold){background:#2B1F14}
[data-theme="dark"] .hdr{background:#241810}
[data-theme="dark"] .ann{background:#0F0905}
[data-theme="dark"] .toast{background:#F5EFE3;color:#1A120B}
/* Announcement bar text must stay cream regardless of theme (dark .ann
 * background is even darker than light cream-light, so cream text needs
 * an explicit override against the var(--cream-light) inheritance). */
[data-theme="dark"] .ann,
[data-theme="dark"] .ann-title,
[data-theme="dark"] .ann-msg,
[data-theme="dark"] .ann-marquee-item,
[data-theme="dark"] .ann-ic,
[data-theme="dark"] .ann-soc a{color:#F5EFE3;background:transparent}
[data-theme="dark"] .ann-marquee-sep{color:#C8A668}
[data-theme="dark"] .ann-soc a:hover{color:#C8A668;background:transparent}
/* Header + nav surfaces use hardcoded #fff that wrecks dark mode */
[data-theme="dark"] .hdr-track{background:#2B1F14;color:#F5EFE3;border-color:rgba(200,166,104,.30)}
[data-theme="dark"] .hdr-track:hover{border-color:#C8A668;color:#C8A668}
[data-theme="dark"] .hdr-nav-link{color:#F5EFE3}
[data-theme="dark"] .hdr-nav-link.active,
[data-theme="dark"] .hdr-nav-link:hover{color:#C8A668}
/* Search input lives in the .hdr too */
[data-theme="dark"] .hdr-search input,
[data-theme="dark"] .hdr-search{background:#2B1F14;color:#F5EFE3;border-color:rgba(200,166,104,.20)}
[data-theme="dark"] .hdr-search input::placeholder{color:rgba(245,239,227,.45)}
/* Mega + sub-category dropdowns have hardcoded background:#fff */
[data-theme="dark"] .hdr-nav-drop,
[data-theme="dark"] .hdr-nav-drop-mega,
[data-theme="dark"] .hdr-nav-drop-soon,
[data-theme="dark"] .hdr-nav-drop-sub{background:#241810;border-color:rgba(200,166,104,.20);color:#F5EFE3}
[data-theme="dark"] .hdr-nav-mega-l,
[data-theme="dark"] .hdr-nav-drop-h,
[data-theme="dark"] .hdr-nav-drop-p{color:#F5EFE3}
[data-theme="dark"] .hdr-nav-mega-l:hover{color:#C8A668}
[data-theme="dark"] .hdr-nav-sub-aside{border-color:rgba(200,166,104,.20)}
/* Reviews cards use white-ish backgrounds */
[data-theme="dark"] .tst-card{background:#241810;border-color:rgba(200,166,104,.16)}
[data-theme="dark"] .tst-quote,
[data-theme="dark"] .tst-name{color:#F5EFE3}
[data-theme="dark"] .tst-loc{color:#B8AB95}
/* AI + WhatsApp section cards */
[data-theme="dark"] .aiw-section{background:#0F0905;color:#F5EFE3}
[data-theme="dark"] .aiw-h{color:#F5EFE3}
[data-theme="dark"] .aiw-h em{color:#C8A668}
[data-theme="dark"] .aiw-p{color:rgba(245,239,227,.72)}
[data-theme="dark"] .aiw-card{background:#241810;border-color:rgba(200,166,104,.16);color:#F5EFE3}
[data-theme="dark"] .aiw-card-tt{color:#F5EFE3}
[data-theme="dark"] .aiw-card-ds{color:rgba(245,239,227,.72)}
[data-theme="dark"] .aiw-cta{background:transparent;color:#F5EFE3;border-color:rgba(245,239,227,.32)}
[data-theme="dark"] .aiw-cta:hover{background:#C8A668;color:#1A120B;border-color:#C8A668}
[data-theme="dark"] .aiw-badge{color:#F5EFE3}
[data-theme="dark"] .aiw-badge-ic{background:rgba(200,166,104,.20);color:#C8A668}
/* Footer: var(--ink) bg flipped to light in dark mode — force dark surface */
[data-theme="dark"] .foot{background:#0F0905;color:rgba(245,239,227,.62)}
[data-theme="dark"] .foot-desc{color:rgba(245,239,227,.55)}
[data-theme="dark"] .foot-col-h{color:#C8A668}
[data-theme="dark"] .foot-col a{color:rgba(245,239,227,.62)}
[data-theme="dark"] .foot-col a:hover{color:#C8A668}
[data-theme="dark"] .foot-social a{background:transparent;color:#F5EFE3}
[data-theme="dark"] .foot-social a:hover{background:transparent;color:#C8A668}
[data-theme="dark"] .foot-bot{color:rgba(245,239,227,.45);border-top-color:rgba(245,239,227,.10)}
[data-theme="dark"] .foot-pay{background:rgba(245,239,227,.05);border-color:rgba(245,239,227,.18);color:rgba(245,239,227,.78)}
[data-theme="dark"] .foot-skv{color:#C8A668}
[data-theme="dark"] .foot-submit{background:transparent;color:#F5EFE3;border-color:rgba(245,239,227,.32)}
[data-theme="dark"] .foot-submit:hover{background:#C8A668;color:#1A120B;border-color:#C8A668}
/* USP / trust strip uses var(--ink) bg too */
[data-theme="dark"] .usp-band{background:#0F0905;color:#F5EFE3;border-top-color:rgba(245,239,227,.10)}
[data-theme="dark"] .usp-t{color:#F5EFE3}
[data-theme="dark"] .usp-sub{color:rgba(245,239,227,.7)}
[data-theme="dark"] .usp-it + .usp-it::before{background:rgba(245,239,227,.16)}
/* Newsletter section + sec-h headings in dark */
[data-theme="dark"] .sec-h{color:#F5EFE3}
[data-theme="dark"] .sec-h .gold{color:#C8A668}
[data-theme="dark"] .sec-ey{color:#C8A668}
/* Carousel arrows + cat captions */
[data-theme="dark"] .cat-nm{color:#F5EFE3}
[data-theme="dark"] .cat-ct{color:rgba(245,239,227,.65)}
[data-theme="dark"] .cat-card .cat-img{background:#241810}
/* Theme toggle active state — was getting gold-on-gold due to button UA fill */
[data-theme="dark"] .theme-opt{background:#2B1F14;color:#F5EFE3;border-color:rgba(245,239,227,.16)}
[data-theme="dark"] .theme-opt.is-active{background:rgba(200,166,104,.18);color:#C8A668;border-color:#C8A668}
[data-theme="dark"] .theme-opt:hover{border-color:#C8A668;color:#C8A668}
/* Form inputs in newsletter / footer */
[data-theme="dark"] .foot-inp,
[data-theme="dark"] .aiw-inp,
[data-theme="dark"] .news-inp{background:#2B1F14;color:#F5EFE3;border-color:rgba(200,166,104,.20)}
[data-theme="dark"] .foot-inp::placeholder,
[data-theme="dark"] .aiw-inp::placeholder{color:rgba(245,239,227,.45)}
/* Auth pages — login/register sit on a card-like surface */
[data-theme="dark"] .auth-card,
[data-theme="dark"] .form-card{background:#241810;color:#F5EFE3;border-color:rgba(200,166,104,.20)}
[data-theme="dark"] .form-inp,
[data-theme="dark"] input[type="text"]:not([class*="ann"]),
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea{background:#2B1F14;color:#F5EFE3;border-color:rgba(200,166,104,.20)}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{color:rgba(245,239,227,.45)}

/* ═══ SCROLL TO TOP (ISSUE-01 — spec May 12 2026) ═══ */
.scroll-top{position:fixed;bottom:24px;right:24px;width:46px;height:46px;border-radius:50%;border:0;
  background:#C8A668;color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s,box-shadow .2s,background .2s;
  box-shadow:0 6px 18px rgba(42,37,32,.18);z-index:900}
.scroll-top.is-vis{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 28px rgba(200,166,104,.45);background:#B8956A}
.scroll-top svg{width:22px;height:22px;display:block}
@media(max-width:520px){.scroll-top{bottom:18px;right:18px;width:44px;height:44px}.scroll-top svg{width:20px;height:20px}}