/*
 * Stumble Lemonade — the shop placeholder (/shop) and the product pages
 * (/products/<key>).
 */
/* ===== shop ===== */
.shop-head{background:var(--peach); border-top:var(--line); padding-block:clamp(64px, 8vw, 110px) clamp(32px, 4vw, 52px)}
.shop-head h1{font-size:clamp(42px, 6.6vw, 92px); line-height:1.06; letter-spacing:-.03em; margin-bottom:18px; max-width:16ch}
.shop-head h1 em{font-style:normal; background:var(--ink); color:var(--cream); padding:0 .15em; border-radius:8px; box-decoration-break:clone; -webkit-box-decoration-break:clone; line-height:1.12}
.shop-head .lede{max-width:52ch; color:var(--ink)}
.status{
  margin-top:24px; display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px;
  background:var(--cream); border:2px dashed var(--ink); font-weight:500; font-size:15px; color:var(--ink);
}
.status::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--orange-deep); flex:none}

.shop{background:var(--peach); padding-top:0}
.shop-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(18px, 2vw, 26px)}
.item{
  background:var(--cream); border:var(--line); border-radius:var(--r); padding:16px 16px 18px; box-shadow:6px 6px 0 var(--ink);
  display:flex; flex-direction:column; gap:14px; scroll-margin-top:96px;
}
.item:target{box-shadow:8px 8px 0 var(--orange-deep)}
.item a.art{display:block; background:var(--peach-2); border:2px solid var(--ink); border-radius:10px; padding:8px}
.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(21px, 2vw, 25px); max-width:none}
.item h3 a{text-decoration:none}
.item h3 a:hover{text-decoration:underline; text-decoration-thickness:3px}
.item .price{font-size:22px; background:var(--ink); color:var(--cream); padding:4px 10px; border-radius:8px; transform:rotate(3deg)}
.item p.desc{font-size:14.5px; color:var(--ink-2)}
.opt{display:grid; gap:8px}
.opt .lbl{font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.opt .lbl output{color:var(--ink-2); letter-spacing:0; text-transform:none; font-family:var(--sans); font-weight:500; margin-left:6px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  font:inherit; font-weight:500; font-size:14px; line-height:1; padding:9px 12px; border-radius:8px; border:2px solid var(--ink);
  background:var(--cream); color:var(--ink); cursor:pointer; min-width:44px; transition:transform .15s ease, background .15s ease, color .15s ease;
}
.chip:hover{transform:translateY(-1px); background:var(--peach-2)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--cream)}
.chip:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.chip.sw{display:inline-flex; align-items:center; gap:7px}
.chip.sw i{width:14px; height:14px; border-radius:50%; border:1.5px solid var(--ink); display:inline-block}
.chip.sw[aria-pressed="true"] i{border-color:var(--cream)}
.chip.one{cursor:default; border-style:dashed; color:var(--ink-2)}
.chip.one:hover{transform:none; background:var(--cream)}
.cart{margin-top:auto; display:grid; gap:10px}
.item .btn{justify-content:center; width:100%; box-shadow:3px 3px 0 var(--orange)}
.btn.add svg{width:18px; height:18px}
.note{display:none; background:var(--peach-2); border:2px dashed var(--ink); border-radius:10px; padding:12px 14px; font-size:14.5px; color:var(--ink)}
.note.show{display:block}
.note b{color:var(--ink)}
/* colour choice on the garments */
[data-color="black"] .tee-body{fill:var(--ink)}
[data-color="black"] .tee-print{color:var(--cream)}
[data-color="black"] .tee-print-txt{fill:var(--cream)}
[data-color="black"] .tee-txt{fill:var(--orange)}
[data-color="cream"] .hood-body{fill:var(--cream); stroke:var(--ink)}
[data-color="cream"] .hood-line{stroke:var(--ink)}
[data-color="cream"] .hood-print{color:var(--ink)}
[data-color="cream"] .hood-txt{fill:var(--orange-deep)}
/* colour swatches */
.chip.sw i.sw-cream{background:var(--cream)}
.chip.sw i.sw-ink{background:var(--ink)}
.chip.sw i.sw-orange{background:var(--orange)}
@media (min-width:981px){
  .shop-grid{grid-template-columns:repeat(6, minmax(0,1fr))}
  .item{grid-column:span 2}
  .item.wide{grid-column:span 3; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:auto auto auto 1fr; column-gap:22px; row-gap:12px; align-items:start}
  .item.wide .art{grid-row:1/-1; align-self:stretch; display:grid; place-items:center}
  .item.wide .cart{align-self:end}
}
@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:20px} .item{padding:14px} }

/* good to know */
.facts{background:var(--orange); border-top:var(--line)}
.facts-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:clamp(28px, 4vw, 48px)}
.fact{background:var(--cream); border:var(--line); border-radius:12px; padding:20px 20px 22px; display:grid; gap:8px; align-content:start; position:relative}
.fact svg{width:34px; height:34px; color:var(--orange-deep); margin-bottom:4px}
.fact h3{font-size:19px}
.fact p{font-size:15px; color:var(--ink-2)}
.fact .ex{
  position:absolute; top:14px; right:14px; font-family:var(--display); font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); border:1.5px dashed var(--ink); border-radius:999px; 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:800; font-size:13px; letter-spacing:.04em; border:2px solid var(--ink); border-radius:6px; padding:6px 9px; line-height:1; background:var(--peach-2)}
.seller{grid-column:1/-1; background:var(--ink); color:var(--cream); display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center}
.seller svg{color:var(--orange); width:48px; height:48px; margin:0}
.seller h3{color:var(--cream)}
.seller p{color:#E9D9C2}
.seller a{color:var(--cream); text-decoration-color:var(--orange); 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)} }

/* ===== product pages (/products/<key>) ===== */
.pdp-head{padding-block:clamp(24px, 4vw, 48px) clamp(56px, 7vw, 90px)}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--ink-2); margin-bottom:clamp(20px, 3vw, 36px); font-weight:500}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink); font-weight:700}
.pdp{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 5vw, 72px); align-items:start}
.pdp-art{
  margin:0; position:relative; background:var(--cream); border:var(--line); border-radius:var(--r);
  padding:clamp(16px, 3vw, 40px); box-shadow:10px 10px 0 var(--ink); transform:rotate(-1deg);
}
.pdp-art svg{width:100%; height:auto; aspect-ratio:1}
.pdp-art .tag-price.big{width:96px; height:96px; font-size:30px; top:-20px; right:-18px}
.pdp-body{display:grid; gap:16px; align-content:start}
.pdp-body .eyebrow{margin-bottom:0}
.pdp-body h1{font-size:clamp(40px, 5.4vw, 74px); letter-spacing:-.03em}
.pdp-body .price{font-size:28px}
.pdp-body .lede{color:var(--ink)}
.details{margin:0; padding:16px 0; list-style:none; display:grid; gap:8px; border-block:2px dashed var(--ink)}
.details li{display:flex; gap:12px; align-items:baseline}
.details li::before{content:"★"; font-size:13px; flex:none}
.pdp .cart{margin-top:6px}
.pdp .cart .btn{justify-content:center}
.pdp > .pdp-body > .btn{justify-self:start}
.pdp .chip{background:var(--cream)}
.pdp .chip[aria-pressed="true"]{background:var(--ink)}
@media (max-width:860px){
  .pdp{grid-template-columns:minmax(0,1fr)}
  .pdp-art{transform:none; box-shadow:6px 6px 0 var(--ink); max-width:520px}
  .pdp-art .tag-price.big{width:76px; height:76px; font-size:24px; top:-14px; right:-8px}
}

.interest{background:var(--ink); color:var(--cream)}
.interest .eyebrow{color:var(--orange)}
.interest h2{color:var(--cream)}
.interest .lede{color:#E9D9C2; 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:12px;
  border:2px solid var(--cream); background:transparent; color:var(--cream); transition:transform .18s ease, background .18s ease, color .18s ease;
}
.level b{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:.02em; text-transform:uppercase}
.level span{font-size:15px; color:#E9D9C2}
.level:hover{transform:translateY(-2px) rotate(-.6deg); border-color:var(--orange)}
.level:focus-visible{outline:3px solid var(--orange); outline-offset:3px}
.level[aria-pressed="true"]{background:var(--orange); border-color:var(--orange); color:var(--ink)}
.level[aria-pressed="true"] span{color:var(--ink)}
.thanks{font-family:var(--display); font-weight:700; color:var(--orange); margin-top:4px}
@media (max-width:860px){ .interest-grid{grid-template-columns:minmax(0,1fr)} }
.more{border-top:0}