/*
  Salzburg Knights — Fanshop page styles
  Milestone 5. New file, linked only from fanshop/*.html after site.css — does not
  touch site.css to avoid collisions with the parallel news-system build. Reuses
  the shared .card/.btn/.section-head/.empty-state skeleton from site.css and its
  tokens (colors, spacing, motion) rather than introducing new values.
  Per DESIGN_SYSTEM.md §8 "Product cards (fanshop, NEW)": square-ish product
  thumb, product name (Alfa Slab One h3), price (Barlow 700), single
  .btn-primary buy action, no cart chrome, no stacked badges. Retokenized
  to v2 dark tokens (was still on deleted --soft/--soft-2/--muted, REVISE
  from web-gatekeeper 2026-09-11); disabled-CTA styling now comes from the
  single source of truth in site.css instead of a duplicate override here.
  Font swap + calc()-based concentric radius dropped for v3 (Task 0.6,
  DESIGN_SYSTEM.md §8 dated decision: 4px/2px difference is negligible now).
*/

.shop-notice{max-width:720px;margin:0 0 var(--head-gap);padding:1rem 1.2rem;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--radius-md);color:var(--silver-2);
  font-size:.95rem}
.shop-notice + .shop-notice{margin-top:calc(.75rem - var(--head-gap))}
/* Barlow ships 400/500/600 only — un-set strong synthesizes a fake bold 700 in the browser */
.shop-notice strong{color:var(--paper);font-weight:600}

/* CLS fix (web-gatekeeper mobile finding, 2026-09-25): #shopRoot is empty until
   fanshop.js's async fetch('../data/products.json') resolves. Measured with real
   before/after DOM rects (network-intercepted): while empty, the static <footer>
   sits right after it and paints INSIDE the initial viewport (top:591 at 390px
   wide). The moment the 20-card grid mounts, footer jumps to top:11656 — a single
   ~11000px shift of a genuinely-visible element = the whole 0.32 CLS score. Root
   cause isn't the product <img>s (already correctly locked to 294x294 via the
   `.card .thumb img{width:100%;height:100%}` cascade from site.css, confirmed via
   live computed-style check) — it's that nothing reserves space for the async
   content. Per the CLS spec a shift only counts if the element intersects the
   viewport before OR after, so a min-height floor that's bigger than any real
   viewport but smaller than the smallest measured real content height (3567px at
   the ≥981px 4-col breakpoint) makes the mount invisible to CLS without any
   per-breakpoint magic numbers or skeleton markup, and never leaves a gap once
   real content lands (real height always exceeds this floor). */
#shopRoot{min-height:1500px}

.shop-group{margin-top:calc(var(--head-gap) * 1.1)}
.shop-group:first-child{margin-top:0}
.shop-group-title{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:1.4rem}

.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}

/* product plate (DESIGN_SYSTEM.md §9 Fanshop, 2026-09-24): supplier mockups have a light bg baked in,
   so the tile is a deliberate white plate instead of a stray bright box; colours stay truthful */
.shop-card .thumb{aspect-ratio:1/1;background:var(--white);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:var(--space-5)}
.shop-card .thumb img{object-fit:contain;padding:0;filter:none}
.shop-card .body{padding:18px 18px 22px}
.shop-card h3{font-size:1.05rem;line-height:1.14;margin-bottom:.45rem}
.shop-price{font-family:var(--font-body);font-weight:600;font-size:1.05rem;color:var(--paper);
  margin-bottom:1rem}

.shop-fields{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.shop-field{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--silver-2)}
.shop-field input,.shop-fields input{width:100%;padding:.55rem .7rem;background:var(--white);color:var(--surface-100);
  border:1px solid var(--light-border,#cfc8bf);border-radius:var(--radius-md);font:inherit;font-size:1rem}
.shop-field input:focus-visible,.shop-consent input:focus-visible{outline:2px solid var(--surface-100);outline-offset:2px}
.shop-order{max-width:640px;margin:3rem 0 0;display:flex;flex-direction:column;gap:1rem}
.shop-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--silver-2)}
.shop-withdraw summary{cursor:pointer}
.shop-withdraw summary:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.shop-withdraw p{margin-top:.75rem}
.shop-fallback{display:flex;flex-direction:column;gap:.6rem}
.shop-fallback textarea{width:100%;padding:.6rem;font:inherit;font-size:.9rem;background:var(--white);color:var(--surface-100);border:1px solid var(--light-border,#cfc8bf);border-radius:var(--radius-md)}
.shop-fallback .btn{align-self:flex-start}
.shop-error{font-weight:600;border-left:3px solid #b3261e;padding-left:.7rem}
.shop-hint{font-size:.85rem;color:var(--silver-2)}

@media (max-width:980px){
  .shop-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .shop-grid{grid-template-columns:1fr}
}