/* World Game — Shop / personalised merch storefront */

/* ---------- shop hero ---------- */
.shop-hero { padding: clamp(2.2rem,1.5rem+4vw,4.5rem) 0 1rem; position: relative; overflow: hidden; }
.shop-hero::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(70px); opacity:.5;
  background: radial-gradient(circle, var(--gold-400), transparent 70%); top:-160px; right:-100px; z-index:0; }
.shop-hero .wrap { position: relative; z-index:1; }
.shop-hero h1 { font-size: clamp(2.2rem,1.2rem+4vw,4rem); letter-spacing:-.02em; }
.shop-hero h1 .grad { background:linear-gradient(120deg,var(--pink-500),var(--gold-500)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.shop-hero p { color:var(--text-soft); font-size:var(--text-lead); max-width:56ch; margin-top:.7rem; }
.ship-note { display:inline-flex; gap:.5rem; align-items:center; margin-top:1rem; font-weight:700; font-size:.85rem;
  color:var(--text); background:var(--bg-elev); padding:.5rem .9rem; border-radius:999px; box-shadow:var(--shadow-sm); }

/* ---------- product grid ---------- */
.product-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:1.6rem; padding-block: 2rem var(--space-section); }
.product { display:grid; grid-template-columns: 1fr; background:var(--bg-elev); border:1px solid var(--surface-ring); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.product-preview { position:relative; padding:1.4rem; background:
    radial-gradient(120% 120% at 50% 0%, var(--bg-sunk), var(--bg-elev) 70%); display:grid; place-items:center; min-height:300px; }
.product-badge { position:absolute; top:1rem; left:1rem; z-index:3; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:.3rem .65rem; border-radius:999px; background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); color:#4a2c00; box-shadow:var(--shadow-sm); }
.product-body { padding:1.4rem 1.5rem 1.6rem; }
.product-body h2 { font-size:1.5rem; }
.product-body .tagline { color:var(--accent); font-weight:800; font-size:.9rem; margin-top:.15rem; }
.product-body .blurb { color:var(--text-soft); font-size:.95rem; margin:.7rem 0; }
.specs { list-style:none; padding:0; margin:.4rem 0 1rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.specs li { font-size:.75rem; font-weight:700; color:var(--text-soft); background:var(--bg-sunk); padding:.25rem .6rem; border-radius:999px; }

/* ---------- live mockups ---------- */
.mockup { position:relative; width:min(300px, 78vw); aspect-ratio:1; display:grid; place-items:center; }
.mockup .print-area { position:absolute; display:grid; place-items:center; overflow:hidden; }
.mockup .print-area img { width:100%; height:100%; object-fit:contain; }
.mockup .print-placeholder { color:var(--text-soft); font-size:.8rem; font-weight:700; text-align:center; opacity:.7; padding:.5rem; }

/* T-shirt */
.mockup--tshirt .shirt { width:100%; height:100%; color:#ffffff; filter: drop-shadow(0 10px 22px rgba(0,0,0,.22)); }
.mockup--tshirt .shirt svg { width:100%; height:100%; display:block; }
.mockup--tshirt .shirt path { fill: currentColor; stroke: rgba(0,0,0,.14); stroke-width:2; }
.mockup--tshirt .print-area { top:31%; left:34%; width:32%; height:36%; }

/* Mug */
.mockup--mug .mug-body { position:relative; width:56%; height:52%; border-radius:14px 14px 18px 18px; background:var(--mug-color,#fff);
  box-shadow: inset -18px 0 26px rgba(0,0,0,.12), var(--shadow-md); border:1px solid rgba(0,0,0,.08); }
.mockup--mug .mug-body::after { content:""; position:absolute; right:-26%; top:20%; width:34%; height:55%; border:12px solid var(--mug-color,#fff);
  border-radius:50%; box-shadow:var(--shadow-sm); background:transparent; }
.mockup--mug .print-area { top:24%; left:14%; width:52%; height:52%; border-radius:8px; }
.mockup--mug .mug-name { position:absolute; bottom:14%; left:0; right:36%; text-align:center; font-family:var(--font-display); font-weight:700; color:#c23c80; font-size:.9rem; }

/* Board */
.mockup--board .board-face { width:92%; height:92%; border-radius:var(--radius); border:8px solid #fff;
  background: conic-gradient(from 40deg, var(--pink-200), var(--gold-300), var(--sky), var(--pink-200)); box-shadow:var(--shadow-lg);
  display:grid; place-items:center; text-align:center; padding:1rem; }
.mockup--board .board-title { font-family:var(--font-display); font-weight:700; color:#3A2E39; line-height:1.05; }
.mockup--board .board-title b { display:block; font-size:clamp(1.3rem,1rem+3vw,2rem); color:var(--pink-600); }

/* Desk card */
.mockup--card .card-face { width:60%; height:82%; border-radius:16px; background:var(--bg-elev); border:1px solid var(--surface-ring);
  box-shadow:var(--shadow-md); display:grid; grid-template-rows: 1fr auto; overflow:hidden; }
.mockup--card .card-art { display:grid; place-items:center; background:var(--bg-sunk); overflow:hidden; }
.mockup--card .card-art img { width:100%; height:100%; object-fit:cover; }
.mockup--card .card-name { padding:.5rem; text-align:center; font-family:var(--font-display); font-weight:700; color:var(--accent); font-size:.85rem; }

/* ---------- customizer controls ---------- */
.customizer { display:grid; gap:1rem; margin-top:.4rem; }
.opt-group > .opt-label { display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-soft); margin-bottom:.5rem; }
.opt-label .req { color:var(--accent); }

.avatar-picker { display:grid; grid-template-columns: repeat(auto-fill, minmax(52px,1fr)); gap:.45rem; max-height:180px; overflow:auto; padding:.15rem; }
.avatar-opt { position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; border:2px solid transparent; cursor:pointer; background:var(--bg-sunk); padding:0; }
.avatar-opt img { width:100%; height:100%; object-fit:cover; }
.avatar-opt[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent); }
.avatar-opt .lock { position:absolute; inset:0; display:grid; place-items:center; background:color-mix(in srgb,var(--plum) 45%,transparent); font-size:1rem; }

.swatches { display:flex; gap:.5rem; flex-wrap:wrap; }
.swatch { width:34px; height:34px; border-radius:999px; cursor:pointer; border:2px solid var(--surface-ring); padding:0; }
.swatch[aria-pressed="true"] { outline:3px solid var(--accent); outline-offset:2px; }

.sizes { display:flex; gap:.5rem; flex-wrap:wrap; }
.size-opt { min-width:48px; padding:.5rem .7rem; border-radius:12px; border:2px solid var(--surface-ring); background:var(--bg-elev); font-weight:800; cursor:pointer; color:var(--text); }
.size-opt[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--bg-elev)); }
.size-link { background:none; border:none; color:var(--accent); font-weight:800; text-decoration:underline; cursor:pointer; font-size:.8rem; }

.txt-input { width:100%; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--surface-ring); background:var(--bg); color:var(--text); font:inherit; }
.txt-input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

.qty { display:inline-flex; align-items:center; border:1px solid var(--surface-ring); border-radius:999px; overflow:hidden; }
.qty button { width:38px; height:38px; border:none; background:var(--bg-sunk); font-size:1.2rem; cursor:pointer; color:var(--text); }
.qty span { min-width:2.5ch; text-align:center; font-weight:800; }

.dropzone { border:2px dashed var(--surface-ring); border-radius:14px; padding:1rem; text-align:center; cursor:pointer; transition:border-color var(--dur), background var(--dur); }
.dropzone:hover, .dropzone.drag { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,transparent); }
.dropzone .dz-ico { font-size:1.6rem; }
.dropzone small { color:var(--text-soft); display:block; margin-top:.3rem; }
.upload-tips { font-size:.78rem; color:var(--text-soft); margin:.5rem 0 0; padding-left:1.1rem; }
.custom-toggle { display:flex; gap:.5rem; background:var(--bg-sunk); padding:.3rem; border-radius:999px; }
.custom-toggle button { flex:1; border:none; background:transparent; padding:.5rem; border-radius:999px; font-weight:800; cursor:pointer; color:var(--text-soft); }
.custom-toggle button[aria-pressed="true"] { background:var(--bg-elev); color:var(--text); box-shadow:var(--shadow-sm); }

.buy-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.2rem; flex-wrap:wrap; }
.buy-row .price { font-family:var(--font-display); font-weight:700; font-size:1.8rem; }

/* ---------- cart ---------- */
.cart-fab { position:fixed; right:1.1rem; bottom:1.1rem; z-index:60; border:none; cursor:pointer; border-radius:999px; padding:.9rem 1.2rem;
  font-family:var(--font-display); font-weight:700; color:#4a2c00; background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); box-shadow:var(--shadow-gold); }
.cart-fab .count { display:inline-grid; place-items:center; min-width:22px; height:22px; border-radius:999px; background:var(--pink-600); color:#fff; font-size:.75rem; margin-left:.4rem; padding:0 .3rem; }
.cart-backdrop { position:fixed; inset:0; z-index:70; background:color-mix(in srgb,var(--plum) 50%,transparent); backdrop-filter:blur(4px); display:none; }
.cart-backdrop.show { display:block; }
.cart-drawer { position:fixed; top:0; right:0; height:100dvh; width:min(420px,100%); z-index:80; background:var(--bg-elev); box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform var(--dur) var(--ease); display:flex; flex-direction:column; }
.cart-drawer.show { transform:translateX(0); }
.cart-head { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.2rem; border-bottom:1px solid var(--surface-ring); }
.cart-head h3 { font-size:1.3rem; }
.cart-items { flex:1; overflow:auto; padding:1rem 1.2rem; display:grid; gap:.9rem; align-content:start; }
.cart-empty { color:var(--text-soft); text-align:center; margin-top:2rem; }
.cart-item { display:grid; grid-template-columns:64px 1fr auto; gap:.8rem; align-items:center; background:var(--bg-sunk); border-radius:14px; padding:.6rem; }
.cart-item .ci-thumb { width:64px; height:64px; border-radius:10px; overflow:hidden; background:var(--bg-elev); display:grid; place-items:center; }
.cart-item .ci-thumb img { width:100%; height:100%; object-fit:contain; }
.cart-item .ci-name { font-weight:800; font-size:.92rem; }
.cart-item .ci-meta { font-size:.76rem; color:var(--text-soft); }
.cart-item .ci-price { font-weight:800; }
.cart-item .ci-remove { background:none; border:none; color:var(--text-soft); cursor:pointer; text-decoration:underline; font-size:.75rem; }
.cart-foot { border-top:1px solid var(--surface-ring); padding:1.1rem 1.2rem; display:grid; gap:.8rem; }
.cart-total { display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:700; font-size:1.25rem; }

/* checkout form */
.checkout { display:grid; gap:.7rem; }
.checkout input, .checkout textarea { width:100%; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--surface-ring); background:var(--bg); color:var(--text); font:inherit; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.checkout .hint { font-size:.78rem; color:var(--text-soft); }

/* board live-preview modal */
.bp-card { width:min(760px,100%); text-align:center; }
.bp-card h3 { font-size:1.7rem; margin-top:.3rem; }
.bp-lure { color:var(--text-soft); font-size:1.02rem; margin:.4rem 0 1.2rem; }

/* live personalisation gallery (real product art) */
.pz-gallery { display:grid; grid-template-columns: repeat(2, 1fr); gap:.9rem; margin:1rem 0; }
.pz-loading { grid-column:1/-1; color:var(--text-soft); padding:2rem 0; }
.pz-item { margin:0; background:var(--bg-sunk); border:1px solid var(--surface-ring); border-radius:14px; overflow:hidden; }
.pz-item.pz-hero { grid-column:1 / -1; }
.pz-canvas { width:100%; height:auto; display:block; background:#fff; }
.pz-item figcaption { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.45rem .7rem; font-weight:800; font-size:.82rem; color:var(--text-soft); }
.pz-dl { border:none; background:var(--accent); color:#fff; border-radius:999px; padding:.3rem .7rem; font-weight:800; font-size:.75rem; cursor:pointer; }
.pz-dl:hover { filter:brightness(1.05); }
@media (max-width:520px){ .pz-gallery { grid-template-columns:1fr; } }
.bp-cta { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.bp-cta .btn { flex:1 1 auto; justify-content:center; }
@media (max-width:520px){ .bp-cta .btn { width:100%; flex:none; } }

/* size chart modal table */
#sizeModal table { width:100%; border-collapse:collapse; margin-top:.8rem; }
#sizeModal th, #sizeModal td { padding:.5rem .6rem; text-align:left; border-bottom:1px solid var(--surface-ring); }
#sizeModal th { font-family:var(--font-display); color:var(--text-soft); }

/* ---------- collectibles ---------- */
.collect-band { background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--pink-400) 16%, var(--bg)) 0%, var(--bg) 55%); padding-block: var(--space-section); margin-top: 1rem; }
.collect-sub { display:flex; align-items:center; gap:.7rem; margin: 0 0 .3rem; }
.collect-sub h3 { font-family:var(--font-display); font-size: clamp(1.4rem,1rem+2vw,2rem); }
.collect-badge { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:.25rem .6rem; border-radius:999px; background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); color:#4a2c00; }
.collect-blurb { color:var(--text-soft); max-width:60ch; margin:0 0 1.2rem; }

/* toys */
.toy-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap:1.1rem; }
.toy-card { background:var(--bg-elev); border:1px solid var(--surface-ring); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease), box-shadow var(--dur); }
.toy-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.toy-card.is-gold { outline:2px solid var(--gold-400); outline-offset:-2px; }
.toy-thumb { position:relative; aspect-ratio:1; background:radial-gradient(120% 120% at 50% 0%, var(--bg-sunk), var(--bg-elev)); overflow:hidden; }
.toy-thumb img { width:100%; height:100%; object-fit:cover; }
.toy-thumb .tier-badge { top:.6rem; left:.6rem; }
.toy-3d { position:absolute; bottom:.6rem; right:.6rem; z-index:2; border:none; cursor:pointer; font-weight:800; font-size:.78rem; padding:.35rem .65rem; border-radius:999px; background:var(--bg-elev); color:var(--text); box-shadow:var(--shadow-sm); }
.toy-3d:hover { background:var(--accent); color:#fff; }
.toy-body { padding:.8rem .9rem 1rem; }
.toy-name { font-family:var(--font-display); font-weight:600; font-size:1.1rem; }
.toy-title { color:var(--text-soft); font-size:.82rem; margin-bottom:.5rem; }
.toy-buy { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.6rem; }
.toy-size { flex:1; min-width:0; padding:.4rem .5rem; border-radius:10px; border:1px solid var(--surface-ring); background:var(--bg); color:var(--text); font:inherit; font-size:.82rem; }
.toy-price { font-family:var(--font-display); font-weight:700; font-size:1.15rem; }
.toy-card .btn { width:100%; justify-content:center; }

/* 3D viewer modal */
.toy3d-stage { width:100%; aspect-ratio:1; max-height:60vh; border-radius:var(--radius); overflow:hidden; background:radial-gradient(circle at 50% 30%, var(--bg-sunk), var(--bg-elev)); margin:.8rem 0; }
.toy3d-stage model-viewer { width:100%; height:100%; }

/* deck cards */
.deck-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:1.1rem; }
.deck-card { background:var(--bg-elev); border:1px solid var(--surface-ring); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease), box-shadow var(--dur); }
.deck-card:hover { transform:translateY(-5px) rotate(-.6deg); box-shadow:var(--shadow-md); }
.deck-frame { position:relative; margin:.6rem; border-radius:14px; padding:.5rem; background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, #fff) 0%, var(--bg-elev) 60%); border:2px solid var(--accent); box-shadow:inset 0 0 0 3px rgba(255,255,255,.5); }
.deck-card.is-legendary .deck-frame { background:linear-gradient(160deg, var(--gold-300), #fff 70%); border-color:var(--gold-500); box-shadow:inset 0 0 0 3px rgba(255,255,255,.6), 0 0 18px color-mix(in srgb,var(--gold-400) 50%, transparent); }
.deck-rarity { font-family:var(--font-display); font-weight:700; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#4a2c00; background:rgba(255,255,255,.7); border-radius:999px; padding:.12rem .5rem; display:inline-block; }
.deck-art { aspect-ratio:1; border-radius:10px; overflow:hidden; margin:.4rem 0; background:#fff; }
.deck-art img { width:100%; height:100%; object-fit:cover; }
.deck-cardname { text-align:center; font-family:var(--font-display); font-weight:700; color:#3A2E39; font-size:.95rem; }
.deck-info { padding:0 .9rem 1rem; }
.deck-name { font-family:var(--font-display); font-weight:600; }
.deck-sub { color:var(--text-soft); font-size:.78rem; margin-bottom:.5rem; }
.deck-buy { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.deck-price { font-family:var(--font-display); font-weight:700; }
.deck-bundle .deck-frame--bundle { aspect-ratio:auto; display:grid; place-items:center; gap:.2rem; padding:1.4rem .6rem; background:linear-gradient(160deg,var(--gold-300),var(--pink-200)); border-color:var(--gold-500); }
.deck-bundle-icon { font-size:2.4rem; }
.deck-bundle-txt { font-family:var(--font-display); font-weight:700; color:#4a2c00; }

/* offer + cart promo */
.offer-note { background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); color:#4a2c00; }
.cart-promo { background:color-mix(in srgb,var(--mint) 18%,var(--bg-elev)); border:1px solid color-mix(in srgb,var(--mint) 40%,transparent); color:var(--text); border-radius:12px; padding:.6rem .8rem; font-size:.88rem; font-weight:700; }

/* deep-link flash */
.flash { animation: flashPulse 1.8s var(--ease); }
@keyframes flashPulse { 0%,100%{ box-shadow:var(--shadow-sm) } 30%{ box-shadow:0 0 0 4px var(--accent), var(--shadow-md) } }

/* ---------- responsive ---------- */
@media (max-width: 860px) { .product-grid { grid-template-columns:1fr; } }
@media (max-width: 520px) { .toy-grid, .deck-grid { grid-template-columns: repeat(2,1fr); gap:.7rem; } }
@media (max-width: 520px) {
  .field-row { grid-template-columns:1fr; }
  .buy-row .price { font-size:1.5rem; }
  .cart-drawer { width:100%; }
}