/* ==========================================================================
   Santa's Toy Run shop: /shop/ and its product pages, drawn by the Worker
   (src/shop.js) inside the site's own shell. Loaded on those pages only, so
   the rest of the site pays nothing for it. Tokens come from site.css.
   ========================================================================== */

/* ------------------------------------------------------ header cart */
/* Last in the header on a desktop, between Donate and the menu on a phone. */
.head-cart{
  position:relative; order:3; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:0; border-radius:10px;
  background:var(--paper-3); color:var(--ink); cursor:pointer;
}
.head-cart svg{width:22px; height:22px}
.head-cart:hover{background:var(--line)}
.head-cart-count{
  position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px;
  border-radius:10px; background:var(--red); color:#fff;
  font:700 .74rem/20px var(--font-display); text-align:center;
}
.head-cart-count[hidden]{display:none}
@media (max-width:900px){
  .head-cart{order:0; margin-left:8px; width:42px; height:42px}
  .head-cart + .nav-toggle{margin-left:8px}
}
/* The phone header carries Donate, the cart and the menu beside the logo.
   The menu button keeps its 44px (site.css), so the logo gives way. */
@media (max-width:420px){
  .page-shop .brand img{width:120px}
  .page-shop .head-inner{gap:8px}
  .head-cart,.head-cart + .nav-toggle{margin-left:0}
}
@media (max-width:370px){
  .page-shop .brand img{width:104px}
}

/* ------------------------------------------------------------ frame */
.shop{padding-block:clamp(32px,4vw,56px)}
.shop-hero .prose{max-width:58ch}
.shop-sample{
  margin-top:16px; padding:10px 16px; border-radius:10px;
  background:#FFF6D9; border:1px solid var(--gold-deep); color:var(--ink); font-size:.92rem;
}
.shop-note{margin-top:32px; font-size:.92rem; color:var(--muted); max-width:70ch}
.shop-gone h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.4rem); margin-bottom:12px}
.shop-gone p + p{margin-top:16px}

/* ------------------------------------------------------- the cards */
/* A small catalog sits centred under the hero rather than in the first
   columns of an empty row; phones take two across. */
.shop-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,280px)); justify-content:center; gap:24px;
}
@media (max-width:620px){
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
}
.shop-card a{
  display:flex; flex-direction:column; height:100%; color:inherit;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-1);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.shop-card a:hover{text-decoration:none; border-color:var(--red); box-shadow:var(--shadow-2); transform:translateY(-2px)}
.shop-card-media{display:block; aspect-ratio:3/4; background:var(--paper-2)}
.shop-card-media img{width:100%; height:100%; object-fit:contain}
.shop-card-body{display:flex; flex-direction:column; gap:4px; padding:16px 18px 18px}
.shop-card-name{font-size:1.15rem; line-height:1.25}
@media (max-width:620px){
  .shop-card-body{padding:12px 12px 14px}
  .shop-card-name{font-size:1rem}
  .shop-card-price{font-size:.95rem}
}
.shop-card-price{font-weight:700; color:var(--red-deep)}
.shop-card-tag{
  align-self:flex-start; margin-top:4px; padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--ink); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.shop-card[hidden]{display:none}
.shop-empty{text-align:center; padding:32px 20px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--paper-2)}

/* ------------------------------------------------------ the filters */
/* Two rows of buttons over the cards, the collections and the kinds, centred
   like the grid under them: the pick in each filled red, one that would show
   nothing greyed (HikeAlong's chips in this site's colors). */
.shop-filters{display:grid; gap:10px; margin-bottom:26px}
.shop-filter{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px}
.shop-filter-label{font:700 .78rem var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:4px}
@media (max-width:599px){.shop-filter-label{flex-basis:100%; text-align:center; margin-right:0}}
.shop-pill{
  display:inline-flex; align-items:baseline; gap:.45em; padding:.42rem .95rem; border-radius:var(--radius-pill);
  background:var(--paper); border:1px solid var(--line); color:var(--red-deep);
  font:700 .94rem/1.3 var(--font-display); text-decoration:none;
}
.shop-pill:hover,.shop-pill:focus-visible{border-color:var(--red); text-decoration:none}
.shop-pill[aria-current="page"]{background:var(--red); border-color:var(--red); color:#fff}
.shop-pill[aria-disabled="true"]{color:var(--muted); opacity:.55; cursor:default}
.shop-pill[aria-disabled="true"]:hover{border-color:var(--line)}
.shop-pill-n{font-size:.8rem; font-weight:600; opacity:.8}
.shop-filter-note{margin:-8px auto 26px; max-width:62ch; color:var(--muted); text-align:center}
.shop-filter-note[hidden],.shop-none[hidden]{display:none}
.shop-none{margin-bottom:26px; color:var(--muted); text-align:center}
.shop-empty h2{font-size:1.6rem; margin-bottom:8px}

/* ---------------------------------------------------- product page */
.shop-crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px; padding:0; font-size:.92rem; color:var(--muted)}
.shop-crumbs li + li::before{content:"/"; margin-right:6px; color:var(--muted)}
.shop-product-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:start;
}
.shop-title{font-size:clamp(2rem,1.3rem + 2vw,2.7rem); margin-bottom:14px}
@media (max-width:860px){
  .shop-product-grid{grid-template-columns:1fr}
}

/* The photographs. The large one stays in view beside the details on a
   desktop; the header is sticky, so it sits below it. */
.shop-gallery{display:flex; flex-direction:column; gap:12px}
@media (min-width:861px){
  .shop-gallery{position:sticky; top:96px}
}
.shop-main{aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; background:var(--paper-2); border:1px solid var(--line)}
.shop-main img{width:100%; height:100%; object-fit:contain}
/* The zoom (shop.js): the button clips the photograph while it is scaled;
   only a held zoom takes the finger from the page's scrolling. */
.shop-zoom{position:relative; display:block; width:100%; height:100%; padding:0; margin:0; border:0; background:none; overflow:hidden; font:inherit; color:inherit; line-height:0}
.shop-zoom img{transform-origin:var(--zoom-x,50%) var(--zoom-y,40%); transition:transform .2s ease-out}
.shop-zoom[data-zoom-ready]{cursor:zoom-in}
.shop-zoom[data-zoomed] img{transform:scale(2.5)}
.shop-zoom[data-zoomed="hover"]{cursor:crosshair}
.shop-zoom[data-zoomed="held"]{cursor:zoom-out; touch-action:none}
.shop-zoom:focus-visible{outline:3px solid var(--gold-deep); outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.shop-zoom img{transition:none}}
.shop-zoom-hint{margin:0; color:var(--muted); font-size:.88rem}
.shop-zoom-hint[hidden]{display:none}
.shop-zoom-hint-touch{display:none}
@media (hover:none),(pointer:coarse){
  .shop-zoom-hint-pointer{display:none}
  .shop-zoom-hint-touch{display:inline}
}
.shop-thumbs{display:flex; flex-wrap:wrap; gap:8px}
.shop-thumbs[hidden],.shop-thumbs button[hidden]{display:none}
.shop-thumbs button{
  width:64px; height:64px; padding:0; overflow:hidden; cursor:pointer;
  border:2px solid var(--line); border-radius:10px; background:var(--paper-2);
}
.shop-thumbs button:hover{border-color:var(--muted)}
.shop-thumbs button[aria-pressed="true"]{border-color:var(--red)}
.shop-thumbs img{width:100%; height:100%; object-fit:cover}
.shop-more{
  align-self:flex-start; padding:7px 14px; border:1px solid var(--line); border-radius:var(--radius-pill);
  background:var(--paper); color:var(--red-deep); font:600 .9rem var(--font-display); cursor:pointer;
}
.shop-more:hover{border-color:var(--red)}
.shop-more[hidden]{display:none}

/* The picker. */
.shop-price{font-family:var(--font-display); font-size:1.65rem; font-weight:700; color:var(--red-deep); margin-bottom:20px}
.shop-compare{margin-left:8px; font-size:1.05rem; font-weight:400; color:var(--muted)}
.shop-set legend{margin-bottom:10px}
.shop-swatches{display:flex; flex-wrap:wrap; gap:10px}
.shop-swatch{position:relative; display:inline-flex; cursor:pointer}
.shop-swatch input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.shop-chip{
  width:40px; height:40px; border-radius:50%; background:var(--swatch,var(--paper-3));
  border:3px solid var(--paper); box-shadow:0 0 0 2px var(--line), inset 0 0 0 1px rgba(0,0,0,.18);
}
.shop-swatch:hover .shop-chip{box-shadow:0 0 0 2px var(--muted), inset 0 0 0 1px rgba(0,0,0,.18)}
.shop-swatch input:checked + .shop-chip{box-shadow:0 0 0 2px var(--red), inset 0 0 0 1px rgba(0,0,0,.18)}
.shop-swatch input:focus-visible + .shop-chip{outline:3px solid var(--gold-deep); outline-offset:3px}
.shop-sizes .choice[hidden]{display:none}
.shop-sizes .choice > label{min-width:58px; justify-content:center}
.shop-sizes .choice[data-state="soldout"] > label{color:var(--muted); text-decoration:line-through; background:var(--paper-2)}
.shop-buy{display:flex; gap:12px; align-items:stretch; margin-top:4px}
.shop-qty input{
  width:78px; height:100%; min-height:48px; padding:0 12px; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px; text-align:center;
}
.shop-qty input:focus{border-color:var(--red); background:var(--paper)}
.shop-add{flex:1}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none; filter:none; box-shadow:none}
.shop-message{min-height:1.6em; margin-top:10px; font-size:.95rem; color:var(--green-deep); font-weight:600}

/* The words under it. */
.shop-desc{margin-top:28px}
.shop-fit{margin-top:24px; padding:18px 20px; border-radius:var(--radius); background:var(--paper-2); border:1px solid var(--line)}
.shop-fit h2{font-size:1.2rem; margin-bottom:10px}
.shop-fit table{border-collapse:collapse; width:100%; font-size:.95rem; font-variant-numeric:tabular-nums}
.shop-fit th,.shop-fit td{padding:7px 10px; border-bottom:1px solid var(--line); text-align:left}
.shop-fit th{font-family:var(--font-display); color:var(--ink)}
.shop-fit .prose{max-width:none; overflow-x:auto}
.shop-folds{margin-top:16px}
.shop-folds .acc-body{color:var(--body)}

/* ------------------------------------------------------- the drawer */
.cart{
  position:fixed; inset:0 0 0 auto; margin:0; padding:0; border:0;
  width:min(420px,100vw); max-width:100vw; height:100%; max-height:none;
  background:var(--paper); color:var(--body); box-shadow:-12px 0 44px rgba(10,10,10,.28);
}
.cart[open]{display:flex; flex-direction:column}
.cart::backdrop{background:rgba(10,10,10,.45)}
html:has(.cart[open]){overflow:hidden}
.cart-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line)}
.cart-head h2{font-size:1.45rem}
.cart-close{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border:0; border-radius:10px; background:var(--paper-3); color:var(--ink); cursor:pointer;
}
.cart-close svg{width:22px; height:22px}
.cart-empty{padding:28px 20px; color:var(--muted)}
.cart-empty[hidden]{display:none}
.cart-lines{list-style:none; margin:0; padding:4px 20px; overflow-y:auto; flex:1}
.cart-line{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line)}
.cart-line img{flex:none; width:72px; height:72px; object-fit:cover; border-radius:10px; background:var(--paper-2)}
.cart-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.cart-name{font-weight:700; color:var(--ink); line-height:1.3}
.cart-variant{font-size:.9rem; color:var(--muted)}
.cart-price{font-size:.95rem}
.cart-qty{display:flex; align-items:center; gap:8px; margin-top:6px}
.cart-qty button[data-qty-dec],.cart-qty button[data-qty-inc]{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0;
  border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); cursor:pointer;
}
.cart-qty button svg{width:16px; height:16px}
.cart-count{min-width:1.6em; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}
.cart-remove{margin-left:6px; padding:4px 2px; border:0; background:none; color:var(--red-deep); font:inherit; font-size:.88rem; text-decoration:underline; cursor:pointer}
.cart-error{padding:0 20px; color:var(--red); font-weight:600; font-size:.92rem}
.cart-error:empty{display:none}
.cart-foot{padding:16px 20px 20px; border-top:1px solid var(--line); background:var(--paper)}
.cart-foot[hidden]{display:none}
.cart-subtotal{display:flex; justify-content:space-between; gap:12px; font-size:1.1rem}
.cart-subtotal strong{color:var(--ink)}
.cart-note{margin-top:2px; font-size:.88rem; color:var(--muted)}
.cart-checkout{width:100%; margin-top:14px}
.cart-fine{margin-top:10px; font-size:.8rem; color:var(--muted); text-align:center}
.cart[aria-busy="true"] .cart-lines,.cart[aria-busy="true"] .cart-foot{opacity:.6; pointer-events:none}