/* ==================================================================
   314 VBC — TEAM STORE
   ------------------------------------------------------------------
   Loaded only by store.html, on top of site.css. Reuses the site's
   tokens (--navy-900, --red, --bone …) so the store can never drift
   away from the rest of the brand.

   Three surfaces live in here:
     1. the catalogue grid + filter chips
     2. the product sheet (a dialog, not a separate page — the whole
        store is one URL so a back button never loses a cart)
     3. the cart drawer + checkout
   ================================================================== */

/* ---------- filter chips ------------------------------------------ */
.st-bar{
  position:sticky;top:0;z-index:40;background:var(--bone);
  border-bottom:1px solid var(--line);
  padding:.85rem 0;
}
.st-bar-in{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.st-chips{display:flex;gap:.45rem;flex-wrap:wrap;flex:1 1 auto}
.st-chip{
  appearance:none;border:0;cursor:pointer;background:#fff;color:var(--navy-900);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.6rem .95rem;transition:background .2s var(--ease),color .2s var(--ease);
}
.st-chip:hover{box-shadow:inset 0 0 0 1px var(--navy-900)}
.st-chip[aria-pressed="true"]{background:var(--navy-900);color:#fff;box-shadow:none}

/* ---------- catalogue grid ---------------------------------------- */
.st-grid{
  display:grid;gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.st-card{
  background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;
  text-align:left;cursor:pointer;padding:0;font:inherit;color:inherit;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.st-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(7,14,32,.12)}
.st-shot{
  position:relative;aspect-ratio:1;background:var(--bone-2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.st-shot img{width:100%;height:100%;object-fit:contain;padding:.4rem;transition:transform .6s var(--ease)}
.st-card:hover .st-shot img{transform:scale(1.04)}
/* stand-in for the one product with no photo (the quarter zip) */
.st-shot--none{
  background:linear-gradient(150deg,var(--navy-800),var(--navy-900));
  color:rgba(255,255,255,.5);text-align:center;padding:2rem;
}
.st-shot--none b{
  display:block;font-family:var(--font-display);font-size:2.6rem;color:rgba(255,255,255,.16);
  letter-spacing:.04em;line-height:1;margin-bottom:.6rem;
}
.st-shot--none span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}

.st-badge{
  position:absolute;top:.8rem;left:.8rem;z-index:2;
  background:var(--red);color:#fff;font-size:.6rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;padding:.4rem .6rem;
}
.st-body{padding:1.1rem 1.15rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.st-body h3{font-size:1.35rem;line-height:.95}
.st-brand{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.st-price{margin-top:auto;padding-top:.9rem;display:flex;align-items:baseline;gap:.5rem}
.st-price b{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.01em}
.st-price span{font-size:.76rem;color:var(--muted)}
.st-sw{display:flex;gap:.32rem;margin-top:.55rem}
.st-sw i{
  width:15px;height:15px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(7,14,32,.25);
}

/* ---------- product sheet (dialog) -------------------------------- */
.st-sheet{
  border:0;padding:0;max-width:min(1000px,94vw);width:100%;background:#fff;color:var(--ink);
}
.st-sheet::backdrop{background:rgba(7,14,32,.72)}
/* FIXED HEIGHT, deliberately. A <dialog> centres itself in the viewport, so
   if its content height changes by even a few pixels — a longer note, a
   carousel strip appearing, a warning banner — the whole dialog re-centres
   and everything inside it visibly shifts. Pinning the height means clicking
   a colour swatch cannot move the photo, because nothing about the box
   changes. The right-hand column scrolls internally instead. */
.st-sheet-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  height:min(86vh,700px);
}
/* The media panel is a fixed square box, centred in whatever height the
   right-hand column happens to be, with the image CONTAINED inside it.
   Both halves of that matter: `cover` re-crops whenever the column height
   changes (a colour with fewer sizes makes the column shorter), which reads
   as the garment sliding around every time you click a swatch. A centred
   square + contain means the photo lands in exactly the same place on every
   click, whatever the product. */
.st-sheet-shot{
  background:var(--bone-2);position:relative;height:100%;min-height:340px;
  display:flex;align-items:center;justify-content:center;padding:1.1rem;
}
.st-sheet-shot picture{
  display:block;aspect-ratio:1;margin:0 auto;
  width:min(100%,480px);max-height:100%;
}
.st-sheet-shot img{width:100%;height:100%;object-fit:contain;object-position:center}
.st-sheet-shot .st-shot--none{
  width:100%;max-width:480px;aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
/* carousel arrows — only rendered when a colour has more than one photo */
.st-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:42px;height:42px;border:0;cursor:pointer;line-height:1;font-size:1.6rem;
  background:rgba(255,255,255,.9);color:var(--navy-900);
  box-shadow:0 2px 10px rgba(7,14,32,.16);
}
.st-arrow:hover{background:var(--navy-900);color:#fff}
.st-arrow--prev{left:.6rem}
.st-arrow--next{right:.6rem}

.st-thumbs{position:absolute;left:.8rem;bottom:.8rem;display:flex;gap:.4rem}
.st-thumbs button{
  width:52px;height:52px;padding:0;border:0;cursor:pointer;overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,255,255,.85);background:#fff;
}
.st-thumbs button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--red)}
.st-thumbs img{width:100%;height:100%;object-fit:cover}

.st-sheet-body{padding:clamp(1.4rem,3vw,2.3rem);overflow-y:auto;height:100%}
.st-close{
  position:absolute;top:.7rem;right:.7rem;z-index:5;width:40px;height:40px;border:0;cursor:pointer;
  background:var(--navy-900);color:#fff;font-size:1.3rem;line-height:1;
}
.st-close:hover{background:var(--red)}
.st-sheet-body h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:.4rem}
.st-spec{font-size:.82rem;color:var(--muted);margin:.5rem 0 1rem}
.st-blurb{font-size:.98rem;margin:0 0 1.4rem}

.st-lab{
  font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:1.2rem 0 .55rem;display:block;
}
.st-colors{display:flex;gap:.5rem;flex-wrap:wrap}
.st-color{
  display:flex;align-items:center;gap:.5rem;cursor:pointer;border:0;font:inherit;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line);padding:.45rem .8rem .45rem .5rem;
  font-size:.8rem;font-weight:600;
}
.st-color i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(7,14,32,.25)}
.st-color[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--navy-900)}

.st-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.45rem}
.st-size{
  cursor:pointer;border:0;font:inherit;background:#fff;box-shadow:inset 0 0 0 1px var(--line);
  padding:.6rem .4rem;text-align:center;line-height:1.25;
}
.st-size b{display:block;font-size:.88rem;font-weight:700}
.st-size span{display:block;font-size:.66rem;color:var(--muted)}
.st-size[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--navy-900);background:var(--bone)}
.st-size[disabled]{opacity:.32;cursor:not-allowed;text-decoration:line-through}

.st-addon{
  display:flex;align-items:flex-start;gap:.65rem;margin-top:1rem;
  background:var(--bone);padding:.85rem .95rem;font-size:.88rem;
}
.st-addon input{margin-top:.25rem}

.st-qty{display:flex;align-items:center;gap:0;width:max-content;box-shadow:inset 0 0 0 1px var(--line)}
.st-qty button{width:40px;height:42px;border:0;background:#fff;cursor:pointer;font-size:1.15rem}
.st-qty button:hover{background:var(--bone-2)}
.st-qty input{width:56px;height:42px;border:0;text-align:center;font:inherit;font-weight:700}

.st-foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.st-running{font-family:var(--font-display);font-size:2rem;line-height:1}
.st-hint{font-size:.78rem;color:var(--muted);margin:.7rem 0 0}
.st-warn{
  background:var(--warn-bg);color:var(--warn);border-left:4px solid var(--warn);
  padding:.8rem .95rem;font-size:.84rem;margin:1rem 0 0;
}

/* ---------- cart button + drawer ---------------------------------- */
.st-cartbtn{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;border:0;
  background:var(--navy-900);color:#fff;font:inherit;font-size:.72rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:.7rem 1.05rem;
}
.st-cartbtn:hover{background:var(--red)}
.st-cartbtn svg{width:16px;height:16px;fill:currentColor}
.st-cartbtn .n{
  background:var(--red);color:#fff;border-radius:999px;min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.68rem;padding:0 .35rem;
}
.st-cartbtn[data-empty="1"] .n{display:none}

.st-drawer{
  border:0;padding:0;margin:0 0 0 auto;height:100vh;max-height:100vh;
  width:min(460px,100vw);background:#fff;color:var(--ink);
}
.st-drawer::backdrop{background:rgba(7,14,32,.72)}
.st-drawer-in{display:flex;flex-direction:column;height:100vh}
.st-drawer-hd{
  background:var(--navy-900);color:#fff;padding:1.2rem 1.3rem;
  display:flex;align-items:center;justify-content:space-between;
}
.st-drawer-hd h2{font-size:1.6rem}
.st-drawer-hd button{background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1}
.st-lines{flex:1;overflow-y:auto;padding:1.1rem 1.3rem}
.st-line{display:grid;grid-template-columns:64px 1fr auto;gap:.85rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.st-line img{width:64px;height:64px;object-fit:cover;background:var(--bone-2)}
.st-line-none{width:64px;height:64px;background:var(--navy-800)}
.st-line h4{font-size:1rem;line-height:1.1;margin-bottom:.2rem;font-family:var(--font-body);font-weight:700;text-transform:none;letter-spacing:0}
.st-line .m{font-size:.76rem;color:var(--muted)}
.st-line .rm{background:none;border:0;color:var(--stop);cursor:pointer;font-size:.72rem;padding:0;margin-top:.35rem;text-decoration:underline}
.st-line .p{font-weight:700;white-space:nowrap}
.st-empty{text-align:center;color:var(--muted);padding:3rem 1rem;font-size:.92rem}
.st-drawer-ft{border-top:1px solid var(--line);padding:1.2rem 1.3rem;background:var(--bone)}
.st-tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}
.st-tot b{font-family:var(--font-display);font-size:2rem}

/* ---------- checkout ---------------------------------------------- */
.st-checkout{display:none}
.st-checkout.on{display:block}
.st-checkout .field{margin-bottom:.85rem}
.st-checkout label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.st-checkout input,.st-checkout select,.st-checkout textarea{
  width:100%;padding:.7rem .8rem;border:1px solid var(--line);background:#fff;font:inherit;font-size:.92rem;
}
.st-pay{display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0 1rem}
.st-pay label{
  display:flex;gap:.6rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  padding:.7rem .8rem;text-transform:none;letter-spacing:0;font-size:.88rem;font-weight:500;color:var(--ink);cursor:pointer;
}
.st-pay label b{display:block;font-size:.9rem}
.st-pay label span{display:block;font-size:.76rem;color:var(--muted)}
.st-back{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:.8rem;padding:0;margin-top:.7rem}

@media (max-width:820px){
  /* Stacked on a phone: the two panels flow, the dialog scrolls as a whole.
     The fixed height above is a desktop two-column concern only. */
  .st-sheet-in{grid-template-columns:1fr;height:auto}
  .st-sheet-shot{height:auto;min-height:min(56vw,320px)}
  .st-sheet-body{height:auto}
  .st-sheet{max-height:92vh;overflow-y:auto}
}
@media print{
  .st-bar,.st-cartbtn{display:none!important}
}