/* ═══════════════════════════════════════════════════════════════
   AURAVOX · Brand System v2
   Methodology: Three-Tier Token Architecture

   ╔══════════════════════════════════════════════════════════╗
   ║  TIER 1 — BRAND                                         ║
   ║  Raw values. No role, no UI assignment.                  ║
   ║  · Color scales  · Font families  · Number scale        ║
   ╠══════════════════════════════════════════════════════════╣
   ║  TIER 2 — ALIAS                                         ║
   ║  Brand values assigned to roles.                        ║
   ║  primary · neutral · info · error · success · warning   ║
   ║  Border widths and radii reference the number scale.    ║
   ╠══════════════════════════════════════════════════════════╣
   ║  TIER 3 — MAPS  (what CSS classes consume)              ║
   ║  --surface-*  --text-*  --border-*  --icon-*            ║
   ║  Rule: components reference ONLY Tier 3 tokens.         ║
   ╚══════════════════════════════════════════════════════════╝

   Dark-mode rule: brand colours (maroon, beige) are FIXED —
   they do not invert. Neutrals invert. Status colours adjust.
   ═══════════════════════════════════════════════════════════════ */


/* ─── FONT FACES ────────────────────────────────────────────── */
@font-face {
  font-family: 'Coconat';
  src: url('../coconat_font/Coconat-Regular.woff2') format('woff2'),
       url('../coconat_font/Coconat-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Coconat';
  src: url('../coconat_font/Coconat-Demi.woff2') format('woff2'),
       url('../coconat_font/Coconat-Demi.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Coconat';
  src: url('../coconat_font/Coconat-Bold.woff2') format('woff2'),
       url('../coconat_font/Coconat-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ════════════════════════════════════════════════════════════════
   TIER 1 · BRAND — Raw values in purest form
   ════════════════════════════════════════════════════════════════ */
:root {

  /* ────────────────────────────────────────────────────────────
     1A · COLOR SCALES
     Generated via opacity-on-white (lighter tints) and
     opacity-on-black (darker shades), then colour-matched to
     opaque hex — no opacity values in the final scale.
     Higher number = darker. Brand anchor sits at 500.
     50 / 150 / 250 used when a step breaks the opacity interval.
     ────────────────────────────────────────────────────────────  */

  /* Maroon — primary brand colour */
  --maroon-50:  #faf0f2;
  --maroon-100: #f0d9de;
  --maroon-200: #daadb7;
  --maroon-300: #c07d8e;
  --maroon-400: #8a4358;
  --maroon-500: #401F28;   /* ★ brand anchor */
  --maroon-600: #311520;   /* darker — generated on-black */
  --maroon-700: #200e16;
  --maroon-800: #12080d;

  /* Beige — secondary brand colour */
  --beige-50:   #fdfcfb;
  --beige-100:  #faf8f6;
  --beige-200:  #f2ede8;
  --beige-300:  #ece6df;
  --beige-400:  #e4dcd3;
  --beige-500:  #E9E2DA;   /* ★ brand anchor */
  --beige-600:  #d0c8bf;
  --beige-700:  #b8b0a7;
  --beige-800:  #9e968e;
  --beige-900:  #7a6e68;

  /* Steel Blue — info / interactive accent */
  --blue-50:    #f0f4f7;
  --blue-100:   #dde8f0;
  --blue-200:   #C0CDD8;   /* ★ brand light blue (from brand-core) */
  --blue-300:   #97B3C4;
  --blue-400:   #6B96AE;
  --blue-500:   #3D6E8C;   /* ★ interactive anchor — WCAG AA on white */
  --blue-600:   #2f5a75;
  --blue-700:   #24475d;
  --blue-800:   #193446;

  /* ────────────────────────────────────────────────────────────
     1B · FONT FAMILIES   (string values only — no role yet)
     ────────────────────────────────────────────────────────────  */
  --font-coconat: 'Coconat', 'Georgia', serif;

  /* ────────────────────────────────────────────────────────────
     1C · NUMBER SCALE   (4px base unit)
     Everything numeric — spacing, radius, border width —
     derives from this one scale.

     Naming: every clean 4px multiple = a 100-step value.
       scale-25  = 1px   (quarter step, for border widths)
       scale-50  = 2px   (half step, for focus rings)
       scale-100 = 4px   (first full step)
       …
     When the scale gets large, jump in larger increments
     (900→40, 1000→48, 1100→64) rather than listing 64 steps.
     ────────────────────────────────────────────────────────────  */
  --scale-25:   1px;
  --scale-50:   2px;
  --scale-100:  4px;
  --scale-150:  6px;
  --scale-200:  8px;
  --scale-250:  10px;
  --scale-300:  12px;
  --scale-400:  16px;
  --scale-500:  20px;
  --scale-600:  24px;
  --scale-700:  28px;
  --scale-800:  32px;
  --scale-900:  40px;   /* jump: 32 → 40 */
  --scale-1000: 48px;
  --scale-1100: 64px;
  --scale-1200: 80px;
  --scale-1300: 96px;
  --scale-1400: 128px;


  /* ════════════════════════════════════════════════════════════
     TIER 2 · ALIAS — Brand values assigned to roles
     Role mapping (Auravox):
       primary   → maroon scale
       neutral   → beige/warm-gray scale
       info      → blue scale
       error     → #c03030  (distinct from primary maroon)
       success   → #2e7a4a
       warning   → #9e5a10
     ════════════════════════════════════════════════════════════ */

  /* ─── Border Widths — from number scale ─── */
  --border-w-none:   0px;
  --border-w-small:  var(--scale-25);   /* 1px — default borders */
  --border-w-medium: var(--scale-50);   /* 2px — focus rings      */
  --border-w-large:  var(--scale-100);  /* 4px — heavy emphasis   */

  /* ─── Border Radii — from number scale ─── */
  --radius-none:  0px;
  --radius-sm:    var(--scale-50);    /* 2px */
  --radius-base:  var(--scale-150);   /* 6px  — buttons, inputs  */
  --radius-md:    var(--scale-200);   /* 8px  — cards, modals    */
  --radius-lg:    var(--scale-300);   /* 12px */
  --radius-xl:    var(--scale-400);   /* 16px */
  --radius-round: 9999px;

  /* Component aliases (alias → radius) */
  --radius-btn:    var(--radius-base);
  --radius-input:  var(--radius-base);
  --radius-card:   var(--radius-md);
  --radius-badge:  var(--radius-sm);
  --radius-chip:   var(--radius-round);


  /* ════════════════════════════════════════════════════════════
     TIER 3 · MAPS — Component-ready tokens
     Components consume ONLY these. Never reference Tier 1/2
     primitives directly in component CSS.

     Four groups: --surface-*  --text-*  --border-*  --icon-*

     FIXED tokens (marked ✦) do not change in dark mode.
     ════════════════════════════════════════════════════════════ */

  /* Status primitives — referenced only within maps below */
  --_success: #2e7a4a;
  --_warning: #9e5a10;
  --_error:   #c03030;
  --_info:    var(--blue-500);   /* #3D6E8C */

  /* ─── MAPS · Surface ─── */
  --surface-page:              var(--beige-100);   /* page background          */
  --surface-default:           #ffffff;             /* cards, inputs, modals    */
  --surface-raised:            var(--beige-200);   /* slightly elevated         */
  --surface-elevated:          var(--beige-300);   /* more elevated             */
  --surface-action:            var(--maroon-500);  /* ✦ primary button fill     */
  --surface-action-hover:      #5a2c38;            /* ✦ lighter — dark btn hover*/
  --surface-action-subtle:     var(--maroon-50);   /* ✦ tint for badges/tags    */
  --surface-info:              var(--blue-100);    /* light — alerts, info bg   */
  --surface-info-solid:        var(--blue-500);    /* ✦ solid — accent buttons  */
  --surface-info-solid-hover:  var(--blue-600);    /* ✦ accent button hover     */
  --surface-success:           rgba(46, 122, 74,   0.10);
  --surface-warning:           rgba(158, 90, 16,   0.10);
  --surface-error:             rgba(192, 48, 48,   0.10);
  --surface-disabled:          var(--beige-300);

  /* ─── MAPS · Text ─── */
  --text-heading:       #1a1512;              /* near-black, warm          */
  --text-body:          #1a1512;
  --text-muted:         var(--beige-900);     /* #7a6e68 secondary labels  */
  --text-subtle:        var(--beige-800);     /* #9e968e tertiary / hints  */
  --text-action:        var(--maroon-500);    /* links, active states      */
  --text-action-hover:  var(--maroon-400);    /* lighter hover on dark text*/
  --text-disabled:      var(--beige-700);     /* #b8b0a7                   */
  --text-on-action:     var(--beige-500);     /* ✦ text ON maroon bg       */
  --text-on-accent:     #ffffff;              /* ✦ text ON blue bg         */
  --text-success:       var(--_success);
  --text-warning:       var(--_warning);
  --text-error:         var(--_error);
  --text-info:          var(--_info);

  /* ─── MAPS · Border ─── */
  --border-default:       #ddd6ce;
  --border-strong:        #c9bfb6;
  --border-action:        var(--maroon-500);  /* ✦ primary button border   */
  --border-action-hover:  #5a2c38;            /* ✦ matches surface hover   */
  --border-focus:         var(--blue-500);    /* focus rings               */
  --border-disabled:      var(--beige-400);
  --border-success:       rgba(46, 122, 74,   0.40);
  --border-warning:       rgba(158, 90, 16,   0.40);
  --border-error:         rgba(192, 48, 48,   0.40);
  --border-info:          var(--blue-300);

  /* ─── MAPS · Icon ─── */
  --icon-default:       var(--beige-900);    /* #7a6e68 neutral icon      */
  --icon-action:        var(--maroon-500);
  --icon-action-hover:  #5a2c38;
  --icon-on-action:     var(--beige-500);    /* ✦ on maroon bg            */
  --icon-on-accent:     #ffffff;             /* ✦ on blue bg              */
  --icon-disabled:      var(--beige-700);
  --icon-success:       var(--_success);
  --icon-warning:       var(--_warning);
  --icon-error:         var(--_error);
  --icon-info:          var(--_info);


  /* ════════════════════════════════════════════════════════════
     TYPOGRAPHY
     Scale: Major Third (×1.25) with base 16px,
            rounded to nearest 4px multiple.
     Line heights: font-size × 1.2, rounded to nearest 4px.
     ════════════════════════════════════════════════════════════ */

  --font-base: var(--font-coconat);

  /* ─── Type Scale — mobile-first
     Defaults are mobile sizes. Headings scale up at 768px via
     the @media (min-width: 768px) :root block below.
     Paragraphs (body/body-sm/caption/label) never change.
     ─── */
  --type-display:  3rem;      /* mobile 48px  → desktop 60px  */
  --type-h2:       2.5rem;    /* mobile 40px  → desktop 48px  */
  --type-h3:       2rem;      /* mobile 32px  → desktop 40px  */
  --type-h4:       1.75rem;   /* mobile 28px  → desktop 32px  */
  --type-h5:       1.5rem;    /* 24px — same both             */
  --type-h6:       1.25rem;   /* 20px — same both             */
  --type-body-lg:  1.25rem;   /* 20px — same both             */
  --type-body:     1rem;      /* 16px — baseline              */
  --type-body-sm:  0.875rem;  /* 14px                         */
  --type-caption:  0.75rem;   /* 12px — caption / legal       */
  --type-label:    0.625rem;  /* 10px — eyebrow / badge label */

  /* ─── Line Heights — match mobile type sizes ─── */
  --lh-display:  3.5rem;    /* mobile 56px  → desktop 72px */
  --lh-h2:       3rem;      /* mobile 48px  → desktop 56px */
  --lh-h3:       2.5rem;    /* mobile 40px  → desktop 48px */
  --lh-h4:       2rem;      /* mobile 32px  → desktop 40px */
  --lh-h5:       1.75rem;   /* 28px — same both            */
  --lh-h6:       1.5rem;    /* 24px — same both            */
  --lh-body-lg:  1.5rem;    /* 24px                        */
  --lh-body:     1.25rem;   /* 20px                        */
  --lh-body-sm:  1rem;      /* 16px                        */
  --lh-caption:  1rem;      /* 16px                        */

  /* ─── Letter Spacing ─── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.10em;
  --tracking-widest:   0.18em;   /* eyebrows, all-caps micro labels */

  /* ─── Weights ─── */
  --weight-regular: 400;
  --weight-demi:    600;
  --weight-bold:    700;


  /* ════════════════════════════════════════════════════════════
     SPACING — derived from the Tier 1 number scale
     ════════════════════════════════════════════════════════════ */
  --space-px:  var(--scale-25);    /*  1px */
  --space-0h:  var(--scale-50);    /*  2px */
  --space-1:   var(--scale-100);   /*  4px */
  --space-1h:  var(--scale-150);   /*  6px */
  --space-2:   var(--scale-200);   /*  8px */
  --space-2h:  var(--scale-250);   /* 10px */
  --space-3:   var(--scale-300);   /* 12px */
  --space-4:   var(--scale-400);   /* 16px */
  --space-5:   var(--scale-500);   /* 20px */
  --space-6:   var(--scale-600);   /* 24px */
  --space-7:   var(--scale-700);   /* 28px */
  --space-8:   var(--scale-800);   /* 32px */
  --space-10:  var(--scale-900);   /* 40px */
  --space-12:  var(--scale-1000);  /* 48px */
  --space-16:  var(--scale-1100);  /* 64px */
  --space-20:  var(--scale-1200);  /* 80px */
  --space-24:  var(--scale-1300);  /* 96px */
  --space-32:  var(--scale-1400);  /* 128px */


  /* ════════════════════════════════════════════════════════════
     SHADOWS — maroon-tinted for warmth
     ════════════════════════════════════════════════════════════ */
  --shadow-none:        none;
  --shadow-xs:          0 var(--scale-25)   var(--scale-50)    rgba(64, 31, 40, 0.05);
  --shadow-sm:          0 var(--scale-25)   var(--scale-100)   rgba(64, 31, 40, 0.07);
  --shadow-md:          0 var(--scale-100)  var(--scale-400)   rgba(64, 31, 40, 0.10);
  --shadow-lg:          0 var(--scale-200)  var(--scale-800)   rgba(64, 31, 40, 0.14);
  --shadow-xl:          0 var(--scale-400)  var(--scale-1100)  rgba(64, 31, 40, 0.18);
  --shadow-focus:       0 0 0 var(--scale-50)  rgba(61, 110, 140, 0.28);
  --shadow-focus-error: 0 0 0 var(--scale-50)  rgba(192, 48, 48, 0.22);


  /* ════════════════════════════════════════════════════════════
     MOTION
     ════════════════════════════════════════════════════════════ */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   100ms;
  --duration-base:   150ms;
  --duration-slow:   250ms;
  --duration-slower: 350ms;

  --transition-fast:   var(--duration-fast)   var(--ease-default);
  --transition-base:   var(--duration-base)   var(--ease-default);
  --transition-slow:   var(--duration-slow)   var(--ease-default);
  --transition-layout: var(--duration-slower) var(--ease-default);


  /* ════════════════════════════════════════════════════════════
     LAYOUT & Z-INDEX
     ════════════════════════════════════════════════════════════ */
  --max-w:        1200px;
  --max-w-prose:  680px;
  --max-w-narrow: 480px;
  --nav-h:        56px;        /* mobile → 64px at --bp-md */
  --page-px:      var(--space-4); /* 16px mobile gutters → 32px desktop */

  --z-base:    1;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-drawer:  300;
  --z-modal:   400;
  --z-toast:   500;
}


/* ════════════════════════════════════════════════════════════════
   DARK MODE
   Only Tier 3 maps tokens are overridden.
   ✦ FIXED tokens (brand colours) are NOT listed here —
     maroon surfaces, beige text-on-action, blue accent solids
     remain unchanged in dark mode.
   ════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {

  /* ── Surfaces (neutrals invert) ── */
  --surface-page:         #100d0e;
  --surface-default:      #1c1618;
  --surface-raised:       #251e20;
  --surface-elevated:     #2e2326;
  --surface-disabled:     #2a2224;
  --surface-action-subtle: rgba(64, 31, 40, 0.28);

  /* Status surfaces — increase opacity for dark backgrounds */
  --surface-success: rgba(46, 122, 74,   0.18);
  --surface-warning: rgba(158, 90, 16,   0.18);
  --surface-error:   rgba(192, 48, 48,   0.18);
  --surface-info:    rgba(61, 110, 140,  0.18);

  /* ── Text (neutrals invert) ── */
  --text-heading:      var(--beige-500);   /* #E9E2DA */
  --text-body:         var(--beige-500);
  --text-muted:        #9e948e;
  --text-subtle:       #6a6060;
  --text-action:       var(--maroon-300);  /* lighter for dark bg */
  --text-action-hover: var(--maroon-200);
  --text-info:         var(--blue-300);   /* lighter blue on dark bg */
  --text-disabled:     #5a5050;
  /* ✦ text-on-action: beige on maroon — stays */
  /* ✦ text-on-accent: white on blue — stays   */

  /* ── Borders (neutrals invert) ── */
  --border-default:  #3a3032;
  --border-strong:   #4e4244;
  --border-disabled: #3a3032;
  /* ✦ border-action and border-focus — stay */

  /* Status borders */
  --border-success: rgba(46, 122, 74,   0.38);
  --border-warning: rgba(158, 90, 16,   0.38);
  --border-error:   rgba(192, 48, 48,   0.38);
  --border-info:    var(--blue-600);

  /* ── Icons (neutrals invert) ── */
  --icon-default:  var(--beige-700);   /* #b8b0a7 */
  --icon-disabled: #5a5050;
  /* ✦ icon-on-action, icon-on-accent — stay */

  /* ── Shadows ── */
  --shadow-xs: 0 var(--scale-25)  var(--scale-50)    rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 var(--scale-25)  var(--scale-100)   rgba(0, 0, 0, 0.30);
  --shadow-md: 0 var(--scale-100) var(--scale-400)   rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 var(--scale-200) var(--scale-800)   rgba(0, 0, 0, 0.50);
  --shadow-xl: 0 var(--scale-400) var(--scale-1100)  rgba(0, 0, 0, 0.60);
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Desktop scale-up at 768px
   Mobile is the default. This block upgrades layout tokens,
   type scale, and spacing for wider viewports.
   Breakpoints:  --bp-sm 480px  --bp-md 768px
                 --bp-lg 1024px --bp-xl 1200px
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    /* Type scale — scale up headings for desktop */
    --type-display:  3.75rem;   /* 60px */
    --type-h2:       3rem;      /* 48px */
    --type-h3:       2.5rem;    /* 40px */
    --type-h4:       2rem;      /* 32px */

    /* Line heights to match */
    --lh-display:  4.5rem;    /* 72px */
    --lh-h2:       3.5rem;    /* 56px */
    --lh-h3:       3rem;      /* 48px */
    --lh-h4:       2.5rem;    /* 40px */

    /* Layout */
    --nav-h:    64px;
    --page-px:  var(--space-8); /* 32px gutters */
  }
}


/* ════════════════════════════════════════════════════════════════
   BASE RESET
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  background: var(--surface-page);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition-slow), color var(--transition-slow);
}


/* ════════════════════════════════════════════════════════════════
   COMPONENT STYLES
   All classes reference ONLY Tier 3 maps tokens (--surface-*,
   --text-*, --border-*, --icon-*). No direct brand primitives.
   ════════════════════════════════════════════════════════════════ */

/* ─── BUTTONS ───────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-base);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-decoration: none;
  border: var(--border-w-small) solid transparent;
  border-radius: var(--radius-btn);
  padding: var(--space-3) var(--space-6);
  min-height: 44px; /* WCAG 2.5.5 touch target */
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              box-shadow var(--transition-base);
}

/* Sizes */
.btn-sm   { padding: var(--space-2) var(--space-4); font-size: 0.55rem; min-height: 36px; }
.btn-lg   { padding: var(--space-4) var(--space-8); font-size: var(--type-caption); min-height: 52px; }
.btn-full { width: 100%; }

/* Primary — maroon fill */
.btn-primary {
  background: var(--surface-action);
  color: var(--text-on-action);
  border-color: var(--border-action);
}
.btn-primary:hover:not(:disabled) {
  background: var(--surface-action-hover);
  border-color: var(--border-action-hover);
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Secondary — outlined */
.btn-secondary {
  background: var(--surface-default);
  color: var(--text-body);
  border-color: var(--border-strong);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--text-body); }
.btn-secondary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Accent — steel blue fill */
.btn-accent {
  background: var(--surface-info-solid);
  color: var(--text-on-accent);
  border-color: var(--surface-info-solid);
}
.btn-accent:hover:not(:disabled) {
  background: var(--surface-info-solid-hover);
  border-color: var(--surface-info-solid-hover);
}
.btn-accent:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Ghost — text link style */
.btn-ghost {
  background: none;
  border-color: transparent;
  color: var(--text-action);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wider);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.btn-ghost:hover:not(:disabled) { color: var(--text-action-hover); }
.btn-ghost:focus-visible { outline: var(--border-w-medium) solid var(--border-focus); outline-offset: 3px; }

/* Inverse — for use on maroon/dark backgrounds */
.btn-inverse {
  background: rgba(233, 226, 218, 0.12);
  color: var(--text-on-action);
  border-color: rgba(233, 226, 218, 0.30);
}
.btn-inverse:hover:not(:disabled) {
  background: rgba(233, 226, 218, 0.22);
  border-color: rgba(233, 226, 218, 0.50);
}

/* Shared disabled */
.btn:disabled { opacity: 0.40; cursor: not-allowed; pointer-events: none; }


/* ─── FORM ELEMENTS ─────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1h);
}

.field-label {
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  font-family: var(--font-base);
  font-size: var(--type-body);
  line-height: var(--lh-body-sm);
  background: var(--surface-default);
  color: var(--text-body);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  -webkit-appearance: none;
  appearance: none;
}

.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--text-subtle);
  font-size: var(--type-body-sm);
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

.field-input:disabled,
.field-select:disabled,
.field-textarea:disabled {
  background: var(--surface-raised);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.field-input.has-error,
.field-select.has-error,
.field-textarea.has-error { border-color: var(--border-error); }

.field-input.has-error:focus,
.field-select.has-error:focus,
.field-textarea.has-error:focus {
  border-color: var(--border-error);
  box-shadow: var(--shadow-focus-error);
}

.field-textarea {
  resize: vertical;
  min-height: var(--scale-1300);
}

.field-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a6e68'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

.field-hint       { font-size: var(--type-label); color: var(--text-subtle); letter-spacing: var(--tracking-wide); }
.field-error-msg  { font-size: var(--type-label); color: var(--text-error);  letter-spacing: var(--tracking-wide); }


/* ─── BADGES ────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: var(--space-0h) var(--space-2h);
  border-radius: var(--radius-badge);
  border: var(--border-w-small) solid;
  white-space: nowrap;
  line-height: 1.6;
}

.badge-neutral { color: var(--text-muted);    background: var(--surface-raised);        border-color: var(--border-default); }
.badge-primary { color: var(--text-action);   background: var(--surface-action-subtle); border-color: currentColor; }
.badge-accent  { color: var(--text-info);     background: var(--surface-info);          border-color: currentColor; }
.badge-success { color: var(--text-success);  background: var(--surface-success);       border-color: currentColor; }
.badge-warning { color: var(--text-warning);  background: var(--surface-warning);       border-color: currentColor; }
.badge-error   { color: var(--text-error);    background: var(--surface-error);         border-color: currentColor; }
.badge-info    { color: var(--text-info);     background: var(--surface-info);          border-color: currentColor; }
.badge-pill    { border-radius: var(--radius-chip); }


/* ─── CARDS ─────────────────────────────────────────────────── */

.card {
  background: var(--surface-default);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.card-header { padding: var(--space-5); border-bottom: var(--border-w-small) solid var(--border-default); }
.card-body   { padding: var(--space-5); }
.card-footer { padding: var(--space-5); border-top:    var(--border-w-small) solid var(--border-default); }


/* ─── ALERTS ────────────────────────────────────────────────── */

.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-base);
  border: var(--border-w-small) solid;
  font-size: var(--type-body-sm);
  line-height: var(--lh-body);
  display: none;
}
.alert.visible { display: block; }

.alert-error   { color: var(--text-error);   border-color: var(--border-error);   background: var(--surface-error); }
.alert-success { color: var(--text-success); border-color: var(--border-success); background: var(--surface-success); }
.alert-warning { color: var(--text-warning); border-color: var(--border-warning); background: var(--surface-warning); }
.alert-info    { color: var(--text-info);    border-color: var(--border-info);    background: var(--surface-info); }


/* ─── UTILITY ───────────────────────────────────────────────── */

.divider {
  border: none;
  border-top: var(--border-w-small) solid var(--border-default);
}

.eyebrow {
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}

.qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--scale-700);
  height: var(--scale-700);
  background: var(--surface-raised);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-family: var(--font-base);
  font-size: var(--type-body);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.qty-btn:hover {
  background: var(--surface-elevated);
  border-color: var(--border-strong);
}


/* ─── CLOSE BUTTON ──────────────────────────────────────────── */

.close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--scale-700);
  height: var(--scale-700);
  border-radius: var(--radius-round);
  background: none;
  border: none;
  color: var(--icon-default);
  cursor: pointer;
  font-size: var(--type-h6);
  line-height: 1;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.close-btn:hover { background: var(--surface-raised); color: var(--text-body); }
.close-btn:focus-visible { outline: var(--border-w-medium) solid var(--border-focus); outline-offset: 2px; }
.close-btn-sm { width: var(--scale-500); height: var(--scale-500); font-size: var(--type-body-sm); }
.close-btn-lg { width: var(--scale-900); height: var(--scale-900); font-size: var(--type-h5); }


/* ─── NAVBAR ────────────────────────────────────────────────── */

.nav {
  height: var(--nav-h);
  background: var(--surface-default);
  border-bottom: var(--border-w-small) solid var(--border-default);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-px);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text-heading);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  margin-right: auto;
  flex-shrink: 0;
}
.nav-links {
  display: none; /* mobile: hidden — shown at 768px */
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}
@media (min-width: 768px) {
  .nav-links { display: flex; }
}
.nav-link {
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.active { color: var(--text-action); }
.nav-actions { display: flex; align-items: center; gap: var(--space-1); }

/* Icon button — 44px touch target */
.nav-icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-base);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--icon-default);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-icon-btn:hover { background: var(--surface-raised); color: var(--icon-action); }
.nav-icon-btn:focus-visible { outline: var(--border-w-medium) solid var(--border-focus); outline-offset: 2px; }

.nav-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  background: var(--surface-action);
  color: var(--text-on-action);
  border-radius: var(--radius-round);
  font-size: 9px;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
}

/* Hamburger toggle — visible on mobile, hidden on desktop */
.nav-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-base);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--icon-default);
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}
.nav-toggle-btn:hover { background: var(--surface-raised); color: var(--icon-action); }
.nav-toggle-btn:focus-visible { outline: var(--border-w-medium) solid var(--border-focus); outline-offset: 2px; }
@media (min-width: 768px) { .nav-toggle-btn { display: none; } }

/* Mobile navigation overlay — full-screen slide panel */
.nav-mobile-menu {
  position: fixed;
  inset: 0;
  top: var(--nav-h);
  background: var(--surface-default);
  z-index: calc(var(--z-nav) - 1);
  padding: var(--space-4) var(--page-px) var(--space-8);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--transition-layout), transform var(--transition-layout);
  border-top: var(--border-w-small) solid var(--border-default);
}
.nav-mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (min-width: 768px) { .nav-mobile-menu { display: none; } }

.nav-mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-6);
}
.nav-mobile-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: var(--type-h6);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  text-decoration: none;
  border-bottom: var(--border-w-small) solid var(--border-default);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.nav-mobile-link:hover,
.nav-mobile-link.active { color: var(--text-action); padding-left: var(--space-2); }
.nav-mobile-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

/* Inverted nav — for maroon/dark hero backgrounds */
.nav-dark {
  background: var(--surface-action);
  border-bottom-color: var(--surface-action-hover);
}
.nav-dark .nav-logo              { color: var(--text-on-action); }
.nav-dark .nav-link              { color: rgba(233,226,218,0.65); }
.nav-dark .nav-link:hover,
.nav-dark .nav-link.active       { color: var(--text-on-action); }
.nav-dark .nav-icon-btn          { color: rgba(233,226,218,0.65); }
.nav-dark .nav-icon-btn:hover    { background: rgba(233,226,218,0.12); color: var(--text-on-action); }
.nav-dark .nav-count             { background: var(--text-on-action); color: var(--text-action); }
.nav-dark .nav-toggle-btn        { color: rgba(233,226,218,0.80); }
.nav-dark .nav-toggle-btn:hover  { background: rgba(233,226,218,0.12); color: var(--text-on-action); }
.nav-dark .nav-mobile-menu       { background: var(--maroon-600); border-top: 1px solid rgba(233,226,218,0.12); }
.nav-dark .nav-mobile-link       { color: rgba(233,226,218,0.70); border-bottom-color: rgba(233,226,218,0.08); }
.nav-dark .nav-mobile-link:hover,
.nav-dark .nav-mobile-link.active { color: var(--text-on-action); }


/* ─── BREADCRUMB ────────────────────────────────────────────── */
/* Mobile-first: scrollable trail. Use .breadcrumb-back for the
   mobile back-link pattern (shown on mobile, hidden on desktop). */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-1h);
  list-style: none;
  padding: 0 0 2px; /* space for focus rings */
}
.breadcrumb::-webkit-scrollbar { display: none; }

.breadcrumb-item { display: flex; align-items: center; gap: var(--space-1h); flex-shrink: 0; }
.breadcrumb-link {
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.breadcrumb-link:hover { color: var(--text-action); }
.breadcrumb-item:last-child .breadcrumb-link {
  color: var(--text-body);
  pointer-events: none;
}
.breadcrumb-sep { color: var(--text-subtle); font-size: var(--type-label); user-select: none; flex-shrink: 0; }

/* Back link — mobile alternative to the full trail */
.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  text-decoration: none;
  min-height: 44px; /* touch target */
  transition: color var(--transition-fast);
}
.breadcrumb-back::before { content: '←'; font-size: 1.1em; }
.breadcrumb-back:hover { color: var(--text-action); }


/* ─── OPTION GROUP ──────────────────────────────────────────── */
/* Wrapper for chip-group, slider, or swatch-group on a PDP    */

.option-group { display: flex; flex-direction: column; gap: var(--space-3); }
.option-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.option-group-label {
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}
.option-group-value {
  color: var(--text-body);
  font-weight: var(--weight-bold);
  margin-left: var(--space-2);
  text-transform: none;
  letter-spacing: 0;
}
.option-group-hint { font-size: var(--type-label); color: var(--text-subtle); }
.option-group-guide {
  font-size: var(--type-label);
  color: var(--text-info);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
}
.option-group-guide:hover { text-decoration: underline; }


/* ─── CHIP / OPTION SELECTOR ────────────────────────────────── */
/* Radio-style selection: length, size, material type           */

.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chip-option { display: inline-block; }
.chip-option input[type="radio"],
.chip-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.chip-option-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 44px; /* WCAG touch target */
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-base);
  background: var(--surface-default);
  color: var(--text-muted);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.chip-option:hover .chip-option-label {
  border-color: var(--border-strong);
  color: var(--text-body);
}
.chip-option input:checked + .chip-option-label {
  background: var(--surface-action);
  color: var(--text-on-action);
  border-color: var(--border-action);
}
.chip-option input:focus-visible + .chip-option-label {
  outline: var(--border-w-medium) solid var(--border-focus);
  outline-offset: 2px;
}
.chip-option input:disabled + .chip-option-label {
  opacity: 0.38;
  cursor: not-allowed;
  background: var(--surface-disabled);
}

/* Thickness indicator — a vertical bar inside the chip */
.chip-thickness-bar {
  display: inline-block;
  height: 14px;
  background: currentColor;
  border-radius: 2px;
  flex-shrink: 0;
}


/* ─── SWATCH PICKER ─────────────────────────────────────────── */
/* Colour / material radio — circular swatches with check state */

.swatch-group { display: flex; flex-wrap: wrap; gap: var(--space-2h); }

.swatch-option { position: relative; cursor: pointer; }
.swatch-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.swatch-option-dot {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  border: 2px solid transparent;
  outline: 1px solid var(--border-default);
  transition: outline var(--transition-fast), border-color var(--transition-fast);
}
.swatch-option:hover .swatch-option-dot {
  outline: 2px solid var(--border-strong);
}
.swatch-option input:checked + .swatch-option-dot {
  border-color: var(--surface-default);
  outline: 2px solid var(--border-action);
}
.swatch-option input:focus-visible + .swatch-option-dot {
  outline: 2px solid var(--border-focus);
}
.swatch-option input:disabled + .swatch-option-dot { opacity: 0.38; cursor: not-allowed; }

/* Tooltip on hover — shows material name */
.swatch-tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: #1a1512;
  color: #ffffff;
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1h) var(--space-3);
  border-radius: var(--radius-base);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: var(--z-raised);
}
.swatch-option:hover .swatch-tooltip { opacity: 1; }


/* ─── RANGE SLIDER ──────────────────────────────────────────── */
/* JS sets --fill on the input to show filled portion of track   */

.slider-field { display: flex; flex-direction: column; gap: var(--space-3); }
.slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.slider-value {
  font-size: var(--type-body-sm);
  font-weight: var(--weight-demi);
  color: var(--text-body);
  background: var(--surface-raised);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-base);
  padding: var(--space-1) var(--space-3);
  min-width: 64px;
  text-align: center;
}
.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--type-label);
  color: var(--text-subtle);
  letter-spacing: var(--tracking-wide);
}

input[type="range"].slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-round);
  outline: none;
  cursor: pointer;
  border: none;
  padding: 0;
  background: linear-gradient(
    to right,
    var(--surface-action) 0%,
    var(--surface-action) var(--fill, 40%),
    var(--border-default) var(--fill, 40%)
  );
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-action);
  border: 3px solid var(--surface-default);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: box-shadow var(--transition-fast);
}
input[type="range"].slider:focus::-webkit-slider-thumb {
  box-shadow: var(--shadow-focus), var(--shadow-sm);
}
input[type="range"].slider:active::-webkit-slider-thumb { cursor: grabbing; }
input[type="range"].slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-action);
  border: 3px solid var(--surface-default);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
input[type="range"].slider::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-round);
  background: var(--border-default);
}
input[type="range"].slider::-moz-range-progress {
  background: var(--surface-action);
  border-radius: var(--radius-round);
}


/* ─── TABS ──────────────────────────────────────────────────── */

.tabs { display: flex; flex-direction: column; }
.tab-list {
  display: flex;
  border-bottom: var(--border-w-small) solid var(--border-default);
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-list::-webkit-scrollbar { display: none; }
.tab {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-base);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab:hover { color: var(--text-action); }
.tab.active { color: var(--text-action); border-bottom-color: var(--border-action); }
.tab:focus-visible { outline: var(--border-w-medium) solid var(--border-focus); outline-offset: -2px; }
.tab-panel { padding: var(--space-6) 0; }
.tab-panel:not(.active) { display: none; }


/* ─── DRAWER ────────────────────────────────────────────────── */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 21, 18, 0.52);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--surface-default);
  border-left: var(--border-w-small) solid var(--border-default);
  display: flex;
  flex-direction: column;
  z-index: var(--z-drawer);
  transform: translateX(100%);
  transition: transform var(--transition-layout);
  box-shadow: var(--shadow-xl);
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-w-small) solid var(--border-default);
  flex-shrink: 0;
}
.drawer-title { font-size: var(--type-h6); font-weight: var(--weight-demi); color: var(--text-heading); }
.drawer-body  { flex: 1; overflow-y: auto; padding: var(--space-6); }
.drawer-footer {
  padding: var(--space-5) var(--space-6);
  border-top: var(--border-w-small) solid var(--border-default);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}


/* ─── MODAL ─────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 21, 18, 0.55);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--surface-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.96) translateY(8px);
  transition: transform var(--transition-slow);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-w-small) solid var(--border-default);
  flex-shrink: 0;
}
.modal-title { font-size: var(--type-h5); font-weight: var(--weight-demi); color: var(--text-heading); }
.modal-body  { flex: 1; overflow-y: auto; padding: var(--space-6); }
.modal-footer {
  padding: var(--space-5) var(--space-6);
  border-top: var(--border-w-small) solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
}


/* ─── TOAST ─────────────────────────────────────────────────── */

/* Mobile: full-width stack at bottom. Desktop: fixed 360px at bottom-right */
.toast-container {
  position: fixed;
  bottom: var(--space-5);
  left: var(--page-px);
  right: var(--page-px);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}
@media (min-width: 480px) {
  .toast-container {
    left: auto;
    right: var(--space-6);
    width: 360px;
  }
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-default);
  border: var(--border-w-small) solid var(--border-default);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 360px;
  pointer-events: all;
}
.toast-icon  { font-size: var(--type-h6); flex-shrink: 0; margin-top: 1px; }
.toast-body  { flex: 1; }
.toast-title { font-size: var(--type-body-sm); font-weight: var(--weight-demi); color: var(--text-heading); margin-bottom: 2px; }
.toast-msg   { font-size: var(--type-label); color: var(--text-muted); line-height: 1.5; }
.toast-close {
  color: var(--icon-default); cursor: pointer; padding: 0;
  background: none; border: none; font-size: var(--type-body-sm);
  line-height: 1; align-self: flex-start; font-family: var(--font-base);
}
.toast-close:hover { color: var(--text-body); }
.toast-success { border-left-color: var(--text-success); }
.toast-error   { border-left-color: var(--text-error); }
.toast-warning { border-left-color: var(--text-warning); }
.toast-info    { border-left-color: var(--text-info); }


/* ─── TAG (interactive filter pill) ─────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1h);
  padding: var(--space-1h) var(--space-3);
  background: var(--surface-raised);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-round);
  font-family: var(--font-base);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.tag:hover  { border-color: var(--border-strong); color: var(--text-body); }
.tag.active { background: var(--surface-action-subtle); border-color: var(--border-action); color: var(--text-action); }
.tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  font-family: var(--font-base);
}
.tag-remove:hover { opacity: 1; }


/* ─── DROPDOWN ──────────────────────────────────────────────── */

.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 180px;
  background: var(--surface-default);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  z-index: var(--z-raised);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast),
              visibility 0s var(--duration-fast);
}
.dropdown.open .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}
.dropdown-item {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-base);
  font-size: var(--type-body-sm);
  color: var(--text-body);
  cursor: pointer;
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dropdown-item:hover  { background: var(--surface-raised); }
.dropdown-item.active { color: var(--text-action); background: var(--surface-action-subtle); }
.dropdown-divider     { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }


/* ─── PAGINATION ────────────────────────────────────────────── */

.pagination { display: flex; align-items: center; gap: var(--space-1h); flex-wrap: wrap; }
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-2);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-base);
  background: var(--surface-default);
  color: var(--text-muted);
  font-family: var(--font-base);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.page-btn:hover  { border-color: var(--border-strong); color: var(--text-body); }
.page-btn.active { background: var(--surface-action); color: var(--text-on-action); border-color: var(--border-action); }
.page-btn:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
.page-ellipsis { padding: 0 var(--space-1); color: var(--text-subtle); font-size: var(--type-body-sm); user-select: none; }


/* ─── SKELETON ──────────────────────────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-raised) 25%,
    var(--surface-elevated) 50%,
    var(--surface-raised) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-base);
  color: transparent !important;
  pointer-events: none;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ─── PRICE DISPLAY ─────────────────────────────────────────── */

.price { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.price-current  { font-size: var(--type-h5); font-weight: var(--weight-bold); color: var(--text-heading); }
.price-original { font-size: var(--type-body); color: var(--text-muted); text-decoration: line-through; }
.price-sale .price-current { color: var(--text-error); }


/* ─── TOOLTIP ───────────────────────────────────────────────── */

[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: #1a1512;
  color: #ffffff;
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1h) var(--space-3);
  border-radius: var(--radius-base);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: var(--z-toast);
}
[data-tooltip]:hover::after { opacity: 1; }


/* ─── DIVIDER WITH LABEL ────────────────────────────────────── */

.divider-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-subtle);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-default);
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   ════════════════════════════════════════════════════════════════ */

/* Visibility */
.hide-mobile  { display: none !important; }
.show-mobile  { display: flex !important; }

@media (min-width: 768px) {
  .hide-mobile  { display: unset !important; }
  .show-mobile  { display: none !important; }
  .hide-desktop { display: none !important; }
  .show-desktop { display: flex !important; }
}

/* Layout */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; flex-direction: row; align-items: center; }
.row-gap { gap: var(--space-3); }
.wrap    { flex-wrap: wrap; }

/* Mobile-only stack: columns on mobile, row on desktop */
.stack-mobile { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 768px) { .stack-mobile { flex-direction: row; } }

/* Page wrapper */
.page-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--page-px);
  padding-right: var(--page-px);
}

/* Responsive grid helpers */
.grid-1 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

@media (min-width: 480px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}
@media (min-width: 1024px) {
  .grid-2 { gap: var(--space-8); }
  .grid-3 { gap: var(--space-8); }
}