/* ================================================================
   FENARA — Shared Design System
   Covers: tokens, reset, nav, mobile menu, footer, cart, modals
   Page-specific CSS (backgrounds, sections) stays in each HTML file.
   ================================================================ */

/* Montserrat is loaded via a <link> in each page's <head>, NOT an @import here.
   A nested @import wasn't requested until this file had downloaded, which caused
   a visible font swap on every load. Pinyon Script is loaded the same way. */

/* Screen-reader-only (visually hidden but accessible) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- TOKENS ---- */
:root{
  --cream:#FAF8F5;
  --alabaster:#F5F3EF;
  --silk:#EBE7E0;
  --obsidian:#2B2926;
  --teal:#1B4D4D;
  --oxblood:#6B2C3C;
  --midnight:#2C3E50;
  --cognac:#8B5A3C;
  --gold:#C9A961;
  --platinum:#E5E4E2;
  --ink:#2B2926;
}

/* ---- RESET ---- */
*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip (not hidden) tames horizontal overflow from decorative
   swirls WITHOUT turning html/body into a scroll container — which would
   silently break position:sticky on descendants (e.g. the pinned hero).
   overscroll-behavior:none kills the elastic rubber-band bounce at the top,
   so the pinned hero can't get dragged down / expose a gap on overscroll. */
html,body{color:var(--ink);font-family:'Montserrat',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;overscroll-behavior:none;font-weight:400;letter-spacing:.01em;line-height:1.55}

/* ---- NAV ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;pointer-events:none}
.nav>*{pointer-events:auto;background:rgba(250,248,245,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:10px 20px;border-radius:999px;border:1px solid rgba(43,41,38,.08);color:var(--obsidian);transition:background .35s,color .35s,border-color .35s}
.nav.dark>*{background:rgba(15,14,13,.55);border-color:rgba(250,248,245,.12);color:var(--cream)}
/* During a client-side page swap we suppress the pill transition so any
   transient dark/light re-detection can't animate a visible flash. */
.nav.nav-instant>*{transition:none!important}
.nav .brand{padding:8px 18px;display:flex;align-items:center}
.nav .brand img{height:21px;width:74px;object-fit:contain;object-position:left center;display:block;transition:opacity .3s}
.nav .brand .l-light{display:none}
.nav.dark .brand .l-light{display:block}
.nav.dark .brand .l-dark{display:none}
.nav nav{display:flex;gap:24px;padding:10px 22px;align-items:center}
.nav nav a{color:inherit;text-decoration:none;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;opacity:.7;transition:opacity .25s}
.nav nav a:hover{opacity:1}
.nav nav a.active{opacity:1;font-weight:700;letter-spacing:.22em}
.nav .wa{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;text-decoration:none;background:var(--teal);color:#FAF8F5;border-color:var(--teal);padding:8px 14px}
.nav .wa:hover{background:#154040;border-color:#154040;color:#FAF8F5}
.nav .wa svg{width:14px;height:14px;display:block}
.nav.dark .wa{background:var(--teal);color:#FAF8F5;border-color:var(--teal)}
.nav-toggle{display:none;width:44px;height:44px;padding:0!important;border:0;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:50%!important}
.nav-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--obsidian);transition:transform .3s,opacity .3s}
.nav.dark .nav-toggle span{background:var(--cream)}
.nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.menu-open .nav-toggle span:nth-child(2){opacity:0}
.nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- CART NAV BUTTON ---- */
.cart-nav-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:40px;padding:0 20px!important;cursor:pointer;background:var(--teal);color:var(--cream);border-radius:999px;border:1px solid var(--teal);font-family:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;transition:background .25s}
.cart-nav-btn:hover{background:#154040;border-color:#154040}
.cart-nav-btn svg{width:17px;height:17px;display:block}
.cart-nav-count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;background:var(--gold);color:var(--obsidian);font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 5px;font-family:inherit;line-height:1;border:2px solid var(--cream);box-shadow:0 1px 3px rgba(43,41,38,.35)}
.cart-nav-count.visible{display:flex}

/* ---- RIGHT-CORNER ACTION CLUSTER (icons only) ----
   The two controls (Sign in + Cart) group at the right corner; the three nav
   links sit dead-centre regardless of how wide the left/right clusters are.
   .nav-actions is a bare flex row — it must NOT pick up the glass pill that
   .nav>* gives direct children, or the two icons look glued into one pill. */
.nav .nav-actions{background:none;border:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;display:flex;align-items:center;gap:12px}
/* Centre the links independently of the side clusters. */
.nav>nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
/* Icon-only buttons: drop the text labels, make each control a circle. */
.nav-actions .cnb-label{display:none}
.nav-actions .cart-nav-btn{width:42px;height:42px;padding:0!important;gap:0;transition:background .35s,color .35s,border-color .35s}
.nav-actions .cart-nav-btn svg{width:18px;height:18px}
/* Both icons follow the header theme, exactly like the other nav pills:
   teal on the light (white) header, dark-glass "black-on-black" on the dark
   (hero/footer) header. */
.nav-actions .cart-nav-btn{background:var(--teal);border:1px solid var(--teal);color:var(--cream)}
.nav-actions .cart-nav-btn:hover{background:#154040;border-color:#154040}
.nav.dark .nav-actions .cart-nav-btn{background:rgba(15,14,13,.55);border-color:rgba(250,248,245,.14);color:var(--cream)}
.nav.dark .nav-actions .cart-nav-btn:hover{background:rgba(15,14,13,.72);border-color:rgba(250,248,245,.3)}
/* Signed-in indicator (gold dot) — the "Account" label is hidden now. */
#accountNavBtn.signed-in::after{content:"";position:absolute;top:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:var(--gold);border:2px solid var(--cream)}
.nav.dark #accountNavBtn.signed-in::after{border-color:#0F0E0D}

/* ---- SIGNED-IN ACCOUNT DROPDOWN ---- */
.account-menu{position:fixed;z-index:1300;min-width:236px;background:var(--cream);border:1px solid rgba(43,41,38,.12);border-radius:16px;box-shadow:0 20px 54px -14px rgba(15,14,13,.4);padding:8px;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.account-menu.open{opacity:1;transform:none;pointer-events:auto}
.account-menu-head{padding:12px 12px 11px;border-bottom:1px solid rgba(43,41,38,.09);margin-bottom:6px;display:flex;flex-direction:column;gap:3px}
.account-menu-head .label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);opacity:.75}
.account-menu-head .email{font-size:13px;line-height:1.3;color:var(--obsidian);word-break:break-all}
.account-menu-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;padding:11px 12px;border-radius:10px;font-family:inherit;font-size:14px;color:var(--obsidian);cursor:pointer;transition:background .15s}
.account-menu-item:hover{background:rgba(43,41,38,.06)}
.account-menu-item svg{width:17px;height:17px;flex:none;opacity:.55}
.account-menu-item#acctMenuSignout{color:var(--oxblood)}
.account-menu-item#acctMenuSignout svg{opacity:.7}

/* ---- MOBILE MENU ---- */
.mobile-menu{position:fixed;top:74px;left:16px;right:16px;z-index:99;display:flex;flex-direction:column;background:rgba(15,14,13,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(250,248,245,.12);border-radius:18px;padding:10px;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s,transform .3s}
.mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
.mobile-menu a{color:#FAF8F5;text-decoration:none;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding:16px 18px;border-radius:12px;transition:background .2s}
.mobile-menu a:hover{background:rgba(250,248,245,.06)}
/* Current-page indicator: highlight the active item and append a small
   "Current" tag so it's obvious whether you're on Collection or Story. */
.mobile-menu a.active{background:rgba(201,169,97,.14);color:var(--gold);font-weight:700}
.mobile-menu a.active::after{content:"Current";margin-left:auto;font-size:8.5px;letter-spacing:.24em;font-weight:600;opacity:.8;align-self:center}
.mobile-menu a{display:flex;align-items:center}
.mobile-menu .mm-wa{margin-top:6px;background:var(--oxblood);text-align:center;font-weight:600}
.mobile-menu .mm-wa:hover{background:#54222F}

/* ---- CART TOAST ---- */
.cart-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(16px);z-index:300;background:var(--obsidian);color:var(--cream);padding:14px 28px;border-radius:999px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;white-space:nowrap;box-shadow:0 18px 40px -16px rgba(43,41,38,.5)}
.cart-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- CART MODAL ---- */
.cart-modal{position:fixed;inset:0;z-index:210;display:none;justify-content:flex-end}
.cart-modal.open{display:flex}
.cm-backdrop{position:fixed;inset:0;background:rgba(15,14,13,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.cm-panel{position:relative;z-index:2;background:var(--cream);color:var(--obsidian);width:min(480px,100vw);height:100vh;overflow-y:auto;display:flex;flex-direction:column;animation:cmIn .35s cubic-bezier(.2,.7,0,1) both;box-shadow:-24px 0 50px rgba(43,41,38,.18)}
@keyframes cmIn{from{transform:translateX(100%)}to{transform:none}}
.cm-head{display:flex;align-items:center;justify-content:space-between;padding:32px 32px 24px;border-bottom:1px solid rgba(43,41,38,.1)}
.cm-head h2{font-size:24px;font-weight:300;letter-spacing:-.015em}
.cm-close{background:transparent;border:1px solid rgba(43,41,38,.15);border-radius:50%;width:36px;height:36px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;line-height:1;font-family:inherit}
.cm-close:hover{background:var(--obsidian);color:var(--cream);border-color:var(--obsidian)}
.cm-items{flex:1;padding:24px 32px;display:flex;flex-direction:column}
.cm-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid rgba(43,41,38,.08)}
.cm-item-name{font-size:15px;font-weight:400;flex:1}
.cm-item-price{font-size:12px;opacity:.7;margin-top:3px}
.cm-item-type{font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-top:4px;font-weight:600}
.cm-qty{display:flex;align-items:center;gap:10px}
.cm-qty-btn{width:28px;height:28px;border-radius:50%;border:1px solid rgba(43,41,38,.2);background:transparent;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:inherit;color:var(--obsidian)}
.cm-qty-btn:hover{background:var(--obsidian);color:var(--cream);border-color:var(--obsidian)}
.cm-qty-btn[disabled]{opacity:.28;cursor:not-allowed;pointer-events:none}
.cm-qty-n{font-size:15px;font-weight:500;min-width:20px;text-align:center}
.cm-empty{text-align:center;padding:80px 32px;opacity:.35;font-size:11px;letter-spacing:.28em;text-transform:uppercase}
.cm-foot{padding:24px 32px;border-top:1px solid rgba(43,41,38,.1);position:sticky;bottom:0;background:var(--cream)}
.cm-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}
.cm-total-label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;opacity:.65;font-weight:600}
.cm-total-price{font-size:30px;font-weight:300;letter-spacing:-.02em}
.cm-tax-note{margin:-12px 0 18px;font-size:11px;letter-spacing:.02em;opacity:.65;font-style:italic}
.cm-wa-btn{width:100%;display:inline-flex;align-items:center;justify-content:space-between;padding:17px 24px;background:var(--oxblood);color:#FAF8F5;border:1px solid var(--oxblood);border-radius:999px;font-family:inherit;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:all .3s;text-decoration:none}
.cm-wa-btn:hover{background:#54222F;border-color:#54222F}
.cm-clear{margin-top:12px;width:100%;background:transparent;border:none;font-family:inherit;font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.4;cursor:pointer;padding:8px;transition:opacity .25s}
.cm-clear:hover{opacity:.9}
/* Checkout — Place Order button, form, confirmation (Supabase checkout) */
.cm-place{width:100%;display:inline-flex;align-items:center;justify-content:center;padding:16px 24px;background:var(--oxblood);color:#FAF8F5;border:1px solid var(--oxblood);border-radius:999px;font-family:inherit;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:all .3s}
.cm-place:hover{background:#54222F;border-color:#54222F}
.cm-place[disabled]{opacity:.55;cursor:default}
.cm-back{margin-top:12px;width:100%;background:transparent;border:none;font-family:inherit;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;cursor:pointer;padding:8px;transition:opacity .25s}
.cm-back:hover{opacity:.9}
.cm-form{display:flex;flex-direction:column;gap:14px}
.cm-row2{display:flex;gap:12px}
.cm-row2>.cm-field{flex:1;min-width:0}
.cm-field{display:flex;flex-direction:column;gap:6px}
.cm-field label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;font-weight:600}
.cm-field input,.cm-field textarea{font-family:inherit;font-size:14px;color:var(--obsidian);background:#fff;border:1px solid rgba(43,41,38,.2);border-radius:10px;padding:11px 13px;width:100%;box-sizing:border-box;transition:border-color .2s}
.cm-field input:focus,.cm-field textarea:focus{outline:none;border-color:var(--oxblood)}
.cm-field textarea{resize:vertical;min-height:58px}
.cm-field.err input,.cm-field.err textarea{border-color:#c0392b}
.cm-err{color:#c0392b;font-size:11px}
.cm-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.45;cursor:pointer;opacity:.85}
.cm-check input{margin-top:2px;flex:none;accent-color:#B07C88}
.cm-check span{flex:1}
.cm-success{padding:56px 8px;text-align:center}
.cm-success h3{font-size:24px;font-weight:300;letter-spacing:-.015em;margin:0 0 14px}
.cm-success p{font-size:14px;opacity:.72;line-height:1.6;margin:0 auto;max-width:320px}
.cm-ordernum{margin-top:14px !important;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.55}
/* Sign-in / account modal */
.auth-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center}
.auth-modal.open{display:flex}
.auth-backdrop{position:absolute;inset:0;background:rgba(15,14,13,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.auth-panel{position:relative;z-index:2;background:var(--cream);color:var(--obsidian);width:min(400px,92vw);border-radius:18px;padding:34px 30px;box-shadow:0 30px 70px rgba(43,41,38,.28)}
.auth-close{position:absolute;top:14px;right:14px;background:transparent;border:1px solid rgba(43,41,38,.15);border-radius:50%;width:32px;height:32px;font-size:18px;cursor:pointer;line-height:1;font-family:inherit;color:inherit}
.auth-close:hover{background:var(--obsidian);color:var(--cream)}
.auth-h{font-size:22px;font-weight:300;letter-spacing:-.01em;margin:0 0 6px}
.auth-sub{font-size:13px;opacity:.65;margin:0 0 18px;line-height:1.55}
.auth-modal input[type=email]{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;padding:12px 13px;border:1px solid rgba(43,41,38,.2);border-radius:10px;margin-bottom:12px;background:#fff;color:inherit}
.auth-modal input[type=email]:focus{outline:none;border-color:var(--oxblood)}
.auth-btn{width:100%;padding:14px;background:var(--oxblood);color:#FAF8F5;border:none;border-radius:999px;font-family:inherit;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:background .25s}
.auth-btn:hover{background:#54222F}
.auth-btn.secondary{background:transparent;color:var(--obsidian);border:1px solid rgba(43,41,38,.25);margin-top:10px}
.auth-btn.secondary:hover{background:rgba(43,41,38,.06)}
.auth-google{background:#fff;color:var(--obsidian);border:1px solid rgba(43,41,38,.25);display:inline-flex;align-items:center;justify-content:center;gap:11px}
.auth-google .g-logo{width:18px;height:18px;flex:none;display:block}
.auth-google:hover{background:rgba(43,41,38,.05)}
.auth-msg{font-size:12.5px;margin-top:12px;line-height:1.5;min-height:1em}
.auth-msg.ok{color:#2f6b43}
.auth-msg.err{color:#c0392b}
.auth-orders{max-height:320px;overflow-y:auto;margin-bottom:6px}
.auth-order{border:1px solid rgba(43,41,38,.12);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.auth-order-top{display:flex;justify-content:space-between;font-size:13px;font-weight:500;margin-bottom:4px}
.auth-order-items{font-size:12px;opacity:.7;line-height:1.5}
.auth-mini{font-size:11px;opacity:.5;margin-top:4px;text-transform:uppercase;letter-spacing:.08em}

/* ---- POLICY MODAL ---- */
.policy-modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:6vh 20px}
.policy-modal.open{display:flex}
.policy-modal .pm-backdrop{position:fixed;inset:0;background:rgba(15,14,13,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.policy-modal .pm-panel{position:relative;z-index:2;background:var(--cream);color:var(--obsidian);max-width:760px;width:100%;max-height:88vh;overflow-y:auto;border-radius:12px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);padding:0;display:flex;flex-direction:column;animation:pmIn .4s cubic-bezier(.2,.7,0,1) both}
@keyframes pmIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.pm-head{position:sticky;top:0;z-index:10;background:var(--cream);display:flex;justify-content:flex-end;padding:16px 20px 8px;border-radius:12px 12px 0 0;flex-shrink:0}
.pm-body{padding:4px 56px 48px}
.policy-modal .pm-close{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid rgba(43,41,38,.16);background:var(--cream);color:var(--obsidian);font-size:22px;cursor:pointer;transition:background .25s,color .25s;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.policy-modal .pm-close:hover{background:var(--obsidian);color:var(--cream)}
.pm-body h3{font-size:clamp(28px,3.4vw,40px);font-weight:300;letter-spacing:-.02em;margin-bottom:10px;padding-right:40px}
.pm-body h4{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--teal);margin:32px 0 12px}
.pm-body .pm-meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;margin-bottom:26px;font-weight:500}
.pm-body p{font-size:14.5px;line-height:1.75;opacity:.92;margin-bottom:12px}
.pm-body strong{font-weight:600}
.pm-body ul{margin:0 0 16px;padding-left:22px}
.pm-body li{font-size:14.5px;line-height:1.7;opacity:.92;margin-bottom:6px}

/* ---- FOOTER ---- */
/* z-index:2 so it sits ABOVE the sticky/pinned hero (z-index:1) on the shop
   page — otherwise the pinned hero bleeds through the footer. */
footer{background:#0F0E0D;color:#FAF8F5;padding:130px 6vw;position:relative;z-index:2;overflow:hidden}
footer .topo{position:absolute;left:50%;bottom:-45%;transform:translateX(-50%);width:130%;min-width:1300px;aspect-ratio:1;background:url('assets/footer-topo.jpg') center/cover no-repeat;opacity:.07;mix-blend-mode:screen;pointer-events:none;-webkit-mask:radial-gradient(circle at 50% 50%,#000 30%,rgba(0,0,0,.4) 50%,transparent 66%);mask:radial-gradient(circle at 50% 50%,#000 30%,rgba(0,0,0,.4) 50%,transparent 66%)}
footer::after{content:"";position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);width:120%;height:80%;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,rgba(201,169,97,.10),transparent 62%)}
footer .grid{position:relative;z-index:2;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.25fr 2fr;gap:64px 80px;align-items:start}
footer .links{display:grid;grid-template-columns:1fr 1.3fr;gap:48px 64px}
footer .footer-cta{position:relative;z-index:2;max-width:1280px;margin:0 auto 60px;padding-bottom:56px;border-bottom:1px solid rgba(250,248,245,.12);display:flex;justify-content:center}
footer .footer-shop-btn{display:inline-flex;align-items:center;gap:14px;padding:16px 36px;border-radius:999px;background:var(--gold);color:#1F1A12;text-decoration:none;font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;transition:transform .3s,background .3s}
footer .footer-shop-btn:hover{background:#B6985A;transform:translateY(-2px)}
footer .footer-shop-btn svg{width:20px;height:10px}
/* Catchy connect block */
footer .fc-connect .fc-tag{font-size:13.5px;line-height:1.7;opacity:.85;margin:0 0 20px;max-width:300px}
footer .fc-btns{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
footer .fc-btns a.fc-btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#FAF8F5;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.9;white-space:nowrap;padding:0;transition:opacity .25s,transform .25s}
footer .fc-btns a.fc-btn img{width:32px;height:32px;border-radius:8px;display:block;flex-shrink:0}
footer .fc-btns a.fc-btn:hover{opacity:1;transform:translateX(3px)}
footer .brand img{width:178px;max-width:54vw;height:auto;display:block}
footer .brand p{margin-top:22px;font-size:13.5px;opacity:.9;max-width:300px;line-height:1.7}
footer .brand .addr{margin-top:22px;font-size:12.5px;opacity:.72;line-height:1.7;font-style:normal}
footer .brand .addr strong{display:block;font-weight:500;opacity:1;letter-spacing:.02em;margin-bottom:4px}
footer .brand .email{display:inline-block;margin-top:20px;color:#E0BE73;text-decoration:none;font-size:13.5px;letter-spacing:.03em;border-bottom:1px solid rgba(224,190,115,.5);padding-bottom:2px;transition:border-color .25s}
footer .brand .email:hover{border-color:#E0BE73}
footer .col h4{font-size:10px;letter-spacing:.32em;text-transform:uppercase;font-weight:700;margin-bottom:18px;color:#E0BE73}
footer .col a{display:block;color:inherit;text-decoration:none;font-size:13.5px;opacity:.9;padding:6px 0;transition:opacity .25s}
footer .col a:hover{opacity:1}
/* The 6 legal policies sit in a 2-col × 3-row grid (FAQ stays a single link above). */
footer .col .pol-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:2px}
@media(max-width:420px){footer .col .pol-grid{grid-template-columns:1fr}}
footer .base{position:relative;z-index:2;max-width:1280px;margin:84px auto 0;display:flex;justify-content:space-between;align-items:center;gap:18px 40px;flex-wrap:wrap;padding-top:28px;border-top:1px solid rgba(250,248,245,.12);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(250,248,245,.82)}
footer .base .legal{display:flex;flex-wrap:wrap;gap:10px 26px}
footer .base .legal a{color:rgba(250,248,245,.82);text-decoration:none;transition:color .25s}
footer .base .legal a:hover{color:#FAF8F5}

/* ---- AMBIENT SOUND BUTTON ---- */
.fn-sound-btn{
  position:fixed;bottom:28px;left:28px;z-index:120;
  width:44px;height:44px;border-radius:50%;
  /* No backdrop-filter (a backdrop-filter node makes Chrome re-snapshot the page
     backdrop, which flashed a light frame). LIGHT by default; switches to dark
     under body.nav-dark so it mirrors the header pills. */
  background:rgba(250,248,245,.86);
  border:1px solid rgba(43,41,38,.10);
  color:var(--obsidian);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s,background .3s,border-color .3s,color .3s;
  font-family:inherit;padding:0;
  box-shadow:0 8px 24px -8px rgba(43,41,38,.2);
}
.fn-sound-btn:hover{transform:scale(1.1);background:var(--obsidian);border-color:var(--obsidian);color:var(--cream)}
.fn-sound-btn svg{width:18px;height:18px;display:block;flex-shrink:0}
.fn-sound-btn .fn-sound-label{
  position:absolute;left:54px;bottom:50%;transform:translateY(50%);
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  background:rgba(15,14,13,.92);
  color:#FAF8F5;padding:6px 12px;border-radius:999px;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .2s;border:1px solid rgba(250,248,245,.12);
}
.fn-sound-btn:hover .fn-sound-label{opacity:1}

/* ---- SCROLL TO TOP BUTTON ---- */
.fn-scroll-top{position:fixed;bottom:28px;right:28px;z-index:120;width:42px;height:42px;border-radius:50%;background:rgba(250,248,245,.86);border:1px solid rgba(43,41,38,.10);color:var(--obsidian);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s,transform .3s,background .3s,border-color .3s,color .3s;box-shadow:0 8px 24px -8px rgba(43,41,38,.2);padding:0}
.fn-scroll-top.visible{opacity:1;transform:none;pointer-events:auto}
.fn-scroll-top:hover{transform:translateY(-2px);background:var(--obsidian);border-color:var(--obsidian);color:var(--cream)}
.fn-scroll-top svg{width:16px;height:16px;display:block}

/* Dark variant — both fixed controls follow the header pills (body.nav-dark). */
body.nav-dark .fn-sound-btn,
body.nav-dark .fn-scroll-top{background:rgba(15,14,13,.9);border-color:rgba(250,248,245,.18);color:#FAF8F5;box-shadow:0 8px 24px -8px rgba(0,0,0,.35)}
body.nav-dark .fn-sound-btn:hover,
body.nav-dark .fn-scroll-top:hover{background:rgba(43,41,38,.9);border-color:rgba(250,248,245,.36);color:#FAF8F5}
/* scroll-top stays the dark glassy style on every page (matching the music
   button and Story), so the floating controls read consistently dark. */

/* ---- RESPONSIVE (shared) ---- */
@media(max-width:980px){
  footer .grid{grid-template-columns:1fr;gap:48px}
  .nav nav,.nav .wa{display:none}
  .nav-toggle{display:flex}
}
@media(max-width:560px){
  footer .links{grid-template-columns:1fr 1fr;gap:36px}
  footer .base{flex-direction:column;align-items:flex-start;gap:16px}
  .nav{padding:14px 16px}
  .nav .brand img{height:14px;width:64px}
  .mobile-menu{top:66px}
  .policy-modal{padding:0}
  .policy-modal .pm-panel{max-height:100vh;border-radius:0}
  .pm-head{border-radius:0}
  .pm-body{padding:4px 24px 40px}
}

/* ===== SHARED PRODUCT CARDS (Collection one-page view + Shop page) ===== */
.pcollection{max-width:1120px;margin:0 auto;padding:0 6vw 8px}
.psection{padding:76px 0 20px}
.psection-head{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:42px;flex-wrap:wrap}
.psection-head .pk{font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;opacity:.5;display:block;margin-bottom:16px}
.psection-head h2{font-size:clamp(28px,3.4vw,46px);font-weight:300;letter-spacing:-.022em;line-height:1.03}
.psection-head h2 i{font-style:italic;color:var(--gold)}
.psection-head>p{max-width:420px;font-size:14px;line-height:1.72;opacity:.82;margin:0}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 40px}
.pempty{grid-column:1/-1;padding:60px;text-align:center;opacity:.35;font-size:11px;letter-spacing:.28em;text-transform:uppercase}

.pcard{position:relative}
.pflip{position:relative;aspect-ratio:4/3;margin-bottom:16px}
.pflip-rot{position:absolute;inset:0}
.pface{position:absolute;inset:0;border-radius:6px;overflow:hidden;background:#F3EFE9;border:1px solid rgba(43,41,38,.09);display:flex;align-items:center;justify-content:center}
.pfront .pcard-photo{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.psold{position:absolute;top:14px;left:14px;z-index:6;background:rgba(15,14,13,.82);color:var(--cream);font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;padding:7px 13px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pcard.sold-out .pfront .pcard-photo{filter:grayscale(.45) brightness(.94)}
.pback{background:#F3EFE9;padding:22px 24px;align-items:stretch;justify-content:flex-start;opacity:0;pointer-events:none;transition:opacity .38s ease;z-index:2}
@media(hover:hover){.pflip:hover .pback{opacity:1;pointer-events:auto}}
.pflip.flipped .pback{opacity:1;pointer-events:auto}
.pback-body{display:flex;flex-direction:column;gap:11px;width:100%;height:100%;overflow:auto}
.pback-tag{align-self:flex-start;font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(27,77,77,.34);border-radius:999px;padding:5px 12px;font-weight:600}
.pback-desc{font-size:12.5px;line-height:1.58;opacity:.85;margin:0}
.pback-spec{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column}
.pback-spec li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid rgba(43,41,38,.12)}
.pback-spec li span{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;font-weight:600;white-space:nowrap}
.pback-spec li em{font-style:normal;font-size:11.5px;text-align:right;opacity:.85;line-height:1.35}
.pmeta{display:flex;flex-direction:column;gap:12px}
.pmeta .pname{font-size:18px;font-weight:400;letter-spacing:-.01em;line-height:1.15;margin:0}
.pmeta .pname .pstock{font-size:11px;letter-spacing:.01em;font-weight:500;color:var(--oxblood);opacity:.92;white-space:nowrap;margin-left:4px}
.pmeta .pfoot{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pmeta .pprice{font-size:18px;font-weight:400;letter-spacing:-.01em}
.psoldbtn{opacity:.55;border:1px solid rgba(43,41,38,.25);background:transparent;color:var(--obsidian);border-radius:999px;padding:10px 18px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
/* Grid CTA: ghost green by default so the repeated buttons don't read as a
   wall of solid green; fills solid on hover/focus to reward intent. Touch
   devices (no hover) keep it solid so the CTA stays strong there. */
.pmeta .btn-cart{background:transparent;border-color:var(--teal);color:var(--teal)}
.pmeta .btn-cart:hover,.pmeta .btn-cart:focus-visible{background:var(--teal);border-color:var(--teal);color:var(--cream)}
@media(hover:none){
  .pmeta .btn-cart{background:var(--teal);border-color:var(--teal);color:var(--cream)}
}
@media(max-width:760px){
  .pgrid{grid-template-columns:1fr;gap:26px}
  .psection{padding:56px 0 12px}
}

/* ===== SHOP PAGE ROWS (image left, details right) ===== */
.srows{display:flex;flex-direction:column}
.srow{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;padding:60px 0;border-bottom:1px solid rgba(43,41,38,.1)}
.srow:first-child{padding-top:8px}
.srow:last-child{border-bottom:none}
.srow-img{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#EDE6DA}
.srow-img .srow-photo{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.srow-sold{position:absolute;top:14px;left:14px;z-index:6;background:rgba(15,14,13,.82);color:var(--cream);font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;padding:7px 13px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.srow-body{display:flex;flex-direction:column;gap:18px}
.srow-body.is-sold{opacity:.85}
.srow-meta{display:flex;align-items:center;gap:14px}
.srow-num{font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.42;font-weight:600;font-variant-numeric:tabular-nums}
.srow-badge{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--ac,var(--teal));border:1px solid color-mix(in srgb, var(--ac,var(--teal)) 40%, transparent);border-radius:999px;padding:5px 12px}
.srow-name{font-size:clamp(24px,2.6vw,34px);font-weight:300;letter-spacing:-.015em;line-height:1.06}
.srow-stock{font-size:12px;color:var(--oxblood);font-weight:500;letter-spacing:.01em}
.srow-desc{font-size:14px;line-height:1.7;opacity:.86;max-width:520px;margin:0}
.srow-specs{display:flex;flex-direction:column;border-top:1px solid rgba(43,41,38,.12)}
.srow-spec{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid rgba(43,41,38,.12)}
.srow-spec span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;font-weight:600;white-space:nowrap}
.srow-spec em{font-style:normal;font-size:12.5px;text-align:right;opacity:.88;line-height:1.4}
/* ---- SMELL → FEEL → CARE → USE journey strip (Shop rows) ---- */
.srow-journey{display:flex;align-items:stretch;gap:5px;border-top:1px solid rgba(43,41,38,.12);padding-top:26px}
.srow-journey .jstep{flex:1 1 0;min-width:0;display:flex}
.srow-journey .jstep-card{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:20px 9px 18px;border:1px solid rgba(43,41,38,.16);border-radius:70px 70px 14px 14px;background:color-mix(in srgb,var(--cream) 55%,transparent)}
.srow-journey .jstep-num{width:29px;height:29px;border-radius:50%;border:1px solid rgba(43,41,38,.26);display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--obsidian);opacity:.8;font-variant-numeric:tabular-nums}
.srow-journey .jstep-icon{width:54px;height:54px;flex-shrink:0;background:var(--ac,var(--teal));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.srow-journey .jstep-label{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--ac,var(--teal))}
.srow-journey .jstep-label::after{content:"";display:block;width:20px;height:1px;background:var(--gold);margin:8px auto 0}
.srow-journey .jstep-val{font-size:11px;line-height:1.5;color:var(--obsidian);font-weight:500}
.srow-journey .jarrow{align-self:center;color:var(--gold);font-size:14px;flex:0 0 auto;opacity:.75}
@media(max-width:900px){
  .srow-journey{flex-wrap:wrap;gap:12px}
  .srow-journey .jarrow{display:none}
  .srow-journey .jstep{flex:1 1 42%}
}
.srow-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:4px}
.srow-price{font-size:26px;font-weight:300;letter-spacing:-.01em}
.srow-price small{font-size:11px;letter-spacing:.02em;opacity:.5;margin-left:6px;font-weight:400}
.srow-foot .btn-cart{background:var(--teal);border-color:var(--teal);color:var(--cream)}
.srow-foot .btn-cart:hover{background:#154040;border-color:#154040;color:var(--cream)}
/* Cart button + stepper base (shared so the Shop page styles them too) */
.btn-cart{padding:14px 26px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;cursor:pointer;font-family:inherit;transition:all .3s;display:inline-flex;align-items:center;gap:10px;border-radius:999px;background:var(--obsidian);color:var(--cream);border:1px solid var(--obsidian)}
.btn-cart:hover{background:transparent;color:var(--obsidian)}
.cart-btn-wrap{display:inline-flex}
.cart-stepper{display:inline-flex;align-items:center;border:1px solid rgba(43,41,38,.22);border-radius:999px;overflow:hidden}
.cst-btn{width:38px;height:44px;background:transparent;border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .2s;color:var(--obsidian)}
.cst-btn:hover:not(:disabled){background:rgba(43,41,38,.08)}
.cst-btn:disabled{opacity:.3;cursor:not-allowed}
.cst-qty{min-width:34px;text-align:center;font-size:14px;font-weight:500;color:var(--obsidian);padding:0 4px}
@media(max-width:760px){.srow{grid-template-columns:1fr;gap:28px;padding:44px 0}.srow-desc{max-width:none}}

/* ===== SHOP NAV DROPDOWN ===== */
.nav-drop{position:relative;display:inline-flex;align-items:center}
/* Invisible hover bridge across the gap between the trigger and the menu, so
   the cursor can travel from "Shop" down to a category without the menu
   closing. Only active while hovering, so it never blocks other clicks. */
.nav-drop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:250px;height:20px;pointer-events:none}
.nav-drop:hover::after{pointer-events:auto}
.nav nav .nav-drop-trigger{background:transparent;border:none;font-family:inherit;color:inherit;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;opacity:.7;cursor:pointer;padding:0;transition:opacity .25s}
.nav nav .nav-drop-trigger:hover{opacity:1}
.nav nav .nav-drop-trigger.active{opacity:1;font-weight:700;letter-spacing:.22em}
.nav-drop-trigger{display:inline-flex;align-items:center;gap:6px}
.nd-caret{width:11px;height:11px;opacity:.7;transition:transform .3s}
.nav-drop:hover .nd-caret,.nav-drop.open .nd-caret{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);min-width:238px;background:rgba(250,248,245,.98);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(43,41,38,.1);border-radius:16px;box-shadow:0 24px 48px -20px rgba(43,41,38,.35);display:flex;flex-direction:column;padding:10px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,transform .24s ease;z-index:200}
.nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(10px)}
.nav-drop.closing .nav-drop-menu{opacity:0;visibility:hidden;pointer-events:none;transition:none}
.nav-drop-menu a{padding:12px 16px;border-radius:9px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--obsidian);white-space:nowrap;opacity:1;transition:background .2s,color .2s}
.nav-drop-menu a:hover{background:rgba(43,41,38,.06);opacity:1}
.nav-drop-menu a.active{background:rgba(201,169,97,.16);color:var(--gold);font-weight:700}
.nav.dark .nav-drop-menu{background:rgba(15,14,13,.95);border-color:rgba(250,248,245,.12)}
.nav.dark .nav-drop-menu a{color:var(--cream)}
.nav.dark .nav-drop-menu a:hover{background:rgba(250,248,245,.08)}
.mobile-menu a.mm-sub{padding-left:34px;font-size:11px;opacity:.72;position:relative}
.mobile-menu a.mm-sub::before{content:"";position:absolute;left:18px;top:50%;width:7px;height:1px;background:currentColor;opacity:.5}