/* ============================================================
   ROYAL MUSHQ — Lusion-inspired creative storefront (v4)
   Smooth scroll · kinetic type · custom cursor · grain · duotone
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Jost:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&display=swap');

:root {
    --gold: #E0B84C;
    --gold-light: #F5DE8A;
    --gold-deep: #b88a2a;
    --bg: #0b0b0c;
    --bg-soft: #121214;
    --bg-soft-2: #17171a;
    --cream: #f2eee5;
    --cream-dim: #b7b2a6;
    --muted: #79756c;
    --line: rgba(242,238,229,.10);
    --line-gold: rgba(224,184,76,.30);
    --gold-grad: linear-gradient(110deg,#b88a2a,#E0B84C 40%,#F5DE8A 60%,#E0B84C);
    --ease: cubic-bezier(.19,1,.22,1);
    --disp: 'Syne', system-ui, sans-serif;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --body: 'Jost', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
    font-family: var(--body);
    background: var(--bg);
    color: var(--cream);
    line-height: 1.6;
    font-weight: 300;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 { font-family: var(--disp); font-weight: 700; letter-spacing: -.02em; line-height: .98; color: var(--cream); }
p { color: var(--cream-dim); font-weight: 300; }
a { text-decoration: none; color: inherit; transition: color .4s var(--ease); }
img { max-width: 100%; display: block; }
::selection { background: var(--gold); color: #0b0b0c; }

/* Custom scrollbar (visible, on-brand) */
html { scrollbar-width: thin; scrollbar-color: var(--gold-deep) var(--bg-soft); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 10px; border: 3px solid var(--bg-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------- Animated colour field (Lusion-style blobs) ---------- */
.bg-field { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: var(--bg); }
.bg-field .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .25; mix-blend-mode: screen; will-change: transform; }
.bg-field .b1 { width: 50vw; height: 50vw; left: -10vw; top: -10vw; background: radial-gradient(circle,#7a5a12,transparent 60%); animation: drift1 26s var(--ease) infinite alternate; }
.bg-field .b2 { width: 45vw; height: 45vw; right: -10vw; top: 20vh; background: radial-gradient(circle,#5a3d0c,transparent 60%); animation: drift2 32s var(--ease) infinite alternate; }
.bg-field .b3 { width: 40vw; height: 40vw; left: 25vw; bottom: -15vw; background: radial-gradient(circle,#8a6a1a,transparent 60%); animation: drift3 30s var(--ease) infinite alternate; }
@keyframes drift1 { to { transform: translate(20vw,15vh) scale(1.2); } }
@keyframes drift2 { to { transform: translate(-15vw,10vh) scale(1.3); } }
@keyframes drift3 { to { transform: translate(10vw,-12vh) scale(1.1); } }

/* ---------- Film grain ---------- */
.grain { position: fixed; inset: -200%; z-index: 9990; pointer-events: none; opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 0.5s steps(2) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 50%{transform:translate(-3%,2%)} 100%{transform:translate(2%,-2%)} }

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); mix-blend-mode: difference; opacity: 0; }
body.cursor-active .cursor-dot, body.cursor-active .cursor-ring { opacity: 1; }
.cursor-dot { width: 7px; height: 7px; background: #fff; }
.cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.6); transition: width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); }
.cursor-ring.is-hover { width: 64px; height: 64px; background: rgba(255,255,255,.12); border-color: transparent; }
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
@media (hover: none), (max-width: 991px) { .cursor-dot, .cursor-ring { display: none; } body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; } }

/* ---------- Preloader ---------- */
#loader { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; }
#loader .l-num { font-family: var(--disp); font-size: clamp(4rem,16vw,12rem); font-weight: 800; line-height: 1; }
#loader .l-label { letter-spacing: .5em; text-transform: uppercase; font-size: .7rem; color: var(--gold); margin-top: 1rem; }
#loader .l-bar { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: var(--gold-grad); }

/* ---------- Layout helpers ---------- */
.wrap { width: min(92%, 1400px); margin: 0 auto; }
.section { padding: clamp(80px,12vw,180px) 0; position: relative; }
.section-sm { padding: clamp(56px,7vw,96px) 0; position: relative; }
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; text-transform: uppercase; letter-spacing: .4em; font-size: .68rem; color: var(--gold); font-weight: 500; margin-bottom: 1.4rem; font-family: var(--body); }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); display: inline-block; }
.section-title { font-size: clamp(2.4rem,7vw,6rem); letter-spacing: -.03em; }
.serif-accent { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: 0; }
.divider-gold { width: 60px; height: 1px; border: 0; background: var(--gold); opacity: 1; margin: 1.4rem auto; }
.ms-0.divider-gold, .divider-gold.ms-0 { margin-left: 0; }
.text-gold { color: var(--gold) !important; }
.text-light { color: var(--cream) !important; }
.text-muted { color: var(--muted) !important; }
.bg-dark-2, .bg-dark-3 { background: var(--bg-soft) !important; }
.border-secondary { border-color: var(--line) !important; }
.lead { font-size: 1.15rem; color: var(--cream-dim); font-weight: 300; }
.gold-text-grad { color: var(--gold); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Kinetic line reveal ---------- */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; transform: translateY(110%); will-change: transform; }
.no-js .reveal-line > span, .reveal-line > span.shown { transform: none; }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: .6rem; font-family: var(--body); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; padding: 1.05rem 2.4rem; border-radius: 60px; border: 1px solid transparent; transition: all .5s var(--ease); overflow: hidden; }
.btn-gold { background: var(--gold-grad); background-size: 200% 100%; color: #0b0b0c; }
.btn-gold:hover { background-position: 100% 0; color: #000; transform: translateY(-2px); }
.btn-outline-gold { background: transparent; color: var(--cream); border-color: var(--line-gold); }
.btn-outline-gold:hover { background: var(--cream); color: #0b0b0c; border-color: var(--cream); }
.btn-sm { padding: .55rem 1.1rem; font-size: .66rem; }
.link-underline { position: relative; color: var(--gold); text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; }
.link-underline::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(.0); transform-origin: right; transition: transform .5s var(--ease); }
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Scroll progress ---------- */
#scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 2000; background: var(--gold-grad); }

/* ---------- Navbar ---------- */
.navbar.main-nav { background: transparent; transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease); padding: 1.1rem 0; }
.navbar.main-nav.scrolled { background: rgba(11,11,12,.82); backdrop-filter: blur(16px); padding: .55rem 0; border-bottom: 1px solid var(--line); }
.navbar.main-nav .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.navbar .navbar-brand { padding: 0; margin: 0; display: flex; align-items: center; }
.navbar .navbar-brand img { max-height: 50px; width: auto; transition: max-height .5s var(--ease); }
.navbar.scrolled .navbar-brand img { max-height: 38px; }
.navbar .brand-text { font-family: var(--disp); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.navbar .navbar-collapse { flex-grow: 1; }
.navbar-toggler { border: 0; color: var(--gold); font-size: 1.6rem; padding: .2rem .4rem; box-shadow: none !important; line-height: 1; }
.navbar-toggler:focus { box-shadow: none; }
.navbar .nav-link { color: var(--cream) !important; text-transform: uppercase; font-size: .74rem; letter-spacing: .14em; margin: 0 .9rem; position: relative; font-weight: 400; font-family: var(--body); }
.navbar .nav-link::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: var(--gold); transition: width .45s var(--ease); }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { width: 100%; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--gold) !important; }
.nav-icon-btn { color: var(--cream); font-size: 1.1rem; position: relative; margin-left: .8rem; display: inline-flex; align-items: center; }
.nav-icon-btn:hover { color: var(--gold); }
.cart-badge { position: absolute; top: -8px; right: -11px; background: var(--gold); color: #000; font-size: .58rem; font-weight: 600; border-radius: 50%; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.nav-right { gap: 1.25rem; }
.nav-right .nav-icon-btn, .nav-right .theme-toggle, .nav-right .dropdown > .nav-icon-btn { margin: 0; font-size: 1.15rem; line-height: 1; display: inline-flex; align-items: center; }
.nav-right .theme-toggle i { font-size: 1.15rem; }
.nav-right .dropdown { display: inline-flex; }
.dropdown-menu-dark { background: #141416; border: 1px solid var(--line); border-radius: 8px; }
.dropdown-menu-dark .dropdown-item { color: var(--cream-dim); font-size: .9rem; }
.dropdown-menu-dark .dropdown-item:hover { background: rgba(224,184,76,.1); color: var(--gold); }
.dropdown-header { color: var(--muted); }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.hero .hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; z-index: 0; overflow: hidden; }
.hero .hero-media img { width: 100%; height: 116%; object-fit: cover; object-position: center; opacity: .85; filter: grayscale(.2) contrast(1.02) brightness(.82); will-change: transform; }
.hero .hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 2%, rgba(11,11,12,0) 45%), linear-gradient(0deg, var(--bg) 2%, rgba(11,11,12,0) 30%); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bg) 38%, rgba(11,11,12,0) 70%); }
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; max-width: 62%; margin-bottom: .5rem; }
.hero .eyebrow { max-width: 62%; }
.hero .hero-sub { max-width: 440px; margin: 2rem 0 2.6rem; font-size: 1.1rem; color: var(--cream-dim); }
.scroll-cue { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--gold); font-size: .65rem; letter-spacing: .3em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.scroll-cue i { animation: bob 1.8s var(--ease) infinite; font-size: 1.1rem; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* ---------- Marquee ---------- */
.lux-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 1.6rem 0; white-space: nowrap; }
.lux-strip .track { display: inline-flex; }
.lux-strip span { font-family: var(--disp); font-weight: 700; font-size: clamp(1.4rem,3vw,2.4rem); text-transform: uppercase; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1px var(--cream-dim); margin: 0 1.6rem; }
.lux-strip span.fill { color: var(--gold); -webkit-text-stroke: 0; }
.marquee-track { display: inline-flex; white-space: nowrap; will-change: transform; }

/* ---------- Category cards ---------- */
.cat-card { position: relative; display: block; overflow: hidden; height: 70vh; min-height: 460px; border-radius: 4px; }
.cat-card img, .cat-card .cat-fallback { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) brightness(.7) contrast(1.05); transition: transform 1.1s var(--ease), filter .8s var(--ease); will-change: transform; }
.cat-card .cat-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg,#1a1a1a,#050505); font-size: 5rem; color: rgba(224,184,76,.3); }
.cat-card:hover img { transform: scale(1.06); filter: grayscale(0) brightness(.85); }
.cat-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent 60%); }
.cat-card .cat-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 2.6rem; }
.cat-card .cat-num { font-family: var(--disp); font-size: .8rem; color: var(--gold); letter-spacing: .2em; }
.cat-card .cat-overlay h3 { font-size: clamp(2.2rem,4vw,3.4rem); margin: .4rem 0; color: #fff; }
.cat-card .cat-link { color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; opacity: .8; transition: all .5s var(--ease); }
.cat-card:hover .cat-link { opacity: 1; color: var(--gold-light); letter-spacing: .3em; }

/* ---------- Always-dark sections (light text in both themes) ---------- */
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark p, .on-dark .lead { color: rgba(255,255,255,.82) !important; }
.on-dark .eyebrow { color: var(--gold-light); }
.on-dark .breadcrumb-gold { color: rgba(255,255,255,.6); }
.on-dark .breadcrumb-gold a { color: var(--gold-light); }
.on-dark .gold-text-grad { background: linear-gradient(110deg,#c79a2e,#E0B84C 40%,#F5DE8A 60%,#E0B84C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.on-dark .btn-outline-gold { color: #fff; border-color: rgba(255,255,255,.45); }
.on-dark .btn-outline-gold:hover { background: #fff; color: #0b0b0c; border-color: #fff; }

/* ---------- Product cards ---------- */
.product-card { position: relative; background: transparent; height: 100%; }
.product-thumb { position: relative; aspect-ratio: 3/4; overflow: hidden; background: linear-gradient(160deg,#1b1b1d,#0b0b0c); border-radius: 4px; }
.product-thumb img { width: 100%; height: 100% !important; object-fit: cover; filter: grayscale(.55) brightness(.85) contrast(1.05); transition: transform .9s var(--ease), filter .7s var(--ease); will-change: transform; }
.product-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(224,184,76,.06)); mix-blend-mode: overlay; pointer-events: none; }
.product-card:hover .product-thumb img { transform: scale(1.05); filter: grayscale(0) brightness(1); }
.product-thumb .ph-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; color: rgba(224,184,76,.3); }
.product-badge { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--gold); color: #0b0b0c; font-size: .6rem; font-weight: 600; padding: 4px 11px; border-radius: 40px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--body); }
.product-badge.sold-out { background: #26262a; color: var(--cream-dim); }
.product-actions { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; flex-direction: column; gap: .5rem; opacity: 0; transform: translateY(10px); transition: all .5s var(--ease); }
.product-card:hover .product-actions { opacity: 1; transform: none; }
.action-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(11,11,12,.6); color: #fff; border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; transition: all .35s var(--ease); backdrop-filter: blur(6px); }
.action-icon:hover, .action-icon.active { background: var(--gold); color: #0b0b0c; border-color: var(--gold); }
.product-body { padding: 1.1rem .2rem 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.product-cat { font-size: .62rem; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); }
.product-title { font-family: var(--disp); font-size: 1.05rem; font-weight: 600; margin: .35rem 0 0; color: var(--cream); letter-spacing: -.01em; transition: color .4s var(--ease); }
.product-card:hover .product-title { color: var(--gold); }
.price-now { color: var(--gold); font-weight: 500; font-size: 1rem; font-family: var(--body); white-space: nowrap; }
.price-old { color: var(--muted); text-decoration: line-through; font-size: .82rem; margin-left: .4rem; }

/* ---------- Editorial split ---------- */
.editorial-img { position: relative; overflow: hidden; border-radius: 4px; }
.editorial-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.05); transition: transform 1.2s var(--ease); will-change: transform; }

/* ---------- Feature blocks ---------- */
.feature-box { padding: 2rem 1rem; border-top: 1px solid var(--line); }
.feature-box i { font-size: 1.8rem; color: var(--gold); margin-bottom: 1rem; display: inline-block; }
.feature-box h5 { color: var(--cream); font-family: var(--disp); font-weight: 600; font-size: 1rem; }
.feature-box p { color: var(--muted); font-size: .86rem; margin: .3rem 0 0; }

/* ---------- Panels / forms ---------- */
.panel { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; }
.form-control, .form-select { background: var(--bg-soft-2); border: 1px solid var(--line); color: var(--cream); padding: .85rem 1.1rem; border-radius: 6px; font-weight: 300; font-family: var(--body); }
.form-control:focus, .form-select:focus { background: var(--bg-soft-2); color: var(--cream); border-color: var(--gold); box-shadow: 0 0 0 .12rem rgba(224,184,76,.18); }
.form-control::placeholder { color: #5f5c55; }
.form-label { color: var(--cream-dim); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .45rem; }
.form-select option { background: #141416; color: var(--cream); }
.form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
.form-check-label { color: var(--cream-dim); }
.input-group .btn { border-radius: 0 6px 6px 0; }

/* ---------- Page header ---------- */
.page-header { padding: clamp(150px,18vw,240px) 0 clamp(50px,7vw,90px); text-align: center; position: relative; overflow: hidden; }
.page-header h1 { font-size: clamp(2.6rem,8vw,6rem); }
.breadcrumb-gold { display: inline-flex; gap: .5rem; color: var(--muted); font-size: .78rem; letter-spacing: .06em; }
.breadcrumb-gold a { color: var(--gold); }

/* ---------- Tables ---------- */
.table-dark-lux { --bs-table-bg: transparent; --bs-table-color: var(--cream-dim); --bs-table-border-color: var(--line); --bs-table-striped-bg: transparent; --bs-table-accent-bg: transparent; color: var(--cream-dim); background: transparent; }
.table-dark-lux > :not(caption) > * > * { background-color: transparent; color: inherit; box-shadow: none; }
.table-dark-lux th { color: var(--gold); border-color: var(--line); text-transform: uppercase; font-size: .68rem; letter-spacing: .1em; font-weight: 500; }
.table-dark-lux td { border-color: var(--line); vertical-align: middle; color: var(--cream-dim); }
.table-dark-lux .text-light, .table-dark-lux a.text-light { color: var(--cream) !important; }
.qty-input { width: 72px; text-align: center; }
.chip { font-size: .7rem; padding: .35rem .8rem; border-radius: 40px; background: rgba(224,184,76,.1); color: var(--gold); border: 1px solid var(--line-gold); letter-spacing: .05em; }

/* ---------- Alerts ---------- */
.alert { border: 0; border-radius: 6px; }
.alert-success { background: rgba(40,167,69,.12); color: #8fdca0; border-left: 2px solid #28a745; }
.alert-danger { background: rgba(220,53,69,.12); color: #f1949c; border-left: 2px solid #dc3545; }
.alert-info { background: rgba(224,184,76,.1); color: var(--gold-light); border-left: 2px solid var(--gold); }
.badge.bg-secondary { background: #26262a !important; color: var(--cream-dim); }

/* ---------- Footer ---------- */
footer.site-footer { background: #08080a; border-top: 1px solid var(--line); padding-top: clamp(60px,9vw,120px); position: relative; overflow: hidden; }
.footer-huge { font-family: var(--disp); font-weight: 800; font-size: clamp(3rem,15vw,13rem); line-height: .85; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(242,238,229,.16); text-align: center; margin-bottom: 2rem; }
footer.site-footer h5 { color: var(--cream); font-family: var(--body); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.3rem; }
footer.site-footer a { color: var(--muted); display: block; margin-bottom: .6rem; font-size: .9rem; }
footer.site-footer a:hover { color: var(--gold); }
footer .text-muted { color: var(--muted) !important; }
.social-ico { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-gold); display: inline-flex; align-items: center; justify-content: center; color: var(--gold); margin-right: .5rem; transition: all .4s var(--ease); }
.social-ico:hover { background: var(--gold); color: #0b0b0c; transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 50px; padding: 24px 0; color: var(--muted); font-size: .8rem; }

/* ---------- WhatsApp float ---------- */
.wa-float { position: fixed; bottom: 26px; right: 26px; z-index: 1500; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 8px 22px rgba(37,211,102,.4); }
.wa-float:hover { color: #fff; transform: scale(1.08); }

/* ---------- Scroll reveal primitives ---------- */
[data-reveal] { opacity: 0; transform: translateY(50px); will-change: opacity, transform; }
[data-reveal="left"] { transform: translateX(-60px); }
[data-reveal="right"] { transform: translateX(60px); }
[data-reveal="zoom"] { transform: scale(.92); }
.no-js [data-reveal], [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal]{opacity:1;transform:none} .hero .hero-media img{transform:none!important} .grain,.bg-field .blob{animation:none} }

/* ---------- Bootstrap text overrides for readability ---------- */
.text-success { color: #6fcf86 !important; }
.text-danger { color: #f1949c !important; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .navbar.main-nav { background: rgba(8,8,10,.94); backdrop-filter: blur(14px); padding: .7rem 0; }
    .navbar.main-nav .wrap { gap: 0; }
    .navbar .navbar-collapse { flex-basis: 100%; padding-top: 1.2rem; margin-top: .6rem; border-top: 1px solid var(--line); }
    .navbar .navbar-nav { gap: .2rem; }
    .navbar .nav-link { display: inline-block; padding: .6rem 0; margin: 0; font-size: .8rem; }
    .navbar .nav-link::after { display: none; }
    .nav-right { gap: .2rem; }
    .hero .hero-media { width: 100%; }
    .hero .hero-media img { opacity: .35; }
    .hero .hero-media::after { background: linear-gradient(90deg, var(--bg) 5%, rgba(11,11,12,.3) 60%); }
    .hero::after { background: linear-gradient(90deg, var(--bg) 20%, rgba(11,11,12,.55)); }
    .hero h1, .hero .eyebrow, .hero .hero-sub { max-width: 100%; }
    .cat-card { height: 52vh; min-height: 380px; }
    .section { padding: 70px 0; }
    .editorial-img { height: 380px !important; }
    .footer-huge { font-size: clamp(2.2rem,13vw,6rem); }
}
@media (max-width: 575px) {
    .btn { padding: .85rem 1.5rem; font-size: .68rem; }
    .wrap { width: 90%; }
    .hero h1 { font-size: clamp(2.6rem, 14vw, 4rem); }
    .product-thumb { aspect-ratio: 4/5; }
    .product-body { flex-wrap: wrap; gap: .3rem; }
    .lux-strip span { font-size: 1.3rem; margin: 0 1rem; }
    .row.g-5 { --bs-gutter-y: 1.5rem; }
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
html[data-theme="light"] {
    --gold: #a8791f;
    --gold-light: #caa23f;
    --gold-deep: #8a6a1a;
    --bg: #f4efe6;
    --bg-soft: #ffffff;
    --bg-soft-2: #f7f2e9;
    --cream: #1b1814;
    --cream-dim: #423d36;
    --muted: #847d70;
    --line: rgba(20,16,10,.12);
    --line-gold: rgba(168,121,31,.4);
    --gold-grad: linear-gradient(110deg,#8a6a1a,#a8791f 40%,#caa23f 60%,#a8791f);
}
[data-theme="light"] body { background: var(--bg); color: var(--cream); }
[data-theme="light"] .bg-field { background: var(--bg); }
[data-theme="light"] .bg-field .blob { opacity: .10; mix-blend-mode: multiply; }
[data-theme="light"] .grain { opacity: .025; mix-blend-mode: multiply; }
/* Cursor stays white + mix-blend difference so it auto-inverts: dark on light bg, light on dark bg */

[data-theme="light"] .navbar.main-nav.scrolled { background: rgba(255,255,255,.86); border-bottom-color: var(--line); }
[data-theme="light"] .navbar .nav-link { color: var(--cream) !important; }
[data-theme="light"] .nav-icon-btn { color: var(--cream); }
[data-theme="light"] .navbar-toggler { color: var(--gold); }

[data-theme="light"] .product-thumb { background: linear-gradient(160deg,#efe9dd,#fff); }
[data-theme="light"] .product-thumb img { filter: grayscale(.35) brightness(1) contrast(1.02); }
[data-theme="light"] .product-card:hover .product-thumb img { filter: grayscale(0) brightness(1.02); }

[data-theme="light"] .dropdown-menu-dark { background: #fff; border-color: var(--line); }
[data-theme="light"] .dropdown-menu-dark .dropdown-item { color: var(--cream-dim); }
[data-theme="light"] .dropdown-menu-dark .dropdown-item:hover { background: rgba(168,121,31,.1); color: var(--gold-deep); }
[data-theme="light"] .form-select option { background: #fff; color: var(--cream); }
[data-theme="light"] .form-control::placeholder { color: #9a9488; }

[data-theme="light"] .btn-outline-gold { color: var(--cream); border-color: var(--line-gold); }
[data-theme="light"] .btn-outline-gold:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

[data-theme="light"] footer.site-footer { background: #efe9dd; }
[data-theme="light"] .footer-huge { -webkit-text-stroke: 1px rgba(20,16,10,.14); }
[data-theme="light"] .hero .hero-media img { filter: grayscale(.1) contrast(1.02) brightness(1); }
[data-theme="light"] .alert-success { color: #1f7a37; }
[data-theme="light"] .alert-danger { color: #b02a37; }
[data-theme="light"] .text-success { color: #1f7a37 !important; }

/* Theme toggle button */
.theme-toggle { background: none; border: 0; color: var(--cream); font-size: 1.1rem; margin-left: .8rem; display: inline-flex; align-items: center; cursor: pointer; padding: 0; }
.theme-toggle:hover { color: var(--gold); }
.theme-toggle .bi-brightness-high, [data-theme="light"] .theme-toggle .bi-moon { display: none; }
[data-theme="light"] .theme-toggle .bi-brightness-high { display: inline-block; }

/* On-dark overrides — placed last so they win over the light-theme rules */
.on-dark .btn-outline-gold,
[data-theme="light"] .on-dark .btn-outline-gold { color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
.on-dark .btn-outline-gold:hover,
[data-theme="light"] .on-dark .btn-outline-gold:hover { background: var(--gold-light) !important; color: #0b0b0c !important; border-color: var(--gold-light) !important; }

/* Light mode: transparent navbar over a dark page banner keeps light text until scrolled */
[data-theme="light"] .has-dark-header .main-nav:not(.scrolled) .nav-link { color: rgba(255,255,255,.92) !important; }
[data-theme="light"] .has-dark-header .main-nav:not(.scrolled) .nav-icon-btn,
[data-theme="light"] .has-dark-header .main-nav:not(.scrolled) .theme-toggle { color: #fff !important; }
[data-theme="light"] .has-dark-header .main-nav:not(.scrolled) .nav-link:hover,
[data-theme="light"] .has-dark-header .main-nav:not(.scrolled) .nav-link.active { color: var(--gold-light) !important; }

/* ---------- Quantity stepper ---------- */
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 40px; overflow: hidden; background: var(--bg-soft-2); }
.qty-btn { width: 34px; height: 38px; border: 0; background: transparent; color: var(--cream); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: all .3s var(--ease); }
.qty-btn:hover { background: var(--gold); color: #0b0b0c; }
.qty-field { width: 44px; height: 38px; border: 0; background: transparent; color: var(--cream); text-align: center; font-weight: 500; -moz-appearance: textfield; }
.qty-field::-webkit-outer-spin-button, .qty-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-field:focus { outline: none; }

/* ---------- Rating stars ---------- */
.stars { display: inline-flex; gap: 2px; color: var(--gold); font-size: .85rem; }
.stars .bi-star { color: var(--muted); }
.rating-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.rating-input input { display: none; }
.rating-input label { color: var(--muted); font-size: 1.5rem; cursor: pointer; transition: color .2s; }
.rating-input label:hover, .rating-input label:hover ~ label, .rating-input input:checked ~ label { color: var(--gold); }
.review-card { border-bottom: 1px solid var(--line); padding: 1.4rem 0; }
.review-card:last-child { border-bottom: 0; }
.review-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-grad); color: #0b0b0c; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }

/* ---------- Image lightbox ---------- */
#lightbox { position: fixed; inset: 0; z-index: 9996; background: rgba(5,5,5,.92); display: none; align-items: center; justify-content: center; padding: 4vw; backdrop-filter: blur(4px); }
#lightbox.open { display: flex; }
#lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
#lightbox .lb-close { position: absolute; top: 24px; right: 30px; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: 0; }
.zoomable { cursor: zoom-in; }

/* ---------- Mobile off-canvas menu ---------- */
.mobile-menu { background: var(--bg-soft); color: var(--cream); width: 300px; border-left: 1px solid var(--line); }
.mobile-menu .offcanvas-header { border-bottom: 1px solid var(--line); padding: 1.3rem 1.5rem; }
.mobile-menu .oc-close { background: none; border: 0; color: var(--cream); font-size: 1.3rem; }
.mobile-menu .oc-close:hover { color: var(--gold); }
.mobile-menu .offcanvas-body { padding: 1.5rem; }
.mobile-menu .navbar-nav .nav-link { color: var(--cream) !important; font-family: var(--disp); font-weight: 600; font-size: 1.3rem; text-transform: none; letter-spacing: 0; padding: .55rem 0; }
.mobile-menu .navbar-nav .nav-link.active, .mobile-menu .navbar-nav .nav-link:hover { color: var(--gold) !important; }
.mobile-menu .navbar-nav .nav-link::after { display: none; }
.mobile-menu .link-underline { font-family: var(--body); }

/* ============================================================
   SCENT FINDER QUIZ
   ============================================================ */
.quiz-wrap { min-height: 100vh; display: flex; align-items: center; text-align: center; padding: 130px 0 80px; position: relative; overflow: hidden; }
.quiz-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(150,150,150,.15); z-index: 1500; }
.quiz-progress span { display: block; height: 100%; width: 0; background: var(--gold-grad); transition: width .6s var(--ease); }
.quiz-step { opacity: 0; transform: translateY(30px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.quiz-step.is-active { opacity: 1; transform: none; }
.quiz-step[hidden] { display: none; }
.quiz-title { font-size: clamp(1.9rem, 5vw, 3.4rem); margin-bottom: .6rem; }
.quiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; max-width: 660px; margin: 2rem auto 0; }
.quiz-option { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 1.7rem 1rem; color: var(--cream); display: flex; flex-direction: column; align-items: center; gap: .8rem; cursor: pointer; transition: all .35s var(--ease); font-family: var(--body); }
.quiz-option i { font-size: 1.9rem; color: var(--gold); transition: color .3s; }
.quiz-option span { font-size: .95rem; }
.quiz-option:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.quiz-option.selected { background: var(--gold-grad); color: #0b0b0c; border-color: transparent; }
.quiz-option.selected i { color: #0b0b0c; }
.quiz-back { background: none; border: 0; color: var(--muted); margin-top: 2rem; font-size: .85rem; }
.quiz-back:hover { color: var(--gold); }
.quiz-spinner { width: 58px; height: 58px; border: 3px solid var(--line); border-top-color: var(--gold); border-radius: 50%; margin: 0 auto; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.match-img { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--line); }
.match-img img { width: 100%; height: 100%; object-fit: cover; }
.match-badge { position: absolute; top: 18px; left: 18px; background: var(--gold-grad); color: #0b0b0c; padding: 6px 16px; border-radius: 40px; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   FRAGRANCE PYRAMID
   ============================================================ */
.pyramid { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.pyr-tier { width: 100%; border-radius: 12px; padding: 1rem 1.2rem; border: 1px solid var(--line-gold); background: rgba(224,184,76,.05); text-align: left; }
.pyr-top { width: 100%; }
.pyr-heart { width: 100%; }
.pyr-base { width: 100%; background: rgba(224,184,76,.1); }
.pyr-head { display: flex; align-items: baseline; justify-content: start; gap: .5rem; margin-bottom: .55rem; }
.pyr-label { color: var(--gold); font-weight: 600; letter-spacing: 1px; font-size: .8rem; text-transform: uppercase; }
.pyr-sub { color: var(--muted); font-size: .72rem; }
.pyr-notes { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: start; }
.pyr-note { font-size: .78rem; padding: .25rem .75rem; border-radius: 30px; background: var(--bg-soft); color: var(--cream); border: 1px solid var(--line); }
@media (max-width: 575px) { .pyr-top, .pyr-heart { width: 100%; } }

/* ============================================================
   DISCOVERY SET BUILDER
   ============================================================ */
.set-size { width: 100%; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; cursor: pointer; transition: all .3s var(--ease); }
.set-size:hover { border-color: var(--gold); transform: translateY(-3px); }
.set-size.active { border-color: var(--gold); background: rgba(224,184,76,.08); box-shadow: inset 0 0 0 1px var(--gold); }
.set-count { font-family: var(--disp); font-size: 1.35rem; font-weight: 700; color: var(--cream); }
.set-price { color: var(--gold); font-size: 1.1rem; font-weight: 600; }
.set-sub { color: var(--muted); font-size: .75rem; }
.disc-pick { display: block; cursor: pointer; }
.disc-thumb { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg-soft); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; transition: all .3s var(--ease); }
.disc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.disc-tick { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-grad); color: #0b0b0c; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.5); transition: all .3s var(--ease); }
.disc-pick:hover .disc-thumb { border-color: var(--gold-light); }
.disc-pick.checked .disc-thumb { border-color: var(--gold); }
.disc-pick.checked .disc-tick { opacity: 1; transform: scale(1); }
.disc-pick.disabled { opacity: .4; pointer-events: none; }
.disc-name { margin-top: .55rem; font-size: .92rem; color: var(--cream); }
.disc-cat { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; }
.disc-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1400; background: var(--bg-soft); border-top: 1px solid var(--line); padding: 1rem 0; box-shadow: 0 -10px 30px rgba(0,0,0,.25); }
body:has(.disc-bar) { padding-bottom: 80px; }