/* =========================================================================
   vitro - design system
   Token-based CSS. No build step, no CDN, no runtime CSS generation.
   Replaces the previous Tailwind CDN (~350KB of render-blocking JS).

   Cascade layers, in order:
     tokens -> reset -> base -> layout -> components -> utilities
   ========================================================================= */

@layer tokens, reset, base, layout, components, utilities;

/* =========================================================================
   1. TOKENS
   ========================================================================= */
@layer tokens {
  :root {
    /* ---- brand ramp (plum) ---- */
    --plum-50:  #F6EFF4;
    --plum-100: #EAD9E4;
    --plum-200: #D4B3CB;
    --plum-300: #B885A9;
    --plum-400: #8E4E7C;
    --plum-500: #5B2350;
    --plum-600: #4C1D43;
    --plum-700: #3B1634;
    --plum-800: #2A1025;
    --plum-900: #1A0A17;

    /* ---- gold ---- */
    --gold-100: #F7EBD5;
    --gold-300: #E0C084;
    --gold-500: #C9973E;
    --gold-700: #8A6626;
    --gold-900: #3F2C0C;

    /* ---- coral (accent / action) ---- */
    --coral-100: #FDE5E1;
    --coral-300: #F29C8B;
    --coral-500: #E8553E;
    --coral-600: #CE4128;
    --coral-700: #A5321D;
    /* Deep enough to sit as text on the light coral used in dark mode
       (6.12:1); coral-700 there measures only 3.22:1. */
    --coral-900: #5C1B10;

    /* ---- warm neutrals ---- */
    --sand-50:  #FDFAF6;
    --sand-100: #F7F1E8;
    --sand-200: #F0E7D8;
    --sand-300: #E3D7C4;
    --sand-400: #DCD2C3;
    --sand-600: #6E6068;
    --sand-800: #3A3038;
    --sand-900: #241C22;

    /* ---- status ---- */
    --success-bg: #E3F2E7; --success-fg: #1F6B36;
    --warning-bg: #FCF0D8; --warning-fg: #8A6626;
    --danger-bg:  #FDE5E1; --danger-fg:  #A5321D;
    --info-bg:    #E4E9F5; --info-fg:    #2E4A8F;

    /* ---- semantic (light) ---- */
    --c-bg:              var(--sand-100);
    --c-bg-elevated:     #FFFFFF;
    --c-surface:         #FFFFFF;
    --c-surface-2:       var(--sand-200);
    --c-surface-3:       var(--sand-300);
    --c-text:            var(--sand-900);
    --c-text-muted:      var(--sand-600);
    --c-text-inverse:    #FFFFFF;
    --c-border:          var(--sand-400);
    --c-border-strong:   var(--sand-600);

    --c-primary:         var(--plum-500);
    --c-primary-hover:   var(--plum-400);
    --c-primary-active:  var(--plum-600);
    --c-on-primary:      #FFFFFF;
    --c-primary-soft:    var(--plum-50);

    /* coral-600, not coral-500: white text on coral-500 is only 3.62:1,
       which fails WCAG AA for the 16px button labels that sit on it.
       coral-600 measures 4.76:1 and is still unmistakably the brand coral. */
    --c-accent:          var(--coral-600);
    --c-accent-hover:    var(--coral-700);
    --c-on-accent:       #FFFFFF;
    --c-accent-soft:     var(--coral-100);
    /* The undimmed brand coral, for decoration only - never behind text. */
    --c-accent-bright:   var(--coral-500);

    --c-gold:            var(--gold-700);
    --c-gold-soft:       var(--gold-100);

    --c-overlay:         rgb(26 10 23 / 0.55);
    --c-focus:           var(--plum-400);

    /* ---- typography ---- */
    --font-headline: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-body: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
                 "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

    --text-2xs: 0.6875rem;
    --text-xs:  0.75rem;
    --text-sm:  0.875rem;
    --text-md:  1rem;
    --text-lg:  clamp(1.0625rem, 0.99rem + 0.35vw, 1.1875rem);
    --text-xl:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.5rem + 1.9vw, 3rem);

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.6;

    /* ---- space (4px base) ---- */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
    --sp-4: 1rem;     --sp-5: 1.25rem;  --sp-6: 1.5rem;
    --sp-8: 2rem;     --sp-10: 2.5rem;  --sp-12: 3rem;
    --sp-16: 4rem;    --sp-20: 5rem;

    /* ---- radii ---- */
    --r-sm: 0.375rem; --r-md: 0.625rem; --r-lg: 0.875rem;
    --r-xl: 1rem;     --r-2xl: 1.25rem; --r-3xl: 1.75rem;
    --r-full: 999px;

    /* ---- elevation (warm-tinted) ---- */
    --sh-xs: 0 1px 2px rgb(58 48 56 / 0.06);
    --sh-sm: 0 1px 3px rgb(58 48 56 / 0.08), 0 1px 2px rgb(58 48 56 / 0.04);
    --sh-md: 0 4px 12px rgb(58 48 56 / 0.08), 0 2px 4px rgb(58 48 56 / 0.04);
    --sh-lg: 0 12px 28px rgb(58 48 56 / 0.12), 0 4px 8px rgb(58 48 56 / 0.05);
    --sh-xl: 0 24px 48px rgb(26 10 23 / 0.18);

    /* ---- motion ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 120ms;
    --dur: 200ms;
    --dur-slow: 380ms;

    /* ---- layout ---- */
    --shell-max: 78rem;
    --content-max: 46rem;
    --header-h: 3.5rem;
    --nav-h: 3.875rem;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);

    --z-nav: 60; --z-header: 50; --z-overlay: 80; --z-toast: 100;

    color-scheme: light;
  }

  /* Dark palette, defined once and applied to both triggers.
     System preference only applies when the user has not forced light. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --c-bg:            var(--plum-900);
      --c-bg-elevated:   #241322;
      --c-surface:       #241322;
      --c-surface-2:     #2E1A2B;
      --c-surface-3:     #3A2336;
      --c-text:          #F4EAF0;
      --c-text-muted:    #B79FAF;
      --c-text-inverse:  var(--plum-900);
      --c-border:        #432A3E;
      --c-border-strong: #6A4C61;

      --c-primary:       var(--plum-200);
      --c-primary-hover: var(--plum-100);
      --c-primary-active: var(--plum-300);
      --c-on-primary:    var(--plum-800);
      --c-primary-soft:  #332030;

      --c-accent:        var(--coral-300);
      --c-accent-hover:  #F7B4A6;
      --c-on-accent:     var(--coral-900);
      --c-accent-soft:   #47251F;

      --c-gold:          var(--gold-300);
      --c-gold-soft:     #3B2E15;

      --success-bg: #1D3324; --success-fg: #8FD9A6;
      --warning-bg: #3B2E15; --warning-fg: #E9C77E;
      --danger-bg:  #47251F; --danger-fg:  #F5A895;
      --info-bg:    #1E2740; --info-fg:    #A9BEEE;

      --c-overlay: rgb(10 4 9 / 0.7);
      --c-focus:   var(--plum-200);

      --sh-xs: 0 1px 2px rgb(0 0 0 / 0.3);
      --sh-sm: 0 1px 3px rgb(0 0 0 / 0.35);
      --sh-md: 0 4px 12px rgb(0 0 0 / 0.4);
      --sh-lg: 0 12px 28px rgb(0 0 0 / 0.5);
      --sh-xl: 0 24px 48px rgb(0 0 0 / 0.6);

      color-scheme: dark;
    }
  }

  :root[data-theme="dark"] {
    --c-bg:            var(--plum-900);
    --c-bg-elevated:   #241322;
    --c-surface:       #241322;
    --c-surface-2:     #2E1A2B;
    --c-surface-3:     #3A2336;
    --c-text:          #F4EAF0;
    --c-text-muted:    #B79FAF;
    --c-text-inverse:  var(--plum-900);
    --c-border:        #432A3E;
    --c-border-strong: #6A4C61;

    --c-primary:       var(--plum-200);
    --c-primary-hover: var(--plum-100);
    --c-primary-active: var(--plum-300);
    --c-on-primary:    var(--plum-800);
    --c-primary-soft:  #332030;

    --c-accent:        var(--coral-300);
    --c-accent-hover:  #F7B4A6;
    --c-on-accent:     var(--coral-900);
    --c-accent-soft:   #47251F;

    --c-gold:          var(--gold-300);
    --c-gold-soft:     #3B2E15;

    --success-bg: #1D3324; --success-fg: #8FD9A6;
    --warning-bg: #3B2E15; --warning-fg: #E9C77E;
    --danger-bg:  #47251F; --danger-fg:  #F5A895;
    --info-bg:    #1E2740; --info-fg:    #A9BEEE;

    --c-overlay: rgb(10 4 9 / 0.7);
    --c-focus:   var(--plum-200);

    --sh-xs: 0 1px 2px rgb(0 0 0 / 0.3);
    --sh-sm: 0 1px 3px rgb(0 0 0 / 0.35);
    --sh-md: 0 4px 12px rgb(0 0 0 / 0.4);
    --sh-lg: 0 12px 28px rgb(0 0 0 / 0.5);
    --sh-xl: 0 24px 48px rgb(0 0 0 / 0.6);

    color-scheme: dark;
  }
}

/* =========================================================================
   2. RESET
   ========================================================================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--sp-4));
  }

  body {
    min-height: 100svh;
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img, picture, svg, video, canvas { display: block; max-width: 100%; }
  img, video { height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  table { border-collapse: collapse; width: 100%; }

  dialog {
    border: none; padding: 0; color: inherit;
    max-width: none; max-height: none; background: transparent;
  }
  dialog::backdrop { background: var(--c-overlay); }

  :target { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

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

/* =========================================================================
   3. BASE
   ========================================================================= */
@layer base {
  body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: var(--text-md);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-headline);
    font-weight: 500;
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
    font-optical-sizing: auto;
  }
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }

  /* Keyboard-only focus ring - WCAG 2.4.7 / 2.4.11 */
  :focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }
  :focus:not(:focus-visible) { outline: none; }

  ::selection { background: var(--c-primary); color: var(--c-on-primary); }

  * { scrollbar-color: var(--c-border-strong) transparent; scrollbar-width: thin; }

  svg.icon {
    width: 1.5rem; height: 1.5rem; flex: none;
    stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
    fill: none;
  }
  svg.icon--sm { width: 1.125rem; height: 1.125rem; stroke-width: 2; }
  svg.icon--xs { width: 0.9375rem; height: 0.9375rem; stroke-width: 2.25; }
  svg.icon--lg { width: 2rem; height: 2rem; stroke-width: 1.5; }
  svg.icon--filled { fill: currentColor; }
}

/* =========================================================================
   4. LAYOUT
   ========================================================================= */
@layer layout {
  .shell { max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--sp-4); }
  @media (min-width: 48rem) { .shell { padding-inline: var(--sp-6); } }

  /* Reading / form column: stays narrow at every width on purpose
     (sacola, perfil). Sits under a full-width app bar. */
  .shell--content { max-width: var(--content-max); }

  /* Catalogue feed: a reading column on phones, but it must claim the
     full container on desktop - otherwise a 1280px screen renders three
     product columns inside a 736px box with dead space either side. */
  .shell--feed { max-width: var(--content-max); }
  @media (min-width: 64rem) { .shell--feed { max-width: var(--shell-max); } }

  /* Client pages: bottom tab bar on mobile, top nav from md up */
  .page-client {
    padding-top: calc(var(--header-h) + var(--safe-t));
    padding-bottom: calc(var(--nav-h) + var(--safe-b) + var(--sp-6));
  }
  @media (min-width: 48rem) {
    .page-client { padding-bottom: var(--sp-16); }
  }

  .page-admin { padding-bottom: var(--sp-16); }

  .stack { display: flex; flex-direction: column; }
  .stack > * + * { margin-top: var(--flow, var(--sp-4)); }

  .row { display: flex; align-items: center; gap: var(--sp-3); }
  .row--between { justify-content: space-between; }
  .row--wrap { flex-wrap: wrap; }

  .section { margin-block: var(--sp-8); }
  .section__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-3); margin-bottom: var(--sp-4);
  }
  .section__title { font-size: var(--text-lg); }

  /* Responsive auto grids - the core of the mobile-first rework.
     Cards size themselves; no per-breakpoint column juggling. */
  .grid-products {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  }
  @media (min-width: 30rem) {
    .grid-products { gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  }
  @media (min-width: 64rem) {
    .grid-products { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
  }

  .grid-stores {
    display: grid; gap: var(--sp-3);
    grid-template-columns: 1fr;
  }
  @media (min-width: 40rem) { .grid-stores { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64rem) { .grid-stores { grid-template-columns: repeat(3, 1fr); } }

  .grid-kpi {
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }

  .grid-orders {
    display: grid; gap: var(--sp-3);
    grid-template-columns: 1fr;
  }
  @media (min-width: 60rem) { .grid-orders { grid-template-columns: repeat(2, 1fr); } }

  /* Two-column split used on product detail from lg up */
  .split { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
  @media (min-width: 56rem) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); align-items: start; }
    .split__sticky { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
  }
}

/* =========================================================================
   5. COMPONENTS
   ========================================================================= */
@layer components {

  /* ---------- skip link (WCAG 2.4.1) ---------- */
  .skip-link {
    position: absolute; left: var(--sp-2); top: var(--sp-2);
    z-index: 200; transform: translateY(-200%);
    background: var(--c-primary); color: var(--c-on-primary);
    padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
    font-size: var(--text-sm); font-weight: 500;
    transition: transform var(--dur) var(--ease-out);
  }
  .skip-link:focus { transform: translateY(0); }

  /* ---------- app header ---------- */
  .app-header {
    position: fixed; inset-inline: 0; top: 0; z-index: var(--z-header);
    height: calc(var(--header-h) + var(--safe-t));
    padding-top: var(--safe-t);
    background: color-mix(in srgb, var(--c-bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--c-border);
  }
  .app-header__inner {
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
  }

  .brand {
    font-family: var(--font-headline);
    font-style: italic; font-weight: 600;
    font-size: 1.6rem; letter-spacing: -0.03em;
    color: var(--c-primary); line-height: 1;
  }
  .brand--sm { font-size: 1.25rem; }
  .brand--lg { font-size: clamp(2.5rem, 8vw, 3.25rem); }

  /* ---------- bottom tab bar (mobile) / top nav (desktop) ---------- */
  .tabbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-nav);
    background: color-mix(in srgb, var(--c-surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--c-border);
    padding-bottom: var(--safe-b);
  }
  .tabbar__inner {
    display: flex; align-items: stretch; justify-content: space-around;
    max-width: var(--content-max); margin-inline: auto;
    height: var(--nav-h);
  }
  .tab {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    position: relative; color: var(--c-text-muted);
    font-size: var(--text-2xs); font-weight: 500;
    min-height: 44px; /* WCAG 2.5.8 target size */
    transition: color var(--dur) var(--ease-out);
  }
  .tab:hover { color: var(--c-text); }
  .tab[aria-current="page"] { color: var(--c-primary); }
  .tab[aria-current="page"] .icon { stroke-width: 2.25; }
  .tab__badge {
    position: absolute; top: 6px; left: 50%; margin-left: 4px;
    min-width: 1.05rem; height: 1.05rem; padding-inline: 3px;
    border-radius: var(--r-full);
    background: var(--c-accent); color: var(--c-on-accent);
    font-size: 0.625rem; font-weight: 600; line-height: 1.05rem;
    text-align: center;
  }

  @media (min-width: 48rem) {
    .tabbar {
      position: fixed; top: 0; bottom: auto;
      inset-inline: 0; border-top: none;
      background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
      pointer-events: none; padding-bottom: 0;
      height: calc(var(--header-h) + var(--safe-t));
      padding-top: var(--safe-t);
      z-index: calc(var(--z-header) + 1);
    }
    .tabbar__inner {
      height: var(--header-h);
      max-width: var(--shell-max);
      padding-inline: var(--sp-6);
      justify-content: flex-end; align-items: center;
      gap: var(--sp-1); pointer-events: auto;
    }
    .tab {
      flex: none; flex-direction: row; gap: var(--sp-2);
      padding-inline: var(--sp-3); border-radius: var(--r-full);
      font-size: var(--text-sm); min-height: 2.5rem;
    }
    .tab:hover { background: var(--c-surface-2); }
    .tab[aria-current="page"] { background: var(--c-primary-soft); }
    .tab .icon { width: 1.15rem; height: 1.15rem; }
    .tab__badge { position: static; margin-left: 0; }
  }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    min-height: 2.75rem; padding: 0 var(--sp-5);
    border-radius: var(--r-full);
    font-size: var(--text-sm); font-weight: 500; line-height: 1;
    border: 1px solid transparent;
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
    text-align: center; white-space: nowrap;
  }
  .btn:active { transform: scale(0.97); }
  .btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5; cursor: not-allowed; transform: none;
  }

  .btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
  .btn--primary:hover:not(:disabled) { background: var(--c-primary-hover); }

  .btn--accent { background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--sh-sm); }
  .btn--accent:hover:not(:disabled) { background: var(--c-accent-hover); box-shadow: var(--sh-md); }

  .btn--outline { border-color: var(--c-border-strong); color: var(--c-text); }
  .btn--outline:hover:not(:disabled) { background: var(--c-surface-2); border-color: var(--c-text); }

  .btn--ghost { color: var(--c-text-muted); }
  .btn--ghost:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-text); }

  .btn--danger { background: var(--danger-bg); color: var(--danger-fg); }
  .btn--danger:hover:not(:disabled) { background: var(--c-accent); color: var(--c-on-accent); }

  .btn--block { width: 100%; }
  .btn--sm { min-height: 2.25rem; padding-inline: var(--sp-3); font-size: var(--text-xs); }
  .btn--lg { min-height: 3.25rem; padding-inline: var(--sp-8); font-size: var(--text-md); }

  /* icon-only: always keep a 44px hit area */
  .btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: var(--r-full);
    color: var(--c-text-muted);
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  }
  .btn-icon:hover { background: var(--c-surface-2); color: var(--c-text); }
  .btn-icon--sm { width: 2.25rem; height: 2.25rem; }
  .btn-icon--solid { background: var(--c-primary); color: var(--c-on-primary); }
  .btn-icon--solid:hover { background: var(--c-primary-hover); color: var(--c-on-primary); }
  .btn-icon--floating {
    background: color-mix(in srgb, var(--c-surface) 85%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--sh-sm);
  }
  .btn-icon--floating:hover { background: var(--c-surface); }
  .btn-icon.is-active { color: var(--c-accent); }

  /* ---------- cards ---------- */
  .card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-2xl);
    overflow: hidden;
  }
  .card--pad { padding: var(--sp-5); }
  .card--flat { box-shadow: none; }
  .card--interactive {
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
  }
  .card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-lg);
    border-color: var(--c-border-strong);
  }
  .card__body { padding: var(--sp-4); }
  .card__divided > * + * { border-top: 1px solid var(--c-border); }

  /* ---------- hero ---------- */
  .hero {
    position: relative; overflow: hidden;
    border-radius: var(--r-3xl);
    background: var(--c-primary);
    aspect-ratio: 4 / 3;
    isolation: isolate;
  }
  @media (min-width: 40rem) { .hero { aspect-ratio: 21 / 9; } }
  .hero__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.75;
    mix-blend-mode: luminosity; z-index: -1;
  }
  .hero__scrim {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top,
      color-mix(in srgb, var(--plum-900) 92%, transparent) 0%,
      color-mix(in srgb, var(--plum-900) 45%, transparent) 45%,
      transparent 100%);
  }
  .hero__content {
    position: relative; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--sp-5); gap: var(--sp-2);
  }
  @media (min-width: 40rem) { .hero__content { padding: var(--sp-8); max-width: 34rem; } }
  .hero__eyebrow {
    font-size: var(--text-xs); font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold-300);
  }
  .hero__title { color: #fff; font-size: var(--text-2xl); text-wrap: balance; }
  .hero__sub { color: rgb(255 255 255 / 0.82); font-size: var(--text-sm); max-width: 30rem; }

  /* ---------- chips / filter rail ---------- */
  .chips {
    display: flex; gap: var(--sp-2);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: var(--sp-2);
    margin-inline: calc(var(--sp-4) * -1);
    padding-inline: var(--sp-4);
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  @media (min-width: 48rem) {
    .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  }
  .chip {
    flex: none; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 2.25rem; padding: 0 var(--sp-4);
    border-radius: var(--r-full);
    border: 1px solid var(--c-border);
    background: var(--c-surface); color: var(--c-text-muted);
    font-size: var(--text-sm); font-weight: 500;
    text-transform: capitalize;
    transition: all var(--dur) var(--ease-out);
  }
  .chip:hover { border-color: var(--c-border-strong); color: var(--c-text); }
  .chip[aria-pressed="true"], .chip.is-active {
    background: var(--c-primary); border-color: var(--c-primary);
    color: var(--c-on-primary);
  }

  /* ---------- product card ---------- */
  .product { display: flex; flex-direction: column; height: 100%; }
  .product__media {
    position: relative; aspect-ratio: 3 / 4;
    background: var(--c-surface-2); overflow: hidden;
  }
  .product__img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .card--interactive:hover .product__img { transform: scale(1.04); }
  .product__fav { position: absolute; top: var(--sp-2); right: var(--sp-2); }
  .product__body {
    padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; gap: var(--sp-1);
  }
  .product__store {
    font-size: var(--text-2xs); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-gold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .product__name {
    font-size: var(--text-sm); font-weight: 500;
    line-height: var(--leading-snug);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .product__foot {
    margin-top: auto; padding-top: var(--sp-2);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  }
  .price {
    font-family: var(--font-headline); font-weight: 600;
    font-size: var(--text-md); color: var(--c-primary);
    letter-spacing: -0.02em;
  }
  .price--lg { font-size: var(--text-2xl); }

  /* ---------- store card ---------- */
  .store-card { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3); }
  .avatar {
    width: 3.25rem; height: 3.25rem; flex: none;
    border-radius: var(--r-full); object-fit: cover;
    background: var(--c-surface-2);
  }
  .avatar--lg { width: 5.5rem; height: 5.5rem; }
  .avatar--sm { width: 2.5rem; height: 2.5rem; }

  /* ---------- badges / pills ---------- */
  .badge {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: 0.2rem var(--sp-2); border-radius: var(--r-full);
    font-size: var(--text-xs); font-weight: 600; line-height: 1.4;
    white-space: nowrap;
  }
  .badge--novo      { background: var(--danger-bg);  color: var(--danger-fg); }
  .badge--confirmado{ background: var(--warning-bg); color: var(--warning-fg); }
  .badge--a_caminho { background: var(--info-bg);    color: var(--info-fg); }
  .badge--entregue  { background: var(--success-bg); color: var(--success-fg); }
  .badge--cancelado { background: var(--c-surface-2); color: var(--c-text-muted); }
  .badge--neutral   { background: var(--c-surface-2); color: var(--c-text-muted); }
  .badge--gold      { background: var(--c-gold-soft); color: var(--c-gold); }

  /* ---------- forms ---------- */
  .field { display: flex; flex-direction: column; gap: var(--sp-1); }
  .field__label {
    font-size: var(--text-xs); font-weight: 500; color: var(--c-text-muted);
  }
  .field__hint { font-size: var(--text-xs); color: var(--c-text-muted); }
  .field__error {
    font-size: var(--text-xs); color: var(--danger-fg); font-weight: 500;
    display: flex; align-items: center; gap: var(--sp-1);
  }

  .input, .select, .textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: var(--text-md); /* 16px avoids iOS zoom-on-focus */
    color: var(--c-text);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }
  .input::placeholder, .textarea::placeholder { color: var(--c-text-muted); opacity: 0.75; }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--c-border-strong); }
  .input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 20%, transparent);
  }
  .input[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--danger-fg);
  }
  .input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-fg) 20%, transparent);
  }
  .textarea { min-height: 6rem; resize: vertical; }
  .select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6068' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    background-size: 1.125rem;
    padding-right: var(--sp-10);
  }
  .checkbox-row {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: 2.75rem; cursor: pointer; font-size: var(--text-sm);
  }
  .checkbox-row input[type="checkbox"] {
    width: 1.15rem; height: 1.15rem; accent-color: var(--c-primary); cursor: pointer;
  }
  .input-group { display: flex; gap: var(--sp-2); }
  .form-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
  @media (min-width: 30rem) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

  /* ---------- quantity stepper ---------- */
  .stepper {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    background: var(--c-surface-2); border-radius: var(--r-full); padding: var(--sp-1);
  }
  .stepper button {
    width: 2rem; height: 2rem; border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center;
    color: var(--c-text); transition: background-color var(--dur) var(--ease-out);
  }
  .stepper button:hover:not(:disabled) { background: var(--c-surface); }
  .stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
  .stepper__value {
    min-width: 1.75rem; text-align: center;
    font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums;
  }

  /* ---------- admin nav ---------- */
  .admin-header {
    position: sticky; top: 0; z-index: var(--z-header);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
  }
  .admin-header__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); padding-block: var(--sp-3);
  }
  .admin-nav {
    display: flex; gap: var(--sp-1);
    overflow-x: auto; scrollbar-width: none;
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav a {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3); flex: none;
    font-size: var(--text-sm); font-weight: 500;
    color: var(--c-text-muted);
    border-bottom: 2px solid transparent;
    transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  }
  .admin-nav a:hover { color: var(--c-text); }
  .admin-nav a[aria-current="page"] {
    color: var(--c-primary); border-bottom-color: var(--c-primary);
  }

  /* ---------- KPI ---------- */
  .kpi { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
  .kpi__icon {
    width: 2.25rem; height: 2.25rem; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--sp-2);
  }
  .kpi__icon--primary { background: var(--c-primary-soft); color: var(--c-primary); }
  .kpi__icon--accent  { background: var(--c-accent-soft);  color: var(--c-accent); }
  .kpi__icon--gold    { background: var(--c-gold-soft);    color: var(--c-gold); }
  .kpi__icon--info    { background: var(--info-bg);        color: var(--info-fg); }
  .kpi__value {
    font-family: var(--font-headline); font-weight: 600;
    font-size: var(--text-xl); letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .kpi__label { font-size: var(--text-xs); color: var(--c-text-muted); }

  /* ---------- order ---------- */
  .order__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-3); margin-bottom: var(--sp-3);
  }
  .order__id { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
  .order__meta { font-size: var(--text-xs); color: var(--c-text-muted); }
  .order__lines {
    border-top: 1px solid var(--c-border);
    padding-top: var(--sp-3); margin-bottom: var(--sp-3);
    display: flex; flex-direction: column; gap: var(--sp-1);
  }
  .order__line { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--text-sm); }
  .order__line span:first-child { color: var(--c-text-muted); }
  .order__total {
    display: flex; justify-content: space-between;
    margin-top: var(--sp-2); padding-top: var(--sp-2);
    border-top: 1px solid var(--c-border);
    font-size: var(--text-sm); font-weight: 600;
  }

  /* ---------- cart summary (sticky on mobile) ---------- */
  .summary-sticky {
    position: sticky;
    bottom: calc(var(--nav-h) + var(--safe-b) + var(--sp-3));
    z-index: 10;
  }
  @media (min-width: 48rem) {
    .summary-sticky { position: sticky; bottom: auto; top: calc(var(--header-h) + var(--sp-6)); }
  }

  /* ---------- modal / bottom sheet ---------- */
  .modal {
    margin: 0; width: 100%; max-width: none;
    position: fixed; inset: auto 0 0 0;
    background: var(--c-surface);
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    box-shadow: var(--sh-xl);
    max-height: min(88svh, 46rem);
    display: flex; flex-direction: column;
    padding-bottom: var(--safe-b);
  }
  /* The author-level `display: flex` above outranks the user-agent rule
     `dialog:not([open]) { display: none }`, so without this a closed dialog
     renders inline in the page instead of staying hidden. */
  .modal:not([open]) { display: none; }
  .modal[open] { animation: sheet-up var(--dur-slow) var(--ease-out); }
  @media (min-width: 40rem) {
    .modal {
      inset: 50% auto auto 50%;
      transform: translate(-50%, -50%);
      width: min(30rem, calc(100vw - var(--sp-8)));
      border-radius: var(--r-2xl);
    }
    .modal[open] { animation: modal-in var(--dur) var(--ease-out); }
  }
  .modal__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-5) var(--sp-3);
  }
  .modal__title { font-size: var(--text-lg); }
  .modal__body { padding: 0 var(--sp-5) var(--sp-5); overflow-y: auto; }
  .modal__grabber {
    width: 2.25rem; height: 0.25rem; border-radius: var(--r-full);
    background: var(--c-border); margin: var(--sp-3) auto 0;
  }
  @media (min-width: 40rem) { .modal__grabber { display: none; } }

  @keyframes sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  @keyframes modal-in {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }

  /* ---------- toast ---------- */
  .toaster {
    position: fixed; z-index: var(--z-toast);
    left: 50%; transform: translateX(-50%);
    bottom: calc(var(--nav-h) + var(--safe-b) + var(--sp-4));
    display: flex; flex-direction: column; gap: var(--sp-2);
    width: min(26rem, calc(100vw - var(--sp-8)));
    pointer-events: none;
  }
  @media (min-width: 48rem) {
    .toaster { bottom: var(--sp-6); left: auto; right: var(--sp-6); transform: none; }
  }
  .toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    background: var(--sand-900); color: var(--sand-50);
    box-shadow: var(--sh-lg);
    font-size: var(--text-sm);
    animation: toast-in var(--dur) var(--ease-out);
  }
  :root[data-theme="dark"] .toast { background: var(--c-surface-3); color: var(--c-text); }
  .toast--success { background: var(--success-fg); color: #fff; }
  .toast--error   { background: var(--coral-700); color: #fff; }
  .toast.is-leaving { animation: toast-out var(--dur) var(--ease-in-out) forwards; }
  @keyframes toast-in  { from { opacity: 0; transform: translateY(0.75rem); } }
  @keyframes toast-out { to   { opacity: 0; transform: translateY(0.5rem); } }

  /* ---------- empty state ---------- */
  .empty {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: var(--sp-3);
    padding: var(--sp-12) var(--sp-4);
    color: var(--c-text-muted);
  }
  .empty__icon {
    width: 3.5rem; height: 3.5rem; border-radius: var(--r-full);
    background: var(--c-surface-2); color: var(--c-text-muted);
    display: flex; align-items: center; justify-content: center;
  }
  .empty__title { font-size: var(--text-lg); color: var(--c-text); }
  .empty p { font-size: var(--text-sm); max-width: 26rem; }

  /* ---------- skeleton ---------- */
  .skeleton {
    background: linear-gradient(90deg,
      var(--c-surface-2) 25%, var(--c-surface-3) 50%, var(--c-surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: var(--r-md);
  }
  @keyframes shimmer { to { background-position: -200% 0; } }
  .skeleton--card { aspect-ratio: 3 / 4; border-radius: var(--r-2xl); }
  .skeleton--line { height: 0.75rem; }
  .skeleton--text { height: 1rem; margin-block: var(--sp-1); }

  /* ---------- banner / alert ---------- */
  .alert {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    font-size: var(--text-sm);
    border: 1px solid transparent;
  }
  .alert--info    { background: var(--info-bg);    color: var(--info-fg); }
  .alert--warning { background: var(--warning-bg); color: var(--warning-fg); }
  .alert--danger  { background: var(--danger-bg);  color: var(--danger-fg); }
  .alert--success { background: var(--success-bg); color: var(--success-fg); }
  .alert__title { font-weight: 600; }

  /* ---------- connection pill (backend online/offline) ---------- */
  .conn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--text-2xs); color: var(--c-text-muted);
    padding: 0.15rem var(--sp-2); border-radius: var(--r-full);
    background: var(--c-surface-2);
  }
  .conn__dot { width: 0.5rem; height: 0.5rem; border-radius: var(--r-full); background: var(--c-text-muted); }
  .conn--online  .conn__dot { background: var(--success-fg); }
  .conn--offline .conn__dot { background: var(--warning-fg); }

  /* ---------- timeline (order status) ---------- */
  .timeline { display: flex; flex-direction: column; gap: 0; }
  .timeline__step {
    display: flex; gap: var(--sp-3); position: relative;
    padding-bottom: var(--sp-5);
  }
  .timeline__step:last-child { padding-bottom: 0; }
  .timeline__step::before {
    content: ""; position: absolute;
    left: 0.6875rem; top: 1.5rem; bottom: 0;
    width: 2px; background: var(--c-border);
  }
  .timeline__step:last-child::before { display: none; }
  .timeline__dot {
    width: 1.375rem; height: 1.375rem; flex: none; border-radius: var(--r-full);
    border: 2px solid var(--c-border); background: var(--c-surface);
    display: flex; align-items: center; justify-content: center;
    color: var(--c-on-primary); z-index: 1;
  }
  .timeline__step.is-done .timeline__dot { background: var(--c-primary); border-color: var(--c-primary); }
  .timeline__step.is-done::before { background: var(--c-primary); }
  .timeline__label { font-size: var(--text-sm); font-weight: 500; }
  .timeline__step:not(.is-done) .timeline__label { color: var(--c-text-muted); }
  .timeline__time { font-size: var(--text-xs); color: var(--c-text-muted); }
}

/* =========================================================================
   6. UTILITIES
   ========================================================================= */
@layer utilities {
  .u-hidden { display: none !important; }

  /* Accessible hiding - content stays available to screen readers */
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .u-balance { text-wrap: balance; }
  .u-center { text-align: center; }
  .u-right { text-align: right; }

  .u-muted { color: var(--c-text-muted); }
  .u-primary { color: var(--c-primary); }
  .u-accent { color: var(--c-accent); }
  .u-gold { color: var(--c-gold); }

  .u-xs { font-size: var(--text-xs); }
  .u-sm { font-size: var(--text-sm); }
  .u-lg { font-size: var(--text-lg); }
  .u-medium { font-weight: 500; }
  .u-semibold { font-weight: 600; }
  .u-nums { font-variant-numeric: tabular-nums; }
  .u-italic { font-style: italic; }

  .u-flex-1 { flex: 1; min-width: 0; }
  .u-mt-auto { margin-top: auto; }
  .u-mb-0 { margin-bottom: 0; }
  .u-gap-1 { gap: var(--sp-1); }
  .u-gap-2 { gap: var(--sp-2); }
  .u-gap-3 { gap: var(--sp-3); }
  .u-gap-4 { gap: var(--sp-4); }

  .u-mt-2 { margin-top: var(--sp-2); }
  .u-mt-4 { margin-top: var(--sp-4); }
  .u-mt-6 { margin-top: var(--sp-6); }
  .u-mt-8 { margin-top: var(--sp-8); }
  .u-mb-2 { margin-bottom: var(--sp-2); }
  .u-mb-4 { margin-bottom: var(--sp-4); }
  .u-mb-6 { margin-bottom: var(--sp-6); }
  .u-mb-8 { margin-bottom: var(--sp-8); }

  /* Wide content must scroll inside itself, never the page body */
  .u-scroll-x { overflow-x: auto; }

  .u-desktop-only { display: none; }
  @media (min-width: 48rem) {
    .u-desktop-only { display: revert; }
    .u-mobile-only { display: none !important; }
  }
}