/* Product page: gallery on one side, the buying decision on the other.
   Everything needed to commit — colour, size, quantity, add — sits in one
   block without scrolling on a laptop, because a size picker halfway down
   a long page is the usual reason people give up. */

.crumbs{display:flex;gap:7px;align-items:center;padding-block:14px 4px;
  font-size:13px;color:var(--ink-faint)}
.crumbs a{text-decoration:none;color:var(--ink-soft);
  padding:4px 3px;margin:-4px -3px;display:inline-flex;align-items:center;min-height:25px}
.crumbs a:hover{color:var(--accent-ink)}

.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:36px;padding-block:14px 48px;align-items:start}
/* A grid item defaults to min-width:auto, so it refuses to shrink below its
   widest content. The spec table sets min-width:560px, which held the whole
   column open at phone width and pushed the page sideways even though the
   table had its own scroll container. */
.pdp>*{min-width:0}

/* ---- gallery ---- */
.gal{position:sticky;top:calc(var(--head-h) + env(safe-area-inset-top,0px) + 16px)}
.gal-main{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;aspect-ratio:1/1}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-main .chip{position:absolute;top:12px;inset-inline-start:12px}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:7px}
.thumb{padding:0;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r);overflow:hidden;cursor:pointer;aspect-ratio:1/1}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* ---- buy panel ---- */
.buy h1{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.025em}
.buy .he{color:var(--ink-faint);font-size:16px;margin-inline-start:9px;font-weight:500}
.kicker{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.tagline{color:var(--accent-ink);font-weight:600;font-size:17px;margin-top:9px}
.desc{color:var(--ink-soft);margin-top:12px;max-width:54ch}

.pricebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:18px;padding-block:14px;border-block:1px solid var(--line)}
.pricebar .price{font-size:26px}
.price-tbc-lg{font-size:15px;font-weight:600;color:var(--accent-ink);
  background:var(--accent-soft);padding:7px 13px;border-radius:var(--r)}

.opt{margin-top:20px}
.opt-head{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
.opt-head h2{font-size:13px;font-family:var(--display);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.opt-head b{font-size:14.5px;font-weight:600}
/* a control, not prose, so it has to clear the 24px target size */
.opt-head a{margin-inline-start:auto;font-size:13px;color:var(--accent-ink);
  padding:5px 4px;margin-block:-5px;display:inline-flex;align-items:center;min-height:26px}

.colours{display:flex;gap:9px;flex-wrap:wrap}
.colour{display:flex;align-items:center;gap:8px;padding:7px 13px 7px 9px;
  border:1px solid var(--line);background:var(--surface);border-radius:100px;
  cursor:pointer;font-size:14px;font-weight:500;min-height:40px}
.colour:hover{border-color:var(--line-strong)}
.colour[aria-pressed="true"]{border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);font-weight:600}
.colour .dot{width:19px;height:19px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}

.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:7px}
.size{min-height:46px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r);cursor:pointer;font-weight:600;font-size:15px;
  font-variant-numeric:tabular-nums}
.size:hover{border-color:var(--line-strong)}
.size[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent)}

.qtyrow{display:flex;gap:10px;align-items:stretch;margin-top:20px;flex-wrap:wrap}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);flex:0 0 auto}
.qty button{width:42px;min-height:46px;border:0;background:transparent;cursor:pointer;
  font-size:19px;color:var(--ink-soft)}
.qty button:hover{color:var(--ink);background:var(--surface-2)}
.qty input{width:48px;min-height:46px;border:0;background:transparent;text-align:center;
  font-weight:700;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.qtyrow .btn{flex:1 1 200px}

.hint{margin-top:10px;font-size:13.5px;color:var(--ink-faint);min-height:20px}
.hint.warn{color:var(--warn);font-weight:600}

.note{margin-top:18px;padding:13px 15px;background:var(--warn-soft);color:var(--warn);
  border-radius:var(--r);font-size:14px;font-weight:500}

.feat{margin-top:26px}
.feat li{display:flex;gap:10px;padding:7px 0;font-size:14.5px;color:var(--ink-soft);
  border-bottom:1px solid var(--line)}
.feat li:last-child{border-bottom:0}
.feat li svg{width:17px;height:17px;flex:0 0 auto;margin-top:4px;color:var(--accent)}

.specs{margin-top:30px}
.specs h2{font-size:17px;font-weight:700;margin-bottom:11px}

/* ---- toast ---- */
.toast{position:fixed;inset-inline:16px auto;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  inset-inline-start:max(16px,env(safe-area-inset-left,0px));
  z-index:120;background:var(--ink);color:var(--bg);padding:13px 18px;
  border-radius:var(--r);box-shadow:var(--shadow-3);font-weight:600;font-size:14.5px;
  display:flex;align-items:center;gap:12px;max-width:min(92vw,420px)}
.toast a{color:var(--bg);text-decoration:underline;white-space:nowrap}

@media (max-width:1000px){
  .pdp{grid-template-columns:1fr;gap:26px}
  .gal{position:static}
}
@media (max-width:620px){
  .thumbs{grid-template-columns:repeat(6,1fr);gap:5px}
  .sizes{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}
}

.pending-note{background:var(--warn-soft);color:var(--warn);font-weight:500;
  padding:12px 15px;border-radius:var(--r);font-size:14px;margin-bottom:14px;
  line-height:1.5}

/* the premium line, stated on the model's own page */
.prem-box{margin-top:22px;padding:16px 18px;background:var(--accent-soft);
  border-radius:var(--r)}
.prem-box ul{margin-top:11px;display:grid;gap:8px}
.prem-box li{font-size:14px;color:var(--accent-ink);line-height:1.5}
.prem-box li b{font-family:var(--display);font-weight:800;margin-inline-end:5px}