/* =====================================================================
   DEEP ONE — buyer storefront
   Design language: Soft Structuralism / Apple-grade minimalism.
   Silver canvas (#f5f5f7), white floating surfaces with ultra-soft
   diffused shadows, one type family (Plus Jakarta Sans), ink CTAs,
   blue reserved for focus, amber reserved for scarcity. The garment
   photos are the only loud colour on the page — by design.
   Every selector is part of the store.js contract: rename nothing.
   ===================================================================== */
:root {
  --bg: #f5f5f7;                 /* Apple silver canvas */
  --bg-2: #ececf0;               /* recessed wells (inputs, steppers) */
  --surface: #ffffff;
  --surface-2: #f4f4f6;
  --border: rgba(29, 29, 31, .08);      /* hairlines, never solid gray */
  --text: #1d1d1f;               /* ink */
  --muted: #6e6e73;      /* 5.07:1 on white — small gray text stays readable */
  --accent: #1d1d1f;             /* primary actions ARE ink — photos carry colour */
  --accent-press: #000000;
  --blue: #0071e3;               /* focus + links only */
  --gold: #b25b00;               /* scarcity amber */
  --red: #de3131;
  --green: #1f9d5b;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(29,29,31,.04), 0 16px 40px -24px rgba(29,29,31,.18);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);        /* weighty spring-out */
  --ease-in-view: cubic-bezier(0.16, 1, 0.3, 1); /* entrances */
  --font-display: 'Plus Jakarta Sans', 'Noto Sans Gujarati', -apple-system, system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Noto Sans Gujarati', -apple-system, system-ui, sans-serif;
}
/* Gujarati UI: lead with a proper Gujarati face so the script is crisp and
   even, Jakarta only for the Latin bits (₹, numbers, EN) that fall through */
body.lang-gu {
  --font-display: 'Noto Sans Gujarati', 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  --font-body: 'Noto Sans Gujarati', 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  font-variant-numeric: tabular-nums;   /* every price and count aligns */
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; border: none; }
input { font-family: inherit; }
::selection { background: rgba(0, 113, 227, .18); }

/* ---------- login — a calm, single-purpose ritual ---------- */
#login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(90% 60% at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 70%),
    var(--bg);
}
.login-card { width: 100%; max-width: 380px; text-align: center; }
.brand-logo-lg {
  width: 58px; height: 58px;
  border-radius: 14px;
  margin-bottom: 18px;
  box-shadow: 0 10px 28px -12px rgba(27, 39, 51, .45);
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -.02em;       /* tight, confident — not tracked-out */
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-mark.small { font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; flex-shrink: 0; }
.brand-lockup { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; flex-shrink: 0; }
.brand-logo-sm { width: 26px; height: 26px; border-radius: 7px; display: block; flex-shrink: 0; }
.login-sub {
  color: var(--muted);
  margin: 6px 0 44px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.code-label { display: block; color: var(--muted); font-size: .9rem; font-weight: 500; margin-bottom: 14px; }
/* double-bezel input: a recessed tray holding a white core */
#code-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid rgba(29,29,31,.12);
  border-radius: 16px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .45em;
  padding: 18px 8px 18px calc(8px + .45em);
  text-transform: uppercase;
  outline: none;
  box-shadow:
    inset 0 1px 2px rgba(29,29,31,.04),
    0 1px 0 rgba(255,255,255,.8);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
#code-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,113,227,.14);
}
#code-input.shake { animation: shake .35s; border-color: var(--red); }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.login-error { color: var(--red); font-size: .88rem; margin-top: 14px; min-height: 1.2em; }
.enter-btn { margin-top: 4px; }
.login-hint { color: var(--muted); font-size: .8rem; margin-top: 32px; }
/* (admin login link removed — the back office lives in Deep One's ERP) */

/* ---- login contact: a non-registered buyer's fast path to a code ---- */
.login-contact { margin-top: 30px; }
.login-contact-label {
  display: block; color: var(--muted);
  font-size: .82rem; line-height: 1.45; margin-bottom: 14px;
}
.login-contact-actions { display: flex; gap: 10px; }
.contact-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: 14px;
  font-size: .92rem; font-weight: 600; text-decoration: none;
  transition: transform .2s var(--ease-in-view, ease), box-shadow .2s ease, background .2s ease;
}
.contact-btn svg { width: 19px; height: 19px; flex: none; }
.contact-btn:active { transform: scale(.97); }
.contact-btn.wa {
  color: #fff; background: #25d366;
  box-shadow: 0 1px 1px rgba(29,29,31,.06), 0 10px 22px -10px rgba(37,211,102,.9);
}
.contact-btn.wa:hover { background: #20bd5a; }
.contact-btn.call {
  color: var(--text); background: rgba(29,29,31,.05);
  box-shadow: inset 0 0 0 1px rgba(29,29,31,.1);
}
.contact-btn.call:hover { background: rgba(29,29,31,.09); }

/* ---- site footer — quiet, premium, Apple-calm ---- */
.site-footer {
  margin-top: 56px;
  border-top: 1px solid rgba(29,29,31,.08);
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
}
.footer-brand .brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.footer-brand .brand-logo-sm { width: 30px; height: 30px; }
.footer-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -.01em;
  color: var(--text);
}
.footer-tagline { color: var(--muted); font-size: .85rem; margin: 10px 0 0; font-style: italic; }
.footer-col h4 {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 10px;
}
.footer-col p { color: var(--text); font-size: .88rem; line-height: 1.6; margin: 0; }
.footer-col a { color: var(--text); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #128c7e;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.footer-wa svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
.footer-wa:hover { color: #075e54; text-decoration: underline; }
.footer-base {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px 36px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid rgba(29,29,31,.06);
  color: var(--muted);
  font-size: .78rem;
}
@media (max-width: 720px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 36px 20px 24px;
  }
  .site-footer {
    margin-top: 36px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .footer-base {
    padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
  }
}

/* ---- floating WhatsApp help button — high contrast, 100% visible on all devices ---- */
.wa-fab {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 99;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  min-width: 56px;
  padding: 0;
  overflow: hidden;
  border-radius: 999px;
  color: #fff;
  background: #25d366;
  box-shadow:
    0 4px 16px rgba(37,211,102,.5),
    0 8px 28px -6px rgba(0,0,0,.28);
  text-decoration: none;
  cursor: pointer;
  transition:
    bottom .4s cubic-bezier(.22,1,.36,1),
    transform .3s cubic-bezier(.34,1.4,.5,1),
    box-shadow .3s ease;
}
.wa-fab svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin: 0 13px;
  fill: #fff;
}
.wa-fab-label {
  position: relative;
  z-index: 1;
  max-width: 0;
  opacity: 0;
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  transition: max-width .35s cubic-bezier(.22,1,.36,1), opacity .25s ease, padding .35s ease;
}
@media (hover: hover) {
  .wa-fab:hover {
    transform: translateY(-2px) scale(1.02);
    background: #20bd5a;
    box-shadow:
      0 6px 20px rgba(37,211,102,.6),
      0 12px 36px -6px rgba(0,0,0,.32);
  }
  .wa-fab:hover .wa-fab-label {
    max-width: 140px;
    opacity: 1;
    padding-right: 20px;
  }
  .wa-fab:hover svg {
    margin-right: 8px;
  }
}
.wa-fab:active {
  transform: scale(.95);
}
/* raise it clear of the sticky order bar when that bar is on screen */
#cart-bar:not(.hidden) ~ .wa-fab {
  bottom: calc(92px + env(safe-area-inset-bottom));
}
@media (max-width: 560px) {
  .wa-fab {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    height: 52px;
    min-width: 52px;
  }
  .wa-fab svg {
    width: 28px;
    height: 28px;
    margin: 0 12px;
  }
  .wa-fab:hover .wa-fab-label {
    max-width: 0;
    opacity: 0;
    padding-right: 0;
  }
  #cart-bar:not(.hidden) ~ .wa-fab {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}
/* suppress the floating button when full-screen photo lightbox is active */
html.lightbox-open,
body.lightbox-open {
  overflow: hidden !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: auto !important;
}
body.lightbox-open .wa-fab,
#photo-overlay:not(.hidden) ~ .wa-fab,
body:has(#photo-overlay:not(.hidden)) .wa-fab {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: scale(0.6) !important;
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab, .wa-fab-label, .wa-fab svg { transition: none; animation: none; }
}

/* ---------- shop header — floating glass over the silver canvas ---------- */
.shop-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(12px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 10px max(24px, env(safe-area-inset-left, 0px));
  background: rgba(245,245,247,.82);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.shop-header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 12px 32px -24px rgba(29,29,31,.25);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
  min-width: 0;
}
.header-row .brand-mark { cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.header-right { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 1; }

/* ---- language toggle: EN | ગુ segmented pill, ink-active like the app's
   other toggles — a hairline glass tray with a dark sliding thumb ---- */
.lang-seg {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px;
  background: rgba(29,29,31,.06);
  border: 1px solid rgba(29,29,31,.08);
  border-radius: 999px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.lang-seg button {
  appearance: none; border: none; background: none; cursor: pointer;
  min-width: 44px; height: 32px; padding: 0 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .84rem; font-weight: 700; line-height: 1; letter-spacing: .02em;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  box-sizing: border-box;
  min-height: 28px !important; height: 28px !important;
  transition: color .25s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), transform .18s var(--ease);
}
.lang-seg button[data-lang="gu"] { font-family: 'Noto Sans Gujarati', var(--font-display); font-weight: 600; font-size: .88rem; }
.lang-seg button.active {
  color: #fff;
  background: var(--text);
  box-shadow: 0 1px 2px rgba(29,29,31,.2), 0 4px 12px -4px rgba(29,29,31,.4);
}
.lang-seg button:not(.active):hover { color: var(--text); }
.lang-seg button:active { transform: scale(.93); }
/* login: pin the toggle to the screen's top-right, clear of the centred card */
#lang-seg-login {
  position: fixed; top: 22px; right: 22px; z-index: 5;
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border-color: rgba(29,29,31,.08);
  box-shadow: 0 4px 16px -8px rgba(29,29,31,.3);
}
@media (max-width: 560px) {
  #lang-seg-login { top: calc(14px + env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); }
  .header-right { gap: 8px; }
  .lang-seg { padding: 3px; gap: 2px; }
  .lang-seg button { min-width: 40px; height: 30px; padding: 0 10px; font-size: .80rem; }
  .lang-seg button[data-lang="gu"] { font-size: .84rem; }
}

.buyer-chip {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 5px 5px 14px;
  font-size: .85rem;
  box-shadow: 0 1px 2px rgba(29,29,31,.04);
}
#buyer-name { font-weight: 600; }
#switch-btn {
  background: var(--bg);
  border: none;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: .75rem;
  font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease);
}
#switch-btn:hover { color: var(--text); background: var(--bg-2); }

/* ---------- toolbar (inside the sticky header — always reachable) ---------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.chip-toggle {
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip-toggle.active { background: rgba(31,157,91,.12); border-color: transparent; color: var(--green); }
#search-input::-webkit-search-cancel-button { cursor: pointer; }

#search-input {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  padding: 10px 18px;
  font-size: .92rem;
  outline: none;
  box-shadow: 0 1px 2px rgba(29,29,31,.03);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
#search-input::placeholder { color: #8a8a8f; }
#search-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,.12); }

.view-toggle {
  display: flex;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.view-toggle button {
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 1.05rem;
  padding: 8px 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.view-toggle button.active { background: var(--text); color: #fff; }

.product-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.product-count::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

@media (max-width: 560px) {
  .shop-header {
    background: var(--bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--border);
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px));
  }
  .shop-header::before,
  .shop-header::after {
    display: none !important;
  }
  .shop-header.scrolled {
    background: var(--bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom-color: var(--border) !important;
    box-shadow: 0 4px 16px -8px rgba(29,29,31,.12) !important;
  }
  .header-row {
    margin-bottom: 8px;
  }
  .toolbar {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  #search-input {
    padding: 8px 12px;
    font-size: 16px;
    height: 38px;
    border-radius: 12px;
    min-width: 0;
    flex: 1;
  }
  .chip-toggle {
    padding: 0 10px;
    height: 38px;
    font-size: .76rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .view-toggle {
    padding: 2px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
  }
  .view-toggle button {
    padding: 0 8px;
    height: 32px;
    font-size: .92rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .product-count {
    width: 100%;
    order: 4;
    margin-top: 2px;
    font-size: .76rem;
    padding-left: 2px;
  }
}

/* ---------- grid (uniform tiles) ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* always 4 tiles per row on desktop */
  gap: 52px 38px;          /* lots of air — deep vertical rhythm, calm columns */
  padding: 44px 40px 40px;
  max-width: 1340px;
  margin: 0 auto;
}
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; padding: 16px 12px 30px; }
}
.grid-sentinel { grid-column: 1 / -1; height: 1px; }

/* first paint: cards rise in with a soft stagger */
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }
.card.enter { animation: card-in .55s var(--ease-in-view) backwards; }

/* floating white surface: hairline + soft ambient, nothing harsh */
.card {
  background: var(--surface);
  border: none;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px rgba(29,29,31,.04),
    0 1px 2px rgba(29,29,31,.03),
    0 18px 44px -30px rgba(29,29,31,.22);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(29,29,31,.05),
    0 2px 6px rgba(29,29,31,.04),
    0 32px 64px -32px rgba(29,29,31,.3);
}
.card.in-cart {
  box-shadow:
    0 0 0 2px var(--text),
    0 18px 44px -30px rgba(29,29,31,.35);
}
.card-img {
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 4; /* every tile identical — photo fits inside, full photo opens in viewer */
}
/* hairline seam where photo meets the card body — keeps light photos crisp */
.card-img::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(29,29,31,.06);
  z-index: 2;
  pointer-events: none;
}
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; z-index: 1; transition: transform .5s var(--ease); }
.card:hover .card-img img:not(.bg) { transform: scale(1.03); }
/* blurred copy of the same photo fills the empty space seamlessly */
.card-img img.bg {
  object-fit: cover;
  filter: blur(20px) saturate(1.12) brightness(1.04);
  transform: scale(1.2);
  z-index: 0;
}
.badge { z-index: 2; }
.card-img .placeholder {
  width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800;
  color: #d6d6db;
  background: linear-gradient(145deg, #f5f5f6, #ececee);
  cursor: default;
}
/* One badge, one look — a machined glass capsule (frosted plate, hairline
   ring, inner top highlight, a live spark dot, one slow sheen). New arrival,
   Low stock and Sold out share it and differ only by the dot's colour. */
.badge {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
  padding: 5px 11px 5px 9px;
  color: var(--text);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 1px 1px rgba(29,29,31,.08),
    0 8px 20px -8px rgba(29,29,31,.4);
  overflow: hidden;
}
.badge::before {                     /* the spark — colour set per variant, breathing */
  content: '';
  width: 6px; height: 6px; border-radius: 999px; flex: none;
  background: var(--text);
  animation: spark-pulse 2.6s ease-in-out infinite;
}
.badge::after {                      /* one slow diagonal sheen across the plate */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: badge-sheen 5.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}
.badge.new::before {                 /* new — warm gold */
  background: radial-gradient(circle at 35% 30%, #ffd27a, var(--gold) 70%);
  box-shadow: 0 0 6px -1px var(--gold);
}
.badge.low::before {                 /* low stock — amber, quietly urgent */
  background: var(--gold);
  box-shadow: 0 0 6px -1px var(--gold);
}
.badge.out::before {                 /* sold out — red */
  background: var(--red);
  box-shadow: 0 0 6px -1px var(--red);
}
@media (prefers-reduced-motion: reduce) {
  .badge::before { animation: none; }
  .badge::after { display: none; }
}

/* sold out: the whole tile goes quiet — B&W photo, gray body, muted text, no lift */
.card.sold-out .card-img img, .card.sold-out .placeholder { filter: grayscale(1); opacity: .9; }
.card.sold-out .card-img img.bg { filter: blur(20px) grayscale(1); }
.card.sold-out {
  background: #f2f2f4;
  box-shadow: 0 0 0 1px rgba(29,29,31,.05);
}
.card.sold-out:hover {
  transform: none;
  box-shadow: 0 0 0 1px rgba(29,29,31,.05);
}
.card.sold-out:hover .card-img img:not(.bg) { transform: none; }
.card.sold-out .card-img { background: #eaeaec; }
.card.sold-out .card-eyebrow,
.card.sold-out .card-name,
.card.sold-out .card-typesize,
.card.sold-out .card-price,
.card.sold-out .card-stock { color: #a6a8b0; }
.card.sold-out .thread { visibility: hidden; }
.card.sold-out .sold-out-label { background: #e9e9ec; color: #9b9da6; }
.grid.list .card.sold-out,
.grid.list .card.sold-out:hover { background: #f2f2f4; border-color: #e2e2e6; box-shadow: none; }
/* the sold-out tile keeps its top-left Sold-out capsule (the .badge.out),
   so it matches New arrival and Low stock — no separate pill needed */

.card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.card-eyebrow {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  white-space: nowrap;
}
.card-topline .card-typesize {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-name {
  font-weight: 700; font-size: .95rem; line-height: 1.3; letter-spacing: -.015em;
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
.card-name .colour-pill { vertical-align: 0; flex: none; }
.card-typesize { color: var(--muted); font-size: .76rem; font-weight: 500; }
/* the ONE spec line: type · size · set — flex segments with a responsive
   gap, so the air scales with the card instead of clipping on phones */
.card-spec {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  display: flex;
  align-items: baseline;
  gap: clamp(6px, 6%, 16px);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.card-spec i { font-style: normal; color: #b6b6bb; flex: none; }
.card.sold-out .card-spec { color: #a6a8b0; }
.size-chips { display: flex; flex-wrap: nowrap; gap: 5px; overflow: hidden; }
.size-chips span {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--muted);
  background: var(--bg);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}
/* live set conversion under the stepper — buyers always see pieces AND sets */
.set-hint {
  text-align: center;
  font-size: .7rem;
  color: var(--muted);
  transition: color .2s var(--ease);
}
.set-hint:not(:empty) { margin-top: 5px; }
.set-hint.snapped { color: var(--gold); font-weight: 700; }
.grid.list .set-hint { display: none; }

.size-chips span.lot {
  background: rgba(29,29,31,.06);
  color: var(--text);
  font-weight: 700;
  letter-spacing: .07em;
}
.card.sold-out .size-chips span { color: #a6a8b0; background: #e9e9ec; }
.card-meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.card-price { font-family: var(--font-display); font-weight: 800; font-size: 1.14rem; letter-spacing: -.02em; white-space: nowrap; display: inline-flex; align-items: baseline; }
.card-stock { color: var(--muted); font-size: .74rem; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.card-stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.card-stock.low { color: var(--gold); font-weight: 600; }
.card-stock.low::before { background: var(--gold); }
.card-stock:empty::before { display: none; }

/* stock thread */
.thread { height: 3px; background: var(--bg); border-radius: 2px; overflow: hidden; }
.thread i { display: block; height: 100%; background: var(--green); border-radius: 2px; }
.thread i.low { background: var(--gold); }

/* stepper — one quiet recessed pill; ink actions, no colour shouting */
.stepper {
  display: flex;
  align-items: stretch;
  height: 42px;
  margin-top: 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.stepper button {
  flex: 0 0 46px;
  background: none;
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 600;
  transition: background .15s var(--ease), transform .15s var(--ease);
  user-select: none;
}
.stepper button:active { background: var(--bg-2); transform: scale(.9); }
.stepper button:disabled { opacity: .25; cursor: default; }
/* value pops when it changes — feedback lands on press, not after */
@keyframes qty-bump { 40% { transform: scale(1.18); } }
.stepper input.bump { animation: qty-bump .18s var(--ease-in-view); }
.stepper input {
  flex: 1;
  min-width: 0;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
  outline: none;
}
.stepper:focus-within { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(0,113,227,.12); }
.qty-active .stepper { border-color: var(--text); background: #fff; }
.qty-active .stepper input { font-weight: 800; color: var(--text); }
.sold-out-label {
  height: 42px; margin-top: 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- list view ---------- */
/* fills the page width: rows flow into 2 columns on wide screens, 1 on narrow */
.grid.list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 470px), 1fr));
  gap: 12px;
  align-items: start;
}
.grid.list .card {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  /* rows read better flat: hairline instead of stacked shadows */
  box-shadow: none;
  border: 1px solid var(--border);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.grid.list .card:hover {
  transform: none;
  box-shadow: none;
  background: #fdfdfe;
  border-color: rgba(29,29,31,.16);
}
.grid.list .card.in-cart {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text);
  background: #fff;
}
.grid.list .card-img {
  /* thumbnail takes the photo's own shape at full height — whole photo visible, no crop */
  height: 124px;
  width: auto;
  aspect-ratio: var(--ar, 3 / 4);
  max-width: 170px;
  min-width: 70px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(29,29,31,.05);
}
.grid.list .card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.grid.list .card-img::after { display: none; }
.grid.list .card-img .placeholder { aspect-ratio: auto; height: 100%; font-size: 1rem; }
.grid.list .badge { display: none; } /* the stock dot carries this in list view */
.grid.list .card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: center;
  column-gap: 16px;
  row-gap: 3px;
  padding: 0;
  flex: 1;
}
.grid.list .thread { display: none; }
/* one left axis: design no + type/size read as a single line, everything flush left */
.grid.list .card-topline { justify-content: flex-start; gap: 12px; }
.grid.list .card-topline .card-typesize { text-align: left; overflow: hidden; text-overflow: ellipsis; }
.grid.list .card-eyebrow { font-size: .66rem; }
.grid.list .card-name { font-size: 1rem; }
.grid.list .card-typesize { font-size: .82rem; }
.grid.list .card-spec { font-size: .82rem; }
.grid.list .card-meta {
  margin-top: 5px;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.grid.list .card-price { font-size: 1.12rem; }
.grid.list .card-stock { font-size: .78rem; }
.grid.list .stepper, .grid.list .sold-out-label, .grid.list .guest-cta {
  grid-column: 2;
  grid-row: 1 / span 4;
  margin-top: 0;
  height: 44px;
}
.grid.list .sold-out-label { font-size: .72rem; }
@media (max-width: 560px) {
  .grid.list { gap: 12px; }
  .grid.list .card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    padding: 10px 12px 10px 10px;
    border-radius: 16px;
    min-height: 116px;
  }
  .grid.list .card-img {
    height: 108px;
    width: 82px;
    max-width: 88px;
    min-width: 72px;
    flex: 0 0 auto;
    border-radius: 12px;
    align-self: center;
  }
  .grid.list .card-body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    padding: 0;
    min-width: 0;
    flex: 1;
  }
  .grid.list .card-name {
    grid-column: 1 / -1;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }
  .grid.list .card-spec {
    grid-column: 1 / -1;
    font-size: .78rem;
    color: var(--muted);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    white-space: normal;
    overflow: visible;
    line-height: 1.35;
    min-width: 0;
    margin-top: 1px;
  }
  .grid.list .card-spec i {
    display: inline;
    color: #b6b6bb;
    flex: none;
  }
  .grid.list .card-meta {
    grid-column: 1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 2px;
    min-width: 0;
    padding-top: 0;
  }
  .grid.list .card-price {
    font-size: 1.1rem;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -.02em;
    display: inline-flex;
    align-items: baseline;
  }
  .grid.list .card-stock {
    font-size: .74rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .grid.list .stepper,
  .grid.list .sold-out-label,
  .grid.list .guest-cta {
    grid-column: 2;
    grid-row: auto;
    margin-top: 2px;
    height: 40px;
    min-width: 112px;
    justify-self: end;
  }
  .grid.list .stepper button {
    flex: 0 0 36px;
    font-size: 1.25rem;
  }
  .grid.list .stepper input {
    font-size: 15px;
    font-weight: 700;
  }
  .grid.list .sold-out-label {
    height: 40px;
    padding: 0 14px;
    font-size: .72rem;
    font-weight: 700;
    min-width: 104px;
  }
  .grid.list .guest-cta {
    height: 40px;
    padding: 0 12px;
    font-size: .74rem;
    font-weight: 700;
    min-width: 104px;
  }
}

.empty-msg { text-align: center; color: var(--muted); padding: 80px 20px; }

/* ---------- cart bar — a black glass island: the one loud element ---------- */
.cart-bar {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 560px;
  z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 9px 9px 24px;
  background: rgba(22,22,24,.88);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.08);           /* glass edge */
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),             /* inner highlight */
    0 24px 60px -16px rgba(22,22,24,.55);
  animation: bar-in .4s var(--ease-in-view);
}
@keyframes bar-in { from { transform: translate(-50%, 130%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet { animation-timing-function: var(--ease-in-view); animation-duration: .32s; }
.cart-info { display: flex; flex-direction: column; min-width: 0; }
#cart-qty { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; white-space: nowrap; letter-spacing: -.01em; }
#cart-amount { color: rgba(255,255,255,.72); font-size: .82rem; white-space: nowrap; }  /* 9.2:1 on the island */
/* contrast flip: on the dark island the CTA is white — nothing outpulls it */
.cart-bar .btn-primary { background: #fff; color: var(--text); }
.cart-bar .btn-primary:hover { background: #f0f0f2; filter: none; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  padding: 13px 26px;
  border-radius: 999px;
  letter-spacing: -.005em;
  transition: background .25s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease);
}
.btn-primary:hover { background: #333336; }
.btn-primary:active { transform: scale(.97); }
.btn-primary:disabled { opacity: .45; cursor: default; }
.btn-primary.big { width: 100%; padding: 16px; font-size: 1.02rem; border-radius: 16px; }

/* ---------- overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  min-height: -webkit-fill-available;
  z-index: 50;
  background: rgba(29,29,31,.42);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  display: flex; align-items: flex-end; justify-content: center;
  box-sizing: border-box;
}
@media (min-width: 600px) { .overlay { align-items: center; } }
.sheet {
  width: 100%; max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 22px;
  animation: rise .28s var(--ease-in-view);
}
@media (min-width: 600px) { .sheet { border-radius: 20px; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sheet-head h2 { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -.01em; }
.icon-btn {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: .9rem;
  transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.icon-btn:hover { background: var(--bg-2); color: var(--text); }
.icon-btn:active { transform: scale(.92); }

/* ---------- order review ---------- */
.sheet.review-sheet {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}
.review-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 22px 14px;
}
.review-head h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; }
.review-sub { color: var(--muted); font-size: .8rem; margin-top: 3px; }

.review-lines {
  flex: 1;
  overflow-y: auto;
  padding: 0 22px;
  overscroll-behavior: contain;
}
.review-line {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.review-line:last-child { border-bottom: none; }
.rl-thumb {
  width: 54px; height: 68px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--surface-2);
}
.review-line .mini-ph { display: flex; align-items: center; justify-content: center; color: #d6d6db; font-weight: 700; }
.rl-info { min-width: 0; }
.rl-name { font-size: .92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-sub { color: var(--muted); font-size: .76rem; margin-top: 2px; }
.rl-stepper {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}
.rl-stepper button {
  width: 32px; height: 30px;
  background: none;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
  transition: background .15s var(--ease);
}
.rl-stepper button:active { background: var(--bg-2); }
.rl-stepper span {
  min-width: 62px;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
}
.rl-right { text-align: right; }
.rl-amt { font-family: var(--font-display); font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.rl-sets { color: var(--muted); font-size: .72rem; margin-top: 3px; }

.review-footer {
  border-top: 1px solid var(--border);
  padding: 14px 22px calc(18px + env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 0 0 20px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 14px;
}
.review-total {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.rt-label { display: none; }
.rt-qty { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.rt-amount { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; white-space: nowrap; }
#review-error { grid-column: 1 / -1; grid-row: 2; margin: 6px 0 0; }
#review-error:empty { display: none; }
.review-footer .btn-primary.big {
  grid-column: 2; grid-row: 1;
  width: auto;
  padding: 15px 26px;
  font-size: .98rem;
  white-space: nowrap;
}

/* ---------- success — quiet confidence, no confetti ---------- */
.success-sheet { text-align: center; padding: 40px 24px; }
.tick {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(31,157,91,.1);
  border: none;
  box-shadow: inset 0 0 0 2px var(--green);
  color: var(--green);
  font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
  animation: pop .4s cubic-bezier(.2,1.6,.4,1);
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-sheet h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.015em; }
.order-no {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 800;
  color: var(--text);
  margin: 10px 0 4px;
  letter-spacing: .01em;
}
.success-detail { color: var(--text); font-size: .95rem; }
.success-note { color: var(--muted); font-size: .82rem; margin: 14px 0 26px; }

/* ---------- photo viewer ---------- */
.photo-overlay {
  position: fixed;
  inset: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  min-height: -webkit-fill-available;
  flex-direction: column;
  align-items: center !important;
  justify-content: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: rgba(12,13,16,.88);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  backdrop-filter: blur(28px) saturate(1.3);
  animation: viewer-in .25s ease-out;
  z-index: 500;
  box-sizing: border-box;
  overscroll-behavior: contain;
}
@keyframes viewer-in { from { opacity: 0; } }
.photo-overlay.closing { animation: viewer-out .17s ease-in forwards; }
@keyframes viewer-out { to { opacity: 0; } }

#photo-img {
  max-width: min(100%, 1040px);
  max-height: 80vh;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.6);
  animation: photo-in .35s var(--ease-in-view);
}
@media (max-width: 560px) {
  #photo-img { max-height: 76vh; }
}
@keyframes photo-in { from { opacity: 0; transform: scale(.95); } }
#photo-img.swap { animation: photo-swap .22s var(--ease-in-view); }
@keyframes photo-swap { from { opacity: 0; transform: scale(.985); } }

/* frosted-glass controls */
.photo-glass {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--ease), transform .18s var(--ease);
  user-select: none;
}
.photo-glass:hover { background: rgba(255,255,255,.2); }
.photo-glass:active { transform: scale(.9); }
.photo-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 42px; height: 42px;
  font-size: 1rem;
}
.photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  font-size: 1.7rem;
  line-height: 1;
  padding-bottom: 4px;
}
.photo-nav:active { transform: translateY(-50%) scale(.9); }
.photo-nav.prev { left: 18px; }
.photo-nav.next { right: 18px; }
@media (max-width: 560px) {
  .photo-nav { width: 42px; height: 42px; top: 45%; bottom: auto; transform: translateY(-50%); font-size: 1.5rem; z-index: 10; }
  .photo-nav:active { transform: translateY(-50%) scale(.92); }
  .photo-nav.prev { left: 10px; }
  .photo-nav.next { right: 10px; }
}
.photo-count {
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255,255,255,.75);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 5px 14px;
}

/* caption: double-bezel — white core in a soft glass tray */
.photo-caption {
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 16px;
  padding: 10px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 18px 50px -18px rgba(0,0,0,.55);
  animation: caption-in .4s var(--ease-in-view);
}
@keyframes caption-in { from { opacity: 0; transform: translateY(14px); } }
.photo-caption-text { min-width: 0; flex: 1; }
.photo-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-detail {
  color: var(--muted);
  font-size: .8rem;
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}
.photo-detail .pd-tag {
  white-space: nowrap;
  display: inline-block;
}
.photo-detail .pd-dot {
  font-style: normal;
  color: #b6b6bb;
  display: inline-block;
}
.photo-stepper { width: 168px; flex: none; margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* =====================================================================
   MOBILE / RESPONSIVE PASS — Android, iOS (Safari), tablets, landscape
   Additive only: no selector above is renamed or removed (JS reads them).
   ===================================================================== */

/* ---- foundations ---- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; }
button, input, select { touch-action: manipulation; } /* kills the 300ms tap delay + double-tap zoom */
button { min-height: 44px; }                           /* WCAG 2.5.8 / Apple HIG target size */
.stepper button, .rl-stepper button, .view-toggle button, #switch-btn, .icon-btn { min-height: 0; }

/* visible keyboard focus everywhere (never removed without replacement) */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
#search-input:focus-visible, #code-input:focus-visible, .stepper input:focus-visible { outline: none; }

/* hover lift only on devices that actually hover — no "stuck" cards on touch */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: 0 0 0 1px rgba(29,29,31,.04), 0 1px 2px rgba(29,29,31,.03), 0 18px 44px -30px rgba(29,29,31,.22); }
  .card.in-cart:hover { box-shadow: 0 0 0 2px var(--text), 0 18px 44px -30px rgba(29,29,31,.35); }
  .card:hover .card-img img:not(.bg) { transform: none; }
  .btn-primary:hover { background: var(--accent); }
  .cart-bar .btn-primary:hover { background: #fff; }
  .grid.list .card:hover { background: var(--surface); border-color: var(--border); }
  .grid.list .card.in-cart:hover { border-color: var(--text); background: #fff; }
  .card:active { transform: scale(.99); }
}

/* ---- login ---- */
#login-view {
  min-height: 100dvh;
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
}
@media (max-width: 380px) {
  #code-input { font-size: 1.9rem; letter-spacing: .4em; padding: 16px 6px 16px calc(6px + .4em); }
  .brand-mark { font-size: 1.4rem; }
  .brand-logo-lg { width: 50px; height: 50px; border-radius: 12px; }
}
/* keyboard open on a short phone: keep the card scrollable, not squashed */
@media (max-height: 560px) {
  #login-view { align-items: flex-start; }
  .login-sub { margin-bottom: 24px; }
  .login-hint { margin-top: 18px; }
}

/* ---- sticky header ---- */
.shop-header {
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
#buyer-name {
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#switch-btn { min-height: 32px; }
/* iOS Safari auto-zooms any focused input under 16px — hold at 16px on touch screens */
@media (max-width: 760px) {
  #search-input { font-size: 16px; padding: 11px 16px; }
  .stepper input { font-size: 16px; }
}
@media (max-width: 560px) {
  .shop-header {
    background: var(--bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: 8px;
  }
  .header-row { margin-bottom: 8px; gap: 6px; flex-wrap: nowrap; }
  .brand-lockup { gap: 7px; flex-shrink: 0; white-space: nowrap; }
  .brand-mark.small { font-size: .95rem; flex-shrink: 0; white-space: nowrap; }
  .brand-logo-sm { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
  .header-right { gap: 6px; min-width: 0; flex-shrink: 1; }
  .buyer-chip { gap: 6px; padding: 4px 4px 4px 10px; font-size: .78rem; min-width: 0; flex-shrink: 1; max-width: 155px; }
  #buyer-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
  #switch-btn { padding: 5px 10px; font-size: .72rem; white-space: nowrap; flex-shrink: 0; min-height: 28px; }
  .toolbar { gap: 6px; }
  .view-toggle button { padding: 8px 11px; font-size: 1rem; }
}
@media (max-width: 360px) {
  .brand-lockup { gap: 5px; }
  .brand-logo-sm { width: 22px; height: 22px; }
  .brand-mark.small { font-size: .84rem; }
  .buyer-chip { padding: 3px 3px 3px 7px; max-width: 125px; }
  #buyer-name { max-width: 60px; font-size: .74rem; }
  #switch-btn { padding: 4px 7px; font-size: .68rem; }
  .lang-seg button { min-width: 34px; padding: 0 6px; font-size: .74rem; }
  .chip-toggle { padding: 9px 10px; font-size: .7rem; }
  #search-input { padding: 10px 12px; }
}

/* ---- grid: phones 2 cols, tablets 3, desktop auto ---- */
.grid {
  padding-left: max(40px, env(safe-area-inset-left));
  padding-right: max(40px, env(safe-area-inset-right));
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}
@media (min-width: 561px) and (max-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 36px 26px; padding: 30px 24px calc(40px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .grid { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .card { border-radius: 14px; }
  .card-body { padding: 10px 11px 11px; gap: 5px; }
  .card-name { font-size: .84rem; }
  .card-price { font-size: 1rem; }
  .card-stock { font-size: .7rem; }
  .card-eyebrow { font-size: .58rem; letter-spacing: .11em; }
  .card-typesize { font-size: .7rem; }
  /* a 2-col phone card is ~155px: dots + wide gaps cannot both fit, so the
     segments separate by pure whitespace — airier AND never clipped */
  .card-spec { font-size: .66rem; gap: 11px; }
  .card-spec i { display: none; }
  .size-chips span { padding: 4px 8px; font-size: .58rem; }
  .stepper { height: 44px; }
  .stepper button { flex: 0 0 44px; }
  .sold-out-label { height: 44px; font-size: .68rem; }
  .badge { top: 8px; left: 8px; font-size: .56rem; padding: 4px 9px 4px 7px; }
}
/* very narrow (320px): keep 2 columns but trim */
@media (max-width: 340px) {
  .grid { gap: 10px; padding-left: 10px; padding-right: 10px; }
  .card-body { padding: 8px 9px 9px; }
  .stepper button { flex: 0 0 38px; font-size: 1.15rem; }
  .card-topline .card-typesize { display: none; }
}
/* list view — fine tuning for smaller phones */
@media (max-width: 400px) {
  .grid.list .card {
    gap: 10px;
    padding: 9px 10px 9px 8px;
    min-height: 110px;
  }
  .grid.list .card-img {
    height: 100px;
    width: 74px;
    max-width: 78px;
    min-width: 66px;
  }
  .grid.list .card-body {
    column-gap: 8px;
    row-gap: 3px;
  }
  .grid.list .card-name {
    font-size: .90rem;
    gap: 5px;
  }
  .grid.list .card-spec {
    font-size: .74rem;
    gap: 3px 6px;
  }
  .grid.list .card-meta {
    gap: 2px 6px;
  }
  .grid.list .card-price {
    font-size: 1.02rem;
  }
  .grid.list .card-stock {
    font-size: .70rem;
  }
  .grid.list .stepper,
  .grid.list .sold-out-label,
  .grid.list .guest-cta {
    min-width: 102px;
    height: 38px;
  }
  .grid.list .stepper button {
    flex: 0 0 32px;
    font-size: 1.15rem;
  }
}
@media (max-width: 350px) {
  .grid.list .card {
    gap: 8px;
    padding: 8px 8px 8px 6px;
  }
  .grid.list .card-img {
    height: 94px;
    width: 68px;
    min-width: 58px;
  }
  .grid.list .card-body {
    column-gap: 6px;
  }
  .grid.list .card-name {
    font-size: .86rem;
  }
  .grid.list .card-spec {
    font-size: .70rem;
  }
  .grid.list .card-price {
    font-size: .96rem;
  }
  .grid.list .stepper,
  .grid.list .sold-out-label,
  .grid.list .guest-cta {
    min-width: 96px;
    height: 36px;
  }
  .grid.list .stepper button {
    flex: 0 0 30px;
  }
}

/* ---- cart bar ---- */
.cart-bar {
  width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
}
@media (max-width: 560px) {
  .cart-bar { padding: 8px 8px 8px 18px; gap: 10px; }
  #cart-qty { font-size: .95rem; }
  #cart-amount { font-size: .78rem; }
  .cart-bar .btn-primary { padding: 12px 18px; font-size: .9rem; }
}
@media (max-width: 340px) {
  .cart-bar .btn-primary { padding: 12px 14px; font-size: .84rem; }
}

/* ---- overlays / sheets (bottom sheets on phones) ---- */
.overlay { padding-top: env(safe-area-inset-top); }
.sheet {
  max-height: 90dvh;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.sheet.review-sheet { max-height: 86dvh; }
@media (max-width: 599px) {
  .sheet { max-width: 100%; }
  .sheet.review-sheet { max-height: 92dvh; border-radius: 20px 20px 0 0; }
  .sheet.review-sheet::before {          /* drag-handle affordance */
    content: '';
    display: block;
    width: 40px; height: 4px;
    border-radius: 2px;
    background: rgba(29,29,31,.14);
    margin: 10px auto 0;
    flex: none;
  }
  .review-head { padding: 12px 18px 12px; }
  .review-lines { padding: 0 18px; }
  .review-footer { padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); }
  .review-line { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 11px 0; }
  .rl-thumb { width: 48px; height: 60px; }
  .rl-stepper button { width: 36px; height: 34px; }
  .rl-stepper span { min-width: 54px; font-size: .74rem; }
  .rt-amount { font-size: 1.25rem; }
  .review-footer .btn-primary.big { padding: 14px 20px; font-size: .92rem; }
  .success-sheet { padding: 32px 20px calc(28px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .review-footer { grid-template-columns: 1fr; row-gap: 10px; }
  .review-footer .btn-primary.big { grid-column: 1; grid-row: 2; width: 100%; }
  #review-error { grid-row: 3; }
  .review-line { grid-template-columns: 44px 1fr; }
  .rl-right { grid-column: 2; text-align: left; display: flex; gap: 10px; align-items: baseline; }
  .rl-sets { margin-top: 0; }
}
/* landscape phone: sheets must not exceed the short viewport */
@media (max-height: 500px) {
  .overlay { align-items: center; }
  .sheet, .sheet.review-sheet { max-height: 96dvh; border-radius: 14px; }
  .sheet.review-sheet::before { display: none; }
  .review-head { padding: 10px 18px 8px; }
  .review-footer { padding: 8px 18px 10px; }
  .success-sheet { padding: 18px 20px; }
  .tick { width: 52px; height: 52px; margin-bottom: 10px; font-size: 1.5rem; }
}

/* ---- photo viewer ---- */
.photo-overlay {
  z-index: 500;
  padding: calc(12px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  touch-action: pan-y pinch-zoom;
}
#photo-img { max-height: 80dvh; -webkit-user-drag: none; user-select: none; }
.photo-close { top: calc(18px + env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); }
.photo-count { top: calc(24px + env(safe-area-inset-top)); }
@media (max-width: 560px) {
  #photo-img { max-height: calc(100dvh - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .photo-close { width: 44px; height: 44px; top: calc(12px + env(safe-area-inset-top)); right: 12px; }
  .photo-count { top: calc(20px + env(safe-area-inset-top)); }
  .photo-nav { width: 42px; height: 42px; top: 45%; bottom: auto; transform: translateY(-50%); }
  .photo-caption {
    width: calc(100% - 24px);
    max-width: 500px;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 16px;
    box-sizing: border-box;
  }
  .photo-caption-text { min-width: 0; flex: 1; }
  .photo-title { font-size: .94rem; font-weight: 800; line-height: 1.25; }
  .photo-detail { font-size: .74rem; line-height: 1.35; gap: 2px 6px; }
  .photo-stepper { width: 128px; height: 40px; flex: 0 0 128px; }
  .photo-stepper button { flex: 0 0 38px; font-size: 1.2rem; }
  .photo-stepper input { font-size: 15px; font-weight: 700; }
}
@media (max-width: 360px) {
  .photo-caption { padding: 8px 10px; gap: 8px; }
  .photo-title { font-size: .86rem; }
  .photo-detail { font-size: .70rem; }
  .photo-stepper { width: 110px; height: 38px; flex: 0 0 110px; }
  .photo-stepper button { flex: 0 0 32px; }
}
/* landscape phone: image and caption side by side */
@media (max-height: 500px) and (orientation: landscape) {
  .photo-overlay { flex-direction: row; gap: 14px; padding-left: max(70px, env(safe-area-inset-left)); padding-right: max(70px, env(safe-area-inset-right)); }
  #photo-img { max-height: calc(100dvh - 24px); max-width: 60vw; }
  .photo-caption { width: auto; flex: 1; flex-direction: column; align-items: stretch; max-width: 260px; }
  .photo-stepper { width: 100%; }
  .photo-nav { top: 50%; bottom: auto; transform: translateY(-50%); }
  .photo-nav:active { transform: translateY(-50%) scale(.9); }
}

/* ---- tablets ---- */
@media (min-width: 761px) and (max-width: 1024px) {
  .shop-header { padding-left: 20px; padding-right: 20px; }
  .grid { padding-left: 20px; padding-right: 20px; }
}

/* ---- short viewports (phone landscape): header stays compact ---- */
@media (max-height: 500px) {
  .shop-header { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  .header-row { margin-bottom: 6px; }
}

/* ---- colour capsule on colour-variant tiles: Apple style — a real-colour
   swatch dot + quiet Title-case label on a soft neutral pill ---- */
.colour-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 6px; border-radius: 999px;
  font-size: .68rem; font-weight: 600; letter-spacing: .01em;
  text-transform: none; vertical-align: 1px; white-space: nowrap;
  background: rgba(120, 120, 128, .10); color: #3a3f47;
}
.cp-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16), inset 0 1.5px 2px rgba(255, 255, 255, .5);
}
.card-eyebrow .colour-pill { margin-left: 4px; }
.rl-name .colour-pill { vertical-align: 2px; }

.sg-pill {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 999px;
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  text-transform: none; vertical-align: 1px; white-space: nowrap;
}
.sg-pill-small {
  background: rgba(0, 122, 255, .10); color: #007aff;
}
.sg-pill-big {
  background: rgba(175, 82, 222, .12); color: #af52de;
}

/* =====================================================================
   POLISH LAYER — the details you feel before you see them.
   Additive only. Light source is consistently TOP: every raised surface
   carries a faint top edge-light, every recessed well a faint top inner
   shade. Shadows are ink-tinted, triple-layered (contact / mid / ambient).
   ===================================================================== */

/* paper grain: breaks digital flatness at 1.5% — fixed + inert, zero cost */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;   /* topmost + inert; invisible at 1.5% even over photos */
  pointer-events: none;
  opacity: .015;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* (no relative/z-index regroup here: it once overrode the header's sticky
   and the cart bar's fixed positioning — the grain floats on top instead) */

/* type engine niceties */
html { text-rendering: optimizeLegibility; }
body { accent-color: var(--text); }
input { caret-color: var(--blue); }

/* raised surfaces get a machined top edge-light */
.card, .buyer-chip, .view-toggle, .chip-toggle, #search-input {
  background-image: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 26%);
}
.card { background-color: var(--surface); }
.card.sold-out { background-image: none; }

/* cards: contact + mid + ambient, all ink-tinted; hover blooms the ambient */
.card {
  box-shadow:
    0 0 0 1px rgba(29,29,31,.04),
    0 1px 1px rgba(29,29,31,.05),
    0 4px 10px -4px rgba(29,29,31,.06),
    0 24px 48px -32px rgba(29,29,31,.28);
}
.card:hover {
  box-shadow:
    0 0 0 1px rgba(29,29,31,.05),
    0 1px 1px rgba(29,29,31,.05),
    0 8px 18px -8px rgba(29,29,31,.10),
    0 40px 80px -36px rgba(29,29,31,.38);
}
.card.in-cart {
  box-shadow:
    0 0 0 2px var(--text),
    0 1px 1px rgba(29,29,31,.05),
    0 24px 48px -32px rgba(29,29,31,.35);
}

/* recessed wells shade at the top — the inverse of the raised surfaces */
.stepper, .rl-stepper, .sold-out-label {
  box-shadow: inset 0 1px 2px rgba(29,29,31,.05);
}
.stepper:focus-within { box-shadow: inset 0 1px 2px rgba(29,29,31,.03), 0 0 0 4px rgba(0,113,227,.12); }
.qty-active .stepper { box-shadow: inset 0 1px 2px rgba(29,29,31,.03), 0 1px 2px rgba(29,29,31,.06); }

/* pressed physics: everything clickable answers in under 100ms */
.chip-toggle:active, #switch-btn:active, .view-toggle button:active { transform: scale(.96); transition-duration: .08s; }
.btn-primary:active { transform: scale(.97); transition-duration: .08s; }

/* hover-capable devices: quiet lifts, nothing on touch */
@media (hover: hover) {
  .chip-toggle:hover { border-color: rgba(29,29,31,.18); color: var(--text); }
  .view-toggle button:not(.active):hover { color: var(--text); background: var(--bg); }
  .buyer-chip:hover { box-shadow: 0 2px 8px -2px rgba(29,29,31,.10); }
  .btn-primary { will-change: transform; }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(29,29,31,.35); }
  .btn-primary:active { transform: translateY(0) scale(.97); }
  .cart-bar .btn-primary:hover { box-shadow: 0 8px 24px -8px rgba(0,0,0,.5); }
  .card-img { isolation: isolate; }
  .card:hover .card-img img:not(.bg) { filter: brightness(1.02); }
}

/* photos fade in instead of popping */
@keyframes img-in { from { opacity: 0; } }
.card-img img { animation: img-in .45s ease-out backwards; }

/* the view-toggle's active chip sits INTO the pill, not on it */
.view-toggle button.active { box-shadow: inset 0 1px 2px rgba(0,0,0,.28); }

/* cart island: machined metal — top light, bottom falloff, deeper stack */
.cart-bar {
  background-image: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 40%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 2px 4px rgba(22,22,24,.25),
    0 12px 24px -8px rgba(22,22,24,.35),
    0 32px 72px -16px rgba(22,22,24,.55);
}

/* sheets: same triple-stack, plus a crisper hairline against the scrim */
.sheet {
  box-shadow:
    0 0 0 1px rgba(29,29,31,.05),
    0 -8px 24px -12px rgba(29,29,31,.18),
    0 24px 80px -24px rgba(29,29,31,.45);
}

/* double focus ring: white gap then blue — reads on any background and
   follows each control's own radius */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--blue);
}
#search-input:focus-visible, #code-input:focus-visible, .stepper input:focus-visible { box-shadow: none; }
#search-input:focus-visible { box-shadow: 0 0 0 4px rgba(0,113,227,.12); border-color: var(--blue); }
#code-input:focus-visible { box-shadow: 0 0 0 4px rgba(0,113,227,.14); border-color: var(--blue); }

/* desktop scrollbar in the same ink family */
@media (hover: hover) {
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-thumb {
    background: rgba(29,29,31,.22);
    border-radius: 999px;
    border: 3px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(29,29,31,.34); }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* people who ask for more contrast get real hairlines and darker captions */
@media (prefers-contrast: more) {
  :root { --border: rgba(29,29,31,.28); --muted: #515154; }
  .card { box-shadow: 0 0 0 1px rgba(29,29,31,.35); }
}

/* the grain must never dim a photo being inspected */
.photo-overlay { z-index: 500; }

/* =====================================================================
   MOTION LAYER — choreography, not decoration. Everything transform +
   opacity, spring curves, `backwards` fill so nothing flashes unstyled.
   The global prefers-reduced-motion rule above kills all of it at once.
   ===================================================================== */

/* login: the screen assembles top-down, one element at a time */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
.login-card > * { animation: rise-in .6s var(--ease-in-view) backwards; }
.login-card .brand-logo-lg { animation-delay: .05s; }
.login-card .brand-mark    { animation-delay: .12s; }
.login-card .login-sub     { animation-delay: .18s; }
.login-card .code-label    { animation-delay: .26s; }
.login-card #code-input    { animation-delay: .32s; }
.login-card .login-error   { animation: none; }
.login-card .enter-btn     { animation-delay: .40s; }
.login-card .login-hint    { animation-delay: .50s; }

/* shop header settles in once on entry */
@keyframes drop-in { from { opacity: 0; transform: translateY(-10px); } }
.header-row { animation: drop-in .5s var(--ease-in-view) backwards; }
.toolbar    { animation: drop-in .5s var(--ease-in-view) .08s backwards; }

/* stock threads draw themselves after the card lands */
@keyframes thread-fill { from { transform: scaleX(0); } }
.thread i {
  transform-origin: left center;
  animation: thread-fill .9s var(--ease-in-view) .35s backwards;
}

/* scarcity breathes — a 3s pulse too slow to distract, alive enough to notice */
/* scarcity no longer breathes the whole capsule — the spark dot carries the
   life now, so Low stock reads identically to New arrival and Sold out */

/* cart counter physically answers every quantity change */
@keyframes cart-bump { 35% { transform: scale(1.14); } }
#cart-qty { display: inline-block; }
#cart-qty.bump { animation: cart-bump .28s var(--ease-in-view); }


/* success: tick pops, then the words arrive in reading order */
.success-sheet h2             { animation: rise-in .5s var(--ease-in-view) .15s backwards; }
.success-sheet .order-no      { animation: rise-in .5s var(--ease-in-view) .24s backwards; }
.success-sheet .success-detail{ animation: rise-in .5s var(--ease-in-view) .32s backwards; }
.success-sheet .success-note  { animation: rise-in .5s var(--ease-in-view) .40s backwards; }
.success-sheet .btn-primary   { animation: rise-in .5s var(--ease-in-view) .48s backwards; }

/* colour dots gleam once as their card enters — a hint they are real */
@keyframes dot-in { from { transform: scale(.4); opacity: 0; } }
.card.enter .cp-dot { animation: dot-in .5s var(--ease-in-view) .25s backwards; }

/* the photo caption's stepper nudges up with the caption, slightly later */
.photo-caption .photo-stepper { animation: rise-in .45s var(--ease-in-view) .12s backwards; }

/* empty state fades rather than blinks */
.empty-msg { animation: rise-in .5s var(--ease-in-view) backwards; }

/* ---- MOTION LAYER II — more items, same discipline -------------------- */

/* overlay scrims fade in instead of snapping to dark */
@keyframes scrim-in { from { opacity: 0; } }
.overlay { animation: scrim-in .25s ease-out; }

/* condensing header: the logo tile quietly shrinks once content scrolls
   under the glass — the page feels like it gains depth as you dig in */
.brand-logo-sm { transition: transform .35s var(--ease); }
.shop-header.scrolled .brand-logo-sm { transform: scale(.86); }

/* toggles answer with a tiny pop the moment they switch on */
@keyframes toggle-on { 40% { transform: scale(1.08); } }
.chip-toggle.active { animation: toggle-on .25s var(--ease-in-view); }
.view-toggle button.active { animation: toggle-on .25s var(--ease-in-view); }

/* the "= N sets" hint slides up when a quantity snaps to whole sets */
@keyframes hint-in { from { opacity: 0; transform: translateY(4px); } }
.set-hint.snapped { animation: hint-in .3s var(--ease-in-view); }

/* the login logo levitates — 6s, ±2px, after its entrance lands */
@keyframes levitate {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.brand-logo-lg {
  animation:
    rise-in .6s var(--ease-in-view) .05s backwards,
    levitate 6s ease-in-out 1.2s infinite;
}

/* photo viewer arrows lean the way they point (hover devices only) */
@media (hover: hover) {
  .photo-nav.prev:hover { transform: translateY(-50%) translateX(-2px); }
  .photo-nav.next:hover { transform: translateY(-50%) translateX(2px); }
}

/* the ₹ amount glides in whenever the cart counter bumps — pure CSS,
   keyed off the sibling's bump class */
@keyframes amt-slide { from { opacity: .2; transform: translateY(3px); } }
#cart-qty.bump + #cart-amount { animation: amt-slide .32s var(--ease-in-view); }
#cart-amount { display: inline-block; }

/* stock thread recolours smoothly if a refresh flips ok -> low */
.thread i { transition: background .35s ease; }

/* review sheet close button turns slightly on hover — a hinge, not a jump */
@media (hover: hover) {
  .icon-btn { transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
  .icon-btn:hover { transform: rotate(90deg); }
}

/* logout pill nudges right on hover, hinting the door */
@media (hover: hover) {
  #switch-btn { transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
  #switch-btn:hover { transform: translateX(1px); }
}

/* ---- guest browse mode: look freely, order with a code ---- */
.guest-cta {
  height: 42px; margin-top: 6px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.guest-cta:active { transform: scale(.97); }
@media (hover: hover) {
  .guest-cta:hover { background: #fff; border-color: rgba(29,29,31,.25); }
}
@media (max-width: 560px) { .guest-cta { height: 44px; font-size: .72rem; } }

.browse-link {
  display: inline-block;
  margin-top: 18px;
  background: none;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.browse-link:hover { color: var(--text); border-color: rgba(29,29,31,.25); background: #fff; }
.login-card .browse-link { animation: rise-in .6s var(--ease-in-view) .58s backwards; }

/* =====================================================================
   LIQUID GLASS — the functional layer only (HIG: liquid-glass.md).
   Content (cards, grid, sheet bodies) stays opaque; glass lives on the
   header, the cart island, and the photo-viewer controls. Regular
   variant for the text-bearing header; clear variant over media.
   Every glass surface has an opaque fallback for Reduce Transparency.
   ===================================================================== */

/* --- header: REGULAR liquid glass on desktop/tablet only --- */
@media (min-width: 561px) {
  .shop-header {
    background: linear-gradient(180deg, rgba(250,250,252,.72), rgba(243,243,246,.56));
    -webkit-backdrop-filter: blur(32px) saturate(1.9) brightness(1.06);
    backdrop-filter: blur(32px) saturate(1.9) brightness(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),        /* crisp top edge-light */
      inset 0 0 0 1px rgba(255,255,255,.22),       /* faint luminous rim */
      inset 0 -1px 0 rgba(29,29,31,.04);           /* hairline base */
    transition:
      -webkit-backdrop-filter .45s var(--ease), backdrop-filter .45s var(--ease),
      box-shadow .45s var(--ease), border-color .3s var(--ease);
  }
  /* wet-glass gloss: a soft top sheen + a specular highlight that follows the
     pointer, so light glances across the pane as you move over it */
  .shop-header::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
    background:
      radial-gradient(180px 120px at var(--gx, 82%) var(--gy, -10%),
        rgba(255,255,255,.55), rgba(255,255,255,0) 72%),
      linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 58%);
    opacity: .72;
    transition: opacity .45s var(--ease);
  }
  .shop-header > * { position: relative; z-index: 1; }   /* content above the gloss */
  .shop-header.scrolled {
    border-bottom-color: transparent;
    -webkit-backdrop-filter: blur(44px) saturate(2.1) brightness(1.08);
    backdrop-filter: blur(44px) saturate(2.1) brightness(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 0 0 1px rgba(255,255,255,.3),
      inset 0 -1px 0 rgba(29,29,31,.06),
      0 16px 42px -22px rgba(29,29,31,.38);        /* the pane casts a soft shadow */
  }
  .shop-header.scrolled::before { opacity: 1; }      /* gloss intensifies once lifted */

  /* scroll-edge effect: a thin band just below the bar where the content
     scrolling underneath blurs and fades as it meets the glass, instead of
     colliding with a hard edge. Inert, and only while pinned. */
  .shop-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 22px;
    pointer-events: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask: linear-gradient(to bottom, #000, transparent);
    mask: linear-gradient(to bottom, #000, transparent);
    opacity: 0;
    transition: opacity .3s var(--ease);
  }
  .shop-header.scrolled::after { opacity: 1; }
}

/* --- cart island: CLEAR liquid glass over content (dark, brings its own
   dimming), stronger blur + saturation, refraction highlight --- */
.cart-bar {
  background:
    linear-gradient(180deg, rgba(40,40,44,.72), rgba(22,22,24,.82));
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),          /* top refraction line */
    inset 0 -1px 0 rgba(0,0,0,.3),                 /* bottom shade */
    0 12px 24px -8px rgba(22,22,24,.35),
    0 32px 72px -16px rgba(22,22,24,.55);
}

/* --- overlay scrims: a glass wash over the whole page, not just a tint --- */
.overlay {
  background: rgba(29,29,31,.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}

/* --- photo viewer: CLEAR glass controls over rich media (the 35% dimming
   already lives on .photo-overlay's background) --- */
.photo-glass {
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.photo-count {
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
/* the caption tray is text — regular variant, kept near-opaque for reading */
.photo-caption {
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
}

/* --- fallbacks: the material must never fight the system --- */
/* Reduce Transparency → solid surfaces, no blur (HIG checklist #5) */
@media (prefers-reduced-transparency: reduce) {
  .shop-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .shop-header::after, .shop-header::before { display: none; }
  .cart-bar { background: #161618; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .overlay { background: rgba(29,29,31,.72); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .photo-glass, .photo-count { background: rgba(40,40,44,.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .photo-caption { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Increase Contrast → thicker fills and real edges */
@media (prefers-contrast: more) {
  .shop-header { background: rgba(245,245,247,.96); }
  .cart-bar { background: #111113; border-color: rgba(255,255,255,.3); }
  .photo-glass { background: rgba(20,20,24,.6); border-color: rgba(255,255,255,.5); }
}
/* browsers without backdrop-filter (older Android WebView): opaque, legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shop-header { background: rgba(245,245,247,.97); }
  .cart-bar { background: #161618; }
  .overlay { background: rgba(29,29,31,.72); }
  .photo-caption { background: #fff; }
}

/* the spark dot pulses; the plate catches one slow sheen — shared by every
   badge variant (see the .badge capsule near the top of this file) */
@keyframes spark-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: .78; }
}
@keyframes badge-sheen {
  0%, 22% { transform: translateX(-120%); }
  40%, 100% { transform: translateX(120%); }
}
@media (max-width: 560px) {
  .badge.stock { left: 8px; right: auto; }
}