/* ==================================================================
   KolBites — Calcutta Culinary
   Scoped stylesheet: every class is prefixed .kb- so it can be enqueued
   in any WordPress theme without clashing with theme/Elementor styles.
   ================================================================== */

@import "fonts.css";


/* ---------- Design tokens (Phase 1 Design System) ---------- */
:root {
  /* Brand Primitives */
  --kb-espresso: #24130E;        /* deep rich brown — page chrome, footer */
  --kb-espresso-surface: #2E1913;/* elevated dark container */
  --kb-ink: #2E1B14;             /* body text on parchment */
  --kb-ink-muted: #6A564F;       /* secondary text */
  --kb-maroon: #6E1B1B;          /* royal terracotta / menu headings */
  --kb-maroon-hover: #561212;
  --kb-gold: #C99A3B;            /* brass rim of the logo */
  --kb-gold-glow: rgba(201, 154, 59, 0.25);
  --kb-taxi: #F2C230;            /* yellow Ambassador — primary actions */
  --kb-taxi-hover: #FFD24A;
  --kb-parchment: #F4EAD7;       /* printed menu card */
  --kb-paper: #FAF5EA;           /* lighter card surfaces */
  --kb-paper-warm: #F0E5CE;

  /* Accent & Status tones */
  --kb-ember: #D5402B;
  --kb-marigold: #EE8A32;
  --kb-veg: #1B7837;
  --kb-egg: #B7791F;
  --kb-nonveg: #8B2A1C;
  --kb-live: #25D366;            /* live status indicator */

  /* Semantic Design Tokens */
  --color-background: var(--kb-espresso);
  --color-surface: var(--kb-espresso-surface);
  --color-surface-paper: var(--kb-parchment);
  --color-text: var(--kb-parchment);
  --color-text-dark: var(--kb-ink);
  --color-muted: rgba(244, 234, 215, 0.72);
  --color-primary: var(--kb-taxi);
  --color-primary-hover: var(--kb-taxi-hover);
  --color-accent: var(--kb-maroon);
  --color-border: rgba(201, 154, 59, 0.25);
  --color-border-subtle: rgba(244, 234, 215, 0.1);
  --color-success: var(--kb-live);
  --color-warning: var(--kb-egg);
  --color-danger: var(--kb-ember);

  /* Typography */
  --kb-font-display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --kb-font-text: "Hind Siliguri", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing Scale (4px baseline) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */

  /* Fluid Type Scale */
  --kb-step--1: 0.875rem;
  --kb-step-0: 1rem;
  --kb-step-1: 1.25rem;
  --kb-step-2: 1.563rem;
  --kb-step-3: clamp(1.9rem, 3.2vw, 2.44rem);
  --kb-step-4: clamp(2.4rem, 5.6vw, 4.4rem);

  /* Layout, Radii & Shadows */
  --kb-header-h: 72px;
  --kb-radius-xs: 4px;
  --kb-radius-sm: 8px;
  --kb-radius-md: 14px;
  --kb-radius-pill: 999px;
  --kb-wrap: 1200px;
  --kb-shadow-subtle: 0 4px 16px rgba(0, 0, 0, 0.12);
  --kb-shadow-card: 0 1px 0 rgba(58, 36, 28, 0.08), 0 20px 48px -16px rgba(36, 19, 14, 0.45);
  --kb-shadow-float: 0 20px 48px -10px rgba(0, 0, 0, 0.65);
}

html { overflow-x: clip; }
/* ---------- Base (scoped to the site wrapper) ---------- */
.kb-site { margin: 0; background: var(--kb-espresso); color: var(--kb-ink); font-family: var(--kb-font-text); font-size: var(--kb-step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: clip; }
.kb-site *, .kb-site *::before, .kb-site *::after { box-sizing: border-box; }
.kb-site img { max-width: 100%; height: auto; display: block; }
:where(.kb-site) a { color: inherit; }
.kb-site :focus-visible { outline: 3px solid var(--kb-taxi); outline-offset: 3px; border-radius: 4px; }
html:has(.kb-site) { scroll-behavior: smooth; scroll-padding-top: calc(var(--kb-header-h) + 16px); }
html.kb-no-scroll { overflow: hidden; }
.kb-site [hidden] { display: none !important; }
.kb-wrap { width: min(100% - 2.5rem, var(--kb-wrap)); margin-inline: auto; }
.kb-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kb-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--kb-taxi); color: var(--kb-espresso); padding: .6rem 1rem; border-radius: var(--kb-radius-sm); font-weight: 600; }
.kb-skip:focus { top: 1rem; }

.kb-section-title { font-family: var(--kb-font-display); font-weight: 700; font-size: var(--kb-step-3); line-height: 1.15; color: var(--kb-maroon); margin: 0 0 .5rem; letter-spacing: .01em; }
.kb-section-title--light { color: var(--kb-parchment); }
.kb-lede { font-size: var(--kb-step-1); line-height: 1.5; color: var(--kb-espresso); font-weight: 500; }

/* ---------- Buttons ---------- */
.kb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--kb-font-text); font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; padding: .8rem 1.3rem; border-radius: var(--kb-radius-pill); border: 2px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.kb-btn:active { transform: translateY(1px); }
.kb-btn--lg { padding: 1rem 1.6rem; font-size: 1.0625rem; }
.kb-btn--block { width: 100%; }
.kb-btn--taxi { background: var(--kb-taxi); color: var(--kb-espresso); border-color: var(--kb-taxi); box-shadow: 0 4px 14px rgba(242, 194, 48, 0.3); }
.kb-btn--taxi:hover { background: var(--kb-taxi-hover); border-color: var(--kb-taxi-hover); box-shadow: 0 6px 20px rgba(242, 194, 48, 0.45); }
.kb-btn--maroon { background: var(--kb-maroon); color: var(--kb-paper); }
.kb-btn--maroon:hover { background: var(--kb-maroon-hover); }
.kb-btn--outline-light { background: rgba(36, 19, 14, 0.35); color: var(--kb-parchment); border-color: rgba(244, 234, 215, .6); backdrop-filter: blur(4px); }
.kb-btn--outline-light:hover { background: rgba(244, 234, 215, .15); border-color: var(--kb-parchment); color: #fff; }
.kb-btn--ghost { background: transparent; color: var(--kb-maroon); border-color: rgba(110, 27, 27, .35); }
.kb-btn--ghost:hover { border-color: var(--kb-maroon); background: rgba(110, 27, 27, 0.05); }
.kb-btn--choice { background: var(--kb-paper); color: var(--kb-maroon); border-color: var(--kb-maroon); flex: 1; }
.kb-btn--choice:hover { background: var(--kb-maroon); color: var(--kb-paper); }
.kb-btn--quick { background: rgba(110, 27, 27, 0.08); color: var(--kb-maroon); border-color: rgba(110, 27, 27, 0.2); font-size: 0.85rem; padding: 0.45rem 0.85rem; }
.kb-btn--quick:hover { background: var(--kb-maroon); color: var(--kb-paper); border-color: var(--kb-maroon); }
.kb-btn[disabled] { opacity: .6; cursor: progress; }
.kb-iconbtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; transition: background-color .15s, color .15s, transform .15s; }
.kb-iconbtn:hover { background: rgba(244, 234, 215, .12); color: var(--kb-taxi); }
.kb-iconbtn:active { transform: scale(0.94); }
.kb-linkbtn { background: none; border: 0; color: var(--kb-ink); text-decoration: underline; cursor: pointer; font: inherit; padding: .5rem; }
.kb-badge { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--kb-ember); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.kb-badge--bump { animation: kb-bump 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes kb-bump { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .kb-badge--bump { animation: none; } }

/* ---------- Header ---------- */
.kb-header { position: sticky; top: 0; z-index: 50; color: var(--kb-parchment); background: rgba(36, 19, 14, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(201, 154, 59, .25); padding-top: env(safe-area-inset-top, 0px); transition: background-color .25s, box-shadow .25s; }
.kb-header.is-scrolled { background: rgba(36, 19, 14, .98); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.kb-header__inner { display: flex; align-items: center; gap: 1.5rem; height: var(--kb-header-h); }
.kb-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.kb-brand__logo { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(201, 154, 59, .5); transition: transform 0.2s ease; }
.kb-brand:hover .kb-brand__logo { transform: scale(1.04); }
.kb-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.kb-brand__name { font-family: var(--kb-font-display); font-weight: 700; font-size: 1.35rem; color: var(--kb-parchment); letter-spacing: 0.02em; white-space: nowrap; }
.kb-brand__tag { font-size: .78rem; color: var(--kb-gold); letter-spacing: .06em; text-transform: uppercase; }
.kb-nav { margin-left: auto; }
.kb-nav__list { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.kb-nav__list a { display: block; padding: .5rem .85rem; text-decoration: none; font-weight: 500; border-radius: var(--kb-radius-pill); transition: background-color .15s, color .15s; }
.kb-nav__list a:hover { background: rgba(244, 234, 215, .1); color: var(--kb-taxi); }
.kb-nav__mobile-only { display: none; }
.kb-nav-toggle { position: relative; }
.kb-nav-toggle__bar { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; transform-origin: center; }
.kb-nav-toggle[aria-expanded="true"] .kb-nav-toggle__bar--top { transform: translateY(5px) rotate(45deg); }
.kb-nav-toggle[aria-expanded="true"] .kb-nav-toggle__bar--mid { opacity: 0; transform: scaleX(0); }
.kb-nav-toggle[aria-expanded="true"] .kb-nav-toggle__bar--bot { transform: translateY(-5px) rotate(-45deg); }
.kb-header__actions { display: flex; align-items: center; gap: .6rem; }
.kb-header__order { padding: .55rem 1.1rem; font-size: 0.92rem; }
.kb-header__phone { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--kb-parchment); border: 1px solid rgba(201, 154, 59, 0.35); text-decoration: none; transition: all .15s; }
.kb-header__phone:hover { background: rgba(201, 154, 59, 0.2); color: var(--kb-taxi); border-color: var(--kb-taxi); }
.kb-nav-toggle { display: none; }

/* ---------- Hero ---------- */
.kb-hero { position: relative; isolation: isolate; min-height: min(90vh, 800px); display: grid; align-items: end; overflow: hidden; color: var(--kb-parchment); }
.kb-hero__bg {
  --kb-hero-image: url("../img/kolbites-banner-culinary.jpg?v=2");
  --kb-hero-image: image-set(
    url("../img/kolbites-banner-culinary.webp?v=2") type("image/webp"),
    url("../img/kolbites-banner-culinary.jpg?v=2") type("image/jpeg")
  );
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--kb-hero-image) right bottom / cover no-repeat;
  filter: saturate(1.06) contrast(1.02);
  transform: none;
}
html.webp .kb-hero__bg {
  --kb-hero-image: url("../img/kolbites-banner-culinary.webp?v=2");
}
html.no-webp .kb-hero__bg {
  --kb-hero-image: url("../img/kolbites-banner-culinary.jpg?v=2");
}
.kb-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(95deg, rgba(36, 19, 14, .95) 0%, rgba(36, 19, 14, .80) 42%, rgba(36, 19, 14, .25) 68%, rgba(36, 19, 14, 0.05) 100%),
  linear-gradient(0deg, rgba(36, 19, 14, .55) 0%, rgba(36, 19, 14, 0) 25%); }
.kb-hero__content { padding-block: clamp(5.5rem, 14vh, 9.5rem) clamp(2.5rem, 7vh, 4.5rem); }
.kb-hero__status {
  display: none !important;
}
.kb-hero__title { font-family: var(--kb-font-display); font-weight: 700; margin: 0; line-height: 1.05; letter-spacing: .01em; text-shadow: 0 4px 28px rgba(0, 0, 0, .55); }
.kb-hero__line1 { display: block; font-size: var(--kb-step-4); color: #fff; }
.kb-hero__line2 { display: block; margin-top: .35em; padding-left: clamp(1.5rem, 6vw, 5rem); font-size: calc(var(--kb-step-4) * .6); font-weight: 600; color: var(--kb-taxi); }
.kb-hero__sub { max-width: 38rem; margin: 1.25rem 0 1.75rem; font-size: var(--kb-step-1); line-height: 1.55; color: rgba(244, 234, 215, .92); }

.kb-hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-bottom: 0.5rem;
}
.kb-hero__ctas-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}
.kb-hero__order-btn {
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1.05rem 2.2rem;
  font-size: 1.12rem;
  box-shadow: 0 6px 22px rgba(242, 194, 48, 0.45);
}
.kb-hero__channels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.kb-hero__channel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(36, 19, 14, 0.65);
  border: 1px solid rgba(201, 154, 59, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.42rem 0.85rem;
  border-radius: var(--kb-radius-pill);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--kb-parchment);
  text-decoration: none;
  transition: all 0.15s ease;
}
.kb-hero__channel:hover {
  background: rgba(244, 234, 215, 0.15);
  border-color: var(--kb-taxi);
  color: var(--kb-taxi);
  transform: translateY(-1px);
}

.kb-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--kb-parchment);
}
.kb-hero__rating { color: var(--kb-taxi); font-weight: 700; display: inline-flex; align-items: center; gap: 0.3rem; }
.kb-hero__divider { opacity: 0.4; }

.kb-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kb-taxi);
  margin-bottom: 0.45rem;
}

/* ---------- Phase 5: Signature Kolkata Dishes ---------- */
.kb-signatures {
  background: var(--kb-espresso);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  border-top: 1px solid rgba(201, 154, 59, 0.18);
}
.kb-signatures__head {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.kb-signatures__sub {
  margin: 0.4rem 0 0;
  font-size: var(--kb-step-0);
  color: rgba(244, 234, 215, 0.78);
}
.kb-signatures__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.kb-sig-card {
  display: flex;
  flex-direction: column;
  background: rgba(46, 25, 19, 0.7);
  border: 1px solid rgba(201, 154, 59, 0.25);
  border-radius: var(--kb-radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.kb-sig-card:hover {
  transform: translateY(-4px);
  border-color: var(--kb-gold);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.7), 0 0 24px rgba(242, 194, 48, 0.15);
}
.kb-sig-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #180B07;
}
.kb-sig-card__media picture {
  display: contents;
}
.kb-sig-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.kb-sig-card:hover .kb-sig-card__media img {
  transform: scale(1.05);
}
.kb-sig-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.65rem;
  border-radius: var(--kb-radius-pill);
  background: rgba(36, 19, 14, 0.88);
  color: var(--kb-taxi);
  border: 1px solid rgba(242, 194, 48, 0.4);
  backdrop-filter: blur(6px);
}
.kb-sig-card__body {
  padding: 1.25rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.kb-sig-card__meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}
.kb-sig-card__title {
  font-family: var(--kb-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.kb-sig-card__desc {
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(244, 234, 215, 0.72);
  margin: 0 0 1.25rem;
  flex-grow: 1;
}
.kb-sig-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(244, 234, 215, 0.1);
}
.kb-sig-card__price {
  font-family: var(--kb-font-text);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--kb-taxi);
  font-variant-numeric: tabular-nums;
}
.kb-sig-card__action {
  display: flex;
  justify-content: flex-end;
}

/* ---------- Menu (Phase 6 Redesign) ---------- */
.kb-menu { background: linear-gradient(180deg, var(--kb-espresso) 0, #3A1E16 100%); padding-block: clamp(3.5rem, 8vw, 6rem); }
.kb-menu__head { display: grid; gap: .25rem; margin-bottom: 2rem; color: var(--kb-parchment); }
.kb-menu__head .kb-section-title { color: var(--kb-parchment); }
.kb-menu__intro { margin: 0; max-width: 36rem; color: rgba(242, 230, 207, .8); }
.kb-menu__tools { display: flex; flex-direction: column; gap: 0.95rem; margin-top: 1.25rem; }
.kb-menu__tools-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.25rem; }

.kb-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: min(100%, 300px);
}
.kb-search__icon {
  position: absolute;
  left: 0.85rem;
  color: rgba(244, 234, 215, 0.6);
  pointer-events: none;
}
.kb-search__input {
  width: 100%;
  padding: 0.5rem 2.2rem 0.5rem 2.4rem;
  border-radius: var(--kb-radius-pill);
  border: 1.5px solid rgba(201, 154, 59, 0.4);
  background: rgba(36, 19, 14, 0.55);
  color: var(--kb-parchment);
  font: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.kb-search__input:focus {
  border-color: var(--kb-taxi);
  background: rgba(36, 19, 14, 0.85);
  box-shadow: 0 0 0 3px rgba(242, 194, 48, 0.25);
}
.kb-search__input::placeholder {
  color: rgba(244, 234, 215, 0.55);
}
.kb-search__clear {
  position: absolute;
  right: 0.65rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(244, 234, 215, 0.2);
  color: var(--kb-parchment);
  font-size: 15px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.kb-search__clear:hover {
  background: rgba(244, 234, 215, 0.4);
  color: #fff;
}
.kb-search__count {
  font-size: 0.86rem;
  color: var(--kb-taxi);
  font-weight: 600;
  white-space: nowrap;
}

/* Dietary Tabs Segment */
.kb-diet-tabs {
  display: inline-flex;
  align-items: center;
  background: rgba(36, 19, 14, 0.65);
  padding: 3px;
  border-radius: var(--kb-radius-pill);
  border: 1px solid rgba(201, 154, 59, 0.35);
}
.kb-diet-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.85rem;
  border-radius: var(--kb-radius-pill);
  border: 0;
  background: transparent;
  color: rgba(244, 234, 215, 0.8);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.kb-diet-tab:hover {
  color: #fff;
}
.kb-diet-tab.is-active {
  background: var(--kb-parchment);
  color: var(--kb-espresso);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Quick Discovery Chips */
.kb-discovery {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.15rem 0 0.4rem;
  scrollbar-width: none;
}
.kb-discovery__label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kb-gold);
  margin-right: 0.25rem;
  white-space: nowrap;
}
.kb-discovery::-webkit-scrollbar { display: none; }
.kb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  padding: 0.42rem 0.95rem;
  border-radius: var(--kb-radius-pill);
  font-family: var(--kb-font-text);
  font-size: 0.86rem;
  font-weight: 500;
  border: 1px solid rgba(201, 154, 59, 0.35);
  background: rgba(46, 25, 19, 0.65);
  color: var(--kb-parchment);
  cursor: pointer;
  transition: all 0.15s ease;
}
.kb-chip:hover {
  background: rgba(201, 154, 59, 0.22);
  border-color: var(--kb-gold);
  color: #fff;
}
.kb-chip.is-active {
  background: var(--kb-taxi);
  color: var(--kb-espresso);
  border-color: var(--kb-taxi);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(242, 194, 48, 0.3);
}
.kb-chip__badge {
  font-size: 0.74rem;
  opacity: 0.85;
}

.kb-legend { display: flex; gap: 1rem; margin: 0; font-size: var(--kb-step--1); color: rgba(244, 234, 215, .75); }
.kb-legend > span { display: inline-flex; align-items: center; gap: .35rem; }

.kb-menu__layout { display: grid; grid-template-columns: 175px 1fr; gap: 1.75rem; align-items: start; }
.kb-menu__layout > * { min-width: 0; }
.kb-catnav { position: sticky; top: calc(var(--kb-header-h) + 1.5rem); }
.kb-catnav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.kb-catnav__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: .45rem .85rem;
  border-left: 2px solid rgba(201, 154, 59, .25);
  text-decoration: none;
  font-family: var(--kb-font-display);
  font-weight: 600;
  font-size: .95rem;
  color: rgba(242, 230, 207, .7);
  transition: color .15s, border-color .15s;
}
.kb-catnav__link:hover { color: var(--kb-parchment); }
.kb-catnav__link.is-active { color: var(--kb-taxi); border-left-color: var(--kb-taxi); }
.kb-catnav__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: currentColor;
  opacity: 0.75;
}
.kb-catnav__link.is-active .kb-catnav__icon {
  opacity: 1;
  fill: var(--kb-taxi);
}

/* The printed menu card — the memorable piece of the site with tactile paper grain */
.kb-card {
  position: relative;
  background:
    radial-gradient(ellipse at center, rgba(251, 246, 236, 0.4) 0%, rgba(242, 230, 207, 0.85) 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E"),
    var(--kb-parchment);
  border-radius: 4px;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  box-shadow: var(--kb-shadow-card);
  outline: 1px solid rgba(201, 154, 59, .55);
  outline-offset: -12px;
}
.kb-card__ornament { position: absolute; width: 72px; height: 72px; pointer-events: none; border: 2px solid var(--kb-gold); opacity: .8; }
.kb-card__ornament::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--kb-maroon); transform: rotate(45deg); }
.kb-card__ornament--tl { top: 22px; left: 22px; border-right: 0; border-bottom: 0; border-top-left-radius: 26px; }
.kb-card__ornament--tl::after { top: -8px; left: -8px; }
.kb-card__ornament--br { bottom: 22px; right: 22px; border-left: 0; border-top: 0; border-bottom-right-radius: 26px; }
.kb-card__ornament--br::after { bottom: -8px; right: -8px; }
.kb-card__grid { columns: 2 22rem; column-gap: clamp(2rem, 5vw, 4rem); }
.kb-card__foot { margin: 1.5rem 0 0; font-size: var(--kb-step--1); color: rgba(58, 36, 28, .75); text-align: center; }

.kb-category { break-inside: avoid; margin: 0 0 2.25rem; padding-top: .25rem; scroll-margin-top: calc(var(--kb-header-h) + 54px); }
.kb-category__title { font-family: var(--kb-font-display); font-weight: 700; font-size: var(--kb-step-2); color: var(--kb-maroon); text-align: center; margin: 0 0 1rem; }
.kb-category__title::after { content: ""; display: block; width: 44px; height: 2px; margin: .45rem auto 0; background: var(--kb-gold); }
.kb-category__items { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }

.kb-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.42rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.kb-item:hover {
  background-color: rgba(197, 155, 39, 0.12);
  transform: translateX(2px);
}

.kb-item__line {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  gap: 0.65rem;
}

.kb-item__thumb {
  width: 50px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
  object-position: center;
  background: rgba(43, 23, 18, 0.05);
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.kb-item--signature {
  background: rgba(201, 154, 59, 0.08);
}
.kb-item--signature .kb-item__name {
  font-weight: 600;
  color: var(--kb-maroon);
}
.kb-item--signature .kb-item__name::after {
  content: "★ SPECIAL";
  display: inline-block;
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--kb-maroon);
  padding: 0.12rem 0.4rem;
  border-radius: 3px;
  line-height: 1.1;
  margin-top: 0.2rem;
}

.kb-item.kb-item--in-cart {
  background: rgba(242, 194, 48, 0.12) !important;
  border-left: 3px solid var(--kb-taxi);
}
.kb-item.kb-item--in-cart .kb-item__name {
  color: var(--kb-maroon);
}
.kb-sig-card.kb-item--in-cart {
  border-color: var(--kb-taxi);
  box-shadow: 0 8px 24px rgba(242, 194, 48, 0.22);
}

.kb-item__name {
  font-family: var(--kb-font-text);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--kb-ink);
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
}

.kb-item__note {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--kb-ink-muted);
  white-space: normal;
  margin-top: 0.15rem;
  line-height: 1.2;
}

/* Elegant dotted leader line spanning name to price */
.kb-item__leader {
  flex: 1 1 1.25rem;
  min-width: 1.25rem;
  border-bottom: 1.5px dotted rgba(58, 36, 28, 0.35);
  margin-inline: 0.25rem;
  align-self: center;
  transform: translateY(-2px);
}

.kb-item__price {
  font-family: var(--kb-font-text);
  font-weight: 700;
  font-size: 0.96rem;
  font-variant-numeric: tabular-nums;
  color: var(--kb-espresso);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.kb-item__action {
  min-width: 4.8rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
}
.kb-item__mrp {
  font-size: 0.8rem;
  color: var(--kb-ink-muted);
  text-align: right;
  white-space: nowrap;
}

.kb-add { font: inherit; font-weight: 600; font-size: .88rem; padding: .3rem .85rem; border-radius: var(--kb-radius-pill); border: 1.5px solid var(--kb-maroon); background: transparent; color: var(--kb-maroon); cursor: pointer; transition: background-color .12s, color .12s; }
.kb-add:hover { background: var(--kb-maroon); color: var(--kb-paper); }
.kb-stepper { display: inline-flex; align-items: center; border-radius: var(--kb-radius-pill); background: var(--kb-maroon); color: var(--kb-paper); }
.kb-stepper__btn { width: 32px; height: 32px; border: 0; background: transparent; color: inherit; font-size: 1.1rem; font-weight: 600; cursor: pointer; border-radius: 50%; }
.kb-stepper__btn:hover { background: rgba(255, 255, 255, .15); }
.kb-stepper__qty { min-width: 1.4rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.kb-stepper--sm .kb-stepper__btn { width: 28px; height: 28px; }

/* Veg / egg / non-veg marks (square outline + symbol, as on Indian menus) */
.kb-diet {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.6px solid currentColor;
  border-radius: 2px;
  background: var(--kb-paper);
  box-sizing: border-box;
  vertical-align: middle;
}
.kb-diet::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.kb-diet--veg { color: var(--kb-veg); }
.kb-diet--egg { color: var(--kb-egg); }
.kb-diet--nonveg { color: var(--kb-nonveg); }
.kb-diet--nonveg::after {
  width: 0;
  height: 0;
  border-radius: 0;
  background: transparent;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 6px solid currentColor;
  transform: translateY(-0.5px);
}
.kb-menu__tools .kb-diet--veg, .kb-legend .kb-diet { background: var(--kb-paper); }

/* ---------- About ---------- */
.kb-about { background: var(--kb-paper); padding-block: clamp(3.5rem, 8vw, 6rem); }
.kb-about__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.kb-about__text { max-width: 34rem; }
.kb-about__text p { margin: 0 0 1rem; }
.kb-about__text .kb-btn { margin-top: .75rem; }
.kb-about__plates { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.kb-about__plates picture { display: block; width: 100%; }
.kb-about__plates picture:first-child,
.kb-about__plates img:first-child { grid-column: 1 / -1; }
.kb-about__plates picture:first-child img,
.kb-about__plates img:first-child { aspect-ratio: 16 / 7; }
.kb-about__plates picture img,
.kb-about__plates img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--kb-parchment); box-shadow: 0 10px 24px -14px rgba(43, 23, 18, .6); }

/* ---------- Contact ---------- */
.kb-contact { color: var(--kb-parchment); padding-block: clamp(3.5rem, 7vw, 5rem); background:
  radial-gradient(120% 140% at 100% 0%, rgba(238, 138, 50, .55) 0%, rgba(213, 64, 43, .35) 35%, rgba(110, 27, 27, 0) 70%),
  var(--kb-maroon); }
.kb-contact__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: end; }
.kb-contact__address { font-style: normal; font-size: var(--kb-step-1); line-height: 1.5; margin: .5rem 0 1rem; }
.kb-contact__phone { margin: 0; font-family: var(--kb-font-display); font-weight: 700; font-size: var(--kb-step-3); }
.kb-contact__phone a { text-decoration: none; color: var(--kb-taxi); }
.kb-contact__note { margin: .5rem 0 0; color: rgba(242, 230, 207, .8); }
.kb-contact__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }

/* ---------- Footer ---------- */
.kb-footer { background: var(--kb-espresso); color: rgba(242, 230, 207, .85); padding: 3.5rem 0 1.5rem; border-top: 1px solid rgba(201, 154, 59, .25); }
.kb-footer__map-container { margin-bottom: 2.75rem; }
.kb-footer__map-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .85rem; }
.kb-footer__map-head .kb-footer__heading { margin: 0; font-size: 1.15rem; color: var(--kb-taxi); }
.kb-footer__map-link { color: var(--kb-gold); font-size: .88rem; text-decoration: none; font-weight: 500; transition: color .15s; }
.kb-footer__map-link:hover { color: var(--kb-parchment); text-decoration: underline; }
.kb-footer__map-frame {
  position: relative;
  width: 100%;
  height: 290px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid rgba(201, 154, 59, .4);
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .6);
}
.kb-footer__map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}
.kb-footer__map-frame.is-active iframe,
.kb-footer__map-frame:focus-within iframe {
  pointer-events: auto;
}
.kb-footer__grid { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1fr; gap: 2rem; }
.kb-footer__brand img { width: 96px; height: 96px; border-radius: 50%; margin-bottom: .75rem; }
.kb-footer__brand p { margin: 0; font-family: var(--kb-font-display); color: var(--kb-gold); }
.kb-footer__heading { font-family: var(--kb-font-display); font-size: 1rem; font-weight: 600; color: var(--kb-parchment); margin: 0 0 .6rem; }
.kb-footer address { font-style: normal; }
.kb-footer__phone { font-weight: 600; font-size: 1.15rem; color: var(--kb-taxi); text-decoration: none; }
.kb-social { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; }
.kb-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(201, 154, 59, .45); color: var(--kb-parchment); }
.kb-social a:hover { background: var(--kb-gold); color: var(--kb-espresso); }
.kb-footer__legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(242, 230, 207, .1); font-size: var(--kb-step--1); color: rgba(242, 230, 207, .6); }

/* ---------- Cart drawer ---------- */
.kb-cart { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.kb-cart.is-open { visibility: visible; }
.kb-cart__scrim { position: absolute; inset: 0; background: rgba(20, 10, 7, .65); opacity: 0; transition: opacity .25s; }
.kb-cart.is-open .kb-cart__scrim { opacity: 1; }
.kb-cart__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--kb-parchment); color: var(--kb-ink); transform: translateX(100%); transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: -20px 0 50px -15px rgba(0, 0, 0, .6); }
.kb-cart.is-open .kb-cart__panel { transform: none; }
.kb-cart__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(201, 154, 59, .5); }
.kb-cart__head h2 { font-family: var(--kb-font-display); font-size: var(--kb-step-1); color: var(--kb-maroon); margin: 0; }
.kb-cart__head .kb-iconbtn:hover { background: rgba(110, 27, 27, .08); }

/* Delivery Progress Bar */
.kb-delivery-progress {
  padding: 0.75rem 1.25rem;
  background: rgba(201, 154, 59, 0.12);
  border-bottom: 1px solid rgba(201, 154, 59, 0.3);
}
.kb-delivery-progress__text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kb-maroon);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kb-delivery-progress__bar {
  height: 6px;
  background: rgba(110, 27, 27, 0.15);
  border-radius: var(--kb-radius-pill);
  overflow: hidden;
}
.kb-delivery-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--kb-marigold), var(--kb-taxi));
  border-radius: var(--kb-radius-pill);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.kb-delivery-progress--unlocked .kb-delivery-progress__fill {
  background: var(--kb-live);
}

.kb-cart__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.kb-cart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.kb-cart__line { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .6rem; }
.kb-cart__info { display: flex; flex-direction: column; min-width: 0; }
.kb-cart__name { font-weight: 500; line-height: 1.3; }
.kb-cart__unit { font-size: .8rem; color: rgba(58, 36, 28, .7); }
.kb-cart__linetotal { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: right; }
.kb-cart__empty { text-align: center; padding: 2.5rem 1rem; }
.kb-cart__empty p:first-child { font-family: var(--kb-font-display); font-size: var(--kb-step-1); color: var(--kb-maroon); margin: 0 0 .5rem; }

/* Empty cart quick additions */
.kb-cart__quickpicks {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(201, 154, 59, 0.4);
  text-align: left;
}
.kb-cart__quickpicks-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kb-ink-muted);
  margin: 0 0 0.5rem;
}
.kb-cart__quickpicks-grid {
  display: grid;
  gap: 0.4rem;
}

/* ---------- Phase 10: Cart Upsell ("Complete Your Meal") ---------- */
.kb-cart__upsell {
  margin: 0.6rem 1rem 0;
  padding: 0.75rem 0.85rem;
  background: rgba(201, 154, 59, 0.08);
  border: 1px dashed rgba(201, 154, 59, 0.45);
  border-radius: var(--kb-radius-sm);
}
.kb-cart__upsell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
}
.kb-cart__upsell-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--kb-maroon);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.kb-cart__upsell-tag {
  font-size: 0.72rem;
  font-weight: 600;
  color: #7A4E08;
  background: rgba(242, 194, 48, 0.22);
  padding: 0.15rem 0.45rem;
  border-radius: var(--kb-radius-pill);
}
.kb-cart__upsell-items {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.kb-upsell-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid rgba(58, 36, 28, 0.12);
  border-radius: var(--kb-radius-sm);
  padding: 0.45rem 0.65rem;
  transition: border-color 0.15s ease;
}
.kb-upsell-item:hover {
  border-color: var(--kb-gold);
}
.kb-upsell-item__left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.kb-upsell-item__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.kb-upsell-item__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kb-upsell-item__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--kb-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-upsell-item__price {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--kb-maroon);
}
.kb-btn--upsell {
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--kb-radius-pill);
  border: 1.5px solid var(--kb-maroon);
  background: var(--kb-paper);
  color: var(--kb-maroon);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.kb-btn--upsell:hover {
  background: var(--kb-maroon);
  color: #fff;
}
.kb-btn--upsell.is-added {
  background: #E8F5E9;
  border-color: #2E7D32;
  color: #1B5E20;
}

.kb-cart__foot { padding: 1.15rem 1.25rem 1.35rem; border-top: 1px solid rgba(201, 154, 59, .5); background: var(--kb-paper); }
.kb-cart__breakdown { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; }
.kb-cart__row { display: flex; justify-content: space-between; align-items: center; font-size: 0.92rem; color: var(--kb-ink-muted); }
.kb-cart__delivery-badge { font-weight: 700; color: var(--kb-live); text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.04em; }
.kb-cart__total { display: flex; justify-content: space-between; font-weight: 700; font-size: var(--kb-step-1); margin: 0.35rem 0 0; padding-top: 0.5rem; border-top: 1px dotted rgba(58, 36, 28, 0.4); color: var(--kb-ink); }
.kb-cart__hint { font-size: .8rem; color: rgba(58, 36, 28, .75); margin: .4rem 0 1rem; line-height: 1.4; }

/* Mobile cart bar (Phase 20 Mobile UX) */
.kb-cartbar {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.35rem;
  border: 1.5px solid var(--kb-taxi);
  border-radius: var(--kb-radius-pill);
  background: var(--kb-maroon);
  color: #fff;
  font: inherit;
  font-weight: 600;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65), 0 0 16px rgba(242, 194, 48, 0.25);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.kb-cartbar:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.75), 0 0 24px rgba(242, 194, 48, 0.35);
}
.kb-cartbar:active {
  transform: scale(0.98);
}
.kb-cartbar[hidden] { display: none !important; }
.kb-cartbar__info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.kb-cartbar__count {
  font-weight: 600;
  font-size: 0.92rem;
  color: rgba(244, 234, 215, 0.95);
}
.kb-cartbar__divider {
  color: var(--kb-taxi);
  opacity: 0.7;
}
.kb-cartbar__total {
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--kb-taxi);
}
.kb-cartbar__cta {
  font-family: var(--kb-font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kb-taxi);
}
body.kb-has-cart { padding-bottom: max(5.5rem, calc(4.5rem + env(safe-area-inset-bottom))); }

/* ---------- Phase 25: FAQ Section (Local SEO & AEO) ---------- */
.kb-faq {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--kb-parchment);
  color: var(--kb-ink);
  border-top: 1px solid rgba(201, 154, 59, 0.35);
}
.kb-faq__head {
  text-align: center;
  margin-bottom: 2rem;
}
.kb-faq__head .kb-section-title {
  color: var(--kb-maroon);
}
.kb-faq__intro {
  margin: 0.35rem auto 0;
  max-width: 34rem;
  color: var(--kb-ink-muted);
  font-size: 0.95rem;
}
.kb-faq__list {
  max-width: 46rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.kb-faq__item {
  background: var(--kb-paper);
  border: 1.5px solid rgba(197, 155, 39, 0.3);
  border-radius: var(--kb-radius-sm);
  padding: 0.9rem 1.25rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.kb-faq__item[open] {
  border-color: var(--kb-gold);
  box-shadow: 0 4px 16px rgba(43, 23, 18, 0.08);
}
.kb-faq__q {
  font-family: var(--kb-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--kb-maroon);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kb-faq__q::-webkit-details-marker {
  display: none;
}
.kb-faq__q::after {
  content: "+";
  font-family: var(--kb-font-text);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--kb-gold);
  margin-left: 0.75rem;
  line-height: 1;
}
.kb-faq__item[open] .kb-faq__q::after {
  content: "−";
}
.kb-faq__a {
  margin-top: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #43332D;
  border-top: 1px dotted rgba(58, 36, 28, 0.2);
  padding-top: 0.65rem;
}
.kb-faq__a p {
  margin: 0;
}
.kb-faq__a a {
  color: var(--kb-maroon);
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- Dialogs (Phase 24 Animations & Phase 21 Accessibility) ---------- */
.kb-dialog {
  width: min(520px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--kb-parchment);
  color: var(--kb-ink);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  overflow: auto;
}
dialog:not([open]),
.kb-dialog:not([open]),
.kb-dialog--dish:not([open]) {
  display: none !important;
}
dialog[open] {
  animation: kb-dialog-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
dialog::backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 7, 4, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: kb-fade-in 0.25s ease forwards;
}
@keyframes kb-dialog-enter {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes kb-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.kb-dialog--small { width: min(380px, calc(100% - 2rem)); padding: 1.5rem; text-align: center; }
.kb-dialog--custom { width: min(440px, calc(100% - 2rem)); padding: 1.5rem; border-radius: var(--kb-radius-md); }
.kb-dialog--checkout { width: min(560px, calc(100% - 2rem)); border-radius: var(--kb-radius-md); }
.kb-dialog--tracking { width: min(540px, calc(100% - 2rem)); border-radius: var(--kb-radius-md); padding: 1.5rem; }
.kb-dialog--orders { width: min(540px, calc(100% - 2rem)); border-radius: var(--kb-radius-md); padding: 1.5rem; }

/* ============================================================
   Floating Category Jump FAB & Bottom Sheet
   ============================================================ */
.kb-cat-fab {
  position: fixed;
  bottom: max(1.2rem, calc(env(safe-area-inset-bottom) + 0.8rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: 850;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #24130E;
  color: #F2C230;
  border: 1.5px solid rgba(242, 194, 48, 0.45);
  border-radius: var(--kb-radius-pill);
  padding: 0.6rem 1.35rem;
  font-family: var(--kb-font-text);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.65), 0 0 18px rgba(242, 194, 48, 0.22);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.kb-cat-fab:hover,
.kb-cat-fab:active {
  background: var(--kb-maroon);
  color: #fff;
  border-color: var(--kb-taxi);
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.75);
}
.kb-cat-fab svg {
  flex-shrink: 0;
}
@media (min-width: 861px) {
  .kb-cat-fab {
    display: none !important;
  }
}

.kb-dialog--cat-sheet {
  width: min(520px, 100%);
  border-radius: 20px 20px 0 0;
  background: #FAF7F2;
  border: 1.5px solid rgba(197, 155, 39, 0.35);
  padding: 0;
  overflow: hidden;
}
.kb-cat-sheet {
  display: flex;
  flex-direction: column;
  max-height: 82dvh;
}
.kb-cat-sheet__head {
  padding: 1.25rem 1.4rem 0.85rem;
  border-bottom: 1px solid rgba(58, 36, 28, 0.08);
  margin-bottom: 0;
}
.kb-cat-sheet__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  padding: 1rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kb-cat-sheet__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  background: #fff;
  border: 1.5px solid rgba(58, 36, 28, 0.08);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: var(--kb-ink);
  transition: all 0.16s ease;
}
.kb-cat-sheet__item:hover,
.kb-cat-sheet__item:active {
  border-color: var(--kb-taxi);
  background: rgba(242, 194, 48, 0.08);
  transform: translateY(-1px);
}
.kb-cat-sheet__item.is-active {
  border-color: var(--kb-maroon);
  background: rgba(110, 27, 27, 0.06);
}
.kb-cat-sheet__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kb-maroon);
  flex-shrink: 0;
}
.kb-cat-sheet__icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.kb-cat-sheet__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kb-cat-sheet__name {
  font-family: var(--kb-font-text);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.2;
  color: var(--kb-ink);
}
.kb-cat-sheet__count {
  font-size: 0.74rem;
  color: var(--kb-ink-muted);
  margin-top: 0.15rem;
}

/* ============================================================
   Dish Showcase Dialog Modal
   ============================================================ */
.kb-dialog--dish {
  width: min(560px, calc(100% - 1.5rem));
  max-height: min(92vh, 92dvh, 760px);
  border-radius: 20px;
  background: #FAF7F2;
  border: 1.5px solid rgba(197, 155, 39, 0.45);
  box-shadow: 0 28px 65px -15px rgba(20, 10, 7, 0.85), 0 0 35px rgba(197, 155, 39, 0.22);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0;
}
.kb-dialog--dish[open] {
  display: flex;
  flex-direction: column;
}
.kb-dish-modal {
  position: relative;
  display: flex;
  flex-direction: column;
}
.kb-dish-modal.has-no-image {
  padding-top: 0.5rem;
}
.kb-dish-modal.has-no-image .kb-dish-modal__header {
  padding-right: 44px;
}
.kb-dish-modal.has-no-image .kb-dish-modal__close {
  background: rgba(43, 23, 18, 0.08);
  color: var(--kb-maroon);
  border: 1px solid rgba(43, 23, 18, 0.15);
}
.kb-dish-modal.has-no-image .kb-dish-modal__close:hover {
  background: var(--kb-maroon);
  color: #fff;
}
.kb-dish-modal__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}
.kb-dish-modal__meta-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.kb-dish-modal__diet-badge {
  background: rgba(43, 23, 18, 0.06);
  border: 1px solid rgba(43, 23, 18, 0.14);
  padding: 0.25rem 0.65rem;
  border-radius: var(--kb-radius-pill);
  font-weight: 700;
  font-size: 0.78rem;
  color: #221410;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: none;
}
.kb-dish-modal__tag {
  background: rgba(36, 19, 14, 0.92);
  color: var(--kb-taxi);
  border: 1px solid rgba(242, 194, 48, 0.5);
  padding: 0.25rem 0.65rem;
  border-radius: var(--kb-radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: none;
}
.kb-dish-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(27, 15, 11, 0.82);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.kb-dish-modal__close:hover {
  background: var(--kb-maroon);
  color: #fff;
  transform: scale(1.08);
}
.kb-dish-modal__media {
  position: relative;
  width: 100%;
  height: 270px;
  background: radial-gradient(circle at center, #2e1710 0%, #120704 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}
.kb-dish-modal__backdrop {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  object-position: center;
  filter: blur(24px) brightness(0.38) saturate(1.3);
  transform: scale(1.15);
  pointer-events: none;
  z-index: 1;
}
.kb-dish-modal__img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
}
.kb-dish-modal__body {
  padding: 1.35rem 1.45rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.kb-dish-modal__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.kb-dish-modal__cat {
  font-size: 0.74rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--kb-gold);
}
.kb-dish-modal__title {
  font-family: var(--kb-font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--kb-maroon);
  margin: 0;
  line-height: 1.25;
}
.kb-dish-modal__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.25rem;
}
.kb-dish-modal__price {
  font-family: var(--kb-font-text);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--kb-espresso);
  font-variant-numeric: tabular-nums;
}
.kb-dish-modal__serving {
  font-size: 0.85rem;
  color: var(--kb-ink-muted);
  font-weight: 500;
}
.kb-dish-modal__desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #43332D;
  margin: 0;
  background: rgba(201, 154, 59, 0.09);
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border-left: 3px solid var(--kb-gold);
}
.kb-dish-modal__options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.kb-dish-modal__opt-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kb-ink-muted);
}
.kb-dish-modal__opt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.kb-dish-modal__opt-chip {
  padding: 0.38rem 0.85rem;
  border-radius: var(--kb-radius-pill);
  background: var(--kb-paper);
  border: 1.5px solid rgba(58, 36, 28, 0.2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--kb-espresso);
  cursor: pointer;
  transition: all 0.16s ease;
}
.kb-dish-modal__opt-chip:hover,
.kb-dish-modal__opt-chip.is-active {
  background: var(--kb-taxi);
  border-color: var(--kb-taxi);
  color: var(--kb-espresso);
  box-shadow: 0 2px 8px rgba(242, 194, 48, 0.35);
}
.kb-dish-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.kb-dish-modal__btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
}
.kb-dish-modal__btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}
@media (max-width: 600px) {
  .kb-dialog--dish {
    width: min(540px, calc(100% - 1.25rem));
    max-height: min(92vh, 92dvh);
    border-radius: 18px;
  }
  .kb-dish-modal__media {
    height: clamp(195px, 46vw, 240px);
  }
  .kb-dish-modal__body {
    padding: 1.15rem 1.15rem 1.35rem;
    gap: 0.85rem;
  }
  .kb-dish-modal__title {
    font-size: clamp(1.2rem, 5vw, 1.45rem);
  }
}
@media (max-width: 520px) {
  .kb-dialog--dish {
    width: calc(100% - 1rem);
  }
  .kb-dish-modal__actions {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .kb-dish-modal__btn-wa,
  .kb-dish-modal__btn-call {
    min-height: 44px;
    font-size: 0.95rem;
  }
  .kb-item__leader {
    min-width: 0.5rem;
  }
}

/* View Dish Buttons */
.kb-view-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.35rem 0.95rem;
  border-radius: var(--kb-radius-pill);
  border: 1.5px solid var(--kb-gold);
  background: rgba(197, 155, 39, 0.12);
  color: var(--kb-gold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.kb-view-btn:hover {
  background: var(--kb-gold);
  color: #1a0c08;
  box-shadow: 0 4px 14px rgba(197, 155, 39, 0.35);
  transform: translateY(-1px);
}
.kb-view-btn--sig {
  font-size: 0.88rem;
  padding: 0.4rem 1.1rem;
}
.kb-item .kb-view-btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  border-color: var(--kb-maroon);
  background: rgba(110, 27, 27, 0.05);
  color: var(--kb-maroon);
}
.kb-item:hover .kb-view-btn {
  background: var(--kb-maroon);
  color: #fff;
  box-shadow: 0 3px 10px rgba(110, 27, 27, 0.25);
}

.kb-dialog__subtitle { font-size: 0.88rem; color: var(--kb-ink-muted); margin: 0.2rem 0 0; }
.kb-dialog__body { margin: 1.15rem 0; display: flex; flex-direction: column; gap: 1rem; }
.kb-dialog__qty-row { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; border-top: 1px dotted rgba(58, 36, 28, 0.35); }
.kb-dialog__qty-label { font-weight: 600; font-size: 0.95rem; }
.kb-dialog__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .75rem; }
.kb-dialog__title { font-family: var(--kb-font-display); font-weight: 700; font-size: var(--kb-step-2); color: var(--kb-maroon); margin: 0; }
.kb-dialog__label { margin: .25rem 0 .5rem; font-weight: 600; font-size: 0.92rem; }
.kb-dialog__choices { display: flex; gap: .75rem; margin-bottom: .25rem; }

.kb-delivery-alert {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(183, 121, 31, 0.14);
  border: 1.5px solid var(--kb-egg);
  border-radius: var(--kb-radius-sm);
  padding: 0.65rem 0.85rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #7A4E08;
  margin-top: 0.4rem;
  animation: kb-slide-down 0.2s ease-out;
}
.kb-delivery-alert svg { flex-shrink: 0; color: var(--kb-egg); }

.kb-checkout, .kb-result { padding: 1.5rem; display: grid; gap: 1rem; }
.kb-summary { list-style: none; margin: 0; padding: .9rem 1rem; background: var(--kb-paper); border-radius: var(--kb-radius-sm); display: grid; gap: .3rem; font-size: .95rem; }
.kb-summary li { display: flex; justify-content: space-between; gap: 1rem; }
.kb-summary li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kb-summary__total { border-top: 1px dotted rgba(58, 36, 28, .4); padding-top: .4rem; margin-top: .2rem; font-weight: 600; }

/* ---------- Phase 11: Stepped Checkout Elements ---------- */
.kb-checkout__step {
  display: flex;
  gap: 0.85rem;
  position: relative;
  padding-bottom: 1.15rem;
  border-bottom: 1px dotted rgba(58, 36, 28, 0.25);
}
.kb-checkout__step:last-of-type {
  border-bottom: none;
  padding-bottom: 0.25rem;
}
.kb-checkout__step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--kb-maroon);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.kb-checkout__step-body {
  flex: 1;
  min-width: 0;
}
.kb-checkout__section-title {
  display: block;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--kb-maroon);
  margin-bottom: 0.55rem;
}
.kb-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.kb-saved-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #7A4E08;
  background: rgba(242, 194, 48, 0.2);
  border: 1px solid var(--kb-gold);
  border-radius: var(--kb-radius-pill);
  padding: 0.2rem 0.55rem;
}
.kb-saved-chip__clear {
  border: none;
  background: none;
  color: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  margin-left: 0.2rem;
  opacity: 0.75;
}
.kb-saved-chip__clear:hover { opacity: 1; }
.kb-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--kb-ink);
  line-height: 1.35;
}
.kb-checkbox input {
  accent-color: var(--kb-maroon);
  width: 17px;
  height: 17px;
  margin-top: 0.1rem;
}
.kb-checkout__breakdown {
  background: var(--kb-paper);
  border: 1px solid rgba(201, 154, 59, 0.4);
  border-radius: var(--kb-radius-sm);
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.35rem;
}
.kb-checkout__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
  color: var(--kb-ink-muted);
}
.kb-checkout__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--kb-maroon);
  padding-top: 0.45rem;
  border-top: 1.5px dotted rgba(58, 36, 28, 0.35);
  margin-top: 0.25rem;
}
.kb-checkout__submit {
  font-size: 1.05rem;
  padding: 0.85rem 1.25rem;
}

/* ---------- Phase 12: Order Confirmation Screen ---------- */
.kb-confirm {
  text-align: center;
  padding: 0.75rem 0.25rem;
  display: grid;
  gap: 1rem;
  justify-items: center;
}
.kb-confirm__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #E8F5E9;
  color: #2E7D32;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 0 0 8px rgba(46, 125, 50, 0.12);
  animation: kb-bump 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kb-confirm__title {
  font-family: var(--kb-font-display);
  font-size: var(--kb-step-2);
  color: var(--kb-maroon);
  margin: 0;
}
.kb-confirm__sub {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  color: var(--kb-ink-muted);
  max-width: 25rem;
}
.kb-confirm__ref-box {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1.5px solid var(--kb-gold);
  border-radius: var(--kb-radius-pill);
  padding: 0.4rem 0.95rem;
}
.kb-confirm__ref-text {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--kb-espresso);
}
.kb-btn--copy {
  border: none;
  background: rgba(201, 154, 59, 0.2);
  color: var(--kb-espresso);
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: var(--kb-radius-pill);
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.kb-btn--copy:hover {
  background: var(--kb-taxi);
}
.kb-confirm__eta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(46, 25, 19, 0.05);
  border-radius: var(--kb-radius-sm);
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--kb-ink);
}
.kb-receipt-card {
  width: 100%;
  text-align: left;
  background: var(--kb-paper);
  border: 1px solid rgba(58, 36, 28, 0.15);
  border-radius: var(--kb-radius-sm);
  padding: 0.85rem 1rem;
}
.kb-receipt-card__head {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--kb-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px dotted rgba(58, 36, 28, 0.2);
}
.kb-receipt-card__item {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  padding: 0.2rem 0;
}
.kb-receipt-card__foot {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--kb-maroon);
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1.5px dotted rgba(58, 36, 28, 0.3);
}
.kb-confirm__actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  margin-top: 0.4rem;
}

/* ---------- Phase 13: Order Live Tracking ---------- */
.kb-tracking__body {
  padding: 0.25rem 0 0.5rem;
  display: grid;
  gap: 1.15rem;
}
.kb-tracking__eta-box {
  background: linear-gradient(135deg, rgba(36, 19, 14, 0.94) 0%, rgba(61, 34, 26, 0.96) 100%);
  color: var(--kb-parchment);
  padding: 1.1rem 1.25rem;
  border-radius: var(--kb-radius-md);
  border: 1px solid rgba(201, 154, 59, 0.35);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kb-tracking__eta-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kb-gold);
}
.kb-tracking__eta-time {
  font-family: var(--kb-font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--kb-taxi);
  margin-top: 0.15rem;
}
.kb-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-left: 0.5rem;
  padding-left: 0.25rem;
}
.kb-timeline__step {
  display: flex;
  gap: 1rem;
  position: relative;
  padding-bottom: 1.35rem;
}
.kb-timeline__step:last-child {
  padding-bottom: 0;
}
.kb-timeline__step::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: rgba(58, 36, 28, 0.18);
}
.kb-timeline__step.is-done::before {
  background: #2E7D32;
}
.kb-timeline__step:last-child::before {
  display: none;
}
.kb-timeline__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--kb-paper);
  border: 2px solid rgba(58, 36, 28, 0.3);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  z-index: 1;
  font-size: 0.75rem;
  color: var(--kb-ink-muted);
}
.kb-timeline__step.is-done .kb-timeline__dot {
  background: #2E7D32;
  border-color: #2E7D32;
  color: #fff;
}
.kb-timeline__step.is-active .kb-timeline__dot {
  background: var(--kb-taxi);
  border-color: var(--kb-maroon);
  color: var(--kb-espresso);
  box-shadow: 0 0 0 5px rgba(242, 194, 48, 0.35);
  animation: kb-pulse-glow 1.8s infinite;
}
@keyframes kb-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(242, 194, 48, 0.4); }
  50% { box-shadow: 0 0 0 9px rgba(242, 194, 48, 0.1); }
}
.kb-timeline__content {
  flex: 1;
  min-width: 0;
}
.kb-timeline__title {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--kb-ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.kb-timeline__time {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--kb-ink-muted);
}
.kb-timeline__desc {
  font-size: 0.84rem;
  color: var(--kb-ink-muted);
  margin: 0.2rem 0 0;
  line-height: 1.35;
}
.kb-tracking__outlet-box {
  background: #fff;
  border: 1px solid rgba(58, 36, 28, 0.15);
  border-radius: var(--kb-radius-sm);
  padding: 0.85rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---------- Phase 14: Customer Recent Orders ---------- */
.kb-orders-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.kb-order-card {
  background: #fff;
  border: 1px solid rgba(58, 36, 28, 0.18);
  border-radius: var(--kb-radius-sm);
  padding: 0.95rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kb-order-card:hover {
  border-color: var(--kb-gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.kb-order-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kb-order-card__ref {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--kb-maroon);
}
.kb-order-card__date {
  font-size: 0.78rem;
  color: var(--kb-ink-muted);
}
.kb-order-card__type-badge {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: var(--kb-radius-pill);
  background: rgba(201, 154, 59, 0.15);
  color: var(--kb-espresso);
}
.kb-order-card__summary {
  font-size: 0.88rem;
  color: var(--kb-ink);
  line-height: 1.4;
}
.kb-order-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px dotted rgba(58, 36, 28, 0.2);
}
.kb-order-card__total {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--kb-ink);
}
.kb-order-card__actions {
  display: flex;
  gap: 0.5rem;
}
.kb-empty-orders {
  text-align: center;
  padding: 2.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.kb-empty-orders__icon {
  font-size: 3rem;
  opacity: 0.75;
}
.kb-empty-orders__title {
  font-family: var(--kb-font-display);
  font-size: 1.25rem;
  color: var(--kb-maroon);
  margin: 0;
}
.kb-empty-orders__desc {
  font-size: 0.92rem;
  color: var(--kb-ink-muted);
  max-width: 22rem;
  margin: 0;
}

/* Segmented fulfillment cards */
.kb-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  border: 0;
  padding: 0;
  margin: 0;
}
.kb-segmented__option {
  position: relative;
  cursor: pointer;
}
.kb-segmented__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.kb-segmented__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.85rem 0.6rem;
  border-radius: var(--kb-radius-sm);
  border: 1.5px solid rgba(58, 36, 28, 0.25);
  background: var(--kb-paper);
  color: var(--kb-ink);
  transition: all 0.15s ease;
}
.kb-segmented__card svg {
  margin-bottom: 0.35rem;
  color: var(--kb-ink-muted);
}
.kb-segmented__card strong {
  font-size: 0.92rem;
  line-height: 1.2;
}
.kb-segmented__card small {
  font-size: 0.76rem;
  color: var(--kb-ink-muted);
  margin-top: 0.2rem;
}
.kb-segmented__option input:checked + .kb-segmented__card {
  border-color: var(--kb-maroon);
  background: #fff;
  box-shadow: 0 4px 12px rgba(110, 27, 27, 0.15), 0 0 0 1px var(--kb-maroon);
}
.kb-segmented__option input:checked + .kb-segmented__card svg {
  color: var(--kb-maroon);
}

.kb-field { display: grid; gap: .35rem; font-weight: 500; font-size: .95rem; border: 0; padding: 0; margin: 0; }
.kb-field legend { font-weight: 500; margin-bottom: .35rem; padding: 0; }
.kb-field__opt { font-weight: 400; color: rgba(58, 36, 28, .65); }
.kb-field input[type="text"], .kb-field input[type="tel"], .kb-field textarea { font: inherit; font-weight: 400; padding: .7rem .85rem; border: 1.5px solid rgba(58, 36, 28, .3); border-radius: var(--kb-radius-sm); background: #fff; color: var(--kb-ink); }
.kb-field input:focus, .kb-field textarea:focus { border-color: var(--kb-maroon); outline: none; box-shadow: 0 0 0 3px rgba(242, 194, 48, .55); }
.kb-field--radio { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.kb-field--radio legend { width: 100%; }
.kb-field--radio label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; cursor: pointer; }
.kb-field--radio input { accent-color: var(--kb-maroon); width: 18px; height: 18px; }
.kb-result { text-align: center; justify-items: center; }
.kb-result p { margin: 0; max-width: 26rem; }
.kb-result__title { font-family: var(--kb-font-display); font-size: var(--kb-step-2); color: var(--kb-maroon); margin: 0; }
.kb-result__ref { font-weight: 500; }


/* ============================================================
   Phase 16: Reviews & Social Proof
   ============================================================ */
.kb-reviews {
  background:
    radial-gradient(circle at 15% 50%, rgba(92, 29, 36, 0.22) 0%, transparent 60%),
    radial-gradient(circle at 85% 50%, rgba(201, 154, 59, 0.12) 0%, transparent 60%),
    var(--kb-espresso);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  border-top: 1px solid rgba(201, 154, 59, 0.2);
}
.kb-reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.75rem;
}
.kb-reviews__head-left {
  max-width: 36rem;
}
.kb-reviews__sub {
  color: rgba(244, 234, 215, 0.78);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0.6rem 0 0;
}
.kb-reviews__score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1.75rem;
  border-radius: var(--kb-radius-md);
  background: rgba(46, 25, 19, 0.75);
  border: 1.5px solid rgba(201, 154, 59, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.kb-reviews__rating-val {
  font-family: var(--kb-font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--kb-taxi);
  line-height: 1;
}
.kb-reviews__rating-stars {
  color: var(--kb-taxi);
  font-size: 1.15rem;
  letter-spacing: 0.15em;
  margin: 0.3rem 0;
}
.kb-reviews__rating-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: rgba(244, 234, 215, 0.8);
  font-weight: 500;
}

.kb-reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 0;
}
.kb-review-card {
  background: rgba(46, 25, 19, 0.7);
  border: 1px solid rgba(201, 154, 59, 0.22);
  border-radius: var(--kb-radius-md);
  padding: 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.kb-review-card:hover {
  transform: translateY(-4px);
  border-color: var(--kb-gold);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}
.kb-review-card__stars {
  color: var(--kb-taxi);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
}
.kb-review-card__quote {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(244, 234, 215, 0.88);
  margin: 0 0 1.25rem;
  font-style: italic;
  flex-grow: 1;
}
.kb-review-card__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.kb-review-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--kb-maroon);
  color: var(--kb-taxi);
  font-weight: 700;
  font-size: 0.82rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 194, 48, 0.35);
  flex-shrink: 0;
}
.kb-review-card__name {
  display: block;
  font-size: 0.92rem;
  color: #fff;
  font-weight: 600;
}
.kb-review-card__tag {
  font-size: 0.74rem;
  color: var(--kb-gold);
  background: rgba(24, 11, 7, 0.6);
  padding: 0.3rem 0.6rem;
  border-radius: var(--kb-radius-sm);
  border: 1px solid rgba(201, 154, 59, 0.18);
}

/* ============================================================
   Phase 17: Hyperlocal Outlet & Neighborhood Context
   ============================================================ */
.kb-contact__coverage {
  background: rgba(36, 19, 14, 0.75);
  border: 1px solid rgba(201, 154, 59, 0.25);
  border-radius: var(--kb-radius-sm);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
}
.kb-contact__coverage-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--kb-taxi);
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
}
.kb-coverage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.35);
  animation: kb-pulse-glow 1.8s infinite;
}
.kb-contact__coverage-text {
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(244, 234, 215, 0.75);
  margin: 0;
}
.kb-contact__hours-matrix {
  border-left: 2px solid var(--kb-taxi);
  padding-left: 0.85rem;
  margin-top: 0.75rem;
}
.kb-hours-row {
  display: flex;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.kb-hours-day {
  color: var(--kb-gold);
}
.kb-hours-time {
  color: var(--kb-taxi);
}
.kb-hours-sub {
  font-size: 0.82rem;
  color: rgba(244, 234, 215, 0.7);
  margin-top: 0.25rem;
}
.kb-contact__card {
  background: rgba(36, 19, 14, 0.85);
  border: 1.5px solid rgba(201, 154, 59, 0.3);
  border-radius: var(--kb-radius-md);
  padding: 1.75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.kb-contact__card-title {
  font-family: var(--kb-font-display);
  font-size: 1.25rem;
  color: #fff;
  margin: 0 0 0.5rem;
}
.kb-contact__card-desc {
  font-size: 0.88rem;
  color: rgba(244, 234, 215, 0.75);
  line-height: 1.45;
  margin: 0 0 1.25rem;
}

/* ============================================================
   Phase 18: Micro-Interactions & Motion Design Polish
   ============================================================ */
.kb-btn:active,
.kb-iconbtn:active,
.kb-add:active,
.kb-stepper__btn:active {
  transform: scale(0.96);
}
.kb-btn--bump {
  animation: kb-bump 0.35s ease;
}
@keyframes kb-bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

:focus-visible {
  outline: 2px solid var(--kb-taxi) !important;
  outline-offset: 3px !important;
}

/* Custom scrollbars for category nav and drawers */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(36, 19, 14, 0.4);
}
::-webkit-scrollbar-thumb {
  background: rgba(201, 154, 59, 0.4);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(242, 194, 48, 0.6);
}

/* ---------- Scroll Reveal Animation ---------- */
.kb-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.kb-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Toast ---------- */
.kb-toast { position: fixed; left: 50%; bottom: 5.5rem; z-index: 90; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; padding: .7rem 1.1rem; border-radius: var(--kb-radius-pill); background: var(--kb-espresso); color: var(--kb-parchment); font-size: .92rem; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); transition: opacity .2s, transform .2s; }
.kb-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive & Mobile Optimization ---------- */
@media (max-width: 1024px) {
  .kb-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .kb-reviews__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .kb-signatures__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .kb-about__plates { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

@media (max-width: 860px) {
  :root {
    --kb-header-h: calc(64px + env(safe-area-inset-top, 0px));
    --kb-step-4: clamp(2.2rem, 7vw, 3.4rem);
  }

  /* Header & Navigation */
  .kb-nav-toggle { display: inline-grid; }
  .kb-header__order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border-radius: var(--kb-radius-pill);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  }
  .kb-header__actions { margin-left: auto; gap: 0.5rem; }
  .kb-brand__logo { width: 44px; height: 44px; }
  .kb-brand__tag { display: none; }
  .kb-nav {
    position: absolute;
    top: var(--kb-header-h);
    left: 0;
    right: 0;
    margin: 0;
    background: rgba(36, 19, 14, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1.5px solid rgba(201, 154, 59, 0.35);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
    display: none;
  }
  .kb-nav.is-open { display: block; animation: kb-slide-down 0.25s ease-out; }
  .kb-nav__list { flex-direction: column; padding: 0.75rem 1.25rem 1.25rem; gap: 0.25rem; }
  .kb-nav__list a {
    padding: 0.85rem 0.75rem;
    font-size: 1.05rem;
    border-radius: var(--kb-radius-sm);
    border-bottom: 1px solid rgba(242, 230, 207, 0.07);
  }
  .kb-nav__mobile-only { display: block; }

  /* Hero Section — Portrait mobile banner with seamless bottom fade */
  .kb-hero {
    min-height: min(88vh, 720px);
    min-height: min(88dvh, 720px);
    align-items: start;
  }
  .kb-hero__bg {
    --kb-hero-image: url("../img/kolbites-banner-mobile.jpg");
    --kb-hero-image: image-set(
      url("../img/kolbites-banner-mobile.webp") type("image/webp"),
      url("../img/kolbites-banner-mobile.jpg") type("image/jpeg")
    );
    transform: none;
    background-position: center bottom;
    background-size: cover;
    filter: saturate(1.06) contrast(1.02);
  }
  html.webp .kb-hero__bg {
    --kb-hero-image: url("../img/kolbites-banner-mobile.webp");
  }
  html.no-webp .kb-hero__bg {
    --kb-hero-image: url("../img/kolbites-banner-mobile.jpg");
  }
  .kb-hero::before {
    background:
      linear-gradient(180deg,
        rgba(36, 19, 14, 0.88) 0%,
        rgba(36, 19, 14, 0.72) 42%,
        rgba(36, 19, 14, 0.22) 68%,
        rgba(36, 19, 14, 0.12) 82%,
        rgba(36, 19, 14, 0.75) 100%
      );
  }
  .kb-hero__content {
    padding-top: calc(var(--kb-header-h) + 1.25rem);
    padding-bottom: 2rem;
  }
  .kb-hero__line1 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
  .kb-hero__line2 { font-size: clamp(1.4rem, 5.5vw, 2.1rem); padding-left: 0.5rem; margin-top: 0.2rem; }
  .kb-hero__sub { font-size: 0.98rem; margin: 1rem 0 1.5rem; }
  .kb-hero__status { font-size: 0.8rem; padding: 0.3rem 0.75rem; margin-bottom: 0.9rem; }
  .kb-hero__trust { font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.25rem 0 0; }
  .kb-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(36, 19, 14, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(201, 154, 59, 0.35);
    border-radius: var(--kb-radius-pill);
    padding: 0.32rem 0.75rem;
    font-size: 0.8rem;
    color: var(--kb-parchment);
  }
  .kb-hero__badge.kb-hero__rating {
    color: var(--kb-taxi);
    font-weight: 700;
    border-color: rgba(242, 194, 48, 0.45);
  }
  .kb-hero__divider { display: none; }

  .kb-hero__cta-group {
    width: 100%;
    gap: 0.75rem;
  }
  .kb-hero__ctas-primary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    width: 100%;
  }
  .kb-hero__order-btn {
    font-size: 1.05rem;
    padding: 0.85rem 1.25rem;
    justify-content: center;
  }
  .kb-hero__channels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    width: 100%;
  }
  .kb-hero__channel {
    justify-content: center;
    font-size: 0.82rem;
    padding: 0.45rem 0.5rem;
  }

  /* Menu Layout & Sticky Category Navigation with Right Edge Fade Mask */
  .kb-menu__layout { grid-template-columns: 1fr; gap: 1rem; }
  .kb-catnav {
    top: var(--kb-header-h);
    z-index: 25;
    margin-inline: -1.25rem;
    padding: 0.55rem 0;
    background: rgba(36, 19, 14, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201, 154, 59, 0.25);
    mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
  }
  .kb-catnav__list {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0 1.25rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .kb-catnav__list::-webkit-scrollbar { display: none; }
  .kb-catnav__link {
    scroll-snap-align: start;
    white-space: nowrap;
    border: 1px solid rgba(201, 154, 59, 0.35);
    border-radius: var(--kb-radius-pill);
    padding: 0.42rem 0.95rem;
    font-size: 0.88rem;
  }
  .kb-catnav__link.is-active {
    background: var(--kb-taxi);
    color: var(--kb-espresso);
    border-color: var(--kb-taxi);
    box-shadow: 0 2px 8px rgba(242, 194, 48, 0.3);
  }

  /* Parchment Menu Card */
  .kb-card {
    outline: none;
    padding: 1.5rem 1rem;
    border-radius: var(--kb-radius-md);
  }
  .kb-card__ornament { display: none; } /* Hide to prevent overlapping dish text on mobile */
  .kb-card__grid { columns: 1; }

  /* Responsive Mobile Dish Item (Matching Authentic Restaurant Menu Spec) */
  .kb-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.65rem 0.4rem;
    border-bottom: 1px solid rgba(58, 36, 28, 0.08);
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease;
  }
  .kb-item:hover,
  .kb-item:active {
    background: rgba(197, 155, 39, 0.08);
  }
  .kb-item__line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: nowrap;
  }
  .kb-item__line > .kb-diet {
    flex-shrink: 0;
  }
  .kb-item__thumb {
    width: 48px;
    height: 33px;
    border-radius: 6px;
    object-fit: cover;
    object-position: center;
    background: rgba(43, 23, 18, 0.05);
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  .kb-item__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--kb-ink);
  }
  .kb-item__note {
    display: block;
    font-size: 0.76rem;
    color: var(--kb-ink-muted);
    font-weight: 400;
    margin-top: 0.12rem;
    line-height: 1.15;
  }
  .kb-item__leader {
    display: block;
    flex: 1;
    min-width: 8px;
    border-bottom: 1px dotted rgba(58, 36, 28, 0.25);
    margin: 0 0.25rem;
    align-self: center;
  }
  .kb-item__price {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--kb-maroon);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 0.15rem;
    margin-left: 0;
  }
  .kb-item__action {
    flex-shrink: 0;
    min-width: auto;
  }
  .kb-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.32rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    min-height: 32px;
    border: 1.5px solid var(--kb-maroon);
    border-radius: var(--kb-radius-pill);
    color: var(--kb-maroon);
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .kb-view-btn:hover,
  .kb-view-btn:active {
    background: var(--kb-maroon);
    color: #fff;
  }
  .kb-add {
    min-height: 38px;
    min-width: 64px;
    padding: 0.42rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--kb-radius-pill);
    box-shadow: 0 2px 8px rgba(110, 27, 27, 0.15);
  }
  .kb-stepper__btn {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }

  /* Tools & Filters (Selector fixed to match HTML kb-menu__tools-primary) */
  .kb-menu__tools-primary {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
  }
  .kb-search { width: 100%; }
  .kb-diet-tabs {
    width: 100%;
    display: flex;
    background: rgba(36, 19, 14, 0.6);
    padding: 3px;
    border-radius: var(--kb-radius-pill);
    border: 1px solid rgba(201, 154, 59, 0.25);
  }
  .kb-diet-tab { /* All 4 tabs fit smoothly on mobile */
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 0.45rem 0.35rem;
    font-size: 0.8rem;
    white-space: nowrap;
    justify-content: center;
    min-height: 40px;
  }
  .kb-legend { display: none; }
  .kb-discovery { display: none; } /* Duplicate nav chips hidden on mobile */

  /* Native Mobile Bottom Sheet: Cart Drawer */
  .kb-cart__panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 88dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .kb-cart.is-open .kb-cart__panel {
    transform: translateY(0);
  }
  .kb-cart__head {
    padding: 1.1rem 1.25rem 0.85rem;
    position: relative;
  }
  .kb-cart__head::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: var(--kb-radius-pill);
    background: rgba(58, 36, 28, 0.25);
  }
  .kb-cart__foot {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  /* Native Mobile Bottom Sheet: Dialogs & Checkout */
  /* Native Mobile Bottom Sheet: Dialogs & Checkout */
  .kb-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    margin: auto 0 0 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6);
    padding: 1.5rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .kb-dialog--small,
  .kb-dialog--custom {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0 0;
    border-radius: 20px 20px 0 0;
    padding: 1.5rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  }
  
  /* Mobile Signatures: Native App-style Horizontal Snap Carousel */
  .kb-signatures__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.85rem;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .kb-signatures__grid::-webkit-scrollbar { display: none; }
  .kb-sig-card {
    flex: 0 0 min(82vw, 300px);
    scroll-snap-align: start;
  }
  .kb-sig-card__media {
    aspect-ratio: 16 / 10;
  }
  .kb-checkout {
    padding: 1.25rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  }

  /* Reviews responsive */
  .kb-reviews__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
  }
  .kb-reviews__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.95rem;
  }

  /* About, Contact & Footer */
  .kb-about__grid, .kb-contact__grid { grid-template-columns: 1fr; }
  .kb-about__plates {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
  .kb-about__plates picture img,
  .kb-about__plates img {
    aspect-ratio: 16 / 11;
    object-fit: cover;
    border-radius: var(--kb-radius-sm);
  }
  .kb-about__plates picture:first-child img,
  .kb-about__plates img:first-child {
    aspect-ratio: 16 / 9;
  }
  .kb-contact__card {
    padding: 1.35rem 1.15rem;
  }
  .kb-contact__card-title {
    font-size: 1.18rem;
  }
  .kb-contact__card-desc {
    font-size: 0.86rem;
    line-height: 1.45;
    margin-bottom: 1rem;
  }
  .kb-contact__hours-matrix {
    background: rgba(36, 19, 14, 0.5);
    padding: 0.65rem 0.85rem;
    border-radius: 0 8px 8px 0;
    border-left: 3px solid var(--kb-taxi);
  }
  .kb-contact__actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
  }
  .kb-contact__actions a:first-child {
    grid-column: auto;
  }
  .kb-contact__actions .kb-btn {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 0.92rem;
    justify-content: center;
    white-space: normal;
    text-align: center;
    min-height: 46px;
    border-radius: var(--kb-radius-pill);
  }
  .kb-footer__map-head { /* Fix #6: stack map heading vertically */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .kb-footer__brand img { /* Fix #7: shrink oversized footer logo */
    width: 64px;
    height: 64px;
  }
  .kb-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .kb-footer {
    padding-bottom: max(6rem, calc(4.5rem + env(safe-area-inset-bottom)));
  }
  .kb-cartbar__cta { /* Fix #8: ensure View cart label is visible */
    font-weight: 700;
    white-space: nowrap;
  }

  /* Mobile bottom-sheet behavior for general dialogs */
  .kb-dialog[open] {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90dvh !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    animation: kb-sheet-up 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    padding-top: 1.75rem;
    z-index: 1000;
  }
  .kb-dialog[open]::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: var(--kb-radius-pill);
    background: rgba(58, 36, 28, 0.25);
  }

  .kb-dialog--checkout {
    padding: 0 !important;
  }

  /* === Dish Card Modal: Centered Pop-up on ALL Phones (Samsung, iPhone, etc.) === */
  /* Override the generic bottom-sheet behavior specifically for dish modal */
  .kb-dialog--dish:not([open]) {
    display: none !important;
  }

  .kb-dialog--dish[open] {
    /* Position: cancel bottom-sheet inset, then apply center-centering */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    /* NOTE: inset: unset must NOT come after top/left or it resets them */
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    /* Sizing: fits all phones from 320px (small Samsung) to 440px (iPhone 16 Pro Max) */
    width: min(calc(100vw - 1.5rem), 420px) !important;
    max-width: 420px !important;
    min-width: 0 !important;
    /* Height: image + content + buttons — no cutting */
    max-height: min(88vh, 88dvh, 600px) !important;
    height: auto !important;
    /* Appearance */
    border-radius: 18px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1.5px solid rgba(197, 155, 39, 0.45) !important;
    box-shadow:
      0 32px 80px rgba(8, 3, 1, 0.9),
      0 0 0 1px rgba(197, 155, 39, 0.15) !important;
    background: #FAF7F2 !important;
    z-index: 10001 !important;
    display: flex !important;
    flex-direction: column !important;
    animation: kb-dish-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  .kb-dialog--dish[open]::before {
    display: none !important;
  }

  .kb-dish-modal {
    min-height: 0 !important;
    max-height: min(88vh, 88dvh, 600px) !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .kb-dish-modal.has-no-image {
    padding-top: 1rem;
  }

  .kb-dish-modal.has-no-image .kb-dish-modal__header {
    padding-right: 44px; /* Ensure close button never overlaps category badges or text */
  }

  .kb-dish-modal__close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    z-index: 30 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background: rgba(18, 9, 6, 0.8) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  }

  .kb-dish-modal__media {
    position: relative !important;
    width: 100% !important;
    height: clamp(135px, 19vh, 175px) !important;
    max-height: 175px !important;
    border-radius: 18px 18px 0 0 !important;
    background: #190e0a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .kb-dish-modal__img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
  }

  .kb-dish-modal__body {
    padding: 0.75rem 1rem 0.85rem !important;
    gap: 0.45rem !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  .kb-dish-modal__meta-row {
    gap: 0.45rem;
    margin-bottom: 0.15rem;
  }

  .kb-dish-modal__title {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: var(--kb-maroon) !important;
  }

  .kb-dish-modal__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .kb-dish-modal__price {
    font-size: 1.3rem !important;
    font-weight: 700;
    color: var(--kb-espresso);
  }

  .kb-dish-modal__serving {
    font-size: 0.78rem !important;
    color: var(--kb-ink-muted);
  }

  .kb-dish-modal__desc {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    padding: 0.55rem 0.75rem !important;
    margin: 0 !important;
    background: rgba(201, 154, 59, 0.09) !important;
    border-radius: 8px !important;
    border-left: 3px solid var(--kb-gold) !important;
    color: #43332D !important;
    flex-shrink: 1 !important;
  }

  .kb-dish-modal__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    margin-top: auto !important;
    padding-top: 0.4rem !important;
    position: sticky !important;
    bottom: 0 !important;
    background: #FAF7F2 !important;
    box-shadow: 0 -8px 14px -4px #FAF7F2 !important;
    z-index: 5 !important;
    flex-shrink: 0 !important;
  }

  @media (max-width: 340px) {
    .kb-dish-modal__actions {
      grid-template-columns: 1fr !important;
      gap: 0.4rem !important;
    }
  }

  .kb-dish-modal__actions .kb-btn {
    width: 100% !important;
    padding: 0.65rem 0.8rem !important;
    font-size: 0.84rem !important;
    justify-content: center !important;
    border-radius: var(--kb-radius-pill) !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

@keyframes kb-dish-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.93);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

  /* Mobile Touch Target Standards (WCAG 2.1 AA >= 44x44px) */
  .kb-stepper__btn {
    min-width: 44px;
    min-height: 44px;
  }
  .kb-iconbtn {
    min-width: 44px;
    min-height: 44px;
  }
  .kb-chip {
    min-height: 40px;
    padding: 0.45rem 0.95rem;
  }
  .kb-field input, .kb-field textarea, .kb-search__input {
    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
  }

  /* Floating Cart Bar */
  .kb-cartbar {
    display: flex;
  }
}

@keyframes kb-sheet-up {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes kb-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes kb-cartbar-bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.kb-cartbar.kb-btn--bump {
  animation: kb-cartbar-bump 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 600px) {
  /* Mobile Reviews: Smooth Horizontal Swipe Card Deck */
  .kb-reviews__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.85rem;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .kb-reviews__grid::-webkit-scrollbar { display: none; }
  .kb-review-card {
    flex: 0 0 min(84vw, 320px);
    scroll-snap-align: start;
  }

  /* Form & Checkout Fields: Full width single column on mobile */
  .kb-field-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  /* Native Mobile Segmented Fulfillment Cards */
  .kb-segmented {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .kb-segmented__card {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    text-align: left;
    gap: 0.2rem 0.75rem;
    padding: 0.85rem 1rem;
  }
  .kb-segmented__card svg {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }
  .kb-segmented__card strong {
    grid-column: 2;
    font-size: 0.95rem;
  }
  .kb-segmented__card small {
    grid-column: 2;
    margin-top: 0;
  }

  .kb-checkout__step {
    gap: 0.65rem;
    padding-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  .kb-wrap { width: min(100% - 1.5rem, var(--kb-wrap)); }
  .kb-hero__line1 { font-size: clamp(2rem, 9.5vw, 2.7rem); }
  .kb-hero__line2 { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .kb-card {
    padding: 1.25rem 0.75rem;
  }
  .kb-dialog--checkout,
  .kb-dialog--tracking,
  .kb-dialog--orders,
  .kb-dialog--custom {
    width: min(540px, calc(100% - 1rem));
  }
  .kb-checkout, .kb-result {
    padding: 1.15rem 0.85rem;
  }
  .kb-item {
    padding: 0.38rem 0.5rem;
    gap: 0.55rem;
  }
  .kb-item__thumb {
    width: 46px;
    height: 32px;
  }

  /* Mobile Cart Line Item Layout */
  .kb-cart__line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.35rem 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(58, 36, 28, 0.08);
  }
  .kb-cart__line > .kb-diet {
    grid-row: 1;
    grid-column: 1;
  }
  .kb-cart__info {
    grid-row: 1;
    grid-column: 2;
  }
  .kb-cart__line > .kb-stepper {
    grid-row: 1 / 3;
    grid-column: 3;
  }
  .kb-cart__linetotal {
    grid-row: 2;
    grid-column: 2;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--kb-maroon);
    text-align: left;
    margin-top: -0.15rem;
  }
}

@media (max-width: 360px) {
  .kb-wrap { width: min(100% - 1rem, var(--kb-wrap)); }
  .kb-card { padding: 1rem 0.5rem; }
  .kb-hero__channel { width: 100%; justify-content: center; }
  .kb-diet-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .kb-diet-tab { padding: 0.35rem 0.45rem; font-size: 0.74rem; }
  .kb-item__leader { display: none; }
  .kb-item__name { font-size: 0.92rem; }
  .kb-item__thumb { width: 40px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.kb-site) { scroll-behavior: auto; }
  .kb-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  dialog[open], .kb-dialog--custom[open] { animation: none !important; }
  .kb-btn--bump, .kb-coverage-dot, .kb-pulse-glow { animation: none !important; }
  .kb-site *, .kb-site *::before, .kb-site *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}