/* ============================================================
   HYZER CO. — "Trail Spray"  ·  OUTDOOR GRAFFITI FLYER kit
   Bungee (display / stencil signage) · Figtree (body) · DM Mono (utility)
   Forest canvas · hi-vis yellow accent · kraft paper · torn-poster panels
   ============================================================ */

@font-face{
  font-family:"Bungee";
  src:url("../fonts/bungee.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Figtree";
  src:url("../fonts/figtree.woff2") format("woff2");
  font-weight:300 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DM Mono";
  src:url("../fonts/dmmono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DM Mono";
  src:url("../fonts/dmmono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* ── tokens ─────────────────────────────────────────────── */
:root{
  --forest:#1F3A1A;
  --pine:#152A12;
  --surface:#253D20;
  --kraft:#E8DCC0;
  --kraft-dim:#c8bd9c;
  --orange:#D8F000;
  --orange-deep:#D8F000;
  --sky:#5A6B62;
  --ink:#14170F;
  --muted:#8B9A78;

  --disp:"Bungee","Arial Black",Impact,sans-serif;
  --body:"Figtree","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;

  --wrap:1200px;
  --gutter:clamp(1.25rem,5vw,4rem);

  /* torn / rough edges (signature) */
  --torn-top:polygon(0 14px,4% 4px,9% 12px,15% 2px,22% 11px,30% 3px,38% 13px,46% 4px,54% 12px,62% 2px,70% 11px,78% 4px,86% 13px,93% 3px,100% 12px,100% 100%,0 100%);
  --torn-both:polygon(0 12px,7% 3px,15% 11px,24% 2px,33% 10px,44% 3px,55% 12px,66% 2px,76% 11px,86% 3px,94% 12px,100% 4px,100% calc(100% - 11px),93% calc(100% - 3px),84% calc(100% - 12px),74% calc(100% - 2px),63% calc(100% - 11px),52% calc(100% - 3px),41% calc(100% - 12px),30% calc(100% - 2px),20% calc(100% - 11px),10% calc(100% - 3px),3% calc(100% - 12px),0 calc(100% - 4px));
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}

body{
  background:var(--forest);
  color:var(--kraft);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .2vw,1.08rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* spray-texture canvas: layered radial noise in forest/ink tones */
  background-image:
    radial-gradient(circle at 12% 18%,rgba(20,23,15,.55) 0,transparent 38%),
    radial-gradient(circle at 82% 12%,rgba(37,61,32,.6) 0,transparent 42%),
    radial-gradient(circle at 68% 82%,rgba(20,23,15,.5) 0,transparent 46%),
    radial-gradient(circle at 24% 88%,rgba(37,61,32,.5) 0,transparent 40%);
  background-attachment:fixed;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ── typography ────────────────────────────────────────── */
.display,h1,h2,h3{
  font-family:var(--disp);
  font-weight:400;
  line-height:.94;
  letter-spacing:.005em;
  text-transform:uppercase;
}
h1{font-size:clamp(2.6rem,7.5vw,5.6rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.3rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.02}
p{max-width:64ch}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:500;
  display:inline-block;
}
.eyebrow.sky{color:var(--sky)}
.eyebrow.kraft{color:var(--kraft-dim)}
.mono{font-family:var(--mono);letter-spacing:.02em}
.muted{color:var(--muted)}
.lead{font-family:var(--body);font-size:clamp(1.05rem,1rem + .5vw,1.3rem);line-height:1.5;color:var(--kraft-dim);text-transform:none}

/* ── trail tick: the meta rule (mono coordinates) ──────── */
.trailtick{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--kraft-dim);
  border-top:2px dashed rgba(232,220,192,.28);
  padding-top:.75rem;
}
.trailtick .tk{white-space:nowrap}
.trailtick .tk b{color:var(--orange);font-weight:500}
.trailtick a{color:var(--sky)}

/* ── layout scaffolding ────────────────────────────────── */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3.25rem,7vw,6rem)}
.stack>*+*{margin-top:1.1rem}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.8rem,4vw,3rem)}
.sec-head .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--orange);font-weight:500;text-transform:uppercase}
.sec-head h2{max-width:18ch}

/* ── hand-drawn CSS arrow (signature motif) ────────────── */
.arrow-draw{
  position:relative;display:inline-block;width:3.4rem;height:1.2rem;
  vertical-align:middle;
}
.arrow-draw::before{
  content:"";position:absolute;top:50%;left:0;width:100%;height:3px;
  background:var(--orange);transform:translateY(-50%) rotate(-2deg);
  border-radius:2px;
}
.arrow-draw::after{
  content:"";position:absolute;top:50%;right:-1px;width:14px;height:14px;
  border-top:3px solid var(--orange);border-right:3px solid var(--orange);
  transform:translateY(-50%) rotate(45deg);border-radius:1px;
}
.arrow{font-family:var(--mono)}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--disp);font-size:.82rem;font-weight:400;
  letter-spacing:.03em;text-transform:uppercase;
  padding:.9rem 1.5rem;border:2.5px solid transparent;
  transition:transform .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease;
  cursor:pointer;line-height:1;
}
.btn:hover{transform:translate(-2px,-2px)}
.btn-fill{background:var(--orange);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-fill:hover{background:var(--orange);box-shadow:6px 6px 0 var(--ink)}
.btn-ghost{border-color:var(--kraft);color:var(--kraft);background:transparent}
.btn-ghost:hover{background:var(--kraft);color:var(--ink)}
.btn-ghost.on-orange{border-color:var(--ink);color:var(--ink)}
.btn-ghost.on-orange:hover{background:var(--ink);color:var(--kraft)}

/* ── header / nav: chunky STATIC BLOCK bar ─────────────── */
.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--orange);
  border-bottom:4px solid var(--ink);
}
.site-head .bar{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gutter);
  display:flex;align-items:stretch;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;
}
.brand{
  font-family:var(--disp);font-weight:400;font-size:1.5rem;letter-spacing:.02em;
  color:var(--ink);text-transform:uppercase;
  display:flex;align-items:center;padding:1.1rem 0;
}
.brand .dot{color:var(--forest)}
.nav{display:flex;align-items:stretch;flex-wrap:wrap}
.nav a{
  font-family:var(--disp);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);display:flex;align-items:center;padding:1.15rem .95rem;
  border-left:2px solid rgba(20,23,15,.22);
}
.nav a:hover{background:var(--ink);color:var(--orange)}
.nav a.cart{background:var(--ink);color:var(--kraft);border-left:2px solid var(--ink)}
.nav a.cart:hover{background:var(--forest);color:var(--orange)}

/* ── hero: stacked flyer / poster ──────────────────────── */
.hero{position:relative;background:var(--pine);color:var(--kraft);overflow:hidden;
  border-bottom:5px solid var(--orange)}
.hero-figure{position:absolute;inset:0}
.hero-figure img{width:100%;height:100%;object-fit:cover;opacity:.34}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(circle at 78% 30%,rgba(216,240,0,.16) 0,transparent 40%),
    linear-gradient(180deg,rgba(21,42,18,.82) 0%,rgba(21,42,18,.6) 55%,rgba(21,42,18,.9) 100%);}
.hero-inner{position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(3.5rem,10vw,7rem) var(--gutter) clamp(2.5rem,5vw,3.5rem);}
.hero .flyer-hero{max-width:44rem}
.hero .kick-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
/* spray-circle motif around a word */
.spray-circle{
  position:relative;display:inline-block;padding:.1em .35em;color:var(--orange);
}
.spray-circle::before{
  content:"";position:absolute;inset:-.15em -.25em;
  border:4px solid var(--orange);border-radius:48% 52% 50% 50%/55% 48% 52% 45%;
  transform:rotate(-3deg);opacity:.9;
}
.hero h1{margin:.4rem 0 1.3rem;font-size:clamp(2.7rem,8vw,5.8rem);line-height:.9;
  text-shadow:5px 5px 0 rgba(20,23,15,.55)}
.hero h1 .l2{display:block;color:var(--orange)}
.hero .lead{color:rgba(232,220,192,.9);max-width:42ch}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:1.9rem}
/* stat strip below hero */
.stat-strip{position:relative;z-index:2;background:var(--ink)}
.stat-strip .row{max-width:var(--wrap);margin-inline:auto;padding:.95rem var(--gutter);
  display:flex;gap:clamp(1rem,4vw,2.6rem);flex-wrap:wrap;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,220,192,.7)}
.stat-strip b{color:var(--orange);font-weight:500}

/* ── torn-paper panel (signature) ──────────────────────── */
.torn{
  background:var(--kraft);color:var(--ink);
  clip-path:var(--torn-both);
  padding:clamp(2rem,4vw,3.2rem) clamp(1.5rem,4vw,3rem);
}
.torn.forest{background:var(--surface);color:var(--kraft)}
.torn.orange{background:var(--orange);color:var(--ink)}
.torn-top{clip-path:var(--torn-top)}

/* ── interior compact block-header band (theme persists) ─ */
.pageband{position:relative;background:var(--pine);color:var(--kraft);overflow:hidden;
  border-bottom:5px solid var(--orange)}
.pageband::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 85% 20%,rgba(216,240,0,.14) 0,transparent 45%)}
.pageband .pb-inner{position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(2.4rem,6vw,4rem) var(--gutter) clamp(1.6rem,3vw,2.2rem)}
.pageband .kick-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.7rem}
.pageband h1{font-size:clamp(2.2rem,6vw,4rem);line-height:.92;
  text-shadow:4px 4px 0 rgba(20,23,15,.5);margin-bottom:.6rem}
.pageband .lead{color:rgba(232,220,192,.86);max-width:48ch}
.pageband .pb-tick{position:relative;z-index:2;background:var(--ink)}
.pageband .pb-tick .row{max-width:var(--wrap);margin-inline:auto;padding:.85rem var(--gutter);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,220,192,.62)}
.pageband .pb-tick b{color:var(--orange);font-weight:500}
.pageband .pb-tick a{color:var(--sky)}

/* ── flyer-stacked product cards (NOT a clean grid) ────── */
.flyerstack{display:flex;flex-direction:column;gap:clamp(1.6rem,3.5vw,2.6rem)}
.flyer{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,24rem);
  gap:clamp(1.2rem,3vw,2.4rem);align-items:center;
  background:var(--surface);color:var(--kraft);
  padding:clamp(1.5rem,3.5vw,2.6rem);
  clip-path:var(--torn-both);
  border-left:5px solid var(--orange);
}
.flyer:nth-child(odd){transform:rotate(-.7deg)}
.flyer:nth-child(even){transform:rotate(.7deg);grid-template-columns:minmax(15rem,24rem) minmax(0,1fr);border-left:none;border-right:5px solid var(--sky)}
.flyer:nth-child(even) .flyer-body{order:2}
.flyer:nth-child(even) .flyer-fig{order:1}
.flyer:hover{transform:rotate(0) translateY(-3px)}
.flyer .flyer-idx{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--orange);font-weight:500;text-transform:uppercase}
.flyer h3{margin:.5rem 0 .7rem;font-size:clamp(1.35rem,2.6vw,2rem)}
.flyer .tags{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--kraft-dim)}
.flyer-fig{overflow:hidden;background:var(--pine);border:3px solid var(--ink);clip-path:var(--torn-top)}
.flyer-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.flyer:hover .flyer-fig img{transform:scale(1.05)}
.flyer .go{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--disp);font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;color:var(--kraft);margin-top:1rem}
.flyer .go:hover{color:var(--orange)}

/* ── spray-circle price scribble (signature) ───────────── */
.pricetag{
  position:relative;display:inline-block;
  font-family:var(--disp);font-size:1.15rem;color:var(--ink);
  background:var(--orange);padding:.55em .95em;margin-top:.9rem;
  border-radius:50% 50% 48% 52%/54% 46% 52% 48%;
  transform:rotate(-4deg);box-shadow:3px 3px 0 rgba(20,23,15,.4);
}
.pricetag.big{font-size:1.9rem;padding:.5em .9em}

/* ── shop grid (rough torn tiles, distinct from home) ──── */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.2rem)}
@media(max-width:900px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shop-grid{grid-template-columns:1fr}}
.card{background:var(--surface);color:var(--kraft);overflow:hidden;
  display:flex;flex-direction:column;clip-path:var(--torn-top);
  border-bottom:5px solid var(--orange);transition:transform .18s ease}
.card:nth-child(even){border-bottom-color:var(--sky)}
.card:hover{transform:translateY(-4px)}
.card .fig{background:var(--pine);overflow:hidden}
.card .fig img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s ease}
.card:hover .fig img{transform:scale(1.05)}
.card .cbody{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card .cbody .tags{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kraft-dim)}
.card .price{font-family:var(--disp);color:var(--orange);margin-top:auto;font-size:1.15rem}

/* ── stat ledger (heft ranking) ────────────────────────── */
.ledger{background:var(--pine);color:var(--kraft);clip-path:var(--torn-both);
  padding:clamp(1.9rem,4vw,3.2rem)}
.ledger .eyebrow{color:var(--orange)}
.ledger h2{color:var(--kraft)}
.ledger-row{display:grid;grid-template-columns:2.2rem 1fr 8rem 5rem;gap:1rem;align-items:center;
  padding:1rem 0;border-top:2px dashed rgba(232,220,192,.2)}
.ledger-row .n{font-family:var(--mono);font-size:.72rem;color:rgba(232,220,192,.55)}
.ledger-row .nm{font-family:var(--disp);font-size:1rem;text-transform:uppercase}
.ledger-row .bar{height:8px;background:rgba(232,220,192,.16);overflow:hidden}
.ledger-row .bar i{display:block;height:100%;background:var(--orange)}
.ledger-row .val{font-family:var(--mono);font-weight:500;text-align:right;font-size:.9rem;color:var(--orange)}
@media(max-width:640px){.ledger-row{grid-template-columns:1.8rem 1fr 4rem}.ledger-row .bar{display:none}}

/* ── supporting tiles (nutra / ebook) ──────────────────── */
.tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.5vw,1.8rem)}
@media(max-width:620px){.tile-grid{grid-template-columns:1fr}}
.tile{background:var(--surface);color:var(--kraft);padding:1.7rem 1.7rem;display:flex;flex-direction:column;gap:.55rem;
  clip-path:var(--torn-top);border-bottom:4px solid var(--sky)}
.tile .kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);font-weight:500}
.tile.fuel{background:var(--pine);border-bottom-color:var(--orange)}
.tile.fuel .kicker{color:var(--orange)}
.tile .price{font-family:var(--disp);color:var(--orange);margin-top:.4rem;font-size:1.1rem}
.tile .go{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--disp);font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;color:var(--kraft);align-self:flex-start;margin-top:.3rem}
.tile .go:hover{color:var(--orange)}

/* ── trail journal cards ───────────────────────────────── */
.trail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,3vw,2.2rem)}
@media(max-width:820px){.trail-grid{grid-template-columns:1fr}}
.tcard{display:flex;flex-direction:column;gap:.9rem;background:var(--surface);
  clip-path:var(--torn-top);padding-bottom:1.5rem;border-bottom:4px solid var(--orange)}
.tcard:nth-child(even){border-bottom-color:var(--sky)}
.tcard .tfig{overflow:hidden;background:var(--pine)}
.tcard .tfig img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.tcard:hover .tfig img{transform:scale(1.05)}
.tcard .tmeta{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);padding:0 1.3rem}
.tcard h3{font-size:1.15rem;padding:0 1.3rem}
.tcard .go{font-family:var(--disp);font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;color:var(--kraft);padding:0 1.3rem;display:inline-flex;gap:.4rem;align-items:center}
.tcard:hover .go{color:var(--orange)}

/* ── editorial split (about / pdp) ─────────────────────── */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,5vw,3.5rem);align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.split .fig{overflow:hidden;background:var(--pine);border:3px solid var(--ink);clip-path:var(--torn-top)}
.split .fig img{width:100%;object-fit:cover}

/* ── PDP specifics ─────────────────────────────────────── */
.pdp-fig{background:var(--pine);overflow:hidden;border:4px solid var(--ink);clip-path:var(--torn-both)}
.pdp-fig img{width:100%;aspect-ratio:1/1;object-fit:cover}
.pdp .price{font-family:var(--disp);color:var(--orange);font-size:1.6rem}
.spec-list{list-style:none;display:flex;flex-direction:column}
.spec-list li{display:flex;gap:.9rem;padding:.8rem 0;border-top:2px dashed rgba(232,220,192,.2);font-size:.98rem;color:var(--kraft-dim)}
.spec-list li::before{content:"▸";color:var(--orange);font-family:var(--mono)}

/* ── article body ──────────────────────────────────────── */
.article{max-width:44rem;margin-inline:auto}
.article .lead{margin:1.2rem 0 2rem}
.article p{margin-bottom:1.3rem;max-width:none;color:var(--kraft-dim)}
.article .hero-img{overflow:hidden;background:var(--pine);border:3px solid var(--ink);clip-path:var(--torn-both);margin-bottom:2rem}
.article h2{color:var(--kraft);margin:2rem 0 1rem;font-size:clamp(1.4rem,3vw,2rem)}

/* ── cart ledger rows ──────────────────────────────────── */
.cart-line{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1.1rem 0;border-top:2px dashed rgba(232,220,192,.22);font-family:var(--mono);font-size:.94rem}
.cart-total{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1.2rem 0;border-top:3px solid var(--orange);font-family:var(--disp);text-transform:uppercase;font-size:1.2rem;color:var(--orange)}

/* ── forms ─────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--kraft-dim)}
.field input,.field textarea{
  font-family:var(--body);font-size:1rem;padding:.85rem 1rem;
  background:var(--pine);border:2px solid rgba(232,220,192,.25);color:var(--kraft);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}

/* ── footer ────────────────────────────────────────────── */
.site-foot{background:var(--ink);color:var(--kraft);margin-top:clamp(3rem,7vw,5rem);
  border-top:5px solid var(--orange)}
.site-foot .inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(2.5rem,5vw,4rem) var(--gutter)}
.site-foot .top{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.site-foot .brand{color:var(--orange);font-size:2rem;padding:0}
.site-foot .brand .dot{color:var(--kraft)}
.site-foot nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.site-foot nav a{font-family:var(--disp);font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;color:rgba(232,220,192,.72)}
.site-foot nav a:hover{color:var(--orange)}
.site-foot .coords{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,220,192,.5);margin-top:2.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:2px dashed rgba(232,220,192,.18);padding-top:1.4rem}

/* ============================================================
   PDP DEEP — full-depth product detail (v2)
   torn gallery · DM-mono spec ledger · trust · static reviews
   ============================================================ */

/* ── gallery: main torn frame + two supporting torn thumbs (no JS) ── */
.pdp-gallery{display:flex;flex-direction:column;gap:clamp(.8rem,2vw,1.2rem)}
.pdp-gallery .g-main{background:var(--pine);overflow:hidden;border:4px solid var(--ink);
  clip-path:var(--torn-both)}
.pdp-gallery .g-main img{width:100%;aspect-ratio:1/1;object-fit:cover}
.pdp-gallery .g-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2vw,1.2rem)}
.pdp-gallery .g-thumb{background:var(--pine);overflow:hidden;border:3px solid var(--ink);
  clip-path:var(--torn-top)}
.pdp-gallery .g-thumb:nth-child(2){border-color:var(--sky)}
.pdp-gallery .g-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.pdp-gallery .g-thumb:hover img{transform:scale(1.04)}

/* ── buy column extras ─────────────────────────────────── */
.pdp-buy .lead{margin-top:.2rem}
.flight-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0}
.flight-badges .fb{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--kraft);border:2px solid rgba(232,220,192,.3);
  padding:.4rem .6rem;line-height:1.15}
.flight-badges .fb b{color:var(--orange);font-weight:500}

/* ── spec ledger table (DM Mono) ───────────────────────── */
.spec-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.87rem}
.spec-table th,.spec-table td{text-align:left;padding:.8rem .5rem;vertical-align:top;
  border-top:2px dashed rgba(232,220,192,.2)}
.spec-table th{color:var(--kraft-dim);font-weight:400;letter-spacing:.09em;
  text-transform:uppercase;width:44%}
.spec-table td{color:var(--kraft)}
.spec-table td b{color:var(--orange);font-weight:500}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:none}

/* ── info panels: included / materials ─────────────────── */
.pdp-panels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem);align-items:start}
@media(max-width:720px){.pdp-panels{grid-template-columns:1fr}}
.pdp-panels .torn h3{margin-bottom:1rem;font-size:clamp(1.2rem,2.2vw,1.55rem)}
.checklist{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.checklist li{display:flex;gap:.7rem;font-size:.98rem;line-height:1.4}
.checklist li::before{content:"▸";font-family:var(--mono);color:var(--orange);font-weight:700}
.torn.forest .checklist li::before{color:var(--orange)}

/* ── trust row ─────────────────────────────────────────── */
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,1.5rem)}
@media(max-width:720px){.trust-row{grid-template-columns:repeat(2,1fr)}}
.trust{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem 1.2rem 1.4rem;
  background:var(--surface);clip-path:var(--torn-top);border-bottom:3px solid var(--orange)}
.trust:nth-child(even){border-bottom-color:var(--sky)}
.trust .t-ico{font-family:var(--disp);color:var(--orange);font-size:1.5rem;line-height:1}
.trust .t-lab{font-family:var(--disp);font-size:.8rem;letter-spacing:.02em;text-transform:uppercase;color:var(--kraft)}
.trust .t-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ── static reviews (CSS/unicode stars, no JS) ─────────── */
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem)}
@media(max-width:720px){.review-grid{grid-template-columns:1fr}}
.review{background:var(--surface);color:var(--kraft);clip-path:var(--torn-both);
  padding:clamp(1.6rem,3vw,2.3rem);border-left:5px solid var(--orange)}
.review:nth-child(even){border-left:none;border-right:5px solid var(--sky)}
.stars{font-size:1.1rem;letter-spacing:.14em;color:var(--orange);line-height:1}
.stars .off{color:rgba(232,220,192,.26)}
.review blockquote{font-size:1.06rem;line-height:1.5;color:var(--kraft);margin:.9rem 0 1.1rem;max-width:none}
.review .rv-who{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kraft-dim)}
.review .rv-who b{color:var(--orange);font-weight:500}

/* ── accessibility / motion floor ──────────────────────── */
a:focus-visible,.btn:focus-visible,.nav a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--orange);outline-offset:3px}
@keyframes sprayIn{from{opacity:0;transform:translateY(16px) rotate(-1deg)}to{opacity:1;transform:none}}
.rise{animation:sprayIn .7s cubic-bezier(.2,.7,.2,1) both}
.rise-2{animation-delay:.1s}
.rise-3{animation-delay:.2s}
@media(prefers-reduced-motion:reduce){
  /* torn edges / clip-paths stay; motion stops */
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .flyer:nth-child(odd),.flyer:nth-child(even),.pricetag{transform:none!important}
}

/* ============================================================
   COMMERCE v3 — CSS-only store realism (no JS)
   gallery switch · compare-at + stock · variant swatches · FBT · FAQ
   ============================================================ */

/* ── CSS-only gallery: hidden radios drive main image + thumbs ── */
.pdp-gallery.gal{position:relative}
.gal-radio{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.gal .g-main{position:relative}
.gal .g-main .gv{display:none}
.gal-radio:nth-of-type(1):checked ~ .g-main .gv:nth-child(1),
.gal-radio:nth-of-type(2):checked ~ .g-main .gv:nth-child(2),
.gal-radio:nth-of-type(3):checked ~ .g-main .gv:nth-child(3){display:block}
.gal .g-thumbs{grid-template-columns:repeat(3,1fr)}
.gal .g-thumb{cursor:pointer;padding:0;display:block}
/* selected thumb = orange ring */
.gal-radio:nth-of-type(1):checked ~ .g-thumbs .g-thumb:nth-child(1),
.gal-radio:nth-of-type(2):checked ~ .g-thumbs .g-thumb:nth-child(2),
.gal-radio:nth-of-type(3):checked ~ .g-thumbs .g-thumb:nth-child(3){
  outline:3px solid var(--orange);outline-offset:2px}
/* keyboard focus lands on the matching thumb */
.gal-radio:nth-of-type(1):focus-visible ~ .g-thumbs .g-thumb:nth-child(1),
.gal-radio:nth-of-type(2):focus-visible ~ .g-thumbs .g-thumb:nth-child(2),
.gal-radio:nth-of-type(3):focus-visible ~ .g-thumbs .g-thumb:nth-child(3){
  outline:3px solid var(--sky);outline-offset:3px}

/* ── compare-at price + save scribble + stock badge ─────── */
.price-block{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.1rem 0 .1rem}
.price-block .price-now{font-family:var(--disp);color:var(--orange);font-size:1.6rem;line-height:1}
.price-block .price-was{font-family:var(--mono);color:var(--muted);font-size:1rem;
  text-decoration:line-through;text-decoration-thickness:2px}
.price-block .price-save{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);background:var(--orange);padding:.32rem .55rem;
  transform:rotate(-2deg);box-shadow:2px 2px 0 rgba(20,23,15,.35)}
.stock-badge{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.42rem .75rem;border:2px solid rgba(232,220,192,.3);color:var(--kraft)}
.stock-badge::before{content:"";width:.55rem;height:.55rem;border-radius:50%;
  background:#8FBF6A;box-shadow:0 0 0 3px rgba(143,191,106,.22)}
.stock-badge.low{border-color:var(--orange);color:var(--orange)}
.stock-badge.low::before{background:var(--orange);box-shadow:0 0 0 3px rgba(216,240,0,.22)}

/* ── variant swatches (radio + label, first selected) ──── */
.variant{margin:.1rem 0}
.variant + .variant{margin-top:.9rem}
.variant .v-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kraft-dim);display:block;margin-bottom:.55rem}
.swatches{display:flex;gap:.5rem;flex-wrap:wrap}
.swatch-radio{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;
  clip:rect(0 0 0 0);margin:-1px}
.swatch{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--kraft);background:var(--pine);border:2px solid rgba(232,220,192,.28);
  padding:.5rem .8rem;transition:transform .12s ease,border-color .12s ease}
.swatch:hover{transform:translateY(-2px);border-color:var(--orange)}
.swatch .dot{width:.85rem;height:.85rem;border-radius:50%;
  border:1px solid rgba(20,23,15,.45);display:inline-block;flex:none}
.swatch-radio:checked + .swatch{background:var(--orange);color:var(--ink);
  border-color:var(--ink);box-shadow:3px 3px 0 rgba(20,23,15,.35)}
.swatch-radio:focus-visible + .swatch{outline:3px solid var(--orange);outline-offset:3px}

/* ── frequently bought together ────────────────────────── */
.fbt{background:var(--pine);color:var(--kraft);clip-path:var(--torn-both);
  padding:clamp(1.9rem,4vw,3rem)}
.fbt .eyebrow{color:var(--orange)}
.fbt h2{color:var(--kraft)}
.fbt-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  gap:clamp(.7rem,2vw,1.3rem);align-items:stretch;margin-top:1.4rem}
.fbt-item{display:flex;flex-direction:column;gap:.5rem;background:var(--surface);color:var(--kraft);
  clip-path:var(--torn-top);padding:1rem;border-bottom:4px solid var(--orange);transition:transform .16s ease}
.fbt-item:nth-child(3){border-bottom-color:var(--sky)}
.fbt-item:hover{transform:translateY(-3px)}
.fbt-item img{width:100%;aspect-ratio:1/1;object-fit:cover;border:2px solid var(--ink);background:var(--pine)}
.fbt-item .fbt-nm{font-family:var(--disp);font-size:.9rem;text-transform:uppercase;line-height:1.06}
.fbt-item .fbt-pr{font-family:var(--mono);color:var(--orange);font-size:.82rem;margin-top:auto}
.fbt-plus{font-family:var(--disp);color:var(--orange);font-size:1.5rem;align-self:center}
.fbt-foot{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap;
  margin-top:1.5rem;border-top:2px dashed rgba(232,220,192,.24);padding-top:1.3rem}
.fbt-sub{font-family:var(--mono);font-size:.95rem;letter-spacing:.03em;color:var(--kraft-dim)}
.fbt-sub b{font-family:var(--disp);color:var(--orange);font-size:1.4rem;margin-left:.4rem}
@media(max-width:760px){
  .fbt-row{grid-template-columns:1fr;justify-items:stretch}
  .fbt-plus{transform:rotate(90deg);justify-self:center}
}

/* ── FAQ accordion (native <details>) ──────────────────── */
.faq{display:flex;flex-direction:column;gap:.9rem}
.faq-item{background:var(--surface);color:var(--kraft);clip-path:var(--torn-top);
  border-left:5px solid var(--orange)}
.faq-item:nth-child(even){border-left-color:var(--sky)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  gap:1rem;align-items:center;padding:1.15rem clamp(1.2rem,3vw,1.8rem);
  font-family:var(--disp);font-size:clamp(1rem,1.6vw,1.15rem);text-transform:uppercase;
  letter-spacing:.01em;line-height:1.12}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--disp);color:var(--orange);
  font-size:1.5rem;line-height:1;flex:none}
.faq-item[open] summary::after{content:"\2013"}
.faq-a{padding:0 clamp(1.2rem,3vw,1.8rem) 1.35rem}
.faq-a p{max-width:64ch;color:var(--kraft-dim)}

/* ── cart / bag: realistic line items + summary ────────── */
.cart-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media(max-width:860px){.cart-grid{grid-template-columns:1fr}}
.bag-item{display:grid;grid-template-columns:88px 1fr auto;gap:1.1rem;align-items:start;
  padding:1.3rem 0;border-top:2px dashed rgba(232,220,192,.22)}
.bag-item:first-child{border-top:none;padding-top:0}
.bag-thumb{background:var(--pine);border:3px solid var(--ink);clip-path:var(--torn-top);overflow:hidden}
.bag-thumb img{width:100%;aspect-ratio:1/1;object-fit:cover}
.bag-meta .bag-nm{font-family:var(--disp);font-size:1.02rem;text-transform:uppercase;line-height:1.06}
.bag-meta .bag-var{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--kraft-dim);margin-top:.35rem}
.bag-meta .bag-rm{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sky);margin-top:.55rem;display:inline-block}
.bag-meta .bag-rm:hover{color:var(--orange)}
.qty{display:inline-flex;align-items:stretch;border:2px solid rgba(232,220,192,.28);margin-top:.65rem;width:max-content}
.qty .qstep{font-family:var(--disp);background:transparent;color:var(--kraft);border:none;cursor:pointer;
  padding:.35rem .7rem;font-size:1rem;line-height:1}
.qty .qstep:hover{background:var(--orange);color:var(--ink)}
.qty .qnum{font-family:var(--mono);font-size:.9rem;padding:.35rem .85rem;min-width:2.6rem;text-align:center;
  border-inline:2px solid rgba(232,220,192,.28);display:flex;align-items:center;justify-content:center}
.bag-price{font-family:var(--disp);color:var(--orange);font-size:1.05rem;text-align:right;white-space:nowrap}
.bag-price .was{display:block;font-family:var(--mono);font-size:.72rem;color:var(--muted);
  text-decoration:line-through;text-decoration-thickness:2px;margin-top:.25rem}
/* promo */
.promo{display:flex;gap:.6rem;margin-top:1.8rem;flex-wrap:wrap}
.promo input{flex:1;min-width:12rem;font-family:var(--mono);font-size:.9rem;padding:.78rem .95rem;
  background:var(--pine);border:2px solid rgba(232,220,192,.25);color:var(--kraft)}
.promo input::placeholder{color:var(--muted)}
.promo input:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
.promo .btn{white-space:nowrap}
/* order summary rows (inside .ledger) */
.sumline{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.9rem;
  padding:.7rem 0;color:var(--kraft-dim);border-top:2px dashed rgba(232,220,192,.18)}
.sumline:first-of-type{border-top:none}
.sumline b{color:var(--kraft);font-weight:500}
.sumline.save,.sumline.save b{color:var(--orange)}
.sumtotal{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  font-family:var(--disp);text-transform:uppercase;font-size:1.3rem;color:var(--orange);
  border-top:3px solid var(--orange);padding-top:1rem;margin-top:.6rem}
/* upsell row */
.upsell{display:flex;gap:1rem;align-items:center;background:var(--surface);color:var(--kraft);
  clip-path:var(--torn-top);border-bottom:4px solid var(--orange);padding:1rem 1.1rem;margin-top:1.6rem}
.upsell img{width:64px;height:64px;object-fit:cover;border:2px solid var(--ink);background:var(--pine);flex:none}
.upsell .up-body{flex:1;min-width:0}
.upsell .up-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.upsell .up-nm{font-family:var(--disp);font-size:.92rem;text-transform:uppercase;line-height:1.1;margin:.15rem 0}
.upsell .up-pr{font-family:var(--mono);font-size:.78rem;color:var(--kraft-dim)}
.upsell .up-add{font-family:var(--disp);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink);background:var(--orange);padding:.55rem .8rem;box-shadow:3px 3px 0 var(--ink);
  flex:none;white-space:nowrap;transition:transform .12s ease}
.upsell .up-add:hover{transform:translate(-2px,-2px)}

/* ============================================================
   TRUST LAYER v4 — rating summary · seals · press · payment ·
   support · signature "disc throw" interaction (CSS only, no JS)
   ============================================================ */

/* ── rating summary (average · stars · count · distribution) ── */
.rating-summary{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,2.8rem);
  align-items:center;background:var(--surface);color:var(--kraft);clip-path:var(--torn-both);
  border-left:5px solid var(--orange);padding:clamp(1.7rem,3.6vw,2.6rem)}
@media(max-width:620px){.rating-summary{grid-template-columns:1fr;text-align:center}}
.rating-score{display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding-right:clamp(0rem,2vw,1.6rem)}
@media(min-width:621px){.rating-score{border-right:2px dashed rgba(232,220,192,.24)}}
.rating-score .num{font-family:var(--disp);font-size:clamp(2.8rem,7vw,4rem);color:var(--orange);line-height:.86}
.rating-score .num small{font-family:var(--mono);font-size:.9rem;color:var(--kraft-dim);letter-spacing:.04em}
.rating-score .count{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kraft-dim)}
.rating-dist{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.dist-row{display:grid;grid-template-columns:3.1rem 1fr 2.9rem;gap:.7rem;align-items:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--kraft-dim)}
.dist-row .dstar{color:var(--orange);white-space:nowrap}
.dist-row .bar{height:9px;background:rgba(232,220,192,.16);overflow:hidden}
.dist-row .bar i{display:block;height:100%;background:var(--orange)}
.dist-row .pct{text-align:right;color:var(--kraft)}

/* ── verified-buyer badge on reviews ───────────────────── */
.rv-verified{display:inline-flex;align-items:center;gap:.34rem;margin-bottom:.55rem;
  font-family:var(--mono);font-weight:500;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);background:var(--orange);padding:.28rem .5rem;line-height:1}
.rv-verified svg{width:.8rem;height:.8rem;display:block}
.review .rv-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}

/* ── niche trust seals (inline-SVG rosettes) ───────────── */
.seal-row{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,4vw,2.4rem);justify-content:center;align-items:flex-start;
  background:var(--pine);clip-path:var(--torn-both);padding:clamp(1.7rem,3.6vw,2.6rem)}
.seal{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;width:9rem}
.seal svg{width:66px;height:66px;display:block}
.seal .seal-cap{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kraft-dim);line-height:1.35}
.seal .seal-cap b{color:var(--orange);font-weight:500;display:block;letter-spacing:.08em}

/* ── press "as seen in" strip ──────────────────────────── */
.press-strip{background:var(--ink);border-top:2px dashed rgba(232,220,192,.18);
  border-bottom:2px dashed rgba(232,220,192,.18)}
.press-strip .pr-inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(1.5rem,3.5vw,2.4rem) var(--gutter);
  display:flex;flex-direction:column;gap:1.2rem;align-items:center}
.press-lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sky)}
.press-marks{display:flex;flex-wrap:wrap;gap:clamp(1.6rem,5vw,3.4rem);justify-content:center;align-items:center}
.press-marks svg{height:30px;width:auto;display:block;opacity:.78;transition:opacity .16s ease}
.press-marks a:hover svg,.press-marks .pr-mark:hover{opacity:1}
.press-marks .pr-mark{display:block}

/* ── payment marks (inline SVG) ────────────────────────── */
.pay-row{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.pay-row .pay{width:44px;height:28px;display:block;border-radius:4px;background:var(--kraft);
  border:1px solid rgba(20,23,15,.25);padding:0}
.pay-row .pay svg{width:100%;height:100%;display:block}
.pay-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kraft-dim)}

/* ── footer columns + support links + footer payment ───── */
.site-foot .foot-links{display:flex;gap:clamp(2rem,6vw,4.5rem);flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:.7rem}
.foot-col .foot-col-h{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sky);margin-bottom:.2rem}
.foot-col a{font-family:var(--disp);font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;color:rgba(232,220,192,.72)}
.foot-col a:hover{color:var(--orange)}
.site-foot .foot-pay{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  margin-top:2rem;border-top:2px dashed rgba(232,220,192,.18);padding-top:1.4rem}

/* ── support-page bits ─────────────────────────────────── */
.support-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,3vw,2rem)}
@media(max-width:720px){.support-grid{grid-template-columns:1fr}}
.support-links{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.4rem}
.chip{font-family:var(--disp);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--kraft);
  border:2px solid rgba(232,220,192,.3);padding:.55rem .85rem;transition:border-color .12s ease,color .12s ease}
.chip:hover{border-color:var(--orange);color:var(--orange)}
.chip[aria-current="page"]{background:var(--orange);color:var(--ink);border-color:var(--ink)}

/* ── SIGNATURE INTERACTION — "give it a throw" fairway ──── */
.fairway{position:relative;overflow:hidden;background:var(--pine);color:var(--kraft);
  clip-path:var(--torn-both);border-left:5px solid var(--orange);
  padding:clamp(1.8rem,4vw,2.8rem)}
.fairway .fw-copy{position:relative;z-index:2;max-width:34ch}
.fairway .fw-copy .eyebrow{color:var(--orange)}
.flightlane{position:relative;height:150px;margin-top:1.3rem}
.flightlane .lane-svg{position:absolute;inset:0;width:100%;height:100%}
.flightlane .lane-svg path{stroke:rgba(232,220,192,.34);stroke-width:2;fill:none;stroke-dasharray:5 7}
.flightlane .lane-basket{position:absolute;right:2%;top:26%;width:46px;height:70px}
.flightlane .lane-basket *{stroke:var(--sky);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.flightlane .tee-mark{position:absolute;left:2%;top:70%;width:36px;height:8px;
  background:rgba(232,220,192,.28);border-radius:2px}
.flightlane .disc{position:absolute;left:3%;top:62%;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,var(--orange),#a7bd00 72%);
  border:2px solid var(--ink);box-shadow:2px 3px 0 rgba(20,23,15,.4);transform-origin:center}
.flightlane .disc::after{content:"";position:absolute;inset:5px;border-radius:50%;
  border:2px solid rgba(20,23,15,.32)}
.flightlane .throw-hint{position:absolute;right:2%;bottom:2%;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sky);z-index:2}
@keyframes discfly{
  0%{left:3%;top:62%;transform:rotate(0deg) scale(.92)}
  18%{transform:rotate(320deg) scale(1)}
  52%{top:8%}
  82%{transform:rotate(1440deg)}
  100%{left:84%;top:47%;transform:rotate(1980deg) scale(1)}
}
.fairway:hover .disc,.fairway:focus-within .disc{
  animation:discfly 1.5s cubic-bezier(.32,.08,.28,1) forwards}
@media(prefers-reduced-motion:reduce){
  .fairway:hover .disc,.fairway:focus-within .disc{animation:none}
}

/* ── multi-column chart (size guide) ───────────────────── */
.chart-wrap{overflow-x:auto}
.chart{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.84rem;min-width:34rem}
.chart th,.chart td{text-align:left;padding:.75rem .7rem;vertical-align:top;
  border-top:2px dashed rgba(232,220,192,.2)}
.chart thead th{color:var(--orange);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  font-size:.7rem;border-top:none;border-bottom:2px solid rgba(216,240,0,.4)}
.chart td{color:var(--kraft-dim)}
.chart td b{color:var(--orange);font-weight:500}
.chart td:first-child{color:var(--kraft)}
.chart tbody tr:hover{background:rgba(232,220,192,.05)}

/* LP-431 mobile fix: collapse rotated 2-col flyer cards to 1 col so price/idx badges don't overflow viewport (<=640px) */
@media(max-width:640px){
  .flyer,
  .flyer:nth-child(even){grid-template-columns:1fr}
  .flyer:nth-child(odd),
  .flyer:nth-child(even){transform:none}
}