/* ============================================================================
 * KITS — Identity Overlay (presentation-only)
 *
 * Purpose: repaint the visible Annap-Coffee-Atelier identity into the
 *          Kits QR product identity WITHOUT renaming any existing class,
 *          form name, data-attribute, ID, route, or JS contract.
 *
 * Strategy: every selector here overrides the existing Annap/Atelier
 *           surfaces (ah-*, annap-*, body.guest-app, body.admin-root, etc.).
 *           Class names remain so all working markup / JS / SSR contracts
 *           continue to function.
 *
 * Identity:
 *   - near-black canvas, soft surfaces, restrained brown accents
 *   - Inter typography only, no editorial serif
 *   - product / operational feel, not boutique / ritual
 * ========================================================================== */

:root {
  /* Kits palette ---------------------------------------------------------- */
  --kits-bg: 11 11 11;          /* near-black foundation                */
  --kits-bg-2: 17 17 17;
  --kits-surface: 21 19 17;     /* subtle warm-graphite card surface    */
  --kits-surface-2: 27 25 22;
  --kits-surface-3: 33 30 27;
  --kits-text: 245 243 239;      /* soft white                           */
  --kits-text-muted: 168 162 158;
  --kits-text-quiet: 141 135 128;
  --kits-coffee: 160 106 69;     /* restrained roasted brown             */
  --kits-coffee-strong: 139 94 60;
  --kits-coffee-soft: 111 78 55;
  --kits-border: rgba(255, 255, 255, 0.08);
  --kits-border-strong: rgba(255, 255, 255, 0.14);
  --kits-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px -16px rgba(0, 0, 0, 0.55);
  --kits-radius: 12px;
  --kits-radius-sm: 8px;
  --kits-radius-lg: 16px;
}

/* =========================================================================
 * GLOBAL TYPOGRAPHY & COLOR
 * Force Inter / SFMono only. Drop Fraunces/Newsreader editorial serif.
 * ======================================================================= */
:root {
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif !important;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif !important;
  --font-code: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
}

/* Disable editorial display weights everywhere they used to render */
.annap-type-display,
 .annap-reg-display,
 .font-display {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-style: normal !important;
}

/* =========================================================================
 * THEME COLOR META OVERRIDES
 * Theme-color meta is set via HTML meta tags in layouts, but the visible
 * background must reflect the Kits near-black identity.
 * ======================================================================= */
html,
html.annap-correspond-ui,
html.annap-seated-guest,
html.annap-table-notice,
html.annap-compact-guest-header {
  background-color: rgb(var(--kits-bg)) !important;
  color-scheme: dark !important;
}

/* =========================================================================
 * GUEST SHELL — body.guest-app
 * Repaint the entire guest surface from warm paper-letter beige to
 * near-black Kits operational canvas.
 * ======================================================================= */
body.guest-app,
body.guest-app.min-h-dvh,
html:has(body.guest-app) {
  --bg: 11 11 11 !important;
  --fg: 245 243 239 !important;
  --muted: 168 162 158 !important;
  --muted-2: 141 135 128 !important;
  --paper: 21 19 17 !important;
  --paper-2: 27 25 22 !important;
  --glass: 21 19 17 !important;
  --accent: 160 106 69 !important;
  --accent-2: 139 94 60 !important;
  background-color: rgb(var(--kits-bg)) !important;
  background-image: none !important;
  color: rgb(var(--kits-text)) !important;
  font-family: var(--font-ui) !important;
  font-weight: 400 !important;
}

body.guest-app:before,
body.guest-app .annap-ambient-stack,
body.guest-app .annap-ambient-bg,
body.guest-app .annap-ambient-thermal,
body.guest-app .annap-ambient-grain {
  display: none !important;
}

body.guest-app .annap-root-surface {
  background: transparent !important;
}

/* Guest header — drop postal airmail edges, atelier mark styling */
body.guest-app .guest-header .guest-masthead__sheet,
body.guest-app .guest-masthead .surface-glass,
body.guest-app .guest-masthead {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius) !important;
  box-shadow: var(--kits-shadow-card) !important;
  backdrop-filter: none !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .postal-airmail-edge,
body.guest-app .postal-airmail-edge--top,
body.guest-app .postal-airmail-edge--bottom,
body.guest-app .postal-stamp,
body.guest-app .postal-hero-kicker {
  display: none !important;
}

body.guest-app .guest-masthead__mark {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: rgb(var(--kits-text)) !important;
  text-transform: none !important;
}

body.guest-app .guest-masthead__nav,
body.guest-app .guest-masthead__nav a,
body.guest-app .guest-lang-register button,
body.guest-app .guest-masthead__nav .text-\[rgb\(var\(--muted\)\)\] {
  color: rgb(var(--kits-text-muted)) !important;
  font-family: var(--font-ui) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-color: var(--kits-border) !important;
}

body.guest-app .guest-masthead__nav a:hover {
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .guest-lang-register {
  border: 1px solid var(--kits-border) !important;
  background: transparent !important;
}

body.guest-app .guest-lang-register button {
  border-radius: 6px !important;
  background: transparent !important;
}

/* Surface primitives under guest */
body.guest-app .surface-paper,
body.guest-app .surface-glass {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius) !important;
  box-shadow: var(--kits-shadow-card) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .surface-glass {
  backdrop-filter: none !important;
}

body.guest-app .btn-quiet,
body.guest-app .btn-ink {
  border-radius: 8px !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 1px solid var(--kits-border) !important;
  background: rgb(var(--kits-surface-2)) !important;
  color: rgb(var(--kits-text)) !important;
  box-shadow: none !important;
}

body.guest-app .btn-quiet:hover,
body.guest-app .btn-ink:hover {
  background: rgb(var(--kits-surface-3)) !important;
  transform: none !important;
  filter: none !important;
}

body.guest-app .btn-ink {
  background: rgb(var(--kits-coffee)) !important;
  border-color: rgb(var(--kits-coffee-strong)) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .btn-ink:hover {
  background: rgb(var(--kits-coffee-strong)) !important;
}

body.guest-app .hairline {
  background: var(--kits-border) !important;
}

body.guest-app .menu-browse > nav.sticky,
body.guest-app .menu-tasting-entry {
  background: rgb(var(--kits-bg)) !important;
  border: none !important;
  border-bottom: 1px solid var(--kits-border) !important;
  border-top: 1px solid var(--kits-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.guest-app .menu-cat-chip {
  border-radius: 6px !important;
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  color: rgb(var(--kits-text-muted)) !important;
  box-shadow: none !important;
}

body.guest-app .menu-cat-chip.ring-1,
body.guest-app .menu-cat-chip.is-selected {
  background: rgb(var(--kits-surface-3)) !important;
  border-color: rgb(var(--kits-coffee)) !important;
  color: rgb(var(--kits-text)) !important;
}

/* Mood / ritual / sommelier — repaint to operational */
body.guest-app .mood-pill,
body.guest-app .refine-chip {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius-sm) !important;
  color: rgb(var(--kits-text-muted)) !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.guest-app .mood-pill.is-selected,
body.guest-app .refine-chip.is-selected,
body.guest-app .refine-chip[aria-pressed="true"] {
  background: rgb(var(--kits-surface-3)) !important;
  border-color: rgb(var(--kits-coffee)) !important;
  color: rgb(var(--kits-text)) !important;
  box-shadow: 0 0 0 1px rgba(var(--kits-coffee), 0.4) !important;
  transform: none !important;
}

body.guest-app .mood-tasting-card {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius) !important;
  box-shadow: var(--kits-shadow-card) !important;
}

body.guest-app .mood-pill-kicker,
body.guest-app .mood-pill-title,
body.guest-app .mood-pill-line,
body.guest-app .mood-sommelier-inner--veil,
body.guest-app .sommelier-quiet-line,
body.guest-app .sommelier-shroud {
  color: rgb(var(--kits-text-muted)) !important;
  background: transparent !important;
}

body.guest-app .mood-card-meter,
body.guest-app .mood-card-meter span,
body.guest-app .mood-reading-rite__bar,
body.guest-app .mood-reading-rite__bar span {
  background: var(--kits-border) !important;
  background-image: none !important;
}

/* Track / order milestones */
body.guest-app .track-mile-rail {
  background: var(--kits-border) !important;
}

body.guest-app .track-mile-dot,
body.guest-app .track-mile-dot--done {
  border-color: var(--kits-border) !important;
  background: rgb(var(--kits-surface-2)) !important;
  color: rgb(var(--kits-text-muted)) !important;
}

body.guest-app .track-mile.is-current .track-mile-dot,
body.guest-app .track-mile-dot--done {
  background: rgba(var(--kits-coffee), 0.18) !important;
  border-color: rgb(var(--kits-coffee)) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .track-mile-label {
  color: rgb(var(--kits-text-quiet)) !important;
}

body.guest-app .track-mile.is-current .track-mile-label,
body.guest-app .track-mile.is-past .track-mile-label {
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .track-root--complete #track-hero-title {
  color: rgb(var(--kits-text)) !important;
}

/* Drink modal backdrop */
body.guest-app .drink-modal-backdrop {
  background: rgba(0, 0, 0, 0.65) !important;
}

body.guest-app .drink-modal-panel {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius-lg) !important;
  box-shadow: var(--kits-shadow-card) !important;
}

/* Selection */
body.guest-app ::selection {
  background: rgba(var(--kits-coffee), 0.4) !important;
  color: rgb(var(--kits-text)) !important;
}

/* =========================================================================
 * ADMIN — body.admin-root & atelier surfaces
 * ======================================================================= */
body.admin-root,
body.admin-root .admin-root,
.admin-root {
  --admin-canvas: 11 11 11 !important;
  --admin-elevated: 21 19 17 !important;
  --admin-elevated-2: 27 25 22 !important;
  --admin-stroke-alpha: 0.07 !important;
  --admin-gold-soft: 160 106 69 !important;
  --bg: 11 11 11 !important;
  --fg: 245 243 239 !important;
  --muted: 168 162 158 !important;
  --muted-2: 141 135 128 !important;
  --paper: 21 19 17 !important;
  --paper-2: 27 25 22 !important;
  --glass: 21 19 17 !important;
  --accent: 160 106 69 !important;
  --accent-2: 139 94 60 !important;
  background-color: rgb(var(--kits-bg)) !important;
  color: rgb(var(--kits-text)) !important;
  font-family: var(--font-ui) !important;
  font-weight: 400 !important;
}

.admin-ambient {
  background:
    radial-gradient(100% 60% at 0% 0%, rgba(var(--kits-coffee), 0.06), transparent 60%),
    radial-gradient(80% 50% at 100% 30%, rgba(255, 255, 255, 0.02), transparent 60%),
    radial-gradient(120% 80% at 50% 100%, rgba(0, 0, 0, 0.4), transparent 50%) !important;
}

.admin-sidebar {
  background: rgb(var(--kits-surface)) !important;
  border-right: 1px solid var(--kits-border) !important;
}

.admin-sidebar__inner {
  padding: 1rem 0.85rem;
}

.admin-mark {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  font-size: 0.95rem !important;
  color: rgb(var(--kits-text)) !important;
  display: block;
}

.admin-mark__title {
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.7rem !important;
  color: rgb(var(--kits-text-muted)) !important;
  display: block;
  margin-top: 0.15rem;
}

.admin-mark__subtitle {
  display: none !important;
}

.admin-nav-group-label {
  font-family: var(--font-ui) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  color: rgb(var(--kits-text-quiet)) !important;
  margin-bottom: 0.4rem;
  padding-left: 0.6rem;
}

.admin-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgb(var(--kits-text-muted)) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-nav-link:hover {
  background: rgb(var(--kits-surface-2)) !important;
  color: rgb(var(--kits-text)) !important;
}

.admin-nav-link.is-active {
  background: rgba(var(--kits-coffee), 0.12) !important;
  color: rgb(var(--kits-text)) !important;
  border-color: rgba(var(--kits-coffee), 0.45) !important;
}

.admin-nav-link__glyph {
  font-family: var(--font-ui) !important;
  font-size: 0.95rem !important;
  color: rgb(var(--kits-text-quiet)) !important;
  width: 1.1rem;
  display: inline-flex;
  justify-content: center;
}

.admin-nav-link.is-active .admin-nav-link__glyph,
.admin-nav-link:hover .admin-nav-link__glyph {
  color: rgb(var(--kits-coffee)) !important;
}

.admin-divider {
  border-top: 1px solid var(--kits-border) !important;
  margin: 0.4rem 0 !important;
}

/* Top bar */
.admin-topbar {
  background: rgb(var(--kits-bg)) !important;
  border-bottom: 1px solid var(--kits-border) !important;
  height: 56px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-topbar__crumb .admin-topbar__eyebrow {
  font-family: var(--font-ui) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgb(var(--kits-text-quiet)) !important;
  font-weight: 500 !important;
}

.admin-topbar__title {
  font-family: var(--font-ui) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: rgb(var(--kits-text)) !important;
}

.admin-btn,
.admin-btn--quiet,
.admin-btn--ghost {
  border-radius: 8px !important;
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  color: rgb(var(--kits-text)) !important;
  font-family: var(--font-ui) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.admin-search {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: 8px !important;
}

.admin-search__input {
  color: rgb(var(--kits-text)) !important;
  background: transparent !important;
}

.admin-dropdown__panel {
  background: rgb(var(--kits-surface-2)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: 8px !important;
}

.admin-dropdown__item {
  color: rgb(var(--kits-text)) !important;
}

.admin-dropdown__item:hover {
  background: rgb(var(--kits-surface-3)) !important;
}

/* =========================================================================
 * ADMIN INDEX — ah-* editorial surfaces
 * Repaint "Atelier hero / panel" surfaces to operational Kits cards.
 * ======================================================================= */
.ah {
  --ah-paper: rgb(var(--kits-surface)) !important;
  --ah-line: var(--kits-border) !important;
  --ah-gold: rgba(var(--kits-coffee), 0.35) !important;
  font-family: var(--font-ui) !important;
}

.ah-hero {
  padding: 1.5rem 0 1.75rem !important;
  margin-bottom: 1.75rem !important;
  border-bottom: 1px solid var(--kits-border) !important;
  display: grid;
  gap: 1.25rem;
}

.ah-hero__kicker {
  font-family: var(--font-ui) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: rgb(var(--kits-text-quiet)) !important;
}

.ah-hero__title {
  font-family: var(--font-ui) !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0.4rem 0 0 !important;
  color: rgb(var(--kits-text)) !important;
}

.ah-hero__lede {
  font-family: var(--font-ui) !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: rgb(var(--kits-text-muted)) !important;
  margin-top: 0.6rem !important;
  max-width: 40rem !important;
}

.ah-hero-aside {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius) !important;
  padding: 1rem 1.1rem !important;
  box-shadow: var(--kits-shadow-card) !important;
}

.ah-hero-aside dt {
  font-family: var(--font-ui) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgb(var(--kits-text-quiet)) !important;
  font-weight: 500 !important;
}

.ah-hero-aside dd {
  font-family: var(--font-ui) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: rgb(var(--kits-text)) !important;
  font-variant-numeric: tabular-nums !important;
  margin: 0.15rem 0 0 !important;
}

.ah-section {
  margin-bottom: 2.5rem !important;
}

.ah-section__label {
  font-family: var(--font-ui) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: rgb(var(--kits-text-quiet)) !important;
  margin-bottom: 0.4rem !important;
}

.ah-section__title {
  font-family: var(--font-ui) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: rgb(var(--kits-text)) !important;
  margin-bottom: 1rem !important;
}

.ah-panel {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius) !important;
  padding: 1.1rem 1.2rem !important;
  box-shadow: var(--kits-shadow-card) !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.ah-panel:hover {
  border-color: rgba(var(--kits-coffee), 0.35) !important;
  background: rgb(var(--kits-surface-2)) !important;
}

.ah-panel__eyebrow {
  font-family: var(--font-ui) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: rgb(var(--kits-text-quiet)) !important;
  margin-bottom: 0.4rem !important;
}

.ah-panel__title {
  font-family: var(--font-ui) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: rgb(var(--kits-text)) !important;
  margin-bottom: 0.4rem !important;
}

.ah-panel__copy {
  font-family: var(--font-ui) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  color: rgb(var(--kits-text-muted)) !important;
  margin-bottom: 0.6rem !important;
}

.ah-panel__meta {
  font-family: var(--font-ui) !important;
  font-size: 0.78rem !important;
  color: rgb(var(--kits-text-quiet)) !important;
  margin-bottom: 0.6rem !important;
  font-variant-numeric: tabular-nums !important;
}

.ah-panel__action a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: rgb(var(--kits-coffee)) !important;
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(var(--kits-coffee), 0.3);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ah-panel__action a:hover {
  color: rgb(var(--kits-text)) !important;
  border-bottom-color: rgb(var(--kits-coffee)) !important;
}

.ah-grid-ops {
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
}

.ah-grid-quick {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
}

.ah-stat-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  gap: 1rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius) !important;
  background: rgb(var(--kits-surface)) !important;
  padding: 1rem 1.1rem !important;
}

.ah-stat-row > .ah-stat {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.ah-stat dt {
  font-family: var(--font-ui) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgb(var(--kits-text-quiet)) !important;
  font-weight: 500 !important;
}

.ah-stat dd {
  font-family: var(--font-ui) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: rgb(var(--kits-text)) !important;
  font-variant-numeric: tabular-nums !important;
  margin-top: 0.3rem !important;
}

.ah-editorial,
.ah-editorial__grid,
.ah-editorial__card {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius) !important;
  box-shadow: var(--kits-shadow-card) !important;
}

.ah-editorial__title,
.ah-editorial__copy,
.ah-editorial__meta,
.ah-editorial__eyebrow {
  color: rgb(var(--kits-text-muted)) !important;
  font-family: var(--font-ui) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Admin main surface padding / layout */
.admin-main {
  background: rgb(var(--kits-bg)) !important;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) !important;
  color: rgb(var(--kits-text)) !important;
}

.admin-main-surface {
  max-width: 1280px !important;
}

/* =========================================================================
 * INLINE COMPOSITION PANEL — exp-*
 * Repaint the homepage composition panel from "Experience CMS" feel to a
 * compact Kits operational control panel. PRESERVE all data-* attributes
 * that the admin-homepage-composition.js contract depends on.
 * ======================================================================= */
.exp-homepage-panel {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius) !important;
  padding: 1.25rem 1.35rem !important;
  box-shadow: var(--kits-shadow-card) !important;
}

.exp-homepage-panel__head {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--kits-border) !important;
  margin-bottom: 1.1rem !important;
}

.exp-homepage-panel__title {
  font-family: var(--font-ui) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: rgb(var(--kits-text)) !important;
  margin: 0.35rem 0 !important;
}

.exp-kicker {
  font-family: var(--font-ui) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: rgb(var(--kits-text-quiet)) !important;
  margin: 0 !important;
}

.exp-muted {
  font-family: var(--font-ui) !important;
  font-size: 0.85rem !important;
  color: rgb(var(--kits-text-muted)) !important;
  margin: 0.3rem 0 0 !important;
  max-width: 38rem !important;
  line-height: 1.55 !important;
}

.exp-homepage-panel__status {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  text-align: right !important;
}

.exp-homepage-panel__status-label {
  font-family: var(--font-ui) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgb(var(--kits-text-quiet)) !important;
  font-weight: 500 !important;
}

.exp-homepage-panel__status-count {
  font-family: var(--font-ui) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: rgb(var(--kits-text)) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
}

.exp-homepage-panel__status-layout {
  font-family: var(--font-ui) !important;
  font-size: 0.78rem !important;
  color: rgb(var(--kits-text-muted)) !important;
}

.exp-homepage-panel__grid {
  display: grid !important;
  grid-template-columns: minmax(180px, 14rem) minmax(0, 1fr) !important;
  gap: 1.25rem !important;
}

@media (max-width: 768px) {
  .exp-homepage-panel__grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mini preview device frame */
.exp-hp-mini-preview {
  background: rgb(var(--kits-bg-2)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius) !important;
  padding: 0.85rem !important;
}

.exp-hp-mini-preview__device {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius-sm) !important;
  padding: 0.85rem !important;
}

.exp-hp-mini-preview__kicker {
  font-family: var(--font-ui) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgb(var(--kits-text-quiet)) !important;
  font-weight: 500 !important;
  margin: 0 0 0.5rem !important;
}

.exp-hp-mini-preview__card {
  background: rgb(var(--kits-surface-3)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: 8px !important;
  padding: 0.6rem 0.7rem !important;
  font-family: var(--font-ui) !important;
  color: rgb(var(--kits-text)) !important;
}

.exp-hp-mini-preview__card strong {
  font-family: var(--font-ui) !important;
  color: rgb(var(--kits-text)) !important;
}

.exp-hp-mini-preview__empty,
.exp-hp-zero-warning {
  font-family: var(--font-ui) !important;
  font-size: 0.78rem !important;
  color: rgb(var(--kits-text-quiet)) !important;
  margin: 0.5rem 0 0 !important;
}

/* Mode lamps (flow toggles) */
.exp-mode-lamps {
  display: grid !important;
  gap: 0.6rem !important;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
}

.exp-mode-lamp {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius-sm) !important;
  padding: 0.85rem 1rem !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.exp-mode-lamp:hover {
  border-color: rgba(var(--kits-coffee), 0.4) !important;
  background: rgb(var(--kits-surface-2)) !important;
}

.exp-mode-lamp:has(.exp-mode-lamp__input:checked) {
  border-color: rgb(var(--kits-coffee)) !important;
  background: rgba(var(--kits-coffee), 0.08) !important;
}

.exp-mode-lamp__input {
  width: 1rem !important;
  height: 1rem !important;
  accent-color: rgb(var(--kits-coffee)) !important;
  margin-top: 0.15rem !important;
  flex-shrink: 0;
}

.exp-mode-lamp__bezel,
.exp-mode-lamp__glow,
.exp-mode-lamp__filament {
  display: none !important;
}

.exp-mode-lamp__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
}

.exp-mode-lamp__title {
  font-family: var(--font-ui) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: rgb(var(--kits-text)) !important;
}

.exp-mode-lamp__hint {
  font-family: var(--font-ui) !important;
  font-size: 0.8rem !important;
  color: rgb(var(--kits-text-muted)) !important;
  line-height: 1.5 !important;
}

/* Actions row */
.exp-actions {
  margin-top: 1.1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--kits-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

.exp-btn,
.exp-btn--primary {
  font-family: var(--font-ui) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 8px !important;
  padding: 0.65rem 1.25rem !important;
  border: 1px solid rgb(var(--kits-coffee-strong)) !important;
  background: rgb(var(--kits-coffee)) !important;
  color: rgb(var(--kits-text)) !important;
  box-shadow: 0 8px 22px rgba(var(--kits-coffee), 0.2) !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.exp-btn--primary:hover {
  background: rgb(var(--kits-coffee-strong)) !important;
  transform: translateY(-1px);
}

.exp-homepage-panel__status[role="status"] {
  font-family: var(--font-ui) !important;
  font-size: 0.85rem !important;
  color: rgb(var(--kits-text-muted)) !important;
}

/* =========================================================================
 * MOBILE / RESPONSIVE
 * ======================================================================= */
@media (max-width: 1023px) {
  .admin-sidebar {
    display: none !important;
  }
  .ah-hero {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .admin-main {
    padding: 1rem !important;
  }
  .exp-homepage-panel {
    padding: 1rem !important;
  }
  .ah-hero__title {
    font-size: 1.35rem !important;
  }
}

/* =========================================================================
 * GUEST MENU BROWSE — repaint cream/print-paper menu-browse surfaces
 * to the Kits dark coffee system. PRESERVE all data-* attributes, IDs and
 * grid template used by menu-browse-cards.js / reveal observer / chapter
 * composition.
 * ======================================================================= */
.menu-browse,
.menu-browse.menu-browse--catalogue,
.menu-browse--catalogue,
.menu-browse--catalogue.menu-browse {
  --menu-print-mat: rgb(var(--kits-surface)) !important;
  --menu-print-ink: rgb(var(--kits-text)) !important;
  --menu-print-ink-soft: rgb(var(--kits-text-muted)) !important;
  --menu-print-grain: none !important;
  background-color: rgb(var(--kits-bg)) !important;
  background-image: none !important;
  background-size: auto !important;
  background-blend-mode: normal !important;
  color: rgb(var(--kits-text)) !important;
}

.menu-browse--catalogue {
  padding-bottom: max(8rem, calc(7rem + env(safe-area-inset-bottom, 0px))) !important;
  background-image: none !important;
}

/* Category rail — dark, quiet */
.menu-browse .menu-cat-editorial-bar,
.menu-browse--catalogue .menu-cat-editorial-bar {
  background: rgb(var(--kits-surface)) !important;
  border-bottom: 1px solid var(--kits-border) !important;
  box-shadow: none !important;
  border-top: 1px solid var(--kits-border) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

html.annap-correspond-ui .menu-browse .menu-cat-editorial-bar,
html.annap-correspond-ui .menu-browse--catalogue .menu-cat-editorial-bar {
  background: rgb(var(--kits-surface)) !important;
  border-bottom-color: var(--kits-border) !important;
}

.menu-browse .menu-editorial-chip {
  color: rgb(var(--kits-text-muted)) !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
  padding: 0.85rem 0.6rem !important;
}

.menu-browse .menu-editorial-chip:hover {
  color: rgb(var(--kits-text)) !important;
}

.menu-browse .menu-editorial-chip.is-active,
.menu-browse--catalogue .menu-editorial-chip.is-active {
  color: rgb(var(--kits-text)) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

.menu-browse .menu-editorial-chip::after {
  background: rgb(var(--kits-coffee)) !important;
  height: 2px !important;
  left: 0.6rem !important;
  right: 0.6rem !important;
}

/* Chapter heading — operational, not editorial */
.menu-browse .menu-chapter-head {
  border-top-color: var(--kits-border) !important;
}

.menu-browse .menu-chapter__index {
  color: rgb(var(--kits-text-quiet)) !important;
  font-family: var(--font-ui) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.menu-browse .menu-cat-heading,
.menu-browse--catalogue .menu-chapter-head .menu-cat-heading {
  color: rgb(var(--kits-text)) !important;
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

.menu-browse .menu-chapter__rest,
.menu-browse--catalogue .menu-chapter__rest {
  color: rgb(var(--kits-text-muted)) !important;
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.menu-browse--catalogue .menu-chapter-head .menu-cat-heading {
  font-family: var(--font-ui) !important;
}

/* Hero card frame — dark surface, intentional brand fallback */
.menu-editorial-card__frame,
.menu-browse .menu-editorial-card__frame,
.menu-browse--catalogue .menu-chapter-hero .menu-editorial-card__frame {
  background: linear-gradient(
    168deg,
    rgb(var(--kits-surface-2)) 0%,
    rgb(var(--kits-surface-3)) 100%
  ) !important;
  box-shadow:
    inset 0 0 0 1px var(--kits-border-strong),
    0 8px 24px -16px rgba(0, 0, 0, 0.55) !important;
}

.menu-browse .menu-editorial-card__frame--no-poster,
.menu-browse--catalogue .menu-chapter-hero .menu-editorial-card__frame--no-poster {
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 35%,
      rgba(var(--kits-coffee), 0.18) 0%,
      transparent 65%
    ),
    linear-gradient(
      168deg,
      rgb(var(--kits-surface-2)) 0%,
      rgb(var(--kits-surface-3)) 100%
    ) !important;
  background-size: 100% 100%, 100% 100% !important;
  background-blend-mode: normal, normal !important;
  box-shadow:
    inset 0 0 0 1px var(--kits-border-strong),
    0 8px 24px -16px rgba(0, 0, 0, 0.55) !important;
}

.menu-browse--catalogue .menu-chapter-support .menu-editorial-card__frame,
.menu-browse--catalogue .menu-chapter-support--compact .menu-editorial-card__frame {
  background: linear-gradient(
    165deg,
    rgb(var(--kits-surface)) 0%,
    rgb(var(--kits-surface-2)) 100%
  ) !important;
  box-shadow: inset 0 0 0 1px var(--kits-border) !important;
}

/* Image styles — no print/sepia filter on Kits cards */
.menu-editorial-card__img,
.menu-browse .menu-editorial-card__img,
.menu-browse--catalogue .menu-editorial-card__img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Image skeleton (loading state) — quiet dark */
.menu-editorial-card__frame:not(.img-loaded):not(.menu-editorial-card__frame--no-poster),
.menu-browse .menu-editorial-card__frame:not(.img-loaded):not(.menu-editorial-card__frame--no-poster) {
  background: rgba(var(--kits-text-quiet), 0.08) !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  animation: none !important;
}

/* Product fallback monogram — small, quiet, on dark coffee surface */
.menu-editorial-card__no-poster {
  background: transparent !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.menu-editorial-card__no-poster-glyph {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.4rem !important;
  height: 2.4rem !important;
  border-radius: 999px !important;
  background: rgba(var(--kits-coffee), 0.22) !important;
  border: 1px solid rgba(var(--kits-coffee), 0.45) !important;
  color: rgb(var(--kits-text)) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.menu-editorial-card__no-poster-lbl {
  display: block !important;
  margin-top: 0.55rem !important;
  color: rgb(var(--kits-text-muted)) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.62rem !important;
  font-style: normal !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* Hero card badge — coffee-tinted, not cream */
.menu-editorial-card__badge {
  background: rgba(var(--kits-coffee), 0.18) !important;
  color: rgb(var(--kits-text)) !important;
  border: 1px solid rgba(var(--kits-coffee), 0.45) !important;
  box-shadow: none !important;
  font-family: var(--font-ui) !important;
  font-size: 0.56rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 999px !important;
  top: 0.55rem !important;
  left: 0.55rem !important;
}

/* Card text — readable on dark */
.menu-editorial-card__name,
.menu-browse .menu-editorial-card__name,
.menu-browse--catalogue .menu-editorial-card__name {
  color: rgb(var(--kits-text)) !important;
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  text-shadow: none !important;
}

.menu-editorial-card__price,
.menu-browse .menu-editorial-card__price,
.menu-browse--catalogue .menu-chapter-hero .menu-editorial-card__price,
.menu-browse--catalogue .menu-chapter-support .menu-editorial-card__price {
  color: rgb(var(--kits-text)) !important;
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

.menu-editorial-card__taste,
.menu-browse--catalogue .menu-editorial-card__taste {
  color: rgb(var(--kits-text-muted)) !important;
  font-family: var(--font-ui) !important;
  font-style: normal !important;
}

.menu-editorial-card__cta,
.menu-browse--catalogue .menu-editorial-card__cta,
.menu-editorial-card__action,
.menu-browse--catalogue .menu-editorial-card__action {
  color: rgb(var(--kits-coffee)) !important;
  font-family: var(--font-ui) !important;
  font-style: normal !important;
}

.menu-editorial-card__cta-glyph,
.menu-editorial-card__action-glyph {
  color: rgb(var(--kits-coffee)) !important;
  opacity: 1 !important;
}

/* Supporting chapter — thin dark dividers instead of editorial hairlines */
.menu-browse .menu-chapter-support,
.menu-browse--catalogue .menu-chapter-support {
  border-top: 1px solid var(--kits-border) !important;
}

.menu-browse .menu-chapter-support .menu-editorial-card--support,
.menu-browse--catalogue .menu-chapter-support .menu-editorial-card--support {
  border-top: 1px solid var(--kits-border) !important;
  border-bottom: 0 !important;
}

.menu-browse .menu-chapter-support .menu-editorial-card--support:first-child,
.menu-browse--catalogue .menu-chapter-support .menu-editorial-card--support:first-child {
  border-top: 0 !important;
}

/* Chapter break — discreet */
.letter-chapter-break {
  color: rgb(var(--kits-text-quiet)) !important;
}

/* "ANNAP" eyebrow at top of menu page — turn into Kits eyebrow */
.menu-browse p.font-display.text-sm.tracking-\[0\.35em\].uppercase,
.menu-browse > header > p.font-display {
  color: rgb(var(--kits-coffee)) !important;
  font-family: var(--font-ui) !important;
  letter-spacing: 0.18em !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* =========================================================================
 * ORDER TRAY — compact dark chip + dark sheet interior
 * Repaint the "Khay đang chờ" floating chip and the open sheet from
 * cream/paper to a Kits dark coffee surface. PRESERVE every id used by
 * order-tray-dock.js.
 * ======================================================================= */

/* Variables override — keep the layout dimensions, swap the cream palette */
body.guest-app,
html:has(body.guest-app) {
  --checkout-sheet-bg: rgb(var(--kits-surface)) !important;
  --checkout-sheet-fg: rgb(var(--kits-text)) !important;
  --checkout-sheet-muted: rgb(var(--kits-text-muted)) !important;
  --checkout-sheet-muted-2: rgb(var(--kits-text-quiet)) !important;
  --checkout-sheet-line: var(--kits-border) !important;
  --checkout-sheet-card: rgb(var(--kits-surface-2)) !important;
  --checkout-sheet-ink: rgb(var(--kits-text)) !important;
  --checkout-sheet-ink-fg: rgb(var(--kits-text)) !important;
  --checkout-sheet-selected: rgb(var(--kits-coffee)) !important;
  --checkout-sheet-overlay: rgba(0, 0, 0, 0.65) !important;
  --checkout-sheet-radius: 12px !important;
  --checkout-sheet-shadow:
    0 -16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--kits-border) inset !important;
  --checkout-chip-shadow:
    0 8px 24px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--kits-border) inset !important;
}

body.guest-app .order-tray-backdrop,
body.guest-app #order-tray-backdrop.order-tray-backdrop-layer.is-visible,
body.guest-app #order-tray-backdrop.order-tray-backdrop.is-visible {
  background: rgba(0, 0, 0, 0.65) !important;
}

/* Compact floating chip */
body.guest-app #order-tray-chip.order-tray-chip,
body.guest-app #order-tray-chip.checkout-sheet-chip {
  min-height: 3rem !important;
  padding: 0.5rem 0.75rem !important;
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.65) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app #order-tray-chip:hover {
  background: rgb(var(--kits-surface-2)) !important;
  border-color: rgba(var(--kits-coffee), 0.45) !important;
}

body.guest-app #order-tray-chip-title,
body.guest-app .order-tray-chip__kicker,
body.guest-app #order-tray-chip-sub,
body.guest-app #order-tray-chip-guest {
  color: rgb(var(--kits-text)) !important;
  font-family: var(--font-ui) !important;
}

body.guest-app .order-tray-chip__kicker {
  color: rgb(var(--kits-text-quiet)) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.6rem !important;
  font-weight: 500 !important;
}

body.guest-app #order-tray-chip-title {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin-top: 0.15rem !important;
}

body.guest-app #order-tray-chip-sub {
  color: rgb(var(--kits-text-muted)) !important;
  font-size: 0.7rem !important;
  margin-top: 0.1rem !important;
}

body.guest-app .order-tray-chip__total,
body.guest-app .order-tray-root--empty .order-tray-chip__total {
  color: rgb(var(--kits-text)) !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

body.guest-app .order-tray-root--empty .order-tray-chip__total--empty {
  color: rgb(var(--kits-text-quiet)) !important;
  font-weight: 500 !important;
}

body.guest-app #order-tray-chip-guest {
  color: rgb(var(--kits-coffee)) !important;
  font-size: 0.6rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
}

body.guest-app .order-tray-chevron {
  background: rgb(var(--kits-surface-2)) !important;
  border: 1px solid var(--kits-border) !important;
  color: rgb(var(--kits-text-muted)) !important;
}

body.guest-app .order-tray-handle {
  background: rgb(var(--kits-text-quiet)) !important;
  opacity: 0.6 !important;
}

body.guest-app .order-tray-header__stamp,
body.guest-app .order-tray-header__stamp--compact {
  background: rgba(var(--kits-coffee), 0.2) !important;
  border: 1px solid rgba(var(--kits-coffee), 0.45) !important;
  color: rgb(var(--kits-text)) !important;
}

/* Open sheet */
body.guest-app #order-tray-sheet.order-tray-sheet,
body.guest-app .order-tray-sheet.checkout-sheet {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: 14px 14px 6px 6px !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app #order-tray-sheet .annap-tray-header,
body.guest-app #order-tray-sheet .order-tray-header-compact {
  background: rgb(var(--kits-surface)) !important;
  border-bottom: 1px solid var(--kits-border) !important;
}

body.guest-app #traySheetTitle {
  color: rgb(var(--kits-text)) !important;
}

body.guest-app #trayCountLine {
  color: rgb(var(--kits-text-muted)) !important;
}

body.guest-app .order-tray-table-meta {
  color: rgb(var(--kits-text-quiet)) !important;
}

body.guest-app #annap-tray-close,
body.guest-app #order-tray-clear {
  color: rgb(var(--kits-text-muted)) !important;
}

body.guest-app #annap-tray-close:hover,
body.guest-app #order-tray-clear:hover {
  color: rgb(var(--kits-text)) !important;
  background-color: rgb(var(--kits-surface-2)) !important;
}

body.guest-app #order-tray-lines-wrap {
  background: rgb(var(--kits-surface)) !important;
}

body.guest-app .order-tray-empty,
body.guest-app #cart > p.order-tray-empty {
  background: rgb(var(--kits-surface-2)) !important;
  border: 1px solid var(--kits-border) !important;
  color: rgb(var(--kits-text-muted)) !important;
}

body.guest-app .tray-correspondence-card__body {
  background: rgb(var(--kits-surface-2)) !important;
  border: 1px solid var(--kits-border) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .tray-correspondence-card__name,
body.guest-app .tray-correspondence-card__title {
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .tray-correspondence-card__meta {
  color: rgb(var(--kits-text-muted)) !important;
}

body.guest-app .order-tray-subtotal-row {
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .order-tray-subtotal-row p {
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .order-tray-need-qr {
  background: rgba(var(--kits-coffee), 0.1) !important;
  border: 1px solid rgba(var(--kits-coffee), 0.4) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .order-tray-payment-option {
  background: rgb(var(--kits-surface-2)) !important;
  border: 1px solid var(--kits-border) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .order-tray-payment-option[aria-pressed="true"] {
  background: rgba(var(--kits-coffee), 0.15) !important;
  border-color: rgb(var(--kits-coffee)) !important;
}

body.guest-app .order-tray-payment-option__title,
body.guest-app .order-tray-payment-option__subtitle {
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .order-tray-payment-preview {
  background: rgb(var(--kits-surface-2)) !important;
  border: 1px solid var(--kits-border) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .order-tray-payment-preview__title,
body.guest-app .order-tray-payment-preview__body,
body.guest-app .order-tray-payment-preview__note {
  color: rgb(var(--kits-text)) !important;
}

body.guest-app #menuSubmitBtn.order-tray-submit,
body.guest-app .order-tray-submit.btn-ink {
  background: rgb(var(--kits-coffee)) !important;
  border: 1px solid rgb(var(--kits-coffee-strong)) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app #menuSubmitBtn.order-tray-submit:hover,
body.guest-app .order-tray-submit.btn-ink:hover {
  background: rgb(var(--kits-coffee-strong)) !important;
}

body.guest-app .order-tray-back-btn {
  background: rgb(var(--kits-surface-2)) !important;
  border: 1px solid var(--kits-border) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .order-tray-back-btn:hover {
  background: rgb(var(--kits-surface-3)) !important;
}

body.guest-app .order-tray-result {
  color: rgb(var(--kits-text-muted)) !important;
}

/* Submitted card */
body.guest-app .order-tray-submitted-card {
  background: rgb(var(--kits-surface-2)) !important;
  border: 1px solid var(--kits-border) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .order-tray-submitted-card__title,
body.guest-app .order-tray-submitted-card__status,
body.guest-app .order-tray-submitted-card__body,
body.guest-app .order-tray-submitted-card__note {
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .order-tray-submitted-card__seal {
  background: rgba(var(--kits-coffee), 0.2) !important;
  border: 1px solid rgba(var(--kits-coffee), 0.5) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .order-tray-submitted-card__link {
  color: rgb(var(--kits-coffee)) !important;
}

/* =========================================================================
 * GUEST TOAST — compact dark
 * Repaint the "Added to tray" floating toast to the Kits dark surface.
 * ======================================================================= */
body.guest-app #guestToast {
  bottom: max(5.5rem, calc(5rem + env(safe-area-inset-bottom))) !important;
}

body.guest-app #guestToast > div > div {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6) !important;
  padding: 0.6rem 0.85rem !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app #guestToast #guestToastText {
  color: rgb(var(--kits-text)) !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
}

body.guest-app #guestToast #guestToastViewTray {
  color: rgb(var(--kits-coffee)) !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(var(--kits-coffee), 0.35) !important;
}

body.guest-app #guestToast #guestToastViewTray:hover {
  color: rgb(var(--kits-text)) !important;
  border-bottom-color: rgb(var(--kits-coffee)) !important;
}

/* =========================================================================
 * LANGUAGE SWITCHER & INTERACTION PREFS — render as discrete toolbar chips
 * The "EN/VI + sound/haptic" toolbar at the top of the seated menu page must
 * look like a quiet Kits toolbar, not floating widgets. We make them dark
 * and well-bordered without changing their DOM.
 * ======================================================================= */
body.guest-app .guest-lang-register {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  gap: 0 !important;
}

body.guest-app .guest-lang-register button {
  color: rgb(var(--kits-text-muted)) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  padding: 0.35rem 0.6rem !important;
  min-height: 1.85rem !important;
  min-width: 2.25rem !important;
}

body.guest-app .guest-lang-register button:hover {
  color: rgb(var(--kits-text)) !important;
  background: rgb(var(--kits-surface-2)) !important;
}

body.guest-app .guest-lang-register button.is-active,
body.guest-app .guest-lang-register button[aria-pressed="true"] {
  color: rgb(var(--kits-text)) !important;
  background: rgb(var(--kits-surface-3)) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--kits-coffee), 0.4) !important;
}

body.guest-app .annap-if-prefs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: 8px !important;
  padding: 2px !important;
}

body.guest-app .annap-if-pref {
  width: 1.85rem !important;
  height: 1.85rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: rgb(var(--kits-text-muted)) !important;
  transition: background 0.15s ease, color 0.15s ease;
}

body.guest-app .annap-if-pref svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
}

body.guest-app .annap-if-pref:hover {
  background: rgb(var(--kits-surface-2)) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .annap-if-pref--on {
  color: rgb(var(--kits-text)) !important;
  background: rgb(var(--kits-surface-3)) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--kits-coffee), 0.4) !important;
}

/* "← Chọn lại" back link at top of seated menu */
body.guest-app .menu-seated-toolbar a,
body.guest-app .menu-seated-toolbar nav a {
  color: rgb(var(--kits-text-muted)) !important;
  letter-spacing: 0.06em !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

body.guest-app .menu-seated-toolbar a:hover {
  color: rgb(var(--kits-text)) !important;
}

/* Hide the noisy dev-only boot overlay chips unless dev mode is on */
body.guest-app #annap-boot-overlay {
  background: transparent !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: 8px !important;
  backdrop-filter: none !important;
  color: rgb(var(--kits-text-muted)) !important;
}

body.guest-app #annap-boot-overlay.hidden,
body.guest-app #annap-boot-overlay[aria-hidden="true"] {
  display: none !important;
}

/* =========================================================================
 * HOME (Index) — repaint the hero on the unseated landing page
 * ======================================================================= */
body.guest-app .surface-paper.overflow-hidden.rounded-\[2rem\],
body.guest-app .surface-paper.relative.rounded-\[2rem\] {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: var(--kits-radius-lg) !important;
  box-shadow: var(--kits-shadow-card) !important;
}

body.guest-app .surface-paper.overflow-hidden.rounded-\[2rem\] {
  padding: clamp(1.5rem, 4vw, 2.25rem) !important;
}

body.guest-app .surface-paper .text-\[rgb\(var\(--fg\)\)\] {
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .surface-paper .text-\[rgb\(var\(--muted\)\)\] {
  color: rgb(var(--kits-text-muted)) !important;
}

body.guest-app .surface-paper .text-\[rgb\(var\(--muted-2\)\)\] {
  color: rgb(var(--kits-text-quiet)) !important;
}

body.guest-app .surface-paper a.underline {
  color: rgb(var(--kits-text-muted)) !important;
}

body.guest-app .surface-paper a.underline:hover {
  color: rgb(var(--kits-text)) !important;
}

/* Hero signature drink cards (on home page) */
body.guest-app .surface-paper article a.aspect-\[4\/3\],
body.guest-app .surface-paper .relative.block.aspect-\[4\/3\] {
  background: linear-gradient(
    165deg,
    rgb(var(--kits-surface-2)) 0%,
    rgb(var(--kits-surface-3)) 100%
  ) !important;
  border-radius: 12px !important;
  border: 1px solid var(--kits-border-strong) !important;
  box-shadow: inset 0 0 0 1px var(--kits-border) !important;
}

body.guest-app .surface-paper article a.aspect-\[4\/3\] img {
  filter: none !important;
  opacity: 1 !important;
}

body.guest-app .surface-paper article .bg-\[rgba\(26\,20\,16\,0\.04\)\] {
  background: rgba(var(--kits-coffee), 0.18) !important;
}

body.guest-app .ge-sig-no-poster {
  background: transparent !important;
}

body.guest-app .ge-sig-no-poster span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.4rem !important;
  height: 2.4rem !important;
  border-radius: 999px !important;
  background: rgba(var(--kits-coffee), 0.22) !important;
  border: 1px solid rgba(var(--kits-coffee), 0.45) !important;
  color: rgb(var(--kits-text)) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1 !important;
}

body.guest-app .ge-sig-no-poster span::after {
  content: "·" !important;
  display: none !important;
}

body.guest-app .ge-sig-visual {
  background: rgb(var(--kits-surface-2)) !important;
}

body.guest-app .ge-sig-visual--no-poster {
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 35%,
      rgba(var(--kits-coffee), 0.18) 0%,
      transparent 65%
    ),
    rgb(var(--kits-surface-2)) !important;
}

body.guest-app .ge-sig-card {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
}

body.guest-app .ge-sig-name,
body.guest-app .ge-sig-price {
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .ge-sig-sub {
  color: rgb(var(--kits-text-quiet)) !important;
}

body.guest-app .ge-btn-ghost {
  background: transparent !important;
  border: 1px solid var(--kits-border) !important;
  color: rgb(var(--kits-text-muted)) !important;
}

body.guest-app .ge-btn-ghost:hover {
  color: rgb(var(--kits-text)) !important;
  background: rgb(var(--kits-surface-2)) !important;
}

body.guest-app .ge-btn-solid {
  background: rgb(var(--kits-coffee)) !important;
  border-color: rgb(var(--kits-coffee-strong)) !important;
  color: rgb(var(--kits-text)) !important;
}

/* Home page cart sheet — dark */
body.guest-app .guest-cart-shell.surface-paper,
body.guest-app #cartSheet.surface-paper {
  background: rgb(var(--kits-surface)) !important;
  border: 1px solid var(--kits-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.55) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .guest-cart-shell .rounded-2xl.border {
  background: rgb(var(--kits-surface-2)) !important;
  border: 1px solid var(--kits-border) !important;
  color: rgb(var(--kits-text)) !important;
}

body.guest-app .guest-cart-shell #activeOrderBanner {
  background: rgba(var(--kits-coffee), 0.1) !important;
  border-color: rgba(var(--kits-coffee), 0.4) !important;
  color: rgb(var(--kits-text)) !important;
}

/* Unseated hint card on home */
body.guest-app .mt-8.rounded-2xl.border.border-\[rgba\(212\,184\,150\,0\.55\)\] {
  background: rgb(var(--kits-surface-2)) !important;
  border: 1px solid var(--kits-border) !important;
  color: rgb(var(--kits-text-muted)) !important;
}

/* Reduce the giant 96px/112px empty space around hero links in Index */
body.guest-app .surface-paper.relative.rounded-\[2rem\] .grid-cols-\[96px_1fr\],
body.guest-app .surface-paper.relative.rounded-\[2rem\] .grid-cols-\[112px_1fr\] {
  gap: 1rem !important;
}

/* =========================================================================
 * RESPONSIVE — keep mobile/tablet coherent
 * ======================================================================= */
@media (max-width: 720px) {
  .menu-browse .menu-chapter-compose {
    grid-template-columns: 1fr !important;
  }
  .menu-browse .menu-chapter-hero {
    padding-right: 0 !important;
  }
}

@media (max-width: 480px) {
  body.guest-app #guestToast > div > div {
    padding: 0.5rem 0.7rem !important;
  }
  body.guest-app #guestToast #guestToastText {
    font-size: 0.85rem !important;
  }
}