/* ============================================================
   KEY4GAMES — single product (rendered from /v1/products/{slug})
   ============================================================ */
.prod-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;padding:6px 0 20px;align-items:start;grid-template-areas:"gallery buy" "specs buy"}
.pcol-main{display:contents} /* let gallery + spec-grid become direct grid items so we can reorder on mobile */
.gallery{grid-area:gallery;min-width:0}
.spec-grid{grid-area:specs;margin-top:22px}
.buybox{grid-area:buy}

/* gallery */
.gallery .cover{aspect-ratio:16/9;border:1px solid var(--line);border-radius:16px;background:#0d1020}
.gallery .cover img{border-radius:16px}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumb{position:relative;width:96px;aspect-ratio:16/9;border:1px solid var(--line);border-radius:10px;overflow:hidden;padding:0;transition:.2s}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.is-active{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet)}
.thumb:hover{border-color:var(--line2)}

/* specs */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.spec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.spec span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.spec b{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}

/* buy box */
.buybox{position:sticky;top:calc(var(--header-h) + 16px);width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.buybox h1{font-family:'Space Grotesk','Inter',sans-serif;font-size:20px;font-weight:700;line-height:1.3;letter-spacing:.01em;overflow-wrap:anywhere}
.bmeta{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.bchip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:5px 9px}
.bchip svg{stroke:var(--violet);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bchip.in{color:#7ee0a6;border-color:rgba(126,224,166,.3)}
.bchip.out{color:#e08a8a;border-color:rgba(224,138,138,.3)}
/* Pre-order: solar, so it reads as "scheduled", not as the green "ready now" or
   the red "you cannot have it". Carries a date, so it is allowed to wrap. */
.bchip.pre{color:var(--solar);border-color:rgba(255,194,75,.34);background:rgba(255,194,75,.07);max-width:100%}
.bchip.pre svg{stroke:var(--solar);flex-shrink:0}
.price-block{display:flex;align-items:baseline;gap:12px;margin:6px 0 16px}
.big-price{font-family:'Space Grotesk','Inter',sans-serif;font-size:34px;font-weight:700;letter-spacing:.01em}
.buy-row{display:flex;gap:12px}
.qty{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:11px;overflow:hidden;flex-shrink:0}
.qty button{width:40px;height:44px;font-size:19px;color:var(--muted);transition:.15s}
.qty button:hover{color:var(--text);background:rgba(255,255,255,.04)}
.qty span{min-width:34px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.btn-buy{flex:1;justify-content:center;min-width:0}
.btn-buy[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}
.buy-note{color:var(--muted);font-size:12.5px;margin-top:12px;text-align:center}
/* The pre-order note replaces a delivery PROMISE, so it must not read as the same
   quiet small print the promise did — it is the one line that corrects the sale. */
.buy-note.is-pre{color:var(--text);background:rgba(255,194,75,.07);border:1px solid rgba(255,194,75,.28);border-radius:11px;padding:10px 12px;line-height:1.5;text-align:left}

.merchant-box{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.m-head{display:flex;align-items:center;gap:12px}
.m-avatar{width:40px;height:40px;border-radius:10px;background:var(--grad);display:grid;place-items:center;font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:14px;color:#fff;flex-shrink:0}
.m-head b{font-size:14px;font-weight:600;display:block}
.m-rating{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:2px}
.stars{font-size:15px;letter-spacing:2px;background:linear-gradient(90deg,var(--solar) var(--r,0%),#3a3f52 var(--r,0%));-webkit-background-clip:text;background-clip:text;color:transparent}
.m-orders{display:block;margin-top:10px;font-size:12px;color:var(--muted)}

.blist{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.blist li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.blist svg{width:16px;height:16px;stroke:var(--violet);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* tabs */
.ptabs{margin-top:36px}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.2s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);border-bottom-color:var(--violet)}
.tab-solo{font-family:'Space Grotesk','Inter',sans-serif;font-size:20px;font-weight:700;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.tabpane{padding:22px 0}
.tabpane:not(.show){display:none}

/* prose (tab content; product page doesn't load legal.css) */
.prose{max-width:820px;overflow-wrap:anywhere}
.prose p{color:var(--muted);margin:0 0 14px;font-size:14.5px;line-height:1.7}
.prose h2,.prose h3{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;margin:22px 0 10px}
.prose h2{font-size:18px}.prose h3{font-size:15px}
.prose ul,.prose ol{color:var(--muted);margin:0 0 14px 22px;line-height:1.7}
.prose li{margin:6px 0}
.prose a{color:var(--violet);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--text)}

@media (max-width:900px){
  .prod-grid{grid-template-columns:1fr;grid-template-areas:"gallery" "buy" "specs"}
  .buybox{position:static}
  .spec-grid{margin-top:8px}
}