/*
 * Stumble Juice — the shop placeholder (/shop) and the product pages
 * (/products/<key>).
 */
/* ===== shop ===== */
.shop-head{padding-block:clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px)}
.shop-head h1{font-size:clamp(44px, 7vw, 100px); letter-spacing:-.02em; margin-bottom:18px; max-width:14ch}
.shop-head h1 em{font-style:normal; color:var(--orange); display:block}
.shop-head .lede{max-width:54ch}
.status{
  margin-top:22px; display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:var(--r);
  background:var(--black-2); border:2px dashed var(--orange); font-weight:500; font-size:15px; color:var(--bone);
}
.status::before{content:""; width:12px; height:12px; background:var(--hazard); flex:none}

.shop{padding-top:0}
.shop-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px}
.item{
  background:var(--black); border:3px solid var(--orange); border-radius:var(--r); padding:0 0 20px;
  display:flex; flex-direction:column; gap:14px; scroll-margin-top:100px; overflow:hidden;
}
.item > :not(.card-code){margin-inline:18px}
.item:target{box-shadow:8px 8px 0 var(--orange)}
.item .art{background:var(--black-2); border:1px solid var(--black-3); border-radius:4px; padding:10px}
.item .art svg{width:100%; height:auto; aspect-ratio:1}
.item .name{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.item h3{font-size:clamp(20px, 1.9vw, 24px)}
.item .price{font-size:20px}
.item p.desc{font-size:14.5px; color:var(--muted)}
.opt{display:grid; gap:8px}
.opt .lbl{font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange)}
.opt .lbl output{color:var(--bone); letter-spacing:0; text-transform:none; font-family:var(--sans); font-weight:500; margin-left:8px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  font:inherit; font-weight:600; font-size:14px; line-height:1; padding:9px 12px; border-radius:4px; border:2px solid var(--line);
  background:var(--black); color:var(--bone); cursor:pointer; min-width:44px; transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover{transform:translateY(-1px); border-color:var(--orange)}
.chip[aria-pressed="true"]{background:var(--orange); border-color:var(--orange); color:var(--black)}
.chip:focus-visible{outline:3px solid var(--bone); outline-offset:2px}
.chip.sw{display:inline-flex; align-items:center; gap:7px}
.chip.sw i{width:14px; height:14px; border:1.5px solid var(--bone); display:inline-block}
.chip.sw[aria-pressed="true"] i{border-color:var(--black)}
.chip.one{cursor:default; border-style:dashed; color:var(--muted)}
.chip.one:hover{transform:none; border-color:var(--line)}
.item .cart{margin-top:auto; display:grid; gap:10px}
.item .btn{justify-content:center; width:100%}
.note{
  display:none; background:var(--black-2); border:2px dashed var(--orange); border-radius:var(--r); padding:12px 14px; font-size:14.5px; color:var(--bone);
}
.note.show{display:block}
.note b{color:var(--orange)}
/* colour choice on the garments */
[data-color="orange"] .tee-body{fill:var(--orange); stroke:var(--black)}
[data-color="orange"] .tee-seam{stroke:var(--black)}
[data-color="orange"] .tee-print{color:var(--black)}
[data-color="orange"] .tee-txt{fill:var(--black)}
[data-color="bone"] .tee-body{fill:var(--bone); stroke:var(--black)}
[data-color="bone"] .tee-seam{stroke:var(--black)}
[data-color="bone"] .tee-print{color:var(--black)}
[data-color="bone"] .tee-txt{fill:#B84400}
[data-color="orange"] .hood-body{fill:var(--orange); stroke:var(--black)}
[data-color="orange"] .hood-line{stroke:var(--black)}
[data-color="orange"] .hood-print{color:var(--black)}
[data-color="orange"] .hood-txt{fill:var(--black)}
@media (min-width:981px){
  .item.wide{grid-column:span 3}
}
@media (max-width:980px){ .shop-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:600px){ .shop-grid{grid-template-columns:minmax(0,1fr); gap:16px} .item > :not(.card-code){margin-inline:14px} }

/* good to know */
.facts{background:var(--black-2); border-top:1px solid var(--black-3)}
.facts-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:clamp(28px, 4vw, 48px)}
.fact{background:var(--black); border:2px solid var(--line); border-radius:var(--r); padding:20px 20px 22px; display:grid; gap:8px; align-content:start; position:relative}
.fact svg{width:34px; height:34px; color:var(--orange); margin-bottom:4px}
.fact h3{font-size:19px}
.fact p{font-size:15px; color:var(--muted)}
.fact .ex{
  position:absolute; top:14px; right:14px; font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange); border:1.5px dashed var(--orange); border-radius:3px; padding:4px 8px; line-height:1;
}
.pay{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.pay span{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.06em; border:2px solid var(--bone); border-radius:3px; padding:6px 9px; line-height:1}
.seller{grid-column:1/-1; background:var(--orange); border-color:var(--orange); color:var(--black); display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center}
.seller svg{color:var(--black); width:48px; height:48px; margin:0}
.seller p{color:var(--black)}
.seller a{color:var(--black); font-weight:700; text-decoration:underline; text-decoration-thickness:2px}
@media (max-width:900px){ .facts-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:560px){ .facts-grid{grid-template-columns:minmax(0,1fr)} .seller{grid-template-columns:minmax(0,1fr)} }

/* colour swatches */
.chip.sw i.sw-black{background:var(--black)}
.chip.sw i.sw-orange{background:var(--orange)}
.chip.sw i.sw-bone{background:var(--bone)}

/* ===== product pages (/products/<key>) ===== */
.item a.art{display:block}
.item h3 a{text-decoration:none}
.item h3 a:hover{text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:3px}
.pdp-head{padding-block:clamp(24px, 4vw, 48px) clamp(48px, 6vw, 80px)}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--muted); margin-bottom:clamp(20px, 3vw, 36px)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline; text-decoration-color:var(--orange)}
.crumbs [aria-current]{color:var(--bone); font-weight:500}
.pdp{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px, 5vw, 72px); align-items:start}
.pdp-art{margin:0; background:var(--black-2); border:4px solid var(--orange); border-radius:var(--r); overflow:hidden; box-shadow:12px 12px 0 0 #3A1A06; transform:rotate(-1deg)}
.pdp-art .card-code{font-size:15px; padding:10px 18px}
.pdp-art svg{width:100%; height:auto; aspect-ratio:1; padding:clamp(12px, 3vw, 36px)}
.pdp-body{display:grid; gap:16px; align-content:start}
.pdp-body .eyebrow{margin-bottom:0}
.pdp-body h1{font-size:clamp(40px, 5.5vw, 72px)}
.pdp-body .price{font-size:28px}
.details{margin:0; padding:0; list-style:none; display:grid; gap:8px; border-block:1px solid var(--line); padding-block:16px}
.details li{display:flex; gap:12px; align-items:baseline}
.details li::before{content:""; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:10px solid var(--orange); flex:none; transform:translateY(-1px)}
.pdp .cart{display:grid; gap:10px; margin-top:6px}
.pdp .cart .btn{justify-content:center}
.pdp > .pdp-body > .btn{justify-self:start}
@media (max-width:860px){ .pdp{grid-template-columns:minmax(0,1fr)} .pdp-art{transform:none; box-shadow:6px 6px 0 0 #3A1A06} }

.interest{background:var(--orange); color:var(--black); padding-top:0}
.interest .hazard-bar{height:14px; margin-bottom:clamp(54px, 7vw, 100px); background:repeating-linear-gradient(-45deg, var(--black) 0 14px, var(--orange) 14px 28px)}
.interest .eyebrow{color:var(--black)}
.interest .eyebrow::before{background:var(--black)}
.interest .lede{color:var(--black); margin-top:18px}
.interest-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 5vw, 72px); align-items:center}
.levels{display:grid; gap:12px}
.level{
  font:inherit; text-align:left; cursor:pointer; display:grid; gap:4px; padding:18px 22px; border-radius:var(--r);
  border:3px solid var(--black); background:transparent; color:var(--black); transition:transform .18s ease, background .18s ease, color .18s ease;
}
.level b{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:.04em; text-transform:uppercase}
.level span{font-size:15px}
.level:hover{transform:translateY(-2px) rotate(-.6deg); background:var(--orange-hi)}
.level:focus-visible{outline:3px solid var(--bone); outline-offset:3px}
.level[aria-pressed="true"]{background:var(--black); color:var(--orange)}
.level[aria-pressed="true"] span{color:var(--bone)}
.thanks{font-family:var(--display); font-weight:800; color:var(--black); margin-top:4px; text-transform:uppercase; letter-spacing:.06em}
@media (max-width:860px){ .interest-grid{grid-template-columns:minmax(0,1fr)} }
.more{background:var(--black-2)}