/* ==========================================================================
   CHUNG — DESIGN SYSTEM
   --------------------------------------------------------------------------
   One source of truth for every visual decision. Nothing below hard-codes a
   colour, radius, shadow or duration; everything references a token.

   The worlds share this language and differ only in a handful of tokens
   remapped under [data-world]:

     fashion   — warmer canvas, softer radii, more air
     cosmetics — clean cool canvas, sage accent, pill controls
     tech      — cooler canvas, tighter radii, higher contrast

   Mobile-first throughout: the base rules are the phone layout, and the
   media queries only add.
   ========================================================================== */

:root {
  /* Neutrals — the base the whole interface sits on */
  --ink: #16100e;          /* the logo's warm black, not a cold #000 */
  --ink-soft: #34343a;
  --muted: #6b6b74;
  --muted-soft: #70707a;   /* AA on all four grounds; #9a9aa2 was 2.62:1 */
  --line: #e8e6e3;
  --line-strong: #d6d3ce;
  --paper: #ffffff;
  --canvas: #faf9f7;
  --raise: #ffffff;

  /* Brand — lifted from the AURÉ logo: warm black ground, cream letters,
     gold accent. --gold is for fills, rules and marks; --gold-deep is the
     same hue darkened until it clears AA on every ground it is used on
     (6.5:1 on paper, 5.5:1 on the cream wash, 4.6:1 on the deepest mood
     tone), the only gold allowed on small text. */
  --brand-black: #16100e;
  --cream: #f4ece0;
  --gold: #c8a45c;
  --gold-deep: #735a2c;

  --accent: var(--gold);
  --accent-wash: var(--cream);
  --accent-text: var(--gold-deep);

  /* Semantic — status only, never decoration */
  --success: #167a4c;
  --success-wash: #e8f5ee;
  --danger: #c02b1d;
  --danger-wash: #fdeceb;
  --warning: #9a6100;
  --warning-wash: #fdf3e2;
  --info: #1f5fe0;
  --info-wash: #eaeff7;

  /* Apple-style typography. Apple platforms resolve -apple-system to SF Pro;
     other platforms use their closest native, resolution-independent face. */
  --font-apple: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                'Helvetica Neue', 'Segoe UI Variable', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-sans: var(--font-apple);
  --font-display: var(--font-apple);

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.375rem;

  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;
  --radius-2xl: 1.5rem;
  --radius-card: 0.875rem;
  --radius-control: 0.625rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(11 11 12 / 0.04), 0 1px 3px rgb(11 11 12 / 0.03);
  --shadow-md: 0 2px 6px rgb(11 11 12 / 0.05), 0 8px 20px rgb(11 11 12 / 0.05);
  --shadow-lg: 0 4px 12px rgb(11 11 12 / 0.06), 0 18px 44px rgb(11 11 12 / 0.09);

  /* --- motion -------------------------------------------------------------
     Five durations named by JOB, not by number: "what speed?" is unanswerable,
     "what is it doing?" is not. If a duration in this stylesheet is not one of
     these five, it is a bug. --fast and --base keep their exact former values,
     so this block is purely additive: nothing correct today changes. */
  --tap: 90ms;      /* pressed states — acknowledged, never watched         */
  --fast: 140ms;    /* hover, focus, colour, border                         */
  --base: 220ms;    /* entrances, exits, state changes                      */
  --slow: 320ms;    /* drawers and panels: things that travel far           */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);      /* standard              */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* entrances: settle     */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);          /* exits: leave          */

  --stagger: 90ms;  /* sibling reveal gap                                   */

  --page: 1200px;
  --narrow: 720px;
  --gutter: 1.25rem;
  --header: 3.5rem;
  --bottomnav: 3.75rem;
}

[data-world='fashion'] {
  --canvas: #faf7f3;
  --line: #ece4da;
  --accent: var(--gold);
  --accent-wash: var(--cream);
  --accent-text: var(--gold-deep);
  --radius-card: var(--radius-xl);
  --radius-control: var(--radius-pill);
}

/* Cosmetics: the cool white of a skincare counter, with a sage accent picked
   off the range's own packaging. --accent-text is the same hue darkened to
   6.5:1 on paper, so it is safe on small text. */
[data-world='cosmetics'] {
  --canvas: #f5f8f6;
  --line: #e0e8e3;
  --accent: #4d8a68;
  --accent-wash: #e6f1ea;
  --accent-text: #2f6a4b;
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-pill);
}

[data-world='tech'] {
  --canvas: #f6f7f9;
  --line: #e3e7ec;
  --accent: #1f5fe0;
  --accent-wash: #eaeff7;
  --accent-text: #1f5fe0;
  --radius-card: var(--radius-md);
  --radius-control: var(--radius-sm);
}

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Without this an anchor jump (a validation error, say) lands the target
     behind the sticky header. */
  scroll-padding-top: calc(var(--header) + 0.75rem);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  padding-bottom: var(--bottomnav);
}

@media (min-width: 768px) { body { padding-bottom: 0; } }

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  /* No border-radius here: it forced a square ring onto every circular
     control (.iconbtn, .pcard-save, .chip, .railnav, .video-play, .opt-swatch).
     Letting each element's own radius shape the ring fixes all of them. */
  transition: outline-offset var(--fast) var(--ease);
}

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

/* --- layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 1024px) { .wrap { --gutter: 2rem; } }

.wrap-narrow { max-width: var(--narrow); }

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: 0.5rem; }
.stack-lg > * + * { margin-top: 2rem; }

.row { display: flex; align-items: center; gap: 0.75rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.grow { flex: 1 1 auto; min-width: 0; }

/* --- type ----------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: var(--text-3xl);
}

@media (min-width: 768px) { .display { font-size: var(--text-4xl); } }

.h1 { font-size: var(--text-2xl); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.h2 { font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.015em; }
.h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.small { font-size: var(--text-sm); }
.tiny { font-size: var(--text-xs); }
.muted { color: var(--muted); }
.muted-soft { color: var(--muted-soft); }
.strong { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}
.center { text-align: center; }

/* --- header --------------------------------------------------------------- */

.announce {
  background: var(--brand-black);
  border-bottom: 1px solid var(--brand-black);
  color: var(--cream);
  font-size: var(--text-xs);
  text-align: center;
  padding: 0.5rem var(--gutter);
}
.announce a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.announce a svg { color: var(--gold); transition: transform var(--fast) var(--ease); }
.announce a:hover svg { transform: translateX(2px); }

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--header);
}
@media (min-width: 768px) { .header-inner { height: 4.25rem; } }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin-left: auto;
}

.logo {
  display: block;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.logo img {
  height: 1.5rem;
  width: auto;
  max-width: none;
  display: block;
}
@media (min-width: 768px) { .logo img { height: 1.9rem; } }
.logo b { font-weight: 400; }

/* Wordmark stands in for a brand image: tracked out so short names still read
   as a mark rather than as body copy. */
.logo-word {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}
@media (min-width: 768px) { .logo-word { font-size: 1.25rem; } }

/* Language switch: two short codes, the active one filled in. */
.langswitch {
  display: inline-flex;
  align-items: center;
  gap: 0.0625rem;
  margin-right: 0.25rem;
  padding: 0.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.langopt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0.1875rem 0.375rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.langopt:hover { background: var(--canvas); }

.langopt.is-active {
  background: var(--ink);
  color: var(--paper);
}

.worldtabs { display: none; gap: 0.25rem; margin-left: 1.75rem; }
@media (min-width: 860px) { .worldtabs { display: flex; } }

.worldtab {
  padding: 0.375rem 0.6875rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.worldtab:hover { background: var(--canvas); color: var(--ink); }
.worldtab.is-active { color: var(--ink); font-weight: 650; }

.searchbar {
  display: none;
  flex: 1 1 auto;
  position: relative;
  max-width: 26rem;
  margin-inline: auto;
}
@media (min-width: 900px) { .searchbar { display: block; } }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
  transition: background var(--fast) var(--ease);
}
.iconbtn:hover { background: var(--canvas); }

.pill-count {
  position: absolute;
  top: 0.05rem;
  right: 0.05rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding-inline: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-2xs);
  font-weight: 650;
  display: grid;
  place-items: center;
}

/* --- bottom nav (mobile) -------------------------------------------------- */

.bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 45;
  height: var(--bottomnav);
  display: grid;
  /* One equal column per link, however many worlds are in the nav. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 768px) { .bottomnav { display: none; } }

.bottomnav a {
  display: grid;
  place-items: center;
  gap: 0.15rem;
  font-size: var(--text-2xs);
  color: var(--muted);
  position: relative;
}
.bottomnav a.is-active { color: var(--ink); font-weight: 600; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease),
              background var(--fast) var(--ease);
  text-align: center;
}
.btn:hover { opacity: 0.9; }
.btn:active { transform: scale(0.985); }
.btn[disabled], .btn.is-disabled { opacity: 0.4; pointer-events: none; }

.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--canvas); opacity: 1; }
.btn-quiet { background: transparent; color: var(--ink); border-color: transparent; }
.btn-quiet:hover { background: var(--canvas); opacity: 1; }
.btn-accent { background: var(--accent); color: var(--paper); }
.btn-danger { background: var(--danger); color: var(--paper); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.4375rem 0.75rem; font-size: var(--text-xs); }
.btn-lg { padding: 0.875rem 1.5rem; font-size: var(--text-base); }

/* --- form controls -------------------------------------------------------- */

.field { display: block; }
.field + .field { margin-top: 0.875rem; }

.label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin-bottom: 0.3125rem;
}

.input, .select, .textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  font-size: var(--text-base);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent);
}
.textarea { min-height: 5.5rem; resize: vertical; }
.select { appearance: none; background-image: none; padding-right: 2rem; }

.input.has-error, .select.has-error { border-color: var(--danger); }
.error-text { color: var(--danger); font-size: var(--text-xs); margin-top: 0.25rem; }
.hint { color: var(--muted); font-size: var(--text-xs); margin-top: 0.25rem; }

.search-input {
  width: 100%;
  padding: 0.5625rem 0.875rem 0.5625rem 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--canvas);
  font-size: var(--text-sm);
}
.search-input:focus { outline: none; border-color: var(--line-strong); background: var(--paper); }
.search-icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}

.checkbox { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
.checkbox input { margin-top: 0.2rem; accent-color: var(--ink); }

/* --- chips ---------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: var(--text-xs);
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-xs);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--canvas);
  color: var(--ink-soft);
}
.badge-new { background: var(--accent-wash); color: var(--accent-text); }
.badge-sale { background: var(--danger-wash); color: var(--danger); }
.badge-low { background: var(--warning-wash); color: var(--warning); }
.badge-sold-out { background: var(--ink); color: var(--paper); }
.badge-best { background: color-mix(in srgb, var(--paper) 92%, transparent);
              color: var(--ink); backdrop-filter: blur(6px); }
.badge-success { background: var(--success-wash); color: var(--success); }
.badge-pending { background: var(--warning-wash); color: var(--warning); }
.badge-submitted { background: var(--info-wash); color: var(--info); }
.badge-rejected { background: var(--danger-wash); color: var(--danger); }
.badge-failed { background: var(--danger-wash); color: var(--danger); }

/* --- surfaces ------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem;
}
@media (min-width: 768px) { .panel { padding: 1.25rem; } }

.section { padding-block: 2rem; }
@media (min-width: 768px) { .section { padding-block: 3rem; } }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .section-title { font-size: var(--text-3xl); } }

.section-sub {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 0.15rem;
}

.seeall {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--ink);
}
.seeall svg { transition: transform var(--fast) var(--ease); }
.seeall:hover svg { transform: translateX(2px); }

.divider { height: 1px; background: var(--line); border: 0; margin-block: 1rem; }

/* --- product card --------------------------------------------------------- */

.grid {
  display: grid;
  /* Two columns everywhere except the very narrowest phones, where a 137px
     photo cannot hold a price tag without cutting the number. One column
     there gives the tags the room they need. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 22rem) {
  .grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pcard { position: relative; }

.pcard-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--canvas);
}
.pcard-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--slow) var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.03); }

.pcard-badges {
  position: absolute; top: 0.625rem; left: 0.625rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
}

.pcard-save {
  position: absolute; top: 0.625rem; right: 0.625rem;
  width: 2rem; height: 2rem; border: 0; cursor: pointer;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: transform var(--fast) var(--ease);
}
.pcard-save:hover { transform: scale(1.08); }
.pcard-save.is-saved { color: var(--danger); }

.pcard-body { padding-top: 0.75rem; }
.pcard-name { font-size: var(--text-sm); font-weight: 500; line-height: 1.4; }
.pcard-sub { font-size: var(--text-xs); color: var(--muted); }
.pcard-price { display: flex; align-items: baseline; gap: 0.45rem; margin-top: 0.35rem; }
.price-now { font-size: var(--text-sm); font-weight: 500; }
.price-was { font-size: var(--text-xs); color: var(--muted-soft); text-decoration: line-through; }

.swatches { display: flex; gap: 0.25rem; margin-top: 0.35rem; }
.swatch-dot {
  width: 0.75rem; height: 0.75rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
}

/* --- rails ---------------------------------------------------------------- */

.railwrap { position: relative; }

.railnav {
  position: absolute;
  top: 36%;
  z-index: 5;
  width: 2.25rem;
  height: 2.25rem;
  display: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
@media (min-width: 700px) { .railnav:not([hidden]) { display: grid; } }
.railnav:hover { transform: scale(1.06); }
.railnav-prev { left: -0.75rem; }
.railnav-next { right: -0.75rem; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.25rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 560px) { .rail { grid-auto-columns: 42%; gap: 1rem; } }
@media (min-width: 900px) {
  .rail {
    grid-auto-columns: calc((100% - 2.5rem) / 3);
    gap: 1.25rem;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.videorail { grid-auto-columns: 58%; }
@media (min-width: 640px) { .videorail { grid-auto-columns: 32%; } }
@media (min-width: 1024px) { .videorail { grid-auto-columns: 20%; } }

.videocard {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 9 / 16;
  position: relative;
}
.videocard video { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-pill); color: var(--ink);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  box-shadow: var(--shadow-md); cursor: pointer; z-index: 2;
}
.videocard.is-playing .video-play { display: none; }
.videocard figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem 0.75rem 0.625rem;
  background: linear-gradient(transparent, rgb(11 11 12 / 0.75));
  color: var(--paper); font-size: var(--text-xs); font-weight: 550;
}

.whatsapp-fab {
  position: fixed; right: 1rem; bottom: calc(var(--bottomnav) + 0.75rem); z-index: 44;
  display: flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.5rem;
  border-radius: var(--radius-pill); background: var(--success); color: var(--paper);
  box-shadow: var(--shadow-sm); font-size: 0.625rem; font-weight: 650;
}
.whatsapp-fab svg { width: 0.9375rem; height: 0.9375rem; }
@media (min-width: 768px) { .whatsapp-fab { bottom: 1.25rem; right: 1.25rem; } }

/* --- hero / editorial ----------------------------------------------------- */

.band { background: var(--canvas); }
.band-top { padding-top: 1.5rem; padding-bottom: 0.75rem; }
.band-bottom { padding-bottom: 1.25rem; }
@media (min-width: 768px) {
  .band-top { padding-top: 2rem; padding-bottom: 1rem; }
  .band-bottom { padding-bottom: 1.75rem; }
}

/* One world per row at every width: fashion first, cosmetics below it. Each
   card keeps the width it had when two sat side by side, so stacking does
   not stretch the copy away from the photo. */
.worlds-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) {
  .worlds-grid { gap: 1.75rem; }
  .worldcard { max-width: 36rem; }
}

.worldcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 1024px) { .worldcard { grid-template-columns: minmax(0, 1fr) 10.5rem; } }

.worldcard-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.worldcard-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.005em;
}
@media (min-width: 768px) { .worldcard-title { font-size: var(--text-3xl); } }

.worldcard-tagline {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.45;
  max-width: 22ch;
}

.worldcard-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.625rem;
  font-size: var(--text-sm);
  font-weight: 550;
}
.worldcard-cta svg { transition: transform var(--fast) var(--ease); }
.worldcard:hover .worldcard-cta svg { transform: translateX(3px); }

.worldcard-media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
}
.worldcard-media img { width: 100%; height: 100%; object-fit: cover; }
/* A clip in the world tile: a 3:4 box at the tile's width, anchored near the
   bottom of the portrait frame. That trims the empty top of the clip (the
   shelves above the model's head sit in the top quarter of every frame),
   keeps her whole from hair to feet, and lands the tile level with the copy
   beside it. Same width, same ring. */
.worldcard-media.is-video { aspect-ratio: 3 / 4; }
.worldcard-media video {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 92%;
  background: var(--ink);
}

/* --- cosmetics pictures --------------------------------------------------
   Skincare is photographed as packshots, not looks, so its pictures run at
   half the size of fashion's and are never cropped or upscaled: the world
   card frame takes the photo's own aspect, product cards letterbox it, and
   the hover zoom is off. The half-width cards apply wherever the context is
   cosmetics: the homepage rail and every /cosmetics page. */
.worldcard[data-world='cosmetics'] { grid-template-columns: minmax(0, 1fr) 4.5rem; }
@media (min-width: 1024px) {
  .worldcard[data-world='cosmetics'] { grid-template-columns: minmax(0, 1fr) 5.25rem; }
}
.worldcard[data-world='cosmetics'] .worldcard-media { aspect-ratio: auto; }
.worldcard[data-world='cosmetics'] .worldcard-media img {
  width: 100%; height: auto; object-fit: contain;
}

.pcard[data-world='cosmetics'] .pcard-media img { object-fit: contain; }
.pcard[data-world='cosmetics']:hover .pcard-media img { transform: none; }

[data-world='cosmetics'] .rail:not(.videorail) { grid-auto-columns: 31%; }
@media (min-width: 560px) {
  [data-world='cosmetics'] .rail:not(.videorail) { grid-auto-columns: 21%; }
}
@media (min-width: 900px) {
  [data-world='cosmetics'] .rail:not(.videorail) { grid-auto-columns: calc((100% - 6.25rem) / 6); }
}
/* Grids run at about twice the fashion column count, but a card never drops
   below ~105px: narrower than that the New pill and the save button collide. */
[data-world='cosmetics'] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 22rem) {
  [data-world='cosmetics'] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  [data-world='cosmetics'] .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  [data-world='cosmetics'] .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.chiprow {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-block: 0.25rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.chiprow::-webkit-scrollbar { display: none; }

.moodcard {
  display: block;
  border-radius: var(--radius-lg);
  padding: 1rem;
  min-height: 6.5rem;
  border: 1px solid var(--line);
  transition: transform var(--fast) var(--ease);
}
.moodcard:hover { transform: translateY(-2px); }

.bundlecard { display: grid; gap: 0.75rem; }
/* auto-fit, not repeat(3): a bundle of two products was leaving a third
   column of empty white. The tiles size themselves to how many there are. */
.bundlecard-images {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.375rem;
}
.bundlecard-images img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  /* height:auto alone lets the intrinsic width/height attributes win over
     aspect-ratio and stretch the tile; both are needed. */
  width: 100%;
  height: 100%;
}

/* --- product page --------------------------------------------------------- */

.pdp { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2.5rem; align-items: start; }
  .pdp-buy { position: sticky; top: calc(var(--header) + 1rem); }
}

.gallery { display: grid; gap: 0.5rem; }
.gallery-main {
  position: relative;
  aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; background: var(--canvas);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.gallery-thumb {
  flex: 0 0 4rem; aspect-ratio: 4 / 5; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--line); cursor: pointer; padding: 0; background: none;
}
/* box-shadow, not border-width: changing the border box shifted the image
   1px on every thumbnail tap. */
.gallery-thumb.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.gallery-thumb { transition: box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.optionrow { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.opt {
  min-width: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--paper);
  font-size: var(--text-sm);
  font-weight: 550;
  cursor: pointer;
  /* Enumerated, not `all`: .opt.is-out sets a linear-gradient, and `all`
     attempts gradient-vs-flat interpolation on 6-12 elements per page. */
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.opt:hover { border-color: var(--ink); }
.opt.is-selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.opt.is-out {
  color: var(--muted-soft);
  background:
    linear-gradient(to top left, transparent calc(50% - 0.5px), var(--line-strong) 50%,
                    transparent calc(50% + 0.5px));
  cursor: not-allowed;
}

.opt-swatch {
  width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); position: relative; cursor: pointer;
}
.opt-swatch.is-selected { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }

.speclist { display: grid; gap: 0; }
.speclist div {
  display: grid; grid-template-columns: 9rem 1fr; gap: 0.75rem;
  padding-block: 0.5rem; border-bottom: 1px solid var(--line); font-size: var(--text-sm);
}
.speclist div:last-child { border-bottom: 0; }
.speclist dt { color: var(--muted); }

.stickybuy {
  position: fixed; left: 0; right: 0; bottom: var(--bottomnav); z-index: 35;
  padding: 0.625rem var(--gutter) calc(0.625rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .stickybuy { display: none; } }

/* .stickybuy is a SECOND fixed bar sitting above .bottomnav, and nothing
   reserved its height — so the last rail card stayed permanently under it,
   and the WhatsApp FAB (z-index 44) sat on top of "Add to bag" (z-index 35).
   A body class rather than :has(), because the Tecno/Infinix tail predates
   Chrome 105 and there the fallback IS the implementation. */
@media (max-width: 899px) {
  .has-stickybuy { padding-bottom: calc(var(--bottomnav) + 3.5rem); }
  .has-stickybuy .whatsapp-fab { bottom: calc(var(--bottomnav) + 4.25rem); }
}

/* --- cart / checkout ------------------------------------------------------ */

.checkout-layout { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .checkout-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .checkout-summary { position: sticky; top: calc(var(--header) + 1rem); }
}

.lineitem { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; padding-block: 0.875rem; }
.lineitem + .lineitem { border-top: 1px solid var(--line); }
.lineitem img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }

.totals { display: grid; gap: 0.5rem; font-size: var(--text-sm); }
.totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.totals .grand {
  border-top: 1px solid var(--line); padding-top: 0.625rem; margin-top: 0.25rem;
  font-size: var(--text-lg); font-weight: 650;
}

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-control); }
.qty button {
  width: 2rem; height: 2rem; border: 0; background: none; cursor: pointer; font-size: var(--text-lg);
  line-height: 1; color: var(--ink-soft);
}
.qty input {
  width: 2.25rem; text-align: center; border: 0; background: none;
  font-size: var(--text-sm); font-weight: 600; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.radiocard {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.875rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.radiocard:hover { border-color: var(--ink-soft); }
.radiocard input { margin-top: 0.15rem; accent-color: var(--ink); }
.radiocard.is-selected { border-color: var(--ink); background: var(--canvas); }
.radiocard.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* Express checkout keeps the whole decision on one calm, compact screen. */
.express-checkout { background: var(--canvas); min-height: 70vh; }
.express-head { max-width: 40rem; margin-bottom: 1.25rem; }
.express-head h1 {
  margin-top: 0.25rem; font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1.08; letter-spacing: -0.035em; font-weight: 680;
}
.express-head > p:last-child { margin-top: 0.5rem; color: var(--muted); }
.eyebrow {
  color: var(--muted); font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
}

.checkout-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem;
  margin-bottom: 1.25rem;
}
.checkout-step {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.5rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-pill);
  background: var(--paper); border: 1px solid var(--line); color: var(--muted);
  font-size: var(--text-xs); font-weight: 600;
}
.checkout-step span {
  display: grid; place-items: center; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--canvas); font-size: var(--text-2xs);
}
.checkout-step.is-current { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.checkout-step.is-current span { color: var(--ink); background: var(--paper); }
.checkout-step.is-done { color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, var(--line)); }
.checkout-step.is-done span { color: var(--paper); background: var(--success); }

.express-panel, .express-summary { box-shadow: var(--shadow-sm); }
.express-section-head, .express-delivery-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
}
.express-section-head h2, .express-delivery-head h2 { margin-top: 0.15rem; font-size: var(--text-xl); }
.express-saved-note, .delivery-status {
  flex: 0 0 auto; padding: 0.3rem 0.55rem; border-radius: var(--radius-pill);
  color: var(--success); background: var(--success-wash); font-size: var(--text-2xs); font-weight: 650;
}
.express-fields { display: grid; gap: 0.875rem; margin-top: 1rem; }
@media (min-width: 640px) { .express-fields { grid-template-columns: repeat(2, 1fr); } }
.express-fields label { display: grid; gap: 0.3rem; font-size: var(--text-xs); font-weight: 650; color: var(--ink-soft); }
.express-fields input, .express-fields select {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.8rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  background: var(--paper); font-size: var(--text-base); font-weight: 450;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.express-fields input:focus, .express-fields select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(11 11 12 / 0.07);
}
.field-error { color: var(--danger); font-size: var(--text-xs); font-weight: 500; }
.express-clear {
  margin-top: 0.65rem; padding: 0; border: 0; background: none; color: var(--muted);
  font-size: var(--text-xs); text-decoration: underline; cursor: pointer;
}
.express-delivery-head { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.delivery-options { min-height: 3.5rem; margin-top: 0.75rem; transition: opacity var(--fast) var(--ease); }
.delivery-options.delivery-loading { opacity: 0.5; pointer-events: none; }
.delivery-placeholder {
  display: grid; place-items: center; min-height: 4.5rem; padding: 1rem;
  text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-md);
  background: var(--canvas);
}
.express-assurance {
  display: flex; align-items: flex-start; gap: 0.65rem; margin-top: 1rem;
  padding: 0.75rem; border-radius: var(--radius-md); background: var(--success-wash);
  color: color-mix(in srgb, var(--success) 80%, var(--ink)); font-size: var(--text-xs);
}
.express-assurance > span {
  display: grid; place-items: center; flex: 0 0 auto; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; color: var(--paper); background: var(--success); font-weight: 700;
}
.express-summary { display: grid; gap: 1rem; }
.express-order-items { display: grid; gap: 0.5rem; padding-block: 0.75rem; border-block: 1px solid var(--line); }
.express-order-item { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--text-xs); }
.express-order-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-totals { display: grid; gap: 0.55rem; }
.checkout-totals > div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--text-sm); }
.checkout-totals dt { color: var(--muted); }
.checkout-totals .grand-total { margin-top: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: var(--text-lg); font-weight: 680; }
.checkout-totals .grand-total dt { color: var(--ink); }
.express-submit { min-height: 3.25rem; }
.express-summary-note { text-align: center; color: var(--muted); font-size: var(--text-2xs); }

/* Payment details are designed for thumbs: every value has its own copy action. */
.payment-page { background: var(--canvas); }
.payment-heading { max-width: 34rem; margin-inline: auto; }
.payment-details, .receipt-form { box-shadow: var(--shadow-sm); }
.payment-section-head { align-items: flex-start; }
.payment-copy-list { display: grid; border-block: 1px solid var(--line); }
.payment-copy-list > div { display: grid; gap: 0.25rem; padding-block: 0.75rem; }
.payment-copy-list > div + div { border-top: 1px solid var(--line); }
.payment-copy-list dt { color: var(--muted); font-size: var(--text-xs); }
.payment-copy-list dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; overflow-wrap: anywhere; }
.copy-button {
  flex: 0 0 auto; min-height: 2.25rem; padding: 0.35rem 0.65rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--ink); font-size: var(--text-xs); font-weight: 650; cursor: pointer;
}
.copy-button:hover { background: var(--canvas); }
.copy-feedback { min-height: 1.25rem; color: var(--success); font-weight: 600; }
.receipt-actions { display: grid; gap: 0.65rem; }
@media (min-width: 560px) { .receipt-actions { grid-template-columns: 1fr 1fr; } }
.receipt-camera { min-height: 3.5rem; background: var(--success); }
.file-input-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.receipt-file-name {
  min-height: 2.6rem; display: grid; place-items: center; padding: 0.55rem;
  border-radius: var(--radius-sm); background: var(--canvas); color: var(--muted); text-align: center;
}
.payment-success { background: var(--success-wash); border-color: transparent; }
.payment-rejected { background: var(--danger-wash); border-color: transparent; }
.receipt-check {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; background: var(--success); color: var(--paper); font-size: var(--text-lg); font-weight: 700;
}

@media (max-width: 639px) {
  .express-checkout, .payment-page { padding-top: 1.25rem; }
  .express-saved-note { display: none; }
  .checkout-step { gap: 0.25rem; font-size: var(--text-2xs); }
  .payment-copy-list dd { align-items: flex-start; }
}

/* --- order timeline ------------------------------------------------------- */

.timeline { display: grid; gap: 0; padding-left: 0.5rem; }
.timeline li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; padding-bottom: 1rem; position: relative; }
.timeline li::before {
  content: ''; position: absolute; left: 0.4375rem; top: 1.1rem; bottom: 0;
  width: 1px; background: var(--line);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline .dot {
  width: 0.9375rem; height: 0.9375rem; border-radius: var(--radius-pill);
  border: 2px solid var(--line-strong); background: var(--paper); margin-top: 0.25rem;
}
.timeline li.is-done .dot { background: var(--success); border-color: var(--success); }
.timeline li.is-current .dot { background: var(--ink); border-color: var(--ink); }

/* --- flashes -------------------------------------------------------------- */

.flashes { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); top: 0.75rem; width: min(28rem, calc(100% - 1.5rem)); display: grid; gap: 0.5rem; }

.flash {
  padding: 0.6875rem 0.875rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  background: var(--ink);
  color: var(--paper);
  display: flex; gap: 0.5rem; align-items: flex-start;
  animation: flash-in var(--base) var(--ease);
}
.flash-success { background: var(--success); }
.flash-error { background: var(--danger); }
.flash-warning { background: var(--warning); }
.flash button { background: none; border: 0; color: inherit; cursor: pointer; opacity: 0.7; }

@keyframes flash-in { from { opacity: 0; transform: translateY(-0.5rem); } }

/* --- empty states, misc --------------------------------------------------- */

.empty { text-align: center; padding: 3rem 1rem; }
.empty svg { color: var(--muted-soft); margin-inline: auto; margin-bottom: 0.75rem; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 2rem; }

.footer {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding-block: 2rem;
  margin-top: 3rem;
}
.footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-brand { display: inline-block; margin-bottom: 1.5rem; }
.footer-brand img { height: 2.25rem; width: auto; display: block; }
.footer h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-text); margin-bottom: 0.5rem; }
.footer li + li { margin-top: 0.375rem; }
.footer a { font-size: var(--text-sm); color: var(--ink-soft); }
.footer a:hover { color: var(--ink); text-decoration: underline; }

.filterbar {
  display: flex; gap: 0.5rem; overflow-x: auto; padding-block: 0.75rem;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  position: sticky; top: var(--header); z-index: 30;
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter: blur(8px);
}

.suggest {
  position: absolute; top: calc(100% + 0.375rem); left: 0; right: 0; z-index: 50;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 0.375rem; max-height: 24rem; overflow-y: auto;
}
.suggest a { display: flex; gap: 0.625rem; align-items: center; padding: 0.375rem 0.5rem; border-radius: var(--radius-sm); }
.suggest a:hover { background: var(--canvas); }
.suggest img { width: 2.25rem; height: 2.75rem; object-fit: cover; border-radius: var(--radius-xs); }




/* ==========================================================================
   POLISH — the details that decide whether a site feels finished
   ========================================================================== */

/* --- skip link ------------------------------------------------------------
   Without one, a keyboard user tabs five world tabs and four icon buttons
   before reaching content, on every page load. */
.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
  transition: transform var(--fast) var(--ease);
}
.skip-link:focus-visible { transform: none; }
main:focus { outline: none; }

/* --- touch targets --------------------------------------------------------
   Four controls sat under the 44px minimum. Each gets a transparent hit area
   only: the visual box is untouched, so nothing in the layout moves. */
.iconbtn::after { content: ''; position: absolute; inset: -4px; }      /* 36 -> 44 */
.pcard-save::after { content: ''; position: absolute; inset: -6px; }   /* 32 -> 44 */
.qty button { position: relative; }
.qty button::after { content: ''; position: absolute; inset: -6px -4px; }
.flash button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: -0.6rem -0.5rem -0.6rem 0;
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
  line-height: 1;
}

/* --- the filter selects ---------------------------------------------------
   listing.html styles four <select> elements as .chip, but .chip never reset
   the native appearance — so Android drew its own grey box and arrow inside
   the pill. This is the most-used control on every listing page. */
select.chip {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.85rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.85rem center, right 0.6rem center;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

/* --- unavailable options --------------------------------------------------
   A strike-through gradient plus a faint label read as a rendering glitch
   rather than as "unavailable". */
.opt.is-out { color: var(--muted); opacity: 0.75; }

/* --- empty states ---------------------------------------------------------
   Every empty state used to draw the same magnifying glass. "Your bag is
   empty" illustrated with a search icon is the classic unfinished tell. */
.empty { text-align: center; padding: 3.5rem 1rem; max-width: 26rem; margin-inline: auto; }
.empty svg { color: var(--muted); opacity: 0.55; margin-inline: auto; margin-bottom: 0.75rem; }

/* --- search suggest -------------------------------------------------------
   The fetch failure used to be swallowed, so on a dropped connection the
   panel simply never appeared and the shopper retyped. */
.suggest-note { padding: 0.75rem 0.6rem; text-align: center; }

/* --- flash exit -----------------------------------------------------------
   Flashes arrived designed and left undesigned, via an inline style in JS.
   Motion belongs in the stylesheet. */
.flash.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--fast) var(--ease-in), transform var(--fast) var(--ease-in);
}

/* Stock note colours, so JS sets a class rather than an inline style and the
   values stay tokenised. */
.is-low { color: var(--warning); }
.is-ok { color: var(--success); }

/* --- page enter -----------------------------------------------------------
   This is a Flask app with no SPA: every tap is a full page load, and on 3G
   the white flash between pages is the dominant felt experience. One rule,
   opt-in via [data-motion] so content is never hidden without JS. */
[data-motion] main { animation: page-in var(--base) var(--ease-out); }
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* The LQIP is a tiny blurred JPEG behind the real photo, so the frame is
   never a grey box on exactly the connections this store serves. */
.gallery-main { background-size: cover; background-position: center; }
@media (prefers-reduced-motion: no-preference) {
  .gallery-main img { animation: img-in var(--base) var(--ease-out); }
}
@keyframes img-in { from { opacity: 0; } }

/* ==========================================================================
   OUTFIT COST PANEL
   --------------------------------------------------------------------------
   This says what the look
   costs as a list, and is honest about which figure is real. The piece on
   sale is priced from stock; everything else is marked indicative, so the
   total reads as a guide and never as a checkout number.
   ========================================================================== */

.outfit {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  overflow: hidden;
}

.outfit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--line);
}
.outfit-title {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.outfit-count { font-size: var(--text-2xs); color: var(--muted); }

.outfit-list { list-style: none; margin: 0; padding: 0.25rem 0; }

.outfit-item {
  display: grid;
  /* dot | name | note | price — the price column is what keeps every number
     right-aligned to the same edge regardless of how long a name runs. */
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
}
.outfit-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line-strong);
}
.outfit-item.is-this .outfit-dot { border-color: var(--accent); }

.outfit-label {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.outfit-item.is-this .outfit-label { font-weight: 600; color: var(--ink); }

.outfit-tag {
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text);
  white-space: nowrap;
}
/* A part of the piece already counted: quieter still than an estimate, and
   it carries no number of its own. */
.outfit-tag-part {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
}
.outfit-item.is-this .outfit-tag-part { color: var(--muted); }

/* An estimate must not look as certain as the real price. */
.outfit-tag-est {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}

.outfit-price {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}
.outfit-item.is-this .outfit-price { font-weight: 600; color: var(--ink); }

.outfit-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: var(--text-xs);
  color: var(--muted);
}
.outfit-sum {
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Narrow phones: the note column is the first thing to go — the dot already
   distinguishes this piece, and the name plus price is what must survive. */
@media (max-width: 26rem) {
  .outfit-item { grid-template-columns: auto 1fr auto; gap: 0.4375rem; }
  .outfit-tag { display: none; }
  .outfit-item.is-this .outfit-tag {
    display: inline-block;
    grid-column: 3;
  }
  .outfit-item.is-this { grid-template-columns: auto 1fr auto auto; }
}


/* ==========================================================================
   REDUCED MOTION — the site-wide safety net
   --------------------------------------------------------------------------
   CSS is the mechanism here, so it holds even when scripts are blocked.

   1ms rather than 0s deliberately: `transitionend` still fires, so any JS
   cleaning up on that event keeps working under this setting.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* A 1ms transition still LANDS on the hover transform, just instantly.
     These have to be refused outright. */
  .pcard:hover .pcard-media img,
  .moodcard:hover, .railnav:hover, .pcard-save:hover, .stat:hover {
    transform: none !important;
  }
  /* A spinner conveys state. Slow it; never freeze it mid-arc. */
  .btn.is-submitting::before {
    animation-duration: 1400ms !important;
    animation-iteration-count: infinite !important;
  }
}

/* ==========================================================================
   ADMIN
   Deliberately plainer than the storefront: dense, quiet, and built to be
   read at a glance rather than admired.
   ========================================================================== */

.admin { --canvas: #f6f7f9; --radius-card: var(--radius-md); background: var(--canvas); min-height: 100vh; padding-bottom: 0; }

.admin-shell { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .admin-shell { grid-template-columns: 14rem 1fr; } }

.admin-side {
  background: var(--ink); color: var(--paper);
  padding: 1rem 0.75rem;
}
@media (min-width: 1024px) { .admin-side { min-height: 100vh; position: sticky; top: 0; } }

.admin-side .logo { color: var(--paper); display: block; margin-bottom: 1rem; padding-inline: 0.5rem; }

.admin-nav { display: flex; gap: 0.25rem; overflow-x: auto; }
@media (min-width: 1024px) { .admin-nav { display: grid; overflow: visible; } }

.admin-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 550; color: rgb(255 255 255 / 0.66);
  white-space: nowrap; transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.admin-nav a:hover { background: rgb(255 255 255 / 0.08); color: var(--paper); }
.admin-nav a.is-active { background: var(--paper); color: var(--ink); }
.admin-nav-badge {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem;
  padding-inline: 0.3rem; border-radius: var(--radius-pill); background: var(--danger);
  color: var(--paper); font-size: var(--text-2xs); font-weight: 750;
}
.admin-nav-badge[hidden] { display: none; }
.admin-nav a.is-active .admin-nav-badge { color: var(--paper); }

.admin-main { padding: 1rem; }
@media (min-width: 768px) { .admin-main { padding: 1.5rem; } }

.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }

.admin-receipt-queue { margin-bottom: 1rem; border-left: 4px solid var(--info); box-shadow: var(--shadow-sm); }
.admin-receipt-list { display: grid; gap: 0.5rem; }
.admin-receipt-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.75rem; border-radius: var(--radius-sm); background: var(--canvas);
}
.empty-state-sm { padding: 1.25rem; text-align: center; }
.empty-state-sm .receipt-check { margin-inline: auto; margin-bottom: 0.5rem; }
.admin-live-alert {
  position: fixed; z-index: 100; right: 1rem; bottom: 1rem;
  width: min(22rem, calc(100% - 2rem)); display: grid; gap: 0.2rem;
  padding: 1rem; border-radius: var(--radius-md); background: var(--ink); color: var(--paper);
  box-shadow: var(--shadow-lg); animation: flash-in var(--base) var(--ease);
}
.admin-live-alert span { font-size: var(--text-sm); }
.admin-live-alert small { color: rgb(255 255 255 / 0.65); }

.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 768px) { .statgrid { grid-template-columns: repeat(4, 1fr); } }

.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.875rem; }
.stat-label { font-size: var(--text-xs); color: var(--muted); }
.stat-value { font-size: var(--text-2xl); font-weight: 680; letter-spacing: -0.02em; line-height: 1.2; }
.stat-foot { font-size: var(--text-xs); color: var(--muted); }

.tablewrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); }

.table { font-size: var(--text-sm); min-width: 44rem; }
.table th {
  text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600; padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--canvas);
  position: sticky; top: 0;
}
.table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--canvas); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table img.thumb { width: 2.25rem; height: 2.75rem; object-fit: cover; border-radius: var(--radius-xs); }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.875rem; }

.formgrid { display: grid; gap: 0.875rem; }
@media (min-width: 640px) { .formgrid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .formgrid-3 { grid-template-columns: repeat(3, 1fr); } }

.variant-row { display: grid; gap: 0.5rem; grid-template-columns: 1fr; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
@media (min-width: 900px) { .variant-row { grid-template-columns: 1.4fr 1.6fr 0.8fr 0.7fr 0.6fr auto; align-items: end; } }

.imagegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.625rem; }
.imagetile { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper); }
.imagetile img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.imagetile .imagetile-body { padding: 0.375rem; display: grid; gap: 0.25rem; }

/* --- Admin workspace 2.0 -------------------------------------------------
   A single responsive control surface: fixed desktop rail, phone drawer,
   thumb-friendly dock, readable data cards, and consistent work forms. */

.admin {
  --admin-side: #111318;
  --admin-side-soft: #1a1d24;
  --admin-canvas: #f4f5f7;
  --admin-blue: #315cec;
  --admin-blue-wash: #edf1ff;
  --admin-top: 3rem;
  background: var(--admin-canvas);
  color: #15171b;
  padding: 0 0 calc(4.75rem + env(safe-area-inset-bottom));
  min-height: 100vh;
}

.admin-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.admin-icon {
  width: 1.15rem; height: 1.15rem; display: block; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.admin-icon-button {
  width: 2.75rem; height: 2.75rem; display: inline-grid; place-items: center;
  border: 0; border-radius: 0.75rem; background: transparent; color: inherit; cursor: pointer;
}
.admin-icon-button:hover { background: rgb(255 255 255 / 0.08); }

.admin-mobilebar {
  position: sticky; z-index: 73; top: 0; min-height: 4rem;
  display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; gap: 0.5rem;
  padding: max(0.5rem, env(safe-area-inset-top)) 0.75rem 0.5rem;
  background: color-mix(in srgb, var(--admin-side) 96%, transparent); color: var(--paper);
  border-bottom: 1px solid rgb(255 255 255 / 0.08); backdrop-filter: blur(16px);
}
.admin-mobile-brand { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; font-size: var(--text-sm); font-weight: 700; }
.admin-brand-mark {
  width: 2rem; height: 2rem; display: inline-grid; place-items: center; flex: 0 0 auto;
  border-radius: 0.625rem; color: var(--admin-side); background: var(--paper);
  font-size: var(--text-base); font-weight: 780; letter-spacing: -0.04em;
}
.admin-mobile-orders { position: relative; }
.admin-mobile-count {
  position: absolute; right: 0.1rem; top: 0.1rem; min-width: 1.1rem; height: 1.1rem;
  display: grid; place-items: center; padding-inline: 0.22rem; border-radius: var(--radius-pill);
  background: var(--danger); color: var(--paper); font-size: 0.6rem; font-weight: 750;
}
.admin-mobile-count[hidden] { display: none; }

.admin-drawer-overlay {
  position: fixed; z-index: 78; inset: 0; background: rgb(4 6 10 / 0.58);
  opacity: 0; visibility: hidden; transition: opacity var(--base) var(--ease), visibility 0s linear var(--base);
  backdrop-filter: blur(2px);
}
.admin-shell { display: block; min-height: 100vh; }
.admin-side {
  position: fixed; z-index: 80; inset: 0 auto 0 0; width: min(19rem, 88vw); min-height: 100vh;
  display: flex; flex-direction: column; padding: max(1rem, env(safe-area-inset-top)) 0.875rem 1rem;
  overflow-y: auto; overscroll-behavior: contain; background: var(--admin-side); color: var(--paper);
  box-shadow: 20px 0 50px rgb(0 0 0 / 0.2); transform: translateX(-105%);
  transition: transform 260ms var(--ease);
}
.admin.admin-nav-open { overflow: hidden; }
.admin.admin-nav-open .admin-side { transform: translateX(0); }
.admin.admin-nav-open .admin-drawer-overlay { opacity: 1; visibility: visible; }
.admin-side-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.25rem 0.25rem 1rem; }
.admin-brand { display: flex; align-items: center; gap: 0.75rem; color: var(--paper); min-width: 0; }
.admin-brand > span:last-child { display: grid; min-width: 0; }
.admin-brand strong { font-size: var(--text-sm); letter-spacing: -0.01em; }
.admin-brand small { color: rgb(255 255 255 / 0.48); font-size: var(--text-2xs); }
.admin-menu-close { color: rgb(255 255 255 / 0.72); }

.admin-nav { display: grid; gap: 1rem; overflow: visible; }
.admin-nav-group { display: grid; gap: 0.2rem; }
.admin-nav-label {
  padding: 0 0.65rem 0.3rem; color: rgb(255 255 255 / 0.35);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.admin-nav a {
  min-height: 2.65rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.55rem 0.65rem; border-radius: 0.65rem; color: rgb(255 255 255 / 0.64);
  font-size: var(--text-sm); font-weight: 560; white-space: nowrap;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.admin-nav a:hover { color: var(--paper); background: rgb(255 255 255 / 0.07); }
.admin-nav a:active { transform: scale(0.985); }
.admin-nav a.is-active { color: var(--paper); background: rgb(255 255 255 / 0.11); box-shadow: inset 3px 0 0 var(--paper); }
.admin-nav-link-main { display: flex; align-items: center; gap: 0.7rem; }
.admin-nav-link-main .admin-icon { color: rgb(255 255 255 / 0.5); }
.admin-nav a.is-active .admin-icon { color: var(--paper); }
.admin-nav-badge {
  min-width: 1.3rem; height: 1.3rem; display: inline-grid; place-items: center;
  padding-inline: 0.32rem; border-radius: var(--radius-pill); background: #ef4444; color: white;
  font-size: var(--text-2xs); font-weight: 760;
}
.admin-nav-badge[hidden] { display: none; }

.admin-side-footer { margin-top: auto; padding-top: 1.5rem; }
.admin-user {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.09); border-radius: 0.75rem; background: rgb(255 255 255 / 0.04);
}
.admin-user-avatar {
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 50%; background: var(--paper); color: var(--admin-side); font-weight: 750;
}
.admin-user > span:last-child { display: grid; }
.admin-user strong { font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user small { color: rgb(255 255 255 / 0.45); font-size: var(--text-2xs); }
.admin-side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-top: 0.55rem; }
.admin-side-actions a, .admin-side-actions button {
  width: 100%; min-height: 2.5rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  border: 0; border-radius: 0.6rem; background: transparent; color: rgb(255 255 255 / 0.55);
  font-size: var(--text-xs); cursor: pointer;
}
.admin-side-actions a:hover, .admin-side-actions button:hover { background: rgb(255 255 255 / 0.07); color: var(--paper); }

.admin-main { min-width: 0; padding: 0; }
.admin-contextbar { display: none; }
.admin-main-inner { width: 100%; max-width: 94rem; margin-inline: auto; padding: 1rem; }
.admin-head {
  display: grid; gap: 0.85rem; align-items: end; margin-bottom: 1.15rem;
}
.admin-page-kicker { color: var(--muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.admin-title-block h1 { margin-top: 0.15rem; font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; }
.admin-title-block > .small { margin-top: 0.25rem; }
.admin-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-head-actions > .btn, .admin-head-actions > form > .btn { min-height: 2.65rem; }

.admin .panel, .admin .stat, .admin .tablewrap {
  border-color: #e2e5e9; box-shadow: 0 1px 2px rgb(15 23 42 / 0.025);
}
.admin .panel { border-radius: 0.85rem; }
.admin .panel > .h3:first-child, .admin .panel > .h2:first-child { letter-spacing: -0.02em; }
.admin .btn { min-height: 2.65rem; border-radius: 0.62rem; }
.admin .btn-sm { min-height: 2.35rem; padding-inline: 0.8rem; }
.admin .btn-lg { min-height: 3.1rem; }
.admin .input, .admin .select, .admin .textarea {
  border-color: #d9dde3; border-radius: 0.6rem; background: #fff; min-height: 2.75rem;
}
.admin .textarea { min-height: 6rem; }
.admin .input:hover, .admin .select:hover, .admin .textarea:hover { border-color: #bcc2cb; }
.admin .input:focus, .admin .select:focus, .admin .textarea:focus {
  border-color: var(--admin-blue); box-shadow: 0 0 0 3px rgb(49 92 236 / 0.11);
}
.admin .checkbox { min-height: 2.75rem; padding: 0.55rem 0.65rem; border: 1px solid #e1e4e8; border-radius: 0.6rem; background: #fff; }
.admin .checkbox input { width: 1.1rem; height: 1.1rem; accent-color: var(--admin-blue); }

.admin-offline-banner,
.admin-form-state {
  position: fixed; z-index: 116; left: 50%; width: max-content; max-width: calc(100vw - 1.5rem);
  border-radius: 0.65rem; box-shadow: 0 12px 34px rgb(15 23 42 / 0.18);
  font-size: var(--text-xs); font-weight: 680; line-height: 1.35; text-align: center;
  transform: translateX(-50%);
}
.admin-offline-banner[hidden], .admin-form-state[hidden] { display: none; }
.admin-offline-banner {
  top: calc(4.65rem + env(safe-area-inset-top)); padding: 0.68rem 0.85rem;
  border: 1px solid #f0c86a; background: #fff7df; color: #6f4b00;
}
.admin-form-state {
  bottom: calc(5.05rem + env(safe-area-inset-bottom)); padding: 0.55rem 0.78rem;
  border: 1px solid rgb(255 255 255 / 0.12); background: var(--admin-side); color: #fff;
}
.admin.admin-is-offline .admin-store-state { color: var(--danger); }
.admin form.is-submitting { cursor: progress; }
.admin form.is-submitting .btn { pointer-events: none; }
.admin .btn.is-submitting { display: inline-flex; align-items: center; justify-content: center; gap: 0.48rem; }
.admin .btn.is-submitting::before {
  content: ""; width: 0.82rem; height: 0.82rem; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: admin-spin 700ms linear infinite;
}
@keyframes admin-spin { to { transform: rotate(360deg); } }

.admin-receipt-queue {
  margin-bottom: 1rem; border: 1px solid #dce3ff; border-left: 4px solid var(--admin-blue);
  background: linear-gradient(135deg, #fff 55%, #f4f6ff); box-shadow: 0 8px 28px rgb(49 92 236 / 0.07);
}
.admin-receipt-list { display: grid; gap: 0.55rem; }
.admin-receipt-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  padding: 0.75rem; border: 1px solid #e7e9ed; border-radius: 0.68rem; background: #fff;
}
.empty-state-sm { padding: 1.25rem; text-align: center; }
.empty-state-sm .receipt-check { margin-inline: auto; margin-bottom: 0.5rem; }
.admin-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.35rem 0 0.65rem; }
.admin-section-head .h3 { margin-top: 0.1rem; }
.admin-section-head + .statgrid, .admin-section-head + .grid-2 { margin-top: 0 !important; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0.7rem; }
.stat {
  min-width: 0; padding: 0.95rem; border-radius: 0.8rem; background: #fff;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.stat:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgb(15 23 42 / 0.06); }
.stat-label { color: #69707c; font-size: var(--text-xs); font-weight: 600; }
.stat-value { margin-top: 0.25rem; font-size: clamp(1.25rem, 4vw, 1.7rem); font-weight: 720; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.stat-foot { margin-top: 0.3rem; color: #858c96; line-height: 1.35; }

.tablewrap {
  position: relative; overflow-x: auto; overscroll-behavior-inline: contain;
  border-radius: 0.8rem; background: #fff; scrollbar-width: thin; scrollbar-color: #bec3cc transparent;
}
.tablewrap:focus-visible { outline: 2px solid var(--admin-blue); outline-offset: 2px; }
.table { min-width: 44rem; font-size: var(--text-sm); }
.table th {
  padding: 0.72rem 0.8rem; background: #f8f9fa; color: #5f6570;   /* 5.7:1, was 4.2 */
  border-color: #e6e8eb; font-size: 0.67rem; font-weight: 720; letter-spacing: 0.055em;
}
.table td { padding: 0.72rem 0.8rem; border-color: #edf0f2; }
.table tbody tr { transition: background var(--fast) var(--ease); }
.table tbody tr:hover { background: #fafbfc; }
.table a.strong:hover { color: var(--admin-blue); }
.table img.thumb { width: 2.65rem; height: 3.2rem; border-radius: 0.45rem; }
.admin-table-hint {
  display: none; align-items: center; justify-content: flex-end; gap: 0.3rem;
  margin: 0 0 0.35rem; color: var(--muted); font-size: var(--text-2xs); font-weight: 600;
}
.admin-table-hint.is-visible { display: flex; }

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  margin-bottom: 0.9rem; padding: 0.65rem; border: 1px solid #e2e5e9;
  border-radius: 0.8rem; background: #fff;
}
.toolbar > .input { flex: 1 1 15rem; }
.toolbar > .select { flex: 0 1 11rem; }
.admin .formgrid { gap: 0.9rem; }
.admin .variant-row { padding: 0.85rem; border-color: #e1e4e8; border-radius: 0.7rem; }
.admin-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; }
.admin-product-form { max-width: 78rem; }

.admin-live-alert {
  z-index: 110; right: 1rem; bottom: calc(5.25rem + env(safe-area-inset-bottom));
  border: 1px solid rgb(255 255 255 / 0.12); border-radius: 0.8rem; background: var(--admin-side);
}

.admin-mobile-dock {
  position: fixed; z-index: 72; inset: auto 0 0; min-height: 4.25rem;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
  padding: 0.35rem 0.35rem calc(0.35rem + env(safe-area-inset-bottom));
  border-top: 1px solid #e1e4e8; background: rgb(255 255 255 / 0.97); box-shadow: 0 -8px 26px rgb(15 23 42 / 0.07);
  backdrop-filter: blur(16px);
}
.admin-mobile-dock a, .admin-mobile-dock button {
  min-width: 0; min-height: 3.35rem; display: grid; place-items: center; align-content: center; gap: 0.18rem;
  border: 0; border-radius: 0.65rem; background: none; color: #7a818c; cursor: pointer;
}
.admin-mobile-dock a.is-active { color: var(--admin-side); background: #f1f3f5; }
.admin-mobile-dock small { font-size: 0.61rem; font-weight: 650; }
.admin-dock-icon { position: relative; }
.admin-dock-icon > span {
  position: absolute; left: 0.75rem; top: -0.45rem; min-width: 1rem; height: 1rem; display: grid;
  place-items: center; padding-inline: 0.2rem; border-radius: var(--radius-pill);
  color: #fff; background: var(--danger); font-size: 0.55rem; font-weight: 750;
}
.admin-dock-icon > span[hidden] { display: none; }

@media (max-width: 767px) {
  .admin-main-inner { padding: 1rem 0.75rem; }
  .admin-head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-head-actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
  .admin-head-actions > *, .admin-head-actions > form > .btn { width: 100%; }
  .admin .toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .admin .toolbar > .input, .admin .toolbar > .select,
  .admin .toolbar > [style*="max-width"] { width: 100% !important; max-width: none !important; }
  .admin .toolbar .btn { width: 100%; }
  .admin-receipt-item > .grow { flex-basis: 100%; }
  .admin-receipt-item > a, .admin-receipt-item > form { flex: 1 1 calc(50% - 0.3rem); }
  .admin-receipt-item > form .btn { width: 100%; }
  .admin-order-sidebar { order: -1; }
  .admin .row > .input { min-width: 0; }
  .admin .panel { padding: 0.9rem; }

  .tablewrap.admin-card-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .admin-card-table { display: block; min-width: 0 !important; }
  .admin-card-table thead { display: none; }
  .admin-card-table tbody { display: grid; gap: 0.65rem; }
  .admin-card-table tr {
    display: grid; padding: 0.7rem; border: 1px solid #e1e4e8;
    border-radius: 0.78rem; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / 0.025);
  }
  .admin-card-table td {
    min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 0.42rem 0.2rem; border: 0; text-align: right !important; overflow-wrap: anywhere;
  }
  .admin-card-table td + td { border-top: 1px solid #f0f1f3; }
  .admin-card-table td::before {
    content: attr(data-label); flex: 0 0 5.8rem; color: #7c838d;
    font-size: var(--text-2xs); font-weight: 680; letter-spacing: 0.035em; text-align: left; text-transform: uppercase;
  }
  .admin-card-table td[data-label=""]::before { display: none; }
  .admin-card-table td[data-label=""] { justify-content: flex-end; }
  .admin-card-table td.admin-empty-cell { display: block; padding: 1rem; text-align: center !important; }
  .admin-card-table td.admin-empty-cell::before { display: none; }
  .admin-card-table td .row { justify-content: flex-end; flex-wrap: wrap; }
  .admin-card-table td.admin-cell-control > .input,
  .admin-card-table td.admin-cell-control > .select,
  .admin-card-table td.admin-cell-control > .textarea { flex: 1 1 auto; width: min(13rem, 100%) !important; }
  .admin-card-table td.admin-cell-form { display: grid; grid-template-columns: 5.8rem minmax(0, 1fr); text-align: left !important; }
  .admin-card-table td.admin-cell-form::before { grid-column: 1; }
  .admin-card-table td.admin-cell-form > * { grid-column: 2; min-width: 0; }
  .admin-card-table td.admin-cell-form form.row {
    display: grid; grid-template-columns: minmax(4.5rem, 0.7fr) minmax(7rem, 1fr); gap: 0.4rem; width: 100%;
  }
  .admin-card-table td.admin-cell-form form.row > .input,
  .admin-card-table td.admin-cell-form form.row > .select { width: 100% !important; min-width: 0; }
  .admin-card-table td.admin-cell-form form.row > .btn { grid-column: 1 / -1; width: 100%; }
  .admin-card-table .badge { flex: 0 0 auto; }
  .admin-table-hint.is-visible { display: flex; }
  .admin-form-actions {
    position: sticky; z-index: 20; bottom: calc(4.55rem + env(safe-area-inset-bottom));
    margin: 0 -0.75rem; padding: 0.65rem 0.75rem;
    border-top: 1px solid #e1e4e8; background: rgb(244 245 247 / 0.94); backdrop-filter: blur(14px);
  }
  .admin-form-actions .btn { flex: 1; }
}

@media (min-width: 768px) {
  .admin-head { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-head-actions { justify-content: flex-end; }
  .admin-main-inner { padding: 1.5rem; }
  .admin-contextbar {
    min-height: var(--admin-top); display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
    padding-inline: 1.5rem; border-bottom: 1px solid #e1e4e8; background: rgb(255 255 255 / 0.7);
    color: var(--muted); font-size: var(--text-xs); backdrop-filter: blur(12px);
  }
  .admin-contextbar a:hover { color: var(--ink); }
  .admin-store-state { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--success); font-weight: 650; }
  .admin-store-state > span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent); }
  .admin-store-state.is-warning { color: var(--warning); }
  .admin-live-alert { bottom: 1rem; }
  .admin-offline-banner { top: 0.75rem; }
  .admin-form-state { right: 1rem; bottom: 1rem; left: auto; transform: none; }
}

@media (min-width: 1024px) {
  .admin { padding-bottom: 0; }
  .admin-mobilebar, .admin-mobile-dock, .admin-menu-close, .admin-drawer-overlay { display: none; }
  .admin-shell { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); }
  .admin-side {
    position: sticky; z-index: 40; inset: 0 auto auto 0; width: auto; height: 100vh; min-height: 100vh;
    transform: none; box-shadow: none; padding: 1rem 0.875rem;
  }
  .admin-side-head { padding-bottom: 1.25rem; }
  .admin-main-inner { padding: 1.75rem 2rem 3rem; }
  .admin-order-layout { grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr); gap: 1.25rem; }
  .admin-order-sidebar { position: sticky; top: calc(var(--admin-top) + 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  .admin-side, .admin-drawer-overlay, .admin-nav a, .stat { transition: none; }
}

/* Admin sign-in is intentionally separate from the operating workspace. */
.admin-login {
  --admin-side: #111318;
  --admin-blue: #315cec;
  min-height: 100vh; margin: 0; padding: 0; background: var(--admin-side, #111318);
  color: var(--ink); font-family: var(--font-sans);
}
.admin-login-shell { min-height: 100vh; display: grid; }
.admin-login-intro {
  display: none; padding: 3rem; color: #fff; background:
    radial-gradient(circle at 15% 85%, rgb(49 92 236 / 0.28), transparent 36%),
    radial-gradient(circle at 80% 15%, rgb(255 255 255 / 0.08), transparent 28%), #111318;
}
.admin-login-brand { display: inline-flex; align-items: center; gap: 0.75rem; color: #fff; }
.admin-login-brand > span:last-child { display: grid; }
.admin-login-brand strong { font-size: var(--text-base); }
.admin-login-brand small { color: rgb(255 255 255 / 0.45); font-size: var(--text-xs); }
.admin-login-intro h1 { max-width: 34rem; margin-top: 0.5rem; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 0.98; letter-spacing: -0.055em; }
.admin-login-intro div > p:last-child { max-width: 31rem; margin-top: 1.2rem; color: rgb(255 255 255 / 0.62); font-size: var(--text-lg); }
.admin-login-eyebrow { color: rgb(255 255 255 / 0.45); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.admin-login-foot { align-self: end; color: rgb(255 255 255 / 0.38); font-size: var(--text-xs); }
.admin-login-form-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: #f4f5f7;
}
.admin-login-card {
  width: min(27rem, 100%); display: grid; gap: 1.15rem; padding: 1.35rem;
  border: 1px solid #e0e3e8; border-radius: 1rem; background: #fff;
  box-shadow: 0 22px 60px rgb(15 23 42 / 0.1);
}
.admin-login-card h2 { margin-top: 0.2rem; font-size: var(--text-2xl); letter-spacing: -0.035em; }
.admin-login-card .input { min-height: 3rem; border-radius: 0.65rem; }
.admin-password-field { position: relative; display: block; }
.admin-password-field .input { padding-right: 4rem; }
.admin-password-field button {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  min-width: 3.2rem; min-height: 2.25rem; border: 0; border-radius: 0.5rem;
  background: #f1f3f5; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 650; cursor: pointer;
}
@media (min-width: 900px) {
  .admin-login-shell { grid-template-columns: minmax(0, 1.1fr) minmax(25rem, 0.9fr); }
  .admin-login-intro { display: flex; flex-direction: column; justify-content: space-between; }
  .admin-login-form-wrap { padding: 2rem; }
  .admin-login-card { padding: 2rem; }
}

@media print {
  .no-print { display: none !important; }
  body { background: #fff; padding: 0; }
  /* The fixed overlays were missing: a printed order/invoice carried the
     WhatsApp button and any live flash message across the page. */
  .admin-side, .header, .bottomnav, .footer,
  .whatsapp-fab, .stickybuy, .flashes, .announce { display: none !important; }
  .admin-shell { grid-template-columns: 1fr; }
  .panel, .card { border: 0; }
  .checkout-layout { display: block !important; }
  .checkout-summary { position: static !important; margin-top: 1rem; }
  h1, h2, h3, .panel, .lineitem { break-inside: avoid; }
}


/* ==========================================================================
   AURÉ colour pass
   --------------------------------------------------------------------------
   The base system is deliberately quiet: cream, warm black, one gold. This
   block adds colour in a handful of fixed places so it reads as brand rather
   than noise. Every rule keys off the world tokens (--accent, --accent-wash,
   --accent-text), so the fashion world warms towards gold and blush while the
   cosmetics world keeps its sage, without a single cosmetics-only override.
   Contrast: gold on ink 8:1, gold-deep on paper 6.5:1 and on cream 5.5:1,
   cream on ink 14.5:1, muted copy on the cream wash 5:1.
   ========================================================================== */

:root {
  --muted-on-wash: #5f5f68;  /* muted copy on the cream wash, 5.0:1           */
  --blush: #f3dfd6;          /* the pink flare set, lifted into a wash        */
  --blush-soft: #f8ece6;
  --band-from: #fbf5ef;      /* editorial band: cream down to blush           */
  --band-to: #f6ebe4;
  --on-ink: #e9e1d5;         /* cream text on the brand-black footer, 11.6:1  */
  --on-ink-muted: #a9a094;   /* 6.4:1 on brand black                          */
}

::selection { background: var(--gold); color: var(--ink); }

/* --- announcement + header ------------------------------------------------ */

/* A gold hairline between the black bar and the white header: the logo's own
   two colours meeting, and the first thing on every page. */
.announce { border-bottom-color: var(--gold); }

/* Active world tab: a short gold underline instead of only bolder text. */
.worldtab { position: relative; }
.worldtab.is-active::after {
  content: '';
  position: absolute;
  left: 0.6875rem; right: 0.6875rem; bottom: 0.0625rem;
  height: 2px; border-radius: 2px;
  background: var(--gold);
}

/* Bag and saved counts in gold: the one thing in the header worth a glance. */
.pill-count { background: var(--gold); color: var(--ink); }

/* Mobile tab bar: the current section in the world's deep accent (AA on paper). */
.bottomnav a.is-active { color: var(--accent-text); }
.bottomnav a.is-active svg { color: var(--accent); }

/* --- editorial band -------------------------------------------------------- */

/* One warm gradient across the two stacked bands: the top band runs cream to
   blush and the chip band picks up exactly where it stops, so the seam stays
   invisible and the pair still reads as one panel. */
.band-top { background: linear-gradient(180deg, var(--band-from) 0%, var(--band-to) 100%); }
.band-bottom { background: var(--band-to); }

/* Each world's photo sits in a ring of its own accent, so the two cards are
   told apart by colour before the copy is read. */
.worldcard-media {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, var(--paper));
  transition: box-shadow var(--fast) var(--ease);
}
.worldcard:hover .worldcard-media {
  box-shadow: 0 0 0 3px var(--accent);
}
.worldcard-cta { color: var(--accent-text); }
.worldcard-cta svg { color: var(--accent); }

/* Quick-pick chips on the band: warm border, gold on hover. */
.band .chip { border-color: color-mix(in srgb, var(--gold) 32%, var(--line-strong)); }
.band .chip:hover { border-color: var(--gold); background: var(--paper); }

/* --- section heads --------------------------------------------------------- */

/* A short accent rule above every section title and page display heading:
   gold in fashion, sage in cosmetics. */
.section-title::before,
.display::before {
  content: '';
  display: block;
  width: 1.75rem; height: 2px;
  margin-bottom: 0.625rem;
  border-radius: 2px;
  background: var(--accent);
}
.seeall { color: var(--accent-text); }
.seeall svg { color: var(--accent); }

/* --- cards and badges ------------------------------------------------------ */

/* "New" was a cream pill with gold text: on photography it vanished. Solid
   gold with ink text stays legible on any picture, and gold IS the new-in
   colour of the brand. The cosmetics world's sage wash is kept as it was. */
.badge-new { background: var(--gold); color: var(--ink); }
[data-world='cosmetics'] .badge-new { background: var(--accent-wash); color: var(--accent-text); }

/* Mood cards: the seeded tone fills the card; the copy sits in ink so it
   reads on every tone, and a small accent arrow says "this goes somewhere". */
.moodcard { position: relative; border-color: transparent; }
.moodcard .h3 { color: var(--ink); }
.moodcard .muted { color: var(--ink-soft); }
.moodcard::after {
  content: '→';
  position: absolute; right: 1rem; bottom: 0.75rem;
  font-size: var(--text-base); font-weight: 600;
  color: var(--gold-deep);
  transition: transform var(--fast) var(--ease);
}
.moodcard:hover::after { transform: translateX(3px); }

/* Bundles: a cream wash and a gold edge, so "buy it together" is a warmer
   panel than a plain product card. */
.bundlecard {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.bundlecard .chip { background: var(--paper); }
/* Muted grey lost AA on the wash; one step darker keeps the crossed-out
   price quiet and readable. Same for the panel copy on the product page. */
.bundlecard .price-was, .bundlecard .muted,
.pdp-buy .panel .muted, .pdp-buy .panel .hint { color: var(--muted-on-wash); }

/* --- product page ---------------------------------------------------------- */

.pdp-buy .panel {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.pdp-buy .panel .hint a { color: var(--accent-text); font-weight: 550; }
#stock-note { color: var(--success); font-weight: 550; }

/* --- footer ---------------------------------------------------------------- */

/* The logo's own arrangement — cream letters and a gold accent on warm black —
   closes every page. Headings in gold, links in cream, small print muted. */
.footer {
  background: var(--brand-black);
  border-top: 0;
  color: var(--on-ink);
}
.footer h4 { color: var(--gold); }
.footer a { color: var(--on-ink); }
.footer a:hover { color: var(--cream); }
.footer .divider { background: rgb(255 255 255 / 0.12); }
.footer .muted { color: var(--on-ink-muted); }