/* ==========================================================================
   Bhaidry Storefront — Centralized Design System
   Every colour, size, radius, shadow and component style lives here.
   Change the tokens in :root to re-theme the whole store.
   ========================================================================== */

:root {
  /* Brand */
  --color-primary: #9a3412;          /* copper */
  --color-primary-strong: #7c2d12;
  --color-primary-soft: #fdeee4;
  --color-on-primary: #ffffff;

  /* Surfaces & text */
  --color-bg: #f4f2ee;
  --color-surface: #ffffff;
  --color-surface-muted: #eeeae4;
  --color-border: #e2dcd3;
  --color-text: #1f1a17;
  --color-text-muted: #6b625b;

  /* Commerce */
  --color-price: #c2410c;
  --color-strike: #9b928a;
  --color-discount: #b91c1c;
  --color-discount-bg: #fde8e8;
  --color-whatsapp: #15803d;
  --color-whatsapp-strong: #166534;
  --color-notice-bg: #fff7e6;
  --color-notice-border: #f3d9a4;
  --color-error: #b91c1c;

  /* Typography (system fonts: zero font downloads) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --page-gutter: 0.625rem;
  --page-max-width: 1200px;

  /* Shape */
  --radius-sm: 6px;
  --card-radius: 10px;
  --sheet-radius: 18px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgb(31 26 23 / 0.06), 0 1px 3px rgb(31 26 23 / 0.08);
  --shadow-md: 0 4px 12px rgb(31 26 23 / 0.10);
  --shadow-lg: 0 -8px 32px rgb(31 26 23 / 0.18);
  --backdrop: rgb(20 16 14 / 0.55);

  /* Layout */
  --grid-columns: 2;
  --grid-gap: 0.5rem;
  --modal-max-width: 560px;
  --tap-target: 44px;
  --z-header: 20;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration: 220ms;
}

@media (min-width: 640px)  { :root { --grid-columns: 3; --grid-gap: 0.75rem; --page-gutter: 1rem; } }
@media (min-width: 900px)  { :root { --grid-columns: 4; } }
@media (min-width: 1200px) { :root { --grid-columns: 5; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
body:has(dialog[open]) { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
input, button { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: var(--leading-tight); font-size: inherit; }
[hidden] { display: none !important; }
/* Browsers that don't know <dialog> would otherwise show closed popups as normal page content. */
dialog:not([open]) { display: none; }
/* Controls that only work with app.js (search, categories, cart). index.html adds .no-app
   when app.js didn't start (very old browser, or the code failed to download). */
.no-app .needs-app { display: none !important; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-md);
  padding-block: var(--space-2) var(--space-2);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.brand { display: flex; align-items: baseline; gap: var(--space-2); padding-block: var(--space-1) var(--space-2); }
.cart-btn {
  position: relative;
  display: grid; place-items: center;
  width: var(--tap-target); height: var(--tap-target);
  margin-right: calc(var(--space-2) * -1);
  color: var(--color-on-primary);
}
.cart-btn__icon { width: 26px; height: 26px; }
.cart-btn__badge {
  position: absolute; top: 3px; right: 1px;
  min-width: 18px; height: 18px; padding-inline: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.6875rem; font-weight: var(--weight-bold); line-height: 18px; text-align: center;
}
.brand__name { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: 0.01em; }
.brand__sub { font-size: var(--text-xs); opacity: 0.85; }

.search { position: relative; }
.search__icon {
  position: absolute; left: var(--space-3); top: 50%; translate: 0 -50%;
  width: 18px; height: 18px; color: var(--color-text-muted); pointer-events: none;
}
.search__input {
  width: 100%;
  height: var(--tap-target);
  padding: 0 var(--space-3) 0 calc(var(--space-3) * 2 + 18px);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem; /* >=16px prevents iOS zoom-on-focus */
}
.search__input::placeholder { color: var(--color-text-muted); }

/* ---------- Category pills ---------- */
.pills {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-block: var(--space-2) var(--space-1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto;
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-on-primary);
  white-space: nowrap;
}
.pill[aria-pressed="true"] { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-surface); }

/* ---------- Notices & meta ---------- */
.notice {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-notice-border);
  border-radius: var(--radius-sm);
  background: var(--color-notice-bg);
  font-size: var(--text-sm);
}
.notice__action { font-weight: var(--weight-bold); color: var(--color-primary); white-space: nowrap; }
.results-meta { padding-block: var(--space-3) var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- Product grid (Daraz-style) ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
  padding-bottom: var(--space-6);
}
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); }
.card:active { opacity: 0.9; }
.card__media { position: relative; aspect-ratio: 1 / 1; background: var(--color-surface-muted); }
.card__img { width: 100%; height: 100%; object-fit: cover; }
.card__badge { position: absolute; top: var(--space-2); left: var(--space-2); }
.card__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-2) var(--space-3); }
.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--text-sm) * var(--leading-tight) * 2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.card__meta {
  font-size: var(--text-xs); color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize;
}

/* Image placeholder (empty images or onerror) */
.ph {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  padding: var(--space-3);
  background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface-muted));
  color: var(--color-primary-strong);
  text-align: center;
}
.ph__text {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-tight);
}

/* Skeleton cards shown before data arrives */
.card--skeleton .card__media,
.skeleton-line { background: var(--color-surface-muted); animation: pulse 1.2s ease-in-out infinite; }
.skeleton-line { height: 0.75rem; border-radius: var(--radius-sm); }
.skeleton-line--short { width: 55%; }
@keyframes pulse { 50% { opacity: 0.55; } }

.empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-muted); }

/* Shown instead of products when the live catalogue can't be loaded */
.load-error {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.load-error__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.load-error__text { color: var(--color-text-muted); font-size: var(--text-sm); }
.sentinel { height: 1px; }

/* ---------- Price & badges ---------- */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-1); }
.price__from { font-size: var(--text-xs); color: var(--color-text-muted); }
.price__now { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-price); }
.price__was { font-size: var(--text-xs); color: var(--color-strike); }
.price__ask { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.price--lg .price__now { font-size: var(--text-xl); }
.price--lg .price__was { font-size: var(--text-sm); }
.badge {
  display: inline-block;
  padding: 0.0625rem var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-discount-bg);
  color: var(--color-discount);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

/* ---------- Product modal (bottom sheet on mobile, centred on desktop) ---------- */
.sheet {
  width: 100%;
  max-width: 100%;
  max-height: 92vh;
  max-height: 92dvh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.sheet[open] { display: flex; animation: sheet-up var(--duration) var(--ease-out); }
.sheet::backdrop { background: var(--backdrop); }
/* Fallback for browsers without <dialog>.showModal() */
.sheet.is-fallback[open] { position: fixed; inset: auto 0 0 0; z-index: calc(var(--z-header) + 10); }

.sheet__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-height: inherit; }
.sheet__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sheet__close {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xl); line-height: 1;
}
.sheet__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.sheet__eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.06em; }
.sheet__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.sheet__label { margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.sheet__desc { color: var(--color-text-muted); font-size: var(--text-sm); white-space: pre-line; }
.sheet__footer {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

@media (min-width: 640px) {
  .sheet { max-width: var(--modal-max-width); max-height: 88vh; margin: auto; border-radius: var(--sheet-radius); }
  .sheet[open] { animation-name: sheet-fade; }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
@keyframes sheet-fade { from { transform: scale(0.97); opacity: 0; } }

/* Image viewer */
.viewer__main { aspect-ratio: 4 / 3; background: var(--color-surface-muted); }
.viewer__img { width: 100%; height: 100%; object-fit: contain; }
.viewer__main .ph__text { font-size: var(--text-lg); }
.viewer__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-2) var(--space-4) 0; }
.thumb {
  flex: 0 0 auto; width: 56px; height: 56px; overflow: hidden;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}
.thumb[aria-pressed="true"] { border-color: var(--color-primary); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Variant pills */
.variants { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.variant-pill {
  min-height: 38px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-sm);
  text-transform: capitalize;
}
.variant-pill[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-weight: var(--weight-bold);
}

/* Spec list */
.specs { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.specs dt { color: var(--color-text-muted); }
.specs dd { text-transform: capitalize; }

/* ---------- Buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--card-radius);
  font-size: 1rem;
  font-weight: var(--weight-bold);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-strong); }
.btn--secondary { border: 1.5px solid var(--color-primary); background: var(--color-surface); color: var(--color-primary); }
.btn--secondary:hover:not(:disabled) { background: var(--color-primary-soft); }
.btn--whatsapp { background: var(--color-whatsapp); color: #ffffff; }
.btn--whatsapp:hover { background: var(--color-whatsapp-strong); }
.btn--inline { width: auto; min-height: 40px; padding-inline: var(--space-4); font-size: var(--text-sm); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.link-whatsapp {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-target);
  color: var(--color-whatsapp);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.link-whatsapp__icon { width: 20px; height: 20px; }
.added-note { margin-bottom: var(--space-2); text-align: center; font-size: var(--text-sm); color: var(--color-whatsapp); }
.added-note a { font-weight: var(--weight-bold); text-decoration: underline; }

/* ---------- Quantity stepper ---------- */
.qty-row { display: flex; align-items: center; justify-content: space-between; }
.qty-row .sheet__label { margin-bottom: 0; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.qty__btn { width: 36px; height: 36px; color: var(--color-primary); font-size: var(--text-lg); }
.qty__value { min-width: 2ch; text-align: center; font-weight: var(--weight-bold); }

/* ---------- Cart sheet ---------- */
.sheet__header {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.sheet__nav {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xl); line-height: 1;
}
.sheet__nav:hover { background: var(--color-surface-muted); }
.sheet__heading { font-size: var(--text-lg); font-weight: var(--weight-bold); }

.lines { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; list-style: none; }
.line {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.line:last-child { border-bottom: 0; padding-bottom: 0; }
.line__media { width: 72px; height: 72px; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-muted); }
.line__img { width: 100%; height: 100%; object-fit: cover; }
.line__media .ph { padding: var(--space-1); }
.line__media .ph__text { -webkit-line-clamp: 3; font-size: var(--text-xs); }
.line__info { display: flex; flex-direction: column; gap: 0.125rem; }
.line__name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.line__variant { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: capitalize; }
.line__price { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-price); }
.line__actions { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-1); }
.line__remove { min-height: 36px; padding-inline: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: underline; }

.form-alert {
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  background: var(--color-discount-bg);
  color: var(--color-error);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.footer-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-2); font-size: var(--text-sm); }
.footer-total strong { font-size: var(--text-lg); color: var(--color-price); }

/* ---------- Checkout form ---------- */
.field-group { display: grid; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field__label { padding: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.field__input {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 1rem; /* >=16px prevents iOS zoom-on-focus */
}
textarea.field__input { resize: vertical; }
.field__input:focus { border-color: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: 0; }
.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.field__hint:empty { display: none; }
.field__error { display: none; font-size: var(--text-xs); color: var(--color-error); }
.field--invalid .field__input { border-color: var(--color-error); }
.field--invalid .field__error { display: block; }

.choices { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.choices legend { margin-bottom: var(--space-1); }
.choice {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); font-weight: var(--weight-bold); }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); }

.summary-items {
  display: grid; gap: var(--space-2);
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
  list-style: none;
  font-size: var(--text-sm);
}
.summary-item { display: flex; justify-content: space-between; gap: var(--space-3); }
.summary-item__variant { color: var(--color-text-muted); text-transform: capitalize; }
.summary-item__price { font-weight: var(--weight-medium); white-space: nowrap; }

.totals {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.totals dd { text-align: right; }
.totals .totals__grand { font-size: var(--text-base); font-weight: var(--weight-bold); }
.totals dd.totals__grand { color: var(--color-price); }

.info-box {
  padding: var(--space-3);
  border: 1px solid var(--color-notice-border);
  border-radius: var(--radius-sm);
  background: var(--color-notice-bg);
  font-size: var(--text-xs);
}
.info-box--list { display: grid; gap: var(--space-1); padding-left: var(--space-6); }

/* ---------- Order placed ---------- */
.done { text-align: center; }
.done__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.done__code-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); }
.done__code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.75rem; letter-spacing: 0.06em; color: var(--color-primary-strong); }
.done .sheet__label { margin-bottom: 0; text-align: left; }
.steps { display: grid; gap: var(--space-2); padding-left: var(--space-5); text-align: left; font-size: var(--text-sm); }

/* ---------- Product page (/p/<id>, for browsers without working JavaScript) ----------
   Built by server/product-page.js. Modern phones never see it: app.js removes it and opens the popup. */
.product-page {
  margin-top: var(--space-3);
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.product-page__back { display: inline-block; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-primary); }
.product-page__media { aspect-ratio: 4 / 3; background: var(--color-surface-muted); }
.product-page__img { width: 100%; height: 100%; object-fit: contain; }
.product-page__images { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-2) var(--space-4) 0; }
.product-page__images .product-page__img { flex: 0 0 auto; width: 96px; height: 96px; border-radius: var(--radius-sm); object-fit: cover; }
.product-page__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.product-page__sizes { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.product-page__size {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.product-page__size-label { font-size: var(--text-sm); font-weight: var(--weight-bold); text-transform: capitalize; }
.product-page__missing { padding: var(--space-2) var(--space-4) var(--space-4); color: var(--color-text-muted); }
.product-page__heading { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-base); font-weight: var(--weight-bold); }

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