@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  --bg: #fbf8f0;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --green: #1f4a2e;
  --green-hi: #276b3e;
  --green-soft: rgba(31, 74, 46, 0.08);
  --gold: #f4c542;
  --gold-light: #f7d571;
  --gold-2: #1f4a2e;
  --gold-deep: #c8992b;
  --gold-grad: linear-gradient(135deg, #f7d571 0%, #f4c542 50%, #c8992b 100%);
  --heading: #1f3a26;
  --text: #3e5145;
  --muted: #5b6d60;
  --line: rgba(31, 74, 46, 0.16);
  --line-soft: rgba(31, 74, 46, 0.08);
  --shadow: 0 24px 60px rgba(31, 58, 38, 0.14);
  --max-width: 1160px;
  --display: "Outfit", "Inter", Arial, sans-serif;
  --body: "DM Sans", "Inter", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(900px 520px at 50% -80px, rgba(244, 197, 66, 0.22), transparent 62%),
    radial-gradient(700px 500px at 100% 340px, rgba(31, 74, 46, 0.06), transparent 60%),
    radial-gradient(700px 500px at 0% 900px, rgba(31, 74, 46, 0.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.site-watermark {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../images/sophia-smoothies-logo-transparent.png") center 46% / min(640px, 68vw) no-repeat;
  opacity: 0.04;
  filter: saturate(1.15);
  pointer-events: none;
}

@media (min-width: 900px) {
  .site-watermark {
    background-size: 560px;
  }
}

::selection {
  background: var(--gold);
  color: var(--heading);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-gold {
  color: var(--green);
}

/* Header + nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px max(24px, calc((100vw - var(--max-width)) / 2));
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-right: auto;
  font-weight: 800;
}

.brand-logo {
  display: block;
  width: 64px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid rgba(244, 197, 66, 0.30);
  border-radius: 10px;
  background: #ffffff;
  object-fit: contain;
  object-position: center;
  padding: 3px;
}

.brand-name,
.brand-tagline {
  display: block;
}

.brand-name {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.1;
  color: var(--heading);
}

.brand-tagline {
  color: var(--green);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Small, subtle third brand line — signals the online/virtual-restaurant model
   without adding header height or competing with the slogan. */
.brand-note {
  display: block;
  margin-top: 3px;
  color: var(--green);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.72;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 30px rgba(31, 58, 38, 0.14);
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 500;
}

.site-nav a {
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--muted);
  transition: color 0.25s ease, background 0.25s ease;
}

.site-nav a:hover {
  color: var(--heading);
  background: rgba(31, 74, 46, 0.06);
}

.site-nav a.active {
  background: var(--green);
  color: #ffffff;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.nav-toggle span:not(.sr-only) {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--green);
}

/* Icon-only "Hours & Location" control in the header. It jumps to the footer
   hours/location section and matches the round cart button so the header action
   icons read as one clean cluster on both mobile and desktop. */
.header-location {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--green);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.header-location:hover {
  border-color: rgba(244, 197, 66, 0.5);
  background: var(--green-soft);
}

.header-location svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

#hours-location {
  scroll-margin-top: 90px;
}

/* Headings + text */
.eyebrow {
  margin: 0 0 12px;
  color: var(--green);
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--heading);
}

h1 {
  max-width: 780px;
  margin-bottom: 16px;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.05;
  font-weight: 700;
}

h2 {
  margin-bottom: 14px;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
  font-weight: 700;
}

h3 {
  margin-bottom: 6px;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.button.primary {
  background: var(--green);
  color: var(--gold);
  box-shadow: 0 0 22px rgba(244, 197, 66, 0.35);
}

.button.primary:hover {
  background: var(--green-hi);
  transform: translateY(-2px);
  box-shadow: 0 0 34px rgba(244, 197, 66, 0.5);
}

.button.secondary {
  background: #ffffff;
  border-color: var(--green);
  color: var(--green);
  backdrop-filter: blur(6px);
}

.button.secondary:hover {
  background: var(--green);
  color: #ffffff;
  transform: translateY(-2px);
}

.button svg {
  width: 18px;
  height: 18px;
}

/* Hero banner (full-width top image) */
.hero-banner {
  width: 100%;
  line-height: 0;
}

.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: cover;
  object-position: center 40%;
}

/* Home hero */
.home-hero {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 24px 12px;
  text-align: center;
}

.home-hero > * {
  position: relative;
  z-index: 1;
}

.pill-badge {
  display: inline-block;
  margin-bottom: 24px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(247, 213, 113, 0.3);
  background: rgba(247, 213, 113, 0.08);
  color: var(--gold-light);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 15px rgba(244, 197, 66, 0.15);
}

.home-hero h1 {
  font-size: clamp(1.6rem, 6vw, 3rem);
  line-height: 1.12;
  margin: 0 auto 16px;
  max-width: 24ch;
}

.hero-line {
  display: block;
}

.home-hero-copy {
  color: var(--text);
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  max-width: 640px;
  margin: 0 auto;
}

.hero-tagline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.35rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.home-hero .hero-actions {
  justify-content: center;
}

/* Menu board */
.menu-board {
  max-width: 1080px;
  margin: 40px auto 8px;
  padding: 0 24px;
}

.board-inner {
  position: relative;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  padding: 28px clamp(20px, 4vw, 48px) 48px;
  box-shadow: var(--shadow);
}

.board-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 33px;
  padding: 1px;
  background: linear-gradient(180deg, rgba(247, 213, 113, 0.4), rgba(31, 74, 46, 0.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.board-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin-top: 8px;
}

.board-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.board-product h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
  color: var(--heading);
}

.board-photo {
  position: relative;
  width: 200px;
  height: 260px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: 0 22px 55px rgba(31, 58, 38, 0.18);
  margin-bottom: 0;
}

.board-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.board-product:hover .board-photo img {
  transform: scale(1.08);
}

.board-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.board-photo-label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--display);
  font-weight: 700;
  color: #ffffff;
}

.board-float {
  position: relative;
  width: 210px;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  filter: drop-shadow(0 22px 42px rgba(31, 58, 38, 0.18));
  animation: floaty 6s ease-in-out infinite;
}

.board-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.board-product.featured {
  margin-top: -24px;
}

.board-view-all {
  display: flex;
  justify-content: center;
  padding-top: 36px;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Home stats */
.home-stats {
  max-width: 1080px;
  margin: 32px auto 12px;
  padding: 0 24px 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 26px;
  background: var(--surface-2);
  border: 1px solid var(--green);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.stat-card:hover {
  border-color: rgba(244, 197, 66, 0.5);
  transform: translateY(-3px);
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: var(--gold);
  border: 1px solid rgba(247, 213, 113, 0.2);
  margin-bottom: 18px;
}

.stat-icon svg {
  width: 20px;
  height: 20px;
}

.stat-card h2 {
  font-size: 1.18rem;
  margin-bottom: 6px;
}

.stat-card p {
  color: var(--muted);
  font-size: 0.94rem;
  margin: 0;
}

/* Generic sections */
.section,
.page-hero,
.menu-layout,
.contact-layout {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px 24px;
}

.page-hero {
  padding-top: 74px;
  padding-bottom: 36px;
}

.page-hero.compact {
  max-width: 860px;
  text-align: center;
}

.page-hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.6rem);
}

.menu-hero-headline {
  background: linear-gradient(135deg, #f7d571 0%, #f4c542 50%, #c8992b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.12em;
  font-size: clamp(3.5rem, 10vw, 7rem);
  line-height: 1;
}

.page-hero p,
.story-section p {
  color: var(--text);
  font-size: 1.06rem;
}

/* Compare hero tagline — sits under the big COMPARE ITEMS headline; smaller
   than the title, muted, and centered by .page-hero.compact. */
.page-hero p.compare-hero-tagline {
  margin-top: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Menu page */
.menu-layout {
  padding-top: 0;
}

/* Category jump nav — appears directly under the hero */
.menu-jump {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.menu-jump-card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 16px 16px 16px 18px;
  border: 1.5px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: 16px;
  background: var(--surface-2);
  transition: border-color 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.menu-jump-card:hover {
  border-color: var(--gold);
  border-top-color: var(--gold-deep);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(31, 58, 38, 0.1);
}

.menu-jump-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
}

.menu-jump-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex: 0 0 78px;
  width: 78px;
  text-decoration: none;
}

.menu-jump-preview img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: #ffffff;
}

.menu-jump-preview-name {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--muted);
  text-align: center;
}

.menu-jump-preview:hover .menu-jump-preview-name {
  color: var(--green);
}

.menu-jump-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--heading);
  line-height: 1.3;
}

.menu-jump-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.menu-jump-arrow {
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--green);
  letter-spacing: 0.01em;
}

/* Give anchor-jumped item cards breathing room below the header */
.menu-item {
  scroll-margin-top: 90px;
}

.menu-sections,
.menu-grid {
  display: grid;
  gap: 18px;
}

.menu-section {
  scroll-margin-top: 110px;
}

.menu-heading {
  padding-bottom: 8px;
}

.menu-note {
  margin: -4px 0 10px;
  color: var(--green);
  font-weight: 600;
}

.menu-item-nutrition {
  margin: 2px 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.menu-sugar-note {
  margin: 0 0 20px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(244, 197, 66, 0.08);
  border: 1px solid rgba(244, 197, 66, 0.25);
  font-size: 0.82rem;
  color: var(--body);
  line-height: 1.5;
}

.menu-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.menu-item:hover {
  border-color: rgba(244, 197, 66, 0.4);
  transform: translateY(-2px);
}

.menu-item:not(:has(.menu-item-photo)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.menu-item-photo {
  width: 150px;
  height: auto;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: #ffffff;
  object-fit: contain;
  object-position: center;
}

.menu-item {
  cursor: pointer;
  position: relative;
}

.menu-item-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #c0392b;
  color: #ffffff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 1;
}

.menu-item.is-unavailable .menu-item-photo {
  filter: grayscale(0.5);
  opacity: 0.75;
}

.menu-item-add:disabled,
.menu-item-add.is-unavailable {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--line);
  cursor: not-allowed;
}

.menu-item-add:disabled:hover,
.menu-item-add.is-unavailable:hover {
  background: var(--surface-2);
  color: var(--muted);
}

.menu-item p {
  margin-bottom: 0;
  color: var(--muted);
}

.menu-item-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.menu-item-add {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--green);
  color: #ffffff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

.menu-item-add:hover {
  background: #163a24;
  border-color: #163a24;
  color: #ffffff;
  transform: translateY(-1px);
}

.menu-item-details {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--green);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 18px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.menu-item-details:hover {
  border-color: rgba(244, 197, 66, 0.6);
  background: var(--green-soft);
}

.menu-item span {
  flex: 0 0 auto;
  font-family: var(--display);
  color: var(--green);
  font-weight: 700;
  font-size: 1.05rem;
}

.phase-two {
  border: none;
  padding: 0;
  background: none;
}

.phase-two-image {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(31, 58, 38, 0.12);
}

.phase-two-note {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 24px 20px;
  text-align: center;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--muted);
}

/* About */
/* Simple-math box sits directly under the compact About headline. Tight top
   spacing keeps it close to the headline (no large gap), centered to match. */
.values-section {
  max-width: 860px;
  padding-top: 4px;
  padding-bottom: 40px;
}

.story-section {
  max-width: 860px;
  padding-top: 8px;
}

.story-copy blockquote {
  margin: 28px 0;
  border-left: 4px solid var(--gold);
  padding: 10px 0 10px 22px;
  color: var(--heading);
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
}

.values-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--green), var(--green-hi));
  padding: 30px;
}

.values-panel ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.values-panel li {
  margin-bottom: 12px;
  padding-left: 26px;
  position: relative;
  color: rgba(234, 243, 236, 0.9);
}

.values-panel li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 800;
}

.values-panel .eyebrow {
  color: var(--gold);
}

.values-panel .values-heading {
  margin: 0 0 22px;
  color: var(--gold-light);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* High-contrast cream on the dark-green box — solid (no low opacity) so the
   equations read clearly on mobile. */
.values-equation {
  margin: 0 0 16px;
  color: #fdfcf7;
  font-family: var(--display);
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  font-weight: 700;
  line-height: 1.45;
}

.values-equation:last-child {
  margin-bottom: 0;
}

.about-bands {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  border-top: 1px solid var(--line);
}

.about-bands article {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-2);
  padding: 30px;
}

.about-bands p {
  color: var(--muted);
}

.brand-art {
  overflow: hidden;
  margin: 34px 0 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.brand-art img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Contact */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.contact-panel,
.contact-form {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-2);
  padding: 28px;
}

.contact-panel p {
  color: var(--muted);
}

.contact-panel a {
  color: var(--green);
  font-weight: 600;
}

.contact-form {
  display: grid;
  gap: 12px;
}

label {
  font-family: var(--display);
  font-weight: 600;
  color: var(--heading);
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgba(244, 197, 66, 0.6);
}

textarea {
  resize: vertical;
}

select {
  font-weight: 600;
}

.contact-form-title {
  margin: 0;
}

.contact-form-note {
  margin: 0 0 4px;
  color: var(--muted);
}

.contact-form .button {
  margin-top: 8px;
}

/* Task #106 — Google Form lead capture */
.contact-inquiry-cta {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.contact-inquiry-cta .button {
  margin-top: 4px;
}

.contact-inquiry-fallback {
  margin: 4px 0 0;
  color: var(--muted);
}

.home-owner-cta {
  max-width: var(--max-width);
  margin: 8px auto 0;
  padding: 26px 24px 10px;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.home-owner-cta-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Compare tool */
.compare-tool {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 24px 74px;
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}

.category-pill {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 9px 16px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.category-pill:hover,
.category-pill.active {
  border-color: transparent;
  background: var(--gold-grad);
  color: var(--heading);
}

.compare-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  box-shadow: 0 18px 50px rgba(31, 58, 38, 0.14);
  padding: 18px;
}

.swap-button {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--green);
  color: var(--gold);
  cursor: pointer;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 800;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "pick-left  pick-right"
    "swap       swap"
    "card-left  card-right";
  column-gap: 24px;
  row-gap: 14px;
  margin-top: 18px;
  align-items: start;
}

.compare-picker {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  box-shadow: 0 18px 50px rgba(31, 58, 38, 0.14);
  padding: 18px;
}

.compare-picker label {
  font-family: var(--display);
  font-weight: 700;
  color: var(--heading);
}

.compare-grid > .compare-picker.is-left {
  grid-area: pick-left;
}

.compare-grid > .compare-picker.is-right {
  grid-area: pick-right;
}

.compare-grid > .swap-button {
  grid-area: swap;
  justify-self: center;
  align-self: center;
}

.compare-grid > [data-item-card="left"] {
  grid-area: card-left;
}

.compare-grid > [data-item-card="right"] {
  grid-area: card-right;
}

.drink-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-2);
  box-shadow: 0 20px 55px rgba(31, 58, 38, 0.14);
}

.drink-card-image {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: center;
  background: #ffffff;
}

.drink-card-body {
  padding: 22px;
}

.drink-card h2 {
  margin-bottom: 16px;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
}

.drink-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.drink-summary div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface);
}

.drink-summary dt {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.drink-summary dd {
  margin: 4px 0 0;
  color: var(--green);
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
}

.best-for {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.best-for span {
  border-radius: 999px;
  background: var(--green);
  color: #eaf3ec;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 600;
}

.order-button {
  width: 100%;
  cursor: pointer;
}

.order-helper {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.nutrition-compare,
.compare-more {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-2);
  padding: 20px;
}

.comparison-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.comparison-heading h2,
.compare-more h2 {
  margin: 0;
  font-size: 1.1rem;
}

.comparison-heading span {
  border-radius: 999px;
  background: var(--green);
  color: var(--gold);
  padding: 7px 12px;
  font-size: 0.8rem;
  font-weight: 700;
}

.nutrition-rows {
  display: grid;
  gap: 8px;
}

.nutrition-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.38fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.nutrition-label {
  color: var(--green);
  font-family: var(--display);
  font-weight: 700;
  text-align: center;
}

.nutrition-side {
  display: grid;
  gap: 6px;
}

.nutrition-side:last-child {
  text-align: right;
}

.nutrition-side strong {
  color: var(--heading);
  font-size: 0.92rem;
}

.nutrition-bar {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(31, 74, 46, 0.10);
}

.nutrition-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold-grad);
}

.compare-more-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.more-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  padding: 10px;
  text-align: left;
  color: var(--text);
  transition: border-color 0.2s ease;
}

.more-item:hover {
  border-color: rgba(244, 197, 66, 0.5);
}

.more-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  background: #ffffff;
}

.more-item span,
.more-item small {
  display: block;
}

.more-item span {
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}

.more-item small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.public-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Footer */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px max(24px, calc((100vw - var(--max-width)) / 2));
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.site-footer p {
  margin: 0;
}

/* Copyright/slogan — always the final, full-width line at the very bottom of
   the footer (after location, social, and footer nav). */
.site-footer-legal {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}

.site-footer-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer nav {
  display: flex;
  gap: 18px;
  font-family: var(--display);
  font-weight: 500;
}

.site-footer nav a:hover {
  color: var(--green);
}

/* Social icons (footer + contact) */
.footer-social,
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--green);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.social-icon:hover,
.social-icon:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(31, 58, 38, 0.22);
}

.social-icon:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.social-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.social-icon.is-disabled {
  cursor: not-allowed;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line);
  opacity: 0.55;
  box-shadow: none;
}

.social-icon.is-disabled:hover,
.social-icon.is-disabled:focus-visible {
  color: var(--muted);
  background: var(--surface);
  border-color: var(--line);
  transform: none;
  box-shadow: none;
  outline: none;
}

/* Filled, brand-colored social chips: glyph = currentColor, chip = brand fill.
   The site is light-themed (white chips on cream), so icons are filled with
   their brand color and use a white glyph (Snapchat uses a dark glyph on
   yellow). Placeholder icons without a URL keep the muted .is-disabled styling
   above (its higher specificity wins over these single-class rules). */
.social-icon--instagram {
  color: #fff;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.social-icon--tiktok { color: #fff; background: #010101; }
.social-icon--x { color: #fff; background: #000000; }
.social-icon--youtube { color: #fff; background: #ff0000; }
.social-icon--facebook { color: #fff; background: #1877f2; }
.social-icon--snapchat { color: #1b1206; background: #fffc00; }
.social-icon--yelp { color: #fff; background: #d32323; }
.social-icon--google-maps { color: #fff; background: #1a73e8; }
.social-icon--venmo { color: #fff; background: #3d95ce; }
.social-icon--mail { color: #fff; background: var(--green); }
.social-icon--paypal { color: #fff; background: #003087; }
.social-icon--cashapp { color: #fff; background: #00d632; }
.social-icon--zelle { color: #fff; background: #6d1ed4; }
.social-icon--pinterest { color: #fff; background: #e60023; }

.contact-social {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.contact-social p {
  margin: 0 0 10px;
  color: var(--heading);
  font-family: var(--display);
  font-weight: 600;
}

.contact-panel .contact-pickup {
  color: var(--text);
}

/* Footer location block (replaces old hours/pickup/phone copy) */
.footer-location {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.footer-location-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-location-logo {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
  margin: 3px 0 2px;
}

.footer-location-address {
  font-size: 0.86rem;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.footer-location-address:hover,
.footer-location-address:focus-visible {
  color: var(--green);
  text-decoration-color: currentColor;
}

/* Ops (internal, not published) */
.ops-app {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 46px 24px 80px;
}

/* Save-protection notices (unsaved-changes + data-conflict prompts). These are
   NOT part of the persistent dashboard layout: they stay hidden (display:none,
   zero footprint) during normal use — including all Live Orders usage — and only
   surface transiently, as compact inline notices at the top of the content area
   right below the module tabs (next to the panel being edited), when a real save
   error or data conflict needs the owner's attention. Never a full-width bar
   above the tabs, never a bottom toast. */
.ops-unsaved-banner,
.ops-freshness-banner {
  max-width: 560px;
  margin: 0 0 18px;
}

/* When flagged hidden they must take zero space. A plain class rule with
   display:flex (below) would otherwise beat the UA `[hidden]` rule and leave the
   empty banner visible on load — the exact clutter this cleanup removes. */
.ops-unsaved-banner[hidden],
.ops-freshness-banner[hidden] {
  display: none !important;
}

.ops-unsaved-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid #c8992b;
  border-left: 6px solid #c8992b;
  border-radius: 14px;
  background: #fff6e0;
  box-shadow: 0 12px 32px rgba(200, 153, 43, 0.22);
}

.ops-unsaved-banner .ops-unsaved-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 240px;
  flex: 1 1 320px;
}

.ops-unsaved-banner strong {
  color: #7a5a10;
  font-family: var(--display);
  font-size: 1rem;
}

.ops-unsaved-banner span {
  color: #6b5a2e;
  font-size: 0.9rem;
  line-height: 1.4;
}

.ops-unsaved-banner .button[disabled] {
  opacity: 0.65;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.ops-freshness-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid #2b7bc8;
  border-left: 6px solid #2b7bc8;
  border-radius: 14px;
  background: #e8f3ff;
  box-shadow: 0 12px 32px rgba(43, 123, 200, 0.18);
}

.ops-freshness-banner .ops-freshness-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 240px;
  flex: 1 1 320px;
}

.ops-freshness-banner strong {
  color: #1a4e7a;
  font-family: var(--display);
  font-size: 1rem;
}

.ops-freshness-banner span {
  color: #2b5c8a;
  font-size: 0.9rem;
  line-height: 1.4;
}

.ops-freshness-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ops-tabs {
  position: sticky;
  top: 83px;
  z-index: 10;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  padding: 12px 0;
  backdrop-filter: blur(14px);
}

.ops-tabs button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 10px 14px;
}

.ops-tabs button.active {
  background: var(--green);
  color: #ffffff;
}

.ops-panel {
  display: none;
  padding-top: 28px;
}

.ops-panel.active {
  display: block;
}

.ops-kpis,
.ops-grid,
.customer-grid {
  display: grid;
  gap: 18px;
}

.ops-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.ops-kpis article,
.ops-card,
.customer-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.ops-kpis article {
  padding: 22px;
}

.ops-kpis span {
  display: block;
  color: var(--green);
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
}

.ops-kpis p,
.ops-card p,
.customer-card p {
  color: var(--muted);
}

.ops-kpis p {
  margin: 8px 0 0;
  font-weight: 700;
}

.ops-grid {
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
}

.ops-card {
  padding: 24px;
  min-width: 0;
}

.ops-panel,
.ops-grid > *,
.ops-table-wrap {
  min-width: 0;
}

.ops-form {
  display: grid;
  gap: 14px;
}

.ops-form label {
  display: grid;
  gap: 6px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-row.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calc-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.section-title-row h2 {
  margin-bottom: 0;
}

.button.small {
  min-height: 38px;
  padding: 8px 14px;
}

/* ---- Live Orders (real-time tablet board, Task #90) ---- */
.live-orders-header {
  flex-wrap: wrap;
}

.live-orders-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.live-orders-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.live-conn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface);
}

.live-conn-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.live-conn-pill[data-state="live"] {
  color: var(--green-hi);
  border-color: rgba(39, 107, 62, 0.35);
  background: var(--green-soft);
}

.live-conn-pill[data-state="live"]::before {
  background: var(--green-hi);
  box-shadow: 0 0 0 0 rgba(39, 107, 62, 0.5);
  animation: livePulse 2s infinite;
}

.live-conn-pill[data-state="reconnecting"] {
  color: var(--gold-deep);
  border-color: rgba(200, 153, 43, 0.4);
  background: rgba(244, 197, 66, 0.12);
}

.live-conn-pill[data-state="reconnecting"]::before {
  background: var(--gold-deep);
}

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(39, 107, 62, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(39, 107, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(39, 107, 62, 0); }
}

.live-new-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.82rem;
  color: #3a2c00;
  background: var(--gold-grad);
}

.button.is-on {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* ── Full-screen "NEW ORDER" overlay (shows from any tab) ──────────────────── */
.live-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(31, 58, 38, 0.82);
  animation: liveAlertFlash 1s steps(1, end) infinite;
}

.live-alert-overlay[hidden] { display: none !important; }

/* The fallback CTA is a .button (display:inline-flex), which beats the UA
   [hidden] rule — force it hidden once sound is unlocked. */
[data-sound-fallback][hidden] { display: none !important; }

.live-alert-overlay__inner {
  width: min(560px, 100%);
  padding: 40px 32px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.live-alert-overlay__eyebrow {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--gold-deep);
}

.live-alert-overlay__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: var(--heading);
}

.live-alert-overlay__detail {
  margin: 14px 0 26px;
  font-size: 1.08rem;
  color: var(--text);
  word-break: break-word;
}

.live-alert-overlay__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.live-alert-overlay__view {
  font-size: 1.05rem;
  padding: 14px 26px;
}

@keyframes liveAlertFlash {
  0%, 100% { background: rgba(31, 58, 38, 0.82); }
  50% { background: rgba(200, 153, 43, 0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .live-alert-overlay { animation: none; background: rgba(31, 58, 38, 0.9); }
}

.live-orders-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.live-lane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.live-lane-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--heading);
}

.live-lane-new .live-lane-title { color: var(--gold-deep); }

.live-lane-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.8rem;
  color: var(--muted);
}

.live-lane-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.live-lane-empty {
  margin: 0;
  padding: 18px 10px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
}

.live-orders-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 14px;
}

.live-order-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--muted);
  border-radius: 14px;
  background: var(--surface);
}

.live-order-card.status-new {
  border-left-color: var(--gold-deep);
  box-shadow: 0 0 0 1px rgba(244, 197, 66, 0.5);
  animation: liveNewPulse 2s ease-in-out infinite;
}

@keyframes liveNewPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(244, 197, 66, 0.45); }
  50% { box-shadow: 0 0 0 3px rgba(244, 197, 66, 0.26); }
}

@media (prefers-reduced-motion: reduce) {
  .live-order-card.status-new { animation: none; }
}

.live-order-new-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: #3a2c00;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  vertical-align: middle;
}

.live-order-card.status-accepted { border-left-color: var(--green); }
.live-order-card.status-preparing { border-left-color: var(--green-hi); }
.live-order-card.status-ready { border-left-color: #1f7a8c; }
.live-order-card.status-completed { border-left-color: var(--muted); opacity: 0.85; }
.live-order-card.status-cancelled { border-left-color: #b23b3b; opacity: 0.7; }

.live-order-card.is-new {
  animation: liveFlash 1.1s ease-out 2;
}

@keyframes liveFlash {
  0% { background: rgba(244, 197, 66, 0.28); }
  100% { background: var(--surface); }
}

.live-order-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.live-order-id {
  font-family: var(--display);
  font-weight: 800;
  color: var(--heading);
}

.live-order-age {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}

.live-order-customer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.live-order-customer strong {
  color: var(--heading);
}

.live-order-contact {
  font-size: 0.85rem;
  color: var(--muted);
}

.live-order-items {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  gap: 4px;
}

.live-order-items li {
  color: var(--text);
  font-size: 0.94rem;
}

.live-order-qty {
  font-weight: 700;
  color: var(--green-hi);
}

.live-order-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.live-order-total {
  font-family: var(--display);
  font-weight: 800;
  color: var(--heading);
  margin-right: auto;
}

.live-order-status-pill,
.live-order-pay {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-2);
}

.live-order-status-pill.status-new { color: var(--gold-deep); }
.live-order-status-pill.status-ready { color: #1f7a8c; }
.live-order-status-pill.status-completed { color: var(--green-hi); }
.live-order-status-pill.status-cancelled { color: #b23b3b; }

.live-order-pay.pay-paid { color: var(--green-hi); }
.live-order-pay.pay-refunded { color: #b23b3b; }

.live-order-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--green-soft);
  color: var(--text);
  font-size: 0.9rem;
}

.live-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.live-action-btn {
  flex: 1 1 auto;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.live-action-accepted {
  border-color: var(--green-hi);
  background: var(--green-soft);
  color: var(--green-hi);
  font-weight: 700;
}

.live-action-completed {
  border-color: var(--green-hi);
  color: var(--green-hi);
  font-weight: 700;
}

.live-action-cancelled {
  border-color: rgba(178, 59, 59, 0.55);
  color: #b23b3b;
}

.button.ghost.is-on {
  border-color: var(--green-hi);
  color: var(--green-hi);
  background: var(--green-soft);
}

@media (max-width: 900px) {
  .live-orders-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Sales / operations dashboard (Phase 2A) ---- */
.button.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}

.button.ghost.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.button.ghost.danger {
  border-color: rgba(176, 43, 43, 0.5);
  color: #b02b2b;
}

.sales-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sales-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 0 0 16px;
}

.sales-custom label {
  display: grid;
  gap: 6px;
}

.sales-range-label {
  color: var(--muted);
  font-weight: 600;
  align-self: center;
}

.sales-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.sales-summary div {
  background: rgba(31, 74, 46, 0.05);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.sales-summary span {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--green);
}

.sales-summary p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.sales-status {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  min-height: 1.1em;
}

.sales-status.is-error,
.sales-order-status.is-error {
  color: #b02b2b;
}

.sales-order-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  min-height: 1.1em;
}

.sales-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(31, 74, 46, 0.1);
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: capitalize;
}

.sales-test-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(176, 43, 43, 0.12);
  color: #b02b2b;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.orders-table td {
  vertical-align: top;
}

.order-status-select {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(31, 74, 46, 0.25);
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
}

.order-status-select:disabled {
  opacity: 0.6;
}

.ops-empty-row td {
  color: var(--muted);
  text-align: center;
  font-style: italic;
}

.sales-empty-lines {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
}

.checkbox-label input {
  width: auto;
}

.ops-table-wrap {
  overflow-x: auto;
}

.ops-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.ops-table th,
.ops-table td {
  border-top: 1px solid var(--line);
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

.ops-table th {
  color: var(--green);
}

.ops-table button,
.recipe-line button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  margin: 2px;
  padding: 7px 9px;
}

.ops-table button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ops-table button.ops-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--accent, #2f7d54);
  text-decoration: underline;
  font-weight: 700;
}

/* Drag-and-drop reordering affordances for the Menu Items table. */
.ops-table tr[draggable="true"] {
  cursor: grab;
}

.ops-table tr[draggable="true"].dragging {
  opacity: 0.5;
  cursor: grabbing;
  /* Prevent the dragging row from intercepting elementFromPoint() hit-tests so
     the drop-target detection always finds the row *under* the finger, not the
     semi-transparent dragging row itself. Especially important on iOS Safari. */
  pointer-events: none;
}

.ops-table .drag-handle {
  display: inline-block;
  margin-right: 8px;
  color: var(--muted, #7a8a80);
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  /* Bigger, comfortable touch target and prevent the browser from scrolling
     the page when a drag starts on the handle (touch/pen input). */
  padding: 4px 6px;
  margin-left: -6px;
  touch-action: none;
}

.ops-table tr.drag-over-before td {
  box-shadow: inset 0 2px 0 0 var(--green, #2f7d54);
}

.ops-table tr.drag-over-after td {
  box-shadow: inset 0 -2px 0 0 var(--green, #2f7d54);
}

/* Category group header rows double as drop targets for moving an item into a
   different category. */
.ops-table tr.menu-cat-header td {
  background: var(--surface-2, #f2f6f3);
  border-top: 2px solid var(--line, #e2e8e4);
  font-size: 0.9em;
}

.ops-table tr.menu-cat-header .menu-cat-header-label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green, #2f7d54);
}

.ops-table tr.menu-cat-header.drag-over-group td {
  background: color-mix(in srgb, var(--green, #2f7d54) 16%, transparent);
  box-shadow: inset 0 0 0 2px var(--green, #2f7d54);
}

.recipe-lines {
  display: grid;
  gap: 10px;
}

.recipe-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 70px auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface);
}

.recipe-line span {
  color: var(--green);
  font-weight: 700;
  padding-bottom: 10px;
}

.calc-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.calc-preview div,
.customer-card dl div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px;
}

.calc-preview span,
.customer-card dt {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.calc-preview strong,
.customer-card dd {
  display: block;
  margin: 4px 0 0;
  color: var(--green);
  font-weight: 700;
}

.customer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.customer-card {
  padding: 22px;
}

.customer-card h3 {
  font-size: 1.35rem;
}

.customer-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}

.customer-card dd {
  margin-left: 0;
}

.compare-controls.internal {
  margin-top: 18px;
}

/* Responsive */
@media (max-width: 820px) {
  .site-header {
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(18px);
  }

  .site-nav.is-open {
    display: grid;
    gap: 4px;
  }

  .site-nav a {
    border-radius: 12px;
    padding: 12px;
  }

  .board-products,
  .home-stats,
  .story-section,
  .about-bands,
  .ops-grid,
  .ops-kpis,
  .customer-grid,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .board-product.featured {
    margin-top: 0;
  }

  .compare-controls,
  .recipe-line {
    grid-template-columns: 1fr;
  }

  .swap-button {
    justify-self: center;
  }

  /* Keep the two compared item cards AND the nutrition chart side-by-side on
     mobile — never stack them vertically. Cards stay 2-up with tighter spacing
     and smaller type; the nutrition rows keep their left-value / center-label /
     right-value columns. If a very narrow phone still can't fit the chart, the
     comparison area scrolls horizontally instead of collapsing to one column. */
  .compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .drink-card-body {
    padding: 14px;
  }

  .drink-card h2 {
    font-size: clamp(1.05rem, 4.4vw, 1.4rem);
    margin-bottom: 12px;
  }

  .drink-summary {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }

  .best-for span {
    font-size: 0.72rem;
    padding: 5px 9px;
  }

  .nutrition-compare {
    overflow-x: auto;
  }

  .nutrition-rows {
    min-width: 320px;
  }

  .nutrition-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
  }

  .nutrition-label {
    font-size: 0.82rem;
  }

  .nutrition-side strong {
    font-size: 0.82rem;
  }

  .recipe-line span {
    padding-bottom: 0;
  }

  .menu-jump {
    grid-template-columns: 1fr;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .qty-btn {
    width: 44px;
    height: 44px;
  }

  .cart-sticky {
    left: 16px;
    right: 16px;
    bottom: 16px;
    justify-content: center;
  }

  .brand-name {
    font-size: 1rem;
  }

  .brand-tagline {
    font-size: 0.6rem;
  }

  .home-hero {
    padding-top: 44px;
  }

  .page-hero h1 {
    font-size: clamp(2.3rem, 12vw, 3.2rem);
  }

  .section,
  .page-hero,
  .menu-layout,
  .menu-board,
  .home-stats,
  .compare-tool,
  .ops-app,
  .contact-layout {
    padding-left: 18px;
    padding-right: 18px;
  }

  .board-inner {
    padding: 24px 18px 36px;
  }

  .menu-item {
    grid-template-columns: 1fr;
  }

  .menu-item-photo {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .form-row,
  .form-row.three,
  .calc-preview,
  .customer-card dl {
    grid-template-columns: 1fr;
  }

  .ops-tabs {
    top: 73px;
  }
}

/* Cart button + badge (header) */
.cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.cart-toggle:hover {
  border-color: rgba(244, 197, 66, 0.5);
  color: var(--green);
}

.cart-toggle svg {
  width: 20px;
  height: 20px;
}

.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cart-toggle.has-items .cart-count {
  background: var(--gold-grad);
  color: var(--heading);
  border-color: transparent;
}

/* Quantity stepper (shared by item modal + cart) */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--surface);
}

.qty-stepper.small {
  padding: 4px 8px;
  gap: 8px;
}

.qty-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--heading);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.qty-btn:hover {
  border-color: rgba(244, 197, 66, 0.5);
  color: var(--green);
}

.qty-value {
  min-width: 20px;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
}

/* Item detail modal */
.item-modal-overlay,
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 6, 0.72);
  backdrop-filter: blur(4px);
  padding: 20px;
}

.item-modal-overlay.is-open,
.cart-drawer-overlay.is-open {
  display: flex;
}

.cart-drawer-overlay {
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}

body.modal-open {
  overflow: hidden;
}

.item-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.item-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--heading);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.item-modal-media {
  background: #ffffff;
}

.item-modal-image {
  width: 100%;
  height: 300px;
  object-fit: contain;
  object-position: center;
  background: #ffffff;
}

.item-modal-body {
  padding: 26px 28px 30px;
}

.item-modal-category {
  margin-bottom: 6px;
}

.item-modal-name {
  margin-bottom: 6px;
  font-size: 1.7rem;
}

.item-modal-price {
  margin: 0 0 12px;
  color: var(--green);
  font-family: var(--display);
  font-weight: 700;
}

.item-modal-description {
  color: var(--muted);
  margin-bottom: 6px;
}

.item-modal-sugar-note {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}

.item-modal-section {
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
  margin-top: 16px;
}

.item-modal-section h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green);
}

.item-modal-serving {
  color: var(--muted);
  margin-bottom: 10px;
}

.item-modal-nutrition {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The collapsible "Read More" list reuses .item-modal-nutrition (display:grid).
   That author rule out-ranks the user-agent `[hidden]` rule, so without this
   guard the extra nutrition facts would keep painting while collapsed. Force
   the hidden state to win for the nutrition list and its toggle so the modal
   truly shows only Protein / Calories / Dietary Fiber before "Read More". */
.item-modal-nutrition[hidden],
.item-modal-nutrition-more[hidden],
.item-modal-nutrition-toggle[hidden] {
  display: none !important;
}

.item-modal-nutrition li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
}

.item-modal-nutrition li span {
  color: var(--muted);
  font-size: 0.75rem;
}

.item-modal-nutrition li strong {
  font-family: var(--display);
  color: var(--heading);
}

.item-modal-nutrition-more {
  margin-top: 10px;
}

.item-modal-nutrition-toggle {
  margin-top: 12px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.item-modal-nutrition-toggle:hover {
  border-color: var(--green);
  background: var(--surface);
}

.item-modal-nutrition-more {
  margin-top: 10px;
}

.item-modal-nutrition-toggle {
  margin-top: 12px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--gold-2);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.item-modal-nutrition-toggle:hover {
  border-color: var(--gold-2);
  background: var(--surface);
}

.item-modal-allergens {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--heading);
}

.item-modal-disclaimer {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.item-modal-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}

.item-modal-add {
  width: 100%;
  margin-top: 16px;
}

.item-modal-confirm {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--green);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Cart drawer */
.cart-drawer {
  width: min(420px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line-soft);
}

.cart-drawer-close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--heading);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.cart-drawer-lines {
  flex: 1;
  overflow-y: auto;
  padding: 12px 22px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.cart-drawer-empty {
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
}

.cart-line,
.checkout-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
}

.cart-line-image {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: #ffffff;
  object-fit: cover;
  object-position: center;
}

.cart-line-info {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.cart-line-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  color: var(--heading);
}

.cart-line-price {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.cart-line-end {
  display: grid;
  gap: 8px;
  justify-items: end;
  text-align: right;
}

.cart-line-total {
  font-family: var(--display);
  font-weight: 700;
  color: var(--green);
}

.cart-line-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 6px 8px;
  min-height: 32px;
  border-radius: 8px;
}

.cart-line-remove:hover {
  color: var(--green);
}

/* Mobile override placed after the base .cart-line-remove rule so it wins the
   cascade (same specificity, later in source) and stays a 44px tap target. */
@media (max-width: 520px) {
  .cart-line-remove {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 12px;
  }
}

.cart-drawer-summary {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 8px;
}

.cart-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
}

.cart-summary-row.cart-summary-total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  color: var(--heading);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}

.cart-drawer-actions {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.cart-drawer-actions .button {
  width: 100%;
}

/* Checkout page */
.checkout-layout {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 24px 74px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 28px;
  align-items: start;
}

.checkout-lines-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-2);
  padding: 24px;
}

.checkout-lines {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.checkout-empty {
  display: grid;
  gap: 14px;
  justify-items: start;
  color: var(--muted);
  margin-top: 16px;
}

.checkout-side {
  display: grid;
  gap: 20px;
}

.checkout-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-2);
  padding: 24px;
}

.checkout-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.checkout-pickup-note {
  margin: 4px 0 0;
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 600;
}

.checkout-summary {
  display: grid;
  gap: 10px;
}

.checkout-submit {
  width: 100%;
  margin-top: 10px;
}

.checkout-disclaimer {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Inquiry launch mode notice shown on checkout.html while public ordering is
   disabled (see assets/js/checkout.js). */
.checkout-launch {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 24px 74px;
}

.checkout-launch-notice {
  grid-column: 1 / -1;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.checkout-launch-notice p {
  color: var(--muted);
}

.checkout-launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

/* Payment method selector */
.payment-methods-group {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.payment-methods-group h3 {
  margin: 0 0 2px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.payment-method-option {
  position: relative;
  display: grid;
  grid-template-columns: auto 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.payment-method-option:hover {
  border-color: var(--green);
}

.payment-method-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  margin: 0;
}

.payment-method-option .payment-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--green);
}

.payment-method-option .payment-method-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.payment-method-option .payment-method-label {
  font-family: var(--display);
  font-weight: 700;
  color: var(--heading);
  font-size: 0.94rem;
}

.payment-method-option .payment-method-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.payment-method-option.is-selected {
  border-color: var(--green);
  background: var(--surface-2);
  box-shadow: 0 0 0 2px rgba(31, 74, 46, 0.15);
}

.payment-method-badge {
  justify-self: end;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.payment-method-badge.badge-test {
  background: rgba(244, 197, 66, 0.18);
  color: #8a6b0a;
  border: 1px solid rgba(244, 197, 66, 0.5);
}

.payment-method-badge.badge-ready {
  background: rgba(31, 74, 46, 0.12);
  color: var(--green);
  border: 1px solid rgba(31, 74, 46, 0.3);
}

.payment-method-note {
  margin: 2px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.8rem;
}

.payment-method-note.is-warning {
  background: rgba(244, 197, 66, 0.14);
  border-color: rgba(244, 197, 66, 0.4);
  color: #6b5108;
}

/* Pending-payment confirmation panel (shown after a manual method is chosen) */
.checkout-pending {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-2);
  padding: 28px;
  display: grid;
  gap: 12px;
}

.checkout-pending h2 {
  margin: 0;
}

.checkout-pending-badge {
  justify-self: start;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(244, 197, 66, 0.2);
  color: #6b5108;
  border: 1px solid rgba(244, 197, 66, 0.5);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.checkout-pending-instructions {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  color: var(--body);
}

.checkout-pending-qr {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  margin: 16px auto 0;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
}

.checkout-pending-disclaimer {
  margin: 0;
  font-weight: 700;
  color: var(--green);
}

.checkout-pending-order-id {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 860px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .payment-method-option {
    grid-template-columns: auto 30px 1fr;
  }

  .payment-method-badge {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 4px;
  }
}

@media (max-width: 640px) {
  .item-modal-nutrition {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cart-line,
  .checkout-line {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .cart-line-end {
    grid-column: 1 / -1;
    justify-items: start;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/* ---- Menu image upload UI ---- */
.ops-image-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.ops-upload-btn {
  cursor: pointer;
  white-space: nowrap;
}
.ops-upload-btn.disabled {
  opacity: 0.55;
  pointer-events: none;
}
.ops-upload-status {
  font-size: 0.83rem;
  opacity: 0.75;
}

/* ---- Menu Intelligence tab ---- */
.mi-subtitle {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}
.mi-hint {
  margin-top: 14px;
  font-size: 0.82rem;
  opacity: 0.65;
}
.mi-status {
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--color-error, #c0392b);
}
.mi-notice {
  margin: 10px 0 4px;
  padding: 10px 14px;
  background: #fff8e1;
  border-left: 4px solid #f5a623;
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.mi-notice-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary, #2c6e49);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.mi-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}
.mi-table {
  min-width: 1100px;
  font-size: 0.83rem;
}
.mi-table th {
  white-space: nowrap;
}
.mi-table td {
  vertical-align: middle;
  padding: 8px 10px;
}
.mi-recipe-select {
  font-size: 0.82rem;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.2);
  max-width: 160px;
}
.mi-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.mi-badge--on     { background: #d4edda; color: #155724; }
.mi-badge--off    { background: #e2e3e5; color: #383d41; }
.mi-badge--sold   { background: #fff3cd; color: #856404; }
.mi-badge--unavail{ background: #f8d7da; color: #721c24; }
.mi-good { color: #155724; font-weight: 600; }
.mi-warn { color: #856404; font-weight: 600; }
.mi-low  { color: #721c24; font-weight: 600; }

/* Floating sticky cart / checkout button */
.cart-sticky {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  min-height: 52px;
  border: none;
  border-radius: 999px;
  background: var(--green);
  color: #ffffff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(31, 58, 38, 0.34);
  transition: transform 0.15s ease, background 0.2s ease;
}

.cart-sticky.is-visible {
  display: inline-flex;
}

.cart-sticky:hover {
  background: #163a24;
  transform: translateY(-2px);
}

.cart-sticky svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.cart-sticky-label {
  display: inline-flex;
  gap: 4px;
}

.cart-sticky-total {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--gold-light);
}

/* Never let the sticky cart cover an open modal / drawer. */
body.modal-open .cart-sticky {
  display: none;
}

/* Added-to-order confirmation dialog */
.add-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 6, 0.72);
  backdrop-filter: blur(4px);
  padding: 20px;
}

.add-confirm-overlay.is-open {
  display: flex;
}

.add-confirm {
  position: relative;
  width: min(400px, 100%);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 30px 26px 26px;
  text-align: center;
}

.add-confirm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--heading);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.add-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
}

.add-confirm-icon svg {
  width: 28px;
  height: 28px;
}

.add-confirm h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.add-confirm-item {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 700;
  color: var(--heading);
}

.add-confirm-summary {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

.add-confirm-actions {
  display: grid;
  gap: 10px;
}

.add-confirm-actions .button {
  width: 100%;
}