/* ============================================================
   GodMan Classics — design system
   Derived from the "1 OF 1 FOOTWEARS" poster series:
   warm-grey ground, outlined display type, black minimal ink.
   Accessibility NFRs: base font ≥ 14px, high contrast,
   focus-visible outlines, 44px touch targets.
   ============================================================ */

:root {
  --bg: #d9d3d1;
  --bg-soft: #e6e1df;
  --paper: #efebe9;
  --card: #ffffff;
  --ink: #1b1b1b;
  --ink-soft: #57524e;
  --line: #b7b0ac;
  --outline: #979089;
  --accent: #1b1b1b;
  --success: #1e6b34;
  --warn: #9a5b00;
  --danger: #b3261e;
  /* Squared, not rounded. The auth page set this vocabulary and the rest
     of the store now follows it — pills and 14px cards read as SaaS. */
  --radius: 2px;
  --surface: #faf8f7;          /* warm off-white, not flat #fff */
  --shadow: 0 10px 30px rgba(27, 22, 20, .10);
  --font: "Outfit", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;   /* never scroll sideways (keeps sticky header working) */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg) 88%, white);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  font-weight: 800; font-size: 22px; letter-spacing: 1px;
  border: 2.5px solid var(--ink); padding: 2px 9px; border-radius: 4px;
}
.brand-of { font-size: 11px; font-weight: 600; margin: 0 1px; }
.brand-name { font-size: 12px; font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: 2px; }
/* Custom logo image (drop assets/img/logo-icon.png). Header sits on a light
   ground; the footer is dark, so its copy is inverted to read white. */
.brand-logo { height: 40px; width: auto; object-fit: contain; display: block; }
.footer-logo { height: 54px; width: auto; object-fit: contain; display: block; margin-bottom: 12px; }

.main-nav { display: flex; gap: 4px; margin-left: auto; }
.main-nav a {
  position: relative; padding: 9px 4px; margin: 0 10px; border-radius: 0;
  font-weight: 600; font-size: 14px;
  color: var(--ink-soft); transition: color .18s;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.22,.72,.16,1);
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after { transform: scaleX(.4); }
.main-nav a.active { color: var(--ink); background: none; }
.main-nav a.active::after { transform: scaleX(1); }
.nav-admin { border: 1.5px dashed var(--outline); }

.header-actions { display: flex; gap: 6px; align-items: center; }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: transparent; color: var(--ink);
}
.icon-btn:hover { background: var(--bg-soft); }
.cart-count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.search-bar {
  max-width: 1200px; margin: 0 auto; padding: 0 20px 14px;
  display: flex; gap: 10px;
}
.search-bar[hidden] { display: none; }   /* only show when the search icon is tapped */
/* the hidden attribute must always win, even over display rules like .forgot-link/.btn */
[hidden] { display: none !important; }
.search-bar input {
  flex: 1; min-width: 0; padding: 11px 16px; border: 1.5px solid var(--ink);
  border-radius: 2px; font: inherit; background: var(--surface);
}
.search-bar .btn { flex: none; }

/* ---------- layout helpers ---------- */
.site-main { flex: 1; width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 28px 20px 64px; }
.view-title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.5px; margin-bottom: 6px; }
.view-sub { color: var(--ink-soft); margin-bottom: 26px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; min-height: 44px; border-radius: 2px;
  font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(27,22,20,.14); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-outline { background: transparent; }
.btn-sm { padding: 9px 16px; min-height: 38px; font-size: 11px; letter-spacing: .14em; }
.btn-block { width: 100%; }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }

/* ---------- hero (poster homage) ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 64px 20px 30px; text-align: center;
}
/* The arched wordmark is drawn tall and overlapped the sticky header, which
   clipped "1 OF 1" down to its bottom edge. Give the lockup its own room. */
.hero-oneof {
  position: relative; z-index: 1;
  font-size: clamp(22px, 3.5vw, 34px); font-weight: 800;
  letter-spacing: 6px; color: var(--ink-soft);
}
.hero-arch { width: min(720px, 92vw); margin: 0 auto; display: block; }
.hero-shoe-wrap { position: relative; width: min(520px, 88vw); margin: -30px auto 0; }
.hero-shoe-wrap img, .hero-shoe-wrap svg { width: 100%; filter: drop-shadow(0 24px 30px rgba(27,22,20,.28)); }
.hero-name { font-size: clamp(28px, 4.5vw, 44px); font-weight: 500; margin-top: 18px; letter-spacing: .5px; }
.hero-tag { font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.hero-order { position: absolute; right: 24px; bottom: 18px; text-align: right; font-size: 13px; color: var(--ink-soft); display: none; }
@media (min-width: 900px) { .hero-order { display: block; } }

.usp-row {
  max-width: 1000px; margin: 30px auto 0; padding: 0 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
}
.usp {
  border-top: 2px solid var(--ink); padding-top: 12px; text-align: left;
}
.usp b { text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; }
.usp p { color: var(--ink-soft); font-style: italic; font-size: 14px; }

/* ---------- featured marquee (auto-scroll on desktop, grid on phone) ---------- */
.featured-marquee { margin-top: 4px; }
/* phone / default: a normal responsive grid, no animation */
.featured-marquee .marquee-track {
  display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.marquee-dup { display: none; }   /* duplicate set is only used by the desktop marquee */

@media (min-width: 861px) {
  .featured-marquee.is-marquee { overflow: hidden; padding: 8px 0; }
  .featured-marquee.is-marquee .marquee-track {
    display: flex; flex-wrap: nowrap; width: max-content; max-width: none;
    margin: 0; padding: 0; gap: 22px;
    animation: marquee-ltr 28s linear infinite;
  }
  .featured-marquee.is-marquee .marquee-track > .card { flex: 0 0 262px; width: 262px; }
  .featured-marquee.is-marquee .marquee-dup { display: block; }
  .featured-marquee.is-marquee:hover .marquee-track { animation-play-state: paused; }
}
/* shoes drift left → right; the duplicated set makes the loop seamless */
@keyframes marquee-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .featured-marquee.is-marquee .marquee-track { animation: none; }
}

/* ---------- product grid ---------- */
.grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/* Phones: a 240px minimum leaves room for exactly one column at 390px, so
   every card filled the viewport and browsing 13 pairs meant ~6900px of
   scrolling. Two columns is the norm for a footwear grid on mobile. The card
   design is unchanged — only the track sizing and type scale differ. */
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid .card-body { padding: 11px 12px 14px; }
  .grid .card-name { font-size: 13.5px; line-height: 1.3; }
  .grid .card-meta { font-size: 11.5px; }
  .grid .card-price { font-size: 15px; }
  .grid .card-media { padding: 12px; }
  .grid .badge-cat { font-size: 9.5px; padding: 3px 7px; }
}
.card {
  position: relative; background: var(--surface); border-radius: var(--radius);
  overflow: hidden; transition: transform .22s cubic-bezier(.22,.72,.16,1), border-color .22s;
  /* an edge, not a shadow — the drop shadow was what made these read as
     floating SaaS tiles rather than a printed catalogue grid */
  border: 1px solid var(--line); box-shadow: none;
}
.card:hover { transform: translateY(-3px); border-color: var(--ink); }
.card-media { position: relative; aspect-ratio: 1 / .85; display: flex; align-items: center; justify-content: center; padding: 18px; }
.card-media .poster-word {
  position: absolute; top: 10px; left: 0; right: 0; text-align: center;
  font-size: 26px; font-weight: 800; letter-spacing: 2px;
  color: transparent; -webkit-text-stroke: 1.2px var(--outline);
  pointer-events: none; opacity: .55;
}
.card-media img, .card-media svg { max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(27,22,20,.13)); z-index: 1; }
/* Loading state. The card already reserves its box via aspect-ratio, but the
   image inside is 0x0 until it decodes — so a lazy card showed an empty well
   rather than anything intentional. A quiet skeleton fills that gap and the
   image fades in over it once decoded. */
.card-media::after {
  content: ""; position: absolute; inset: 12px; z-index: 0; border-radius: 2px;
  background: linear-gradient(100deg, var(--bg-soft) 32%, var(--paper) 50%, var(--bg-soft) 68%);
  background-size: 240% 100%;
  animation: cardSkeleton 1.5s ease-in-out infinite;
}
/* Once ANY media in the card has painted, retire the skeleton. */
.card-media:has(img[data-loaded="1"])::after,
.card-media:has(svg)::after { animation: none; opacity: 0; transition: opacity .3s ease; }
.card-media img { opacity: 0; transition: opacity .35s ease; }
.card-media img[data-loaded="1"] { opacity: 1; }
@keyframes cardSkeleton { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) {
  .card-media::after { animation: none; }
}
.card-body { padding: 15px 16px 18px; background: var(--surface); }
.card-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.card-meta { color: var(--ink-soft); font-size: 11px; margin-top: 4px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.card-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.card-price { font-weight: 800; font-size: 17px; }
.price-est { font-size: 11px; color: var(--warn); font-weight: 600; }
.badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .16em;
  padding: 4px 9px; border-radius: 2px; text-transform: uppercase;
}
.badge-out { background: var(--danger); color: #fff; }
.badge-low { background: #f4e3c8; color: var(--warn); }
.badge-cat { background: var(--bg-soft); color: var(--ink-soft); position: absolute; top: 12px; left: 12px; z-index: 2; }
.wish-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  display: grid; place-items: center; line-height: 1;
  background: rgba(255,255,255,.85); color: var(--ink-soft); transition: color .15s, transform .15s;
}
.wish-btn:hover { transform: scale(1.08); }
.wish-btn.active { color: var(--danger); }

/* ---------- filters ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 24px;
}
.filter-bar select, .filter-bar input {
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 2px;
  font: inherit; background: var(--surface); min-height: 42px;
}
.filter-bar input[type="search"] { flex: 1 1 180px; }
.filter-count { margin-left: auto; color: var(--ink-soft); font-size: 13px; font-weight: 600; }

/* ---------- product detail ---------- */
.product-layout { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .product-layout { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.product-stage {
  position: relative; background: var(--card); border-radius: var(--radius);
  padding: 28px; display: flex; align-items: center; justify-content: center; min-height: 440px;
  overflow: hidden; box-shadow: 0 2px 10px rgba(27, 22, 20, .05);
}
.product-stage .poster-word {
  position: absolute; top: 18px; left: 0; right: 0; text-align: center;
  font-size: clamp(34px, 6vw, 58px); font-weight: 800; letter-spacing: 3px;
  color: transparent; -webkit-text-stroke: 1.5px var(--outline); opacity: .5;
}
.product-stage img, .product-stage svg { max-height: 460px; z-index: 1; filter: drop-shadow(0 26px 28px rgba(27,22,20,.28)); }
.product-info h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 500; }
.product-brandline { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.product-price { font-size: 28px; font-weight: 800; margin: 12px 0 4px; }
.product-desc { color: var(--ink-soft); margin: 14px 0 20px; max-width: 52ch; }
.color-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.color-swatch {
  width: 52px; height: 52px; border-radius: 2px; border: 1px solid var(--line);
  background: var(--surface); padding: 3px; overflow: hidden;
}
.color-swatch img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.color-swatch.selected { border-color: var(--ink); border-width: 2px; }
.size-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.size-help { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 20px; }
.size-help a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.size-chip {
  min-width: 46px; height: 44px; border-radius: 2px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 700; font-size: 14px;
}
.size-chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.stock-note { font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.stock-note.ok { color: var(--success); }
.stock-note.low { color: var(--warn); }
.stock-note.out { color: var(--danger); }

/* ---------- virtual store (poster mode) ---------- */
.virtual-wrap { position: relative; min-height: calc(100vh - 140px); overflow: hidden; }
.poster {
  max-width: 640px; margin: 0 auto; padding: 34px 24px 90px; text-align: center; position: relative;
}
.poster-oneof { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: 8px; color: transparent; -webkit-text-stroke: 1.6px var(--ink-soft); }
.poster-arch-svg { width: 100%; margin-top: -4px; }
.poster-shoe {
  width: min(430px, 82vw); margin: 6px auto 0; position: relative;
  min-height: 300px; display: flex; align-items: center; justify-content: center;
}
/* gentle opacity-only fades — no sliding/jumping when shoes change */
.poster { animation: poster-in .3s ease; }
@keyframes poster-in { from { opacity: 0; } }
.poster-shoe img.swap-fade, .product-stage img.swap-fade { animation: img-swap .28s ease; }
@keyframes img-swap { from { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .poster, .poster-shoe img.swap-fade, .product-stage img.swap-fade { animation: none; }
}
.poster-shoe img, .poster-shoe svg { width: 100%; filter: drop-shadow(0 30px 34px rgba(27,22,20,.3)); }
.poster-name { font-size: clamp(30px, 5vw, 46px); font-weight: 500; margin-top: 26px; }
.poster-tag { font-size: 12.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-soft); margin-top: 10px; }
.poster-price { font-size: 22px; font-weight: 800; margin-top: 14px; }
.poster-order {
  position: absolute; right: 18px; bottom: 20px; text-align: right;
  font-size: 13px; color: var(--ink-soft); line-height: 1.5;
}
.poster-actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.virtual-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ink);
  background: rgba(255,255,255,.7); font-size: 22px; font-weight: 800; z-index: 5;
}
.virtual-nav:hover { background: var(--ink); color: #fff; }
.virtual-prev { left: 14px; } .virtual-next { right: 14px; }
.virtual-dots { display: flex; gap: 8px; justify-content: center; padding-bottom: 26px; }
.virtual-dots button { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; padding: 0; }
.virtual-dots button[aria-current="true"] { background: var(--ink); }
/* Touch / mobile: swipe to browse — hide the arrow buttons (mouse-driven
   laptops keep them) and show a small swipe hint above the dots. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .virtual-nav { display: none; }
  .virtual-dots { position: relative; }
  .virtual-dots::before {
    content: "‹  swipe  ›"; position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
  }
}

/* ---------- cart / checkout / forms ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.cart-layout { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.cart-line {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--bg-soft);
}
.cart-thumb { background: var(--paper); border-radius: 2px; padding: 8px; height: 76px; display: flex; align-items: center; justify-content: center; }
.cart-thumb img, .cart-thumb svg { max-height: 100%; }
.qty-ctl { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 2px; }
.qty-ctl button { width: 36px; height: 36px; border: none; background: none; font-size: 17px; font-weight: 700; border-radius: 2px; }
.qty-ctl button:hover { background: var(--bg-soft); }
.qty-ctl span { min-width: 28px; text-align: center; font-weight: 700; }
.sum-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14.5px; }
.sum-row.total { border-top: 2px solid var(--ink); margin-top: 10px; padding-top: 14px; font-size: 19px; font-weight: 800; }

.form-grid { display: grid; gap: 16px; }
.form-field label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 15px; min-height: 46px;
  border: 1px solid var(--line); border-radius: 2px; font: inherit; background: var(--surface);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--ink); outline: none; }
.form-field.invalid input { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 13px; font-weight: 600; margin-top: 5px; }
.form-note { font-size: 13px; color: var(--ink-soft); }
.tel-link { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.radio-card {
  display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line);
  border-radius: 2px; padding: 14px 16px; cursor: pointer; transition: border-color .15s;
}
.radio-card:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.radio-card input { margin-top: 4px; accent-color: var(--ink); width: 18px; height: 18px; }
.radio-card b { display: block; font-size: 14.5px; }
.radio-card small { color: var(--ink-soft); }

/* ---------- auth ---------- */
/* =========================================================
   AUTH — full-bleed editorial split (task left · brand right)
   Ground rules: no floating card, no pill chrome. Type and
   rules carry the hierarchy, the way the poster series does.
   ========================================================= */
.auth-view { max-width: none; padding: 0; }        /* break out of .container for full bleed */
.auth-wrap { max-width: 440px; margin: 0 auto; padding: 28px 20px 64px; }  /* forgot / OTP panels */

.auth-shell {
  display: grid; grid-template-columns: 1fr;
  /* warm off-white, not flat #fff — the site ground is a warm grey */
  background: #faf8f7;
}
@media (min-width: 900px) {
  /* asymmetric on purpose — a 50/50 split reads as a template */
  .auth-shell { grid-template-columns: minmax(0,.86fr) minmax(0,1fr); min-height: calc(100vh - 73px); }
}

/* ---------- LEFT: task area ---------- */
.auth-panel-form { display: flex; align-items: center; justify-content: center; padding: 44px 24px 52px; }
@media (min-width: 900px) { .auth-panel-form { padding: 56px clamp(48px, 6vw, 96px); } }
.auth-form-inner { width: 100%; max-width: 384px; }
/* tablet: a 384px column stranded in an 834px panel reads under-designed —
   give the form more width and the brand band a shorter, wider frame */
@media (min-width: 600px) and (max-width: 899px) {
  .auth-panel-form { padding: 56px 40px 64px; }
  .auth-form-inner { max-width: 452px; }
  .auth-panel-brand { min-height: 370px; }
  .auth-brand-content { padding: 40px 40px 38px; }
}
.auth-eyebrow {
  display: block; font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-soft); margin-bottom: 12px;
}
.auth-head { margin-bottom: 30px; }
.auth-title { font-size: clamp(30px,3.6vw,40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: 0 0 10px; }
.auth-sub { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0; max-width: 34ch; }

/* tabs: two words on a hairline, with a rule that slides between them */
.auth-tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line); margin-bottom: 30px;
}
.auth-tab {
  border: none; background: transparent; padding: 0 0 13px; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); transition: color .28s ease;
}
.auth-tab[aria-selected="true"] { color: var(--ink); }
.auth-tab:hover { color: var(--ink); }
.auth-tab-ind {
  position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; background: var(--ink);
  transition: transform .42s cubic-bezier(.22,.72,.16,1);
}
.auth-shell[data-mode="register"] .auth-tab-ind { transform: translateX(100%); }

/* form + animated collapse for the name field */
.auth-form { display: grid; gap: 22px; }
.auth-row[data-f] { max-height: 130px; transition: max-height .42s cubic-bezier(.22,.72,.16,1), opacity .3s ease, margin .42s cubic-bezier(.22,.72,.16,1); }
.auth-row.is-collapsed { max-height: 0; opacity: 0; margin: -22px 0; overflow: hidden; pointer-events: none; }

/* underline inputs — the single biggest shift away from boxed SaaS forms */
.auth-form .form-field label {
  display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-soft); margin-bottom: 2px;
}
.auth-form .form-field input {
  width: 100%; border: none; border-bottom: 1.5px solid var(--line); border-radius: 0;
  background: transparent; padding: 4px 0 9px; font-size: 16px; color: var(--ink);
  transition: border-color .26s ease;
}
.auth-form .form-field input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: none; }
/* the rule that draws in from the left on focus */
.auth-form .input-line { position: relative; display: block; }
.auth-form .input-line::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .42s cubic-bezier(.22,.72,.16,1);
}
.auth-form .form-field:focus-within .input-line::after { transform: scaleX(1); }
.auth-form .form-field.invalid .input-line::after { background: var(--danger); transform: scaleX(1); }

.forgot-link {
  justify-self: end; margin-top: -8px; font-size: 12.5px; color: var(--ink-soft);
  letter-spacing: .02em; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.forgot-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

.auth-divider { display: flex; align-items: center; gap: 16px; margin: 4px 0;
  color: var(--ink-soft); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); opacity: .6; }
.auth-shell[data-mode="register"] .auth-divider { display: none; }   /* Google is sign-in only */

/* squared buttons — pills read consumer-app, not fashion */
.auth-form .btn { border-radius: 2px; }
.auth-submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 20px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  transition: transform .16s cubic-bezier(.22,.72,.16,1), opacity .2s ease;
}
.auth-submit:active { transform: scale(.985); }
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 15px 20px; font-size: 12.5px; letter-spacing: .06em; font-weight: 700;
  transition: transform .16s cubic-bezier(.22,.72,.16,1), background-color .2s ease;
}
.btn-google:active { transform: scale(.985); }
.auth-submit .auth-spinner { display: none; }
.auth-submit.is-loading .auth-spinner {
  display: inline-block; width: 14px; height: 14px; margin-left: 11px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: authSpin .7s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

/* ---------- RIGHT: brand moment ---------- */
/* Mobile keeps the brand moment — it follows the form rather than pushing it
   down, so the task still leads but the page does not end on dead ground. */
.auth-panel-brand {
  position: relative; overflow: hidden; color: #fff; min-height: 400px;
  background: radial-gradient(135% 115% at 74% 6%, #2b2724 0%, #16130f 52%, #0a0908 100%);
}
@media (min-width: 900px) { .auth-panel-brand { min-height: 0; } }
/* a soft pool of light behind the wordmark, so the brand lands on something */
.auth-panel-brand::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1;
  transform: translate(-50%,-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.062) 0%, transparent 62%);
}
.auth-brand-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .42;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 4px 4px;
}
.auth-brand-sweep {
  position: absolute; inset: -45% -25%; z-index: 2; pointer-events: none; transform: translateX(-40%);
  background: linear-gradient(104deg, transparent 42%, rgba(255,255,255,.05) 50%, transparent 58%);
}
.auth-brand-content {
  position: relative; z-index: 3; height: 100%; min-height: inherit; display: flex; flex-direction: column;
  justify-content: space-between; padding: 34px 24px 32px;
}
@media (min-width: 900px) { .auth-brand-content { padding: 46px clamp(40px, 4.4vw, 64px) 44px; } }
.auth-brand-top { display: flex; align-items: center; gap: 15px; }
.auth-brand-mono { height: 38px; width: auto; }
.auth-brand-eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.72); }
/* ---------------- brand stage ----------------
   One mark at a time. It arrives oversized and out of focus, settles, holds,
   then leaves behind a directional wipe. Everything animated here is
   transform / opacity / filter / clip-path, so layout is never touched and
   the marks cannot shift the form beside them. */
.brandstage {
  position: relative; z-index: 3; flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 26px 0; min-height: 0;
}
.bs-window {
  position: relative;
  /* Fixed height: the marks differ wildly in aspect, and a height that
     tracked the artwork would jolt the panel on every change. */
  height: clamp(132px, 21vh, 226px);
}
.bs-plate { position: absolute; inset: 0; }

/* hairlines that frame the stage without boxing it in */
.bs-rule {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 58%, transparent);
}
.bs-rule-t { top: -20px; }
.bs-rule-b { bottom: -20px; }

.bs-logo {
  position: absolute; top: 50%; left: 0;
  /* Sized by HEIGHT, not width. Width-sizing letterboxes a square viewBox
     inside a wide box and object-fit re-centres the art, which pushed the
     mark off the left margin. Height is also what actually governs optical
     weight when the marks range from 1:1 to 4.6:1. */
  height: calc(var(--h, .5) * 100%);
  width: auto; max-width: 100%;
  object-fit: contain; object-position: left center;
  /* white marks on the dark panel, from single-colour source SVGs */
  /* brightness(0) invert(1) turns the single-colour source art white;
     the blur is what the mark arrives and departs with. */
  filter: brightness(0) invert(1) blur(16px);
  opacity: 0;
  /* entry pose: oversized, off-axis, out of focus */
  transform: translate(calc(var(--dir, 1) * 42px), -50%) scale(1.18);
  will-change: transform, opacity, clip-path;
}
/* Left-aligned on the same margin as the headline and copy below. Centring
   the mark put it on a second axis and broke the column. */
.bs-plate { display: block; }

/* ENTER — sharpens and settles */
.bs-logo.is-settled {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
  filter: brightness(0) invert(1) blur(0);
  transition:
    opacity 760ms cubic-bezier(.16,.84,.24,1),
    transform 900ms cubic-bezier(.16,.84,.24,1),
    filter 820ms cubic-bezier(.16,.84,.24,1);
}

/* EXIT — a directional wipe, not a fade */
.bs-logo.is-leaving {
  opacity: 0;
  transform: translate(calc(var(--dir, 1) * -34px), -50%) scale(.98);
  filter: brightness(0) invert(1) blur(10px);
  clip-path: inset(0 0 0 100%);
  transition:
    opacity 620ms cubic-bezier(.6,.04,.32,1),
    transform 620ms cubic-bezier(.6,.04,.32,1),
    filter 620ms cubic-bezier(.6,.04,.32,1),
    clip-path 660ms cubic-bezier(.62,.02,.3,1);
}

/* caption: index · rule · name */
.bs-caption {
  display: flex; align-items: center; gap: 13px;
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,.5);
  transition: opacity .34s ease;
}
.brandstage.is-turning .bs-caption { opacity: .32; }
.bs-index { color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums; }
.bs-tick { width: 26px; height: 1px; background: rgba(255,255,255,.28); }
.bs-name { color: rgba(255,255,255,.62); }

/* reduced motion: the whole set at rest, no sequence, no transitions */
.brandstage.is-static .bs-window { height: auto; }
.brandstage.is-static .bs-plate {
  position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 26px 34px;
}
.brandstage.is-static .bs-logo {
  position: static; opacity: 1; transform: none; transition: none;
  /* the entry blur must be cleared too — without this the marks render as
     unreadable smudges for exactly the people who opted out of motion */
  filter: brightness(0) invert(1);
  width: auto; height: 26px; max-width: none; margin: 0; will-change: auto;
}
.brandstage.is-static .bs-rule { display: none; }

/* Mobile is a short landscape band, not a tall panel: the stage gets its own
   proportions rather than a scaled-down copy of the desktop one. */
@media (max-width: 899px) {
  .brandstage { gap: 16px; padding: 12px 0; }
  .bs-window { height: 76px; }
  .bs-rule-t { top: -16px; }
  .bs-rule-b { bottom: -16px; }
  /* marks read smaller on a phone, so they take more of the width */
  .bs-logo { height: calc(var(--h, .5) * 112%); }
  .bs-caption { gap: 10px; font-size: 9.5px; letter-spacing: .2em; }
  .brandstage.is-static .bs-logo { height: 20px; }
}

/* ---------- phones: compact brand rail ----------
   Stacking the full desktop panel put 421px of brand under the form, and its
   headline, paragraph and meta row repeat what the footer says 40px further
   down. Someone on a phone is here to sign in, so the panel keeps the parts
   that ARE the identity — the monogram, the 1-of-1 mark and the rotating
   brand logos — and drops the prose the footer already carries. */
@media (max-width: 599px) {
  /* One row, not a stacked panel: identity on the left, the rotating mark on
     the right, both vertically centred. Same elements as the desktop panel,
     laid out for a strip instead of a column. */
  .auth-panel-brand { min-height: 0; }
  .auth-brand-content {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 18px; padding: 0 20px; min-height: 104px;
  }
  .auth-brand-top { flex-direction: column; align-items: flex-start; gap: 7px; }
  .auth-brand-mono { height: 24px; }
  .auth-brand-eyebrow { font-size: 9px; letter-spacing: .2em; }
  /* the prose below repeats the footer verbatim, 40px further down */
  .auth-brand-bottom { display: none; }
  .brandstage { flex: none; gap: 8px; padding: 0; align-items: flex-end; }
  .bs-window { height: 42px; width: 116px; }
  .bs-rule-t, .bs-rule-b { display: none; }   /* rules need air this strip does not have */
  .bs-caption { font-size: 8px; letter-spacing: .16em; justify-content: flex-end; }
}
}

.auth-brand-head { font-size: clamp(27px,2.5vw,35px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 15px; }
.auth-brand-copy { max-width: 40ch; color: rgba(255,255,255,.66); font-size: 15px; line-height: 1.62; margin: 0 0 26px; }
.auth-brand-meta { display: flex; align-items: center; gap: 13px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.45); }
.auth-brand-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.4); }

/* ---------- entrance + ambient motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .auth-logo, .auth-eyebrow, .auth-head, .auth-tabs, .auth-row { animation: authFadeUp .62s cubic-bezier(.2,.7,.2,1) backwards; }
  .auth-logo    { animation-delay: .02s; }
  .auth-eyebrow { animation-delay: .07s; }
  .auth-head    { animation-delay: .12s; }
  .auth-tabs    { animation-delay: .18s; }
  .auth-form .auth-row:nth-child(1) { animation-delay: .24s; }
  .auth-form .auth-row:nth-child(2) { animation-delay: .29s; }
  .auth-form .auth-row:nth-child(3) { animation-delay: .34s; }
  .auth-form .auth-row:nth-child(4) { animation-delay: .39s; }
  .auth-form .auth-row:nth-child(5) { animation-delay: .44s; }
  .auth-form .auth-row:nth-child(6) { animation-delay: .49s; }
  .auth-form .auth-row:nth-child(7) { animation-delay: .54s; }
  .auth-brand-top   { animation: authFadeUp .8s cubic-bezier(.2,.7,.2,1) both .3s; }
  .auth-brand-bottom{ animation: authFadeUp .8s cubic-bezier(.2,.7,.2,1) both .46s; }
  .auth-brand-sweep { animation: brandSweep 9s ease-in-out 1.6s infinite; }
}
@keyframes authFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes brandSweep { 0% { transform: translateX(-40%); } 52%, 100% { transform: translateX(150%); } }
@media (prefers-reduced-motion: reduce) {
  .auth-row[data-f], .auth-tab-ind, .auth-form .form-field input,
  .auth-form .input-line::after, .auth-brand-sweep { transition: none; }
  .auth-brand-sweep { display: none; }   /* no ambient sweep for reduced-motion */
}

/* form hints + show/hide password */
.field-hint { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 5px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border: none; background: transparent; color: var(--ink-soft); border-radius: 8px;
}
.pw-toggle:hover { color: var(--ink); }
.field-error a { color: inherit; text-decoration: underline; font-weight: 700; }
.forgot-link { display: block; text-align: right; font-size: 13px; color: var(--ink-soft); margin-top: -2px; }
.forgot-link:hover { color: var(--ink); text-decoration: underline; }

/* ---------- policy pages ---------- */
.policy { max-width: 680px; margin: 0 auto; }
.policy-updated { color: var(--ink-soft); font-size: 13px; margin-bottom: 26px; }
.policy h2 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin: 26px 0 8px; }
.policy p { color: var(--ink-soft); margin-bottom: 12px; line-height: 1.65; }
.policy ul { margin: 0 0 12px 20px; color: var(--ink-soft); line-height: 1.65; }
.policy li { margin-bottom: 6px; }
.policy a.tel-link { color: var(--ink); font-weight: 600; }
.policy-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.policy-nav a { font-weight: 600; font-size: 14px; }
.policy-nav a:hover { text-decoration: underline; }

/* ---------- profile ---------- */
.profile-wrap { max-width: 460px; margin: 0 auto; }
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.profile-avatar {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--ink); color: #fff;
}
.profile-id h1 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.profile-id p { color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.pstat { border: 1px solid var(--line); border-radius: 2px; padding: 16px 18px; background: var(--card); }
.pstat b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.pstat span { font-size: 12.5px; color: var(--ink-soft); }
.profile-menu {
  display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: 2px; overflow: hidden; background: var(--surface); margin-bottom: 18px;
}
.profile-menu a {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  font-weight: 600; font-size: 15px; border-top: 1px solid var(--line);
}
.profile-menu a:first-child { border-top: none; }
.profile-menu a span { flex: 1; }
.profile-menu a:hover { background: var(--paper); }
.profile-menu a > svg:last-child { color: var(--ink-soft); }

/* ---------- orders ---------- */
.order-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; background: var(--card); }
.order-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.order-id { font-weight: 800; font-size: 16px; }
.status {
  font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 4px 11px; border-radius: 2px;
}
.status-Pending { background: #f4e3c8; color: var(--warn); }
.status-Processing { background: #d5e3f7; color: #1a4d8f; }
.status-Completed { background: #d4ecd9; color: var(--success); }
.status-Cancelled { background: #f6d7d5; color: var(--danger); }
.order-items { color: var(--ink-soft); font-size: 14px; }
.order-total { font-weight: 800; margin-top: 8px; }

/* ---------- admin ---------- */
.admin-layout { display: grid; gap: 24px; }
.stat-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat {
  background: var(--card); border-radius: var(--radius); padding: 18px 20px;
  border-top: 3px solid var(--ink);
}
.stat b { font-size: 26px; font-weight: 800; display: block; }
.stat span { color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.stat.warn { border-top-color: var(--warn); }
.stat.danger { border-top-color: var(--danger); }
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
/* scope tab styling to the actual tabs so it doesn't override the
   "Add new product" dark button that also lives in this row */
.admin-tabs button[data-tab] {
  padding: 10px 20px; border-radius: 2px; border: 1px solid var(--line);
  background: var(--card); font-weight: 700; font-size: 13.5px;
}
.admin-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.table-wrap { overflow-x: auto; background: var(--card); border-radius: var(--radius); }
table.admin-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.admin-table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--ink-soft); padding: 14px 16px; border-bottom: 2px solid var(--bg-soft);
}
.admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--bg-soft); font-size: 14px; vertical-align: middle; }
.admin-table tr:hover td { background: var(--paper); }
.stock-input { width: 74px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; font: inherit; }
.tbl-actions { display: flex; gap: 8px; }
.pf-preview {
  margin: 8px 0; min-height: 96px; display: grid; place-items: center;
  border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 8px; background: var(--paper);
}
.pf-preview img { max-height: 130px; max-width: 100%; border-radius: 6px; }
.pf-preview-empty { font-size: 12.5px; color: var(--ink-soft); }
.alert {
  border-radius: var(--radius); padding: 14px 18px; font-weight: 600; font-size: 14px; margin-bottom: 18px;
}
.alert-warn { background: #f4e3c8; color: var(--warn); }
.log-list { font-size: 13px; max-height: 420px; overflow-y: auto; }
.log-list li { padding: 9px 4px; border-bottom: 1px solid var(--bg-soft); list-style: none; display: flex; gap: 12px; }
.log-time { color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- modal ---------- */
.modal-root:not(:empty) {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(27, 22, 20, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--card); border-radius: var(--radius); padding: 26px;
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.modal h3 { margin-bottom: 18px; font-size: 20px; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; }

/* ---------- notifications ----------
   Top-centre, under the sticky header: that is where the eye already is after
   clicking something. The old position (bottom: 84px) sat outside the eye
   path on desktop and directly under the fixed nav bar on mobile. */
.toast-region {
  position: fixed; top: 84px; left: 50%; transform: translateX(-50%);
  width: min(480px, calc(100vw - 28px));
  display: flex; flex-direction: column; gap: 10px;
  z-index: 160; pointer-events: none;
}
.note {
  pointer-events: auto;               /* the old region blocked all clicks */
  display: grid; grid-template-columns: auto 1fr auto; gap: 13px;
  align-items: start;
  padding: 15px 14px 15px 16px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -18px rgba(20,16,14,.5), 0 2px 6px rgba(20,16,14,.06);
  animation: note-in .3s cubic-bezier(.22,.72,.16,1);
}
.note.is-leaving { animation: note-out .26s cubic-bezier(.6,.04,.32,1) forwards; }
.note-ico { flex: none; margin-top: 1px; }
.note-copy { min-width: 0; }
.note-title { font-weight: 700; font-size: 14.5px; line-height: 1.35; margin: 0; letter-spacing: -.01em; }
.note-body { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
/* The CTA button. Named -cta, NOT -action: `note-${type}` already produces
   .note-action for an action-type card, and the collision leaked this rule's
   uppercase + letter-spacing onto the whole card, including body copy. */
.note-cta {
  margin-top: 11px; padding: 9px 16px; min-height: 38px;
  border: none; border-radius: 2px; background: var(--ink); color: #fff;
  font: inherit; font-weight: 700; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  transition: transform .15s, opacity .15s;
}
.note-cta:hover { opacity: .88; }
.note-cta:active { transform: scale(.98); }
.note-close {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border: none; background: none; border-radius: 2px;
  color: var(--ink-soft); cursor: pointer; transition: color .15s, background .15s;
}
.note-close:hover { color: var(--ink); background: var(--bg-soft); }

/* Intent is carried by the left rule and the icon, not by flooding the whole
   card with colour — the page ground is warm and a solid block of red on it
   reads as a browser alert. */
.note-success .note-ico { color: var(--success); }
.note-success { border-left-color: var(--success); }
.note-error   .note-ico { color: var(--danger); }
.note-error   { border-left-color: var(--danger); }
.note-warning .note-ico { color: var(--warn); }
.note-warning { border-left-color: var(--warn); }
.note-info    .note-ico { color: var(--ink-soft); }
.note-info    { border-left-color: var(--outline); }
/* Action-required is the loudest thing in the system: it is the only state
   where the customer literally cannot continue. */


.note.note-action { background: var(--ink); color: #fff; border-color: var(--ink); border-left-color: #fff; }
.note.note-action .note-title { color: #fff; }
.note.note-action .note-body { color: rgba(255,255,255,.74); }
.note.note-action .note-ico { color: #fff; }
.note.note-action .note-cta { background: var(--card); color: var(--ink); }
.note.note-action .note-close { color: rgba(255,255,255,.6); }
.note.note-action .note-close:hover { color: #fff; background: rgba(255,255,255,.12); }
.note-loading .note-ico { color: var(--ink-soft); animation: note-spin 1s linear infinite; }

@keyframes note-in  { from { opacity: 0; transform: translateY(-12px) scale(.985); } }
@keyframes note-out { to   { opacity: 0; transform: translateY(-8px) scale(.99); } }
@keyframes note-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .note { animation: none; }
  .note.is-leaving { animation: none; opacity: 0; }
  .note-loading .note-ico { animation: none; }
}

/* Mobile: sits under the header, clear of the fixed bottom nav entirely. */
@media (max-width: 860px) {
  .toast-region { top: 74px; width: calc(100vw - 20px); }
  .note { padding: 14px 12px 14px 14px; gap: 11px; }
  .note-title { font-size: 14px; }
  .note-body { font-size: 13px; }
}

/* ---------- accessibility: honour reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #cfc9c5; margin-top: auto; }
.footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 44px 20px 30px;
  display: grid; gap: 34px; grid-template-columns: 1fr;
}
@media (min-width: 800px) { .footer-inner { grid-template-columns: 1.2fr 2fr; } }
.footer-oneof {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-weight: 800; font-size: 20px; letter-spacing: 1px; color: #cfc9c5;
  border: 2px solid #6f6a66; border-radius: 4px; padding: 2px 10px;
  margin-bottom: 12px;
}
.footer-oneof-of { font-size: 10px; font-weight: 600; margin: 0 1px; text-transform: uppercase; color: #9c968f; }
/* footer brand lockup: GM monogram beside the GODMAN CLASSICS wordmark */
.footer-lockup { display: flex; align-items: center; gap: 14px; }
.footer-lockup .footer-logo { margin-bottom: 0; }
.footer-wordmark {
  display: inline-flex; flex-direction: column; line-height: .96;
  font-weight: 800; font-size: clamp(22px, 3vw, 30px); letter-spacing: .12em;
  text-transform: uppercase; color: #fff;
}
.footer-wordmark b { font-weight: 600; font-size: .52em; letter-spacing: .34em; color: #b7b0ac; margin-top: 5px; }
.footer-tag { font-style: italic; margin-top: 14px; color: #cfc9c5; }
.footer-social { display: flex; gap: 14px; margin-top: 18px; }
.footer-social a { display: inline-flex; color: #cfc9c5; transition: color .15s ease, transform .15s ease; }
.footer-social a:hover { color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 23px; height: 23px; }
.footer-cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.footer-cols h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; }
.footer-cols a { display: block; padding: 5px 0; font-size: 14px; color: #cfc9c5; }
.footer-cols a:hover { color: #fff; }
.footer-base {
  border-top: 1px solid #3a3532; padding: 16px 20px calc(16px + 64px);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; font-size: 12.5px; color: #8f8a86;
}
@media (min-width: 861px) { .footer-base { padding-bottom: 16px; } }

/* ---------- bottom nav (mobile) ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0 9px; font-size: 11px; font-weight: 600; color: var(--ink-soft); min-height: 44px;
}
.bottom-nav a.active { color: var(--ink); }
.bn-ico { display: inline-flex; line-height: 1; }
.bn-ico svg { width: 22px; height: 22px; }
@media (min-width: 861px) { .bottom-nav { display: none; } }
@media (max-width: 860px) {
  .main-nav { display: none; }
  .site-main { padding-bottom: 66px; }
  /* push the search/cart/profile icons to the far right, space in the middle */
  .header-actions { margin-left: auto; }
  /* let filter controls wrap into a tidy grid instead of running off-screen */
  .filter-bar select, .filter-bar input[type="search"] { flex: 1 1 140px; min-width: 0; }
  .filter-count { margin-left: 0; width: 100%; }
}

/* ---------- misc ---------- */
.empty-state { text-align: center; padding: 70px 20px; color: var(--ink-soft); }
.empty-state .big { font-size: 54px; margin-bottom: 12px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 40px 0 20px; }
.section-head h2 { font-size: clamp(20px, 3vw, 28px); font-weight: 800; }
.link-more { font-weight: 700; font-size: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 1px; }
.demo-note {
  background: var(--paper); border: 1.5px dashed var(--outline); border-radius: var(--radius);
  padding: 12px 16px; font-size: 13px; color: var(--ink-soft); margin-bottom: 20px;
}

/* ---------- one-time passcode (2FA login step) ---------- */
.link-back {
  background: none; border: 0; padding: 0; margin-bottom: 14px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink-soft); min-height: 44px;
}
.link-back:hover { color: var(--ink); }
.otp-inputs { display: flex; gap: 8px; justify-content: space-between; margin-top: 4px; }
.otp-box {
  flex: 1 1 0; min-width: 0; height: 58px; text-align: center;
  font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.otp-box:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(23,23,23,.10);
}
.form-field.invalid .otp-box { border-color: var(--danger); }
.otp-timer { font-size: 13px; color: var(--ink-soft); margin-top: 10px; font-variant-numeric: tabular-nums; }
.otp-timer.expired { color: var(--danger); font-weight: 600; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; min-height: 44px; }
.check-row input { width: 18px; height: 18px; accent-color: var(--ink); }
.demo-code {
  background: var(--paper); border: 1.5px dashed var(--outline); border-radius: var(--radius);
  padding: 14px 16px; font-size: 13px; color: var(--ink-soft); line-height: 1.55;
}
.demo-code-value {
  display: block; margin-top: 8px; font-size: 26px; font-weight: 800; letter-spacing: .28em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
  .otp-box { height: 50px; font-size: 20px; }
  .otp-inputs { gap: 6px; }
}

/* ---------- admin settings panel ---------- */
.settings-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.setting {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--card);
}
.setting label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.setting .hint { font-size: 12px; color: var(--ink-soft); margin-top: 6px; line-height: 1.45; }
.setting select, .setting input[type="number"] {
  width: 100%; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 9px;
  background: var(--paper); font: inherit; color: var(--ink);
}
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- touch targets ----------
   The design system at the top of this file commits to 44px touch targets.
   A sweep across 9 widths found four controls below that: the auth tabs
   (28px), the password reveal (34px), .btn-sm (38px) and the virtual-store
   dots (12px). Hit area is enlarged without changing how anything looks. */
.auth-tab { padding-top: 13px; padding-bottom: 15px; min-height: 44px; }
.pw-toggle { width: 44px; height: 44px; }
.btn-sm { min-height: 44px; }
/* The dot stays 12px; the pseudo-element carries the finger. */
.virtual-dots button { position: relative; }
.virtual-dots button::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.virtual-dots { gap: 16px; }

/* ---------- phones, auth route: condensed footer ----------
   A four-column footer under a sign-in form is 669px of links for someone
   whose only goal is to get back to checkout — and the mobile bottom nav
   already carries Shop / Cart / Profile. The link columns collapse here; the
   wordmark, contact and legal line stay, because those are the ones a
   customer actually needs from a footer mid-purchase. */
@media (max-width: 599px) {
  /* Shop / Support / Account duplicate the bottom nav, which is on screen.
     Info does not — Delivery, Privacy and Terms have no other route in, and
     burying a store's legal links mid-purchase is not a trade worth making. */
  body[data-route="account"] .fcol-shop,
  body[data-route="account"] .fcol-support,
  body[data-route="account"] .fcol-account { display: none; }
  body[data-route="account"] .footer-cols { grid-template-columns: 1fr; gap: 0; }
  body[data-route="account"] .site-footer { padding-top: 26px; }
  body[data-route="account"] .footer-brand { margin-bottom: 4px; }
  body[data-route="account"] .footer-tag { margin-bottom: 12px; }
}

/* ---------- password guidance ----------
   Requirements are stated once in a small panel rather than as a permanent
   checklist beside the field — a list of red crosses while someone is still
   typing reads as failure, not help. The panel opens on hover or focus, and
   pins open on tap because phones have no hover. */
.pw-help {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  margin-left: 7px; padding: 0; vertical-align: -4px;
  border: none; background: none; color: var(--ink-soft); cursor: pointer;
  border-radius: 50%; transition: color .18s, background .18s;
}
.pw-help:hover, .pw-help[aria-expanded="true"] { color: var(--ink); background: var(--bg-soft); }
/* the trigger sits inside a letterspaced caps label — don't inherit that */
.pw-help svg { text-transform: none; letter-spacing: normal; }

.pw-guide { position: relative; margin-top: 8px; }
/* Anchored beside the form, not over it: sitting above the field covered the
   Email and Password inputs the customer was in the middle of filling. */
.pw-panel {
  position: absolute; bottom: auto; top: -96px; left: 0; z-index: 20;
  width: min(290px, calc(100vw - 48px));
  padding: 14px 15px; background: var(--ink); color: #fff;
  border-radius: var(--radius);
  /* Purely informational, and on narrow screens it lands over the submit
     button — so taps must reach what is underneath rather than the panel. */
  pointer-events: none;
  box-shadow: 0 18px 40px -16px rgba(20,16,14,.6);
  animation: pwPanelIn .2s cubic-bezier(.22,.72,.16,1);
}
.pw-panel::after { content: none; }   /* no tail by default; set per breakpoint */

/* Desktop: park it in the empty column beside the form so nothing is hidden. */
@media (min-width: 900px) {
  .pw-panel { left: calc(100% + 18px); top: -110px; }
  .pw-panel::after {
    content: ""; position: absolute; top: 118px; right: 100%;
    border: 6px solid transparent; border-right-color: var(--ink);
  }
}
/* Tablet / narrow desktop: below the field, clear of the inputs above it. */
@media (min-width: 600px) and (max-width: 899px) {
  .pw-panel { top: calc(100% + 14px); left: 0; }
  .pw-panel::after {
    content: ""; position: absolute; bottom: 100%; left: 18px;
    border: 6px solid transparent; border-bottom-color: var(--ink);
  }
}
.pw-panel-title {
  margin: 0 0 9px; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.55);
}
.pw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pw-list li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.72);
  transition: color .2s;
}
.pw-tick {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3); position: relative; transition: all .22s;
}
.pw-list li.is-met { color: #fff; }
.pw-list li.is-met .pw-tick { background: var(--success); border-color: var(--success); }
.pw-list li.is-met .pw-tick::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 3.5px; height: 7px; border: solid #fff; border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
.pw-panel-note {
  margin: 11px 0 0; padding-top: 10px; font-size: 12px; line-height: 1.45;
  color: rgba(255,255,255,.5); border-top: 1px solid rgba(255,255,255,.13);
}

/* live meter */
.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.pw-bars { display: flex; gap: 4px; flex: 1; }
.pw-bars i {
  flex: 1; height: 3px; background: var(--line); border-radius: 2px;
  transition: background .28s ease;
}
.pw-meter-label {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-soft); white-space: nowrap;
}
.pw-meter[data-level="1"] .pw-bars i.is-on { background: var(--danger); }
.pw-meter[data-level="1"] .pw-meter-label { color: var(--danger); }
.pw-meter[data-level="2"] .pw-bars i.is-on { background: var(--warn); }
.pw-meter[data-level="2"] .pw-meter-label { color: var(--warn); }
.pw-meter[data-level="3"] .pw-bars i.is-on,
.pw-meter[data-level="4"] .pw-bars i.is-on { background: var(--success); }
.pw-meter[data-level="3"] .pw-meter-label,
.pw-meter[data-level="4"] .pw-meter-label { color: var(--success); }

@keyframes pwPanelIn { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .pw-panel { animation: none; }
  .pw-bars i, .pw-tick, .pw-list li { transition: none; }
}
/* Phones: the panel would overhang a narrow field, so it sits below instead. */
@media (max-width: 599px) {
  .pw-panel { bottom: auto; top: calc(100% + 26px); left: 0; width: calc(100vw - 40px); }
  .pw-panel::after {
    content: ""; position: absolute; top: auto; bottom: 100%; left: 18px;
    border: 6px solid transparent; border-bottom-color: var(--ink);
  }
}

/* ---------- hero wordmark reveal ----------
   The wordmark is already outlined type, so it draws itself on: the stroke
   runs in from both ends while "1 OF 1" tracks out to meet it. Runs ONCE on
   entrance — a looping hero mark reads as a logo animation, not a campaign.
   Nothing here moves layout: stroke-dashoffset and letter-spacing on a
   centred, fixed-viewBox SVG cannot reflow the page. */
@media (prefers-reduced-motion: no-preference) {
  .hero-oneof {
    /* Animating letter-spacing re-lays-out the text every frame, which reads
       as mushy rather than crisp. Opacity + translate stays on the compositor. */
    animation: oneofTrack .8s cubic-bezier(.22,.72,.16,1) both .1s;
  }
  .poster-arch-svg text {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: archDraw 1.55s cubic-bezier(.32,.06,.24,1) both .24s;
  }
  /* No scale on the shoe: a fractional scale resamples the bitmap for the whole
     animation, which is exactly the softness Kevin spotted. Translate only. */
  .hero-shoe-wrap { animation: heroRise .75s cubic-bezier(.22,.72,.16,1) both .4s; }
  .hero-name, .hero-tag, .hero-cta { animation: heroFade .7s ease both; }
  .hero-name { animation-delay: .60s; }
  .hero-tag  { animation-delay: .68s; }
  .hero-cta  { animation-delay: .76s; }
}
@keyframes oneofTrack { from { opacity: 0; transform: translateY(-8px); } }
@keyframes archDraw { to { stroke-dashoffset: 0; } }
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } }
@keyframes heroFade { from { opacity: 0; transform: translateY(10px); } }