/* ============================================================================
   THE BUDDY BAGS — DESIGN SYSTEM
   Dark warm base, sand type, brass accents. One file, no framework.
   ========================================================================== */

/* ---- 1. TOKENS ---------------------------------------------------------- */
:root{
  /* Warm-dark tonal ramp. Never pure black — pure black kills the warmth. */
  --ink-900:#090908;
  --ink-850:#0C0B0A;
  --ink-800:#111010;
  --ink-700:#171514;
  --ink-600:#1E1B19;
  --ink-500:#262220;
  --ink-400:#332E2A;

  /* Warm neutral type ramp */
  --sand:#F0E7D9;
  --sand-2:#D8CDBC;
  --mute:#A29A8D;
  --mute-2:#7C7469;
  --faint:#5A544C;

  /* Accents */
  --brass:#C9A063;
  --brass-hi:#E2C28E;
  --brass-lo:#8A6C3E;
  --clay:#B4653F;
  --moss:#7E8E6B;

  --line:rgba(240,231,217,.10);
  --line-2:rgba(240,231,217,.18);
  --glass:rgba(240,231,217,.035);

  /* Type */
  --serif:'Instrument Serif',ui-serif,Georgia,'Times New Roman',serif;
  --sans:'Inter','Inter Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Rhythm */
  --gut:clamp(20px,5vw,56px);
  --max:1280px;
  --rad:16px;
  --rad-sm:10px;

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --shadow:0 1px 0 rgba(240,231,217,.05) inset, 0 24px 60px -28px rgba(0,0,0,.9);
  --header-h:64px;
  color-scheme:dark;
}

/* ---- 2. RESET ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink-900);color:var(--sand);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  font-feature-settings:'kern','liga','cv11';
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
hr{border:0;border-top:1px solid var(--line);margin:0}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px;border-radius:4px}
::selection{background:var(--brass);color:var(--ink-900)}

/* Film grain — the single cheapest way to make a dark site feel like a material */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---- 3. TYPE SCALE ------------------------------------------------------ */
.d1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,8.2vw,104px);line-height:.94;letter-spacing:-.02em}
.d2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.2vw,68px);line-height:1.02;letter-spacing:-.015em}
.d3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,42px);line-height:1.1;letter-spacing:-.01em}
.d4{font-size:clamp(19px,2vw,25px);line-height:1.3;font-weight:560;letter-spacing:-.01em}
.it{font-style:italic;color:var(--brass-hi)}
.lede{font-size:clamp(16px,1.35vw,19px);line-height:1.62;color:var(--sand-2);max-width:62ch}
.small{font-size:14px;line-height:1.55;color:var(--mute)}
.tiny{font-size:12.5px;line-height:1.5;color:var(--mute-2)}
.kicker{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:9px;
}
.kicker::before{content:'';width:22px;height:1px;background:var(--brass-lo)}
.kicker.no-rule::before{display:none}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---- 4. LAYOUT ---------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-nar{max-width:900px}
.sec{padding-block:clamp(64px,9vw,128px)}
.sec-tight{padding-block:clamp(44px,6vw,80px)}
.grid{display:grid;gap:clamp(18px,2.4vw,32px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);align-items:center}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mt-s{margin-top:12px}.mt-m{margin-top:22px}.mt-l{margin-top:38px}.mt-xl{margin-top:clamp(40px,6vw,72px)}
.center{text-align:center}
.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}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}.split{grid-template-columns:1fr}}
@media(max-width:640px){.g2,.g4{grid-template-columns:1fr}}

/* ---- 5. BUTTONS --------------------------------------------------------- */
.btn{
  --bg:var(--sand);--fg:var(--ink-900);--bd:var(--sand);
  white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:999px;border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);
  font-weight:600;font-size:15px;letter-spacing:.005em;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
  position:relative;overflow:hidden;text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(240,231,217,.4)}
.btn:active{transform:translateY(0)}
.btn-brass{--bg:var(--brass);--fg:#17120A;--bd:var(--brass)}
.btn-brass:hover{--bg:var(--brass-hi);--bd:var(--brass-hi);box-shadow:0 14px 30px -14px rgba(201,160,99,.55)}
.btn-ghost{--bg:transparent;--fg:var(--sand);--bd:var(--line-2)}
.btn-ghost:hover{--bg:var(--glass);--bd:var(--sand-2);box-shadow:none}
.btn-block{width:100%}
.btn-lg{min-height:58px;padding:0 34px;font-size:16px}
.btn-sm{min-height:42px;padding:0 18px;font-size:14px}
.btn[disabled]{opacity:.45;pointer-events:none}
.link-u{
  border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:border-color .2s var(--ease),color .2s var(--ease)
}
.link-u:hover{border-color:var(--brass);color:var(--brass-hi)}

/* ---- 6. CHIPS / BADGES -------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(201,160,99,.14);color:var(--brass-hi);border:1px solid rgba(201,160,99,.3);
}
.badge-sale{background:rgba(180,101,63,.16);color:#E5A481;border-color:rgba(180,101,63,.36)}
.badge-soft{background:var(--glass);color:var(--mute);border-color:var(--line)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--moss);box-shadow:0 0 0 3px rgba(126,142,107,.2)}

/* ---- 7. CARDS / SURFACES ------------------------------------------------ */
.card{
  background:linear-gradient(180deg,var(--ink-700),var(--ink-800));
  border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.card-pad{padding:clamp(20px,2.6vw,34px)}
.hair{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* ---- 8. HEADER ---------------------------------------------------------- */
.announce{
  background:linear-gradient(90deg,var(--brass-lo),var(--brass),var(--brass-lo));
  color:#1A1409;overflow:hidden;position:relative;z-index:60;
}
.announce-track{
  display:flex;gap:44px;white-space:nowrap;padding:8px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  animation:march 44s linear infinite;will-change:transform;
}
.announce:hover .announce-track{animation-play-state:paused}
@keyframes march{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .announce-track{animation:none;justify-content:center;padding-inline:16px;overflow:hidden}
}

.hdr{position:sticky;top:0;z-index:55;transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s}
.hdr::before{content:'';position:absolute;inset:0;backdrop-filter:blur(14px);background:rgba(9,9,8,.72);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.hdr.stuck::before{opacity:1}
.hdr.stuck{border-bottom:1px solid var(--line)}
.hdr-in{position:relative;display:flex;align-items:center;gap:18px;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.logo svg{width:30px;height:30px}
.logo-txt{font-family:var(--serif);font-size:20px;letter-spacing:.005em;line-height:1;white-space:nowrap}
.nav{display:flex;align-items:center;gap:26px;margin-inline:auto}
.nav a{font-size:14.5px;color:var(--sand-2);position:relative;padding-block:6px}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brass);transition:right .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current='page']::after{right:0}
.hdr-act{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.icon-btn{
  width:42px;height:42px;display:grid;place-items:center;border-radius:999px;
  border:1px solid transparent;transition:background .2s,border-color .2s;position:relative
}
.icon-btn:hover{background:var(--glass);border-color:var(--line)}
.cart-count{
  position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--brass);color:#17120A;font-family:var(--mono);font-size:10px;font-weight:700;
  display:grid;place-items:center;transform:scale(0);transition:transform .3s var(--ease-out)
}
.cart-count.on{transform:scale(1)}
.burger{display:none}
@media(max-width:940px){
  .nav{display:none}
  .burger{display:grid}
}

/* Mobile menu */
.mmenu{
  position:fixed;inset:0;z-index:70;background:var(--ink-850);
  transform:translateY(-100%);transition:transform .5s var(--ease-out);
  display:flex;flex-direction:column;padding:var(--gut);overflow-y:auto;
}
.mmenu.on{transform:translateY(0)}
.mmenu a{font-family:var(--serif);font-size:34px;line-height:1.5;border-bottom:1px solid var(--line)}

/* ---- 9. HERO ------------------------------------------------------------ */
.hero{position:relative;padding-block:clamp(52px,8vw,104px) clamp(56px,8vw,110px);overflow:hidden}
.hero::before{
  content:'';position:absolute;top:-30%;left:50%;translate:-50% 0;
  width:min(1100px,120vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(201,160,99,.16),rgba(201,160,99,.05) 42%,transparent 68%);
  filter:blur(10px);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,64px);align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}}
.hero-art{position:relative}
.hero-art::after{
  content:'';position:absolute;inset:auto 8% -6% 8%;height:36px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);filter:blur(12px)
}
.stat-row{display:flex;gap:clamp(16px,2.6vw,40px);flex-wrap:wrap}
.stat{min-width:88px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(26px,3vw,38px);line-height:1;color:var(--sand)}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}

/* ---- 10. PROMISE STRIP -------------------------------------------------- */
.promises{border-block:1px solid var(--line);background:var(--ink-850)}
.promises .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.promise{padding:26px clamp(14px,2vw,28px);border-left:1px solid var(--line)}
.promise:first-child{border-left:0}
.promise b{display:block;font-size:14.5px;font-weight:600;margin-bottom:4px}
@media(max-width:900px){
  .promises .wrap{grid-template-columns:1fr 1fr}
  .promise:nth-child(3){border-left:0}
  .promise:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:520px){
  .promises .wrap{grid-template-columns:1fr}
  .promise{border-left:0;border-top:1px solid var(--line)}
  .promise:first-child{border-top:0}
}

/* ---- 11. PRODUCT CARD --------------------------------------------------- */
.pcard{display:flex;flex-direction:column;height:100%;transition:transform .45s var(--ease-out)}
.pcard:hover{transform:translateY(-6px)}
.pcard-art{
  position:relative;aspect-ratio:4/3.4;border-radius:var(--rad);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 8%,var(--ink-500),var(--ink-800) 62%,var(--ink-900));
  border:1px solid var(--line);display:grid;place-items:center;padding:6%;
}
.pcard-art svg{width:100%;height:100%;transition:transform .6s var(--ease-out)}
.pcard:hover .pcard-art svg{transform:scale(1.045)}
.pcard-art .badge{position:absolute;top:14px;left:14px}
.pcard-body{padding-top:16px;display:flex;flex-direction:column;gap:5px;flex:1}
.pcard-name{font-size:17px;font-weight:600;letter-spacing:-.005em}
.pcard-sub{font-size:13.5px;color:var(--mute)}
.pcard-price{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;gap:9px}
.price{font-family:var(--mono);font-size:16px;font-weight:600}
.price-was{font-family:var(--mono);font-size:13px;color:var(--faint);text-decoration:line-through}
.swatches{display:flex;gap:6px;margin-top:9px}
.sw{width:14px;height:14px;border-radius:50%;border:1px solid rgba(240,231,217,.25)}

/* ---- 12. OFFER STACK (PDP) ---------------------------------------------- */
.pdp{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:960px){.pdp{grid-template-columns:1fr}}
.pdp-media{position:sticky;top:calc(var(--header-h) + 16px)}
@media(max-width:960px){.pdp-media{position:static}}
.stage{
  aspect-ratio:1;border-radius:var(--rad);border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 4%,var(--ink-600),var(--ink-800) 58%,var(--ink-900));
  display:grid;place-items:center;padding:7%;
}
.stage svg{width:100%;height:100%}
.thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.thumb{
  flex:0 0 74px;height:74px;border-radius:var(--rad-sm);border:1px solid var(--line);
  background:var(--ink-700);display:grid;place-items:center;padding:10px;
  transition:border-color .25s var(--ease)
}
.thumb[aria-selected='true']{border-color:var(--brass)}
.thumb svg{width:100%;height:100%}

.step{border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
.step:first-of-type{border-top:0;margin-top:0}
.step-hd{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.step-n{
  width:23px;height:23px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--brass-lo);color:var(--brass);
  font-family:var(--mono);font-size:11px;font-weight:600
}
.step-t{font-size:14px;font-weight:600;letter-spacing:.005em}

.opts{display:flex;flex-direction:column;gap:9px}
.opt{
  display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:12px;
  border:1px solid var(--line);background:var(--ink-800);cursor:pointer;text-align:left;
  transition:border-color .25s var(--ease),background .25s var(--ease);position:relative;width:100%
}
.opt:hover{border-color:var(--line-2)}
.opt[aria-checked='true']{border-color:var(--brass);background:rgba(201,160,99,.07)}
.opt-radio{
  width:17px;height:17px;border-radius:50%;border:1.5px solid var(--mute-2);flex:0 0 auto;
  display:grid;place-items:center;transition:border-color .25s
}
.opt[aria-checked='true'] .opt-radio{border-color:var(--brass)}
.opt-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--brass);transform:scale(0);transition:transform .25s var(--ease-out)}
.opt[aria-checked='true'] .opt-radio::after{transform:scale(1)}
.opt-main{flex:1;min-width:0}
.opt-label{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.opt-note{font-size:12.5px;color:var(--mute);margin-top:2px}
.opt-price{text-align:right;flex:0 0 auto}
.opt-price .price{font-size:14.5px}
.opt-price .price-was{font-size:11.5px;display:block}
.opt-flag{
  position:absolute;top:-9px;right:14px;height:19px;padding:0 9px;border-radius:999px;
  background:var(--brass);color:#17120A;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;display:grid;place-items:center
}

.colors{display:flex;gap:11px;flex-wrap:wrap}
.color{
  width:38px;height:38px;border-radius:50%;position:relative;
  border:1px solid rgba(240,231,217,.22);transition:transform .25s var(--ease-out)
}
.color:hover{transform:scale(1.08)}
.color[aria-checked='true']{box-shadow:0 0 0 2px var(--ink-900),0 0 0 3.5px var(--brass)}
.color-name{font-size:13px;color:var(--mute);min-height:20px}

.addon-box{
  display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border-radius:12px;
  border:1px dashed var(--line-2);background:var(--ink-850);cursor:pointer;text-align:left;width:100%;
  transition:border-color .25s,background .25s
}
.addon-box[aria-checked='true']{border-style:solid;border-color:var(--brass);background:rgba(201,160,99,.06)}
.chk{
  width:19px;height:19px;border-radius:5px;border:1.5px solid var(--mute-2);flex:0 0 auto;margin-top:2px;
  display:grid;place-items:center;transition:border-color .25s,background .25s
}
.addon-box[aria-checked='true'] .chk{background:var(--brass);border-color:var(--brass)}
.chk svg{width:11px;height:11px;opacity:0;transition:opacity .2s}
.addon-box[aria-checked='true'] .chk svg{opacity:1}

.buybox{
  border:1px solid var(--line);border-radius:var(--rad);padding:clamp(20px,2.4vw,30px);
  background:linear-gradient(180deg,var(--ink-700),var(--ink-850));box-shadow:var(--shadow)
}
.total-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.total-row .price{font-size:26px}
.reassure{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}
.reassure li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mute)}
.reassure svg{width:13px;height:13px;color:var(--moss);flex:0 0 auto}

/* Sticky mobile buy bar */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));
  background:rgba(12,11,10,.92);backdrop-filter:blur(16px);border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .4s var(--ease-out)
}
.stickybar.on{transform:translateY(0)}
@media(max-width:960px){.stickybar{display:flex;align-items:center;gap:14px}}
.stickybar .btn{flex:1}

/* ---- 13. SPEC TABLE ----------------------------------------------------- */
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec tr{border-top:1px solid var(--line)}
.spec tr:first-child{border-top:0}
.spec th{
  text-align:left;padding:13px 16px 13px 0;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--mute-2);white-space:nowrap;
  vertical-align:top;width:min(38%,220px)
}
.spec td{padding:13px 0;color:var(--sand-2);vertical-align:top}

/* ---- 14. COMPARISON ----------------------------------------------------- */
.cmp{width:100%;border-collapse:collapse;font-size:14.5px;overflow:hidden}
.cmp th,.cmp td{padding:15px 16px;text-align:left;border-top:1px solid var(--line)}
.cmp thead th{
  border-top:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute-2);font-weight:500
}
.cmp thead th.us{color:var(--brass)}
.cmp td.us{background:rgba(201,160,99,.055);color:var(--sand);font-weight:520}
.cmp tbody th{font-weight:500;color:var(--sand-2);font-family:var(--sans);font-size:14.5px;letter-spacing:0;text-transform:none}
.cmp td{color:var(--mute)}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad);background:var(--ink-800)}
.cmp-wrap table{min-width:640px}
.tick{color:var(--moss);font-weight:700}
.cross{color:var(--faint)}

/* ---- 15. FAQ / ACCORDION ------------------------------------------------ */
details.acc{border-top:1px solid var(--line);padding:0}
details.acc:last-of-type{border-bottom:1px solid var(--line)}
details.acc summary{
  list-style:none;cursor:pointer;padding:22px 42px 22px 0;position:relative;
  font-size:16.5px;font-weight:540;letter-spacing:-.005em
}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{
  content:'';position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)
}
details.acc[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details.acc summary:hover{color:var(--brass-hi)}
.acc-body{padding:0 8% 24px 0;color:var(--mute);font-size:15px;line-height:1.65}

/* ---- 16. REVIEWS -------------------------------------------------------- */
.stars{display:inline-flex;gap:2px;color:var(--brass)}
.stars svg{width:14px;height:14px}
.rev{padding:24px;border:1px solid var(--line);border-radius:var(--rad);background:var(--ink-800);height:100%}
.rev-q{font-size:15.5px;line-height:1.62;color:var(--sand-2);margin-block:11px}
.rev-who{font-size:13px;color:var(--mute-2)}
.demo-note{
  border:1px solid rgba(180,101,63,.4);background:rgba(180,101,63,.1);color:#E5A481;
  border-radius:var(--rad-sm);padding:13px 16px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start
}
.empty-rev{
  border:1px dashed var(--line-2);border-radius:var(--rad);padding:clamp(28px,5vw,56px);text-align:center
}

/* ---- 17. CART DRAWER ---------------------------------------------------- */
.scrim{
  position:fixed;inset:0;z-index:80;background:rgba(5,5,4,.66);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease)
}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:85;width:min(430px,100vw);
  background:var(--ink-850);border-left:1px solid var(--line);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .45s var(--ease-out)
}
.drawer.on{transform:translateX(0)}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;padding:20px var(--gut);border-bottom:1px solid var(--line)}
.drawer-body{flex:1;overflow-y:auto;padding:0 var(--gut)}
.drawer-ft{padding:18px var(--gut) calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--ink-800)}
.citem{display:grid;grid-template-columns:66px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.citem-art{width:66px;height:66px;border-radius:var(--rad-sm);background:var(--ink-600);border:1px solid var(--line);display:grid;place-items:center;padding:8px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{width:28px;height:28px;display:grid;place-items:center;color:var(--mute);transition:color .2s,background .2s}
.qty button:hover{color:var(--sand);background:var(--glass)}
.qty span{min-width:24px;text-align:center;font-family:var(--mono);font-size:13px}
.ship-bar{height:4px;border-radius:999px;background:var(--ink-500);overflow:hidden;margin-top:9px}
.ship-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brass-lo),var(--brass));width:0;transition:width .5s var(--ease-out)}

/* ---- 18. MARQUEE / LOGOS ------------------------------------------------ */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding-block:22px;background:var(--ink-850)}
.ticker-track{display:flex;gap:clamp(34px,5vw,72px);white-space:nowrap;animation:march 38s linear infinite;align-items:center}
.ticker-track span{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);color:var(--faint);display:flex;align-items:center;gap:clamp(34px,5vw,72px)}
.ticker-track span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--brass-lo)}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---- 19. FOOTER --------------------------------------------------------- */
.ftr{border-top:1px solid var(--line);background:var(--ink-850);padding-block:clamp(48px,6vw,80px) 30px;position:relative}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(26px,3vw,48px)}
@media(max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr-grid{grid-template-columns:1fr}}
.ftr h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute-2);font-weight:500;margin-bottom:15px}
.ftr li{margin-bottom:9px}
.ftr li a{font-size:14.5px;color:var(--sand-2);transition:color .2s}
.ftr li a:hover{color:var(--brass-hi)}
.ftr-btm{margin-top:clamp(36px,5vw,60px);padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pay{display:flex;gap:8px;align-items:center;opacity:.55}
.pay svg{height:20px;width:auto}

/* ---- 20. FORMS ---------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute-2)}
.input{
  height:50px;padding:0 16px;border-radius:10px;background:var(--ink-800);
  border:1px solid var(--line);color:var(--sand);transition:border-color .25s,background .25s;width:100%
}
textarea.input{height:auto;padding:14px 16px;min-height:130px;resize:vertical;line-height:1.6}
.input::placeholder{color:var(--faint)}
.input:focus{outline:none;border-color:var(--brass);background:var(--ink-700)}
.inline-form{display:flex;gap:10px;flex-wrap:wrap}
.inline-form .input{flex:1;min-width:220px}

/* ---- 21. REVEAL --------------------------------------------------------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---- 22. MISC ----------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sand);color:var(--ink-900);padding:12px 20px;border-radius:0 0 8px 0}
.skip:focus{left:0}
.prose p{margin-bottom:18px;color:var(--sand-2);line-height:1.72}
.prose h2{font-family:var(--serif);font-size:clamp(24px,3vw,34px);margin:38px 0 14px;font-weight:400}
.prose h3{font-size:18px;margin:28px 0 10px;font-weight:600}
.prose ul{margin:0 0 18px;padding-left:20px;list-style:disc;color:var(--sand-2)}
.prose li{margin-bottom:8px}
.prose a{color:var(--brass-hi);border-bottom:1px solid var(--brass-lo)}
.toast{
  position:fixed;left:50%;bottom:26px;translate:-50% 0;z-index:95;
  background:var(--sand);color:var(--ink-900);padding:13px 22px;border-radius:999px;
  font-size:14px;font-weight:600;box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease-out)
}
.toast.on{opacity:1;transform:none}