:root {
  /* Light theme. Red/green kept far apart in lightness (not just hue) so
     they stay distinguishable for colorblind users — both are dark/
     saturated enough to read as text on the light background AND to hold
     white button text on top of them, so no separate "text" vs "button"
     shade is needed like the dark theme required. */
  --cream: #FBF3E7;
  --char: #1E8E3E;
  --tomato: #D32F2F;
  --tomato-dark: #A61C1C;
  --basil: #1E8E3E;
  --crust: #E4C99A; /* stays light — only used in .hero-sub, on the hero's own dark red band, not the page background */
  --line: rgba(36, 30, 23, 0.14);
  --bg: #FAF3E9;
  --surface: #FFFFFF;
  --surface-2: #F1E7D6;
  --card-green: #FFFFFF;
  --text: #241E17;
  --text-rgb: 36, 30, 23;
  --font-display: 'Fraunces', serif;
  --font-body: 'Karla', sans-serif;
}

/* Dark theme override — admin picks Light/Dark in Settings (site_theme),
   applied as a data-theme attribute on <html> by app.js/checkout.js/
   terms.js as soon as settings load. Restores the site's original dark
   palette; kept as one block here (rather than duplicating every rule)
   so the two themes can't drift out of sync with each other. */
html[data-theme="dark"] {
  --char: #1F7A45;
  --tomato: #E5342B;
  --tomato-dark: #B81120;
  --basil: #1F7A45;
  --line: rgba(255, 245, 230, 0.14);
  --bg: #0A0A0A;
  --surface: #1A1A1A;
  --surface-2: #242424;
  --card-green: #1C5A3B;
  --text: #F3E9DC;
  --text-rgb: 243, 233, 220;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%20viewBox%3D%270%200%20160%20160%27%3E%3Cg%20fill%3D%27rgba%28139%2C94%2C52%2C0.09%29%27%3E%3Cg%20transform%3D%27translate%2834%2C46%29%20rotate%2818%29%27%3E%3Cpath%20d%3D%27M-13%2018%20L13%2018%20L0%20-8%20Z%27/%3E%3Ccircle%20cx%3D%27-3%27%20cy%3D%2710%27%20r%3D%272%27%20fill%3D%27%23FBF3E7%27/%3E%3Ccircle%20cx%3D%274%27%20cy%3D%276%27%20r%3D%272%27%20fill%3D%27%23FBF3E7%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%2713%27%20r%3D%272%27%20fill%3D%27%23FBF3E7%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28118%2C34%29%27%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%2714%27/%3E%3Ccircle%20cx%3D%27-5%27%20cy%3D%27-3%27%20r%3D%271.8%27%20fill%3D%27%23FBF3E7%27/%3E%3Ccircle%20cx%3D%275%27%20cy%3D%272%27%20r%3D%271.8%27%20fill%3D%27%23FBF3E7%27/%3E%3Ccircle%20cx%3D%27-2%27%20cy%3D%276%27%20r%3D%271.8%27%20fill%3D%27%23FBF3E7%27/%3E%3Ccircle%20cx%3D%274%27%20cy%3D%27-6%27%20r%3D%271.8%27%20fill%3D%27%23FBF3E7%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%2886%2C118%29%20rotate%28-25%29%27%3E%3Cpath%20d%3D%27M-13%2018%20L13%2018%20L0%20-8%20Z%27/%3E%3Ccircle%20cx%3D%27-3%27%20cy%3D%2710%27%20r%3D%272%27%20fill%3D%27%23FBF3E7%27/%3E%3Ccircle%20cx%3D%274%27%20cy%3D%276%27%20r%3D%272%27%20fill%3D%27%23FBF3E7%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%2713%27%20r%3D%272%27%20fill%3D%27%23FBF3E7%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%2828%2C122%29%20rotate%2840%29%20scale%280.75%29%27%3E%3Cpath%20d%3D%27M-13%2018%20L13%2018%20L0%20-8%20Z%27/%3E%3Ccircle%20cx%3D%27-3%27%20cy%3D%2710%27%20r%3D%272%27%20fill%3D%27%23FBF3E7%27/%3E%3Ccircle%20cx%3D%274%27%20cy%3D%276%27%20r%3D%272%27%20fill%3D%27%23FBF3E7%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%2713%27%20r%3D%272%27%20fill%3D%27%23FBF3E7%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28138%2C110%29%20scale%280.7%29%27%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%2714%27/%3E%3Ccircle%20cx%3D%27-5%27%20cy%3D%27-3%27%20r%3D%271.8%27%20fill%3D%27%23FBF3E7%27/%3E%3Ccircle%20cx%3D%275%27%20cy%3D%272%27%20r%3D%271.8%27%20fill%3D%27%23FBF3E7%27/%3E%3Ccircle%20cx%3D%27-2%27%20cy%3D%276%27%20r%3D%271.8%27%20fill%3D%27%23FBF3E7%27/%3E%3Ccircle%20cx%3D%274%27%20cy%3D%27-6%27%20r%3D%271.8%27%20fill%3D%27%23FBF3E7%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
}

html[data-theme="dark"] body {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%20viewBox%3D%270%200%20160%20160%27%3E%3Cg%20fill%3D%27rgba%28243%2C233%2C220%2C0.055%29%27%3E%3Cg%20transform%3D%27translate%2834%2C46%29%20rotate%2818%29%27%3E%3Cpath%20d%3D%27M-13%2018%20L13%2018%20L0%20-8%20Z%27/%3E%3Ccircle%20cx%3D%27-3%27%20cy%3D%2710%27%20r%3D%272%27%20fill%3D%27%230A0A0A%27/%3E%3Ccircle%20cx%3D%274%27%20cy%3D%276%27%20r%3D%272%27%20fill%3D%27%230A0A0A%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%2713%27%20r%3D%272%27%20fill%3D%27%230A0A0A%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28118%2C34%29%27%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%2714%27/%3E%3Ccircle%20cx%3D%27-5%27%20cy%3D%27-3%27%20r%3D%271.8%27%20fill%3D%27%230A0A0A%27/%3E%3Ccircle%20cx%3D%275%27%20cy%3D%272%27%20r%3D%271.8%27%20fill%3D%27%230A0A0A%27/%3E%3Ccircle%20cx%3D%27-2%27%20cy%3D%276%27%20r%3D%271.8%27%20fill%3D%27%230A0A0A%27/%3E%3Ccircle%20cx%3D%274%27%20cy%3D%27-6%27%20r%3D%271.8%27%20fill%3D%27%230A0A0A%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%2886%2C118%29%20rotate%28-25%29%27%3E%3Cpath%20d%3D%27M-13%2018%20L13%2018%20L0%20-8%20Z%27/%3E%3Ccircle%20cx%3D%27-3%27%20cy%3D%2710%27%20r%3D%272%27%20fill%3D%27%230A0A0A%27/%3E%3Ccircle%20cx%3D%274%27%20cy%3D%276%27%20r%3D%272%27%20fill%3D%27%230A0A0A%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%2713%27%20r%3D%272%27%20fill%3D%27%230A0A0A%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%2828%2C122%29%20rotate%2840%29%20scale%280.75%29%27%3E%3Cpath%20d%3D%27M-13%2018%20L13%2018%20L0%20-8%20Z%27/%3E%3Ccircle%20cx%3D%27-3%27%20cy%3D%2710%27%20r%3D%272%27%20fill%3D%27%230A0A0A%27/%3E%3Ccircle%20cx%3D%274%27%20cy%3D%276%27%20r%3D%272%27%20fill%3D%27%230A0A0A%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%2713%27%20r%3D%272%27%20fill%3D%27%230A0A0A%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28138%2C110%29%20scale%280.7%29%27%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%2714%27/%3E%3Ccircle%20cx%3D%27-5%27%20cy%3D%27-3%27%20r%3D%271.8%27%20fill%3D%27%230A0A0A%27/%3E%3Ccircle%20cx%3D%275%27%20cy%3D%272%27%20r%3D%271.8%27%20fill%3D%27%230A0A0A%27/%3E%3Ccircle%20cx%3D%27-2%27%20cy%3D%276%27%20r%3D%271.8%27%20fill%3D%27%230A0A0A%27/%3E%3Ccircle%20cx%3D%274%27%20cy%3D%27-6%27%20r%3D%271.8%27%20fill%3D%27%230A0A0A%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 10px 0;
}

.brand-logo {
  height: 80px;
  width: auto;
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.track-toggle {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  background: transparent;
  border: 2px solid var(--text);
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.track-toggle:hover { transform: translateY(-1px); }
.track-toggle:focus-visible { outline: 2px solid var(--tomato); outline-offset: 2px; }
@media (max-width: 420px) {
  .track-toggle { font-size: 13px; padding: 7px 12px; }
  .header-actions { gap: 6px; }
}

.cart-toggle {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  background: var(--char);
  color: var(--cream);
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s ease;
}
.cart-toggle:hover { transform: translateY(-1px); }
.cart-toggle:focus-visible { outline: 2px solid var(--tomato); outline-offset: 2px; }

#cart-count {
  background: var(--tomato);
  color: white;
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

/* Hero */
.hero {
  background-color: var(--tomato);
  background-size: cover;
  background-position: center;
  color: var(--cream);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: none;
}

/* This element also carries the shared .wrap class (max-width:1080, margin:0
   auto), which by itself would center it. Pinning margin to 0 here overrides
   that centering so the hero text sits flush against the same left edge as
   the header logo and category headings above/below it, instead of floating
   as a centered column with the header image showing equally on both sides. */
.hero-inner { position: relative; max-width: 640px; z-index: 1; margin: 0; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.15;
  margin: 0 0 16px;
}

.hero-sub {
  font-size: 17px;
  color: var(--crust);
  margin: 0;
  max-width: 46ch;
}

/* Category nav - circular icons */
.category-nav {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 28px 0 20px;
  position: sticky;
  top: 92px;
  background: var(--surface);
  z-index: 15;
}

.category-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex: 0 0 auto;
  width: 88px;
}

.category-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid var(--surface-2);
  box-shadow: 0 0 0 1px var(--line);
}

.category-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}

/* Menu sections */
.menu-category {
  padding: 40px 0 8px;
  scroll-margin-top: 130px;
}

.menu-category h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  margin: 0 0 20px;
  color: var(--tomato-dark);
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
}

@media (min-width: 640px) {
  .item-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

.item-card {
  background: var(--card-green);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.item-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--surface-2);
}

.item-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.item-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0;
}

.item-desc {
  font-size: 12px;
  color: rgba(var(--text-rgb),0.7);
  margin: 0;
  min-height: 28px;
}

.item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
}

.add-btn {
  background: var(--tomato);
  color: white;
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.add-btn:hover { background: var(--tomato-dark); }

/* Cart drawer */
.cart-drawer {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  max-width: 90vw;
  height: 100%;
  background: var(--surface);
  box-shadow: -8px 0 24px rgba(0,0,0,0.15);
  z-index: 40;
  transition: right 0.25s ease;
  display: flex;
  flex-direction: column;
}
.cart-drawer.open { right: 0; }

.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 30;
  display: none;
}
.cart-backdrop.open { display: block; }

.cart-drawer-inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cart-header h2 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.empty-msg {
  color: rgba(var(--text-rgb),0.6);
  font-size: 14px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.cart-item-name { font-weight: 700; font-size: 15px; }
.cart-item-meta { font-size: 13px; color: rgba(var(--text-rgb),0.65); }

.qty-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.qty-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  font-weight: 700;
}

.remove-btn {
  background: none;
  border: none;
  color: var(--tomato);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.cart-footer {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 12px;
}

.cart-total-row, .modal-total-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 16px;
}

.btn-primary {
  width: 100%;
  background: var(--tomato);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.btn-primary:disabled {
  background: rgba(var(--text-rgb),0.25);
  cursor: not-allowed;
}
.btn-primary:not(:disabled):hover { background: var(--tomato-dark); }

/* Modals */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.modal.open { display: flex; }

.modal-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
}

#checkout-form, #track-form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }

#checkout-form label, #track-form label {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#checkout-form input, #checkout-form textarea, #track-form input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  resize: vertical;
}
#checkout-form input:focus-visible, #checkout-form textarea:focus-visible, #track-form input:focus-visible {
  outline: 2px solid var(--tomato);
  outline-offset: 1px;
}

.confirm-card { text-align: center; }
.confirm-icon { font-size: 48px; margin-bottom: 8px; }
.confirm-card h2 { font-family: var(--font-display); margin: 0 0 8px; }
.confirm-card p { color: rgba(var(--text-rgb),0.75); margin: 0 0 20px; }

/* Pizza customizer */
.customize-card {
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.customize-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}

.option-section {
  margin-bottom: 20px;
}

.option-section h4 {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 2px;
}

.option-subtitle {
  font-size: 12px;
  color: rgba(var(--text-rgb),0.6);
  margin: 0 0 10px;
}

.option-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option-chip {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}

.option-chip.selected {
  background: var(--basil);
  border-color: var(--basil);
  color: white;
}

.customize-error {
  color: var(--tomato);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px;
  min-height: 16px;
}

/* ---- Topping checkboxes + half/whole placement (multi-select groups) ---- */
.option-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option-topping-row {
  border-bottom: 1px solid var(--line);
  padding: 2px 0;
}
.option-topping-row:last-child { border-bottom: none; }

.option-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  cursor: pointer;
}

.option-checkbox {
  width: 22px;
  height: 22px;
  accent-color: var(--basil);
  cursor: pointer;
  flex-shrink: 0;
}

.option-checkbox-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  flex: 1;
}

.option-checkbox-price {
  font-weight: 700;
  font-size: 14px;
  color: var(--tomato-dark);
}

.option-placement-row {
  display: flex;
  gap: 8px;
  background: var(--surface);
  border-radius: 10px;
  padding: 10px;
  margin: 0 0 10px;
}

.placement-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: rgba(var(--text-rgb),0.6);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.placement-btn.selected {
  background: var(--char);
  border-color: var(--char);
  color: white;
}

.placement-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
/* Left half filled */
.placement-icon-left::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 50%;
  background: currentColor;
}
/* Right half filled */
.placement-icon-right::before {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 50%;
  background: currentColor;
}
/* Whole: fully filled with a couple of "topping dot" cutouts for visual interest */
.placement-icon-whole {
  background: currentColor;
}
.placement-icon-whole::before,
.placement-icon-whole::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cream);
}
.placement-icon-whole::before { top: 4px; left: 4px; }
.placement-icon-whole::after { bottom: 3px; right: 4px; }

.customize-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 320px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: white;
  border-radius: 10px;
  margin-bottom: 16px;
}

.customize-qty {
  margin-bottom: 16px;
  justify-content: flex-start;
}

#customize-notes {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  resize: vertical;
}

@media (max-width: 480px) {
  .brand-logo { height: 56px; }
  .hero { padding: 44px 0; }
  .category-nav { top: 76px; }
}

/* ---- Store info (address/phone/hours) shown in the hero ---- */
.store-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font-size: 14px;
}
.store-info-item {
  background: rgba(255,255,255,0.15);
  padding: 6px 12px;
  border-radius: 20px;
  backdrop-filter: blur(2px);
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
a.store-info-item {
  cursor: pointer;
}
a.store-info-item:hover, a.store-info-item:focus-visible {
  background: rgba(255,255,255,0.28);
  text-decoration: underline;
}

/* ---- Footer ---- */
.site-footer {
  text-align: center;
  padding: 28px 0 40px;
  font-size: 13px;
  color: rgba(var(--text-rgb),0.55);
}
.site-footer p { margin: 0 0 8px; }
.staff-login-link {
  color: rgba(var(--text-rgb),0.35);
  text-decoration: none;
  font-size: 12px;
}
.staff-login-link:hover { text-decoration: underline; }

/* ---- Checkout: pickup vs delivery ---- */
.fulfillment-options {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.fulfillment-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.fulfillment-btn:hover {
  border-color: var(--tomato);
  transform: translateY(-1px);
}
.fulfillment-icon { font-size: 28px; }
.fulfillment-sub {
  font-weight: 400;
  font-size: 12px;
  color: rgba(var(--text-rgb),0.6);
  text-align: center;
}

.delivery-partner-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.delivery-partner-btn {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--tomato);
  color: white;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.15s;
}
.delivery-partner-btn:hover { background: var(--tomato-dark); }
.delivery-partner-recommended {
  font-weight: 400;
  font-size: 12px;
  opacity: 0.85;
}

.link-btn {
  background: none;
  border: none;
  color: var(--tomato);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: none;
}
.link-btn:hover { text-decoration: underline; }

/* ---- Fulfillment status button (hero) ---- */
.fulfillment-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.15s;
}
.fulfillment-status-btn:hover { transform: translateY(-1px); }
.fulfillment-status-change {
  font-weight: 700;
  font-size: 11px;
  color: var(--tomato);
  text-decoration: underline;
}

/* ---- Cart toast (confirms an item was added, without opening the cart) ---- */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--char);
  color: white;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: calc(100vw - 32px);
}
.cart-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.cart-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--basil);
  font-size: 12px;
  flex-shrink: 0;
}

/* ---- Guest order note + pickup code ---- */
.guest-order-note {
  font-size: 12px;
  color: rgba(var(--text-rgb),0.55);
  margin: 0 0 14px;
  font-style: italic;
}
.pickup-code {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--tomato);
  margin: 0 0 4px;
  letter-spacing: 1px;
}

/* ---- Intro animation ---- */
/* Timeline (≈3s total):
   0.0s–0.6s   chef+pizza image scales/fades in, large and centered
   0.6s–1.0s   it holds, then begins shrinking into its final "logo" size
   1.0s–2.2s   the full logo wipes in left-to-right, "completing" around
               the chef+pizza artwork (which lines up with the full logo's
               own chef+pizza region so the transition reads as one image)
   2.2s–2.8s   everything holds briefly, fully revealed
   2.8s–3.2s   the whole intro fades out and unmounts, revealing the site
*/
.intro-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: introScreenFadeOut 0.4s ease forwards;
  animation-delay: 2.8s;
}

.intro-stage {
  position: relative;
  width: 420px;
  height: 420px;
  max-width: 90vw;
  max-height: 90vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-chef-pizza {
  position: absolute;
  /* Sized/positioned so this image's actual artwork (it has some transparent
     padding around it) lands close to where the chef+pizza art sits within
     the full logo. This image's proportions differ slightly from that art
     (more shoulder/apron included, closer to square), so it can't lock on
     pixel-perfectly the way a same-source crop would — instead it fades out
     as the full logo fades in (see introChefPizzaOut below), so any small
     mismatch reads as an intentional cross-fade rather than a jarring snap.
  */
  width: 47.25%;
  left: 50.56%;
  top: 45.74%;
  transform: translate(-50%, -50%) scale(2.6);
  opacity: 0;
  animation:
    introChefPizzaIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    introChefPizzaSettle 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards,
    introChefPizzaOut 0.5s ease forwards;
  animation-delay: 0s, 0.9s, 1.6s;
}

.intro-full-logo {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Reveals left-to-right via a clip-path wipe, reading as the logo's arc
     and text "completing" around the chef+pizza artwork already in place. */
  clip-path: inset(0 100% 0 0);
  animation:
    introLogoFadeIn 0.3s ease forwards,
    introLogoWipe 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: 1.0s, 1.0s;
}

@keyframes introChefPizzaIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(2.6); }
}

@keyframes introChefPizzaSettle {
  from { transform: translate(-50%, -50%) scale(2.6); }
  to   { transform: translate(-50%, -50%) scale(1); }
}

@keyframes introChefPizzaOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes introLogoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes introLogoWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes introScreenFadeOut {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-screen { animation-duration: 0.01s; animation-delay: 0.3s; }
  .intro-chef-pizza { animation: none; opacity: 0; }
  .intro-full-logo { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); clip-path: none; }
}

/* ---- Store closed banner ---- */
.closed-banner {
  background: var(--char);
  color: white;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
}

/* ---- Add-to-cart button disabled state (store closed) ---- */
.add-btn:disabled {
  background: rgba(var(--text-rgb),0.15);
  color: rgba(var(--text-rgb),0.5);
  cursor: not-allowed;
  border-color: transparent;
}

/* ---- Online payment (Authorize.net Accept.js) ---- */
.payment-toggle-row {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}
.payment-toggle-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.payment-toggle-option input[type="radio"] {
  accent-color: var(--basil);
}
#card-fields {
  background: var(--surface);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.card-details-row {
  display: grid;
  /* minmax(0, ...) lets columns shrink below the inputs' default width,
     so nothing overflows to the right on narrow phones */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.card-details-row input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Phones: month + year share the first row, CVV drops to its own row */
@media (max-width: 520px) {
  .card-details-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card-details-row label:nth-child(3) {
    grid-column: 1 / -1;
  }
  /* CVV is only 3-4 digits, so keep its box small instead of full width */
  .card-details-row #card-cvv {
    width: 96px;
  }
}