/* ============================================================
   YORKES COFFEE — Main Stylesheet
   Modern, Bold, Warm, Sleek
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --cream:    #FAF6F0;
  --warm-off: #F2EBE0;
  --brown:    #2C1810;
  --espresso: #1A0F0A;
  --amber:    #C8813A;
  --amber-lt: #E89A4A;
  --amber-dk: #A66220;
  --gold:     #D4A853;
  --charcoal: #3D2B1F;
  --muted:    #7A6558;
  --white:    #FFFFFF;
  --success:  #2D7D46;
  --error:    #B83232;
  --border:   rgba(44, 24, 16, 0.12);
  --shadow:   0 4px 24px rgba(44, 24, 16, 0.10);
  --shadow-lg:0 12px 48px rgba(44, 24, 16, 0.18);
  --radius:   14px;
  --radius-sm:8px;
  --font-head:'Playfair Display', Georgia, serif;
  --font-body:'DM Sans', -apple-system, sans-serif;
  --transition: 0.22s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--brown);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-body); }
input, textarea, select {
  font-family: var(--font-body);
  font-size: 1rem;
}
img { max-width: 100%; }

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 240, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.logo-mark {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(200,129,58,0.3));
}
.logo-name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--brown);
  letter-spacing: -0.5px;
}
.logo-sub {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--amber);
  line-height: 1;
  margin-top: 1px;
}
.nav-links {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.nav-link {
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.nav-link:hover { color: var(--brown); background: var(--warm-off); }
.cart-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--brown);
  color: var(--cream);
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  position: relative;
  transition: var(--transition);
  flex-shrink: 0;
}
.cart-btn:hover { background: var(--espresso); transform: translateY(-1px); }
.cart-badge {
  background: var(--amber);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 32px 60px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--amber);
  color: white;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 24px;
  letter-spacing: 0.3px;
}
.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--brown);
  margin-bottom: 20px;
  letter-spacing: -1px;
}
.hero-title em {
  font-style: italic;
  color: var(--amber);
}
.hero-sub {
  font-size: 1.15rem;
  color: var(--muted);
  margin-bottom: 36px;
  max-width: 420px;
  font-weight: 300;
}
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-cup {
  font-size: 8rem;
  position: relative;
  line-height: 1;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 20px 40px rgba(200,129,58,0.25));
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.steam {
  position: absolute;
  width: 4px;
  background: linear-gradient(to top, var(--amber), transparent);
  border-radius: 4px;
  animation: rise 2s ease-in-out infinite;
  opacity: 0.6;
}
.s1 { height: 30px; left: 30%; top: -28px; animation-delay: 0s; }
.s2 { height: 40px; left: 50%; top: -38px; animation-delay: 0.4s; }
.s3 { height: 24px; left: 70%; top: -22px; animation-delay: 0.8s; }
@keyframes rise {
  0% { opacity: 0; transform: translateY(10px) scaleX(0.8); }
  50% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-20px) scaleX(1.2); }
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  letter-spacing: 0.2px;
}
.btn-primary {
  background: var(--amber);
  color: white;
}
.btn-primary:hover {
  background: var(--amber-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200, 129, 58, 0.35);
}
.btn-ghost {
  background: transparent;
  color: var(--brown);
  border: 2px solid var(--border);
}
.btn-ghost:hover {
  background: var(--warm-off);
  border-color: var(--amber);
  color: var(--amber);
}
.btn-full { width: 100%; }

/* ── Sections ───────────────────────────────────────────────── */
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 32px;
}
.section-header {
  margin-bottom: 40px;
}
.section-title {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--brown);
  margin-bottom: 8px;
}
.section-sub {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 300;
}

/* ── Featured Grid ──────────────────────────────────────────── */
.featured-section { background: var(--warm-off); border-radius: 24px; margin: 0 32px; }
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.featured-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.featured-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
}
.featured-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.featured-card:hover::before { transform: scaleX(1); }
.featured-emoji { font-size: 2.5rem; line-height: 1; }
.featured-info h3 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 4px;
}
.featured-info p {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.5;
}
.featured-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.price {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--amber);
}
.prep-time {
  font-size: 0.8rem;
  color: var(--muted);
}
.quick-add {
  background: var(--brown);
  color: white;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: auto;
  transition: var(--transition);
  align-self: flex-start;
}
.quick-add:hover { background: var(--amber); }

/* ── Category Tabs ──────────────────────────────────────────── */
.category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.cat-tab {
  padding: 10px 18px;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--white);
  border: 1.5px solid var(--border);
  transition: var(--transition);
}
.cat-tab:hover, .cat-tab.active {
  background: var(--brown);
  color: var(--cream);
  border-color: var(--brown);
}

/* ── Menu Grid ──────────────────────────────────────────────── */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.menu-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.menu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--amber);
}
.menu-card-emoji {
  font-size: 3rem;
  padding: 28px 24px 16px;
  background: var(--warm-off);
  line-height: 1;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.menu-card-body {
  padding: 20px 20px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.menu-card-name {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 6px;
}
.menu-card-desc {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.5;
  flex: 1;
  margin-bottom: 12px;
}
.menu-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tag {
  font-size: 0.75rem;
  background: var(--warm-off);
  padding: 3px 10px;
  border-radius: 50px;
  color: var(--muted);
  font-weight: 500;
}
.add-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--amber);
  color: white;
  font-size: 1.3rem;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(200,129,58,0.3);
  flex-shrink: 0;
}
.add-btn:hover { background: var(--amber-dk); transform: scale(1.12); }

/* Move add button into footer row */
.menu-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 15, 10, 0.7);
  backdrop-filter: blur(4px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--white);
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.28s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--warm-off);
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 5;
}
.modal-close:hover { background: var(--brown); color: white; }
.modal-loading { padding: 60px; text-align: center; color: var(--muted); }

/* ── Modal Inner Content (injected by JS) ───────────────────── */
.modal-item-header {
  background: var(--warm-off);
  padding: 40px 32px 28px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.modal-item-emoji { font-size: 4rem; margin-bottom: 16px; }
.modal-item-name {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brown);
  margin-bottom: 8px;
}
.modal-item-desc {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 300;
}
.modal-item-body { padding: 24px 32px 32px; }
.modal-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 24px;
}
.option-group { margin-bottom: 20px; }
.option-group-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 10px;
}
.option-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.option-pill {
  padding: 8px 16px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brown);
  cursor: pointer;
  transition: var(--transition);
  background: var(--white);
}
.option-pill:hover { border-color: var(--amber); color: var(--amber); }
.option-pill.selected {
  background: var(--brown);
  border-color: var(--brown);
  color: white;
}
.option-pill .pill-modifier {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-left: 4px;
}
.modal-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.qty-control {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  overflow: hidden;
}
.qty-btn {
  width: 42px;
  height: 42px;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  background: transparent;
}
.qty-btn:hover { background: var(--warm-off); }
.qty-value {
  width: 44px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  line-height: 42px;
}
.modal-notes {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.9rem;
  resize: none;
  margin-top: 16px;
  color: var(--brown);
  background: var(--white);
  transition: var(--transition);
}
.modal-notes:focus { outline: none; border-color: var(--amber); }
.modal-add-btn {
  width: 100%;
  margin-top: 20px;
  padding: 16px;
  background: var(--amber);
  color: white;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  transition: var(--transition);
  letter-spacing: 0.3px;
}
.modal-add-btn:hover {
  background: var(--amber-dk);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(200,129,58,0.35);
}

/* ── Cart Page ──────────────────────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}
.container-narrow { max-width: 700px; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.page-section { padding: 48px 0 80px; }
.page-header { margin-bottom: 40px; }
.page-title {
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--brown);
  margin-top: 12px;
}
.back-link {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
  transition: var(--transition);
}
.back-link:hover { color: var(--amber); }
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  align-items: start;
}
.cart-items { display: flex; flex-direction: column; gap: 16px; }
.cart-item {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--border);
  transition: var(--transition);
}
.cart-item:hover { box-shadow: var(--shadow); }
.cart-item-emoji { font-size: 2.2rem; flex-shrink: 0; }
.cart-item-info { flex: 1; }
.cart-item-info h4 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.cart-item-options, .cart-item-notes {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 2px;
}
.cart-item-price { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
.cart-item-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.cart-line-total {
  font-weight: 700;
  font-size: 1rem;
  color: var(--brown);
}
.remove-btn {
  font-size: 1rem;
  opacity: 0.4;
  transition: var(--transition);
}
.remove-btn:hover { opacity: 1; }
.order-summary {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--border);
  position: sticky;
  top: 90px;
}
.summary-title {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--brown);
}
.summary-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--muted);
}
.summary-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}
.summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.total-amount { color: var(--amber); font-size: 1.3rem; }
.summary-note {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--warm-off);
  border-radius: var(--radius-sm);
}

/* ── Checkout Page ──────────────────────────────────────────── */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}
.checkout-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.checkout-card-title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--brown);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-full { grid-column: 1 / -1; }
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.95rem;
  color: var(--brown);
  background: var(--cream);
  transition: var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--amber);
  background: white;
}
.payment-options { display: flex; flex-direction: column; gap: 12px; }
.payment-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.payment-option input[type=radio] { display: none; }
.payment-option:hover { border-color: var(--amber); background: var(--cream); }
.payment-option.selected { border-color: var(--amber); background: #FFF8F0; }
.payment-option-icon { font-size: 1.5rem; flex-shrink: 0; }
.payment-option-info { flex: 1; }
.payment-option-info strong { display: block; font-size: 0.95rem; margin-bottom: 2px; }
.payment-option-info span { font-size: 0.82rem; color: var(--muted); }
.payment-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--amber);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0;
  transition: var(--transition);
}
.payment-option.selected .payment-check { opacity: 1; }
.payment-detail { margin-top: 16px; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.eft-box, .qr-box {
  background: var(--warm-off);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.eft-box h4, .qr-box h4 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  margin-bottom: 14px;
  color: var(--brown);
}
.eft-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.eft-line:last-of-type { border-bottom: none; }
.ref-highlight {
  color: var(--amber);
  font-size: 1rem;
}
.eft-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.5;
}
.qr-code-display { display: flex; justify-content: center; margin-top: 12px; }
.qr-placeholder { text-align: center; }
.qr-inner {
  display: inline-block;
  padding: 16px;
  background: white;
  border-radius: 12px;
  border: 2px solid var(--border);
}
.qr-caption { font-size: 0.85rem; font-weight: 600; margin-top: 10px; color: var(--brown); }
.qr-note { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.sticky-card { position: sticky; top: 90px; }
.checkout-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.checkout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.checkout-item-emoji { font-size: 1.3rem; flex-shrink: 0; }
.checkout-item-details { flex: 1; }
.checkout-item-details small { display: block; font-size: 0.78rem; color: var(--muted); }
.checkout-item-price { font-weight: 600; color: var(--brown); flex-shrink: 0; }
.checkout-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
.checkout-total-final { color: var(--brown); font-size: 1.05rem; }
.prep-info {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  padding: 12px;
  background: var(--warm-off);
  border-radius: var(--radius-sm);
  margin: 16px 0;
}
.checkout-secure {
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 12px;
}

/* ── Confirmation ───────────────────────────────────────────── */
.confirmation-card {
  background: var(--white);
  border-radius: 24px;
  padding: 48px;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-top: 20px;
}
.conf-emoji { font-size: 4rem; display: block; margin-bottom: 16px; }
.confirmation-title {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--brown);
  margin-bottom: 20px;
}
.confirmation-order-number {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  background: var(--warm-off);
  padding: 16px 32px;
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.confirmation-order-number span { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.confirmation-order-number strong { font-size: 1.8rem; font-family: var(--font-head); color: var(--amber); }
.confirmation-message { color: var(--muted); margin-bottom: 28px; font-size: 1rem; }
.conf-payment-reminder {
  background: var(--warm-off);
  border-radius: var(--radius);
  padding: 24px;
  text-align: left;
  margin: 0 auto 28px;
  max-width: 400px;
}
.conf-payment-reminder h4 { margin-bottom: 12px; font-family: var(--font-head); }
.conf-items {
  text-align: left;
  background: var(--warm-off);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 0 auto 28px;
  max-width: 400px;
}
.conf-items h4 { margin-bottom: 12px; font-family: var(--font-head); font-size: 1rem; }
.conf-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.conf-item small { display: block; font-size: 0.78rem; color: var(--muted); }
.conf-total { margin-top: 12px; font-size: 1rem; color: var(--amber); }
.confirmation-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Status Tracker ─────────────────────────────────────────── */
.status-tracker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 28px auto;
  max-width: 500px;
}
.status-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.step-dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--warm-off);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: var(--muted);
  transition: var(--transition);
}
.status-step.done .step-dot {
  background: var(--amber);
  border-color: var(--amber);
  color: white;
}
.step-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; }
.status-step.done .step-label { color: var(--amber); }
.status-line { flex: 1; height: 2px; background: var(--border); margin: 0 -4px; margin-bottom: 20px; }

/* ── Admin ──────────────────────────────────────────────────── */
.admin-section { padding: 40px 0 80px; }
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.admin-actions { display: flex; gap: 12px; }
.stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 24px;
  border: 1px solid var(--border);
  text-align: center;
}
.stat-card.highlight { background: var(--amber); border-color: var(--amber); }
.stat-card.highlight .stat-number,
.stat-card.highlight .stat-label { color: white; }
.stat-number {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 900;
  color: var(--brown);
  line-height: 1;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.orders-table-wrap {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: auto;
}
.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.orders-table th {
  padding: 14px 16px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--warm-off);
}
.orders-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.orders-table tbody tr:last-child td { border-bottom: none; }
.orders-table td small { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.order-number-cell strong { font-family: var(--font-head); font-size: 0.95rem; }
.order-row.status-new { border-left: 3px solid var(--amber); }
.order-row.status-preparing { border-left: 3px solid #3B82F6; }
.order-row.status-ready { border-left: 3px solid var(--success); }
.order-row.status-delivered { border-left: 3px solid var(--muted); opacity: 0.65; }
.notes-row td {
  background: #FFFBF5;
  padding: 8px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.order-note { font-size: 0.82rem; color: var(--muted); }
.item-count-badge {
  background: var(--warm-off);
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.payment-badge {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--warm-off);
}
.payment-status-badge, .pstatus-paid { font-size: 0.75rem; color: var(--success); font-weight: 600; }
.pstatus-pending { color: var(--amber); }
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: capitalize;
}
.ostatus-new { background: #FEF3C7; color: #92400E; }
.ostatus-preparing { background: #DBEAFE; color: #1E40AF; }
.ostatus-ready { background: #D1FAE5; color: #065F46; }
.ostatus-delivered { background: var(--warm-off); color: var(--muted); }
.status-select {
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: 6px 12px;
  font-size: 0.82rem;
  color: var(--brown);
  background: var(--cream);
  cursor: pointer;
  transition: var(--transition);
}
.status-select:focus { outline: none; border-color: var(--amber); }
.actions-cell { white-space: nowrap; }
.btn-tiny {
  font-size: 0.72rem;
  padding: 3px 8px;
  background: var(--amber);
  color: white;
  border-radius: 50px;
  font-weight: 600;
  margin-top: 4px;
  display: inline-block;
  transition: var(--transition);
}
.btn-tiny:hover { background: var(--amber-dk); }

/* ── Toast / Notifications ──────────────────────────────────── */
.toast-notify {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--brown);
  color: var(--cream);
  padding: 14px 24px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 999;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.toast-notify.show {
  transform: translateY(0);
  opacity: 1;
}
.toast {
  background: var(--success);
  color: white;
  padding: 14px 24px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}
.toast-error { background: var(--error); }
.db-error-banner {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
  padding: 16px 24px;
  margin: 0 32px 24px;
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.db-error-banner code {
  background: #FEE2E2;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
}
.empty-cart {
  text-align: center;
  padding: 80px 20px;
}
.empty-cart-icon { font-size: 4rem; margin-bottom: 20px; }
.empty-cart h2 {
  font-family: var(--font-head);
  font-size: 1.8rem;
  margin-bottom: 12px;
}
.empty-cart p { color: var(--muted); margin-bottom: 28px; }
.empty-menu { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--muted); }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--espresso);
  color: var(--cream);
  margin-top: 80px;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-brand .footer-logo {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 800;
  display: block;
  margin-bottom: 8px;
}
.footer-brand p {
  font-size: 0.85rem;
  opacity: 0.5;
}
.footer-links {
  display: flex;
  gap: 24px;
  font-size: 0.9rem;
  opacity: 0.6;
}
.footer-links a:hover { opacity: 1; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: repeat(3, 1fr); }
  .featured-section { margin: 0 16px; }
}
@media (max-width: 600px) {
  .header-inner { padding: 0 16px; gap: 12px; }
  .hero { padding: 40px 16px 40px; }
  .section { padding: 40px 16px; }
  .featured-section { margin: 0 8px; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cart-layout, .checkout-layout { padding: 0 16px; }
  .container, .container-wide { padding: 0 16px; }
  .footer-inner { flex-direction: column; gap: 24px; text-align: center; }
}

/* ── User Menu (header dropdown) ───────────────────────────── */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.nav-admin {
  color: var(--amber) !important;
  font-weight: 600 !important;
}

.user-menu-wrap {
  position: relative;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 50px;
  background: var(--warm-off);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-body);
}

.user-menu-btn:hover {
  border-color: var(--amber);
  background: white;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--amber);
  color: white;
  font-weight: 800;
  font-family: var(--font-head);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-name-short {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brown);
}

.user-chevron {
  font-size: 0.65rem;
  color: var(--muted);
  transition: transform 0.2s;
}

.user-menu-wrap.open .user-chevron {
  transform: rotate(180deg);
}

.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  z-index: 200;
  overflow: hidden;
  animation: dropIn 0.2s cubic-bezier(.4,0,.2,1);
}

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

.user-menu-wrap.open .user-dropdown {
  display: block;
}

.user-dropdown-header {
  padding: 16px 18px;
  background: var(--warm-off);
  border-bottom: 1px solid var(--border);
}

.user-dropdown-header strong {
  display: block;
  font-size: 0.95rem;
  color: var(--brown);
  margin-bottom: 2px;
}

.user-dropdown-header span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
}

.user-dropdown-item {
  display: block;
  padding: 12px 18px;
  font-size: 0.88rem;
  color: var(--brown);
  font-weight: 500;
  transition: var(--transition);
  text-decoration: none;
}

.user-dropdown-item:hover {
  background: var(--warm-off);
  color: var(--amber);
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.user-dropdown-logout {
  color: #B83232;
}

.user-dropdown-logout:hover {
  background: #FEF2F2;
  color: #991B1B;
}

/* ── Real Food Images ───────────────────────────────────────── */
.menu-card-emoji.has-image,
.featured-emoji.has-image {
  padding: 0;
  background: var(--warm-off);
  overflow: hidden;
}

.menu-card-emoji img,
.featured-emoji img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.menu-card:hover .menu-card-emoji img,
.featured-card:hover .featured-emoji img {
  transform: scale(1.07);
}

.menu-card-emoji {
  height: 160px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-emoji {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--warm-off);
}

/* Modal image */
.modal-item-emoji img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.modal-item-header {
  overflow: hidden;
}

/* ── User Menu (header dropdown) ───────────────────────────── */
.header-right { display:flex; align-items:center; gap:12px; margin-left:auto; }
.nav-admin { color:var(--amber)!important; font-weight:600!important; }
.user-menu-wrap { position:relative; }
.user-menu-btn { display:flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:50px; background:var(--warm-off); border:1.5px solid var(--border); cursor:pointer; transition:var(--transition); font-family:var(--font-body); }
.user-menu-btn:hover { border-color:var(--amber); background:white; }
.user-avatar { width:32px; height:32px; border-radius:50%; background:var(--amber); color:white; font-weight:800; font-family:var(--font-head); font-size:.95rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.user-name-short { font-size:.88rem; font-weight:600; color:var(--brown); }
.user-chevron { font-size:.65rem; color:var(--muted); transition:transform .2s; }
.user-menu-wrap.open .user-chevron { transform:rotate(180deg); }
.user-dropdown { display:none; position:absolute; top:calc(100% + 10px); right:0; background:var(--white); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-lg); min-width:220px; z-index:200; overflow:hidden; animation:dropIn .2s cubic-bezier(.4,0,.2,1); }
@keyframes dropIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.user-menu-wrap.open .user-dropdown { display:block; }
.user-dropdown-header { padding:16px 18px; background:var(--warm-off); border-bottom:1px solid var(--border); }
.user-dropdown-header strong { display:block; font-size:.95rem; color:var(--brown); margin-bottom:2px; }
.user-dropdown-header span { display:block; font-size:.78rem; color:var(--muted); line-height:1.6; }
.user-dropdown-item { display:block; padding:12px 18px; font-size:.88rem; color:var(--brown); font-weight:500; transition:var(--transition); text-decoration:none; }
.user-dropdown-item:hover { background:var(--warm-off); color:var(--amber); }
.user-dropdown-divider { height:1px; background:var(--border); margin:4px 0; }
.user-dropdown-logout { color:#B83232; }
.user-dropdown-logout:hover { background:#FEF2F2; color:#991B1B; }

/* ── Dark Mode ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --cream:    #1A1210 !important;
  --warm-off: #241814 !important;
  --brown:    #F0E6D8 !important;
  --espresso: #FAF6F0 !important;
  --muted:    #A89080 !important;
  --white:    #2A1E18 !important;
  --border:   rgba(240, 230, 216, 0.12) !important;
  --shadow:   0 4px 24px rgba(0,0,0,.4) !important;
  --shadow-lg:0 12px 48px rgba(0,0,0,.6) !important;
}
[data-theme="dark"] body {
  background: #1A1210 !important;
  color: #F0E6D8 !important;
}

[data-theme="dark"] body { background: var(--cream); color: var(--brown); }
[data-theme="dark"] .site-header { background: #241814; border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .menu-card { background: #2A1E18; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .menu-card:hover { background: #33221A; }
[data-theme="dark"] .featured-card { background: #2A1E18; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .modal { background: #2A1E18; }
[data-theme="dark"] .modal-item-header { background: #241814; }
[data-theme="dark"] .user-menu-btn { background: #2A1E18; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .user-dropdown { background: #2A1E18; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .user-dropdown-header { background: #241814; }
[data-theme="dark"] .user-dropdown-item:hover { background: #33221A; }
[data-theme="dark"] .cart-btn { background: #2A1E18; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .cat-tab { background: #2A1E18; border-color: rgba(255,255,255,.08); color: var(--muted); }
[data-theme="dark"] .cat-tab.active { background: var(--amber); color: white; border-color: var(--amber); }
[data-theme="dark"] .option-pill { background: #33221A; border-color: rgba(255,255,255,.12); color: var(--brown); }
[data-theme="dark"] .modal-notes { background: #33221A; border-color: rgba(255,255,255,.12); color: var(--brown); }
[data-theme="dark"] .site-footer { background: #0F0A08; }
[data-theme="dark"] .hero { background: #1A1210; }
[data-theme="dark"] .order-summary { background: #2A1E18; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .checkout-card { background: #2A1E18; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .payment-option { background: #2A1E18; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .payment-option.selected { border-color: var(--amber); background: #33221A; }
[data-theme="dark"] .eft-box { background: #241814; }
[data-theme="dark"] .confirmation-card { background: #2A1E18; }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: #33221A; border-color: rgba(255,255,255,.12); color: var(--brown); }

/* Dark mode toggle button */
.dark-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--warm-off); border: 1.5px solid var(--border);
  cursor: pointer; font-size: 1.1rem; display: flex;
  align-items: center; justify-content: center;
  transition: var(--transition); flex-shrink: 0;
}
.dark-toggle:hover { background: var(--amber); color: white; border-color: var(--amber); }

/* ── Mobile Improvements ─────────────────────────────────────── */
@media (max-width: 480px) {
  /* Header */
  .logo-name { font-size:1rem; }
  .nav-links { display:none; }
  .user-name-short { display:none; }
  .dark-toggle { width:34px;height:34px;font-size:.95rem; }
  .cart-btn { padding:6px 12px;font-size:.8rem; }

  /* Menu grid - single column on very small screens */
  .menu-grid { grid-template-columns:1fr!important; }
  .menu-card { display:flex;flex-direction:row;align-items:center;gap:12px;padding:14px; }
  .menu-card-emoji { width:52px;height:52px;font-size:1.8rem;flex-shrink:0; }
  .menu-card-body { flex:1;min-width:0; }
  .menu-card-name { font-size:.9rem; }
  .menu-card-desc { font-size:.78rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }

  /* Category tabs - scrollable */
  .category-tabs { overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:4px; }
  .cat-tab { white-space:nowrap;flex-shrink:0; }

  /* Hero */
  .hero-title { font-size:2rem; }
  .hero-eyebrow { font-size:.75rem; }

  /* Cart page */
  .cart-item { flex-direction:column;gap:10px; }
  .cart-item-controls { width:100%;justify-content:space-between; }

  /* Checkout */
  .checkout-layout { gap:16px; }
  .form-grid { grid-template-columns:1fr; }
  .payment-option { padding:12px; }
  .payment-option-icon { font-size:1.2rem; }

  /* Modal */
  .modal { border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0;max-height:90vh;max-width:100%; }
  .modal-overlay.open { align-items:flex-end;padding:0; }

  /* Auth pages */
  .auth-split { flex-direction:column; }
  .auth-brand-panel { min-height:180px;padding:24px; }
  .auth-brand-headline { font-size:1.4rem; }
  .auth-brand-bg-cup { font-size:6rem;bottom:-10px;right:-10px; }
  .auth-form-panel { padding:24px 20px; }

  /* Confirmation */
  .confirmation-card { padding:24px 20px; }
  .conf-emoji { font-size:3rem; }
}

/* ── Shop Admin Mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Menu management rows */
  .menu-row { flex-wrap:wrap;gap:8px; }
  .menu-row > div:last-child { width:100%;justify-content:flex-end; }

  /* Settings cards */
  .scard { padding:20px 16px; }
  .srow { grid-template-columns:1fr!important; }
  .modal-box { padding:24px 20px;margin:10px; }

  /* Orders table in shop admin */
  .orders-table th:nth-child(3),
  .orders-table td:nth-child(3) { display:none; }
}

/* ── Portrait Phone — Prevent horizontal scroll ──────────────── */
@media (max-width: 600px) {
  html, body { overflow-x:hidden; max-width:100vw; }

  /* Header — hide nav text, keep icons */
  .site-header { padding:0; }
  .header-inner { padding:0 12px;gap:8px; }
  .nav-links { display:none; }
  .logo-name { font-size:.95rem; }
  .logo-sub { font-size:.55rem; }

  /* Hero section */
  .hero { padding:28px 16px 32px;gap:0; }
  .hero-title { font-size:1.8rem; }
  .hero-sub { font-size:.9rem; }
  .hero-eyebrow { font-size:.75rem;padding:5px 12px; }
  .btn-primary { padding:12px 20px;font-size:.9rem; }

  /* Menu */
  .section { padding:28px 12px; }
  .section-title { font-size:1.4rem; }
  .category-tabs { gap:6px;padding-bottom:6px;overflow-x:auto;flex-wrap:nowrap; }
  .cat-tab { white-space:nowrap;flex-shrink:0;padding:7px 14px;font-size:.82rem; }
  .menu-grid { grid-template-columns:1fr!important;gap:10px; }

  /* Menu card as horizontal row */
  .menu-card { flex-direction:row!important;padding:12px 14px;gap:12px;align-items:center; }
  .menu-card-emoji { width:48px!important;height:48px!important;font-size:1.6rem!important;flex-shrink:0; }
  .menu-card-body { flex:1;min-width:0; }
  .menu-card-name { font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .menu-card-desc { font-size:.75rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }
  .menu-card-footer { margin-top:4px; }
  .add-btn { width:30px!important;height:30px!important;font-size:1.1rem!important;flex-shrink:0; }

  /* Featured section */
  .featured-grid { grid-template-columns:1fr!important; }
  .featured-card { flex-direction:row;padding:14px; }
  .featured-emoji { width:52px!important;height:52px!important;font-size:1.6rem; }

  /* Cart */
  .page-section { padding:20px 12px; }
  .cart-item { flex-wrap:wrap;gap:8px;padding:14px; }
  .cart-item-controls { width:100%;justify-content:space-between; }
  .order-summary { padding:16px; }
  .sticky-card { position:static; }

  /* Checkout */
  .checkout-layout { gap:16px; }
  .checkout-card { padding:16px; }
  .form-grid { grid-template-columns:1fr!important; }
  .auth-input-wrap input { font-size:16px; } /* Prevents iOS zoom */

  /* Modal — slides up from bottom */
  .modal-overlay.open { align-items:flex-end;padding:0; }
  .modal { border-radius:20px 20px 0 0;max-width:100%;max-height:85vh; }

  /* Footer */
  .footer-inner { flex-direction:column;gap:16px;text-align:center;padding:24px 16px; }
  .footer-links { justify-content:center; }

  /* Auth */
  .auth-split { flex-direction:column;min-height:100vh; }
  .auth-brand-panel { min-height:160px;padding:20px 16px;flex-shrink:0; }
  .auth-brand-headline { font-size:1.3rem; }
  .auth-brand-perks { gap:12px; }
  .auth-brand-bg-cup { font-size:5rem;opacity:.15; }
  .auth-form-panel { flex:1;padding:24px 16px; }
  .auth-form-wrap { max-width:100%; }

  /* Confirmation */
  .confirmation-card { padding:24px 16px;margin:0 12px; }
  .container-narrow { padding:0 12px; }
}