/* =========================================================
   DROPSHIPPER PLATFORM — base styles + 4 themes via [data-theme]
   ========================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- THEMES ---------- */
:root {
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow: 0 8px 28px rgba(15, 23, 42, .08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .15);
  --t: 200ms cubic-bezier(.2,.8,.2,1);
}

/* Teal — clean, modern */
[data-theme="teal"] {
  --bg: #ffffff;
  --bg-soft: #f7fafa;
  --bg-elev: #ffffff;
  --ink: #0f1c1c;
  --ink-soft: #2d3f3f;
  --muted: #64807d;
  --line: #e6eeed;
  --primary: #0d9488;
  --primary-deep: #0b7a70;
  --primary-soft: #e6f7f4;
  --primary-ink: #ffffff;
  --accent: #f59e0b;
  --hero-grad: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #2dd4bf 100%);
  --orb-grad: radial-gradient(circle, #2dd4bf 0%, transparent 70%);
  --card-grad-from: #14b8a6;
  --card-grad-to: #0e7490;
}

/* Black + Yellow — streetwear */
[data-theme="black-yellow"] {
  --bg: #0a0a0a;
  --bg-soft: #131313;
  --bg-elev: #1a1a1a;
  --ink: #fafafa;
  --ink-soft: #d4d4d4;
  --muted: #8a8a8a;
  --line: #262626;
  --primary: #facc15;
  --primary-deep: #eab308;
  --primary-soft: #2a2104;
  --primary-ink: #0a0a0a;
  --accent: #fafafa;
  --hero-grad: linear-gradient(135deg, #facc15 0%, #fde047 100%);
  --orb-grad: radial-gradient(circle, #facc15 0%, transparent 70%);
  --card-grad-from: #facc15;
  --card-grad-to: #ca8a04;
}

/* Orange — warm, friendly */
[data-theme="orange"] {
  --bg: #fffaf2;
  --bg-soft: #fff3df;
  --bg-elev: #ffffff;
  --ink: #1c1410;
  --ink-soft: #3a2a1f;
  --muted: #826a55;
  --line: #f3e3c8;
  --primary: #ea580c;
  --primary-deep: #c2410c;
  --primary-soft: #ffedd5;
  --primary-ink: #ffffff;
  --accent: #16a34a;
  --hero-grad: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #fb923c 100%);
  --orb-grad: radial-gradient(circle, #fb923c 0%, transparent 70%);
  --card-grad-from: #f97316;
  --card-grad-to: #c2410c;
}

/* Navy + Red — sporty classic */
[data-theme="navy-red"] {
  --bg: #ffffff;
  --bg-soft: #f5f7fb;
  --bg-elev: #ffffff;
  --ink: #0a1532;
  --ink-soft: #25325a;
  --muted: #5b6a91;
  --line: #e3e8f3;
  --primary: #dc2626;
  --primary-deep: #b91c1c;
  --primary-soft: #fee2e2;
  --primary-ink: #ffffff;
  --accent: #1e3a8a;
  --hero-grad: linear-gradient(135deg, #1e3a8a 0%, #dc2626 100%);
  --orb-grad: radial-gradient(circle, #dc2626 0%, transparent 70%);
  --card-grad-from: #1e3a8a;
  --card-grad-to: #dc2626;
}

/* ---------- TOP BAR ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 32px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.01em;
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--hero-grad);
  box-shadow: var(--shadow-sm);
}
.top-nav {
  display: flex;
  gap: 22px;
  margin-left: 8px;
}
.top-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color var(--t);
}
.top-nav a:hover { color: var(--primary); }
.cart-button {
  margin-left: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 14px;
  transition: transform var(--t);
}
.cart-button:hover { transform: translateY(-1px); }
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 720px) {
  .top { padding: 12px 16px; gap: 12px; }
  .top-nav { display: none; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 80px 32px 100px;
}
.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.kicker {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
[data-theme="black-yellow"] .kicker { color: var(--primary); }
.hero-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 20px;
  background: var(--hero-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-tagline {
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 32px;
  line-height: 1.4;
}
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.hero-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}
.hero-strip > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-strip strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.hero-strip span {
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 720px) {
  .hero { padding: 48px 16px 64px; }
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
}
.hero-orb {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  background: var(--orb-grad);
  filter: blur(60px);
  opacity: .4;
  pointer-events: none;
  z-index: 1;
  animation: float 14s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-20px, 30px) scale(1.05); }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.005em;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
  cursor: pointer;
  border: 0;
  text-align: center;
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 30%, transparent);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 40%, transparent);
  background: var(--primary-deep);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover {
  background: var(--bg-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.btn-block { width: 100%; }
.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ---------- SECTION HEADS ---------- */
.section-head {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
  padding: 0 16px;
}
.section-head h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.section-head p {
  color: var(--muted);
  font-size: 16px;
  margin: 0;
}

/* ---------- PRODUCT GRID ---------- */
.products {
  padding: 64px 32px 96px;
  max-width: 1320px;
  margin: 0 auto;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
@media (max-width: 720px) {
  .products { padding: 40px 16px 64px; }
  .product-grid { gap: 14px; grid-template-columns: repeat(2, 1fr); }
}

.product-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  cursor: pointer;
  position: relative;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
}
.product-card.sold-out { opacity: .55; }
.product-card.sold-out:hover { transform: none; box-shadow: var(--shadow-sm); }

.card-visual {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--card-grad-from), var(--card-grad-to));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.3), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,.2), transparent 50%);
}
.card-visual-label {
  position: relative;
  z-index: 2;
  color: white;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.01em;
  text-align: center;
  padding: 0 20px;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.card-badge.danger { background: #dc2626; color: white; }

.card-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.card-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.card-meta {
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-price {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
}
.card-swatches {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}
.swatch-mini {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
}
.card-swatches .more {
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
  align-self: center;
}

/* skeleton */
.grid-skeleton {
  display: contents;
}
.grid-skeleton > span {
  display: block;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: linear-gradient(110deg, var(--bg-soft) 30%, var(--line) 50%, var(--bg-soft) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- HOW IT WORKS ---------- */
.howto {
  background: var(--bg-soft);
  padding: 80px 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.howto-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.howto-steps li {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.howto-steps .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-weight: 800;
  font-size: 18px;
}
[data-theme="black-yellow"] .howto-steps .num { color: var(--primary); }
.howto-steps strong {
  display: block;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 18px;
  margin-bottom: 6px;
  color: var(--ink);
}
.howto-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .howto { padding: 56px 16px; }
  .howto-steps { grid-template-columns: 1fr; }
}

/* ---------- CONTACT ---------- */
.contact { padding: 80px 32px; max-width: 1080px; margin: 0 auto; }
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.contact-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow);
}
.contact-card strong {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 16px;
}
.contact-card span { color: var(--muted); font-size: 14px; }
@media (max-width: 720px) {
  .contact { padding: 56px 16px; }
  .contact-cards { grid-template-columns: 1fr; }
}

/* ---------- FOOTER ---------- */
.foot {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--line);
}

/* ---------- MODAL ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[aria-hidden="false"] {
  display: flex;
  animation: fadeIn 200ms ease-out;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-card {
  position: relative;
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  max-width: 880px;
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 360px 1fr;
  box-shadow: var(--shadow-lg);
  animation: pop 240ms cubic-bezier(.2,.8,.2,1);
}
@media (max-width: 720px) {
  .modal-card { grid-template-columns: 1fr; max-height: 96vh; overflow-y: auto; }
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
}
.modal-visual {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--card-grad-from), var(--card-grad-to));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 26px;
  text-align: center;
  padding: 0 20px;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
@media (max-width: 720px) { .modal-visual { aspect-ratio: 16/9; } }
.modal-body {
  padding: 28px 28px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-body h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 24px;
  margin: 0;
  letter-spacing: -.015em;
}
.muted { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.price {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
}
.picker { display: flex; flex-direction: column; gap: 10px; }
.picker-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t);
  position: relative;
}
.swatch[aria-selected="true"] {
  border-color: var(--primary);
  transform: scale(1.1);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.swatch:hover { transform: scale(1.08); }

.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.size-chip {
  min-width: 48px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  font-weight: 600;
  font-size: 14px;
  transition: all var(--t);
}
.size-chip:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.size-chip[aria-selected="true"]:not(:disabled) {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.size-chip:disabled {
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  width: fit-content;
  overflow: hidden;
}
.qty button {
  padding: 12px 18px;
  font-size: 18px;
  font-weight: 700;
  background: var(--bg-soft);
  transition: background var(--t);
}
.qty button:hover { background: var(--primary-soft); color: var(--primary-deep); }
.qty input {
  width: 64px;
  padding: 12px 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  outline: none;
}
.qty input::-webkit-inner-spin-button { display: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: translateY(20px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* ---------- DRAWER ---------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}
.drawer[aria-hidden="false"] { display: block; }
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  animation: fadeIn 200ms ease-out;
}
.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 50px rgba(15,23,42,.15);
  animation: slideInRight 280ms cubic-bezier(.2,.8,.2,1);
}
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.drawer-head h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 20px;
  margin: 0;
  letter-spacing: -.01em;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cart-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  align-items: center;
}
.cart-item-vis {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--card-grad-from), var(--card-grad-to));
}
.cart-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-item-info strong { font-size: 14px; font-weight: 600; }
.cart-item-info span { font-size: 12px; color: var(--muted); }
.cart-item-actions { display: flex; align-items: center; gap: 8px; }
.cart-item-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.cart-item-qty button {
  width: 28px;
  height: 28px;
  font-weight: 700;
  background: var(--bg);
}
.cart-item-qty button:hover { background: var(--primary-soft); color: var(--primary-deep); }
.cart-item-qty input {
  width: 38px;
  height: 28px;
  border: 0;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  background: var(--bg-soft);
  color: var(--ink);
  outline: none;
}
.cart-item-remove {
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  margin-left: 4px;
}

.drawer-foot {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.moq-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.moq-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 280ms ease-out;
}
.moq-msg {
  font-size: 12px;
  color: var(--muted);
}
.moq-msg.met { color: var(--primary-deep); font-weight: 600; }
.totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.totals > div {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.totals .grand {
  font-size: 17px;
  font-weight: 700;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.totals .muted-row { color: var(--muted); font-size: 13px; }
.totals > div[hidden] { display: none; }
.totals small { color: var(--muted); font-size: 11px; margin-left: 4px; }

.drawer-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.drawer-empty strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  margin-bottom: 6px;
}

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 280ms;
  pointer-events: none;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ---------- CHECKOUT PAGE ---------- */
.checkout-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 32px 80px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 36px;
}
@media (max-width: 900px) {
  .checkout-wrap { grid-template-columns: 1fr; padding: 32px 16px 56px; }
}
.form-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.form-card h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 22px;
  margin: 0 0 18px;
  letter-spacing: -.01em;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.field input,
.field textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.field input:focus,
.field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.summary-card h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 18px;
  margin: 0 0 16px;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.summary-line:last-of-type { border-bottom: 0; }
.summary-line span:first-child { color: var(--ink-soft); }
.summary-totals {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.summary-totals .grand {
  font-size: 18px;
  font-weight: 800;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--ink);
}

/* =========================================================
   MATRIX MODE — bulk ordering: tab strip + size×color grid
   ========================================================= */

body.matrix-mode .top { padding: 12px 24px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text .brand-name { font-size: 18px; }
.brand-text .brand-sub { font-size: 12px; color: var(--muted); font-weight: 500; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.link-icon {
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 12px; border-radius: 8px; transition: background var(--t);
}
.link-icon:hover { background: var(--bg-soft); color: var(--primary); }

/* slim brand band */
.band {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 12px 24px; background: var(--primary-soft); border-bottom: 1px solid var(--line);
}
[data-theme="black-yellow"] .band { background: #1a1a1a; }
.band-line { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.band-line strong {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800; font-size: 18px; letter-spacing: -.01em;
  color: var(--primary-deep);
}
[data-theme="black-yellow"] .band-line strong { color: var(--primary); }
.band-line span { color: var(--ink-soft); font-size: 13px; }
[data-theme="black-yellow"] .band-line span { color: var(--ink-soft); }
.band-hints { display: flex; gap: 18px; font-size: 12px; color: var(--ink-soft); margin-left: auto; flex-wrap: wrap; }
[data-theme="black-yellow"] .band-hints { color: var(--ink-soft); }
.band-hints b { color: var(--ink); font-weight: 700; }
[data-theme="black-yellow"] .band-hints b { color: var(--ink); }
@media (max-width: 720px) {
  .band { padding: 10px 16px; gap: 12px; }
  .band-hints { width: 100%; gap: 12px; }
}

/* product tab bar */
.prod-tabs {
  position: sticky; top: 64px; z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.prod-tabs-inner {
  display: flex; gap: 6px; padding: 10px 24px; min-width: max-content;
}
.prod-tab {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t);
  cursor: pointer;
}
.prod-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.prod-tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.prod-tab .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 11px;
  font-weight: 800;
}
.prod-tab[aria-selected="true"] .pill { background: var(--primary); color: var(--primary-ink); }
.prod-tab.sold-out {
  opacity: .45;
  text-decoration: line-through;
  cursor: not-allowed;
}
@media (max-width: 720px) {
  .prod-tabs { top: 56px; }
  .prod-tabs-inner { padding: 8px 16px; }
}

/* product head + price card */
.matrix-wrap { padding: 24px 24px 220px; max-width: 1280px; margin: 0 auto; }
.prod-head {
  display: flex; gap: 24px; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap;
}
.prod-head h1 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.prod-head .muted { font-size: 14px; max-width: 640px; line-height: 1.5; }
.prod-price-card {
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line));
  border-radius: var(--radius);
  padding: 14px 18px;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}
[data-theme="black-yellow"] .prod-price-card { background: #1a1a1a; }
.prod-price-card .muted { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.prod-price-card strong {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 28px; font-weight: 800; color: var(--primary-deep); letter-spacing: -.01em;
}
[data-theme="black-yellow"] .prod-price-card strong { color: var(--primary); }
.prod-price-card .prod-sample-hint {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--line));
  font-size: 12px; color: var(--ink-soft); font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.prod-price-card .prod-sample-hint .prod-sample-label { color: var(--ink-soft); font-weight: 600; }
.prod-price-card .prod-sample-hint strong {
  font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: 0;
  font-family: inherit;
}
.prod-price-card .prod-sample-hint .prod-sample-tail { color: var(--ink-soft); }
[data-theme="black-yellow"] .prod-price-card .prod-sample-hint strong { color: #fff; }
@media (max-width: 720px) {
  .matrix-wrap { padding: 16px 16px 240px; }
  .prod-head { gap: 14px; }
  .prod-price-card { width: 100%; }
}

/* the matrix table */
.matrix-scroll {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.matrix thead th {
  position: sticky; top: 0;
  background: var(--bg);
  padding: 12px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1.5px solid var(--line);
  z-index: 2;
}
.matrix thead th.color-head {
  text-align: left;
  padding-left: 16px;
  background: var(--primary);
  color: var(--primary-ink);
  position: sticky; left: 0; z-index: 3;
}
.matrix tbody th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; left: 0; z-index: 1;
  min-width: 130px;
  display: flex; align-items: center; gap: 10px;
}
.matrix tbody tr { display: table-row; }
.matrix tbody th .swatch-mini {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.matrix tbody td {
  padding: 6px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  border-left: 1px dashed var(--line);
  background: var(--bg-elev);
  position: relative;
}
.matrix tbody td:first-of-type { border-left: 1.5px solid var(--line); }
.matrix tbody tr:last-child td,
.matrix tbody tr:last-child th { border-bottom: 0; }
.matrix tbody tr:hover td:not(.oos) { background: color-mix(in srgb, var(--primary-soft) 60%, transparent); }
.matrix input.qty-cell {
  width: 64px;
  height: 38px;
  text-align: center;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  transition: all var(--t);
}
.matrix input.qty-cell:hover {
  border-color: var(--line);
  background: var(--bg);
}
.matrix input.qty-cell:focus {
  border-color: var(--primary);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.matrix input.qty-cell:not([value=""]):not([value="0"]) {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-deep);
}
[data-theme="black-yellow"] .matrix input.qty-cell:not([value=""]):not([value="0"]) {
  color: var(--primary); background: #2a2104;
}
.matrix input.qty-cell::-webkit-inner-spin-button { display: none; }
.matrix td.oos {
  background: repeating-linear-gradient(
    45deg, var(--bg-soft), var(--bg-soft) 6px,
    color-mix(in srgb, var(--ink) 5%, transparent) 6px,
    color-mix(in srgb, var(--ink) 5%, transparent) 12px
  );
  cursor: not-allowed;
}
.matrix td.oos input {
  color: var(--muted) !important;
  text-decoration: line-through;
}
.matrix td.oos::after {
  content: 'OOS';
  position: absolute;
  top: 4px; right: 6px;
  font-size: 9px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .05em;
}
.matrix-footnote {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* sticky orderbar */
.orderbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: color-mix(in srgb, var(--bg-elev) 96%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(15,23,42,.06);
  z-index: 30;
}
.orderbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.orderbar-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.orderbar-stats > div {
  display: flex; flex-direction: column; gap: 2px; line-height: 1.1;
}
.orderbar-stats span {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.orderbar-stats strong {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.01em;
}
.orderbar-stats .grand strong { color: var(--primary-deep); font-size: 24px; }
[data-theme="black-yellow"] .orderbar-stats .grand strong { color: var(--primary); }

.orderbar-cta { display: flex; flex-direction: column; gap: 8px; min-width: 320px; }
.orderbar-cta .moq-bar { width: 100%; }
.orderbar-cta .moq-msg { font-size: 12px; color: var(--muted); }
.orderbar-cta .moq-msg.met { color: var(--primary-deep); font-weight: 600; }
[data-theme="black-yellow"] .orderbar-cta .moq-msg.met { color: var(--primary); }
.orderbar-buttons { display: flex; gap: 8px; }
.orderbar-buttons .btn { padding: 10px 18px; font-size: 14px; flex: 1; }

@media (max-width: 760px) {
  .orderbar-inner { grid-template-columns: 1fr; gap: 12px; padding: 12px 16px 14px; }
  .orderbar-stats { gap: 16px; }
  .orderbar-stats strong { font-size: 16px; }
  .orderbar-stats .grand strong { font-size: 18px; }
  .orderbar-cta { min-width: 0; }
}

/* =========================================================
   M2 — STACKED COLOUR CARDS (mobile-first matrix)
   ========================================================= */

body.m2-mode {
  background: var(--bg-soft);
  padding-bottom: 0;
}

.m2-top {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.m2-top .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.m2-top .brand-text .brand-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800; font-size: 17px; letter-spacing: -.01em;
}
.m2-top .brand-text .brand-sub {
  font-size: 11px; color: var(--muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
}

.m2-cart {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  line-height: 1;
}
.m2-cart-num {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800; font-size: 18px;
}
.m2-cart-lbl { font-size: 10px; opacity: .7; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Compact info strip */
.m2-strip {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--primary-soft);
  font-size: 12px;
  color: var(--ink-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 15%, var(--line));
}
[data-theme="black-yellow"] .m2-strip { background: #1a1a1a; color: var(--ink-soft); }
.m2-strip > div { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.m2-strip b { color: var(--primary-deep); font-weight: 700; }
[data-theme="black-yellow"] .m2-strip b { color: var(--primary); }

/* Sticky product tabs */
.m2-tabs {
  position: sticky;
  top: 56px;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.m2-tabs::-webkit-scrollbar { display: none; }
.m2-tabs-inner {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  min-width: max-content;
}
.m2-tab {
  scroll-snap-align: start;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t);
  cursor: pointer;
  flex-shrink: 0;
}
.m2-tab:hover {
  border-color: var(--primary);
  color: var(--primary-deep);
}
.m2-tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.m2-tab .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 11px;
  font-weight: 800;
}
.m2-tab[aria-selected="true"] .pill { background: var(--primary); color: var(--primary-ink); }
.m2-tab.sold-out {
  opacity: .45;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Main */
.m2-main {
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 16px 200px;
}
.m2-prod {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.m2-prod h1 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 4px;
  color: var(--ink);
}
.m2-prod .muted {
  font-size: 13px;
  line-height: 1.5;
  max-width: 540px;
  color: var(--muted);
  margin: 0;
}
.m2-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 12px;
  white-space: nowrap;
}
.m2-price > span:first-child {
  font-size: 14px;
  font-weight: 600;
  opacity: .7;
}
.m2-price strong {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.m2-price em {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  margin-left: 6px;
  opacity: .65;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* The colour stack */
.colour-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 760px) {
  .colour-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

.colour-card {
  background: var(--bg-elev);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
  position: relative;
}
.colour-card:has(.qty-stepper input:not([value=""]):not([value="0"])) {
  border-color: color-mix(in srgb, var(--accent-color) 70%, var(--line));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-color) 12%, transparent);
}
.colour-card .colour-stripe {
  height: 8px;
  width: 100%;
  background: var(--accent-color);
}
.colour-card .colour-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px dashed var(--line);
}
.colour-card .colour-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.005em;
  color: var(--ink);
  min-width: 0;
}
.colour-card .colour-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
  flex-shrink: 0;
}
.colour-card .colour-total {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  transition: all var(--t);
}
.colour-card .colour-total.has {
  background: var(--accent-color);
  color: var(--accent-ink, #fff);
}
.colour-card .colour-total b {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 13px;
}

.size-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px;
}
@media (min-width: 480px) {
  .size-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 760px) {
  .size-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
}

.size-row {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 8px 6px 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  transition: border-color var(--t);
}
.size-row.has-qty {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-elev));
}
.size-row.oos {
  background: repeating-linear-gradient(
    45deg, var(--bg-soft), var(--bg-soft) 5px,
    color-mix(in srgb, var(--ink) 4%, transparent) 5px,
    color-mix(in srgb, var(--ink) 4%, transparent) 10px
  );
  cursor: not-allowed;
  opacity: .65;
}
.size-row .size-label {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-align: center;
  letter-spacing: -.005em;
}
.size-row.oos .size-label {
  color: var(--muted);
  text-decoration: line-through;
}

.qty-stepper {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: stretch;
  gap: 0;
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.qty-stepper button {
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-weight: 800;
  background: var(--bg-soft);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), color var(--t);
  -webkit-tap-highlight-color: transparent;
}
.qty-stepper button:active:not(:disabled) {
  background: var(--accent-color);
  color: var(--accent-ink, #fff);
}
.qty-stepper button:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.qty-stepper input {
  border: 0;
  outline: none;
  text-align: center;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  background: transparent;
  color: var(--ink);
  min-width: 0;
  width: 100%;
  padding: 0 2px;
}
.qty-stepper input::-webkit-inner-spin-button { display: none; }
.size-row.oos .qty-stepper { display: none; }
.size-row.oos::after {
  content: 'Sold out';
  grid-column: 2;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
  letter-spacing: .03em;
}

.m2-hint {
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.m2-hint b { color: var(--ink-soft); font-weight: 700; }

/* Sticky bottom bar */
.m2-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--bg-elev) 96%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(15, 23, 42, .08);
  z-index: 40;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m2-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.m2-bar-left {
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.m2-bar-stat {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.m2-bar-stat span {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.m2-bar-stat strong {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.m2-bar-stat.grand strong {
  font-size: 22px;
  color: var(--primary-deep);
}
[data-theme="black-yellow"] .m2-bar-stat.grand strong { color: var(--primary); }

.m2-bar-actions {
  display: flex;
  gap: 8px;
}
.m2-bar-actions .btn {
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 10px;
}
.m2-review { padding: 10px 14px; }

.m2-bar-progress {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.m2-bar-progress .moq-msg {
  font-size: 11px;
  text-align: left;
}

@media (max-width: 380px) {
  .m2-bar-left { gap: 12px; }
  .m2-bar-stat strong { font-size: 16px; }
  .m2-bar-stat.grand strong { font-size: 18px; }
  .m2-bar-actions .btn { padding: 9px 12px; font-size: 13px; }
}

/* Footer */
.m2-foot {
  text-align: center;
  padding: 24px 16px 100px;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}
.m2-foot-contact {
  margin-top: 6px;
  font-size: 11px;
}
.m2-foot-contact a {
  color: var(--ink-soft);
  text-decoration: underline;
}

/* ---------- SUCCESS PAGE ---------- */
.success-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 80px 32px;
  text-align: center;
}
.success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pop 400ms cubic-bezier(.2,.8,.2,1);
}
[data-theme="black-yellow"] .success-icon { color: var(--primary); }
.success-wrap h1 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 36px;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.success-wrap .order-id {
  display: inline-block;
  padding: 8px 16px;
  background: var(--bg-soft);
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: .03em;
  margin: 12px 0 24px;
}

/* =========================================================
   M3 — QUICK-ADD CHIPS MATRIX
   Power-user terminal-style matrix at /m3
   ========================================================= */

body.m3-mode {
  background: var(--bg-soft);
  padding-bottom: 0;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ---------- Top bar ---------- */
body.m3-mode .m3-top {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
body.m3-mode .m3-top .brand { flex: 1 1 auto; min-width: 0; }
body.m3-mode .m3-top .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
body.m3-mode .m3-top .brand-text .brand-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800; font-size: 17px; letter-spacing: -.01em;
}
body.m3-mode .m3-top .brand-text .brand-sub {
  font-size: 11px; color: var(--muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
}
body.m3-mode .m3-top-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
}
body.m3-mode .m3-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
  animation: m3-pulse 1.6s infinite;
}
@keyframes m3-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

body.m3-mode .m3-cart {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  line-height: 1;
  border: 1px solid var(--ink);
}
body.m3-mode .m3-cart-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; font-size: 18px;
}
body.m3-mode .m3-cart-lbl {
  font-size: 9px; opacity: .65; font-weight: 700;
  letter-spacing: .12em; margin-top: 2px;
}

/* ---------- Strip ---------- */
body.m3-mode .m3-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 16px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
body.m3-mode .m3-strip::-webkit-scrollbar { display: none; }
body.m3-mode .m3-strip > div { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
body.m3-mode .m3-strip .grow { flex: 1 1 auto; }
body.m3-mode .m3-key {
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase;
}
body.m3-mode .m3-clock { color: var(--primary-deep); font-weight: 700; }
[data-theme="black-yellow"] body.m3-mode .m3-clock { color: var(--primary); }

/* ---------- Tab strip ---------- */
body.m3-mode .m3-tabs {
  position: sticky;
  top: 56px;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
body.m3-mode .m3-tabs::-webkit-scrollbar { display: none; }
body.m3-mode .m3-tabs-inner {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  min-width: max-content;
}
body.m3-mode .m3-tab {
  scroll-snap-align: start;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t);
  cursor: pointer;
  flex-shrink: 0;
}
body.m3-mode .m3-tab:hover {
  border-color: var(--primary);
  color: var(--primary-deep);
}
body.m3-mode .m3-tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
body.m3-mode .m3-tab .pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: 6px;
  background: var(--primary); color: var(--primary-ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
}
body.m3-mode .m3-tab.sold-out {
  opacity: .45; text-decoration: line-through; cursor: not-allowed;
}

/* ---------- Main / product header ---------- */
body.m3-mode .m3-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 16px 200px;
}
body.m3-mode .m3-prod {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
body.m3-mode .m3-prod h1 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(20px, 3.6vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 4px;
  color: var(--ink);
}
body.m3-mode .m3-prod .muted {
  font-size: 12px; line-height: 1.5;
  max-width: 540px; color: var(--muted); margin: 0;
}
body.m3-mode .m3-price-tag {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 8px 14px;
  background: var(--ink); color: var(--bg);
  border-radius: 8px; white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
body.m3-mode .m3-price-rs { font-size: 13px; opacity: .65; font-weight: 700; }
body.m3-mode .m3-price-tag strong {
  font-size: 22px; font-weight: 700; letter-spacing: -.01em;
}
body.m3-mode .m3-price-tag em {
  font-style: normal; font-size: 10px; font-weight: 600;
  margin-left: 4px; opacity: .6; letter-spacing: .06em;
}

/* ---------- Matrix ---------- */
body.m3-mode .m3-matrix-wrap {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
body.m3-mode .m3-matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100dvh - 320px);
  overflow-y: auto;
}
body.m3-mode .m3-matrix {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Header row (sticky top) */
body.m3-mode .m3-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 10px 8px;
  text-align: center;
  min-width: 60px;
}
body.m3-mode .m3-matrix thead th.m3-sz {
  border-left: 1px solid var(--line);
}
body.m3-mode .m3-matrix thead th.m3-corner {
  position: sticky;
  left: 0;
  z-index: 5;
  text-align: left;
  min-width: 140px;
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
}
body.m3-mode .m3-matrix thead th.m3-corner span {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--muted);
}

/* Row header (sticky left) */
body.m3-mode .m3-matrix tbody th.m3-row-h {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 8px 12px;
  min-width: 140px;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.m3-mode .m3-matrix tbody tr {
  background: var(--bg-elev);
}
body.m3-mode .m3-matrix tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--bg-soft) 50%, var(--bg-elev) 50%);
}
body.m3-mode .m3-matrix tbody tr:nth-child(even) th.m3-row-h {
  background: color-mix(in srgb, var(--bg-soft) 50%, var(--bg-elev) 50%);
}
body.m3-mode .m3-swatch {
  width: 16px; height: 16px; border-radius: 4px;
  background: var(--swatch, #999);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
body.m3-mode .m3-row-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 110px;
}

/* Cells */
body.m3-mode .m3-cell {
  position: relative;
  min-width: 60px;
  height: 56px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
  font-feature-settings: "tnum" 1;
}
body.m3-mode .m3-cell:hover {
  background: var(--primary-soft);
}
body.m3-mode .m3-cell:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
body.m3-mode .m3-cell:active {
  transform: scale(.97);
}
body.m3-mode .m3-cell .m3-cell-q {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.01em;
}
body.m3-mode .m3-cell:not(.live) .m3-cell-q {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  font-weight: 500;
}
body.m3-mode .m3-cell.live {
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 2px var(--primary);
}
body.m3-mode .m3-cell.live .m3-cell-q {
  color: var(--primary-deep);
}
[data-theme="black-yellow"] body.m3-mode .m3-cell.live {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}
[data-theme="black-yellow"] body.m3-mode .m3-cell.live .m3-cell-q {
  color: var(--primary);
}
body.m3-mode .m3-cell.flash {
  animation: m3-flash .38s ease-out;
}
@keyframes m3-flash {
  0%   { background: var(--primary); }
  100% { background: var(--primary-soft); }
}
body.m3-mode .m3-cell.oos,
body.m3-mode .m3-cell.na {
  cursor: not-allowed;
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--muted) 8%, transparent),
      color-mix(in srgb, var(--muted) 8%, transparent) 4px,
      transparent 4px,
      transparent 8px
    );
}
body.m3-mode .m3-cell.oos:hover,
body.m3-mode .m3-cell.na:hover { background-color: transparent; }
body.m3-mode .m3-cell-oos,
body.m3-mode .m3-cell-na {
  color: var(--muted);
  font-size: 14px;
  opacity: .55;
}

body.m3-mode .m3-matrix-hint {
  padding: 10px 14px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .02em;
}

/* ---------- Bottom orderbar ---------- */
body.m3-mode .m3-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
}
body.m3-mode .m3-bar-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  max-width: 1200px; margin: 0 auto;
}
body.m3-mode .m3-bar-left { display: inline-flex; align-items: baseline; gap: 18px; }
body.m3-mode .m3-bar-stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
body.m3-mode .m3-bar-stat span {
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase;
}
body.m3-mode .m3-bar-stat strong {
  font-size: 18px; font-weight: 700; color: var(--ink);
}
body.m3-mode .m3-bar-stat.grand strong {
  font-size: 22px; color: var(--primary-deep);
}
[data-theme="black-yellow"] body.m3-mode .m3-bar-stat.grand strong { color: var(--primary); }
body.m3-mode .m3-bar-actions { display: inline-flex; gap: 8px; }
body.m3-mode .m3-bar-actions .btn {
  padding: 11px 16px; font-size: 13px; font-weight: 700;
  border-radius: 8px;
}
body.m3-mode .m3-bar-progress { margin-top: 8px; gap: 12px; }
body.m3-mode .m3-bar-progress .moq-msg {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}
@media (max-width: 480px) {
  body.m3-mode .m3-bar-left { gap: 12px; }
  body.m3-mode .m3-bar-stat strong { font-size: 16px; }
  body.m3-mode .m3-bar-stat.grand strong { font-size: 18px; }
  body.m3-mode .m3-bar-actions .btn { padding: 9px 12px; font-size: 12px; }
}

/* ---------- Bottom sheet (iOS-style) ---------- */
body.m3-mode .m3-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
}
body.m3-mode .m3-sheet[aria-hidden="false"] { display: block; }
body.m3-mode .m3-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 12, 20, .55);
  backdrop-filter: blur(2px);
  animation: m3-fade .2s ease-out;
}
@keyframes m3-fade { from { opacity: 0; } to { opacity: 1; } }

body.m3-mode .m3-sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: 560px;
  margin: 0 auto;
  background: var(--bg-elev);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .25);
  padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
  animation: m3-slide-up .26s cubic-bezier(.2,.8,.2,1);
  border: 1px solid var(--line);
  border-bottom: 0;
}
@keyframes m3-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
body.m3-mode .m3-sheet-grab {
  width: 40px; height: 4px;
  background: color-mix(in srgb, var(--muted) 40%, transparent);
  border-radius: 2px;
  margin: 6px auto 12px;
}

body.m3-mode .m3-sheet-head {
  display: flex; align-items: center;
  justify-content: space-between; gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
body.m3-mode .m3-sheet-title-wrap {
  display: flex; align-items: center; gap: 12px;
  min-width: 0; flex: 1 1 auto;
}
body.m3-mode .m3-sheet-swatch {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #999;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
body.m3-mode .m3-sheet-head h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 18px; font-weight: 800; letter-spacing: -.01em;
  margin: 0; line-height: 1.1;
}
body.m3-mode .m3-sheet-sub {
  margin: 2px 0 0; font-size: 12px; color: var(--muted);
}
body.m3-mode .m3-sheet-qty {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 30px; font-weight: 700;
  color: var(--primary-deep);
  min-width: 60px; text-align: right;
  line-height: 1;
}
[data-theme="black-yellow"] body.m3-mode .m3-sheet-qty { color: var(--primary); }
body.m3-mode .m3-sheet-qty.pulse {
  animation: m3-pulse-qty .42s cubic-bezier(.2,.8,.2,1);
}
@keyframes m3-pulse-qty {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Chip row */
body.m3-mode .m3-chip-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
body.m3-mode .m3-chip {
  height: 56px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
  cursor: pointer;
}
body.m3-mode .m3-chip:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-deep);
}
body.m3-mode .m3-chip.big {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
}
body.m3-mode .m3-chip.big:hover {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  color: var(--primary-ink);
}
body.m3-mode .m3-chip.neg {
  color: var(--ink-soft);
}
body.m3-mode .m3-chip.tap {
  transform: scale(.92);
}
@media (max-width: 480px) {
  body.m3-mode .m3-chip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.m3-mode .m3-chip { height: 50px; font-size: 13px; }
}

body.m3-mode .m3-sheet-input-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 14px;
}
body.m3-mode .m3-sheet-input-row label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
body.m3-mode .m3-sheet-input-row input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--bg-elev);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: border-color var(--t);
}
body.m3-mode .m3-sheet-input-row input:focus {
  border-color: var(--primary);
}
body.m3-mode .m3-clear {
  height: 40px; padding: 0 14px;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all var(--t);
}
body.m3-mode .m3-clear:hover {
  border-color: var(--ink); color: var(--ink);
}

body.m3-mode .m3-sheet-foot .btn { height: 50px; font-size: 14px; font-weight: 700; }

@media (min-width: 720px) {
  /* Centred on desktop */
  body.m3-mode .m3-sheet-panel {
    bottom: 50%;
    transform: translateY(50%);
    border-radius: 20px;
    border-bottom: 1px solid var(--line);
    animation: m3-fade-in .2s ease-out;
  }
  @keyframes m3-fade-in { from { opacity: 0; transform: translateY(calc(50% + 12px)); } to { opacity: 1; transform: translateY(50%); } }
  body.m3-mode .m3-sheet-grab { display: none; }
}

/* ---------- Footer ---------- */
body.m3-mode .m3-foot {
  text-align: center;
  padding: 20px 14px 100px;
  font-size: 12px;
  color: var(--muted);
}
body.m3-mode .m3-foot-contact { margin-top: 8px; font-size: 11px; }
body.m3-mode .m3-foot-contact a {
  color: var(--primary-deep); font-weight: 600; margin: 0 4px;
}
[data-theme="black-yellow"] body.m3-mode .m3-foot-contact a { color: var(--primary); }

/* =========================================================
   M4 — TWO-STEP PICKER
   App-like picker: huge colour swatch carousel + size steppers
   + live "Order so far" preview (sticky right column on desktop,
   collapsible bottom sheet on mobile). All selectors scoped to
   body.m4-mode. Reuses theme tokens from the base palette.
   ========================================================= */

body.m4-mode {
  background: var(--bg-soft);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.005em;
  padding-bottom: 200px;
}

body.m4-mode .m4-muted {
  color: var(--muted);
  font-size: 14px;
}

body.m4-mode .m4-grand strong { color: var(--primary); }

/* ---------- Top bar ---------- */
body.m4-mode .m4-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
body.m4-mode .m4-top .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
body.m4-mode .m4-top .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: var(--shadow-sm);
}
body.m4-mode .m4-top .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
body.m4-mode .m4-top .brand-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 16px;
}
body.m4-mode .m4-top .brand-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .02em;
}
body.m4-mode .m4-cart {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: var(--shadow-sm);
}
body.m4-mode .m4-cart:hover { transform: translateY(-1px); border-color: var(--primary); }
body.m4-mode .m4-cart-num {
  font-weight: 800;
  font-size: 16px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  color: var(--primary);
}
body.m4-mode .m4-cart-lbl { font-size: 12px; color: var(--muted); }

/* ---------- Sticky product tabs ---------- */
body.m4-mode .m4-tabs {
  position: sticky;
  top: 56px;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
body.m4-mode .m4-tabs-inner {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
body.m4-mode .m4-tabs-inner::-webkit-scrollbar { display: none; }
body.m4-mode .m4-tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  scroll-snap-align: center;
}
body.m4-mode .m4-tab:hover:not([disabled]) { border-color: var(--primary); color: var(--ink); }
body.m4-mode .m4-tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
body.m4-mode .m4-tab.sold-out {
  color: var(--muted);
  text-decoration: line-through;
  opacity: .55;
  cursor: not-allowed;
}
body.m4-mode .m4-tab-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 800;
  font-size: 11px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}
body.m4-mode .m4-tab[aria-selected="true"] .m4-tab-pill {
  background: var(--bg);
  color: var(--ink);
}

/* ---------- Main two-column layout ---------- */
body.m4-mode .m4-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 881px) {
  body.m4-mode .m4-main {
    grid-template-columns: 1fr 360px;
    align-items: start;
  }
}

/* ---------- Product card ---------- */
body.m4-mode .m4-prodcard {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  box-shadow: var(--shadow-sm);
}
body.m4-mode .m4-prodcard h1 {
  margin: 0 0 6px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.15;
}
body.m4-mode .m4-prodcard .m4-muted { margin: 0 0 10px; max-width: 56ch; }
body.m4-mode .m4-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
}
body.m4-mode .m4-meta-line .m4-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
body.m4-mode .m4-prodcard-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 10px 14px;
  background: var(--primary-soft);
  border-radius: var(--radius);
  white-space: nowrap;
}
[data-theme="black-yellow"] body.m4-mode .m4-prodcard-price { background: color-mix(in srgb, var(--primary) 18%, transparent); }
body.m4-mode .m4-prodcard-price .m4-price-cur {
  color: var(--primary-deep);
  font-weight: 700;
}
body.m4-mode .m4-prodcard-price strong {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--primary-deep);
  letter-spacing: -0.02em;
}
body.m4-mode .m4-prodcard-price em {
  font-style: normal;
  font-size: 11px;
  color: var(--primary-deep);
  opacity: .75;
}

/* ---------- Section labels ---------- */
body.m4-mode .m4-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 4px 12px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}
body.m4-mode .m4-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  font-weight: 800;
}
body.m4-mode .m4-section-hint {
  margin-left: auto;
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
}

/* ---------- Colour swatch carousel ---------- */
body.m4-mode .m4-swatch-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 4px 14px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
body.m4-mode .m4-swatch-rail::-webkit-scrollbar { display: none; }

body.m4-mode .m4-swatch {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
  scroll-snap-align: center;
  min-height: 110px;
  width: 84px;
  -webkit-tap-highlight-color: transparent;
}
body.m4-mode .m4-swatch-disc {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-block;
  transform: scale(1);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
  will-change: transform;
}
body.m4-mode .m4-swatch-fill {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--disc);
  border: 1px solid color-mix(in srgb, #000 12%, transparent);
  box-shadow: inset 0 -6px 14px color-mix(in srgb, #000 18%, transparent),
              inset 0 4px 8px color-mix(in srgb, #fff 28%, transparent);
}
body.m4-mode .m4-swatch-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color .25s ease, transform .25s ease;
}
body.m4-mode .m4-swatch-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color .2s ease;
}
body.m4-mode .m4-swatch-sub {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .02em;
  height: 12px;
  line-height: 12px;
}
body.m4-mode .m4-swatch.is-selected .m4-swatch-disc {
  transform: scale(1.12);
  box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--primary) 38%, transparent),
              0 4px 12px color-mix(in srgb, #000 12%, transparent);
}
body.m4-mode .m4-swatch.is-selected .m4-swatch-ring {
  border-color: var(--primary);
  inset: -4px;
}
body.m4-mode .m4-swatch.is-selected .m4-swatch-name { color: var(--ink); }

body.m4-mode .m4-swatch.is-tap .m4-swatch-disc {
  animation: m4SwatchSpring .42s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes m4SwatchSpring {
  0%   { transform: scale(1.12); }
  35%  { transform: scale(1.22); }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1.12); }
}

body.m4-mode .m4-swatch.is-oos { cursor: not-allowed; opacity: .5; }
body.m4-mode .m4-swatch.is-oos .m4-swatch-disc { transform: scale(.92); }
body.m4-mode .m4-swatch-oos {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

body.m4-mode .m4-swatch-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 800;
  font-size: 11px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg-soft);
  animation: m4Pop .3s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes m4Pop {
  0%   { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ---------- Size stepper rows ---------- */
body.m4-mode .m4-size-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
body.m4-mode .m4-size {
  display: grid;
  grid-template-columns: 56px 1fr 80px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  min-height: 64px;
}
body.m4-mode .m4-size:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--line)); }
body.m4-mode .m4-size.has-qty {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-sm);
  background: color-mix(in srgb, var(--primary-soft) 50%, var(--bg-elev));
}
body.m4-mode .m4-size-letter {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
}
body.m4-mode .m4-size-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body.m4-mode .m4-minus,
body.m4-mode .m4-plus {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s ease, background .14s ease, color .14s ease, border-color .14s ease;
  -webkit-tap-highlight-color: transparent;
}
body.m4-mode .m4-minus:hover,
body.m4-mode .m4-plus:hover {
  border-color: var(--primary);
  color: var(--primary-deep);
}
body.m4-mode .m4-plus {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
body.m4-mode .m4-plus:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}
body.m4-mode .m4-minus.is-bump,
body.m4-mode .m4-plus.is-bump {
  animation: m4BtnBump .22s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes m4BtnBump {
  0%   { transform: scale(1); }
  45%  { transform: scale(.88); }
  100% { transform: scale(1); }
}
body.m4-mode .m4-qty {
  width: 64px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease;
  -moz-appearance: textfield;
}
body.m4-mode .m4-qty::-webkit-outer-spin-button,
body.m4-mode .m4-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.m4-mode .m4-qty:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
body.m4-mode .m4-size-cap {
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--primary-deep);
  text-transform: uppercase;
  font-feature-settings: 'tnum';
  min-height: 14px;
}
body.m4-mode .m4-size.is-oos {
  background: repeating-linear-gradient(
    -45deg,
    var(--bg-elev) 0,
    var(--bg-elev) 8px,
    var(--bg-soft) 8px,
    var(--bg-soft) 16px
  );
  border-color: var(--line);
  color: var(--muted);
}
body.m4-mode .m4-size.is-oos .m4-size-letter { color: var(--muted); text-decoration: line-through; }
body.m4-mode .m4-soldout {
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ---------- Live preview panel ---------- */
body.m4-mode .m4-preview {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 881px) {
  body.m4-mode .m4-preview {
    position: sticky;
    top: 116px;
    max-height: calc(100vh - 140px);
  }
}
body.m4-mode .m4-preview-head {
  padding: 16px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
body.m4-mode .m4-preview-head h3 {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
}
body.m4-mode .m4-preview-count {
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-weight: 700;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}
[data-theme="black-yellow"] body.m4-mode .m4-preview-count {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
}
body.m4-mode .m4-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}
body.m4-mode .m4-preview-empty {
  text-align: center;
  color: var(--muted);
  padding: 26px 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
body.m4-mode .m4-prev-prod {
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--bg-soft);
}
body.m4-mode .m4-prev-prod-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
body.m4-mode .m4-prev-colour {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
}
body.m4-mode .m4-prev-colour:first-of-type { border-top: 0; padding-top: 0; }
body.m4-mode .m4-prev-colour-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
body.m4-mode .m4-prev-disc {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #000 14%, transparent);
}
body.m4-mode .m4-prev-cname {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
body.m4-mode .m4-prev-csub {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
body.m4-mode .m4-prev-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-left: 22px;
}
body.m4-mode .m4-prev-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}
body.m4-mode .m4-prev-size {
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  min-width: 28px;
}
body.m4-mode .m4-prev-qty { color: var(--muted); }
body.m4-mode .m4-preview-foot {
  border-top: 1px solid var(--line);
  padding: 12px 16px 14px;
  background: var(--bg-elev);
}
body.m4-mode .m4-preview-totals { display: flex; flex-direction: column; gap: 4px; }
body.m4-mode .m4-preview-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
}
body.m4-mode .m4-preview-row strong { font-weight: 700; }
body.m4-mode .m4-preview-row.m4-muted-row { color: var(--muted); font-size: 12px; }
body.m4-mode .m4-preview-row.m4-muted-row small { font-size: 11px; }
body.m4-mode .m4-preview-row.m4-grand {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
body.m4-mode .m4-preview-row.m4-grand strong {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--primary-deep);
  letter-spacing: -0.01em;
}

/* ---------- Mobile preview pill + sheet ---------- */
body.m4-mode .m4-preview-pill {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  z-index: 28;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 30px -8px color-mix(in srgb, #000 38%, transparent);
  font-weight: 600;
  font-size: 13.5px;
  min-height: 44px;
  letter-spacing: -0.005em;
}
body.m4-mode .m4-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent);
}
body.m4-mode .m4-pill-count {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  color: var(--primary);
}
body.m4-mode .m4-pill-chev {
  font-size: 10px;
  opacity: .6;
  transition: transform .2s ease;
}
body.m4-mode .m4-preview-pill[aria-expanded="true"] .m4-pill-chev {
  transform: rotate(180deg);
}

@media (max-width: 880px) {
  body.m4-mode .m4-preview-pill { display: inline-flex; }
  body.m4-mode .m4-preview {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    max-height: 70vh;
    margin: 0;
  }
  body.m4-mode .m4-preview.is-open { transform: translateY(0); }
  body.m4-mode.m4-sheet-open { overflow: hidden; }
}

/* ---------- Sticky bottom orderbar ---------- */
body.m4-mode .m4-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 32;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: 0 -10px 30px -16px color-mix(in srgb, #000 30%, transparent);
}
body.m4-mode .m4-bar-row {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
body.m4-mode .m4-bar-progress { margin-top: 8px; gap: 12px; }
body.m4-mode .m4-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
body.m4-mode .m4-bar-stat { display: flex; flex-direction: column; line-height: 1.05; }
body.m4-mode .m4-bar-stat span {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
body.m4-mode .m4-bar-stat strong {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
body.m4-mode .m4-bar-stat.m4-grand strong { color: var(--primary-deep); font-size: 20px; }
body.m4-mode .m4-bar-actions { display: flex; gap: 8px; }
body.m4-mode .m4-checkout {
  min-height: 46px;
  padding: 0 22px;
  font-weight: 700;
  letter-spacing: -0.005em;
  border-radius: 999px;
}

body.m4-mode .m4-bar .moq-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
}
body.m4-mode .m4-bar .moq-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-deep));
  width: 0%;
  border-radius: 999px;
  transition: width .35s cubic-bezier(.34, 1.56, .64, 1);
}
body.m4-mode .m4-bar .moq-msg {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
body.m4-mode .m4-bar .moq-msg.met { color: var(--primary-deep); }

/* ---------- Footer ---------- */
body.m4-mode .m4-foot {
  text-align: center;
  padding: 18px 16px 24px;
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  margin-top: 16px;
}
body.m4-mode .m4-foot a {
  color: var(--primary-deep);
  text-decoration: none;
  font-weight: 600;
}
body.m4-mode .m4-foot a:hover { text-decoration: underline; }
body.m4-mode .m4-foot-contact { margin-top: 4px; }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 560px) {
  body.m4-mode .m4-prodcard {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  body.m4-mode .m4-prodcard-price { align-self: flex-start; }
  body.m4-mode .m4-size {
    grid-template-columns: 44px 1fr 64px;
    gap: 8px;
    padding: 10px 12px;
  }
  body.m4-mode .m4-size-letter { font-size: 18px; }
  body.m4-mode .m4-bar-stat strong { font-size: 16px; }
  body.m4-mode .m4-bar-stat.m4-grand strong { font-size: 18px; }
  body.m4-mode .m4-checkout { padding: 0 18px; }
  body.m4-mode { padding-bottom: 230px; }
}

/* =========================================================
   M5 — EXCEL SHEET MATRIX
   Top: horizontally-swipeable product tabs.
   Below: a single clean spreadsheet — sizes header ONCE, colour rows.
   Cells are directly editable inputs (NO popup). Tap and type.
   ========================================================= */

body.m5-mode { background: var(--bg); padding-bottom: 0; }

body.m5-mode .m5-top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
body.m5-mode .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
body.m5-mode .brand-text .brand-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800; font-size: 17px; letter-spacing: -.01em;
}
body.m5-mode .brand-text .brand-sub {
  font-size: 11px; color: var(--muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
body.m5-mode .m5-cart {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; height: 44px; padding: 0 14px;
  border-radius: 12px; background: var(--ink); color: var(--bg); line-height: 1;
}
body.m5-mode .m5-cart-num {
  font-family: 'JetBrains Mono', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums;
}
body.m5-mode .m5-cart-lbl { font-size: 10px; opacity: .65; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

body.m5-mode .m5-strip {
  display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 16px;
  background: var(--bg-soft); font-size: 12px; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
body.m5-mode .m5-strip > div { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
body.m5-mode .m5-strip b { color: var(--ink); font-weight: 700; }

/* Sticky horizontally-swipeable product tabs.
   Swipe affordance (no text):
   1. Right-edge fade gradient — visually obvious that content extends past the viewport.
   2. Left-edge fade appears when scrolled past start (toggled by JS via .scrolled).
   3. JS does a one-time tease scroll on first load (~40px right, then back) to teach the gesture. */
/* Stack-level container — pins all visible rows to the top together as one
   unified band. Individual .m5-tabs inside scroll horizontally but don't
   stick on their own (otherwise stacked sticky would need per-row offsets).
   Slightly tightened from the original single-row spacing so 3 rows fit
   comfortably above the matrix on small phones (320×568). */
body.m5-mode .m5-tabs-stack {
  position: sticky; top: 56px; z-index: 50;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
body.m5-mode .m5-tabs {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; overscroll-behavior-x: contain;
  /* Both edges fade by default so the first tab visibly hints "swipeable".
     JS swaps to a single-edge mask only when actually pinned to start/end.
     Same mask applies to every row so row 2 / 3 swipe identically to row 1. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 6%, black 88%, transparent 100%);
}
/* Rows 2 & 3 just get a hairline separator so the user can see where one
   row ends and the next begins — tabs themselves stay identical to row 1. */
body.m5-mode .m5-tabs-row2,
body.m5-mode .m5-tabs-row3 {
  border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
body.m5-mode .m5-tabs.scrolled-mid {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 6%, black 88%, transparent 100%);
}
body.m5-mode .m5-tabs.scrolled-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 6%, black 100%);
}
body.m5-mode .m5-tabs.no-overflow {
  -webkit-mask-image: none; mask-image: none;
}
body.m5-mode .m5-tabs::-webkit-scrollbar { display: none; }
body.m5-mode .m5-tabs-inner {
  display: flex; gap: 6px; padding: 5px 12px; min-width: max-content;
}
body.m5-mode .m5-tab {
  padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--bg-elev); color: var(--ink-soft);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--t); cursor: pointer; flex-shrink: 0;
}
body.m5-mode .m5-tab:hover { border-color: var(--primary); color: var(--primary-deep); }
body.m5-mode .m5-tab[aria-selected="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
body.m5-mode .m5-tab .pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--primary); color: var(--primary-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
body.m5-mode .m5-tab.sold-out { opacity: .45; text-decoration: line-through; cursor: not-allowed; }

/* Main */
body.m5-mode .m5-main { max-width: 980px; margin: 0 auto; padding: 14px 14px 24px; }

body.m5-mode .m5-prod {
  margin-bottom: 12px;
}
body.m5-mode .m5-prod h1 {
  display: flex; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(20px, 4vw, 26px); font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 6px; color: var(--ink);
  line-height: 1.15;
}
body.m5-mode .m5-prod .muted {
  font-size: 13px; line-height: 1.5; max-width: 540px; color: var(--muted); margin: 0;
}
/* Product image gallery — sits beneath the matrix in /m5. Multi-image
   horizontal carousel with snap, prev/next chevrons, dot indicators.
   A4-ish portrait frame so the full image is visible (contain, not cover).
   Capped width on desktop so a tall portrait doesn't dominate the page. */
body.m5-mode .m5-gallery {
  position: relative;
  margin: 18px auto 8px;
  max-width: 460px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
  overflow: hidden;
}
body.m5-mode .m5-gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.m5-mode .m5-gallery-track::-webkit-scrollbar { display: none; }
body.m5-mode .m5-gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1.414; /* A4 portrait */
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
}
body.m5-mode .m5-gallery-slide img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
body.m5-mode .m5-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(15, 23, 42, .65); color: #fff;
  border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), transform var(--t);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
body.m5-mode .m5-gallery-nav:hover { background: rgba(15, 23, 42, .85); transform: translateY(-50%) scale(1.05); }
body.m5-mode .m5-gallery-nav.prev { left: 8px; }
body.m5-mode .m5-gallery-nav.next { right: 8px; }
body.m5-mode .m5-gallery.single .m5-gallery-nav,
body.m5-mode .m5-gallery.single .m5-gallery-dots { display: none; }
body.m5-mode .m5-gallery-dots {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; gap: 6px; justify-content: center;
  pointer-events: auto;
}
body.m5-mode .m5-gallery-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .5);
  transition: background var(--t), transform var(--t);
}
body.m5-mode .m5-gallery-dot:hover { background: rgba(255, 255, 255, .8); }
body.m5-mode .m5-gallery-dot.on { background: #fff; transform: scale(1.3); }
/* Inline price next to product name — no box, just typography */
body.m5-mode .m5-price-inline {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  white-space: nowrap;
}
body.m5-mode .m5-price-inline .ccy {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--muted);
  margin-right: 1px;
}
body.m5-mode .m5-price-inline strong {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1em;
  font-weight: 800;
  color: var(--primary-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
[data-theme="black-yellow"] body.m5-mode .m5-price-inline strong { color: var(--primary); }
body.m5-mode .m5-price-inline .per {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--muted);
  margin-left: 4px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
body.m5-mode .m5-price-inline .m5-price-tag {
  display: inline-flex; align-items: center;
  margin-left: 6px; padding: 3px 8px;
  font-size: 0.42em; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--primary-deep);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}
[data-theme="black-yellow"] body.m5-mode .m5-price-inline .m5-price-tag {
  color: var(--primary); background: #1a1a1a;
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
body.m5-mode .m5-sample-hint {
  margin: 4px 0 0; padding: 6px 10px;
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
  font-size: 12px; font-weight: 500; color: var(--muted);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 8px;
  line-height: 1.3;
}
body.m5-mode .m5-sample-hint[hidden] { display: none; }
body.m5-mode .m5-sample-hint strong {
  font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums;
}
body.m5-mode .m5-sample-hint .m5-sample-tail { color: var(--muted); }
[data-theme="black-yellow"] body.m5-mode .m5-sample-hint strong { color: #fff; }

/* Small photo icon button beside the product name + price. Smooth-scrolls
   the page down to the gallery section beneath the matrix. Hidden when the
   active product has no photos. */
body.m5-mode .m5-photo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
  align-self: center;
  flex-shrink: 0;
}
body.m5-mode .m5-photo-btn[hidden] { display: none; }
/* 48px first-photo thumbnail that stands in for the camera button when the
   product has photos. Opens the lightbox. */
body.m5-mode .m5-photo-thumb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  padding: 0; overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  cursor: pointer;
  align-self: center;
  flex-shrink: 0;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.m5-mode .m5-photo-thumb[hidden] { display: none; }
body.m5-mode .m5-photo-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
body.m5-mode .m5-photo-thumb:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 18%, transparent);
}
body.m5-mode .m5-photo-thumb:active { transform: scale(.96); }
body.m5-mode .m5-photo-thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
body.m5-mode .m5-photo-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--bg-soft);
}
body.m5-mode .m5-photo-btn:active { transform: scale(.94); }
body.m5-mode .m5-photo-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* The sheet */
body.m5-mode .sheet-wrap {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--bg-elev);
  box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
}
body.m5-mode .sheet-scroll { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
body.m5-mode .sheet {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px;
}

/* Header row: size labels printed ONCE */
body.m5-mode .sheet thead th {
  background: var(--bg-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-soft); padding: 12px 6px;
  text-align: center; text-transform: uppercase;
  border-bottom: 2px solid var(--line); white-space: nowrap; min-width: 60px;
}
body.m5-mode .sheet thead th.colour-corner {
  text-align: left; padding-left: 14px;
  background: var(--ink); color: var(--bg);
  position: sticky; left: 0; z-index: 4;
  min-width: 130px; border-right: 2px solid var(--ink);
  font-size: 11px;
}
body.m5-mode .sheet thead th.size-head { color: var(--ink); font-weight: 800; font-size: 13px; }
body.m5-mode .sheet thead th.size-head.has-qty { background: var(--primary-soft); color: var(--primary-deep); }
[data-theme="black-yellow"] body.m5-mode .sheet thead th.size-head.has-qty { background: #2a2104; color: var(--primary); }
/* Per-size price under the size name. Only rendered when this product really
   does cost different amounts in different sizes, so the column the buyer is
   typing into states its own rate. */
body.m5-mode .sheet thead th.size-head .size-head-price {
  display: block;
  margin-top: 2px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
body.m5-mode .sheet thead th.size-head.has-qty .size-head-price { color: inherit; opacity: .85; }

/* Body rows: alternating tints + colour name + qty cells */
body.m5-mode .sheet tbody tr:nth-child(even) td,
body.m5-mode .sheet tbody tr:nth-child(even) th { background: var(--bg-soft); }
body.m5-mode .sheet tbody tr:nth-child(odd) td,
body.m5-mode .sheet tbody tr:nth-child(odd) th { background: var(--bg-elev); }
body.m5-mode .sheet tbody tr:hover td:not(.oos),
body.m5-mode .sheet tbody tr:hover th { background: color-mix(in srgb, var(--primary-soft) 60%, var(--bg-elev)); }

body.m5-mode .sheet tbody th.colour {
  position: sticky; left: 0; z-index: 2;
  text-align: left; padding: 8px 12px;
  font-weight: 600; font-size: 13px; color: var(--ink);
  border-right: 2px solid var(--line); border-bottom: 1px solid var(--line);
  min-width: 130px; vertical-align: middle;
}
body.m5-mode .sheet tbody th.colour .colour-inner {
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
body.m5-mode .sheet tbody th.colour .swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
  flex-shrink: 0;
}
body.m5-mode .sheet tbody th.colour .row-tot {
  display: inline-block; margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
body.m5-mode .sheet tbody th.colour .row-tot.has { color: var(--primary-deep); }
[data-theme="black-yellow"] body.m5-mode .sheet tbody th.colour .row-tot.has { color: var(--primary); }

/* Cells — DIRECT EDIT, no popup. Tap and type. */
body.m5-mode .sheet tbody td {
  padding: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative; text-align: center;
}
body.m5-mode .sheet tbody td:last-child { border-right: 0; }
body.m5-mode .sheet tbody tr:last-child td,
body.m5-mode .sheet tbody tr:last-child th { border-bottom: 0; }

body.m5-mode .sheet tbody td input.qcell {
  width: calc(100% - 12px); min-width: 52px; height: 38px;
  margin: 5px 6px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 8px;
  background: var(--bg-elev);
  font-family: 'JetBrains Mono', 'Inter', sans-serif;
  font-weight: 600; font-size: 15px; color: var(--ink);
  font-variant-numeric: tabular-nums; outline: none;
  transition: border-color var(--t), background var(--t), color var(--t), box-shadow var(--t);
  cursor: text;
  -moz-appearance: textfield;
}
body.m5-mode .sheet tbody td input.qcell::placeholder { color: var(--muted); opacity: .55; font-weight: 500; }
body.m5-mode .sheet tbody td input.qcell::-webkit-inner-spin-button,
body.m5-mode .sheet tbody td input.qcell::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body.m5-mode .sheet tbody td input.qcell:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 4%, var(--bg-elev));
}
body.m5-mode .sheet tbody td input.qcell:focus {
  background: var(--bg);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--primary-deep);
}
[data-theme="black-yellow"] body.m5-mode .sheet tbody td input.qcell:focus { color: var(--primary); }

body.m5-mode .sheet tbody td.has-qty {
  background: var(--primary-soft) !important;
}
[data-theme="black-yellow"] body.m5-mode .sheet tbody td.has-qty { background: #2a2104 !important; }
body.m5-mode .sheet tbody td.has-qty input.qcell {
  color: var(--primary-deep); font-weight: 800;
  background: var(--bg);
  border-color: var(--primary);
}
[data-theme="black-yellow"] body.m5-mode .sheet tbody td.has-qty input.qcell { color: var(--primary); }

body.m5-mode .sheet tbody td.oos {
  background: repeating-linear-gradient(
    45deg,
    var(--bg-soft), var(--bg-soft) 4px,
    color-mix(in srgb, var(--ink) 5%, transparent) 4px,
    color-mix(in srgb, var(--ink) 5%, transparent) 8px
  ) !important;
  cursor: not-allowed;
}
body.m5-mode .sheet tbody td.oos input.qcell { color: transparent; cursor: not-allowed; }
body.m5-mode .sheet tbody td.oos::after {
  content: '×';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 16px; font-weight: 700; pointer-events: none;
}

/* Footer row: per-size totals */
body.m5-mode .sheet tfoot td,
body.m5-mode .sheet tfoot th {
  background: var(--ink) !important; color: var(--bg);
  padding: 10px 6px; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: center; border-top: 2px solid var(--ink);
}
body.m5-mode .sheet tfoot th.foot-label {
  text-align: left; padding-left: 14px;
  position: sticky; left: 0; z-index: 2;
  text-transform: uppercase; letter-spacing: .04em;
}
body.m5-mode .sheet tfoot td.foot-cell.zero { color: color-mix(in srgb, var(--bg) 50%, var(--ink)); }
body.m5-mode .sheet tfoot td.foot-cell.has { color: var(--primary); }

body.m5-mode .m5-hint {
  margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center;
}

/* Specifications block — only shown for printer-supply products. */
body.m5-mode .m5-specs {
  margin-top: 22px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}
body.m5-mode .m5-specs-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
body.m5-mode .m5-specs-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 0;
}
body.m5-mode .m5-spec-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
body.m5-mode .m5-spec-row:last-child { border-bottom: 0; }
body.m5-mode .m5-spec-row dt {
  font-size: 12.5px; color: var(--muted); font-weight: 600;
}
body.m5-mode .m5-spec-row dd {
  font-size: 13px; color: var(--ink); font-weight: 600; margin: 0; text-align: right;
}
@media (max-width: 600px) {
  body.m5-mode .m5-specs-list { grid-template-columns: 1fr; }
}

/* Printer-supply matrix overrides: variant cells show the variant name as
   plain text (no swatch), and a "from ₹X" hint per row. */
body.m5-mode .sheet-wrap.m5-printer .colour-text .cname {
  font-size: 14px; font-weight: 700;
}
body.m5-mode .sheet-wrap.m5-printer .colour-text .cname-price {
  display: block;
  font-size: 11px; font-weight: 600; color: var(--muted);
  margin-top: 2px;
}
body.m5-mode .sheet-wrap.m5-no-axis2 .size-head { font-size: 11px; color: var(--muted); }

/* Sticky bottom bar */
body.m5-mode .m5-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: color-mix(in srgb, var(--bg-elev) 96%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(15, 23, 42, .08);
  z-index: 40;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column; gap: 8px;
}
body.m5-mode .m5-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.m5-mode .m5-bar-left { display: flex; align-items: baseline; gap: 18px; }
body.m5-mode .m5-bar-stat { display: flex; flex-direction: column; line-height: 1; }
body.m5-mode .m5-bar-stat span {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600;
}
body.m5-mode .m5-bar-stat strong {
  font-family: 'JetBrains Mono', 'Plus Jakarta Sans', sans-serif;
  font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums;
}
body.m5-mode .m5-bar-stat.grand strong { font-size: 22px; color: var(--primary-deep); }
[data-theme="black-yellow"] body.m5-mode .m5-bar-stat.grand strong { color: var(--primary); }

body.m5-mode .m5-bar-actions { display: flex; gap: 8px; }
body.m5-mode .m5-bar-actions .btn { padding: 10px 16px; font-size: 14px; border-radius: 10px; }
body.m5-mode .m5-bar-progress { flex-direction: column; align-items: stretch; gap: 4px; }
body.m5-mode .m5-bar-progress .moq-msg { font-size: 11px; text-align: left; }
body.m5-mode .m5-bar-progress .moq-msg.sample { color: #b45309; font-weight: 600; }

/* ----- Mobile: fit the whole matrix on a phone screen ----- */
@media (max-width: 600px) {
  body.m5-mode .m5-main { padding: 12px 6px 20px; }

  /* Colour column shrinks: smaller swatch, name truncates, row-total hidden
     (the same number is shown on the sticky bottom bar). */
  body.m5-mode .sheet thead th.colour-corner {
    min-width: 76px; padding: 10px 8px; font-size: 10px;
  }
  body.m5-mode .sheet tbody th.colour {
    min-width: 76px; padding: 6px 8px; font-size: 12px;
  }
  body.m5-mode .sheet tbody th.colour .colour-inner {
    gap: 6px; align-items: center; white-space: normal;
  }
  body.m5-mode .sheet tbody th.colour .swatch { width: 14px; height: 14px; flex-shrink: 0; }
  body.m5-mode .sheet tbody th.colour .cname {
    /* Two-word names like 'Sage Green' or 'Off-white' wrap to two lines so
       the full name is always readable instead of getting truncated. */
    white-space: normal; word-break: break-word;
    font-size: 11px; line-height: 1.15;
    flex: 1; min-width: 0;
  }
  body.m5-mode .sheet tbody th.colour .row-tot { display: none; }

  /* Size columns shrink so all 5 (S/M/L/XL/XXL) fit on 360-390px width. */
  body.m5-mode .sheet thead th { min-width: 46px; padding: 10px 2px; font-size: 11px; }
  body.m5-mode .sheet thead th.size-head { font-size: 12px; }
  body.m5-mode .sheet tbody td input.qcell {
    min-width: 38px; height: 36px;
    margin: 4px 3px; width: calc(100% - 6px);
    font-size: 14px; border-radius: 7px;
  }
  body.m5-mode .sheet tfoot td,
  body.m5-mode .sheet tfoot th { padding: 8px 2px; font-size: 11px; }
  body.m5-mode .sheet tfoot th.foot-label { padding-left: 8px; }

  /* Bottom bar tightens up too. */
  body.m5-mode .m5-bar-left { gap: 14px; }
  body.m5-mode .m5-bar-stat strong { font-size: 17px; }
  body.m5-mode .m5-bar-stat.grand strong { font-size: 19px; }
}

@media (max-width: 380px) {
  body.m5-mode .m5-bar-left { gap: 10px; }
  body.m5-mode .m5-bar-stat strong { font-size: 15px; }
  body.m5-mode .m5-bar-stat.grand strong { font-size: 17px; }
  body.m5-mode .m5-bar-actions .btn { padding: 9px 12px; font-size: 13px; }
  body.m5-mode .sheet thead th.colour-corner,
  body.m5-mode .sheet tbody th.colour { min-width: 64px; padding: 6px; }
  body.m5-mode .sheet tbody th.colour .cname { font-size: 10px; line-height: 1.1; }
  body.m5-mode .sheet thead th { min-width: 42px; }
  body.m5-mode .sheet tbody td input.qcell { min-width: 34px; height: 34px; font-size: 13px; }
}

body.m5-mode .m5-foot {
  text-align: center; font-size: 12px; color: var(--muted);
  /* Bottom padding clears the fixed order bar (64px) and the home indicator. */
  padding: 24px 16px calc(88px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-soft); border-top: 1px solid var(--line);
}
body.m5-mode .m5-foot-contact { margin-top: 6px; font-size: 11px; }
body.m5-mode .m5-foot-contact a { color: var(--ink-soft); text-decoration: underline; }
body.m5-mode .m5-foot-legal { margin-top: 10px; font-size: 11px; }
body.m5-mode .m5-foot-legal a { color: var(--ink-soft); text-decoration: none; margin: 0 3px; }
body.m5-mode .m5-foot-legal a:hover { color: var(--ink); text-decoration: underline; }

body.m5-mode .cart-item.cart-sized .cart-item-vis {
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
body.m5-mode .cart-item .cart-mt-wrap {
  grid-column: 1 / -1;
  min-width: 0;
}
body.m5-mode .cart-item .cart-mt-cap {
  display: block;
  margin-bottom: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
body.m5-mode .cart-item .cart-mt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 10px;
  width: max-content;
  max-width: 100%;
  padding: 5px 8px 6px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: var(--radius-sm);
}
body.m5-mode .cart-item .cart-mt-col {
  display: flex;
  flex-direction: column;
  min-width: 32px;
}
body.m5-mode .cart-item .cart-mt-s {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--ink-soft);
  padding-bottom: 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
body.m5-mode .cart-item .cart-mt-q {
  margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--primary-deep);
}
[data-theme="black-yellow"] body.m5-mode .cart-item .cart-mt-q {
  color: var(--primary);
}
@media (max-width: 600px) {
  body.m5-mode .drawer-head,
  body.m5-mode .drawer-foot { padding-left: 14px; padding-right: 14px; }
  body.m5-mode .drawer-body { padding: 16px 14px; }
  body.m5-mode .cart-item .cart-mt { gap: 6px; }
  body.m5-mode .cart-item .cart-mt-col { min-width: 30px; }
}

/* =========================================================
   M6 — CATEGORY-BASED PRODUCT SELECTOR + INLINE EXCEL MATRIX
   Top: Summer / Winter / Kids pill row (fits one screen, no swipe).
   Below: vertical sub-sections (Oversize / Regular / Polos / etc.) with
   small product tiles. Tap a tile → /m5-style spreadsheet expands inline
   under that tile. Same sticky bottom bar as /m5.
   ========================================================= */

body.m6-mode { background: var(--bg); padding-bottom: 0; }

body.m6-mode .m6-top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
body.m6-mode .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
body.m6-mode .brand-text .brand-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800; font-size: 17px; letter-spacing: -.01em;
}
body.m6-mode .brand-text .brand-sub {
  font-size: 11px; color: var(--muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
body.m6-mode .m6-cart {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; height: 44px; padding: 0 14px;
  border-radius: 12px; background: var(--ink); color: var(--bg); line-height: 1;
}
body.m6-mode .m6-cart-num {
  font-family: 'JetBrains Mono', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums;
}
body.m6-mode .m6-cart-lbl { font-size: 10px; opacity: .65; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

body.m6-mode .m6-strip {
  display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 16px;
  background: var(--bg-soft); font-size: 12px; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
body.m6-mode .m6-strip > div { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
body.m6-mode .m6-strip b { color: var(--ink); font-weight: 700; }

/* Top category pill row — fits one screen */
body.m6-mode .m6-cats {
  position: sticky; top: 56px; z-index: 50;
  display: flex; gap: 8px; padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.m6-mode .m6-cats::-webkit-scrollbar { display: none; }
body.m6-mode .m6-cat {
  flex: 1 1 0;
  min-width: max-content;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink-soft);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--t);
}
body.m6-mode .m6-cat:hover { border-color: var(--primary); color: var(--primary-deep); }
body.m6-mode .m6-cat[aria-selected="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
body.m6-mode .m6-cat .count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
body.m6-mode .m6-cat[aria-selected="true"] .count {
  background: var(--primary); color: var(--primary-ink);
}
body.m6-mode .m6-cat .pcs-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: 999px;
  background: var(--primary); color: var(--primary-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* Main = stack of sub-sections */
body.m6-mode .m6-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 14px 220px;
}

body.m6-mode .m6-section {
  margin-bottom: 22px;
}
body.m6-mode .m6-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 8px 4px 10px;
  border-bottom: 1.5px dashed var(--line);
  margin-bottom: 12px;
}
body.m6-mode .m6-section-head h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
  margin: 0;
}
body.m6-mode .m6-section-head .sec-pcs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
body.m6-mode .m6-section-head .sec-pcs.has { color: var(--primary-deep); font-weight: 700; }
[data-theme="black-yellow"] body.m6-mode .m6-section-head .sec-pcs.has { color: var(--primary); }

/* Tile grid */
body.m6-mode .tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) {
  body.m6-mode .tile-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 760px) {
  body.m6-mode .tile-grid { grid-template-columns: repeat(4, 1fr); }
}

body.m6-mode .tile {
  position: relative;
  background: var(--bg-elev);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  transition: all var(--t);
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body.m6-mode .tile:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 12%, transparent);
}
body.m6-mode .tile[aria-expanded="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 18%, transparent);
}
[data-theme="black-yellow"] body.m6-mode .tile[aria-expanded="true"] {
  background: #2a2104;
}
body.m6-mode .tile.sold-out {
  opacity: .45; cursor: not-allowed;
}
body.m6-mode .tile.sold-out::after {
  content: 'Sold out';
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: 700;
  color: #dc2626; letter-spacing: .04em;
  text-transform: uppercase;
}
body.m6-mode .tile-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -.005em;
  line-height: 1.25;
}
body.m6-mode .tile-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: 8px;
}
body.m6-mode .tile-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
body.m6-mode .tile-pcs {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body.m6-mode .tile-pcs.zero { display: none; }

/* Inline matrix container — slot under the row of tiles */
body.m6-mode .matrix-slot {
  margin-top: 14px;
  margin-bottom: 4px;
  display: none;
}
body.m6-mode .matrix-slot.open {
  display: block;
  animation: m6-expand 280ms cubic-bezier(.2,.8,.2,1);
}
@keyframes m6-expand {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

body.m6-mode .matrix-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 28px rgba(15,23,42,.06);
}
body.m6-mode .matrix-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
body.m6-mode .matrix-head h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 18px; font-weight: 800; letter-spacing: -.015em;
  margin: 0 0 4px; color: var(--ink);
}
body.m6-mode .matrix-head p {
  font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5;
  max-width: 540px;
}
body.m6-mode .matrix-head .price-tag {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 8px 12px; background: var(--ink); color: var(--bg);
  border-radius: 9px; white-space: nowrap; align-self: center;
}
body.m6-mode .matrix-head .price-tag b {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums;
}
body.m6-mode .matrix-head .price-tag em {
  font-style: normal; font-size: 10px; opacity: .65;
  text-transform: uppercase; letter-spacing: .04em;
}

/* The Excel sheet inside (mirrors /m5) */
body.m6-mode .sheet-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
body.m6-mode .sheet {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px;
}
body.m6-mode .sheet thead th {
  background: var(--bg-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-soft); padding: 12px 6px;
  text-align: center; text-transform: uppercase;
  border-bottom: 2px solid var(--line); white-space: nowrap; min-width: 60px;
}
body.m6-mode .sheet thead th.colour-corner {
  text-align: left; padding-left: 14px;
  background: var(--ink); color: var(--bg);
  position: sticky; left: 0; z-index: 4;
  min-width: 130px; border-right: 2px solid var(--ink);
  font-size: 11px;
}
body.m6-mode .sheet thead th.size-head { color: var(--ink); font-weight: 800; font-size: 13px; }
body.m6-mode .sheet thead th.size-head.has-qty { background: var(--primary-soft); color: var(--primary-deep); }
[data-theme="black-yellow"] body.m6-mode .sheet thead th.size-head.has-qty { background: #2a2104; color: var(--primary); }

body.m6-mode .sheet tbody tr:nth-child(even) td,
body.m6-mode .sheet tbody tr:nth-child(even) th { background: var(--bg-soft); }
body.m6-mode .sheet tbody tr:nth-child(odd) td,
body.m6-mode .sheet tbody tr:nth-child(odd) th { background: var(--bg-elev); }
body.m6-mode .sheet tbody tr:hover td:not(.oos),
body.m6-mode .sheet tbody tr:hover th { background: color-mix(in srgb, var(--primary-soft) 60%, var(--bg-elev)); }

body.m6-mode .sheet tbody th.colour {
  position: sticky; left: 0; z-index: 2;
  text-align: left; padding: 8px 12px;
  font-weight: 600; font-size: 13px; color: var(--ink);
  border-right: 2px solid var(--line); border-bottom: 1px solid var(--line);
  min-width: 130px; vertical-align: middle;
}
body.m6-mode .sheet tbody th.colour .colour-inner {
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
body.m6-mode .sheet tbody th.colour .swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
  flex-shrink: 0;
}
body.m6-mode .sheet tbody th.colour .row-tot {
  display: inline-block; margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
body.m6-mode .sheet tbody th.colour .row-tot.has { color: var(--primary-deep); }
[data-theme="black-yellow"] body.m6-mode .sheet tbody th.colour .row-tot.has { color: var(--primary); }

body.m6-mode .sheet tbody td {
  padding: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative; text-align: center;
}
body.m6-mode .sheet tbody td:last-child { border-right: 0; }
body.m6-mode .sheet tbody tr:last-child td,
body.m6-mode .sheet tbody tr:last-child th { border-bottom: 0; }

body.m6-mode .sheet tbody td input.qcell {
  width: 100%; min-width: 60px; height: 48px;
  text-align: center; border: 0; background: transparent;
  font-family: 'JetBrains Mono', 'Inter', sans-serif;
  font-weight: 600; font-size: 15px; color: var(--ink);
  font-variant-numeric: tabular-nums; outline: none;
  transition: background var(--t), color var(--t), box-shadow var(--t);
  cursor: text;
}
body.m6-mode .sheet tbody td input.qcell::placeholder { color: var(--muted); opacity: .35; }
body.m6-mode .sheet tbody td input.qcell::-webkit-inner-spin-button { display: none; }
body.m6-mode .sheet tbody td input.qcell:focus {
  background: var(--bg-elev);
  box-shadow: inset 0 0 0 2px var(--primary);
  color: var(--primary-deep);
}
[data-theme="black-yellow"] body.m6-mode .sheet tbody td input.qcell:focus { color: var(--primary); }

body.m6-mode .sheet tbody td.has-qty { background: var(--primary-soft) !important; }
[data-theme="black-yellow"] body.m6-mode .sheet tbody td.has-qty { background: #2a2104 !important; }
body.m6-mode .sheet tbody td.has-qty input.qcell {
  color: var(--primary-deep); font-weight: 800;
}
[data-theme="black-yellow"] body.m6-mode .sheet tbody td.has-qty input.qcell { color: var(--primary); }

body.m6-mode .sheet tbody td.oos {
  background: repeating-linear-gradient(
    45deg,
    var(--bg-soft), var(--bg-soft) 4px,
    color-mix(in srgb, var(--ink) 5%, transparent) 4px,
    color-mix(in srgb, var(--ink) 5%, transparent) 8px
  ) !important;
  cursor: not-allowed;
}
body.m6-mode .sheet tbody td.oos input.qcell { color: transparent; cursor: not-allowed; }
body.m6-mode .sheet tbody td.oos::after {
  content: '×';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 16px; font-weight: 700; pointer-events: none;
}

body.m6-mode .sheet tfoot td,
body.m6-mode .sheet tfoot th {
  background: var(--ink) !important; color: var(--bg);
  padding: 10px 6px; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: center; border-top: 2px solid var(--ink);
}
body.m6-mode .sheet tfoot th.foot-label {
  text-align: left; padding-left: 14px;
  position: sticky; left: 0; z-index: 2;
  text-transform: uppercase; letter-spacing: .04em;
}
body.m6-mode .sheet tfoot td.foot-cell.zero { color: color-mix(in srgb, var(--bg) 50%, var(--ink)); }
body.m6-mode .sheet tfoot td.foot-cell.has { color: var(--primary); }

/* Sticky bottom bar (same as /m5) */
body.m6-mode .m6-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: color-mix(in srgb, var(--bg-elev) 96%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(15, 23, 42, .08);
  z-index: 40;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column; gap: 8px;
}
body.m6-mode .m6-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.m6-mode .m6-bar-left { display: flex; align-items: baseline; gap: 18px; }
body.m6-mode .m6-bar-stat { display: flex; flex-direction: column; line-height: 1; }
body.m6-mode .m6-bar-stat span {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600;
}
body.m6-mode .m6-bar-stat strong {
  font-family: 'JetBrains Mono', 'Plus Jakarta Sans', sans-serif;
  font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums;
}
body.m6-mode .m6-bar-stat.grand strong { font-size: 22px; color: var(--primary-deep); }
[data-theme="black-yellow"] body.m6-mode .m6-bar-stat.grand strong { color: var(--primary); }

body.m6-mode .m6-bar-actions { display: flex; gap: 8px; }
body.m6-mode .m6-bar-actions .btn { padding: 10px 16px; font-size: 14px; border-radius: 10px; }
body.m6-mode .m6-bar-progress { flex-direction: column; align-items: stretch; gap: 4px; }
body.m6-mode .m6-bar-progress .moq-msg { font-size: 11px; text-align: left; }

@media (max-width: 380px) {
  body.m6-mode .m6-bar-left { gap: 12px; }
  body.m6-mode .m6-bar-stat strong { font-size: 16px; }
  body.m6-mode .m6-bar-stat.grand strong { font-size: 18px; }
  body.m6-mode .m6-bar-actions .btn { padding: 9px 12px; font-size: 13px; }
  body.m6-mode .sheet tbody th.colour { min-width: 110px; }
  body.m6-mode .sheet tbody td input.qcell { min-width: 48px; }
}

body.m6-mode .m6-foot {
  text-align: center; padding: 24px 16px 100px; font-size: 12px; color: var(--muted);
  background: var(--bg-soft); border-top: 1px solid var(--line);
}
body.m6-mode .m6-foot-contact { margin-top: 6px; font-size: 11px; }
body.m6-mode .m6-foot-contact a { color: var(--ink-soft); text-decoration: underline; }

/* =========================================================
   CHECKOUT — Excel-sheet order summary + form
   Each product the buyer ordered is rendered as its own mini sheet.
   ========================================================= */

body.checkout-mode { background: var(--bg); padding-bottom: 0; }

body.checkout-mode .ck-top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
body.checkout-mode .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
body.checkout-mode .brand-text .brand-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800; font-size: 17px; letter-spacing: -.01em;
}
body.checkout-mode .brand-text .brand-sub {
  font-size: 11px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
body.checkout-mode .ck-back {
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 12px; border-radius: 8px; transition: background var(--t);
}
body.checkout-mode .ck-back:hover { background: var(--bg-soft); color: var(--primary); }

body.checkout-mode .ck-wrap {
  max-width: 1180px; margin: 0 auto;
  padding: 22px 16px 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 920px) {
  body.checkout-mode .ck-wrap {
    grid-template-columns: 1fr 380px;
    gap: 26px;
  }
}

body.checkout-mode .ck-sheets-head { margin: 0 0 14px; }
body.checkout-mode .ck-sheets-head h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 4px; color: var(--ink);
}
body.checkout-mode .ck-sheets-head p { font-size: 13px; color: var(--muted); margin: 0; }

/* Each product sheet card — clean, calm, low visual weight. */
body.checkout-mode .ck-sheet-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
body.checkout-mode .ck-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
body.checkout-mode .ck-sheet-head h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: -.015em;
  margin: 0 0 3px; color: var(--ink);
}
body.checkout-mode .ck-sheet-head p { font-size: 12px; color: var(--muted); margin: 0; }
body.checkout-mode .ck-line-total {
  display: flex; align-items: center; line-height: 1;
}
body.checkout-mode .ck-line-total strong {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 18px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}

body.checkout-mode .ck-sheet-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* The read-only mini sheet — calmer than the editable /m5 sheet. */
body.checkout-mode .ck-sheet {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px;
}
body.checkout-mode .ck-sheet thead th {
  background: var(--bg-elev);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--muted); padding: 10px 6px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  white-space: nowrap; min-width: 60px;
}
body.checkout-mode .ck-sheet thead th.colour-corner {
  background: var(--bg-elev);
  position: sticky; left: 0; z-index: 4;
  min-width: 130px;
  border-right: 1px solid var(--line);
}
body.checkout-mode .ck-sheet thead th.size-head {
  color: var(--ink-soft); font-weight: 700; font-size: 12px;
  text-transform: uppercase;
}

/* No more alternating row stripes — keep it clean and white. */
body.checkout-mode .ck-sheet tbody td,
body.checkout-mode .ck-sheet tbody th { background: var(--bg-elev); }

body.checkout-mode .ck-sheet tbody th.colour {
  position: sticky; left: 0; z-index: 2;
  text-align: left; padding: 12px 14px;
  font-weight: 600; font-size: 14px; color: var(--ink);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 130px;
}
body.checkout-mode .ck-sheet tbody th.colour .colour-inner {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
body.checkout-mode .ck-sheet tbody th.colour .swatch {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  flex-shrink: 0;
}

body.checkout-mode .ck-sheet tbody td {
  padding: 12px 6px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
body.checkout-mode .ck-sheet tbody tr:last-child td,
body.checkout-mode .ck-sheet tbody tr:last-child th { border-bottom: 0; }
body.checkout-mode .ck-sheet tbody td.has-qty {
  color: var(--primary-deep);
  font-weight: 800;
}
[data-theme="black-yellow"] body.checkout-mode .ck-sheet tbody td.has-qty { color: var(--primary); }
body.checkout-mode .ck-sheet tbody td.empty {
  color: var(--muted); opacity: .35; font-weight: 500;
}

/* Form column (right-side on desktop, stacked on mobile) */
body.checkout-mode .ck-form-col {
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 80px;
  align-self: start;
}
@media (max-width: 919px) {
  body.checkout-mode .ck-form-col { position: static; }
}

body.checkout-mode .ck-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
}
body.checkout-mode .ck-card h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 18px; margin: 0 0 14px; letter-spacing: -.01em; font-weight: 800;
}
body.checkout-mode .ck-card h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 14px; margin: 0 0 12px;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); font-weight: 700;
}
body.checkout-mode .ck-totals { padding: 18px 22px; }
body.checkout-mode .ck-totals-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
body.checkout-mode .ck-totals-row:last-child { border-bottom: 0; }
body.checkout-mode .ck-totals-row span:first-child { color: var(--ink-soft); }
body.checkout-mode .ck-totals-row strong {
  font-family: 'JetBrains Mono', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
body.checkout-mode .ck-totals-row.muted-row span,
body.checkout-mode .ck-totals-row.muted-row strong { color: var(--muted); font-weight: 500; }
body.checkout-mode .ck-totals-row.muted-row strong { font-weight: 600; }
body.checkout-mode .ck-totals-row.muted-row small { color: var(--muted); margin-left: 4px; font-size: 11px; }
body.checkout-mode .ck-totals-row.grand {
  margin-top: 6px; padding-top: 12px; border-top: 1.5px solid var(--line);
  border-bottom: 0;
}
body.checkout-mode .ck-totals-row.grand span:first-child {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
body.checkout-mode .ck-totals-row.grand strong {
  font-size: 22px; color: var(--primary-deep); letter-spacing: -.01em;
}
[data-theme="black-yellow"] body.checkout-mode .ck-totals-row.grand strong { color: var(--primary); }

body.checkout-mode .ck-pay { margin-top: 6px; }
body.checkout-mode .ck-note {
  font-size: 12px; color: var(--muted); text-align: center;
  margin: 8px 0 0;
}

body.checkout-mode .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
body.checkout-mode .field label {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em;
}
body.checkout-mode .field input,
body.checkout-mode .field textarea {
  padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; background: var(--bg); color: var(--ink); outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
body.checkout-mode .field input:focus,
body.checkout-mode .field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
body.checkout-mode .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ----- Summary-only mode (/checkout) ----- */
body.checkout-mode.summary-only .ck-next {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 10px;
  white-space: nowrap;
}
body.checkout-mode.summary-only .ck-next:disabled {
  background: var(--bg-soft);
  color: var(--muted);
  box-shadow: none;
}
body.checkout-mode .ck-summary-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 22px 16px 60px;
}

body.checkout-mode .ck-bottom-cta {
  margin-top: 26px;
  padding: 22px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.checkout-mode .ck-bottom-summary {
  display: flex; flex-direction: column; gap: 4px;
}
body.checkout-mode .ck-bsum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
}
body.checkout-mode .ck-bsum-row:last-child { border-bottom: 0; }
body.checkout-mode .ck-bsum-row span:first-child { color: var(--ink-soft); }
body.checkout-mode .ck-bsum-row strong {
  font-family: 'JetBrains Mono', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
body.checkout-mode .ck-bsum-row.muted-row span,
body.checkout-mode .ck-bsum-row.muted-row strong { color: var(--muted); font-weight: 500; }
body.checkout-mode .ck-bsum-row.muted-row strong { font-weight: 600; }
body.checkout-mode .ck-bsum-row.muted-row small { color: var(--muted); font-size: 11px; margin-left: 4px; }
body.checkout-mode .ck-bsum-row.grand {
  margin-top: 4px; padding-top: 10px;
  border-top: 1.5px solid var(--line); border-bottom: 0;
}
body.checkout-mode .ck-bsum-row.grand span:first-child {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
body.checkout-mode .ck-bsum-row.grand strong {
  font-size: 22px; color: var(--primary-deep); letter-spacing: -.01em;
}
[data-theme="black-yellow"] body.checkout-mode .ck-bsum-row.grand strong { color: var(--primary); }

body.checkout-mode .ck-order-now {
  font-size: 17px;
  padding: 16px 24px;
  border-radius: 12px;
}

/* ----- Success-page hero (shares checkout-mode summary-only base) ----- */
body.success-mode .success-wrap-v2 { padding-top: 14px; }
body.success-mode .success-hero {
  text-align: center;
  padding: 32px 24px 28px;
  margin-bottom: 18px;
  background: linear-gradient(160deg, var(--primary-soft) 0%, var(--bg-elev) 70%);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 18px;
}
[data-theme="black-yellow"] body.success-mode .success-hero {
  background: linear-gradient(160deg, #2a2104 0%, #131313 70%);
}
body.success-mode .success-icon {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 35%, transparent);
  animation: succ-pop 480ms cubic-bezier(.2,.8,.2,1);
}
@keyframes succ-pop {
  0% { transform: scale(.4) rotate(-12deg); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
body.success-mode .success-hero h1 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(26px, 5vw, 36px); font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 6px;
}
body.success-mode .success-hero .muted {
  font-size: 14px; color: var(--ink-soft);
  max-width: 460px; margin: 0 auto 18px;
}
body.success-mode .success-meta-row {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 540px; margin: 0 auto 10px;
}
body.success-mode .success-meta-row > div {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; line-height: 1.1;
}
body.success-mode .success-meta-row span {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
body.success-mode .success-meta-row strong {
  font-family: 'JetBrains Mono', 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}
body.success-mode .success-meta-row > div:nth-child(1) strong { font-size: 13px; }
body.success-mode .success-meta-row > div:nth-child(2) strong { color: var(--primary-deep); font-size: 18px; }
[data-theme="black-yellow"] body.success-mode .success-meta-row > div:nth-child(2) strong { color: var(--primary); }
body.success-mode .success-meta-secondary {
  font-size: 13px; color: var(--muted); margin-top: 6px;
}
body.success-mode .success-meta-secondary b { color: var(--ink); font-weight: 700; }

/* Download invoice button — shown below the order summary on /success. */
body.success-mode .success-actions {
  margin-top: 20px; display: flex; justify-content: center; gap: 12px;
}
body.success-mode .success-actions .btn { text-decoration: none; }

/* =========================================================
   SHIPPING PAGE — address form + totals + pay
   ========================================================= */
body.shipping-mode { background: var(--bg); padding-bottom: 0; }

body.shipping-mode .ck-top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
body.shipping-mode .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
body.shipping-mode .brand-text .brand-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800; font-size: 17px; letter-spacing: -.01em;
}
body.shipping-mode .brand-text .brand-sub {
  font-size: 11px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
body.shipping-mode .ck-back-summary {
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 12px; border-radius: 8px; transition: background var(--t);
}
body.shipping-mode .ck-back-summary:hover { background: var(--bg-soft); color: var(--primary); }

body.shipping-mode .sh-wrap {
  max-width: 1080px; margin: 0 auto;
  padding: 22px 16px 60px;
  display: grid; grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 920px) {
  body.shipping-mode .sh-wrap { grid-template-columns: 1fr 380px; gap: 26px; }
  body.shipping-mode .sh-side { position: sticky; top: 80px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
}

body.shipping-mode .sh-form { padding: 22px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; }
body.shipping-mode .sh-form h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 20px; margin: 0 0 16px; letter-spacing: -.01em; font-weight: 800;
}
body.shipping-mode .sh-side { display: flex; flex-direction: column; gap: 14px; }
body.shipping-mode .ck-card {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
}
body.shipping-mode .ck-card h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 14px; margin: 0 0 12px;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); font-weight: 700;
}
body.shipping-mode .ck-totals-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
body.shipping-mode .ck-totals-row:last-child { border-bottom: 0; }
/* display:flex above outranks the UA [hidden] rule — without this the GST
   row showed as "GST —" on every store without a GSTIN. */
body.shipping-mode .ck-totals-row[hidden] { display: none; }
body.shipping-mode .ck-totals-row span:first-child { color: var(--ink-soft); }
body.shipping-mode .ck-totals-row strong {
  font-family: 'JetBrains Mono', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
body.shipping-mode .ck-totals-row.muted-row span,
body.shipping-mode .ck-totals-row.muted-row strong { color: var(--muted); font-weight: 500; }
body.shipping-mode .ck-totals-row.muted-row strong { font-weight: 600; }
body.shipping-mode .ck-totals-row.muted-row small { color: var(--muted); font-size: 11px; margin-left: 4px; }
body.shipping-mode .ck-totals-row.grand {
  margin-top: 6px; padding-top: 12px; border-top: 1.5px solid var(--line); border-bottom: 0;
}
body.shipping-mode .ck-totals-row.grand span:first-child {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
body.shipping-mode .ck-totals-row.grand strong {
  font-size: 22px; color: var(--primary-deep); letter-spacing: -.01em;
}
[data-theme="black-yellow"] body.shipping-mode .ck-totals-row.grand strong { color: var(--primary); }
body.shipping-mode .ck-pay { font-size: 16px; padding: 14px 24px; border-radius: 12px; }
body.shipping-mode .ck-note { font-size: 12px; color: var(--muted); text-align: center; margin: 8px 0 0; }

body.shipping-mode .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
body.shipping-mode .field label {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em;
}
body.shipping-mode .field { min-width: 0; }
body.shipping-mode .field input,
body.shipping-mode .field textarea {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 16px; /* ≥16px to stop iOS Safari zoom on focus */
  background: var(--bg); color: var(--ink); outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
body.shipping-mode .field input:focus,
body.shipping-mode .field textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
body.shipping-mode .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Courier picker — populated after a valid pincode */
body.shipping-mode .sh-courier {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
body.shipping-mode .sh-courier h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 700; margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft);
}
body.shipping-mode .sh-courier-hint, body.shipping-mode .sh-courier-sub {
  font-size: 12px; color: var(--muted); margin: 0 0 12px;
}
body.shipping-mode .sh-courier-err {
  font-size: 13px; color: #b91c1c; margin: 8px 0 0;
}
body.shipping-mode .sh-courier-loading {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-soft); color: var(--ink-soft);
  font-size: 13px;
}
body.shipping-mode .sh-courier-loading .spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--line); border-top-color: var(--primary);
  border-radius: 50%;
  animation: sh-spin 700ms linear infinite;
}
@keyframes sh-spin { to { transform: rotate(360deg); } }

body.shipping-mode .courier-list {
  display: flex; flex-direction: column; gap: 8px;
}
body.shipping-mode .courier-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 11px;
  background: var(--bg-elev);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
body.shipping-mode .courier-row:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 60%, var(--bg-elev));
}
[data-theme="black-yellow"] body.shipping-mode .courier-row:hover { background: #1a1a1a; }
body.shipping-mode .courier-row.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 18%, transparent);
}
[data-theme="black-yellow"] body.shipping-mode .courier-row.selected { background: #2a2104; }
body.shipping-mode .courier-row input[type=radio] {
  width: 18px; height: 18px; accent-color: var(--primary);
}
body.shipping-mode .courier-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
body.shipping-mode .courier-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 14px; color: var(--ink);
  letter-spacing: -.005em;
}
body.shipping-mode .courier-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted);
  letter-spacing: .03em;
}
body.shipping-mode .courier-rate {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 16px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.shipping-mode .courier-row.selected .courier-rate { color: var(--primary-deep); }
[data-theme="black-yellow"] body.shipping-mode .courier-row.selected .courier-rate { color: var(--primary); }

/* Custom-courier-per-pincode option (cc1 shipping type "O"). Distinct
   warm-orange background so buyers can tell it's a manual/regional
   courier vs the live Shiprocket/Rocketbox rows. */
body.shipping-mode .courier-row.cr-cstcr {
  background: #fff7ed;
  border-color: #fed7aa;
}
body.shipping-mode .courier-row.cr-cstcr:hover {
  background: #ffedd5;
  border-color: #fb923c;
}
body.shipping-mode .courier-row.cr-cstcr.selected {
  background: #ffedd5;
  border-color: #ea580c;
}

/* =========================================================
   MOBILE PASS — checkout + shipping (and global safety)
   ========================================================= */
html, body { overflow-x: hidden; }

@media (max-width: 600px) {
  /* ---- Checkout summary page ---- */
  body.checkout-mode .ck-top { padding: 10px 12px; gap: 10px; }
  body.checkout-mode .ck-top .ck-next {
    padding: 9px 14px; font-size: 13px; border-radius: 9px;
  }
  body.checkout-mode .ck-summary-wrap { padding: 14px 10px 40px; }
  body.checkout-mode .ck-bottom-cta { padding: 16px; gap: 12px; }
  body.checkout-mode .ck-bsum-row { font-size: 13px; }
  body.checkout-mode .ck-bsum-row.grand strong { font-size: 19px; }
  body.checkout-mode .ck-order-now { font-size: 15px; padding: 14px 18px; }
  body.checkout-mode .ck-sheets-head h2 { font-size: 19px; }
  body.checkout-mode .ck-sheets-head p { font-size: 12px; }
  body.checkout-mode .ck-sheet-card { padding: 14px; }
  body.checkout-mode .ck-sheet-head { gap: 8px; flex-wrap: wrap; }
  body.checkout-mode .ck-sheet-head h3 { font-size: 16px; }

  /* Mini-sheet inside checkout — fits on a phone screen at one glance.
     Force fixed layout, drop sticky position, and shrink padding so the
     full matrix is visible without horizontal scrolling. */
  body.checkout-mode .ck-sheet-head { padding: 12px 14px 10px; flex-wrap: wrap; }
  body.checkout-mode .ck-sheet-scroll { overflow-x: hidden; }
  body.checkout-mode .ck-sheet { table-layout: fixed; width: 100%; }
  body.checkout-mode .ck-sheet thead th {
    min-width: 0; width: auto; padding: 8px 2px; font-size: 11px;
    position: static !important; /* drop sticky to free up space */
  }
  body.checkout-mode .ck-sheet thead th.colour-corner {
    min-width: 0; width: 28%; padding: 8px 6px; font-size: 10px; text-align: left;
  }
  body.checkout-mode .ck-sheet tbody th.colour {
    min-width: 0; width: 28%; padding: 8px 6px; font-size: 12px;
    position: static !important;
  }
  body.checkout-mode .ck-sheet tbody th.colour .colour-inner {
    gap: 6px; align-items: center; white-space: normal;
  }
  body.checkout-mode .ck-sheet tbody th.colour .swatch { width: 12px; height: 12px; flex-shrink: 0; }
  body.checkout-mode .ck-sheet tbody th.colour .cname {
    /* Wrap multi-word colours instead of truncating with ellipsis. */
    white-space: normal; word-break: break-word;
    font-size: 12px; line-height: 1.15;
    flex: 1; min-width: 0;
  }
  body.checkout-mode .ck-sheet tbody td { padding: 8px 2px; font-size: 13px; }

  /* ---- Shipping/payment page ---- */
  body.shipping-mode .ck-top { padding: 10px 12px; gap: 10px; }
  body.shipping-mode .ck-back-summary {
    font-size: 0; padding: 8px; /* hide label, keep tap target */
  }
  body.shipping-mode .ck-back-summary::after {
    content: '←'; font-size: 18px; line-height: 1;
  }
  body.shipping-mode .sh-wrap { padding: 14px 10px 40px; gap: 14px; }
  body.shipping-mode .sh-form { padding: 16px; border-radius: 14px; }
  body.shipping-mode .sh-form h2 { font-size: 18px; margin-bottom: 12px; }
  body.shipping-mode .ck-card { padding: 14px; border-radius: 14px; }
  body.shipping-mode .ck-card h3 { font-size: 12px; margin-bottom: 10px; }
  body.shipping-mode .field { margin-bottom: 10px; }
  body.shipping-mode .field label { font-size: 11px; }
  body.shipping-mode .field input,
  body.shipping-mode .field textarea { padding: 10px 12px; }
  body.shipping-mode .field-row { gap: 8px; }
  body.shipping-mode .ck-totals-row { font-size: 13px; }
  body.shipping-mode .ck-totals-row.grand strong { font-size: 19px; }
  body.shipping-mode .ck-pay { font-size: 15px; padding: 13px 20px; }

  /* Courier rows — keep single line, smaller type, wrap meta. */
  body.shipping-mode .courier-row { padding: 10px 12px; gap: 10px; }
  body.shipping-mode .courier-name { font-size: 13px; }
  body.shipping-mode .courier-meta { font-size: 10px; }
  body.shipping-mode .courier-rate { font-size: 15px; }
}

@media (max-width: 380px) {
  body.shipping-mode .field-row { grid-template-columns: 1fr; gap: 6px; }
  body.shipping-mode .sh-form { padding: 14px; }
  body.shipping-mode .ck-card { padding: 12px; }
}

/* =========================================================
   BIKE DELIVERY card + map-pin modal
   ========================================================= */
body.shipping-mode .sh-bike { margin-top: 18px; }
body.shipping-mode .bike-card {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 14%, var(--bg-elev)) 0%,
    var(--bg-elev) 100%);
  border: 1.5px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: 14px;
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px color-mix(in srgb, var(--primary) 12%, transparent);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
body.shipping-mode .bike-card:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 10px 28px color-mix(in srgb, var(--primary) 18%, transparent);
}
body.shipping-mode .bike-card.picked {
  border-color: var(--primary);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 22%, var(--bg-elev)) 0%,
    var(--bg-elev) 100%);
}
body.shipping-mode .bike-icon {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--primary-ink, #fff);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 35%, transparent);
}
[data-theme="black-yellow"] body.shipping-mode .bike-icon { color: #1a1a00; }
body.shipping-mode .bike-text {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
body.shipping-mode .bike-title {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800; font-size: 15px; color: var(--ink);
  letter-spacing: -.01em;
}
body.shipping-mode .bike-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; color: var(--primary-deep);
  background: color-mix(in srgb, var(--primary) 22%, var(--bg));
  padding: 2px 7px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .04em;
}
[data-theme="black-yellow"] body.shipping-mode .bike-badge { color: var(--primary); background: #2a2104; }
body.shipping-mode .bike-sub {
  font-size: 12px; color: var(--ink-soft); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
body.shipping-mode .bike-cta {
  flex-shrink: 0;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--primary-deep);
  letter-spacing: -.005em;
}
[data-theme="black-yellow"] body.shipping-mode .bike-cta { color: var(--primary); }

body.shipping-mode .bike-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 0; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
body.shipping-mode .bike-divider::before,
body.shipping-mode .bike-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* =========================================================
   DELIVERY-OPTION TABS — sits below the address form. Three pill tabs:
   Courier (default), Train, Same-day. Same-day auto-enables only for
   NCR pincodes. Active tab content lives in .sh-tab-panel below.
   ========================================================= */
body.shipping-mode .sh-deliv { margin-top: 22px; }
body.shipping-mode .sh-deliv-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 10px;
}
body.shipping-mode .sh-tabs {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px; margin-bottom: 14px;
}
body.shipping-mode .sh-tab {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer; font: inherit; text-align: left;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
body.shipping-mode .sh-tab:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ink) 25%, var(--line));
  transform: translateY(-1px);
}
body.shipping-mode .sh-tab.on {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--bg-elev));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 14%, transparent);
}
body.shipping-mode .sh-tab:disabled { cursor: not-allowed; opacity: .55; }
body.shipping-mode .sh-tab-ic {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--ink-soft);
}
body.shipping-mode .sh-tab.on .sh-tab-ic {
  background: var(--primary); color: var(--primary-ink, #fff);
}
[data-theme="black-yellow"] body.shipping-mode .sh-tab.on .sh-tab-ic { color: #1a1a00; }
body.shipping-mode .sh-tab-tx {
  display: flex; flex-direction: column; line-height: 1.2; min-width: 0;
}
body.shipping-mode .sh-tab-nm {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.shipping-mode .sh-tab-ht {
  font-size: 10.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.shipping-mode .sh-tab-panel { display: none; }
body.shipping-mode .sh-tab-panel.on { display: block; }
body.shipping-mode .sh-tab-panel[hidden] { display: none !important; }
@media (max-width: 520px) {
  body.shipping-mode .sh-tabs { gap: 6px; }
  body.shipping-mode .sh-tab {
    flex-direction: column; align-items: center; text-align: center;
    padding: 10px 6px; gap: 6px; min-width: 0;
  }
  body.shipping-mode .sh-tab-ic { width: 32px; height: 32px; }
  body.shipping-mode .sh-tab-ic svg { width: 16px; height: 16px; }
  body.shipping-mode .sh-tab-tx { align-items: center; width: 100%; }
  body.shipping-mode .sh-tab-nm { font-size: 12.5px; white-space: normal; }
  body.shipping-mode .sh-tab-ht {
    font-size: 9.5px; line-height: 1.25;
    white-space: normal; text-overflow: clip; overflow: visible;
  }
}

/* Courier is what 92% of paid orders use, so it stands alone up top; Train /
   Same-day / Pickup sit behind a "More delivery options" disclosure. */
body.shipping-mode .sh-tabs-primary { grid-template-columns: 1fr; margin-bottom: 10px; }
body.shipping-mode .sh-tabs-more { grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
body.shipping-mode .sh-tabs-more[hidden] { display: none; }
body.shipping-mode .sh-more-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 2px;
  background: none; border: 0;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--primary-deep);
  cursor: pointer;
}
[data-theme="black-yellow"] body.shipping-mode .sh-more-toggle { color: var(--primary); }
body.shipping-mode .sh-more-toggle svg { transition: transform .18s ease; }
body.shipping-mode .sh-more-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
body.shipping-mode .sh-more-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 520px) {
  /* The lone courier tab keeps the roomy row layout; only the 3-up group
     below stacks icon-over-text. */
  body.shipping-mode .sh-tabs-primary .sh-tab {
    flex-direction: row; align-items: center; text-align: left; padding: 10px 12px; gap: 9px;
  }
  body.shipping-mode .sh-tabs-primary .sh-tab-tx { align-items: flex-start; }
  body.shipping-mode .sh-tabs-primary .sh-tab-nm { font-size: 13px; }
  body.shipping-mode .sh-tabs-primary .sh-tab-ht { font-size: 10.5px; }
}
/* Store in test mode with no WhatsApp / phone: nothing to pay, nobody to
   reach. The note turns into a plain warning under the disabled button. */
body.shipping-mode .ck-note.ck-note-warn {
  color: var(--ink);
  background: color-mix(in srgb, #f59e0b 12%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--line));
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
}

/* =========================================================
   TRAIN card — Superfast 1–2 day delivery (prepaid pickup tier)
   Differentiated from bike with an indigo / steel accent so the two
   hero cards don't compete; train is a cool-blue express-transit feel.
   ========================================================= */
body.shipping-mode .sh-train { margin-top: 10px; }
body.shipping-mode .train-card {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #eef2ff 0%, var(--bg-elev) 100%);
  border: 1.5px solid #c7d2fe;
  border-radius: 14px;
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(79,70,229,.10);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
body.shipping-mode .train-card:hover {
  transform: translateY(-1px);
  border-color: #818cf8;
  box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 10px 28px rgba(79,70,229,.18);
}
body.shipping-mode .train-card.picked {
  border-color: #4f46e5;
  background: linear-gradient(135deg, #e0e7ff 0%, var(--bg-elev) 100%);
}
body.shipping-mode .train-icon {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #4f46e5; color: #fff;
  box-shadow: 0 4px 10px rgba(79,70,229,.35);
}
body.shipping-mode .train-text {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
body.shipping-mode .train-title {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800; font-size: 15px; color: var(--ink);
  letter-spacing: -.01em;
}
body.shipping-mode .train-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; color: #3730a3;
  background: #e0e7ff;
  padding: 2px 7px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .04em;
}
body.shipping-mode .train-sub {
  font-size: 12px; color: var(--ink-soft); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
body.shipping-mode .train-cta {
  flex-shrink: 0;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  color: #4f46e5;
  letter-spacing: -.005em;
}

/* Train tab panel — the panel itself is the card frame.
   .sh-tab-panel.on already provides display:block; the rest of these rules
   skin it with a subtle indigo-tinted card identity. */
body.shipping-mode .train-form {
  margin-top: 8px;
  padding: 16px;
  background: linear-gradient(180deg, #eef2ff 0%, var(--bg-elev) 60%);
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(79,70,229,.08);
}
body.shipping-mode .train-form > * + * { margin-top: 12px; }

/* Header — train icon + title + sub */
body.shipping-mode .train-form-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #c7d2fe;
}
body.shipping-mode .train-form-ic {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #4f46e5; color: #fff;
  box-shadow: 0 4px 10px rgba(79,70,229,.30);
}
body.shipping-mode .train-form-headtx {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
body.shipping-mode .train-form-headttl {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800; font-size: 15px; color: #1e1b4b;
  letter-spacing: -.01em; line-height: 1.2;
}
body.shipping-mode .train-form-headsub {
  font-size: 11.5px; color: #4338ca; line-height: 1.3;
}

/* Input block — label + icon-prefixed input */
body.shipping-mode .train-input-block {
  display: flex; flex-direction: column; gap: 6px;
}
body.shipping-mode .train-form-lbl {
  display: block;
  font-size: 11px; font-weight: 700; color: #4338ca;
  text-transform: uppercase; letter-spacing: .06em;
}
body.shipping-mode .train-input-wrap {
  position: relative;
  display: block;
}
body.shipping-mode .train-input-ic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: #6366f1;
  pointer-events: none;
}
body.shipping-mode .train-form input {
  width: 100%; padding: 12px 14px 12px 36px;
  border: 1.5px solid #c7d2fe; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  background: #fff;
  outline: none; transition: border-color var(--t), box-shadow var(--t);
}
body.shipping-mode .train-form input::placeholder { color: #94a3b8; }
body.shipping-mode .train-form input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79,70,229,.18);
}

body.shipping-mode .train-hint {
  font-size: 12px; color: var(--muted); margin: 0; line-height: 1.45;
}

/* Rate strip — indigo accent */
body.shipping-mode .train-rate-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; background: #fff;
  border: 1px solid #c7d2fe; border-radius: 10px;
  border-left: 3px solid #4f46e5;
}
body.shipping-mode .train-rate-label {
  font-size: 12.5px; color: #3730a3; font-weight: 600;
}
body.shipping-mode .train-rate-amount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px; font-weight: 800; color: #312e81;
  font-variant-numeric: tabular-nums;
}

/* Confirm CTA — indigo, full-width */
body.shipping-mode .train-confirm {
  background: #4f46e5; color: #fff;
  padding: 13px 16px; font-size: 14px; font-weight: 700;
  border-radius: 10px; border: 0;
  box-shadow: 0 4px 12px rgba(79,70,229,.28);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
body.shipping-mode .train-confirm:not(:disabled):hover {
  background: #4338ca; transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(79,70,229,.36);
}
body.shipping-mode .train-confirm:disabled {
  background: #c7d2fe; color: #6366f1;
  box-shadow: none; cursor: not-allowed;
}

@media (max-width: 520px) {
  body.shipping-mode .train-form { padding: 14px; }
  body.shipping-mode .train-form-ic { width: 32px; height: 32px; }
  body.shipping-mode .train-form-headttl { font-size: 14px; }
  body.shipping-mode .train-form-headsub { font-size: 11px; }
  body.shipping-mode .train-form input { font-size: 13.5px; padding: 11px 12px 11px 34px; }
  body.shipping-mode .train-rate-amount { font-size: 16px; }
}

body.shipping-mode .train-switch {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 6px 0;
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted);
}
body.shipping-mode .train-switch:hover { color: var(--ink); }

/* When train is picked, dim the bike card + hide the courier list (parallel
   to bike's behaviour). The .train-mode flag is added to .sh-form by
   shipping.js when the buyer confirms a station. */
body.shipping-mode .sh-form.train-mode .sh-bike,
body.shipping-mode .sh-form.train-mode #shAddrExtra,
body.shipping-mode .sh-form.train-mode .sh-courier { display: none; }
body.shipping-mode .sh-form.train-mode .train-form { display: none; }
body.shipping-mode .sh-form.train-mode .train-switch { display: inline-flex; }
body.shipping-mode .sh-form.train-mode .train-card { cursor: default; }
body.shipping-mode .sh-form.train-mode .train-card.picked { pointer-events: none; }

/* ----- Map modal ----- */
.map-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: stretch; justify-content: center;
}
.map-modal[aria-hidden="false"] { display: flex; }
.map-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: map-fade .2s ease-out;
}
@keyframes map-fade { from { opacity: 0; } to { opacity: 1; } }
.map-modal-panel {
  position: relative;
  width: 100%; max-width: 720px; height: 100%; max-height: 100%;
  margin: 0 auto;
  background: var(--bg, #fff);
  display: flex; flex-direction: column;
  animation: map-slide .25s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 25px 60px rgba(0,0,0,.4);
}
@keyframes map-slide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 720px) {
  .map-modal { padding: 24px; }
  .map-modal-panel { height: min(620px, 100%); border-radius: 18px; overflow: hidden; }
}
.map-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  background: var(--bg, #fff);
}
.map-modal-head h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 17px; font-weight: 800; margin: 0 0 2px;
  letter-spacing: -.01em;
}
.map-modal-head .muted { font-size: 12px; color: var(--muted, #94a3b8); margin: 0; }
.map-modal-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--bg-soft, #f1f5f9);
  font-size: 22px; line-height: 1; color: var(--ink, #0f172a);
  cursor: pointer; transition: background var(--t, 150ms ease);
}
.map-modal-close:hover { background: var(--line, #e5e7eb); }
.map-modal-body { position: relative; flex: 1; min-height: 280px; }
.map-canvas { position: absolute; inset: 0; }
.map-canvas .leaflet-container { width: 100%; height: 100%; }
.map-locate-fab {
  position: absolute; right: 14px; bottom: 14px; z-index: 500;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg, #fff); color: var(--primary, #0d9488);
  border: 1px solid var(--line, #e5e7eb);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15,23,42,.18);
  transition: transform var(--t, 150ms ease);
}
.map-locate-fab:hover { transform: scale(1.06); }
.map-locate-fab.locating { animation: map-pulse 1.2s ease-in-out infinite; }
@keyframes map-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.map-modal-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--line, #e5e7eb);
  background: var(--bg, #fff);
}
.map-addr { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.map-addr-label {
  font-size: 10px; color: var(--muted, #94a3b8);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.map-addr strong {
  font-size: 13px; font-weight: 600; color: var(--ink, #0f172a);
  display: flex; flex-direction: column; gap: 4px;
  line-height: 1.35;
}
.map-svc {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 12px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: -.005em;
}
.map-svc-bike   { background: color-mix(in srgb, #16a34a 18%, transparent); color: #15803d; }
.map-svc-porter { background: color-mix(in srgb, #ea580c 16%, transparent); color: #c2410c; }
.map-svc-out    { background: color-mix(in srgb, #b91c1c 14%, transparent); color: #b91c1c; }
.map-addr-detail {
  font-size: 12px; font-weight: 500; color: var(--ink-soft, #475569);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.map-confirm { padding: 11px 18px; font-size: 14px; border-radius: 10px; flex-shrink: 0; }
.map-confirm:disabled { opacity: .5; cursor: not-allowed; }

/* Custom Leaflet pin — uses tenant theme colour. */
.bike-pin {
  width: 36px; height: 50px; position: relative;
  display: flex; align-items: flex-start; justify-content: center;
}
.bike-pin::after {
  content: ''; position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
  transform: translateX(-50%) rotate(-45deg);
  background: var(--primary, #0d9488);
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(15,23,42,.25);
}
.bike-pin::before {
  content: ''; position: absolute; left: 50%; top: 9px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; transform: translateX(-50%);
  z-index: 1;
}

/* When the buyer picks bike/Porter, hide the now-redundant address-detail
   fields and the courier list. Pin already encodes the address. */
body.shipping-mode .sh-form.bike-mode #shAddrExtra,
body.shipping-mode .sh-form.bike-mode #shCourier,
body.shipping-mode .sh-form.bike-mode .bike-divider { display: none; }
body.shipping-mode .sh-form.bike-mode .sh-bike { margin-top: 0; }
body.shipping-mode .muted-inline { color: var(--muted); font-weight: 400; font-size: 11px; }

/* Switch-back link — shown only when bike/Porter is picked, so the buyer
   has a clear way to abandon same-day and go back to the courier list. */
body.shipping-mode .bike-switch {
  display: none;
  margin-top: 12px;
  width: 100%;
  align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: 10px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
body.shipping-mode .bike-switch:hover {
  background: var(--bg-elev);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
}
body.shipping-mode .sh-form.bike-mode .bike-switch { display: inline-flex; }

/* ----- Map search overlay ----- */
.map-search {
  position: absolute; top: 12px; left: 12px; right: 12px;
  z-index: 500; max-width: 460px;
}
.map-search-input {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--bg, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15,23,42,.18);
}
.map-search-icon { color: var(--muted, #94a3b8); flex-shrink: 0; }
.map-search-input input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font: inherit; font-size: 14px; color: var(--ink, #0f172a);
  padding: 4px 0;
}
.map-search-input input::placeholder { color: var(--muted, #94a3b8); }
.map-search-clear {
  width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: var(--bg-soft, #f1f5f9);
  font-size: 16px; line-height: 1; color: var(--ink-soft, #475569);
  cursor: pointer;
}
/* Google Places autocomplete dropdown — must float above the modal. */
.pac-container {
  z-index: 10000 !important;
  border-radius: 12px;
  border: 1px solid var(--line, #e5e7eb);
  box-shadow: 0 10px 26px rgba(15,23,42,.18);
  margin-top: 4px;
  font-family: inherit;
}
.pac-item { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.pac-item-query { font-size: 13px; font-weight: 700; }
.pac-matched { font-weight: 800; }

.map-search-results {
  margin-top: 6px;
  background: var(--bg, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(15,23,42,.18);
  max-height: 240px; overflow-y: auto;
}
.map-search-result {
  width: 100%; display: block; text-align: left;
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line, #e5e7eb);
  background: transparent; cursor: pointer;
  font: inherit;
}
.map-search-result:last-child { border-bottom: 0; }
.map-search-result:hover { background: var(--bg-soft, #f1f5f9); }
.map-search-name {
  display: block;
  font-weight: 700; font-size: 13px; color: var(--ink, #0f172a);
  letter-spacing: -.005em;
}
.map-search-detail {
  display: block;
  font-size: 11px; color: var(--muted, #94a3b8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 1px;
}
.map-search-empty {
  padding: 14px 16px;
  font-size: 13px; color: var(--ink-soft, #475569); text-align: left;
  line-height: 1.5;
}
.map-search-empty strong { color: var(--ink, #0f172a); font-weight: 700; }
.map-search-empty em {
  font-style: normal; font-weight: 600; color: var(--primary-deep, #0f766e);
  background: color-mix(in srgb, var(--primary, #0d9488) 12%, transparent);
  padding: 1px 5px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
}
.map-search-empty-hint { margin-top: 6px; font-size: 12px; color: var(--muted, #94a3b8); }

@media (max-width: 600px) {
  body.shipping-mode .bike-card { padding: 12px; gap: 12px; }
  body.shipping-mode .bike-icon { width: 38px; height: 38px; border-radius: 10px; }
  body.shipping-mode .bike-title { font-size: 14px; flex-wrap: wrap; row-gap: 4px; }
  body.shipping-mode .bike-badge { font-size: 9px; padding: 2px 6px; }
  body.shipping-mode .bike-sub { font-size: 12px; -webkit-line-clamp: 3; }
  body.shipping-mode .bike-cta { display: none; } /* whole card is the tap target */
  .map-modal-head { padding: 12px 14px; }
  .map-modal-head h3 { font-size: 16px; }
  .map-modal-head .muted { display: none; }
  .map-modal-foot { padding: 12px 14px; flex-direction: column; align-items: stretch; gap: 10px; }
  .map-confirm { width: 100%; }
  .map-search { top: 10px; left: 10px; right: 10px; }
  .map-search-input { padding: 7px 9px; }
  .map-search-input input { font-size: 13px; }
  .map-locate-fab { right: 12px; bottom: 12px; width: 40px; height: 40px; }
}

/* =========================================================
   Apex demo sign-up banner — only renders when the server
   tags <body> with .is-apex-demo (the mrch.in apex). Every
   real tenant subdomain / custom domain keeps a clean
   storefront. Lives in m5.html only, so /shipping, /checkout,
   /success stay banner-free and feel like real purchases.
   ========================================================= */
.apex-cta-banner { display: none; }
body.is-apex-demo .apex-cta-banner { display: flex; }
.apex-cta-banner {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: linear-gradient(90deg, #c2410c 0%, #ea580c 100%);
  color: #fff;
  padding: 10px 14px;
  font-size: 14px; font-weight: 600;
  align-items: center; justify-content: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  flex-wrap: wrap;
}
.apex-cta-banner-text { line-height: 1.3; }
.apex-cta-banner-btn {
  background: #fff; color: #c2410c;
  padding: 5px 12px; border-radius: 6px;
  text-decoration: none; font-weight: 700;
  font-size: 13px;
  transition: transform 0.15s ease;
}
.apex-cta-banner-btn:hover { transform: scale(1.04); }
@media (max-width: 640px) {
  .apex-cta-banner { font-size: 13px; gap: 8px; padding: 8px 12px; }
  .apex-cta-banner-btn { font-size: 12px; padding: 5px 10px; }
  .apex-cta-banner-text { flex: 1 1 100%; text-align: center; }
}

/* =========================================================
   Public self-serve signup page (/signup)
   ========================================================= */
body.signup-mode {
  background: linear-gradient(135deg, #f7fafa 0%, #e6f7f4 100%);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
}
.signup-main {
  width: 100%; max-width: 480px;
  background: #fff; border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
  padding: 32px 28px;
}
.signup-head { text-align: center; margin-bottom: 24px; }
.signup-mark {
  display: inline-block; width: 44px; height: 44px;
  border-radius: 12px; background: linear-gradient(135deg,#0d9488,#14b8a6);
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(13,148,136,.25);
}
.signup-head h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 8px;
}
.signup-tagline {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted);
}
.signup-step-note {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: #f0fdfa; color: #0f766e;
  font-size: 13px; line-height: 1.5;
}
.signup-step-note a {
  color: #0d9488; text-decoration: underline; font-weight: 600;
}
.signup-resend { margin: 0; font-size: 13px; text-align: center; }
.signup-resend a { color: #0d9488; text-decoration: underline; font-weight: 600; }
.signup-resend a.disabled {
  color: #94a3a3; cursor: not-allowed; pointer-events: none; text-decoration: none;
}
.signup-signed-in {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: #f0fdfa; color: #0f766e;
  font-size: 13px;
}
.signup-switch { margin: 16px 0 0; font-size: 13px; text-align: center; }
.signup-switch a { color: #64748b; text-decoration: underline; }
.signup-form { display: flex; flex-direction: column; gap: 14px; }
/* Override the .signup-form display:flex so the [hidden] attribute keeps
   the inactive step out of the layout — without this every step stacks. */
.signup-form[hidden] { display: none; }
/* Honeypot: visually invisible + off-screen so humans never see it; bots
   blindly filling every <input> fill it and the server rejects them. */
.signup-honey {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none;
}
.signup-row { display: flex; flex-direction: column; gap: 6px; }
.signup-row > span {
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.signup-row > span small { font-weight: 500; color: var(--muted); margin-left: 4px; }
.signup-row input {
  padding: 11px 14px; border-radius: 10px;
  border: 1px solid #d6e0e0; background: #fff;
  font-size: 15px; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.signup-row input:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}
.signup-cta {
  margin-top: 6px;
  padding: 13px 24px; border-radius: 10px; border: 0;
  background: #0d9488; color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.signup-cta:hover { background: #0f766e; }
.signup-cta:active { transform: translateY(1px); }
.signup-cta:disabled { background: #94a3a3; cursor: not-allowed; transform: none; }
.signup-msg { margin: 4px 0 0; font-size: 13px; min-height: 18px; }
.signup-msg.err { color: #b91c1c; }
.signup-msg.ok { color: #0f766e; }

/* Inline helper text under a signup field (e.g. "shown on your website…"). */
.signup-help { font-size: 12px; color: var(--muted); line-height: 1.4; }
.signup-terms { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--muted); line-height: 1.45; margin: 4px 0 2px; cursor: pointer; }
.signup-terms input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; }
.signup-terms a { color: inherit; text-decoration: underline; }

/* Store-URL input with inline suffix (".mrch.in") + live availability status. */
.signup-sub-wrap {
  display: flex; align-items: stretch;
  border: 1px solid #d6e0e0; border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.signup-sub-wrap:focus-within {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}
.signup-sub-wrap input {
  flex: 1; min-width: 0;
  padding: 11px 12px; border: 0; outline: none;
  font-size: 15px; color: var(--ink); background: transparent;
}
.signup-sub-suffix {
  display: flex; align-items: center;
  padding: 0 14px;
  background: #f1f5f4; color: #475569;
  font-size: 14px; font-weight: 600;
  border-left: 1px solid #e1e8e8;
  white-space: nowrap;
}
.signup-sub-status {
  font-size: 12px; min-height: 16px; line-height: 1.4;
  display: block;
}
.signup-sub-status.ok      { color: #0f766e; font-weight: 600; }
.signup-sub-status.err     { color: #b91c1c; font-weight: 600; }
.signup-sub-status.pending { color: var(--muted); }
.signup-sub-status.info    { color: var(--muted); }

.signup-success { text-align: center; }
.signup-success h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px; font-weight: 800; margin: 0 0 8px;
}
.signup-success > p {
  margin: 0 0 20px; font-size: 14px; color: var(--muted);
}
/* 5-min tour card — used on /signup top to nudge first-timers into
   the YouTube walkthrough. Thumbnail-first design keeps it lightweight
   (no iframe / autoplay), with a play badge over the still image. Sits
   above the email form so visitors see it before deciding. */
/* The [hidden] HTML attribute would normally trigger display:none from
   the user-agent stylesheet, but .tour-card sets display:flex which has
   higher specificity. Without this override the JS hide on success-page
   render is silently ignored — see signup.js renderSuccess(). */
.tour-card[hidden] { display: none !important; }
.tour-card {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  padding: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.tour-card:hover {
  border-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -10px rgba(194, 65, 12, .4);
}
.tour-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 96px; height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #1f2937;
}
.tour-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tour-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  background: rgba(0,0,0,0.3);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.tour-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.3;
}
.tour-text strong {
  font-size: 14px; font-weight: 700; color: #7c2d12;
}
.tour-sub {
  font-size: 12px; color: var(--muted);
}
.tour-arrow {
  flex: 0 0 auto;
  font-size: 20px; font-weight: 700; color: #c2410c;
  padding-right: 4px;
  transition: transform .15s ease;
}
.tour-card:hover .tour-arrow { transform: translateX(3px); }
@media (max-width: 480px) {
  .tour-thumb { width: 80px; height: 48px; }
  .tour-text strong { font-size: 13px; }
  .tour-sub { font-size: 11px; }
}

/* Big tappable cards on the success page — feel like buttons, not links. */
.big-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-bottom: 12px;
  border-radius: 14px; text-decoration: none;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
}
.big-card-store {
  background: #fff7ed; border-color: #fed7aa;
}
.big-card-store:hover {
  background: #ffedd5; border-color: #c2410c;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(194, 65, 12, .35);
}
.big-card-dash {
  background: #ecfdf5; border-color: #99f6e4;
}
.big-card-dash:hover {
  background: #d1fae5; border-color: #0d9488;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(13, 148, 136, .35);
}
/* Success-page tour card — YouTube red palette so it visually
   reads as "video" and doesn't compete with the store/dash CTAs. */
.big-card-tour {
  background: #fef2f2; border-color: #fecaca;
}
.big-card-tour:hover {
  background: #fee2e2; border-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(220, 38, 38, .35);
}
.big-card-tour .big-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: #dc2626; color: #fff;
  border-radius: 50%;
  font-size: 14px;
}
.big-card-icon {
  font-size: 28px; line-height: 1;
  flex: 0 0 auto;
}
.big-card-body { flex: 1; min-width: 0; text-align: left; }
.big-card-title {
  font-size: 16px; font-weight: 700; color: var(--ink);
  margin-bottom: 2px;
}
.big-card-sub {
  font-size: 13px; color: var(--muted);
}
.big-card-arrow {
  font-size: 22px; font-weight: 700; color: var(--muted);
  flex: 0 0 auto;
  transition: transform .15s ease, color .15s ease;
}
.big-card:hover .big-card-arrow {
  transform: translateX(3px);
  color: var(--ink);
}
.signup-tip {
  margin: 16px 0 0;
  padding: 10px 12px; border-radius: 10px;
  background: #fef9c3; color: #854d0e;
  font-size: 13px; text-align: left;
}


/* ---- Per-variant camera column + photo lightbox (printer-supply only) ---- */
body.m5-mode .sheet-wrap.m5-has-cam .qcell { font-size: 14px; }
body.m5-mode .m5-cam-head {
  background: var(--ink); color: var(--bg);
  text-align: center; font-size: 11px; letter-spacing: .04em;
}
body.m5-mode .m5-cam-cell {
  text-align: center; vertical-align: middle;
  border-left: 1px dashed var(--line);
  background: var(--bg-soft);
  padding: 2px;
}
body.m5-mode .m5-cam-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 3px; width: 38px; height: 38px;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-elev); color: var(--ink);
  cursor: pointer; transition: all var(--t);
  position: relative;
}
body.m5-mode .m5-cam-btn:hover {
  border-color: var(--primary); color: var(--primary-deep);
  transform: scale(1.05);
}
body.m5-mode .m5-cam-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--primary); color: var(--primary-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; line-height: 16px;
}
body.m5-mode .m5-cam-empty {
  color: var(--muted); font-size: 14px; opacity: .4;
}

/* Lightbox modal */
/* ---- Size chart ---- */
body.m5-mode .m5-size-btn[hidden] { display: none; }
body.m5-mode .m5-size-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-elev);
  color: var(--ink-soft); cursor: pointer;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  align-self: center; flex-shrink: 0;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
body.m5-mode .m5-size-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--bg-soft); }
body.m5-mode .m5-size-btn:active { transform: scale(.96); }

body.m5-mode .sc-modal[hidden] { display: none; }
body.m5-mode .sc-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
body.m5-mode .sc-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
}
body.m5-mode .sc-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 640px; max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--bg-elev); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  overflow: hidden;
}
body.m5-mode .sc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
body.m5-mode .sc-head h3 {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.m5-mode .sc-close {
  width: 32px; height: 32px; border: 0; background: transparent;
  font-size: 24px; line-height: 1; color: var(--muted);
  cursor: pointer; border-radius: 8px;
}
body.m5-mode .sc-close:hover { background: var(--bg-soft); color: var(--ink); }
body.m5-mode .sc-body { padding: 14px 18px 20px; overflow-y: auto; }
body.m5-mode .sc-title { font-weight: 700; text-align: center; margin: 6px 0 10px; font-size: 15px; color: var(--ink); }
/* The scroll lives on the wrapper, so a wide chart (kids = 8 columns) slides
   sideways on a phone instead of squashing its columns. */
body.m5-mode .sc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.m5-mode .sc-tbl {
  width: max-content; min-width: 100%;
  border-collapse: collapse; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
body.m5-mode .sc-tbl th, body.m5-mode .sc-tbl td {
  border: 1px solid var(--line); padding: 7px 6px; text-align: center; color: var(--ink);
}
body.m5-mode .sc-tbl thead th { background: var(--primary); color: var(--primary-ink, #fff); font-weight: 700; }
body.m5-mode .sc-tbl td.sc-rowlbl { font-weight: 700; text-align: left; padding-left: 10px; background: var(--bg-soft); white-space: nowrap; }
body.m5-mode .sc-unit { text-align: center; color: var(--muted); font-size: 11px; margin: 8px 0 2px; }
body.sc-open { overflow: hidden; }

/* ---- Chat on WhatsApp (floating) ---- */
/* Sits above the sticky order bar so it never covers Review/Checkout, and
   above the iPhone home indicator. Hidden while a modal is open. */
body.m5-mode .m5-wa-float[hidden] { display: none; }
body.m5-mode .m5-wa-float {
  position: fixed; right: 16px;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 6px 18px rgba(37, 211, 102, .45), 0 2px 6px rgba(0,0,0,.2);
  z-index: 45;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.m5-mode .m5-wa-float:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(37,211,102,.55), 0 2px 8px rgba(0,0,0,.25); }
body.m5-mode .m5-wa-float:active { transform: scale(.96); }
body.m5-mode .m5-wa-float:focus-visible { outline: 3px solid #128C7E; outline-offset: 3px; }
body.m5-mode.vph-open .m5-wa-float,
body.m5-mode.sc-open .m5-wa-float { display: none; }
@media (max-width: 420px) {
  body.m5-mode .m5-wa-float { width: 50px; height: 50px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  body.m5-mode .m5-wa-float { transition: none; }
}

body.m5-mode .vph-modal[hidden] { display: none; }
body.m5-mode .vph-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
body.m5-mode .vph-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
}
body.m5-mode .vph-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 640px; max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--bg-elev); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  overflow: hidden;
}
body.m5-mode .vph-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
body.m5-mode .vph-head h3 {
  margin: 0; font-size: 15px; font-weight: 700;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.m5-mode .vph-close {
  width: 32px; height: 32px; border: 0; background: transparent;
  font-size: 24px; line-height: 1; color: var(--muted);
  cursor: pointer; border-radius: 8px;
}
body.m5-mode .vph-close:hover { background: var(--bg-soft); color: var(--ink); }
body.m5-mode .vph-body {
  position: relative; flex: 1; min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  background: #0a0a0a; padding: 12px;
}
body.m5-mode .vph-img {
  max-width: 100%; max-height: 60vh;
  object-fit: contain; border-radius: 6px;
}
body.m5-mode .vph-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 999px; border: 0;
  background: rgba(255,255,255,.92); color: var(--ink);
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
}
body.m5-mode .vph-nav:hover { background: #fff; }
body.m5-mode .vph-nav.prev { left: 18px; }
body.m5-mode .vph-nav.next { right: 18px; }
body.m5-mode .vph-nav:disabled { opacity: 0; pointer-events: none; }
body.m5-mode .vph-foot {
  padding: 10px 18px; text-align: center;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
body.m5-mode .vph-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  color: var(--muted); letter-spacing: .04em;
}
body.vph-open { overflow: hidden; }


/* ---------- PER-SIZE PRICE LABELS ---------- */
/* sale91's cost is not flat across sizes, so a store may price each size
   separately. Wherever a size column can carry its own rate — the storefront
   sheet, the /matrix variant, the checkout recap and the order receipt — the
   rate prints under the size name so the buyer can reconcile the total. */
.size-head-price {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
body.checkout-mode .ck-sheet thead th.size-head .size-head-price,
body.success-mode .ck-sheet thead th.size-head .size-head-price { color: var(--muted); }