/* ============ SHOP — ready-made designs + on-hand gear ============
   Built on the site's own tokens (styles.css). The one subject-specific flourish is the
   price, set as a swing tag with a punched hole, and the stitched border on a photo that
   hasn't been shot yet — both are things you'd actually find on the gear. */

/* ---- toolbar ---- */
.shop-bar{ display:flex; flex-direction:column; gap:12px; margin:-12px 0 22px; }
.shop-cats, .shop-kind{ display:flex; gap:7px; flex-wrap:wrap; }
.shop-cats:empty{ display:none; }
.shop-cats button, .shop-kind button{
  min-height:38px; padding:0 15px; border-radius:19px; border:1px solid var(--line-strong); background:rgba(255,255,255,.02);
  color:var(--fg-3); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:.18s; }
.shop-cats button:hover, .shop-kind button:hover{ color:var(--fg); border-color:var(--fg-3); }
.shop-cats button[aria-pressed="true"], .shop-kind button[aria-pressed="true"]{ border-color:var(--gold); color:var(--gold); background:rgba(233,180,76,.08); }
.shop-cats button:focus-visible, .shop-kind button:focus-visible, .shop-now input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
.shop-tools{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.shop-now{ display:inline-flex; align-items:center; gap:8px; min-height:38px; font-size:14px; color:var(--fg-2); cursor:pointer; }
.shop-now input{ width:18px; height:18px; accent-color:var(--gold); }
.shop-q{ margin-left:auto; flex:0 1 240px; min-width:0; height:40px; border:1px solid var(--line-strong); border-radius:8px; background:var(--bg-1); color:var(--fg); padding:0 13px; font:inherit; font-size:15px; }
.shop-q:focus{ outline:none; border-color:var(--gold); }

/* ---- grid + cards ---- */
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.shop-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; background:var(--bg-1); overflow:hidden;
  color:inherit; text-decoration:none; transition:transform .2s, border-color .2s, box-shadow .2s; }
.shop-card:hover{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 22px 44px rgba(0,0,0,.45); }
.shop-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.sc-img{ position:relative; aspect-ratio:1; background:radial-gradient(120% 90% at 50% 18%, #25202a 0%, #120f13 62%); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sc-img img{ width:100%; height:100%; object-fit:contain; padding:6%; }
.sc-img img.photo{ object-fit:cover; padding:0; }
.sc-body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.sc-cat{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-4); }
.sc-name{ font-size:16.5px; font-weight:600; line-height:1.3; color:var(--fg); overflow-wrap:anywhere; }
.sc-avail{ margin-top:auto; padding-top:6px; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }

/* availability — semantic colour, separate from the brand accent */
.av-now{ color:#8fd0a3; }  .av-print{ color:#b9aede; }  .av-out{ color:#f08a91; }

/* swing tag */
.tag-price{ position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 9px;
  background:#f4efe4; color:#141114; border-radius:4px 10px 10px 4px; font-family:'Anton',sans-serif; font-size:17px; letter-spacing:.02em; line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.4); }
.tag-price::before{ content:""; width:7px; height:7px; border-radius:50%; background:#120f13; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35); }
.tag-price small{ font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; font-weight:600; opacity:.7; }

/* a photo that hasn't been shot yet: the item's name, framed in a stitch line */
.ph-soon{ position:absolute; inset:14px; border:1.5px dashed rgba(233,180,76,.38); border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:18px; text-align:center; }
.ph-soon b{ font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(22px,2.6vw,30px); line-height:1.02; color:var(--fg-2); letter-spacing:.02em; overflow-wrap:anywhere; }
.ph-soon span{ font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

/* loading skeleton */
.shop-card.skel{ pointer-events:none; }
.shop-card.skel .sc-img{ background:linear-gradient(100deg,#141114 30%,#1d181b 50%,#141114 70%) 0 0/300% 100%; animation:shopShimmer 1.4s linear infinite; }
.shop-card.skel .sc-body span{ display:block; height:12px; border-radius:6px; background:#1d181b; }
.shop-card.skel .sc-body span:last-child{ width:55%; }
@keyframes shopShimmer{ to{ background-position:-300% 0; } }

/* ---- empty / error / no-match ---- */
.shop-state{ text-align:center; padding:56px 20px; border:1px dashed var(--line-strong); border-radius:14px; background:rgba(255,255,255,.015); }
.shop-state .disp{ font-family:'Anton',sans-serif; font-size:clamp(26px,4vw,40px); color:var(--fg); letter-spacing:.02em; margin-bottom:10px; text-wrap:balance; }
.shop-state p{ color:var(--fg-3); max-width:520px; margin:0 auto 22px; }
.shop-state a:not([class]){ color:var(--gold); }
.shop-state-cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.shop-none{ color:var(--fg-3); padding:26px 0; }
.shop-none button{ background:none; border:none; color:var(--gold); font:inherit; text-decoration:underline; cursor:pointer; padding:6px 2px; }

/* ---- one item ---- */
.shop-back{ display:inline-flex; align-items:center; gap:8px; min-height:40px; margin-bottom:18px; color:var(--fg-3); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; }
.shop-back:hover{ color:var(--gold); }
.si-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(22px,4vw,54px); align-items:start; }
.si-media{ position:sticky; top:calc(var(--top-h) + var(--nav-h) + 18px); }
.si-main{ position:relative; aspect-ratio:1; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:radial-gradient(120% 90% at 50% 18%, #25202a 0%, #120f13 62%); display:flex; align-items:center; justify-content:center; }
.si-main img{ width:100%; height:100%; object-fit:contain; padding:5%; }
.si-main img.photo{ object-fit:cover; padding:0; }
.si-thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.si-thumbs button{ width:64px; height:64px; border-radius:8px; border:1px solid var(--line); background:#120f13; padding:0; overflow:hidden; cursor:pointer; }
.si-thumbs button[aria-pressed="true"]{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.si-thumbs img{ width:100%; height:100%; object-fit:cover; }
.si-info h1{ font-size:clamp(32px,4.8vw,52px); line-height:1.02; margin:8px 0 10px; text-wrap:balance; }
.si-price{ font-family:'Anton',sans-serif; font-size:30px; letter-spacing:.02em; color:var(--fg); }
.si-price small{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; color:var(--fg-3); margin-left:8px; }
.si-avail{ margin:8px 0 16px; font-size:14px; }
.si-desc{ color:var(--fg-2); max-width:62ch; white-space:pre-line; margin-bottom:6px; }
.si-block{ margin-top:22px; }
.si-lbl{ display:flex; justify-content:space-between; gap:10px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); margin-bottom:10px; }
.si-lbl b{ color:var(--fg); font-weight:600; letter-spacing:.06em; }
.si-colors{ display:flex; gap:10px; flex-wrap:wrap; }
.si-colors button{ width:40px; height:40px; border-radius:50%; border:2px solid var(--line-strong); cursor:pointer; padding:0; box-shadow:inset 0 0 0 2px rgba(0,0,0,.25); }
.si-colors button[aria-pressed="true"]{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(233,180,76,.25), inset 0 0 0 2px rgba(0,0,0,.25); }
.si-colors button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.si-sum{ margin-top:22px; padding:18px; border:1px solid var(--line-strong); border-radius:12px; background:var(--bg-1); }
.si-sum-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.si-sum-row .amt{ font-family:'Anton',sans-serif; font-size:28px; }
.si-note{ font-size:12.5px; color:var(--fg-3); margin:8px 0 14px; }
.si-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.si-cta .btn-accent, .si-cta .btn-ghost{ flex:1 1 180px; justify-content:center; }
.si-extra{ display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; }
.si-extra button, .si-extra a{ background:none; border:none; color:var(--fg-3); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; padding:10px 0; text-decoration:none; }
.si-extra button:hover, .si-extra a:hover{ color:var(--gold); }
.si-mine{ margin-top:18px; padding:14px 16px; border:1px solid rgba(233,180,76,.3); border-radius:10px; background:rgba(233,180,76,.05); display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.si-mine p{ margin:0; font-size:13.5px; color:var(--fg-2); flex:1 1 220px; }
.si-missing{ padding:60px 0; text-align:center; }

/* ---- home page strip ---- */
.shop-strip .shop-grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.shop-strip-foot{ margin-top:26px; display:flex; justify-content:center; }

@media (max-width:860px){
  .si-grid{ grid-template-columns:1fr; }
  .si-media{ position:static; }
}
@media (max-width:560px){
  .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .sc-body{ padding:11px 11px 13px; }
  .sc-name{ font-size:14.5px; }
  .tag-price{ top:8px; right:8px; font-size:14px; padding:5px 8px 5px 7px; }
  .shop-q{ margin-left:0; flex:1 1 100%; }
  .ph-soon b{ font-size:19px; }
}
@media (prefers-reduced-motion:reduce){
  .shop-card, .shop-card:hover{ transition:none; transform:none; }
  .shop-card.skel .sc-img{ animation:none; }
}

/* services page: link from the On-Hand Designs card into the shop */
.svc-link{ display:inline-flex; align-items:center; min-height:40px; margin-top:6px; margin-left:14px; color:var(--fg-2); font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; }
.svc-link:hover{ color:var(--gold); }