/* STRADA — storefront design system.
 *
 * Dark-first. Every product photograph is shot on the same charcoal seamless
 * backdrop, so cards are dark too and the product appears to float on the page
 * with no visible photo boundary. That is the whole trick — do not put products
 * on light cards, it reintroduces the seam.
 */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root{
  --coal:#0B0C0E;      /* page */
  --soot:#121417;      /* raised surface */
  --iron:#171A1E;      /* card */
  --iron-2:#1E2227;    /* card hover / input */
  --line:#282D33;
  --line-2:#33393F;

  --bone:#F2EFEA;      /* primary text */
  --smoke:#B4BAC2;     /* secondary text */
  --ash:#7E858E;       /* muted text */

  --ember:#E2542A;     /* primary action */
  --ember-lt:#F1663A;
  --ember-dk:#C1421D;
  --brass:#C08B4B;     /* small accents only */
  --good:#5E9E72;

  --r:4px;             /* the brand is forged, not rounded */
  --r-lg:8px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dsp:"Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --srf:"Newsreader", ui-serif, Georgia, serif;
  --hd:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--coal); color:var(--bone);
  font-family:var(--dsp); font-size:16px; line-height:1.6;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0}
input,select{font:inherit; color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.02; letter-spacing:-.03em;
  font-variation-settings:"wdth" 112}
:focus-visible{outline:2px solid var(--ember); outline-offset:3px}
::selection{background:var(--ember); color:#fff}
[hidden]{display:none !important}

.shell{width:min(1240px, 100% - 2.75rem); margin-inline:auto}
@media(max-width:640px){ .shell{width:min(1240px, 100% - 1.75rem)} }

/* ── Type utilities ─────────────────────────────────────────────────── */
.eyebrow{font-size:.6875rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash); font-variation-settings:"wdth" 100}
.eyebrow.em{color:var(--ember)}
.dsp{font-size:clamp(2.4rem, 6.4vw, 5.25rem); font-weight:800; line-height:.94; letter-spacing:-.045em;
  text-transform:uppercase; font-variation-settings:"wdth" 116}
.dsp-2{font-size:clamp(1.9rem, 3.9vw, 3.1rem); font-weight:800; line-height:1; letter-spacing:-.04em;
  text-transform:uppercase; font-variation-settings:"wdth" 114}
.serif{font-family:var(--srf); font-style:italic; font-weight:300; letter-spacing:-.01em;
  text-transform:none; font-variation-settings:normal}
.lede{color:var(--smoke); font-size:1.0625rem; line-height:1.65; max-width:46ch}
.muted{color:var(--ash)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  height:52px; padding:0 1.6rem; border-radius:var(--r);
  font-size:.8125rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  font-variation-settings:"wdth" 100;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .1s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-em{background:var(--ember); color:#fff}
.btn-em:hover{background:var(--ember-lt)}
.btn-bone{background:var(--bone); color:var(--coal)}
.btn-bone:hover{background:#fff}
.btn-ghost{border:1px solid var(--line-2); color:var(--bone)}
.btn-ghost:hover{border-color:var(--bone); background:rgba(242,239,234,.05)}
.btn-blk{width:100%}
.btn-sm{height:42px; padding:0 1.1rem; font-size:.6875rem}
.btn[disabled]{opacity:.42; pointer-events:none}

.link-u{border-bottom:1px solid var(--line-2); padding-bottom:2px;
  transition:border-color .18s var(--ease), color .18s var(--ease)}
.link-u:hover{border-color:var(--ember); color:var(--ember)}

/* ── Announce bar ───────────────────────────────────────────────────── */
.announce{background:var(--ember); color:#fff; overflow:hidden; height:38px}
.announce .shell{height:100%; display:flex; align-items:center; justify-content:center}
.announce-track{position:relative; height:100%; width:100%}
.announce-item{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:.55rem; font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease);
  text-align:center; padding-inline:1rem}
.announce-item.on{opacity:1; transform:none}

/* ── Header ─────────────────────────────────────────────────────────── */
header{position:sticky; top:0; z-index:60; background:rgba(11,12,14,.82);
  backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:var(--hd); gap:1.5rem}
.mark{display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.3rem;
  letter-spacing:.26em; text-transform:uppercase; font-variation-settings:"wdth" 108;
  padding-right:.1rem}
.mark svg{width:19px; height:19px; flex:none; color:var(--ember)}
.nav-links{display:flex; align-items:center; gap:2rem; font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--smoke)}
.nav-links a{transition:color .18s var(--ease)}
.nav-links a:hover{color:var(--bone)}
.nav-act{display:flex; align-items:center; gap:.35rem}
.icon-btn{width:42px; height:42px; display:grid; place-items:center; border-radius:var(--r);
  position:relative; transition:background .18s var(--ease)}
.icon-btn:hover{background:var(--iron-2)}
.icon-btn svg{width:19px; height:19px; stroke:currentColor; stroke-width:1.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.bag-n{position:absolute; top:4px; right:3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--ember); color:#fff; font-size:.625rem; font-weight:800;
  display:grid; place-items:center; line-height:1; transform:scale(0); transition:transform .24s var(--ease)}
.bag-n.on{transform:scale(1)}
.burger{display:none}
@media(max-width:960px){ .nav-links{display:none} .burger{display:grid} }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{display:grid; grid-template-columns:1fr 1.04fr; align-items:stretch; min-height:min(760px, 86vh)}
.hero-copy{display:flex; flex-direction:column; justify-content:center; gap:1.5rem;
  padding:4.5rem 3.5rem 4.5rem 0}
.hero-copy .dsp span{display:block}
.hero-copy .dsp .em{color:var(--ember)}
.hero-cta{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.35rem}
.hero-media{position:relative; margin-right:calc((100vw - min(1240px, 100vw - 2.75rem)) / -2)}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:38% 50%}
.hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--coal) 0%, rgba(11,12,14,.55) 14%, transparent 42%)}
.hero-trust{display:flex; gap:2.2rem; flex-wrap:wrap; padding-top:1.6rem; border-top:1px solid var(--line)}
.hero-trust div{display:flex; flex-direction:column; gap:.15rem}
.hero-trust b{font-size:.8125rem; font-weight:700; letter-spacing:.02em}
.hero-trust span{font-size:.6875rem; color:var(--ash); letter-spacing:.06em; text-transform:uppercase}
@media(max-width:980px){
  .hero{grid-template-columns:1fr; min-height:0}
  .hero-copy{padding:2.75rem 0 3rem; order:2}
  .hero-media{order:1; margin-inline:calc((100vw - min(1240px, 100vw - 2.75rem)) / -2); aspect-ratio:16/10}
  .hero-media::after{background:linear-gradient(0deg, var(--coal) 0%, transparent 46%)}
}

/* ── Marquee credential strip ───────────────────────────────────────── */
.strip{border-block:1px solid var(--line); background:var(--soot); overflow:hidden}
.strip-track{display:flex; gap:3.5rem; padding:.95rem 0; width:max-content;
  animation:slide 46s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-track span{display:flex; align-items:center; gap:.7rem; font-size:.6875rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ash); white-space:nowrap}
.strip-track span::before{content:""; width:4px; height:4px; background:var(--ember); flex:none}
@keyframes slide{ to{ transform:translateX(-50%) } }
@media(prefers-reduced-motion:reduce){ .strip-track{animation:none} }

/* ── Section furniture ──────────────────────────────────────────────── */
.sec{padding:6rem 0}
.sec-sm{padding:4rem 0}
/* Anchor targets must clear the sticky header, or a jump to #shop parks the
   section heading underneath it. */
[id]{scroll-margin-top:calc(var(--hd) + 24px)}
@media(max-width:768px){ .sec{padding:4rem 0} .sec-sm{padding:2.75rem 0} }
.sec-hd{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  margin-bottom:2.5rem; flex-wrap:wrap}
.sec-hd .t{display:flex; flex-direction:column; gap:.85rem; max-width:60ch}

/* ── Category tiles ─────────────────────────────────────────────────── */
.cats{display:grid; grid-template-columns:repeat(5,1fr); gap:.75rem}
.cat{position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r);
  background:var(--iron); display:block; border:1px solid var(--line)}
.cat img{width:100%; height:100%; object-fit:cover; transition:transform .75s var(--ease); opacity:.86}
.cat:hover img{transform:scale(1.045); opacity:1}
.cat::after{content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(11,12,14,.94) 4%, rgba(11,12,14,.25) 44%, transparent 68%)}
.cat-t{position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.15rem; z-index:2}
.cat-t b{display:block; font-size:1.0625rem; font-weight:800; letter-spacing:-.02em;
  font-variation-settings:"wdth" 112; text-transform:uppercase}
.cat-t span{display:block; font-size:.6875rem; color:var(--smoke); margin-top:.2rem; line-height:1.35}
@media(max-width:1040px){ .cats{grid-template-columns:repeat(3,1fr)} }
@media(max-width:600px){ .cats{grid-template-columns:repeat(2,1fr); gap:.5rem} }

/* ── Filter chips ───────────────────────────────────────────────────── */
.chips{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.75rem}
.chip{height:38px; padding:0 1rem; border:1px solid var(--line); border-radius:var(--r);
  font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--smoke); display:inline-flex; align-items:center; gap:.5rem;
  transition:border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease)}
.chip:hover{border-color:var(--line-2); color:var(--bone)}
.chip.on{background:var(--bone); border-color:var(--bone); color:var(--coal)}
.chip .n{font-size:.625rem; opacity:.55}

/* ── Product grid ───────────────────────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem}
@media(max-width:1040px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:760px){ .grid{grid-template-columns:repeat(2,1fr); gap:.5rem} }

.card{position:relative; background:var(--iron); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:border-color .22s var(--ease), background .22s var(--ease)}
.card:hover{border-color:var(--line-2); background:var(--iron-2)}
.card-img{position:relative; aspect-ratio:1; overflow:hidden; background:#15171A}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.card:hover .card-img img{transform:scale(1.05)}
.card-bd{padding:1rem 1.05rem 1.15rem}
.card-cat{font-size:.625rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ash); margin-bottom:.4rem}
.card-nm{font-size:.9375rem; font-weight:700; letter-spacing:-.015em; line-height:1.25;
  font-variation-settings:"wdth" 104}
.card-pr{margin-top:.55rem; font-size:.875rem; font-weight:700; color:var(--smoke)}
.card-stretch{position:absolute; inset:0; z-index:3}
.quick{position:absolute; left:.6rem; right:.6rem; bottom:.6rem; z-index:4;
  height:42px; border-radius:var(--r); background:var(--bone); color:var(--coal);
  font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:opacity .22s var(--ease), transform .22s var(--ease), background .18s}
.quick:hover{background:#fff}
.card:hover .quick, .card:focus-within .quick{opacity:1; transform:none}
@media(hover:none){ .quick{opacity:1; transform:none} }
.flag{position:absolute; top:.6rem; left:.6rem; z-index:4; height:24px; padding:0 .55rem;
  display:inline-flex; align-items:center; border-radius:2px; background:var(--ember); color:#fff;
  font-size:.5625rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase}
.flag.brass{background:var(--brass); color:#17130C}

/* ── Kit band (curated bundle upsell) ───────────────────────────────── */
.kit{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--soot); overflow:hidden;
  display:grid; grid-template-columns:1.05fr 1fr; align-items:center}
.kit-copy{padding:3rem 3rem 3rem 3.25rem; display:flex; flex-direction:column; gap:1.15rem}
.kit-items{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; padding:1.25rem 1.25rem 1.25rem 0}
.kit-item{background:var(--iron); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.kit-item img{aspect-ratio:1; object-fit:cover; width:100%}
.kit-item div{padding:.6rem .65rem .75rem; font-size:.6875rem; line-height:1.3; color:var(--smoke)}
.kit-item b{display:block; color:var(--bone); font-weight:700; font-size:.75rem; margin-bottom:.15rem}
.kit-price{display:flex; align-items:baseline; gap:.7rem}
.kit-price b{font-size:1.75rem; font-weight:800; letter-spacing:-.03em}
.kit-price s{color:var(--ash); font-size:1rem}
.kit-price .save{font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ember)}
@media(max-width:940px){
  .kit{grid-template-columns:1fr}
  .kit-copy{padding:2.25rem 1.5rem 1.25rem}
  .kit-items{padding:0 1.5rem 1.75rem; grid-template-columns:repeat(3,1fr)}
}

/* ── Editorial split ────────────────────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center}
.split.rev .split-media{order:2}
.split-media{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line)}
.split-media img{width:100%; aspect-ratio:3/2; object-fit:cover}
.split-copy{display:flex; flex-direction:column; gap:1.35rem}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 2rem; padding-top:1.6rem;
  border-top:1px solid var(--line)}
.facts div b{display:block; font-size:1.5rem; font-weight:800; letter-spacing:-.03em; color:var(--bone)}
.facts div span{font-size:.75rem; color:var(--ash); line-height:1.45; display:block; margin-top:.2rem}
@media(max-width:900px){
  .split{grid-template-columns:1fr; gap:2rem}
  .split.rev .split-media{order:0}
}

/* ── Lead capture ───────────────────────────────────────────────────── */
.lead{border:1px solid var(--line); border-radius:var(--r-lg); background:
  radial-gradient(120% 140% at 8% 0%, rgba(226,84,42,.16) 0%, transparent 55%), var(--soot);
  padding:3.5rem; display:grid; grid-template-columns:1fr auto; gap:2.5rem; align-items:center}
.lead-form{display:flex; gap:.5rem; min-width:min(420px, 100%)}
.lead-form input{flex:1; height:52px; padding:0 1rem; background:var(--coal);
  border:1px solid var(--line-2); border-radius:var(--r); color:var(--bone); font-size:.9375rem;
  transition:border-color .18s var(--ease)}
.lead-form input::placeholder{color:var(--ash)}
.lead-form input:focus{outline:none; border-color:var(--ember)}
.lead-ok{display:flex; align-items:center; gap:.6rem; font-size:.875rem; color:var(--good)}
.lead-ok code{background:var(--coal); border:1px dashed var(--line-2); padding:.35rem .6rem;
  border-radius:var(--r); font-weight:700; letter-spacing:.1em; color:var(--bone); font-size:.8125rem}
@media(max-width:880px){ .lead{grid-template-columns:1fr; padding:2rem 1.5rem; gap:1.5rem} }
@media(max-width:520px){ .lead-form{flex-direction:column} }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:1.5rem 0; display:flex; align-items:center;
  justify-content:space-between; gap:2rem; font-size:1.0625rem; font-weight:700; letter-spacing:-.015em;
  font-variation-settings:"wdth" 106}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; width:11px; height:11px; flex:none; border-right:1.5px solid var(--ash);
  border-bottom:1.5px solid var(--ash); transform:rotate(45deg) translateY(-3px);
  transition:transform .24s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq .a{padding:0 0 1.6rem; color:var(--smoke); max-width:70ch; font-size:.9375rem}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); background:var(--soot); padding:4.5rem 0 2.25rem;
  margin-top:2rem}
.f-grid{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:3rem; padding-bottom:3rem}
.f-grid h4{font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash);
  margin-bottom:1.1rem; font-weight:700; font-variation-settings:"wdth" 100}
.f-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem}
.f-grid li a{font-size:.875rem; color:var(--smoke); transition:color .18s var(--ease)}
.f-grid li a:hover{color:var(--bone)}
.f-bot{border-top:1px solid var(--line); padding-top:1.75rem; display:flex; gap:1.5rem;
  justify-content:space-between; flex-wrap:wrap; font-size:.75rem; color:var(--ash); line-height:1.7}
@media(max-width:860px){ .f-grid{grid-template-columns:1fr 1fr; gap:2.25rem} }

/* ── Overlay + panels ───────────────────────────────────────────────── */
.ovl{position:fixed; inset:0; background:rgba(6,7,8,.72); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); z-index:90}
.ovl.on{opacity:1; pointer-events:auto}
.panel{position:fixed; top:0; right:0; bottom:0; width:min(460px, 100vw); background:var(--coal);
  border-left:1px solid var(--line); z-index:100; display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .42s var(--ease); will-change:transform}
.panel.on{transform:none}
.panel.left{right:auto; left:0; border-left:0; border-right:1px solid var(--line);
  transform:translateX(-102%)}
.panel.left.on{transform:none}
.panel-hd{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.35rem 1.5rem; border-bottom:1px solid var(--line); flex:none}
.panel-hd h2{font-size:1.125rem; text-transform:uppercase; letter-spacing:-.02em}
.panel-hd .sub{font-size:.6875rem; color:var(--ash); letter-spacing:.12em; text-transform:uppercase;
  margin-top:.2rem}
.panel-bd{flex:1; overflow-y:auto; overscroll-behavior:contain}
.panel-ft{flex:none; border-top:1px solid var(--line); padding:1.25rem 1.5rem 1.5rem;
  background:var(--soot)}
.x{width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r); flex:none;
  transition:background .18s var(--ease)}
.x:hover{background:var(--iron-2)}
.x svg{width:17px; height:17px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round}

/* ── Free-ship / gift meter ─────────────────────────────────────────── */
.meter{padding:1rem 1.5rem; border-bottom:1px solid var(--line); background:var(--soot); flex:none}
.meter .lbl{font-size:.75rem; color:var(--smoke); margin-bottom:.6rem; line-height:1.4}
.meter .lbl b{color:var(--bone); font-weight:700}
.meter .lbl .done{color:var(--good); font-weight:700}
.meter .bar{height:3px; background:var(--line); border-radius:2px; overflow:hidden; position:relative}
.meter .bar i{display:block; height:100%; background:var(--ember); width:0;
  transition:width .5s var(--ease)}
.meter .bar i.full{background:var(--good)}
.meter .ticks{display:flex; justify-content:space-between; margin-top:.4rem;
  font-size:.5625rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ash)}

/* ── Bag lines ──────────────────────────────────────────────────────── */
.bag-lines{list-style:none; margin:0; padding:0}
.bag-line{display:grid; grid-template-columns:76px 1fr; gap:.95rem; padding:1.15rem 1.5rem;
  border-bottom:1px solid var(--line)}
.bag-line img{width:76px; height:76px; object-fit:cover; border-radius:var(--r); background:var(--iron)}
.bag-line .nm{font-size:.875rem; font-weight:700; letter-spacing:-.01em; line-height:1.3}
.bag-line .vr{font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ash);
  margin-top:.25rem}
.bag-line .rw{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:.7rem}
.bag-line .pr{font-size:.875rem; font-weight:700}
.bag-line .gift{font-size:.625rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--good)}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r);
  height:32px}
.qty button{width:30px; height:100%; display:grid; place-items:center; color:var(--smoke);
  font-size:.9rem; transition:color .18s}
.qty button:hover{color:var(--bone)}
.qty span{min-width:26px; text-align:center; font-size:.8125rem; font-weight:700}
.rm{font-size:.625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ash);
  border-bottom:1px solid transparent; transition:color .18s, border-color .18s}
.rm:hover{color:var(--ember); border-color:var(--ember)}

/* ── In-cart order bumps ────────────────────────────────────────────── */
.bumps{padding:1.25rem 1.5rem; border-bottom:1px solid var(--line); background:var(--soot)}
.bumps > .eyebrow{margin-bottom:.85rem}
.bump{display:grid; grid-template-columns:52px 1fr auto; gap:.8rem; align-items:center;
  padding:.7rem 0; border-top:1px solid var(--line)}
.bump:first-of-type{border-top:0}
.bump img{width:52px; height:52px; object-fit:cover; border-radius:var(--r); background:var(--iron)}
.bump .nm{font-size:.8125rem; font-weight:700; line-height:1.25}
.bump .pr{font-size:.75rem; color:var(--ash); margin-top:.15rem}
.bump button{height:34px; padding:0 .85rem; border:1px solid var(--line-2); border-radius:var(--r);
  font-size:.625rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  transition:background .18s, color .18s, border-color .18s}
.bump button:hover{background:var(--bone); color:var(--coal); border-color:var(--bone)}

/* ── Promo row + totals ─────────────────────────────────────────────── */
.promo{display:flex; gap:.4rem; margin-bottom:1rem}
.promo input{flex:1; height:42px; padding:0 .85rem; background:var(--coal); border:1px solid var(--line);
  border-radius:var(--r); color:var(--bone); font-size:.8125rem; letter-spacing:.08em;
  text-transform:uppercase}
.promo input::placeholder{letter-spacing:.08em; color:var(--ash); text-transform:none}
.promo input:focus{outline:none; border-color:var(--ember)}
.promo button{height:42px; padding:0 .95rem; border:1px solid var(--line-2); border-radius:var(--r);
  font-size:.625rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase}
.promo button:hover{background:var(--bone); color:var(--coal); border-color:var(--bone)}
.promo-msg{font-size:.75rem; margin:-.5rem 0 .9rem}
.promo-msg.ok{color:var(--good)}
.promo-msg.no{color:var(--ember)}
.sum{display:flex; justify-content:space-between; gap:1rem; font-size:.8125rem; color:var(--smoke);
  padding:.3rem 0}
.sum.disc{color:var(--good)}
.sum.tot{font-size:1.0625rem; font-weight:800; color:var(--bone); letter-spacing:-.02em;
  padding-top:.85rem; margin-top:.5rem; border-top:1px solid var(--line)}
.panel-ft .note{font-size:.625rem; color:var(--ash); text-align:center; margin-top:.85rem;
  letter-spacing:.06em; line-height:1.6}

/* ── Product drawer ─────────────────────────────────────────────────── */
.pp-img{aspect-ratio:1; background:var(--iron); border-bottom:1px solid var(--line)}
.pp-img img{width:100%; height:100%; object-fit:cover}
.pp-bd{padding:1.5rem}
.pp-nm{font-size:1.5rem; font-weight:800; letter-spacing:-.03em; line-height:1.05;
  text-transform:uppercase; font-variation-settings:"wdth" 112}
.pp-pr{font-size:1.125rem; font-weight:700; margin-top:.55rem}
.pp-bl{color:var(--smoke); font-size:.9375rem; margin-top:1rem; line-height:1.65}
.pp-var{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1.35rem}
.pp-var button{height:40px; padding:0 1rem; border:1px solid var(--line); border-radius:var(--r);
  font-size:.75rem; font-weight:700; letter-spacing:.09em; color:var(--smoke); transition:.18s var(--ease)}
.pp-var button.on{background:var(--bone); border-color:var(--bone); color:var(--coal)}
.specs{list-style:none; margin:1.6rem 0 0; padding:0; border-top:1px solid var(--line)}
.specs li{display:flex; justify-content:space-between; gap:1.5rem; padding:.65rem 0;
  border-bottom:1px solid var(--line); font-size:.8125rem}
.specs li span:first-child{color:var(--ash)}
.specs li span:last-child{text-align:right; font-weight:600}
.kit-add{margin-top:1.75rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--soot); padding:1.15rem}
.kit-add > .eyebrow{margin-bottom:.9rem}
.ka{display:grid; grid-template-columns:auto 46px 1fr auto; gap:.75rem; align-items:center;
  padding:.6rem 0; border-top:1px solid var(--line); cursor:pointer}
.ka:first-of-type{border-top:0}
.ka img{width:46px; height:46px; object-fit:cover; border-radius:2px; background:var(--iron)}
.ka .nm{font-size:.8125rem; font-weight:700; line-height:1.25}
.ka .pr{font-size:.75rem; color:var(--ash); margin-top:.1rem}
.ka input{appearance:none; width:18px; height:18px; border:1px solid var(--line-2); border-radius:2px;
  cursor:pointer; position:relative; flex:none; transition:.16s}
.ka input:checked{background:var(--ember); border-color:var(--ember)}
.ka input:checked::after{content:""; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(42deg)}

/* ── Nav drawer ─────────────────────────────────────────────────────── */
.nav-panel ul{list-style:none; margin:0; padding:1rem 0}
.nav-panel li a{display:block; padding:.95rem 1.5rem; font-size:1.125rem; font-weight:700;
  letter-spacing:-.02em; text-transform:uppercase; border-bottom:1px solid var(--line);
  font-variation-settings:"wdth" 108; transition:background .18s, color .18s}
.nav-panel li a:hover{background:var(--iron); color:var(--ember)}

/* ── Exit-intent modal ──────────────────────────────────────────────── */
.modal{position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:1.5rem;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease)}
.modal.on{opacity:1; pointer-events:auto}
.modal-in{width:min(880px,100%); background:var(--soot); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; display:grid; grid-template-columns:.85fr 1fr;
  transform:translateY(14px) scale(.985); transition:transform .38s var(--ease); max-height:92vh}
.modal.on .modal-in{transform:none}
.modal-media{background:var(--iron)}
.modal-media img{width:100%; height:100%; object-fit:cover; min-height:280px}
.modal-bd{padding:2.75rem 2.5rem; display:flex; flex-direction:column; gap:1.1rem;
  position:relative; overflow-y:auto}
.modal-bd .x{position:absolute; top:.85rem; right:.85rem}
.modal-bd .off{font-size:clamp(2.6rem,7vw,3.75rem); font-weight:800; letter-spacing:-.045em;
  line-height:.9; text-transform:uppercase; font-variation-settings:"wdth" 118; color:var(--ember)}
.modal-no{background:none; font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ash); align-self:flex-start; border-bottom:1px solid transparent}
.modal-no:hover{color:var(--smoke); border-color:var(--line-2)}
@media(max-width:760px){ .modal-in{grid-template-columns:1fr} .modal-media{display:none}
  .modal-bd{padding:2rem 1.5rem} }

/* ── Toast ──────────────────────────────────────────────────────────── */
.toast{position:fixed; left:50%; bottom:1.75rem; z-index:120; transform:translate(-50%, 130%);
  background:var(--bone); color:var(--coal); border-radius:var(--r); padding:.85rem 1.15rem;
  display:flex; align-items:center; gap:.7rem; font-size:.8125rem; font-weight:700;
  box-shadow:0 18px 50px rgba(0,0,0,.5); transition:transform .42s var(--ease); max-width:calc(100vw - 2rem)}
.toast.on{transform:translate(-50%, 0)}
.toast svg{width:16px; height:16px; stroke:var(--ember); stroke-width:2.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ── Sticky mobile bar ──────────────────────────────────────────────── */
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:70; background:rgba(11,12,14,.94);
  backdrop-filter:blur(14px); border-top:1px solid var(--line);
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); display:none; gap:.6rem;
  align-items:center; transform:translateY(110%); transition:transform .32s var(--ease)}
.sticky.on{transform:none}
.sticky .amt{display:flex; flex-direction:column; line-height:1.2; flex:none}
.sticky .amt b{font-size:.9375rem; font-weight:800}
.sticky .amt span{font-size:.5625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ash)}
.sticky .btn{flex:1}
@media(max-width:760px){ .sticky{display:flex} }

.empty{padding:4rem 1.5rem; text-align:center; color:var(--ash); display:flex;
  flex-direction:column; gap:1.15rem; align-items:center}
.empty svg{width:34px; height:34px; stroke:var(--line-2); stroke-width:1.2; fill:none}
.no-scroll{overflow:hidden}