/* ==========================================================================
   D&D WHOLESALE LTD — STYLE SHEET
   Design: receipt-tape / price-tag aesthetic. Deep navy + market amber.
   Fonts: DM Serif Display (titles) · Inter (body) · JetBrains Mono (prices/tix)
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

   /* ── Tokens ──────────────────────────────────────────────────────────────── */
   :root {
     --navy:         #0D1F3C;
     --navy-mid:     #1A3258;
     --navy-light:   #243C65;
     --amber:        #E8A020;
     --amber-light:  #F5C055;
     --amber-pale:   #FEF3D8;
     --paper:        #F7F5F0;
     --paper-warm:   #EFECE5;
     --ink:          #1A1A1A;
     --body:         #2E3038;
     --muted:        #6B7280;
     --hairline:     #E2DDD6;
     --red:          #C93030;
     --red-light:    #FEE9E9;
     --green:        #1A7A4A;
     --green-light:  #E3F5EC;
     --amber-badge:  #7A5600;
     --white:        #FFFFFF;
   
     --font-display: 'DM Serif Display', Georgia, serif;
     --font-body:    'Inter', system-ui, sans-serif;
     --font-mono:    'JetBrains Mono', 'Courier New', monospace;
   
     --text-xs:   0.75rem;
     --text-sm:   0.875rem;
     --text-base: 1rem;
     --text-md:   1.125rem;
     --text-lg:   1.25rem;
     --text-xl:   1.5rem;
     --text-2xl:  1.875rem;
     --text-3xl:  2.5rem;
     --text-4xl:  3.25rem;
   
     --space-1: 0.25rem;
     --space-2: 0.5rem;
     --space-3: 0.75rem;
     --space-4: 1rem;
     --space-5: 1.5rem;
     --space-6: 2rem;
     --space-7: 3rem;
     --space-8: 4rem;
     --space-9: 6rem;
   
     --radius-sm:  3px;
     --radius-md:  6px;
     --radius-lg:  12px;
     --radius-xl:  20px;
   
     --shadow-sm:  0 1px 3px rgba(13,31,60,.08);
     --shadow-md:  0 4px 16px rgba(13,31,60,.12);
     --shadow-lg:  0 8px 32px rgba(13,31,60,.16);
   
     --max-w: 1200px;
     --header-h: 64px;
   }
   
   /* ── Reset ───────────────────────────────────────────────────────────────── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html { font-size: 16px; scroll-behavior: smooth; }
   body {
     font-family: var(--font-body);
     font-size: var(--text-base);
     color: var(--body);
     background: var(--paper);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
   }
   img, svg { display: block; }
   a { color: inherit; text-decoration: none; }
   button { cursor: pointer; font: inherit; border: none; background: none; }
   ul, ol { list-style: none; }
   input, select, textarea { font: inherit; }
   h1,h2,h3,h4,h5,h6 { line-height: 1.2; }
   
   /* ── Container ───────────────────────────────────────────────────────────── */
   .container {
     max-width: var(--max-w);
     margin-inline: auto;
     padding-inline: var(--space-5);
   }
   
   /* ── Typography helpers ──────────────────────────────────────────────────── */
   .eyebrow {
     display: inline-block;
     font-family: var(--font-mono);
     font-size: var(--text-xs);
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--amber);
     margin-bottom: var(--space-3);
   }
   .text-sm  { font-size: var(--text-sm); }
   .muted    { color: var(--muted); }
   .mono     { font-family: var(--font-mono); font-size: var(--text-sm); }
   
   /* ── Buttons ──────────────────────────────────────────────────────────────── */
   .btn {
     display: inline-flex;
     align-items: center;
     gap: var(--space-2);
     padding: .625rem 1.375rem;
     font-size: var(--text-sm);
     font-weight: 600;
     border-radius: var(--radius-sm);
     transition: background .15s, color .15s, box-shadow .15s, transform .1s;
     white-space: nowrap;
     line-height: 1.4;
   }
   .btn:active { transform: translateY(1px); }
   
   .btn--primary {
     background: var(--amber);
     color: var(--navy);
   }
   .btn--primary:hover { background: var(--amber-light); }
   
   .btn--ghost {
     background: transparent;
     color: var(--navy);
     border: 1.5px solid var(--navy);
   }
   .btn--ghost:hover { background: var(--navy); color: var(--white); }
   
   .btn--ink {
     background: var(--navy);
     color: var(--white);
   }
   .btn--ink:hover { background: var(--navy-mid); }
   
   .btn--danger {
     background: var(--red);
     color: var(--white);
   }
   .btn--danger:hover { opacity: .88; }
   
   .btn--sm {
     padding: .375rem .875rem;
     font-size: var(--text-xs);
   }
   
   .btn-row {
     display: flex;
     flex-wrap: wrap;
     gap: var(--space-3);
     align-items: center;
   }
   
   .icon-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 2rem;
     height: 2rem;
     border-radius: var(--radius-sm);
     color: var(--muted);
     transition: color .15s, background .15s;
   }
   .icon-btn:hover { color: var(--navy); background: var(--paper-warm); }
   .icon-btn--danger:hover { color: var(--red); }
   
   /* ── Badges ──────────────────────────────────────────────────────────────── */
   .badge {
     display: inline-block;
     padding: 2px 8px;
     font-size: var(--text-xs);
     font-weight: 700;
     font-family: var(--font-mono);
     letter-spacing: .04em;
     border-radius: 2px;
     text-transform: uppercase;
   }
   .badge--green  { background: var(--green-light);  color: var(--green); }
   .badge--red    { background: var(--red-light);     color: var(--red); }
   .badge--amber  { background: var(--amber-pale);    color: var(--amber-badge); }
   .badge--slate  { background: var(--paper-warm);    color: var(--muted); }
   .badge--ink    { background: var(--navy);          color: var(--white); }
   
   /* ── ═══════════════════════════════════════════════════════════════════════
      HEADER
      ══════════════════════════════════════════════════════════════════════════ */
   .site-header {
     position: sticky;
     top: 0;
     z-index: 100;
     background: var(--navy);
     border-bottom: 3px solid var(--amber);
   }
   
   .topbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--space-4);
     height: var(--header-h);
   }
   
   /* Brand */
   .brand {
     display: flex;
     align-items: center;
     gap: var(--space-3);
     flex-shrink: 0;
   }
   .brand__mark {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 3px;
     width: 28px;
     height: 28px;
   }
   .brand__mark span {
     background: var(--amber);
     border-radius: 2px;
   }
   .brand__mark span:last-child { background: var(--white); opacity: .5; }
   .brand__text { display: flex; flex-direction: column; line-height: 1.2; }
   .brand__name {
     font-family: var(--font-display);
     font-size: var(--text-md);
     color: var(--white);
   }
   .brand__tagline {
     font-size: var(--text-xs);
     color: var(--amber-light);
     letter-spacing: .04em;
     font-family: var(--font-mono);
   }
   
   /* Role switcher */
   .role-switch {
     display: flex;
     align-items: center;
     gap: var(--space-2);
     margin-left: auto;
   }
   .role-switch__label {
     font-size: var(--text-xs);
     color: rgba(255,255,255,.5);
     white-space: nowrap;
   }
   .role-switch select {
     background: rgba(255,255,255,.1);
     border: 1px solid rgba(255,255,255,.2);
     color: var(--white);
     border-radius: var(--radius-sm);
     padding: 4px 8px;
     font-size: var(--text-sm);
     cursor: pointer;
   }
   .role-switch select:focus { outline: 2px solid var(--amber); }
   .role-switch select option { background: var(--navy); color: var(--white); }
   
   /* Nav */
   .nav-row {
     background: var(--navy-mid);
     overflow: hidden;
     max-height: 48px;
     transition: max-height .25s ease;
   }
   .nav-row.is-open { max-height: 300px; }
   .nav {
     display: flex;
     align-items: center;
     gap: 0;
     height: 48px;
     overflow: visible;
   }
   .nav__link {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 0 var(--space-4);
     height: 100%;
     font-size: var(--text-sm);
     font-weight: 500;
     color: rgba(255,255,255,.7);
     border-bottom: 3px solid transparent;
     transition: color .15s, border-color .15s;
     white-space: nowrap;
   }
   .nav__link:hover,
   .nav__link[aria-current="page"] {
     color: var(--white);
     border-bottom-color: var(--amber);
   }
   .nav__link .lock {
     width: 12px;
     height: 12px;
     opacity: .4;
   }
   .nav__toggle {
     display: none;
     color: var(--white);
     padding: var(--space-2);
   }
   
   /* ── ═══════════════════════════════════════════════════════════════════════
      HERO
      ══════════════════════════════════════════════════════════════════════════ */
   .hero {
     background: var(--navy);
     padding: var(--space-9) 0;
     overflow: hidden;
     position: relative;
   }
   /* Background texture */
   .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: radial-gradient(circle at 70% 50%, rgba(232,160,32,.08) 0%, transparent 60%),
                       repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,.03) 39px, rgba(255,255,255,.03) 40px);
     pointer-events: none;
   }
   
   .hero__grid {
     display: grid;
     grid-template-columns: 1fr 420px;
     gap: var(--space-8);
     align-items: center;
     position: relative;
     z-index: 1;
   }
   
   .hero .eyebrow { color: var(--amber); }
   
   .hero__title {
     font-family: var(--font-display);
     font-size: clamp(var(--text-3xl), 5vw, 3.75rem);
     color: var(--white);
     line-height: 1.1;
     margin-bottom: var(--space-5);
   }
   .hero__title em {
     color: var(--amber);
     font-style: italic;
   }
   .hero__lede {
     color: rgba(255,255,255,.65);
     font-size: var(--text-md);
     line-height: 1.7;
     max-width: 50ch;
     margin-bottom: var(--space-6);
   }
   .hero .btn--ghost {
     border-color: rgba(255,255,255,.35);
     color: var(--white);
   }
   .hero .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: var(--white); }
   
   /* Hero ticket (receipt-tape design) */
   .hero__ticket {
     background: var(--white);
     border-radius: var(--radius-md);
     overflow: hidden;
     box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.08);
     position: relative;
   }
   /* Serrated top edge */
   .hero__ticket::before {
     content: '';
     display: block;
     height: 14px;
     background: radial-gradient(circle at 8px -6px, var(--navy) 12px, var(--white) 12px);
     background-size: 16px 14px;
     background-repeat: repeat-x;
   }
   .hero__ticket-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--space-3) var(--space-4);
     background: var(--navy);
     color: var(--white);
     font-size: var(--text-sm);
     font-family: var(--font-mono);
   }
   .ticket-no {
     font-size: var(--text-lg);
     font-weight: 700;
     color: var(--amber);
   }
   .hero__ticket-body {
     padding: var(--space-4);
   }
   .hero__ticket-row {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     padding: var(--space-2) 0;
     border-bottom: 1px dashed var(--hairline);
     font-size: var(--text-sm);
   }
   .hero__ticket-row:last-child { border-bottom: none; }
   .hero__ticket-row dt { color: var(--muted); }
   .hero__ticket-row dd {
     font-family: var(--font-mono);
     font-weight: 700;
     color: var(--ink);
   }
   .hero__ticket-foot {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--space-3) var(--space-4);
     background: var(--amber-pale);
     border-top: 1px dashed var(--amber);
   }
   .hero__ticket-foot .label { font-size: var(--text-xs); color: var(--amber-badge); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
   .hero__ticket-foot .stars { color: var(--amber); font-size: var(--text-lg); letter-spacing: 2px; }
   
   .stamp {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 110px;
     height: 110px;
     border: 3px solid var(--amber);
     border-radius: 50%;
     text-align: center;
     font-family: var(--font-mono);
     font-size: var(--text-xs);
     font-weight: 700;
     color: var(--amber);
     text-transform: uppercase;
     letter-spacing: .1em;
     transform: rotate(-12deg);
     opacity: .85;
     margin-left: auto;
     margin-bottom: var(--space-3);
   }
   
   /* ── ═══════════════════════════════════════════════════════════════════════
      SECTIONS
      ══════════════════════════════════════════════════════════════════════════ */
   .section { padding: var(--space-9) 0; }
   .section--tight { padding: var(--space-6) 0; }
   .section--alt {
     background: var(--navy);
   }
   
   .section__head {
     margin-bottom: var(--space-7);
   }
   .section__title {
     font-family: var(--font-display);
     font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
     color: var(--ink);
     margin-bottom: var(--space-3);
   }
   .section--alt .section__title { color: var(--white); }
   .section__lede {
     color: var(--muted);
     font-size: var(--text-md);
     max-width: 56ch;
   }
   .section--alt .section__lede { color: rgba(255,255,255,.6); }
   
   /* ── TALLY ── */
   .tally {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1px;
     background: var(--hairline);
     border: 1px solid var(--hairline);
     border-radius: var(--radius-md);
     overflow: hidden;
   }
   .tally__item {
     background: var(--white);
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: var(--space-6) var(--space-4);
     gap: var(--space-2);
   }
   .tally__value {
     font-family: var(--font-display);
     font-size: var(--text-4xl);
     color: var(--navy);
     line-height: 1;
   }
   .tally__label {
     font-size: var(--text-sm);
     color: var(--muted);
     font-weight: 500;
   }
   
   /* ── COUNTER CARDS (nav tickets) ── */
   .counters {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: var(--space-4);
   }
   /* 5th card spans across the bottom gap */
   .counters .ticket:nth-child(4),
   .counters .ticket:nth-child(5) {
     /* fall through to last row naturally */
   }
   
   .ticket {
     display: flex;
     flex-direction: column;
     background: var(--white);
     border: 1px solid var(--hairline);
     border-radius: var(--radius-md);
     overflow: hidden;
     transition: box-shadow .2s, transform .2s, border-color .2s;
     text-decoration: none;
     color: var(--body);
     position: relative;
   }
   .ticket::after {
     /* receipt serration at bottom */
     content: '';
     display: block;
     height: 10px;
     background: radial-gradient(circle at 8px 16px, var(--paper) 10px, var(--white) 10px);
     background-size: 16px 10px;
     background-repeat: repeat-x;
     position: absolute;
     bottom: 0; left: 0; right: 0;
   }
   .ticket:hover {
     box-shadow: var(--shadow-md);
     transform: translateY(-2px);
     border-color: var(--amber);
   }
   .ticket__head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--space-3) var(--space-4);
     background: var(--navy);
   }
   .ticket__no {
     font-family: var(--font-mono);
     font-size: var(--text-xs);
     font-weight: 700;
     color: var(--amber);
     letter-spacing: .08em;
   }
   .ticket__icon {
     color: rgba(255,255,255,.5);
     display: flex;
     align-items: center;
   }
   .ticket__icon svg, .ticket__icon i { width: 18px; height: 18px; }
   .ticket__body {
     padding: var(--space-5) var(--space-4) calc(var(--space-5) + 10px);
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
   }
   .ticket__title {
     font-family: var(--font-display);
     font-size: var(--text-lg);
     color: var(--ink);
   }
   .ticket__desc {
     font-size: var(--text-sm);
     color: var(--muted);
     line-height: 1.6;
     flex: 1;
   }
   .ticket__foot {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: var(--space-4);
     font-size: var(--text-sm);
     font-weight: 600;
     color: var(--navy);
   }
   .ticket__foot svg { width: 16px; height: 16px; }
   
   /* ── FLOW STEPS ── */
   .flow {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: var(--space-5);
     position: relative;
   }
   .flow::before {
     content: '';
     position: absolute;
     top: 28px;
     left: calc(12.5% + 20px);
     right: calc(12.5% + 20px);
     height: 1px;
     background: rgba(255,255,255,.15);
     z-index: 0;
   }
   .flow__step {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: var(--space-3);
     position: relative;
     z-index: 1;
   }
   .flow__num {
     font-family: var(--font-mono);
     font-size: var(--text-xs);
     font-weight: 700;
     color: var(--amber);
     letter-spacing: .08em;
   }
   .flow__icon {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: rgba(232,160,32,.15);
     border: 1.5px solid rgba(232,160,32,.3);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--amber);
   }
   .flow__icon svg, .flow__icon i { width: 22px; height: 22px; }
   .flow__title {
     font-family: var(--font-display);
     font-size: var(--text-md);
     color: var(--white);
   }
   .flow__desc {
     font-size: var(--text-sm);
     color: rgba(255,255,255,.55);
     line-height: 1.6;
   }
   
   /* ── VISIT / MAP ── */
   .visit {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--space-6);
     align-items: start;
   }
   .visit__card {
     background: var(--white);
     border: 1px solid var(--hairline);
     border-radius: var(--radius-md);
     padding: var(--space-6);
     display: flex;
     flex-direction: column;
     gap: var(--space-5);
   }
   .visit__row {
     display: flex;
     gap: var(--space-4);
     align-items: flex-start;
   }
   .visit__row i, .visit__row svg { width: 20px; height: 20px; color: var(--amber); flex-shrink: 0; margin-top: 2px; }
   .visit__row h4 { font-size: var(--text-sm); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
   .visit__row p { font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }
   .visit__map {
     border-radius: var(--radius-md);
     overflow: hidden;
     border: 1px solid var(--hairline);
     height: 340px;
   }
   .visit__map iframe {
     width: 100%;
     height: 100%;
     border: none;
     display: block;
   }
   
   /* ── ═══════════════════════════════════════════════════════════════════════
      PAGE HEAD (inner pages)
      ══════════════════════════════════════════════════════════════════════════ */
   .page-head {
     background: var(--navy);
     padding: var(--space-7) 0;
     border-bottom: 3px solid var(--amber);
     position: relative;
     overflow: hidden;
   }
   .page-head::after {
     content: '';
     position: absolute;
     right: -80px;
     top: -80px;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     background: rgba(232,160,32,.06);
     pointer-events: none;
   }
   .page-head h1 {
     font-family: var(--font-display);
     font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
     color: var(--white);
     margin-bottom: var(--space-2);
   }
   .page-head .eyebrow { color: var(--amber); }
   .page-head__lede {
     font-size: var(--text-md);
     color: rgba(255,255,255,.6);
     max-width: 60ch;
     line-height: 1.6;
   }
   .page-head__row {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: var(--space-5);
   }
   
   /* ── ═══════════════════════════════════════════════════════════════════════
      MENU PAGE
      ══════════════════════════════════════════════════════════════════════════ */
   .search-row {
     display: flex;
     gap: var(--space-3);
     align-items: center;
     margin-bottom: var(--space-5);
     flex-wrap: wrap;
   }
   .field {
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
   }
   .field label {
     font-size: var(--text-sm);
     font-weight: 600;
     color: var(--ink);
   }
   .field input,
   .field textarea,
   .field select {
     padding: .625rem var(--space-3);
     border: 1.5px solid var(--hairline);
     border-radius: var(--radius-sm);
     background: var(--white);
     color: var(--ink);
     font-size: var(--text-sm);
     transition: border-color .15s, box-shadow .15s;
   }
   .field input:focus,
   .field textarea:focus,
   .field select:focus {
     outline: none;
     border-color: var(--navy);
     box-shadow: 0 0 0 3px rgba(13,31,60,.1);
   }
   .field input::placeholder,
   .field textarea::placeholder { color: var(--muted); }
   .field__hint { font-size: var(--text-xs); color: var(--muted); }
   
   /* Category filter chips */
   .filter-bar {
     display: flex;
     flex-wrap: wrap;
     gap: var(--space-2);
     margin-bottom: var(--space-6);
   }
   .chip {
     padding: .375rem .875rem;
     border-radius: 100px;
     border: 1.5px solid var(--hairline);
     background: var(--white);
     font-size: var(--text-sm);
     font-weight: 500;
     color: var(--muted);
     transition: all .15s;
     cursor: pointer;
   }
   .chip:hover { border-color: var(--navy); color: var(--navy); }
   .chip.is-active {
     background: var(--navy);
     border-color: var(--navy);
     color: var(--white);
   }
   
   /* Product grid */
   .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
     gap: var(--space-4);
   }
   .product-card {
     background: var(--white);
     border: 1.5px solid var(--hairline);
     border-radius: var(--radius-md);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     transition: box-shadow .2s, transform .15s, border-color .2s;
   }
   .product-card:hover {
     box-shadow: var(--shadow-md);
     transform: translateY(-2px);
     border-color: var(--amber);
   }
   .product-card__top {
     padding: var(--space-4);
     display: flex;
     justify-content: space-between;
     align-items: center;
     min-height: 56px;
   }
   .product-card__cat {
     font-size: var(--text-xs);
     font-weight: 700;
     font-family: var(--font-mono);
     letter-spacing: .06em;
     text-transform: uppercase;
   }
   .product-card__icon { opacity: .7; }
   .product-card__body {
     padding: var(--space-4);
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
     border-top: 1px dashed var(--hairline);
   }
   .product-card__name {
     font-family: var(--font-display);
     font-size: var(--text-md);
     color: var(--ink);
     line-height: 1.3;
   }
   .product-card__unit {
     font-size: var(--text-xs);
     color: var(--muted);
     font-family: var(--font-mono);
   }
   .product-card__price {
     font-family: var(--font-mono);
     font-size: var(--text-xl);
     font-weight: 700;
     color: var(--navy);
     margin-top: auto;
     padding-top: var(--space-2);
   }
   .product-card__price small {
     font-size: var(--text-xs);
     font-weight: 400;
     color: var(--muted);
   }
   .product-card__foot {
     padding: var(--space-3) var(--space-4);
     background: var(--paper);
     border-top: 1px dashed var(--hairline);
     display: flex;
     justify-content: flex-end;
   }
   
   /* Category colour swatches */
   .swatch-1 { background: #EFF4FF; color: var(--navy); }
   .swatch-2 { background: #FFF7ED; color: #92400E; }
   .swatch-3 { background: #F0FDF4; color: #166534; }
   .swatch-4 { background: #FDF4FF; color: #701A75; }
   .swatch-5 { background: #EFF6FF; color: #1E40AF; }
   .swatch-6 { background: #FFF1F2; color: #9F1239; }
   .swatch-7 { background: #FEFCE8; color: #854D0E; }
   .swatch-8 { background: #F0FDFA; color: #134E4A; }
   
   /* ── ═══════════════════════════════════════════════════════════════════════
      MODAL
      ══════════════════════════════════════════════════════════════════════════ */
   .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(13,31,60,.6);
     backdrop-filter: blur(4px);
     z-index: 200;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: var(--space-4);
   }
   .modal-overlay[hidden] { display: none; }
   .modal {
     background: var(--white);
     border-radius: var(--radius-md);
     width: 100%;
     max-width: 28rem;
     max-height: 90vh;
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow-lg);
     overflow: hidden;
   }
   .modal__head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: var(--space-4) var(--space-5);
     background: var(--navy);
     color: var(--white);
     flex-shrink: 0;
   }
   .modal__head h3 { font-family: var(--font-display); font-size: var(--text-lg); }
   .modal__head .icon-btn { color: rgba(255,255,255,.6); }
   .modal__head .icon-btn:hover { color: var(--white); background: rgba(255,255,255,.1); }
   .modal__body {
     padding: var(--space-5);
     overflow-y: auto;
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: var(--space-4);
   }
   .modal__foot {
     padding: var(--space-4) var(--space-5);
     border-top: 1px solid var(--hairline);
     display: flex;
     gap: var(--space-3);
     justify-content: flex-end;
     flex-shrink: 0;
     background: var(--paper);
   }
   .field--row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--space-4);
   }
   
   /* ── ═══════════════════════════════════════════════════════════════════════
      STAFF
      ══════════════════════════════════════════════════════════════════════════ */
   .staff-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: var(--space-4);
   }
   .staff-card {
     background: var(--white);
     border: 1px solid var(--hairline);
     border-radius: var(--radius-md);
     padding: var(--space-5);
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: var(--space-3);
     transition: box-shadow .2s, border-color .2s;
   }
   .staff-card:hover { box-shadow: var(--shadow-md); border-color: var(--amber); }
   .avatar {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-display);
     font-size: var(--text-xl);
     color: var(--white);
     flex-shrink: 0;
     border: 3px solid var(--white);
     box-shadow: 0 0 0 2px var(--hairline);
   }
   .staff-card__name {
     font-family: var(--font-display);
     font-size: var(--text-md);
     color: var(--ink);
   }
   .staff-card__role {
     font-size: var(--text-sm);
     color: var(--muted);
     font-weight: 500;
   }
   .staff-card__meta {
     font-size: var(--text-xs);
     color: var(--muted);
     font-family: var(--font-mono);
   }
   .icon-row {
     display: flex;
     gap: var(--space-2);
     justify-content: center;
   }
   
   /* ── ═══════════════════════════════════════════════════════════════════════
      RATINGS
      ══════════════════════════════════════════════════════════════════════════ */
   .ratings-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--space-7);
     align-items: start;
   }
   .form-card {
     background: var(--white);
     border: 1px solid var(--hairline);
     border-radius: var(--radius-md);
     padding: var(--space-5);
     display: flex;
     flex-direction: column;
     gap: var(--space-4);
   }
   .type-toggle {
     display: flex;
     gap: 0;
     background: var(--paper);
     border: 1px solid var(--hairline);
     border-radius: var(--radius-sm);
     overflow: hidden;
   }
   .type-toggle button {
     flex: 1;
     padding: .5rem;
     font-size: var(--text-sm);
     font-weight: 500;
     color: var(--muted);
     transition: all .15s;
   }
   .type-toggle button.is-active {
     background: var(--navy);
     color: var(--white);
   }
   .stars-input {
     display: flex;
     gap: var(--space-2);
   }
   .stars-input button {
     width: 2rem;
     height: 2rem;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform .1s;
   }
   .stars-input button:hover { transform: scale(1.2); }
   .stars-input button svg { width: 20px; height: 20px; }
   
   .feed { display: flex; flex-direction: column; gap: var(--space-3); }
   .feed-item {
     background: var(--white);
     border: 1px solid var(--hairline);
     border-radius: var(--radius-md);
     padding: var(--space-4);
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
     transition: box-shadow .15s;
   }
   .feed-item:hover { box-shadow: var(--shadow-sm); }
   .feed-item__head {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: var(--space-3);
   }
   .feed-item__who { font-weight: 700; color: var(--ink); font-size: var(--text-sm); }
   .feed-item__meta { font-size: var(--text-xs); color: var(--muted); }
   .feed-item__stars { color: var(--amber); letter-spacing: 2px; font-size: var(--text-md); }
   .feed-item__msg { font-size: var(--text-sm); color: var(--body); line-height: 1.6; }
   .feed-item__foot { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
   
   /* Admin summary */
   .summary-row { display: flex; gap: var(--space-5); flex-wrap: wrap; }
   .summary-card {
     flex: 1;
     min-width: 140px;
     background: rgba(255,255,255,.08);
     border: 1px solid rgba(255,255,255,.12);
     border-radius: var(--radius-md);
     padding: var(--space-5);
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: var(--space-2);
   }
   .summary-card__value {
     font-family: var(--font-display);
     font-size: var(--text-3xl);
     color: var(--white);
     line-height: 1;
   }
   .summary-card__value.is-alert { color: var(--amber); }
   .summary-card__label { font-size: var(--text-sm); color: rgba(255,255,255,.55); }
   
   /* ── ═══════════════════════════════════════════════════════════════════════
      QUEUE
      ══════════════════════════════════════════════════════════════════════════ */
   .queue-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--space-7);
     align-items: start;
   }
   .stack-gap { display: flex; flex-direction: column; gap: var(--space-3); }
   
   .queue-ticket {
     background: var(--white);
     border: 1px solid var(--hairline);
     border-radius: var(--radius-md);
     overflow: hidden;
     transition: box-shadow .15s;
   }
   .queue-ticket:hover { box-shadow: var(--shadow-sm); }
   .queue-ticket.my-ticket {
     border-color: var(--amber);
     box-shadow: 0 0 0 2px var(--amber-pale);
   }
   .queue-ticket__head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--space-3) var(--space-4);
     background: var(--navy);
     color: var(--white);
   }
   .queue-ticket__no {
     font-family: var(--font-mono);
     font-weight: 700;
     color: var(--amber);
     font-size: var(--text-md);
   }
   .queue-ticket__body {
     padding: var(--space-3) var(--space-4);
   }
   .queue-ticket__items {
     font-size: var(--text-sm);
     color: var(--muted);
     margin-top: 4px;
   }
   .queue-ticket__foot {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--space-2) var(--space-4) var(--space-3);
     border-top: 1px dashed var(--hairline);
     font-size: var(--text-xs);
     color: var(--muted);
   }
   .queue-status {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: var(--text-xs);
     font-family: var(--font-mono);
     font-weight: 700;
   }
   .dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     display: inline-block;
   }
   .dot--waiting { background: var(--amber); }
   .dot--serving { background: var(--green); box-shadow: 0 0 0 3px rgba(26,122,74,.2); }
   .dot--done    { background: var(--muted); }
   
   /* ── ═══════════════════════════════════════════════════════════════════════
      INVENTORY
      ══════════════════════════════════════════════════════════════════════════ */
   .report-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: var(--space-4);
     margin-bottom: var(--space-6);
   }
   .report-card {
     background: var(--white);
     border: 1px solid var(--hairline);
     border-radius: var(--radius-md);
     padding: var(--space-5);
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
   }
   .report-card__label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--font-mono); }
   .report-card__value {
     font-family: var(--font-display);
     font-size: var(--text-3xl);
     color: var(--navy);
     line-height: 1;
   }
   .report-card__value.is-alert { color: var(--red); }
   
   .table-wrap {
     background: var(--white);
     border: 1px solid var(--hairline);
     border-radius: var(--radius-md);
     overflow-x: auto;
   }
   table {
     width: 100%;
     border-collapse: collapse;
     font-size: var(--text-sm);
   }
   thead {
     background: var(--navy);
     color: var(--white);
   }
   thead th {
     padding: var(--space-3) var(--space-4);
     text-align: left;
     font-size: var(--text-xs);
     font-weight: 700;
     font-family: var(--font-mono);
     letter-spacing: .08em;
     text-transform: uppercase;
     white-space: nowrap;
   }
   tbody tr {
     border-bottom: 1px solid var(--hairline);
     transition: background .12s;
   }
   tbody tr:last-child { border-bottom: none; }
   tbody tr:hover { background: var(--paper); }
   tbody td {
     padding: var(--space-3) var(--space-4);
     color: var(--body);
     vertical-align: middle;
   }
   tbody td.is-alert { color: var(--red); font-weight: 700; }
   .actions { display: flex; gap: var(--space-2); }
   
   /* Bar chart */
   .bar-chart { display: flex; flex-direction: column; gap: var(--space-3); }
   .bar-chart__row { display: grid; grid-template-columns: 160px 1fr 100px; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
   .bar-chart__row span:first-child { color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .bar-chart__track { background: var(--paper-warm); border-radius: 2px; height: 10px; overflow: hidden; }
   .bar-chart__fill { height: 100%; background: var(--navy); border-radius: 2px; transition: width .5s ease; }
   .bar-chart__fill.is-alert { background: var(--red); }
   .bar-chart__val { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); text-align: right; }
   
   /* ── ═══════════════════════════════════════════════════════════════════════
      FOOTER
      ══════════════════════════════════════════════════════════════════════════ */
   .site-footer {
     background: var(--ink);
     color: rgba(255,255,255,.65);
     margin-top: auto;
   }
   .footer__grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: var(--space-7);
     padding: var(--space-8) 0 var(--space-7);
   }
   .footer__brand {
     display: flex;
     align-items: center;
     gap: var(--space-3);
     margin-bottom: var(--space-4);
   }
   .footer__brand .brand__name { color: var(--white); font-family: var(--font-display); font-size: var(--text-lg); }
   .footer__brand .brand__mark span { background: var(--amber); }
   .footer__brand .brand__mark span:last-child { background: rgba(255,255,255,.4); }
   .footer__grid > div > p { font-size: var(--text-sm); line-height: 1.7; }
   .footer__heading {
     display: block;
     font-size: var(--text-xs);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .1em;
     color: var(--amber);
     font-family: var(--font-mono);
     margin-bottom: var(--space-4);
   }
   .footer__grid ul { display: flex; flex-direction: column; gap: var(--space-2); }
   .footer__grid li, .footer__grid a { font-size: var(--text-sm); color: rgba(255,255,255,.55); }
   .footer__grid a:hover { color: var(--amber); }
   .footer__bottom {
     border-top: 1px solid rgba(255,255,255,.08);
     padding: var(--space-5) 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: var(--text-xs);
     color: rgba(255,255,255,.35);
   }
   
   /* ── UTILITY ──────────────────────────────────────────────────────────────── */
   .notice {
     padding: var(--space-6);
     text-align: center;
     color: var(--muted);
     font-size: var(--text-sm);
   }
   .empty {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: var(--space-3);
     padding: var(--space-8);
     color: var(--muted);
   }
   .empty svg { width: 32px; height: 32px; opacity: .35; }
   .empty p, .empty a { font-size: var(--text-sm); }
   .empty a { color: var(--navy); text-decoration: underline; }
   
   /* Toast */
   .toast {
     position: fixed;
     bottom: var(--space-6);
     left: 50%;
     transform: translateX(-50%) translateY(calc(100% + var(--space-6)));
     background: var(--ink);
     color: var(--white);
     padding: var(--space-3) var(--space-5);
     border-radius: 100px;
     display: flex;
     align-items: center;
     gap: var(--space-2);
     font-size: var(--text-sm);
     font-weight: 500;
     box-shadow: var(--shadow-lg);
     z-index: 9999;
     transition: transform .3s cubic-bezier(.34,1.56,.64,1);
     white-space: nowrap;
     border-left: 3px solid var(--amber);
   }
   .toast.is-visible { transform: translateX(-50%) translateY(0); }
   .toast svg { width: 16px; height: 16px; color: var(--amber); flex-shrink: 0; }
   .toast__text { color: var(--white); }
   
   /* ── ═══════════════════════════════════════════════════════════════════════
      RESPONSIVE
      ══════════════════════════════════════════════════════════════════════════ */
   @media (max-width: 1024px) {
     .hero__grid { grid-template-columns: 1fr; max-width: 640px; }
     .hero__grid > div:last-child { display: none; }
     .counters { grid-template-columns: repeat(2, 1fr); }
     .flow { grid-template-columns: repeat(2, 1fr); }
     .flow::before { display: none; }
     .footer__grid { grid-template-columns: 1fr 1fr; }
     .tally { grid-template-columns: repeat(2, 1fr); }
     .report-grid { grid-template-columns: repeat(2, 1fr); }
   }
   
   @media (max-width: 768px) {
     :root { --header-h: 56px; }
     .nav-row { max-height: 0; }
     .nav-row.is-open { max-height: 400px; }
     .nav { flex-direction: column; height: auto; padding: var(--space-3) 0; }
     .nav__link { height: 44px; width: 100%; padding-inline: var(--space-5); border-bottom-color: transparent; border-left: 3px solid transparent; }
     .nav__link[aria-current="page"] { border-bottom-color: transparent; border-left-color: var(--amber); }
     .nav__toggle { display: flex; }
     .role-switch__label { display: none; }
     .hero { padding: var(--space-7) 0; }
     .section { padding: var(--space-7) 0; }
     .counters { grid-template-columns: 1fr; }
     .flow { grid-template-columns: 1fr; }
     .visit { grid-template-columns: 1fr; }
     .visit__map { height: 240px; }
     .ratings-layout { grid-template-columns: 1fr; }
     .queue-grid { grid-template-columns: 1fr; }
     .footer__grid { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6) 0; }
     .footer__bottom { flex-direction: column; gap: var(--space-2); text-align: center; }
     .page-head__row { flex-direction: column; align-items: flex-start; }
     .bar-chart__row { grid-template-columns: 120px 1fr 80px; }
     .tally { grid-template-columns: 1fr 1fr; }
     .report-grid { grid-template-columns: 1fr 1fr; }
     .field--row { grid-template-columns: 1fr; }
   }
   
   @media (max-width: 480px) {
     .tally { grid-template-columns: 1fr; }
     .report-grid { grid-template-columns: 1fr; }
     .product-grid { grid-template-columns: 1fr; }
     .staff-grid { grid-template-columns: 1fr 1fr; }
     .btn-row { flex-direction: column; align-items: stretch; }
     .btn-row .btn { justify-content: center; }
   }
   
   /* Reduced motion */
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
   }