/* ==========================================================================
   CK Tech Check shop: /shop/ and its product pages, drawn by the Worker
   (src/worker/shop/index.js) inside the site's own shell. Loaded on those
   pages only, so the rest of the site pays nothing for it. Ported from Santa's
   Toy Run's shop.css in this site's dark colors: the page itself sits in a
   .cktc block and takes its tokens (--surface, --accent and the rest); the
   header's cart button and the cart drawer sit outside it and take the
   shell's --ck-* tokens.
   ========================================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------------ header cart */
/* After the Card Finder button on a desktop, between search and the menu
   button on a phone. shop.js keeps the count and the label current. */
.ck-cart{
  position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#f8f8f8;
  transition:color .15s,background-color .15s;
}
.ck-cart svg{width:21px;height:21px}
.ck-cart:hover{color:var(--ck-accent);background:rgba(255,255,255,.1)}
.ck-cart:focus-visible{outline:2px solid var(--ck-accent);outline-offset:2px}
.ck-cart-count{
  position:absolute;top:-2px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--ck-accent);color:#04141a;font:700 11.5px/19px "Space Grotesk",Inter,sans-serif;text-align:center;
}
.ck-cart-count[hidden]{display:none}
/* The phone header carries search, the cart and the menu beside the logo,
   so the logo gives way on the narrowest screens. */
@media (max-width:420px){.cktc-shop-page .ck-logo img{height:28px}}
@media (max-width:360px){.cktc-shop-page .ck-logo img{height:24px}}

/* ------------------------------------------------------------ frame */
.cktc-shop{padding:104px 0 72px;font-size:17px}
.cktc-shop h1,.cktc-shop h2{font-family:"Space Grotesk","Space Grotesk Fallback",sans-serif;color:#fff;letter-spacing:-.01em;margin:0}
.cktc-shop p{margin:0}
.shop-sample{
  margin:0 0 26px;padding:10px 16px;border-radius:12px;font-size:15px;
  background:rgba(247,185,85,.08);border:1px solid rgba(247,185,85,.55);color:var(--text);
}
.shop-sample strong{color:#f7b955}
.shop-note{margin-top:36px !important;max-width:70ch;font-size:15px;color:var(--muted)}
.shop-gone{padding-block:40px 20px}
.shop-gone h1{font-size:clamp(28px,4vw,40px);margin-bottom:12px}
.shop-gone p + p{margin-top:22px}

/* The one button style: the site's cyan with dark text, as on the 404 page. */
.cktc-shop .shop-btn,.cart .shop-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;
  border:0;border-radius:10px;background:var(--accent,var(--ck-accent));color:#04141a;cursor:pointer;
  font:600 16px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;
  transition:filter .15s,transform .15s;
}
.cktc-shop .shop-btn:hover,.cart .shop-btn:hover{filter:brightness(1.08);transform:translateY(-1px);text-decoration:none}
.cktc-shop .shop-btn:focus-visible,.cart .shop-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cktc-shop .shop-btn[disabled],.cart .shop-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;filter:none}

/* ------------------------------------------------------- the hero */
.shop-hero{text-align:center;max-width:var(--measure);margin:0 auto 30px}
.shop-hero .eyebrow{margin-bottom:12px}
.shop-hero h1{font-size:clamp(34px,5vw,52px);line-height:1.08;text-wrap:balance}
.shop-intro{margin-top:14px !important;color:var(--muted);font-size:17.5px;line-height:1.6}

/* ------------------------------------------------------- the cards */
/* A small catalog sits centred under the hero rather than in the first
   columns of an empty row; four fit across the 1076 px column (4 x 248 + 3 x
   22 = 1058), and phones take two across. */
.shop-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,248px));justify-content:center;gap:22px;
}
@media (max-width:620px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.shop-card[hidden]{display:none}
.cktc-shop .shop-card a{
  display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.cktc-shop .shop-card a:hover{text-decoration:none;border-color:rgba(31,200,227,.55);transform:translateY(-2px);
  box-shadow:0 18px 40px -18px rgba(31,200,227,.45)}
.cktc-shop .shop-card a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shop-card-media{display:block;aspect-ratio:3/4;background:#e9ecf1}
.shop-card-media img{display:block;width:100%;height:100%;object-fit:contain}
/* The body fills the card and the price sits at its foot, so prices line up
   across a row whatever a name's length; names wrap in balanced lines. */
.shop-card-body{flex:1;display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.cktc-shop .shop-card-name{font-size:17px;font-weight:600;line-height:1.3;text-wrap:balance}
.shop-card-price{margin-top:auto;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.shop-card-tag{
  align-self:flex-start;margin-top:4px;padding:3px 10px;border-radius:999px;
  background:rgba(255,93,115,.14);color:#ff8a9b;font:700 11.5px/1.4 "Space Grotesk",Inter,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
}
@media (max-width:620px){
  .shop-card-body{padding:10px 11px 12px}
  .cktc-shop .shop-card-name{font-size:15px}
  .shop-card-price{font-size:15px}
}
.shop-empty{text-align:center;padding:36px 20px;border:1px dashed var(--border-strong);border-radius:16px;background:var(--surface)}
.cktc-shop .shop-empty h2{font-size:24px;margin-bottom:8px}
.shop-empty p{color:var(--muted)}

/* ------------------------------------------------------ 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 cyan, 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{margin-right:4px;font:600 11.5px/1 "Space Grotesk",Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:599px){.shop-filter-label{flex-basis:100%;text-align:center;margin:4px 0 0}}
.cktc-shop .shop-pill{
  display:inline-flex;align-items:baseline;gap:.45em;padding:8px 15px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--border-strong);color:var(--text);
  font:600 14.5px/1.3 "Space Grotesk",Inter,sans-serif;text-decoration:none;
  transition:border-color .15s,background-color .15s;
}
.cktc-shop .shop-pill:hover,.cktc-shop .shop-pill:focus-visible{border-color:var(--accent);text-decoration:none}
.cktc-shop .shop-pill[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:#04141a}
.cktc-shop .shop-pill[aria-disabled="true"]{color:var(--muted);opacity:.45;cursor:default}
.cktc-shop .shop-pill[aria-disabled="true"]:hover{border-color:var(--border-strong)}
.shop-pill-n{font-size:12.5px;font-weight:600;opacity:.75;font-variant-numeric:tabular-nums}
.shop-filter-note{margin:-8px auto 26px !important;max-width:62ch;color:var(--muted);text-align:center;font-size:16px}
.shop-filter-note[hidden],.shop-none[hidden]{display:none}
.shop-none{margin-bottom:26px !important;color:var(--muted);text-align:center}

/* ---------------------------------------------------- product page */
.shop-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:0;font-size:15px;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}
@media (max-width:860px){.shop-product-grid{grid-template-columns:1fr}}
.cktc-shop .shop-title{font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin-bottom:14px;text-wrap:balance}

/* The photographs. The large one stays in view beside the details on a
   desktop; the header is fixed, so it sits below it. Fourthwall's mockups
   are light, so they sit on a light tile. */
.shop-gallery{display:flex;flex-direction:column;gap:12px}
@media (min-width:861px){.shop-gallery{position:sticky;top:84px}}
.shop-main{aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#e9ecf1;border:1px solid var(--border)}
.shop-main img{display:block;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(--accent);outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.shop-zoom img{transition:none}}
.shop-zoom-hint{color:var(--muted);font-size:14px}
.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(--border-strong);border-radius:10px;background:#e9ecf1;
}
.shop-thumbs button:hover{border-color:var(--muted)}
.shop-thumbs button[aria-pressed="true"]{border-color:var(--accent)}
.shop-thumbs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shop-thumbs img{display:block;width:100%;height:100%;object-fit:cover}
.shop-more{
  align-self:flex-start;padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.04);color:var(--text);font:600 14px "Space Grotesk",Inter,sans-serif;
}
.shop-more:hover{border-color:var(--accent)}
.shop-more[hidden]{display:none}

/* The picker. */
.shop-price{margin-bottom:22px !important;font:700 28px/1.2 "Space Grotesk",Inter,sans-serif;color:var(--accent);font-variant-numeric:tabular-nums}
.shop-compare{margin-left:8px;font-size:17px;font-weight:400;color:var(--muted)}
.shop-set{border:0;padding:0;margin:0 0 20px;min-width:0}
.shop-set legend{padding:0;margin-bottom:10px;font-size:15px;color:var(--muted)}
.shop-set legend span{color:var(--text);font-weight:600}
.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:38px;height:38px;border-radius:50%;background:var(--swatch,var(--surface-2));
  border:3px solid var(--bg);box-shadow:0 0 0 2px var(--border-strong),inset 0 0 0 1px rgba(255,255,255,.12);
}
.shop-swatch:hover .shop-chip{box-shadow:0 0 0 2px var(--muted),inset 0 0 0 1px rgba(255,255,255,.12)}
.shop-swatch input:checked + .shop-chip{box-shadow:0 0 0 2px var(--accent),inset 0 0 0 1px rgba(255,255,255,.12)}
.shop-swatch input:focus-visible + .shop-chip{outline:2px solid #fff;outline-offset:4px}
.shop-sizes{display:flex;flex-wrap:wrap;gap:8px}
.shop-sizes .choice{position:relative;display:inline-flex}
.shop-sizes .choice[hidden]{display:none}
.shop-sizes .choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.shop-sizes .choice > label{
  display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:44px;padding:8px 14px;
  border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--text);cursor:pointer;
  font:600 15px/1.2 Inter,sans-serif;font-variant-numeric:tabular-nums;transition:border-color .15s,background-color .15s;
}
.shop-sizes .choice > label:hover{border-color:var(--muted)}
.shop-sizes .choice input:checked + label{border-color:var(--accent);background:rgba(31,200,227,.12);color:#fff}
.shop-sizes .choice input:focus-visible + label{outline:2px solid #fff;outline-offset:2px}
.shop-sizes .choice[data-state="soldout"] > label{color:var(--muted);text-decoration:line-through;background:transparent}
.shop-buy{display:flex;gap:12px;align-items:stretch;margin-top:4px}
.shop-qty input{
  width:76px;height:100%;min-height:48px;padding:0 10px;text-align:center;
  font:600 16px Inter,sans-serif;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border-strong);border-radius:10px;
}
.shop-qty input:focus{outline:none;border-color:var(--accent)}
.shop-add{flex:1}
.shop-message{min-height:1.6em;margin-top:10px !important;font-size:15px;font-weight:600;color:var(--ok)}

/* The words under it: Fourthwall's rich text, cleaned by the Worker. */
.shop-prose{color:var(--text);font-size:16.5px;line-height:1.7}
.shop-prose > * + *{margin-top:12px !important}
.shop-prose ul,.shop-prose ol{padding-left:1.3em;margin:0}
.shop-prose li + li{margin-top:4px}
.shop-prose strong{color:#fff}
.shop-prose a{color:var(--accent)}
.shop-desc{margin-top:30px}
.shop-fit{margin-top:24px;padding:18px 20px;border-radius:14px;background:var(--surface);border:1px solid var(--border)}
.cktc-shop .shop-fit h2{font-size:19px;margin-bottom:10px}
.shop-fit .shop-prose{overflow-x:auto}
.shop-fit table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
.shop-fit th,.shop-fit td{padding:7px 10px;border-bottom:1px solid var(--border);text-align:left}
.shop-fit th{font-family:"Space Grotesk",Inter,sans-serif;color:#fff}
.shop-folds{margin-top:18px;border-top:1px solid var(--border)}
.shop-fold{border-bottom:1px solid var(--border)}
.shop-fold summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 2px;cursor:pointer;list-style:none;
  font:600 16.5px/1.3 "Space Grotesk",Inter,sans-serif;color:#fff;
}
.shop-fold summary::-webkit-details-marker{display:none}
.shop-fold summary::after{content:"+";font-size:22px;line-height:1;color:var(--accent);transition:transform .2s}
.shop-fold[open] summary::after{transform:rotate(45deg)}
.shop-fold summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shop-fold-body{padding:0 2px 16px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.shop-fold summary::after{transition:none}}

/* ------------------------------------------------------- the drawer */
/* Outside the .cktc block, so it takes the shell's tokens. */
.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(--ck-surface);color:var(--ck-text);border-left:1px solid rgba(31,200,227,.2);
  box-shadow:-14px 0 44px rgba(0,0,0,.6);font:16px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.cart[open]{display:flex;flex-direction:column}
.cart::backdrop{background:rgba(3,5,9,.62)}
html:has(.cart[open]){overflow:hidden}
.cart *{box-sizing:border-box}
.cart p{margin:0}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--ck-border)}
.cart-head h2{margin:0;font:700 22px/1.2 "Space Grotesk",Inter,sans-serif;color:#fff}
.cart-close{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#f8f8f8;cursor:pointer;
}
.cart-close svg{width:22px;height:22px}
.cart-close:hover{color:var(--ck-accent)}
.cart-empty{padding:28px 20px !important;color:var(--ck-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(--ck-border)}
.cart-line img{flex:none;width:72px;height:72px;object-fit:cover;border-radius:10px;background:#e9ecf1}
.cart-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.cart-name{font-weight:600;color:#fff;line-height:1.3;text-decoration:none}
.cart-name:hover{color:var(--ck-accent)}
.cart-variant{font-size:14.5px;color:var(--ck-muted)}
.cart-price{font-size:15px;font-variant-numeric:tabular-nums}
.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:34px;height:34px;padding:0;
  border:1px solid var(--ck-border-strong);border-radius:8px;background:var(--ck-surface-2);color:#f8f8f8;cursor:pointer;
}
.cart-qty button[data-qty-dec]:hover,.cart-qty button[data-qty-inc]:hover{border-color:var(--ck-accent)}
.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(--ck-accent);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
.cart-error{padding:0 20px !important;color:#ff8a9b;font-weight:600;font-size:15px}
.cart-error:empty{display:none}
.cart-foot{padding:16px 20px 20px;border-top:1px solid var(--ck-border);background:var(--ck-surface)}
.cart-foot[hidden]{display:none}
.cart-subtotal{display:flex;justify-content:space-between;gap:12px;font-size:17px}
.cart-subtotal strong{color:#fff;font-variant-numeric:tabular-nums}
.cart-note{margin-top:2px !important;font-size:14px;color:var(--ck-muted)}
.cart-checkout{width:100%;margin-top:14px}
.cart-fine{margin-top:10px !important;font-size:13px;color:var(--ck-muted);text-align:center}
.cart[aria-busy="true"] .cart-lines,.cart[aria-busy="true"] .cart-foot{opacity:.6;pointer-events:none}
.cart button:focus-visible,.cart a:focus-visible{outline:2px solid var(--ck-accent);outline-offset:2px}