/* ─────────────────────────────────────────────────────────────────────────
   DirtGPS store.
   Uses the site's own language: navy ground, orange action, Bebas display,
   .reveal scroll-ins and the topo backdrop. Motion is restrained — lift,
   glow and fade, nothing that bounces or spins.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --surface:     #111d2e;
  --surface-2:   #0d1826;
  --line:        #263346;
  --line-strong: #3a4a60;
  --text:        #e6ecf4;
  --text-dim:    #94a5bb;
  --text-faint:  #6b7d94;
  --shop-max:    1240px;
}

/* Must track .nav.nav-store's height exactly, or content sits under the
   fixed bar on the wider end of its clamp. */
.shop-page { position: relative; padding-top: clamp(60px, 8vw, 76px); }
.shop-wrap { max-width: var(--shop-max); margin: 0 auto; padding: 0 var(--gutter);
  position: relative; z-index: 1; }

/* ── page heads ─────────────────────────────────────────────────────── */
.shop-head { padding: clamp(22px, 3.5vw, 38px) 0 clamp(14px, 2vw, 22px); }
.shop-head h1 {
  font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: .06em; line-height: 1.1; margin: 0; color: #fff;
  text-transform: uppercase;
}
.shop-head .accent { color: var(--orange); }
.shop-head p { color: var(--text-dim); margin: 0; font-size: clamp(15px, 2vw, 17px);
  max-width: 54ch; line-height: 1.6; }

/* ── product grid + card ────────────────────────────────────────────── */
.product-grid {
  display: grid; gap: clamp(14px, 2.2vw, 26px);
  /* auto-fit + a capped track width, rather than auto-fill + 1fr: with only
     three products, 1fr stretched them to fill whatever row a wide screen
     fit, leaving one or two cards oversized and the row left-aligned.
     Capping the track width and centring the row fixes both — it also
     keeps working once there are enough products to wrap onto full rows. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;
  padding-bottom: clamp(48px, 7vw, 88px);
}
@media (max-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 380px) { .product-grid { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); overflow: hidden; position: relative;
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.card:hover {
  border-color: rgba(255,149,0,.5); transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(255,149,0,.12);
}
.card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.card-media { position: relative; aspect-ratio: 1; background: var(--surface-2);
  overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .35s var(--ease-out), transform .6s var(--ease-out); }
/* The second view sits directly on top and cross-fades in on hover. A slight
   lift on the pair keeps it feeling responsive without the swap turning into
   a zoom as well. */
.card-media img.alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card-media img.alt,
.card:focus-within .card-media img.alt { opacity: 1; }
.card:hover .card-media img { transform: scale(1.02); }
/* No hover on touch: the first view stays, and the swap never half-applies. */
@media (hover: none) {
  .card-media img.alt { display: none; }
  .card:hover .card-media img { transform: none; }
}

.card-media.is-empty { display: grid; place-items: center; }
.card-media.is-empty::after { content: attr(data-empty); color: #4a5a70; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; }

/* Quick-add reveals on hover; always visible on touch, where hover is a lie. */
.card-quick {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  overflow: hidden; isolation: isolate;
  min-height: 44px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--orange); color: var(--navy); font-family: inherit;
  font-weight: 700; font-size: 13.5px; letter-spacing: .03em;
  opacity: 0; transform: translateY(8px);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), filter .15s;
}
.card:hover .card-quick, .card-quick:focus-visible { opacity: 1; transform: none; }
.card-quick:hover { filter: brightness(1.08); }
/* On touch the pill was permanently over the artwork, hiding the product it
   was meant to sell. Tapping the card opens the product page, which is where
   a size has to be chosen anyway, so nothing is lost by removing it. */
@media (hover: none) { .card-quick { display: none; } }

/* One-shot sweep when the card is hovered — matches .btn-dl on the main
   site. No idle loop: this button is invisible until hover, so a looping
   shimmer would already be mid-cycle the instant it appears. */
.card-quick::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(-120%);
}
.card:hover .card-quick::before {
  transform: translateX(120%); transition: transform .7s var(--ease-out) .1s;
}
@media (prefers-reduced-motion: reduce) { .card-quick::before { transition: none; } }

.card-body { padding: 15px 16px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card-body h3 { font-size: 16px; margin: 0; color: var(--text); font-weight: 600; line-height: 1.3; }
.card-price { margin: auto 0 0; padding-top: 9px; display: flex; align-items: baseline; gap: 8px; }
.card-price .now { color: var(--orange); font-weight: 700; font-size: 16.5px;
  font-variant-numeric: tabular-nums; }
.card-price .was { color: var(--text-faint); text-decoration: line-through; font-size: 13px;
  font-variant-numeric: tabular-nums; }


/* ── product detail ─────────────────────────────────────────────────── */
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px); padding-bottom: clamp(48px, 7vw, 88px); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: 26px; } }

.gallery { display: flex; flex-direction: column; gap: 12px; position: sticky;
  top: calc(clamp(60px, 8vw, 76px) + 24px); }
@media (max-width: 900px) { .gallery { position: static; } }
.gallery-main { position: relative; aspect-ratio: 1; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden;
  display: grid; place-items: center; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-out); }
@media (hover: hover) { .gallery-main:hover img { transform: scale(1.08); } }
.gallery-main.is-empty::after { content: 'Product photography coming soon';
  color: #4a5a70; font-size: 13px; }

/* Arrows to step through the gallery without reaching for a thumbnail. */
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(10,22,40,.62); color: #fff; backdrop-filter: blur(4px);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .2s var(--ease-out), background .2s, transform .15s; }
.gallery-main:hover .gallery-nav, .gallery-nav:focus-visible { opacity: 1; }
.gallery-nav:hover { background: var(--orange); color: var(--navy); }
.gallery-nav:active { transform: translateY(-50%) scale(.92); }
.gallery-nav:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }
/* No hover on touch: arrows stay visible, there is no other way to reveal them. */
@media (hover: none) { .gallery-nav { opacity: 1; } }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.thumb { width: 70px; height: 70px; padding: 0; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); cursor: pointer;
  transition: border-color .2s, transform .2s; }
.thumb:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb[aria-current="true"] { border-color: var(--orange); }
.thumb:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.pdp-info h1 { font-family: var(--font-display); font-size: clamp(32px, 5.5vw, 52px);
  letter-spacing: .02em; line-height: .98; margin: 0 0 14px; color: #fff; }
.pdp-price { display: flex; align-items: baseline; gap: 11px; margin: 0 0 18px; }
.pdp-price .now { color: var(--orange); font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.pdp-price .was { color: var(--text-faint); text-decoration: line-through; font-size: 16px; }
.pdp-lede { color: var(--text-dim); font-size: 16px; line-height: 1.65; margin: 0 0 26px; }

.field { margin-bottom: 20px; }
.field-label { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  color: var(--text-dim); margin-bottom: 10px; }
.field-label .chosen { text-transform: none; letter-spacing: 0; color: var(--orange);
  font-weight: 600; }

.swatches, .opts { display: flex; flex-wrap: wrap; gap: 9px; }
.opt { min-width: 54px; min-height: 48px; padding: 0 15px; border-radius: var(--radius-sm);
  cursor: pointer; background: transparent; color: var(--text);
  border: 1px solid var(--line-strong); font-size: 14px; font-weight: 600; font-family: inherit;
  transition: background .18s, border-color .18s, color .18s, transform .15s; }
.opt:hover { border-color: var(--orange); transform: translateY(-2px); }
.opt[aria-pressed="true"] { background: var(--orange); border-color: var(--orange);
  color: var(--navy); }
.opt:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.swatch { width: 44px; height: 44px; border-radius: 999px; cursor: pointer; padding: 3px;
  background: transparent; border: 1px solid var(--line-strong); transition: border-color .2s, transform .15s; }
.swatch:hover { transform: translateY(-2px); }
.swatch span { display: block; width: 100%; height: 100%; border-radius: 999px; }
.swatch[aria-pressed="true"] { border-color: var(--orange); border-width: 2px; padding: 2px; }
.swatch:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); overflow: hidden; }
.qty button { width: 48px; height: 48px; background: transparent; border: 0; color: var(--text);
  font-size: 20px; cursor: pointer; font-family: inherit; transition: background .18s, color .18s; }
.qty button:hover:not(:disabled) { background: var(--surface); color: var(--orange); }
.qty button:disabled { opacity: .3; cursor: not-allowed; }
.qty output { min-width: 48px; text-align: center; font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; }

/* Buttons mirror .btn-primary from the site: lift, orange glow, press-in,
   with the same sweep the download button uses. */
.btn-buy { position: relative; overflow: hidden; isolation: isolate;
  width: 100%; min-height: 56px; border: 0; border-radius: var(--radius-sm);
  cursor: pointer; background: var(--orange); color: var(--navy); font-weight: 700;
  font-size: 16px; font-family: inherit; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform .15s, box-shadow .2s, filter .15s; }
.btn-buy:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--orange-glow);
  filter: brightness(1.04); }
.btn-buy:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.btn-buy:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-buy.added { background: #2fbf71; }

.btn-buy::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: buyShimmer 3.6s var(--ease-out) infinite;
}
.btn-buy:hover::before { animation: none; transform: translateX(120%);
  transition: transform .7s var(--ease-out); }
@keyframes buyShimmer {
  0%, 55% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-buy::before { animation: none; transition: none; }
}


.form-error { color: #ff6b6b; font-size: 13.5px; margin: 10px 0 0; min-height: 1.2em; }

.pdp-assure { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0;
  color: var(--text-faint); font-size: 13px; }
.pdp-assure span { display: inline-flex; align-items: center; gap: 7px; }
.pdp-assure svg { color: var(--orange); flex: none; }

/* Mobile sticky buy bar — the pattern every good mobile store uses. */
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; align-items: center; gap: 12px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(13,24,38,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform .3s var(--ease-out); }
.buy-bar.show { transform: none; }
.buy-bar .bb-price { color: var(--orange); font-weight: 700; font-size: 17px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.buy-bar .btn-buy { min-height: 50px; }
@media (max-width: 900px) { .buy-bar { display: flex; } }

/* ── accordions ─────────────────────────────────────────────────────── */
.acc { border-top: 1px solid var(--line); margin-top: 30px; }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { cursor: pointer; padding: 17px 0; font-size: 12.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text);
  display: flex; justify-content: space-between; align-items: center; list-style: none;
  transition: color .2s; }
.acc summary:hover { color: var(--orange); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; color: var(--orange); font-size: 20px; font-weight: 400;
  transition: transform .3s var(--ease-out); }
.acc details[open] summary::after { content: '\2212'; }
.acc summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.acc .acc-body { padding: 0 0 18px; color: var(--text-dim); font-size: 15px; line-height: 1.7; }
.acc .acc-body ul { margin: 0; padding-left: 18px; }
.acc .acc-body li { margin-bottom: 6px; }

/* ── cart ───────────────────────────────────────────────────────────── */
.nav-cart { position: relative; display: inline-flex; align-items: center; gap: 9px;
  background: transparent; border: 1px solid var(--line-strong); cursor: pointer;
  color: var(--text); padding: 8px 18px 8px 15px; min-height: 44px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; transition: border-color .2s, color .2s, transform .15s; }
.nav-cart:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-1px); }
.nav-cart:active { transform: scale(.96); }
.nav-cart:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.nav-cart .count { background: var(--orange); color: var(--navy); font-size: 11px;
  font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 6px; font-variant-numeric: tabular-nums; }
.nav-cart .count[hidden] { display: none; }
.nav-cart.bump { animation: cartBump .45s var(--ease-spring); }
@keyframes cartBump {
  0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); }
}

.cart-scrim { position: fixed; inset: 0; z-index: 1100; background: rgba(4,10,19,.72);
  opacity: 0; pointer-events: none; transition: opacity .28s var(--ease-out);
  backdrop-filter: blur(2px); }
.cart-scrim.open { opacity: 1; pointer-events: auto; }

.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 430px; max-width: 100%;
  z-index: 1101; background: var(--surface-2); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .34s var(--ease-out); box-shadow: -20px 0 60px rgba(0,0,0,.5); }
.cart-drawer.open { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cart-drawer, .cart-scrim, .buy-bar { transition: none; }
  .card:hover { transform: none; }
  .nav-cart.bump { animation: none; }
}

.cart-hd { display: flex; align-items: center; justify-content: space-between;
  padding: 20px; border-bottom: 1px solid var(--line); }
.cart-hd h2 { font-family: var(--font-display); font-size: 27px; letter-spacing: .04em;
  margin: 0; color: #fff; }
.cart-hd .n { color: var(--text-faint); font-size: 13px; font-family: var(--font-sans);
  letter-spacing: 0; margin-left: 9px; }
.cart-close { background: transparent; border: 0; color: var(--text-dim); font-size: 27px;
  cursor: pointer; line-height: 1; width: 44px; height: 44px; border-radius: 8px;
  transition: color .2s, background .2s; }
.cart-close:hover { color: var(--orange); background: var(--surface); }

.cart-items { flex: 1; overflow-y: auto; padding: 6px 20px; margin: 0; list-style: none; }
.cart-empty { padding: 60px 20px; text-align: center; color: var(--text-faint); font-size: 15px; }
.cart-empty svg { color: var(--line-strong); margin-bottom: 14px; }

.cart-line { display: grid; grid-template-columns: 66px 1fr auto; gap: 13px;
  padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start;
  animation: lineIn .3s var(--ease-out); }
@keyframes lineIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.cart-line-img { width: 66px; height: 66px; border-radius: var(--radius-sm);
  background: var(--surface); object-fit: cover; display: block; }
.cart-line h4 { margin: 0 0 3px; font-size: 14.5px; color: var(--text); font-weight: 600;
  line-height: 1.35; }
.cart-line .variant { color: var(--text-faint); font-size: 12.5px; margin: 0 0 8px; }
.cart-line .line-price { color: var(--orange); font-weight: 700; font-size: 14.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-line .qty { transform: scale(.82); transform-origin: left center; }
.cart-line .remove { background: transparent; border: 0; color: var(--text-faint);
  font-size: 12.5px; cursor: pointer; padding: 6px 0; text-decoration: underline;
  transition: color .2s; }
.cart-line .remove:hover { color: #ff6b6b; }

.cart-ft { padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--surface); }
.cart-ft .btn-buy { min-height: 50px; font-size: 15px; }
.cart-row { display: flex; justify-content: space-between; margin-bottom: 6px;
  color: var(--text-dim); font-size: 13.5px; }
/* Before a quote exists, the postage figure is a placeholder, not a price —
   keep it visibly smaller and quieter so it never reads as "free". */
.cart-row .pending { font-size: 12px; color: var(--text-faint); }
.cart-row.total { color: var(--text); font-weight: 700; font-size: 16px; margin-bottom: 12px;
  padding-top: 8px; border-top: 1px solid var(--line); }
.cart-row.total span:last-child { color: var(--orange); font-variant-numeric: tabular-nums; }
.cart-note { color: var(--text-faint); font-size: 12.5px; margin: 12px 0 0; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 7px; }
.cart-note svg { color: var(--text-faint); flex: none; }

/* Toast confirming an add — feedback without hijacking the page. */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  z-index: 1200; background: var(--surface); border: 1px solid var(--orange);
  color: var(--text); padding: 13px 20px; border-radius: 999px; font-size: 14px;
  font-weight: 600; opacity: 0; pointer-events: none; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) { .toast { bottom: 92px; } }

/* ── cart: delivery address step ────────────────────────────────────── */


/* ── shop hero ──────────────────────────────────────────────────────────
   The store's identity lives here rather than in the bar: the mark, then
   STORE, then the line. An orange glow follows the cursor across it.
   ───────────────────────────────────────────────────────────────────── */
.shop-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-2);
  border-bottom: 1px solid rgba(255,149,0,.22);
  padding: clamp(22px, 3vw, 38px) 0 clamp(20px, 2.6vw, 32px);
  --mx: 50%; --my: 50%;
}
/* A little depth so the band is not a flat rectangle of navy. */
.shop-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.045), transparent 58%),
    radial-gradient(90% 70% at 50% 118%, rgba(10,22,40,.85), transparent 60%);
}
.shop-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, rgba(255,149,0,0), var(--orange), rgba(255,149,0,0));
}

.hero-cursor {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(340px circle at var(--mx) var(--my),
              rgba(255,149,0,.20), rgba(255,149,0,.06) 42%, transparent 68%);
  transition: opacity .45s var(--ease-out);
}
.shop-hero:hover .hero-cursor { opacity: 1; }

.shop-hero-inner { position: relative; z-index: 1; text-align: center; }

/* The mark and STORE are one lockup: STORE is justified to the exact width
   of the wordmark above it, which is how a sub-brand is set properly. The
   decorative rules that were here read as clipart, so they are gone. */
/* Centred, and the statement holds one line at every width — the size is
   driven by viewport width so it scales rather than wraps. */
.shop-hero-store { margin: 0 0 clamp(9px, 1.2vw, 14px); color: #fff;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4.2vw, 48px); letter-spacing: .06em; line-height: 1;
  text-transform: uppercase; text-indent: .06em; }

.shop-hero-kicker { margin: 0 0 clamp(3px, .4vw, 5px); color: var(--orange);
  font-size: clamp(10px, 1.15vw, 12px); font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; }

.shop-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(18px, 3.6vw, 40px); line-height: 1; letter-spacing: .04em;
  margin: 0; color: #fff; text-transform: uppercase; white-space: nowrap;
}

.shop-hero h1 .accent { color: var(--orange); }

@media (max-width: 560px) {
  .shop-hero-kicker { letter-spacing: .16em; }
}
@media (hover: none) { .hero-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-cursor { transition: none; }
}

/* ── product band: solid, so the page reads as sections ─────────────── */
.shop-body { background: var(--navy); padding-top: clamp(22px, 3.5vw, 34px); }
.pdp-band { padding-top: clamp(24px, 4vw, 44px); }

/* Topo only textures the hero block now. */
.shop-hero .topo-bg-wrap { z-index: 0; }
.shop-hero .topo-bg-inner, .shop-hero-inner { z-index: 1; }


/* ── store nav: back, mark, cart ───────────────────────────────────── */
.nav.nav-store {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: clamp(60px, 8vw, 76px);
  padding: 0 clamp(16px, 4vw, 40px);
  background: var(--navy-2); border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 28px -16px rgba(0,0,0,.6);
}

.nav-back { justify-self: start; display: inline-flex; align-items: center; gap: 9px;
  color: var(--orange); text-decoration: none; font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; min-height: 44px;
  padding: 8px 18px 8px 15px; border: 1px solid rgba(255,149,0,.4);
  border-radius: 999px; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.nav-back:active { transform: scale(.96); }
.nav-back:hover { background: var(--orange); color: var(--navy); border-color: var(--orange); }
.nav-back:hover svg { transform: translateX(-3px); }
.nav-back svg { transition: transform .25s var(--ease-out); }
.nav-back:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.nav.nav-store .nav-cart { justify-self: end; }

@media (max-width: 620px) {
  .nav.nav-store { padding: 0 14px; }
  .nav-back span { display: none; }
  .nav-back { padding: 8px 12px; }
  .nav-cart-label { display: none; }
  .nav-cart { padding: 8px 13px; gap: 6px; }
}

/* ── size chart ─────────────────────────────────────────────────────── */
.size-table-wrap { overflow-x: auto; margin: 14px 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.size-table { width: 100%; border-collapse: collapse; font-size: 14px;
  font-variant-numeric: tabular-nums; }
.size-table caption { text-align: left; padding: 11px 13px 0; color: var(--text-faint);
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; }
.size-table th, .size-table td { padding: 11px 13px; text-align: left;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.size-table thead th { color: var(--text-faint); font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; }
.size-table tbody th { color: var(--text); font-weight: 700; }
.size-table tbody td { color: var(--text-dim); }
.size-table tbody tr:last-child th, .size-table tbody tr:last-child td { border-bottom: 0; }
/* The row for the size the customer has selected lights up. */
.size-table tbody tr[data-current="true"] { background: rgba(255,149,0,.10); }
.size-table tbody tr[data-current="true"] th { color: var(--orange); }
.size-note { color: var(--text-faint); font-size: 13px; line-height: 1.6; margin: 0; }

  background: transparent; color: var(--orange); border: 1px solid var(--orange);
  border-radius: var(--radius-sm); font-family: inherit; font-weight: 700;
  font-size: 14.5px; letter-spacing: .02em;
  transition: background .18s, color .18s, transform .15s; }
  transform: translateY(-1px); }


/* Promo codes are entered on Stripe's page; saying so stops people hunting
   for a field here and giving up. */
.promo-hint { display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 10px 0 0; color: var(--text-faint); font-size: 11.5px; letter-spacing: .02em;
  white-space: nowrap; }
.promo-hint svg { color: var(--orange); flex: none; }

/* ── scaling pass ───────────────────────────────────────────────────────
   Checked at 320 / 375 / 390 / 430 / 768 / 1024 / 1440+. These fix what
   actually breaks at each size rather than shrinking everything.
   ───────────────────────────────────────────────────────────────────── */

/* Long product names must never push the price out of the card. */
.card-body h3 { overflow-wrap: anywhere; }
.card-price .now { white-space: nowrap; }

/* Two-up cards get tight below 400px. */
@media (max-width: 400px) {
  .card-quick { left: 8px; right: 8px; bottom: 8px; font-size: 12.5px; min-height: 40px; }
  .card-body { padding: 12px 12px 15px; }
  .card-body h3 { font-size: 14.5px; }
  .card-price .now { font-size: 15px; }
}

/* Tablet: three across reads better than two stretched wide. */
@media (min-width: 641px) and (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Wide screens: cap the gallery so the product page is not two enormous columns. */
@media (min-width: 1200px) {
  .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .gallery-main { max-height: 620px; }
}

/* The sticky buy bar must honour the notch. */
.buy-bar { padding-left: max(var(--gutter), env(safe-area-inset-left)); }

@media (max-width: 360px) { .opt { min-width: 46px; padding: 0 11px; } }

/* ── interaction ────────────────────────────────────────────────────── */

/* Touch targets confirm the press, since there is no hover on a phone. */
.thumb:active, .opt:active, .swatch:active { transform: scale(.95); }

/* The gallery cross-fades when a thumbnail is chosen. */
.gallery-main img { transition: transform .5s var(--ease-out), opacity .25s var(--ease-out); }
.gallery-main img.swapping { opacity: 0; }

/* Drawer lines stagger in so a busy cart does not arrive all at once. */
.cart-line:nth-child(1) { animation-delay: 0s; }
.cart-line:nth-child(2) { animation-delay: .04s; }
.cart-line:nth-child(3) { animation-delay: .08s; }
.cart-line:nth-child(n+4) { animation-delay: .12s; }

/* ── nav mark: DIRTGPS with a small STORE label ─────────────────────── */
.nav-mark { justify-self: center; display: flex; align-items: center;
  line-height: 0; text-decoration: none; }
/* Same 26px height the app page uses, so the mark is consistent site-wide. */
.nav-mark .nav-logo-img { display: block; height: 26px; width: auto; }

/* ── card badge ─────────────────────────────────────────────────────── */
.badge { position: absolute; top: 11px; left: 11px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--orange); color: var(--navy); border: 0;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: 5px 10px; border-radius: 3px;
  animation: badgeGlow 2.8s ease-in-out infinite; }
/* A slow breathing glow, not a flash — it should draw the eye on a second
   pass over the grid, not compete with the product photography. */
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 6px 0 rgba(255,149,0,.18); }
  50%      { box-shadow: 0 0 12px 1px rgba(255,149,0,.32); }
}
@media (prefers-reduced-motion: reduce) {
  .badge { animation: none; box-shadow: 0 0 10px 1px rgba(255,149,0,.22); }
}

.gallery[tabindex]:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* ── checkout: lighter footer ───────────────────────────────────────────
   The summary and its button were sized like a landing-page hero, which
   pushed the form off-screen. On the delivery step the promo hint and
   "continue shopping" are noise — the customer has already committed and
   has "back to cart" right there — so they are dropped, reclaiming ~60px
   for the form itself.
   ───────────────────────────────────────────────────────────────────── */

/* A little more width on desktop so the paired fields are not cramped. */
@media (min-width: 640px) { .cart-drawer { width: 468px; } }


.cart-ft .form-error { margin: 0 0 8px; min-height: 0; }
.cart-ft .form-error:empty { display: none; }

/* Disabled means "not yet", not "broken": muted, no hover lift, no sweep. */
.btn-buy:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none;
  box-shadow: none; }
.btn-buy:disabled::before { animation: none; }

/* ── checkout page ──────────────────────────────────────────────────────
   Two columns on desktop: the form to fill in, the order to check against.
   On mobile the summary sits under the form, so the total and the pay
   button are the last thing seen rather than something scrolled past.
   ───────────────────────────────────────────────────────────────────── */
.checkout-wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }
.checkout-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: clamp(18px, 3vw, 30px); }
.checkout-head h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px);
  letter-spacing: .04em; text-transform: uppercase; margin: 0; color: #fff; }
.checkout-back { color: var(--text-dim); text-decoration: none; font-size: 13.5px;
  transition: color .2s; }
.checkout-back:hover { color: var(--orange); }

.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 44px); align-items: start;
  padding-bottom: clamp(48px, 7vw, 88px); }
@media (max-width: 860px) { .checkout-grid { grid-template-columns: 1fr; gap: 24px; } }

.checkout-form h2, .checkout-summary h2 {
  font-family: var(--font-display); font-size: 19px; letter-spacing: .05em;
  text-transform: uppercase; color: #fff; margin: 0 0 16px; }

.checkout-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px;
  align-content: start; }
.checkout-form h2 { grid-column: 1 / -1; }
.checkout-form label { display: block; margin-bottom: 14px; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--text-dim); }
.checkout-form label.wide { grid-column: 1 / -1; }
.checkout-form .opt-tag { text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--text-faint); }
.checkout-form input, .checkout-form select {
  display: block; width: 100%; margin-top: 6px; background: var(--surface);
  border: 1px solid var(--line-strong); color: var(--text); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 16px; /* 16px stops iOS zooming on focus */
  font-family: inherit; font-weight: 400; text-transform: none; letter-spacing: 0;
  min-height: 46px; transition: border-color .2s; }
.checkout-form input:focus, .checkout-form select:focus { outline: 0; border-color: var(--orange); }
.checkout-form input[aria-invalid="true"] { border-color: #ff6b6b; }
.addr-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 92px 104px; gap: 12px; }
@media (max-width: 420px) { .addr-row { grid-template-columns: 1fr 1fr; } }

.checkout-summary { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 20px; position: sticky;
  top: calc(clamp(60px, 8vw, 76px) + 24px); }
@media (max-width: 860px) { .checkout-summary { position: static; } }

.summary-items { list-style: none; margin: 0 0 16px; padding: 0; }
.summary-line { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px;
  align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.summary-line img, .summary-line .ph { width: 52px; height: 52px; border-radius: 8px;
  object-fit: cover; background: var(--surface-2); display: block; }
.summary-line h4 { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--text); }
.summary-line p { margin: 0; font-size: 12.5px; color: var(--text-faint); }
.summary-line .line-price { font-size: 14px; font-weight: 700; color: var(--orange);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

.checkout-summary .cart-row { margin-bottom: 7px; }
.checkout-summary .form-error { margin: 10px 0; }
.checkout-summary .form-error:empty { display: none; }
.checkout-summary .btn-buy { margin-top: 6px; }

.checkout-empty { text-align: center; padding: clamp(40px, 8vw, 80px) 0; }
.checkout-empty p { color: var(--text-dim); font-size: 16px; margin: 0 0 20px; }
.checkout-empty .btn-buy { display: inline-flex; width: auto; padding: 0 28px; }

/* The drawer's Checkout is a link, not a button — keep it looking identical. */
a.btn-buy { text-decoration: none; }

/* Quantity stepper on a cart line — same control as the product page, sized
   down to sit inside the row without crowding the price. */
.line-qty { display: inline-flex; align-items: center; margin: 2px 0 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.line-qty button { width: 30px; height: 30px; background: transparent; border: 0;
  color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s; }
.line-qty button:hover:not(:disabled) { background: var(--surface-2); color: var(--orange); }
.line-qty button:disabled { opacity: .3; cursor: not-allowed; }
.line-qty button:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.line-qty output { min-width: 30px; text-align: center; font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* The note closes the footer rather than splitting the two buttons apart. */
.cart-ft .cart-note { margin-top: 12px; }