:root{
  --charcoal:#1a1a1c;
  --charcoal-soft:#2c2c2f;
  --gold:#b8872b;
  --gold-bright:#d9a84e;
  --ink:var(--charcoal);
  --cream:#faf9f6;
  --paper:#ffffff;
  --surface-soft:#f4f1ea;
  --line:#e7e3da;
  --grey:#6f6d68;
  --grey-dark:#403e3a;
  --green:#2e7d4f;
  --amber:#b3701a;
  --red:#b3402f;
  --blue:#2f5fa8;
  --purple:#7a3fc4;
  --badge-bg-green:#e6f4ec;
  --badge-bg-amber:#fdf1e3;
  --badge-bg-blue:#eaf1fb;
  --badge-bg-purple:#f1eafb;
  --badge-bg-red:#fbeaea;
  --radius:2px;
  --shadow:0 2px 14px rgba(26,26,28,0.08);
}
/* ---------- DARK MODE ----------
   --charcoal itself never changes — it's the fixed brand-black used for
   solid dark surfaces (hero, footer, primary buttons) in both themes.
   Everything that needs to invert (body text, adaptive outlines, card
   surfaces, borders, muted text) lives on separate tokens instead. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#f3f0e9;
    --cream:#151516;
    --paper:#212123;
    --surface-soft:#2a2a2c;
    --line:#38372f;
    --grey:#96938a;
    --grey-dark:#d6d2c8;
    --green:#4fae7d;
    --amber:#e29a44;
    --red:#e2695a;
    --blue:#7aaee6;
    --purple:#b98ce8;
    --badge-bg-green:#1b3626;
    --badge-bg-amber:#3a2c14;
    --badge-bg-blue:#1a2c3f;
    --badge-bg-purple:#2c2140;
    --badge-bg-red:#3a1f1c;
  }
}
:root[data-theme="dark"]{
  --ink:#f3f0e9;
  --cream:#151516;
  --paper:#212123;
  --surface-soft:#2a2a2c;
  --line:#38372f;
  --grey:#96938a;
  --grey-dark:#d6d2c8;
  --green:#4fae7d;
  --amber:#e29a44;
  --red:#e2695a;
  --blue:#7aaee6;
  --purple:#b98ce8;
  --badge-bg-green:#1b3626;
  --badge-bg-amber:#3a2c14;
  --badge-bg-blue:#1a2c3f;
  --badge-bg-purple:#2c2140;
  --badge-bg-red:#3a1f1c;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Work Sans',sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  transition:background-color .25s ease, color .25s ease;
}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-0.01em;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
.hide{display:none !important;}

/* ---------- STOCK STATUS CHIP ---------- */
.stock-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Work Sans',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;
  border-radius:20px;
  padding:4px 10px 4px 8px;
}
.stock-chip:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.stock-chip.in{color:var(--green);}
.stock-chip.low{color:var(--amber);}
.stock-chip.out{color:var(--red);}
.stock-chip.new{color:var(--gold);}
.stock-chip.sale{color:var(--red);}
.pstatus-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}

/* ---------- TOP BAR ---------- */

header.mainhead{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;}
@media(min-width:861px){ body.is-home header.mainhead{display:none;} }
.headrow{display:flex;align-items:center;gap:22px;padding:16px 0;}
.logo{font-family:'Fraunces',serif;font-weight:700;font-size:22px;letter-spacing:-0.01em;display:flex;flex-direction:column;line-height:1;cursor:pointer;}
.logo span{font-family:'Work Sans',sans-serif;font-size:9.5px;letter-spacing:.16em;color:var(--gold);font-weight:600;margin-top:3px;}
.searchbar{flex:1;display:flex;border:1.5px solid var(--ink);border-radius:var(--radius);overflow:hidden;max-width:480px;position:relative;}
.searchbar input{flex:1;border:none;padding:10px 12px;font-size:14px;outline:none;font-family:inherit;background:var(--paper);color:var(--ink);}
.searchbar button{background:var(--ink);color:var(--cream);padding:0 16px;font-size:13px;font-weight:600;}

/* ---------- LIVE SEARCH DROPDOWN ---------- */
.live-search{position:relative;}
.search-suggestions{
  display:none;position:absolute;top:100%;left:0;right:0;margin-top:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 16px 40px -12px rgba(26,26,28,.22);
  max-height:420px;overflow-y:auto;z-index:60;text-align:left;
}
.search-suggestions.open{display:block;}
.search-suggestion-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);}
.search-suggestion-item:last-of-type{border-bottom:none;}
.search-suggestion-item:hover{background:var(--cream);}
.ssi-img{width:42px;height:42px;border-radius:3px;background:var(--surface-soft) center/cover no-repeat;flex:none;}
.ssi-info{flex:1;min-width:0;}
.ssi-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ssi-meta{font-size:11px;color:var(--grey);margin-top:2px;font-family:'JetBrains Mono',monospace;}
.ssi-price{font-size:12.5px;font-weight:700;color:var(--gold);flex:none;white-space:nowrap;}
.search-suggestions-empty{padding:16px 14px;font-size:13px;color:var(--grey);text-align:center;}
.search-suggestions-viewall{display:block;padding:11px 14px;font-size:12.5px;font-weight:700;color:var(--gold);text-align:center;background:var(--cream);border-top:1px solid var(--line);}
.search-suggestions-viewall:hover{color:var(--gold-bright);background:var(--surface-soft);}
.headicons{display:flex;align-items:center;gap:18px;font-size:13px;font-weight:600;}
.headicons .icon-btn{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--grey-dark);position:relative;}
.headicons .icon-btn .glyph{font-size:18px;}
.cart-badge{position:absolute;top:-4px;right:-10px;background:var(--gold);color:#fff;border-radius:50%;font-size:10px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-family:'Work Sans';font-weight:700;}
nav.mainnav{border-top:1px solid var(--line);}
@media(min-width:861px){ body.is-home nav.mainnav{display:none;} }
nav.mainnav .wrap{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;column-gap:22px;row-gap:0;overflow-x:visible;max-width:100%;}
nav.mainnav a{display:flex;align-items:center;font-size:13px;font-weight:600;padding:11px 0;white-space:nowrap;color:var(--grey-dark);border-bottom:2px solid transparent;line-height:1;}
nav.mainnav a:hover, nav.mainnav a.active{color:var(--ink);border-color:var(--gold);}

/* ---------- CATEGORY NESTED FLYOUT MENU ---------- */
.navdrop{position:relative;display:flex;align-items:stretch;}
.navdrop > a{gap:5px;}
.navdrop-chevron{font-size:9px;display:inline-flex;align-items:center;transition:transform .25s cubic-bezier(.2,.8,.2,1);color:var(--grey);}

/* Hidden by default everywhere — desktop reveals via :hover below (opacity),
   mobile reveals via .open (display), scoped so neither mechanism leaks. */
.navdrop-panel{
  display:none;
  position:absolute;top:100%;left:-1px;width:216px;
  background:rgba(20,20,22,.86);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);border-top:2px solid var(--gold);box-shadow:0 16px 40px -12px rgba(0,0,0,.45);
  padding:6px 0;flex-direction:column;
  z-index:45;
}
.flyout-item{position:relative;}
nav.mainnav .flyout-item > a{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 16px;font-size:12px;font-weight:500;color:#ffffff;border-bottom:none;white-space:nowrap;
  transition:color .18s ease, background .18s ease, padding-left .18s ease;
}
.flyout-item > a:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold-bright);
  transform:scaleY(0);transition:transform .18s ease;transform-origin:center;
}
nav.mainnav .flyout-item > a:hover{background:rgba(255,255,255,.07);color:var(--gold-bright);padding-left:20px;}
.flyout-item > a:hover:before{transform:scaleY(1);}
.flyout-arrow{font-size:14px;line-height:1;color:rgba(255,255,255,.35);flex:none;transition:transform .18s ease, color .18s ease;}
.flyout-item > a:hover .flyout-arrow{color:var(--gold-bright);transform:translateX(2px);}

.flyout-panel{
  display:none;
  position:absolute;top:-1px;left:100%;width:216px;margin-left:2px;
  background:rgba(20,20,22,.86);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);border-top:2px solid var(--gold-bright);box-shadow:0 16px 40px -12px rgba(0,0,0,.45);
  padding:6px 0;flex-direction:column;
  z-index:46;
}
nav.mainnav .flyout-panel a{
  position:relative;padding:7px 16px;font-size:12px;font-weight:500;color:#ffffff;border-bottom:none;white-space:nowrap;
  transition:color .18s ease, background .18s ease, padding-left .18s ease;
}
.flyout-panel a:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold-bright);
  transform:scaleY(0);transition:transform .18s ease;transform-origin:center;
}
nav.mainnav .flyout-panel a:hover{background:rgba(255,255,255,.07);color:var(--gold-bright);padding-left:20px;}
.flyout-panel a:hover:before{transform:scaleY(1);}

@media(hover:hover) and (min-width:861px){
  .navdrop:hover .navdrop-chevron{transform:rotate(180deg);color:var(--gold);}
  .navdrop-panel{display:flex;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1), visibility .22s;}
  .navdrop:hover .navdrop-panel{opacity:1;visibility:visible;transform:translateY(0);}
  .flyout-panel{display:flex;opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .18s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1), visibility .18s;}
  .flyout-item:hover .flyout-panel{opacity:1;visibility:visible;transform:translateX(0);}
  .flyout-arrow{display:none;}

  /* Set by initMegaMenuEdgeDetection() in main.js when a panel would
     overflow the right edge of the viewport at its natural position. */
  .navdrop-panel.flip-left{left:auto;right:-1px;}
  .flyout-panel.flip-left{left:auto;right:100%;margin-left:0;margin-right:2px;}
  .flyout-panel.flip-left{transform:translateX(6px);}
  .flyout-item:hover .flyout-panel.flip-left{transform:translateX(0);}
}

@media(max-width:860px){
  .navdrop-panel{position:static;box-shadow:none;border:none;border-top:none;width:auto;padding:0 0 0 14px;}
  .navdrop.open .navdrop-panel{display:flex;}
  .navdrop-chevron{float:right;padding:8px 10px;margin:-8px -10px -8px 8px;font-size:12px;}
  .navdrop.open .navdrop-chevron{transform:rotate(180deg);color:var(--gold);}
  .flyout-item > a{padding:9px 4px;}
  .flyout-item > a:hover{padding-left:4px;background:none;}
  .flyout-item > a:before{display:none;}
  .flyout-arrow{padding:8px 10px;margin:-8px -10px -8px 8px;transition:transform .2s ease;}
  .flyout-item.open .flyout-arrow{transform:rotate(90deg);color:var(--gold);}
  .flyout-panel{position:static;box-shadow:none;border:none;border-top:none;width:auto;margin-left:0;padding:0 0 0 14px;}
  .flyout-item.open .flyout-panel{display:flex;}
  .flyout-panel a{padding:8px 4px;}
  .flyout-panel a:hover{padding-left:4px;background:none;}
  .flyout-panel a:before{display:none;}
}

/* ---------- HERO ---------- */
.hero{background:linear-gradient(120deg,var(--charcoal) 0%,#2b2926 100%);color:#f4f1ea;padding:0 0 68px;position:relative;overflow:hidden;background-size:200% 200%;animation:heroDrift 18s ease-in-out infinite;}
@keyframes heroDrift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.hero:before{content:"";position:absolute;right:-80px;top:-80px;width:380px;height:380px;border:1px solid rgba(217,168,78,.18);border-radius:50%;}
.hero:after{content:"";position:absolute;right:20px;bottom:-140px;width:280px;height:280px;border:1px solid rgba(217,168,78,.14);border-radius:50%;}
.hero-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:22px 0 24px;margin-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12);position:relative;z-index:2;}
.hero-nav-logo img{height:38px;width:auto;display:block;}
.hero-nav-links{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;}
.hero-nav-links a{font-size:13px;font-weight:600;letter-spacing:.03em;color:#e8e4da;border-bottom:2px solid transparent;padding-bottom:4px;transition:color .2s ease, border-color .2s ease;}
.hero-nav-links a:hover{color:var(--gold-bright);border-color:var(--gold);}
.hero-nav-icons{display:flex;justify-content:flex-end;gap:18px;}
.hero-nav-icons .icon-btn{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:600;color:#e8e4da;position:relative;transition:color .2s ease;}
.hero-nav-icons .icon-btn:hover{color:var(--gold-bright);}
.hero-nav-icons .icon-btn .glyph{font-size:18px;}
.hero-nav-icons .cart-badge{position:absolute;top:-4px;right:-10px;background:var(--gold);color:#1a1a1c;border-radius:50%;font-size:10px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.hero .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--gold-bright);text-transform:uppercase;margin-bottom:14px;opacity:0;animation:heroFadeUp .6s ease forwards;}
.hero h1{font-size:46px;max-width:640px;margin-bottom:14px;overflow:hidden;}
.hero h1 .line{display:block;opacity:0;transform:translateY(100%);animation:heroLineIn .75s cubic-bezier(.16,.8,.24,1) forwards;}
.hero h1 .line:nth-child(1){animation-delay:.08s;}
.hero h1 .line:nth-child(2){animation-delay:.2s;}
.hero h1 .line:nth-child(3){animation-delay:.32s;}
@keyframes heroLineIn{to{opacity:1;transform:translateY(0);}}
.hero p{font-size:16px;color:#cfcac0;max-width:480px;margin-bottom:30px;opacity:0;animation:heroFadeUp .6s ease forwards;animation-delay:.46s;}
.hero .btnrow{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:2;opacity:0;animation:heroFadeUp .6s ease forwards;animation-delay:.56s;}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .hero{animation:none;}
  .hero .eyebrow, .hero h1 .line, .hero p, .hero .btnrow{opacity:1;animation:none;transform:none;}
}
.btn{padding:13px 24px;font-size:13px;font-weight:700;letter-spacing:.03em;border-radius:var(--radius);display:inline-block;text-transform:uppercase;transition:transform .12s ease;}
.btn:active{transform:scale(.97);}
.btn-gold{background:var(--gold);color:#1a1a1c;}
.btn-outline{border:1.5px solid #cfcac0;color:#f4f1ea;}
.btn-charcoal{background:var(--charcoal);color:#fff;}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);}
.btn-elegant{background:transparent;border:1px solid var(--ink);color:var(--ink);font-weight:600;transition:background .25s ease, color .25s ease, border-color .25s ease;}
.btn-elegant:hover{background:var(--ink);color:var(--cream);}
.btn-elegant:disabled{opacity:.45;cursor:not-allowed;border-color:var(--line);color:var(--grey);background:transparent;}
.btn-plain{background:var(--cream);border:none;color:var(--ink);font-weight:600;transition:background .2s ease;}
.btn-plain:hover{background:var(--surface-soft);}
.btn:hover{filter:brightness(1.08);}
.btn.small{padding:9px 14px;font-size:11.5px;}
.btn.full{width:100%;text-align:center;}
.btn[disabled]{opacity:.4;cursor:not-allowed;}
.hero .btn-gold:hover{box-shadow:0 8px 26px rgba(184,135,43,.45);transform:translateY(-2px);}
.hero .btn-outline:hover{box-shadow:0 8px 22px rgba(255,255,255,.12);transform:translateY(-2px);}

/* ---------- MANIFEST TICKER ---------- */
.manifest-ticker{background:#141416;border-top:1px solid rgba(217,168,78,.15);border-bottom:1px solid rgba(217,168,78,.15);overflow:hidden;white-space:nowrap;padding:10px 0;position:relative;}
.manifest-track{display:inline-block;animation:manifestScroll 38s linear infinite;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;color:var(--gold-bright);text-transform:uppercase;}
.manifest-track .dot{color:rgba(217,168,78,.4);padding:0 18px;}
.manifest-track span:not(.dot){padding:0 2px;}
@keyframes manifestScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){ .manifest-track{animation:none;} }

/* ---------- SECTION GENERIC ---------- */
.section{padding:56px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;}
.section-head .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;margin-bottom:6px;}
.section-head h2{font-size:28px;}
.section-head a.viewall{font-size:12.5px;font-weight:600;border-bottom:1px solid var(--ink);}

/* ---------- CATEGORY GRID ---------- */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.catcard{background:var(--paper);border:1px solid var(--line);padding:36px 32px;cursor:pointer;transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;position:relative;overflow:hidden;min-height:210px;display:flex;flex-direction:column;}
.catcard:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(26,26,28,.22);}
.catcard:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg, transparent, rgba(184,135,43,.10), transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;}
.catcard:hover:before{left:130%;}
.catcard .catnum{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold);margin-bottom:16px;}
.catcard h3{font-size:22px;margin-bottom:10px;}
.catcard p{font-size:14px;color:var(--grey);line-height:1.6;}
.catcard-arrow{margin-top:auto;padding-top:20px;font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--gold);opacity:0;transform:translateX(-6px);transition:opacity .3s ease, transform .3s ease;}
.catcard:hover .catcard-arrow{opacity:1;transform:translateX(0);}

/* ---------- PRODUCT GRID / CARD ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pcard{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;transition:.15s;position:relative;}
.pcard:hover{border-color:var(--ink);box-shadow:var(--shadow);}
.ptile{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:15px;font-weight:600;color:#fff;text-align:center;padding:14px;position:relative;background:var(--paper);}
.pbody{padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.psku{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--grey);}
.pname{font-size:14px;font-weight:600;line-height:1.3;cursor:pointer;}
.pname:hover{color:var(--gold);}
.pprice-row{display:flex;align-items:baseline;gap:8px;margin-top:2px;}
.pprice{font-size:16px;font-weight:700;}
.pprice-old{font-size:12px;color:var(--grey);text-decoration:line-through;}
.pactions{margin-top:auto;display:flex;gap:6px;padding-top:8px;}

/* ---------- FAVOURITE HEART ---------- */
.pcard-fav{
  position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.pcard-fav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .2s ease;}
.pcard-fav:hover{transform:scale(1.08);border-color:var(--red);color:var(--red);background:rgba(255,255,255,.6);}
.pcard-fav.active{color:var(--red);border-color:var(--red);background:rgba(255,255,255,.6);}
.pcard-fav.active svg{fill:var(--red);}

/* ---------- PRODUCT CARD OPTIONS MODAL ---------- */
.pcard-modal{display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;padding:20px;}
.pcard-modal.open{display:flex;}
.pcard-modal-backdrop{position:absolute;inset:0;background:rgba(26,26,28,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.pcard-modal-box{position:relative;background:var(--paper);border-radius:4px;max-width:380px;width:100%;padding:28px 26px;box-shadow:0 30px 70px -20px rgba(0,0,0,.4);max-height:90vh;overflow-y:auto;}
.pcard-modal-close{position:absolute;top:14px;right:14px;width:28px;height:28px;font-size:22px;line-height:1;color:var(--grey);}
.pcard-modal-close:hover{color:var(--ink);}
.pcard-popup-title{font-size:17px;margin-bottom:16px;padding-right:24px;}
.pcard-popup-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin:14px 0 8px;}
.pcard-popup-label:first-of-type{margin-top:0;}

/* ---------- SHOP STICKY CHROME ----------
   --header-h and --shop-bar-h are measured at runtime (initStickyOffsets
   in main.js) so this stays correct regardless of header/bar content —
   the fallback values only apply before JS runs or if it's disabled. */
.shop-sticky-bar{position:sticky;top:var(--header-h, 110px);z-index:30;background:var(--cream);padding-top:10px;}
.shop-sticky-bar .crumb{padding-top:0;margin-bottom:10px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;}
.shop-sticky-bar .crumb a{color:var(--gold);}
.shop-sticky-bar .crumb a:hover{color:var(--gold-bright);}

/* ---------- FILTER LAYOUT ---------- */
.shoplayout{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:start;}
.filterbox{background:var(--paper);border:1px solid var(--line);padding:18px;position:sticky;top:calc(var(--header-h, 110px) + var(--shop-bar-h, 140px));max-height:calc(100vh - var(--header-h, 110px) - var(--shop-bar-h, 140px) - 20px);overflow-y:auto;}
.filtergroup{margin-bottom:20px;}
.filtergroup h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--grey-dark);margin-bottom:10px;font-family:'Work Sans';font-weight:700;}
.filtergroup label{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;cursor:pointer;color:var(--grey-dark);}
.filtergroup input[type=checkbox]{accent-color:var(--gold);width:15px;height:15px;flex:none;}
.filtergroup input[type=range]{width:100%;accent-color:var(--gold);}

.filtergroup-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;}
.filtergroup-head h4{margin-bottom:0;}
.filter-hint{text-transform:none;letter-spacing:0;font-weight:400;font-size:10.5px;color:var(--grey);margin-left:6px;}
.clear-filters{font-size:11px;color:var(--gold);text-decoration:underline;font-weight:600;white-space:nowrap;}

.catlist{display:flex;flex-direction:column;gap:2px;}
.catnode{border-bottom:1px solid var(--line);}
.catnode:last-child{border-bottom:none;}
.catnode summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;padding:6px 0;}
.catnode summary::-webkit-details-marker{display:none;}
.catnode summary .cat-check{flex:1;padding:0;margin:0;font-weight:600;color:var(--grey-dark);}
.catnode-arrow{font-size:10px;color:var(--grey);transition:transform .2s ease;flex:none;}
.catnode[open] .catnode-arrow{transform:rotate(180deg);color:var(--gold);}
.subcatlist{display:flex;flex-direction:column;gap:0;padding:2px 0 8px 23px;border-left:1.5px solid var(--line);margin-left:7px;}
.subcat-check{font-size:12px;color:var(--grey);padding:4px 0 4px 10px;}
.subcat-check:hover{color:var(--gold);}
.subcat-check input[type=checkbox]{width:13px;height:13px;}
.shoptoolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.shoptoolbar select{border:1px solid var(--line);padding:8px 10px;font-size:13px;background:var(--paper);color:var(--ink);font-family:inherit;}
.resultcount{font-size:13px;color:var(--grey);}

/* ---------- WHY / STRIP ---------- */
.stripe{background:var(--charcoal);color:#f4f1ea;padding:0;}
.stripgrid{display:grid;grid-template-columns:repeat(4,1fr);}
.stripitem{padding:34px 26px;border-left:1px solid rgba(255,255,255,.1);position:relative;transition:background .3s ease;cursor:default;}
.stripitem:first-child{border-left:none;}
.stripitem:hover{background:rgba(255,255,255,.03);}
.stripitem:after{content:"";position:absolute;left:26px;bottom:22px;width:0;height:2px;background:var(--gold);transition:width .35s cubic-bezier(.2,.8,.2,1);}
.stripitem:hover:after{width:32px;}
.stripitem .n{font-family:'JetBrains Mono',monospace;color:var(--gold-bright);font-size:12px;margin-bottom:8px;transition:transform .3s ease;}
.stripitem:hover .n{transform:translateX(4px);}
.stripitem h4{font-size:16px;margin-bottom:6px;color:#fff;}
.stripitem p{font-size:12.5px;color:#b8b3a8;}

/* ---------- CATEGORY SPOTLIGHT (alternating image/text) ---------- */
.spotlight{padding:64px 28px;}
.spotlight-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:64px;}
.spotlight-row:last-child{margin-bottom:0;}
.spotlight-row.reverse .spotlight-img{order:2;}
.spotlight-row.reverse .spotlight-copy{order:1;}
.spotlight-img{aspect-ratio:4/3;border-radius:2px;overflow:hidden;background:linear-gradient(135deg,var(--line),var(--surface-soft));}
.spotlight-img img{width:100%;height:100%;object-fit:cover;display:block;}
.spotlight-copy .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;margin-bottom:10px;}
.spotlight-copy h3{font-size:28px;margin-bottom:14px;}
.spotlight-copy p{font-size:14.5px;color:var(--grey-dark);line-height:1.7;margin-bottom:22px;max-width:420px;}
.spotlight-link{display:inline-block;font-size:13.5px;font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--gold);padding-bottom:3px;transition:color .2s ease, border-color .2s ease;}
.spotlight-link:hover{color:var(--gold);border-color:var(--gold-bright);}

/* ---------- DEALS BANNER ---------- */
.deals-banner{background:var(--charcoal);color:#fff;overflow:hidden;}
.deals-grid{display:grid;grid-template-columns:1fr 1.3fr;min-height:320px;padding:0;}
.deals-copy{padding:56px 0;display:flex;flex-direction:column;justify-content:center;}
.deals-copy .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--gold-bright);text-transform:uppercase;margin-bottom:14px;}
.deals-copy h2{font-size:32px;color:#fff;margin-bottom:16px;}
.deals-copy p{font-size:14px;color:#cfcac0;margin-bottom:26px;max-width:360px;}
.deals-link{display:inline-block;font-size:13.5px;font-weight:700;color:#f4f1ea;border-bottom:1.5px solid var(--gold);padding-bottom:3px;transition:color .2s ease, border-color .2s ease;}
.deals-link:hover{color:var(--gold-bright);border-color:var(--gold-bright);}
.deals-img{position:relative;overflow:hidden;height:460px;background:linear-gradient(135deg,#2b2926,var(--charcoal));}
.deals-img img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- FAQ TEASER ---------- */
.faq-teaser{padding:64px 28px;}
.faq-teaser-grid{display:grid;grid-template-columns:.9fr 1.4fr;gap:56px;}
.faq-teaser h2{font-size:28px;margin:8px 0 12px;}
.faq-teaser > .faq-teaser-grid > div:first-child p{font-size:14px;color:var(--grey);line-height:1.7;max-width:340px;}
.faq-teaser-list{display:flex;flex-direction:column;}
.faq-teaser-item{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);}
.faq-teaser-item:first-child{padding-top:0;}
.faq-teaser-item:last-child{border-bottom:none;}
.faq-teaser-num{font-family:'JetBrains Mono',monospace;color:var(--gold);font-size:15px;font-weight:700;flex:none;width:28px;}
.faq-teaser-item h4{font-size:15.5px;margin-bottom:5px;}
.faq-teaser-item p{font-size:13px;color:var(--grey);line-height:1.6;}

@media(max-width:760px){
  .spotlight-row{grid-template-columns:1fr;gap:22px;margin-bottom:36px;}
  .spotlight-row.reverse .spotlight-img{order:0;}
  .spotlight-row.reverse .spotlight-copy{order:0;}
  .deals-grid{grid-template-columns:1fr;}
  .deals-copy{padding:40px 0;}
  .deals-img{height:220px;}
  .faq-teaser-grid{grid-template-columns:1fr;gap:28px;}
}

/* ---------- WHOLESALE / WA ---------- */
.wholesale{background:linear-gradient(120deg,#2b2926,var(--charcoal));color:#fff;padding:50px 0;position:relative;overflow:hidden;}
.wholesale:before{
  content:"";position:absolute;inset:-20% -10%;
  background:repeating-linear-gradient(-45deg, rgba(184,135,43,.07) 0 22px, transparent 22px 44px);
  animation:stripeDrift 26s linear infinite;pointer-events:none;
}
@keyframes stripeDrift{from{transform:translateX(0);}to{transform:translateX(62px);}}
@media (prefers-reduced-motion: reduce){ .wholesale:before{animation:none;} }
.wholesale .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;position:relative;z-index:2;}
.wholesale h2{color:#fff;font-size:26px;margin-bottom:6px;}
.wholesale p{color:#cfcac0;font-size:14px;}

footer{background:var(--charcoal);color:#a8a39a;padding:50px 0 24px;margin-top:0;}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:36px;}
footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;font-family:'Work Sans';}
footer a{display:block;font-size:13px;padding:4px 0;color:#a8a39a;}
footer a:hover{color:var(--gold-bright);}
.footbottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:12px;display:flex;justify-content:space-between;}

/* ---------- WA FLOAT ---------- */
.wa-float{position:fixed;bottom:22px;right:22px;background:#1f9c56;color:#fff;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.25);z-index:50;font-size:24px;}

/* ---------- BREADCRUMB ---------- */
.crumb{font-size:12px;color:var(--grey);padding:16px 0 0;}
.crumb a:hover{color:var(--gold);}

/* ---------- PRODUCT DETAIL ---------- */
.pdlayout{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:30px 0 56px;}
.pd-gallery-main{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;color:#fff;font-size:22px;font-weight:600;text-align:center;padding:30px;margin-bottom:10px;position:relative;background:var(--paper);border:1px solid var(--line);}
.pd-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.pd-thumb{width:64px;height:64px;object-fit:contain;background:var(--paper);padding:4px;border:1.5px solid var(--line);cursor:pointer;flex-shrink:0;transition:border-color .2s ease, transform .2s ease, background-color .2s ease;box-sizing:border-box;}
.pd-thumb:hover{border-color:var(--ink);transform:translateY(-2px);}
.pd-thumb.active{border-color:var(--gold);}
.pd-cat{font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:8px;}
.pd-title{font-size:28px;margin-bottom:8px;}
.pd-meta{display:flex;gap:14px;font-size:12.5px;color:var(--grey);margin-bottom:16px;flex-wrap:wrap;}
.pd-price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.pd-price{font-size:30px;font-weight:700;}
.pd-price-old{font-size:16px;color:var(--grey);text-decoration:line-through;}
.pd-block{margin-bottom:20px;}
.pd-block h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--grey-dark);margin-bottom:10px;}
.varbtns{display:flex;flex-wrap:wrap;gap:8px;}
.varbtn{border:1.5px solid var(--line);padding:9px 14px;font-size:13px;font-weight:600;border-radius:var(--radius);cursor:pointer;position:relative;}
.varbtn.active{border-color:var(--ink);background:var(--ink);color:var(--cream);}
.varbtn.oos{color:var(--grey);text-decoration:line-through;opacity:.5;cursor:not-allowed;border-style:dashed;}
.qtyrow{display:flex;align-items:center;gap:12px;}
.qtybox{display:inline-flex;width:fit-content;align-items:stretch;background:var(--cream);border-radius:var(--radius);overflow:hidden;}
.qtybox button{width:36px;height:38px;font-size:16px;font-weight:700;background:transparent;color:var(--ink);}
.qtybox span{width:40px;text-align:center;font-weight:600;}
.qtybox input{
  width:48px;height:38px;text-align:center;font-weight:700;font-size:14px;
  border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);
  outline:none;background:transparent;color:var(--ink);font-family:inherit;
  -moz-appearance:textfield;
}
.qtybox input::-webkit-outer-spin-button,
.qtybox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.pd-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.spectable{width:100%;border-collapse:collapse;font-size:13px;}
.spectable td{padding:8px 0;border-bottom:1px solid var(--line);}
.spectable td:first-child{color:var(--grey);width:40%;}
.desc-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:44px 0 24px;}
.desc-tabs button{padding:10px 2px;font-size:13px;font-weight:600;color:var(--grey);border-bottom:2px solid transparent;}
.desc-tabs button.active{color:var(--ink);border-color:var(--gold);}
.tabpanel{display:none;font-size:14px;line-height:1.7;color:var(--grey-dark);max-width:760px;}
.tabpanel.active{display:block;}

/* ---------- CART ---------- */
.cartlayout{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;}
.cartitem{display:grid;grid-template-columns:70px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center;}
.cartitem .ctile{width:70px;height:70px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces',serif;font-weight:700;font-size:11px;text-align:center;overflow:hidden;flex:none;border:1px solid var(--line);}
.cartitem h4{font-size:14px;margin-bottom:3px;}
.cartitem .cmeta{font-size:12px;color:var(--grey);}
.cartitem .cright{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.summarybox{background:var(--paper);border:1px solid var(--line);padding:22px;}
.summarybox .row{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;color:var(--grey-dark);}
.summarybox .row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:17px;font-weight:700;color:var(--ink);}
.removelink{font-size:11.5px;color:var(--red);text-decoration:underline;}

/* ---------- FORMS ---------- */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.formgrid.full{grid-template-columns:1fr;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:12px;font-weight:600;color:var(--grey-dark);}
.field input, .field select, .field textarea{border:1.5px solid var(--line);padding:11px 12px;font-size:14px;font-family:inherit;border-radius:var(--radius);background:var(--paper);color:var(--ink);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--gold);}
.radiorow{display:flex;gap:10px;}
.radiocard{flex:1;border:1.5px solid var(--line);padding:14px;cursor:pointer;font-size:13px;font-weight:600;text-align:center;}
.radiocard.active{border-color:var(--ink);background:var(--ink);color:var(--cream);}
.card-box{background:var(--paper);border:1px solid var(--line);padding:24px;margin-bottom:20px;}
.card-box h3{font-size:16px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);}

/* ---------- ACCOUNT QUICK-ACTION TILES ---------- */
.acct-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;}
.acct-tile, .acct-tile-form{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);border:1px solid var(--line);padding:18px 20px;transition:border-color .2s ease, background .2s ease;}
.acct-tile:hover, .acct-tile-form:hover{border-color:var(--gold);background:var(--surface-soft);}
.acct-tile-form button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;}
.acct-tile-label{font-size:13.5px;font-weight:600;color:var(--ink);}
.acct-tile-arrow{color:var(--gold);font-size:15px;transition:transform .2s ease;flex:none;}
.acct-tile:hover .acct-tile-arrow, .acct-tile-form:hover .acct-tile-arrow{transform:translateX(3px);}
@media(max-width:640px){ .acct-tiles{grid-template-columns:1fr;} }

.findus-card{background:var(--paper);border:1px solid var(--line);margin-top:28px;overflow:hidden;}
.findus-head{padding:20px 22px 16px;}
.findus-head h3{font-size:16px;margin-bottom:4px;}
.findus-head p{color:var(--grey);font-size:13.5px;}
.findus-head a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}
.findus-head a:hover{color:var(--gold-bright);}
.findus-map{width:100%;height:320px;border:0;display:block;filter:grayscale(.15) contrast(1.03);}
:root[data-theme="dark"] .findus-map{filter:grayscale(.2) invert(.88) contrast(.9) hue-rotate(180deg);}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .findus-map{filter:grayscale(.2) invert(.88) contrast(.9) hue-rotate(180deg);}}
.location-confirm-row{display:flex;justify-content:space-between;align-items:center;gap:14px;}

/* Payment on delivery note */
.payment-note{display:flex;gap:12px;align-items:flex-start;background:var(--surface-soft);border:1px solid var(--line);padding:14px;}

/* ---------- CONFIRMATION ---------- */
.confirmwrap{max-width:640px;margin:60px auto;text-align:center;}
.confirmwrap .checkcircle{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.ordernum{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;color:var(--gold);margin:10px 0 24px;letter-spacing:.02em;}

/* ---------- ACCOUNT ---------- */
.acctlayout{display:grid;grid-template-columns:220px 1fr;gap:30px;}
.acctnav a{display:block;padding:11px 14px;font-size:13.5px;font-weight:600;border-left:2px solid transparent;color:var(--grey-dark);}
.acctnav a.active, .acctnav a:hover{border-color:var(--gold);color:var(--ink);background:var(--paper);}
table.datatable{width:100%;border-collapse:collapse;font-size:13.5px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.datatable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);padding:10px 12px;border-bottom:1.5px solid var(--ink);}
table.datatable td{padding:12px;border-bottom:1px solid var(--line);}
table.datatable tr:hover td{background:var(--surface-soft);}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:12px;display:inline-block;}
.badge.paid{background:var(--badge-bg-green);color:var(--green);}
.badge.pending{background:var(--badge-bg-amber);color:var(--amber);}
.badge.delivered{background:var(--badge-bg-green);color:var(--green);}
.badge.transit{background:var(--badge-bg-blue);color:var(--blue);}
.badge.new{background:var(--badge-bg-purple);color:var(--purple);}
.badge.cancelled{background:var(--badge-bg-red);color:var(--red);}

/* ---------- TRACK ---------- */
.track{display:flex;justify-content:space-between;position:relative;margin:30px 0 10px;}
.track:before{content:"";position:absolute;top:14px;left:0;right:0;height:2px;background:var(--line);}
.trackstep{position:relative;text-align:center;flex:1;z-index:1;}
.trackstep .dot{width:28px;height:28px;border-radius:50%;background:var(--paper);border:2px solid var(--line);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--grey);}
.trackstep.done .dot{background:var(--gold);border-color:var(--gold);color:#fff;}
.trackstep p{font-size:11px;font-weight:600;color:var(--grey);}
.trackstep.done p{color:var(--ink);}

/* ---------- ADMIN ---------- */
#adminApp{display:none;background:var(--cream);min-height:100vh;}
#adminApp.show{display:flex;}
.adminside{width:220px;background:var(--charcoal);color:#cfcac0;padding:20px 0;flex-shrink:0;min-height:100vh;position:sticky;top:0;align-self:flex-start;}
.adminside .alogo{padding:0 20px 20px;font-family:'Fraunces',serif;font-weight:700;font-size:18px;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:14px;}
.adminside .alogo span{display:block;font-family:'Work Sans';font-size:9px;letter-spacing:.14em;color:var(--gold-bright);margin-top:3px;}
.adminside a{display:flex;align-items:center;gap:10px;padding:11px 20px;font-size:13px;font-weight:600;color:#b8b3a8;border-left:3px solid transparent;}
.adminside a.active, .adminside a:hover{background:rgba(255,255,255,.05);color:#fff;border-color:var(--gold);}
.adminside .exit{margin-top:20px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px;}
.adminmain{flex:1;padding:30px 34px;max-width:1180px;}
.adminhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.adminhead h2{font-size:22px;}
.kpigrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px;}
.kpicard{background:var(--paper);border:1px solid var(--line);padding:18px;}
.kpicard .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);margin-bottom:8px;font-weight:600;}
.kpicard .val{font-size:24px;font-weight:700;font-family:'Fraunces',serif;}
.kpicard .sub{font-size:11px;color:var(--green);margin-top:4px;}
.kpicard.warn .val{color:var(--amber);}
.kpicard.bad .val{color:var(--red);}
.adminpanel{background:var(--paper);border:1px solid var(--line);padding:22px;margin-bottom:22px;}
.adminpanel h3{font-size:15px;margin-bottom:16px;}
.adminview{display:none;}
.adminview.active{display:block;}
.editable{border:1px solid transparent;padding:3px 6px;border-radius:2px;}
.editable:hover{border-color:var(--line);background:var(--surface-soft);}
.inline-input{border:1.5px solid var(--gold);padding:4px 6px;font-size:13px;width:80px;font-family:inherit;background:var(--paper);color:var(--ink);}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--charcoal);color:#fff;padding:12px 22px;border-radius:4px;font-size:13px;font-weight:600;z-index:100;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 6px 20px rgba(0,0,0,.25);}
.toast.show{opacity:1;transform:translate(-50%,-8px);}
.statusselect{border:1px solid var(--line);padding:5px 8px;font-size:12px;font-family:inherit;background:var(--paper);color:var(--ink);}
.gatebox{max-width:380px;margin:90px auto;background:var(--paper);border:1px solid var(--line);padding:34px;text-align:center;}
.gatebox h2{margin-bottom:6px;}
.gatebox p{font-size:13px;color:var(--grey);margin-bottom:22px;}
.emptynote{font-size:13px;color:var(--grey);padding:30px 0;text-align:center;}

/* ============================================================
   PAYMENT MODAL
   ============================================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(26,26,28,.55);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-box{background:var(--paper);color:var(--ink);padding:26px;max-width:400px;width:100%;border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:modalPop .25s cubic-bezier(.2,.9,.3,1.2);}
@keyframes modalPop{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}

@media(max-width:1000px){
  .pgrid{grid-template-columns:repeat(2,1fr);}
  .catgrid{grid-template-columns:repeat(2,1fr);}
  .pdlayout{grid-template-columns:1fr;}
  .cartlayout{grid-template-columns:1fr;}
  .shoplayout{grid-template-columns:1fr;}
  .stripgrid{grid-template-columns:repeat(2,1fr);}
  .footgrid{grid-template-columns:1fr 1fr;}
  .formgrid{grid-template-columns:1fr;}
  .acctlayout{grid-template-columns:1fr;}
  .kpigrid{grid-template-columns:repeat(2,1fr);}
  #adminApp.show{flex-direction:column;}
  .adminside{width:100%;position:static;min-height:auto;display:flex;overflow-x:auto;padding:10px;}
  .adminside .alogo{display:none;}
  .adminside a{border-left:none;border-bottom:3px solid transparent;white-space:nowrap;}
  .hero h1{font-size:32px;}
}

/* ============================================================
   LOGO
   ============================================================ */
.logo-link{display:flex;align-items:center;cursor:pointer;}
.logo-img{height:38px;width:auto;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.logo-link:hover .logo-img{transform:scale(1.03);}
.foot-logo-img{height:34px;width:auto;margin-bottom:14px;}
.admin-logo-row{display:flex;align-items:center;gap:10px;}
.admin-logo-icon{height:30px;width:auto;flex-shrink:0;}

/* ============================================================
   VIEW TRANSITION
   ============================================================ */
#mainContent{opacity:1;transition:opacity .28s cubic-bezier(.2,.8,.2,1);}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.16,.8,.24,1), transform .55s cubic-bezier(.16,.8,.24,1);}
.reveal.in-view{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  #mainContent{transition:none;}
}

/* ============================================================
   STICKY HEADER SHADOW ON SCROLL
   Deliberately layout-neutral (no padding/height changes) — those
   used to shrink the header, which changed its own height and nudged
   scrollY back under the threshold, causing a flicker loop as the
   class toggled on/off repeatedly.
   ============================================================ */
header.mainhead{transition:box-shadow .25s ease, background-color .25s ease;}
header.mainhead.scrolled{box-shadow:0 4px 18px rgba(26,26,28,.08);}

/* ============================================================
   CARD / HOVER POLISH
   ============================================================ */
.pcard{transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease, background-color .3s ease, color .3s ease;}
.pcard:hover{transform:translateY(-4px);}
.ptile{overflow:hidden;position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1), background-color .3s ease;}
.pcard:hover .ptile{transform:scale(1.05);}
.ptile:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 55%);opacity:0;transition:opacity .35s ease;}
.pcard:hover .ptile:before{opacity:1;}
.pname{transition:color .2s ease;}
.catcard{transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease, background-color .3s ease, color .3s ease;}
.catcard:hover{transform:translateY(-4px);}
.catcard .catnum{transition:transform .3s ease;}
.catcard:hover .catnum{transform:translateX(3px);}

/* Button sheen + press */
.btn{position:relative;overflow:hidden;transition:transform .15s ease, filter .15s ease, box-shadow .2s ease;}
.btn:active{transform:scale(.96);}
.btn:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none;}
.btn:hover:before{left:130%;}
.btn-gold:hover{box-shadow:0 6px 18px rgba(184,135,43,.35);}
.btn-charcoal:hover{box-shadow:0 6px 18px rgba(26,26,28,.28);}
.btn[disabled]{overflow:hidden;}
.btn[disabled]:before{display:none;}

/* Cart badge pop */
@keyframes cartpop{0%{transform:scale(1);}45%{transform:scale(1.45);}100%{transform:scale(1);}}
.cart-badge.pop{animation:cartpop .38s cubic-bezier(.34,1.56,.64,1);}
.icon-btn{transition:color .2s ease, transform .2s ease;}
.icon-btn:hover{color:var(--gold);transform:translateY(-1px);}

/* Toast refine */
.toast{transition:opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1);}

/* Variant / qty micro interactions */
.varbtn{transition:transform .18s ease, border-color .2s ease, background .2s ease, color .2s ease;}
.varbtn:not(.oos):not(.active):hover{border-color:var(--ink);transform:translateY(-2px);}
.qtybox button{transition:background .15s ease;}
.qtybox button:hover{background:var(--surface-soft);}

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:2px;
}

/* ============================================================
   HERO WATERMARK EMBLEM
   ============================================================ */
.hero-emblem{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:420px;opacity:.10;pointer-events:none;z-index:1;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.hero > .wrap{position:relative;z-index:2;}

/* ============================================================
   HAMBURGER + MOBILE NAV
   ============================================================ */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:0;}
.hamburger span{display:block;width:100%;height:2px;background:var(--ink);transition:transform .3s ease, opacity .3s ease;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:860px){
  .searchbar{display:none;}
  .headicons .icon-btn span:not(.glyph){display:none;}
  .hamburger{display:flex;}
  nav.mainnav{max-height:0;overflow:hidden;transition:max-height .35s ease;border-top:none;}
  nav.mainnav.open{max-height:520px;border-top:1px solid var(--line);}
  nav.mainnav .wrap{flex-direction:column;gap:0;overflow:visible;padding:6px 28px 14px;}
  nav.mainnav a{padding:12px 0;border-bottom:1px solid var(--line);width:100%;}
  .mobile-search{display:flex;border:1.5px solid var(--ink);border-radius:var(--radius);overflow:hidden;margin:12px 28px 0;}
  .mobile-search input{flex:1;border:none;padding:10px 12px;font-size:14px;outline:none;font-family:inherit;background:var(--paper);color:var(--ink);}
  .mobile-search button{background:var(--ink);color:var(--cream);padding:0 16px;font-size:13px;font-weight:600;}
}
@media(min-width:861px){ .mobile-search{display:none;} }

/* ============================================================
   MOBILE FILTER DRAWER
   ============================================================ */
.filter-toggle-btn{display:none;}
@media(max-width:1000px){
  .filter-toggle-btn{display:flex;align-items:center;gap:8px;}
  .filterbox{
    position:fixed;top:0;left:0;height:100vh;width:82%;max-width:320px;
    transform:translateX(-105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
    z-index:200;overflow-y:auto;box-shadow:8px 0 30px rgba(0,0,0,.2);
  }
  .filterbox.open{transform:translateX(0);}
  .filter-backdrop{display:none;position:fixed;inset:0;background:rgba(26,26,28,.45);z-index:190;}
  .filter-backdrop.open{display:block;}
  .filterbox .drawer-close{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);}
}
.drawer-close{display:none;}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-item{cursor:pointer;}
.faq-item h3{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:14px;}
.faq-chevron{font-size:18px;color:var(--gold);transition:transform .3s ease;flex-shrink:0;}
.faq-item.open .faq-chevron{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease, opacity .25s ease, margin-top .35s ease;opacity:0;}
.faq-item.open .faq-a{max-height:200px;opacity:1;margin-top:8px;}

/* ============================================================
   MOBILE STICKY BUY BAR
   ============================================================ */
.mobile-buybar{display:none;}
@media(max-width:860px){
  .mobile-buybar{
    display:flex;gap:8px;position:fixed;bottom:0;left:0;right:0;background:var(--paper);
    border-top:1px solid var(--line);padding:10px 14px;z-index:60;box-shadow:0 -4px 16px rgba(0,0,0,.08);
    align-items:center;
  }
  .mobile-buybar .mb-price{font-weight:700;font-size:15px;white-space:nowrap;}
  .wa-float{bottom:80px;}
}

/* ============================================================
   ADMIN KPI / MISC
   ============================================================ */
.kpicard{transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;}
.kpicard:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.adminside a{transition:background .2s ease, color .2s ease, border-color .2s ease;}
.editable{transition:background .2s ease, border-color .2s ease;}

/* Variant radio-as-button (Django template uses real radios for no-JS-required selection) */
.varbtn{display:inline-flex;cursor:pointer;}
.varbtn:has(input:checked){border-color:var(--ink);background:var(--ink);color:var(--cream);}
.varbtn.oos{cursor:not-allowed;}

/* ============================================================
   DARK MODE TOGGLE + SMOOTH THEME TRANSITION
   ============================================================ */
footer, .filterbox, .card-box, .summarybox, .findus-card, .adminpanel, .gatebox,
.search-suggestions, .pcard-modal-box, .modal-box, .field input, .field select,
.field textarea, .pd-gallery-main, .ctile{
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}

.theme-toggle .icon-to-light, .theme-toggle .label-to-light{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-to-dark, :root[data-theme="dark"] .theme-toggle .label-to-dark{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-to-light, :root[data-theme="dark"] .theme-toggle .label-to-light{display:inline;}

.logo-img-light{display:none;}
:root[data-theme="dark"] .logo-img-dark{display:none;}
:root[data-theme="dark"] .logo-img-light{display:block;}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-lead p{transition:color .25s ease;}
.about-numgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.about-numcard{
  background:var(--paper);border:1px solid var(--line);padding:32px 26px 28px;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.about-numcard:before{
  content:"";position:absolute;top:0;left:0;width:0;height:3px;background:var(--gold);
  transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.about-numcard:hover{transform:translateY(-5px);box-shadow:0 16px 34px -16px rgba(26,26,28,.24);border-color:var(--gold);}
.about-numcard:hover:before{width:100%;}
.about-numcard-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--gold);letter-spacing:.08em;margin-bottom:16px;display:block;transition:transform .3s ease;}
.about-numcard:hover .about-numcard-num{transform:translateX(4px);}
.about-numcard h3{font-size:17px;margin-bottom:10px;transition:color .25s ease;}
.about-numcard:hover h3{color:var(--gold);}
.about-numcard p{font-size:13.5px;color:var(--grey-dark);line-height:1.7;}

.about-cta-inner{
  background:var(--surface-soft);border:1px solid var(--line);
  padding:36px 40px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  transition:background-color .25s ease, border-color .25s ease;
}
.about-cta-links{display:flex;gap:30px;flex-wrap:wrap;}
.about-cta-links .spotlight-link{font-size:14px;}

@media(max-width:1000px){
  .about-numgrid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .about-numgrid{grid-template-columns:1fr;}
  .about-cta-inner{flex-direction:column;align-items:flex-start;}
}