/* ==========================================================================
   FYN STORE — 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 two worlds share this language and differ only in a handful of tokens
   remapped under [data-world]:

     fashion — warmer canvas, softer radii, more air
     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: #0b0b0c;
  --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;

  --accent: #8c5e3c;
  --accent-wash: #f3ece3;

  /* 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           */
  --draw: 420ms;    /* the pin leader. One gesture owns this. Never reuse.  */

  --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                                   */
  --hold: 340ms;    /* pin price delay — the one intentional overlap        */

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

[data-world='fashion'] {
  --canvas: #faf7f3;
  --line: #ece4da;
  --accent: #8c5e3c;
  --accent-wash: #f3ece3;
  --radius-card: var(--radius-xl);
  --radius-control: var(--radius-pill);
}

[data-world='tech'] {
  --canvas: #f6f7f9;
  --line: #e3e7ec;
  --accent: #1f5fe0;
  --accent-wash: #eaeff7;
  --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(--ink);
  border-bottom: 1px solid var(--ink);
  color: var(--paper);
  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 { 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.35rem;
  width: auto;
  max-width: none;
  display: block;
}
@media (min-width: 768px) { .logo img { height: 1.7rem; } }
.logo b { font-weight: 400; }

.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;
  grid-template-columns: repeat(5, 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(--info-wash); color: var(--info); }
.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; }
}

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

.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; }

.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 {
  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 h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); 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, shown until the
   full image lands on the slow 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; } }

/* ==========================================================================
   REDUCED MOTION — the site-wide safety net
   --------------------------------------------------------------------------
   Every animation and transition on the site is shortened here, so this
   block, not JavaScript, is the mechanism.

   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: #727984;
  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; }
}