/* =========================================================
   Benvenuto Pizza — main.css
   Brand identity: brushstroke red (primary) + deep Italian
   green (secondary accent) on a warm cream base. The real
   logo (images/logo-transparent.png, dark variant for dark
   backgrounds) is the wordmark everywhere — no CSS/text stand-in.
   ========================================================= */

:root {
  /* --- Palette --- */
  --cream:        #FBF1E1;
  --cream-dim:    #F3E3C7;
  --cream-line:   #E4CEA4;
  --paper:        #FFFCF5;

  --ink:          #241C1D;   /* neutral dark charcoal — text, borders */
  --ink-soft:     #5C4C4E;   /* secondary text */
  --ink-mute:     #7A6B6D;

  --red:          #C31E2A;   /* primary brand red — brushstroke logo red */
  --red-dark:     #8C1017;
  --red-tint:     #F6DCDA;   /* pale red wash for backgrounds */

  --green:        #1E5631;   /* secondary Italian green — used sparingly */
  --green-dark:   #123D22;
  --green-light:  #7FB88F;   /* legible green for light-on-dark text/accents */
  --green-tint:   #DCE8DD;

  /* --- Semantic --- */
  --bg: var(--cream);
  --bg-alt: var(--cream-dim);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --accent: var(--red);
  --accent-dark: var(--red-dark);

  /* --- Type --- */
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Libre Franklin", -apple-system, "Segoe UI", sans-serif;

  /* --- Scale --- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(36, 18, 9, 0.10);
  --shadow-md: 0 10px 30px rgba(36, 18, 9, 0.16);
  --shadow-lg: 0 20px 50px rgba(36, 18, 9, 0.24);
  --container: 1120px;

  /* Fallback for first paint — scripts/include.js measures the header's
     real rendered height once partials load and overrides this, so the
     mobile nav dropdown, the sticky menu-category toolbar, and anchor-link
     scroll offsets (all keyed off --header-h below) stay pixel-accurate.
     This variable is NOT used for the body's own top/bottom padding — see
     the comment on the `body` rule for why. */
  --header-h: 144px;
}

@media (max-width: 640px) {
  :root { --header-h: 128px; }
}

/* ---------------------------------------------------------
   Reset
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; }
/* Author CSS always beats the browser's default [hidden]{display:none} —
   any class that sets its own `display` (e.g. .form-field, .cart-badge)
   silently overrides `hidden` and makes it render anyway. This is the
   standard, correct fix (not a hack): guarantee `hidden` always wins,
   regardless of what display-setting classes an element also carries,
   now or in the future. */
[hidden] { display: none !important; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* #site-header and .mobile-action-bar are both position:fixed, so they're
     out of normal flow and reserve no space of their own — without this,
     content at the very top/bottom of the page scrolls underneath them and
     gets hidden.

     This USED to be var(--header-h) / var(--action-bar-h), set exactly by
     JS measuring the real rendered elements (see scripts/include.js history).
     That measured-JS approach was tested on an actual iPhone in Safari and
     confirmed to still let content hide behind the header/bar — so it's
     deliberately NOT used here anymore. These are hardcoded, generously
     oversized fixed numbers instead: less pixel-perfect (there's a bit of
     dead space on most devices), but not dependent on JS timing/measurement
     working correctly on every real device, which is what actually failed.
     170px covers the header (~146px measured on desktop-width headers, more
     padding than needed on the ~124-128px mobile header) with real buffer
     to spare. 110px + the safe-area inset covers the mobile action bar
     (~76-85px measured pre-safe-area) the same way. If the header or action
     bar's real content ever changes enough to need more room than this,
     bump these numbers up — don't reintroduce JS measurement here. */
  padding-top: 170px;
  padding-bottom: 110px;
}

@media (max-width: 640px) {
  body {
    /* .mobile-action-bar only renders below this width; env() is native
       CSS (not JS) and is the correct, reliable way to add the iPhone
       home-indicator clearance on top of the bar's own generous base. */
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }
}
@media (min-width: 641px) {
  body {
    /* No .mobile-action-bar above this width — nothing to clear. */
    padding-bottom: 0;
  }
}

/* subtle paper grain, applied once to body */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

main { display: block; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--red);
}

/* Thin red/green accent rule — the site's one recurring Italian motif */
.italian-rule {
  width: 64px;
  height: 7px;
  margin: 14px 0;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.italian-rule span { flex: 1; }
.italian-rule span:first-child { background: var(--red); }
.italian-rule span:last-child { background: var(--green); }
.italian-rule.center { margin-left: auto; margin-right: auto; }

.lede { font-size: 1.15rem; color: var(--text-soft); max-width: 56ch; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--ink); color: var(--cream);
  padding: 10px 16px; border-radius: var(--radius-sm);
  z-index: 10000; transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  white-space: nowrap;
}
.btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }

.btn-primary {
  background: var(--red);
  color: var(--paper);
  box-shadow: var(--shadow-sm), inset 0 -3px 0 rgba(0,0,0,0.18);
}
.btn-primary:hover { background: var(--red-dark); box-shadow: var(--shadow-lg), inset 0 -3px 0 rgba(0,0,0,0.2); transform: translateY(-2px) scale(1.03); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--cream); box-shadow: var(--shadow-md); transform: translateY(-2px) scale(1.03); }

.btn-outline-light {
  background: transparent;
  color: var(--paper);
  border: 2px solid rgba(255,252,245,0.6);
}
.btn-outline-light:hover { background: var(--paper); color: var(--red-dark); border-color: var(--paper); box-shadow: var(--shadow-lg); transform: translateY(-2px) scale(1.03); }

/* Light/cream button — used for primary CTAs sitting on a red background */
.btn-cream {
  background: var(--paper);
  color: var(--red-dark);
  box-shadow: var(--shadow-sm), inset 0 -3px 0 rgba(0,0,0,0.08);
}
.btn-cream:hover { background: var(--cream); box-shadow: var(--shadow-lg); transform: translateY(-2px) scale(1.03); }

/* Press state wins over hover's scale-up while a button is actively being
   tapped/clicked — same specificity as the :hover rules above, placed
   after them so it takes the tie in the cascade. */
.btn-primary:active, .btn-outline:active, .btn-outline-light:active, .btn-cream:active {
  transform: scale(0.97);
}

.btn-block { width: 100%; }
.btn-lg { padding: 18px 30px; font-size: 1.08rem; }

/* Applied by scripts/cart.js while window.ONLINE_ORDERING_ENABLED is false —
   keeps the homepage "Order Online" buttons visible but visually muted,
   with a small badge signalling why clicking them doesn't go anywhere yet. */
.is-coming-soon { opacity: 0.65; cursor: not-allowed; }
.is-coming-soon:hover { transform: none; }
.coming-soon-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------
   Top info strip + header (sticky — keeps contact info visible)
   --------------------------------------------------------- */
/* position:fixed (not sticky) because iOS Safari has a known history of
   silently breaking position:sticky headers under certain scroll/viewport
   conditions, which let page content scroll up underneath and behind it.
   Fixed is unconditional and doesn't rely on the browser resolving sticky
   correctly — the body padding-top above is what reserves its space now. */
#site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; }

/* ADDITIVE WORKAROUND, NOT A FIX — a known older iOS Safari bug where
   position:fixed elements aren't always promoted to their own hardware-
   accelerated compositing layer, which can let Safari briefly paint a
   stale/cached tile of scrolled-past content underneath a fixed element
   instead of correctly layering it on top. Forcing a layer promotion is
   the standard mitigation. This is IN ADDITION to position:fixed above and
   the background-extension masking below — none of the three have been
   confirmed to fix the underlying bleed-through on the real device yet;
   this is another attempt, not a replacement for the others. */
#site-header,
.mobile-action-bar {
  transform: translateZ(0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* WORKAROUND, NOT A FIX — content has been observed bleeding through above
   the fixed header on a real iPhone in Safari despite #site-header being
   position:fixed with correct, verified padding compensation on <body>.
   The actual cause has NOT been found (ancestor-transform, stale-cache, and
   JS-measurement theories were all checked and ruled out or addressed
   without resolving it on-device). Rather than keep chasing it, this simply
   makes any such bleed-through invisible: a solid block in the header's own
   top color, extended generously above the header's real edge, sitting
   behind the header's own content (z-index:-1) but still above ordinary
   page content since it inherits #site-header's stacking context. If this
   exact bug resurfaces in a new form later, the underlying cause is still
   unresolved — this only hides the symptom, it doesn't correct positioning. */
#site-header::before {
  content: "";
  position: absolute;
  top: -150px;
  left: 0;
  right: 0;
  height: 150px;
  background: var(--red);
  z-index: -1;
}

.info-strip {
  background: var(--red);
  color: var(--cream);
  font-size: 0.85rem;
}
/* Just two short items (phone, hours) live here now — a centered,
   wrapping flex row handles every width on its own: they sit as a tight,
   deliberately-spaced pair on one line at both desktop and typical phone
   widths, and only drop to two independently-centered lines if a viewport
   is too narrow to fit them side by side. No breakpoints needed. */
.info-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 40px;
  padding: 12px 20px;
  max-width: var(--container);
  margin: 0 auto;
}
.info-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 500;
}
.info-strip__item svg { width: 15px; height: 15px; color: var(--cream); opacity: 0.85; flex-shrink: 0; }
.info-strip a:hover { color: var(--cream-dim); text-decoration: underline; }

/* Tighter gap at phone widths so phone + hours fit side by side at
   ~375-390px instead of wrapping by a handful of pixels. */
@media (max-width: 480px) {
  .info-strip__inner { column-gap: 22px; padding: 12px 16px; }
}

.navbar {
  background: var(--cream);
  border-bottom: 3px solid var(--ink);
  position: relative;
}
.navbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: var(--green);
}
.navbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand { display: flex; align-items: center; }
.brand__logo { height: 62px; width: auto; display: block; }

@media (max-width: 480px) {
  .navbar__inner { padding: 14px 16px; }
  .brand__logo { height: 48px; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span { width: 24px; height: 3px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-menu { display: flex; align-items: center; gap: 32px; }
.nav-menu__links { display: flex; align-items: center; gap: 30px; }
.nav-menu__links a {
  /* display:block (not the <a> default of inline) so this link's own
     padding actually contributes to its box height — otherwise the <li>
     wrapping it sizes to just the text's line-height, while the padded/
     bordered area we paint visually reaches further, overlapping into the
     next link's real (but invisibly smaller) tap target. Blockifying makes
     the visible box and the tappable box the same rectangle, on every
     viewport, not just mobile. */
  display: block;
  font-weight: 600;
  font-size: 1rem;
  position: relative;
  padding: 6px 0;
}
.nav-menu__links a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -3px;
  height: 2px; background: var(--red);
  transition: right 0.2s ease;
}
.nav-menu__links a:hover::after,
.nav-menu__links a[aria-current="page"]::after { right: 0; }
.nav-menu__links a[aria-current="page"] { color: var(--red); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--cream);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 3px solid var(--ink);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav-menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-menu__links { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 20px; }
  .nav-menu__links a { padding: 14px 4px; border-bottom: 1px solid var(--cream-line); }
  .nav-menu .btn { margin: 4px 20px 20px; }
}

/* ---------------------------------------------------------
   Sticky bottom mobile action bar
   --------------------------------------------------------- */
.mobile-action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  display: none;
  gap: 10px;
  /* env(safe-area-inset-bottom) clears the iPhone home-indicator area
     within the bar's own box (body's padding-bottom, in the Reset section
     above, is a separate hardcoded value sized to clear this whole bar). */
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 3px solid var(--ink);
  box-shadow: 0 -8px 24px rgba(36,18,9,0.18);
}
@media (max-width: 640px) {
  .mobile-action-bar { display: flex; }
}

/* WORKAROUND, NOT A FIX — same reasoning as #site-header::before above:
   content has been observed bleeding through below this bar on a real
   iPhone in Safari with no confirmed root cause yet. This hides it rather
   than positioning anything correctly — a solid block in the bar's own
   background color, extended generously below its real edge. If the
   underlying bug resurfaces in a new form, this doesn't mean it's fixed. */
.mobile-action-bar::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 150px;
  background: var(--paper);
  z-index: -1;
}
.mobile-action-bar .btn { flex: 1; padding: 13px 10px; font-size: 0.92rem; }

/* ---------------------------------------------------------
   Hero — warm cream, not a dark block: red does the accent work
   --------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--cream);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(36,28,29,0.06) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 88% 12%, var(--red-tint), transparent 42%),
    radial-gradient(circle at 8% 96%, var(--green-tint), transparent 40%);
  opacity: 0.8;
}
.hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 20px 64px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
.hero h1 { color: var(--ink); }
.hero__sub { margin-top: 18px; font-size: 1.15rem; color: var(--text-soft); max-width: 46ch; }
.hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
/* Flex (icon as a sibling box) breaks the instant this text wraps to two
   lines: a flex item can't wrap onto its own new line while sitting next
   to another item, so the text just wraps inside its own flex box, that
   box ends up practically full-width, and the icon (pinned by
   flex-shrink:0) is left stranded at the row's start edge while the text
   "centers" only within its own leftover space — icon and text stop
   reading as one unit. Making the icon inline content instead (not a flex
   item) sidesteps the whole problem: it flows with the text like a
   leading glyph, so text-align:center centers icon+text together as a
   single wrapped paragraph, on any width, with no breakpoint needed. */
.hero__trust { margin-top: 26px; font-size: 0.95rem; color: var(--text-soft); font-weight: 600; }
.hero__trust svg {
  display: inline-block;
  width: 18px; height: 18px;
  color: var(--green);
  vertical-align: -3px;
  margin-right: 8px;
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; padding: 36px 20px 40px; }
  .hero__media { order: -1; }
  .hero__content { text-align: center; }
  .hero__actions { justify-content: center; }
  .italian-rule { margin-left: auto; margin-right: auto; }
}

@media (max-width: 600px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
}

/* Phone number must never break mid-digit ("204-239-" / "0555" on two
   lines) regardless of what else on the button wraps. */
.call-btn__number { white-space: nowrap; }

/* The full "Call to Order — 204-239-0555" label doesn't fit on one line
   at narrow phone widths. Letting it wrap used to force the .btn (a nowrap
   flex/grid child) wider than its own padded box — a wrapped flex child
   still can't shrink below its content's natural width, so the whole hero
   column got pushed off-center. Dropping the "Call to Order —" prefix
   below 600px keeps the button's content to just the icon + phone number,
   which comfortably fits on one line at any phone width; the icon next to
   a phone number is self-explanatory without the prefix. Full label comes
   back once there's room for it. */
@media (max-width: 600px) {
  .call-btn__label { display: none; }
}

.hero__media { position: relative; }
.hero__media .photo-frame { transform: rotate(2deg); }
@media (max-width: 480px) {
  .hero__media .photo-frame { transform: none; }
}
.hero__media .photo-frame::after {
  content: "Fresh Daily";
  position: absolute;
  top: -14px; right: -14px;
  background: var(--red);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 16px;
  border-radius: 50%;
  transform: rotate(8deg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  line-height: 1.1;
  width: 92px;
}
@media (max-width: 480px) {
  /* The badge was overhanging past the frame's right edge, which at
     narrow widths pushed it off the viewport entirely and got it clipped
     mid-circle. Pull it fully inside the frame and shrink it a touch. */
  .hero__media .photo-frame::after {
    top: 10px;
    right: 10px;
    width: 74px;
    font-size: 0.72rem;
    padding: 8px 10px;
  }
}

/* ---------------------------------------------------------
   Photo placeholder system (real photography only — labelled
   placeholders stand in until real photos are supplied).
   Styled deliberately: warm solid fill + a clear pizza-slice
   mark, so it reads as an intentional placeholder, not a
   broken image or stray graphic.
   --------------------------------------------------------- */
.photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--paper);
}
.photo-placeholder {
  aspect-ratio: 4 / 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  background: var(--cream-dim);
  color: var(--ink-soft);
}
.photo-placeholder__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--red-tint);
  display: flex; align-items: center; justify-content: center;
}
.photo-placeholder__icon svg { width: 32px; height: 32px; color: var(--red); }
.photo-placeholder strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.photo-placeholder span { font-size: 0.85rem; max-width: 30ch; font-style: italic; }
.photo-placeholder.is-square { aspect-ratio: 1; }
.photo-placeholder.is-wide { aspect-ratio: 16 / 7; }

/* Real hero photo — same wide footprint as .photo-placeholder.is-wide so
   swapping it in doesn't shift the hero layout. */
.hero-photo { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

/* Real menu photo — same square footprint as .photo-placeholder.is-square
   so a menu-card's box is identical whether the item has a real photo or
   is still showing the placeholder; object-fit:cover crops to fill that
   box instead of stretching/distorting the source image. */
.menu-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Sections / trust bar / callouts
   --------------------------------------------------------- */
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--alt { background: var(--cream-dim); }
.section--dark {
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 6px),
    linear-gradient(155deg, var(--red-dark), var(--red));
  color: var(--cream);
  border-bottom: 5px solid var(--green);
}

/* Decorative scallop divider — a thin trim of small bumps in the accent
   color, used instead of a flat hard cutoff between color-block sections. */
.scallop-divider {
  height: 26px;
  background-repeat: repeat-x;
  background-size: 26px 26px;
  background-image: radial-gradient(circle at 13px 0, transparent 13px, var(--red) 13.5px);
}
.scallop-divider.is-green {
  background-image: radial-gradient(circle at 13px 0, transparent 13px, var(--green) 13.5px);
}
.section--dark h2 { color: var(--cream); }
.section__head { max-width: 640px; margin: 0 0 40px; }
.section__head.center { margin-left: auto; margin-right: auto; text-align: center; }

.info-band {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: -64px;
  position: relative;
  z-index: 5;
}
@media (max-width: 900px) {
  /* Redundant on a phone screen — phone/hours are already in the sticky
     top bar, and it was just eating space without adding much. Kept for
     tablet/desktop, where there's room for it to earn its keep. */
  .info-band { display: none; }
}
.info-band__item { display: flex; flex-direction: column; gap: 8px; }
.info-band__item svg { width: 26px; height: 26px; color: var(--red); }
.info-band__item:nth-child(even) svg { color: var(--green); }
.info-band__item h3 { font-size: 1rem; }
.info-band__item p { font-size: 0.92rem; color: var(--text-soft); }
.info-band__item a:hover { color: var(--red); }

/* No margin-top here: .callout-row is only ever used as the first (and
   only) thing in its section, right after the hero — a top margin here
   was pure dead space stacking on top of the hero's own bottom padding
   and the section's top padding. If a heading is ever added above it,
   give the heading a bottom margin instead. */
.callout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .callout-row { grid-template-columns: 1fr; } }
.callout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--paper);
  border: 2px solid var(--cream-line);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.callout:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.callout svg { width: 30px; height: 30px; color: var(--red); flex-shrink: 0; }
.callout h3 { font-size: 1.05rem; margin-bottom: 4px; }
.callout p { font-size: 0.92rem; color: var(--text-soft); }

/* ---------------------------------------------------------
   Order widget (real cart/checkout CTA mount point)
   --------------------------------------------------------- */
.order-widget {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.order-widget h2, .order-widget h3 { margin-bottom: 8px; }
.order-widget p { color: var(--text-soft); margin-bottom: 18px; }
.order-widget__mount { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.order-widget__note { font-size: 0.82rem; margin-top: 14px; margin-bottom: 0; }

/* On a red section--dark background, drop the card chrome so the widget
   sits directly on the red, and switch its text to light-on-red. */
.section--dark .order-widget {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px;
}
.section--dark .order-widget p,
.section--dark .order-widget__note { color: var(--cream-dim); }

/* ---------------------------------------------------------
   Menu page
   --------------------------------------------------------- */
.menu-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 400;
  background: var(--cream);
  border-bottom: 2px solid var(--cream-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-toolbar::-webkit-scrollbar { display: none; }
.menu-toolbar__inner {
  display: flex;
  justify-content: center;
  justify-content: safe center;
  gap: 10px;
  padding: 12px 20px;
  max-width: var(--container);
  margin: 0 auto;
  width: max-content;
  min-width: 100%;
}
.menu-toolbar a {
  flex-shrink: 0;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--green-tint);
  color: var(--green-dark);
  border: 2px solid var(--green);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.menu-toolbar a:hover { background: var(--red); border-color: var(--red-dark); color: var(--cream); }

.menu-category { padding: 56px 0; scroll-margin-top: calc(var(--header-h) + 60px); }
.menu-category:nth-child(even) { background: var(--cream-dim); }
.menu-category__head { max-width: 720px; margin: 0 auto 8px; text-align: center; }
.menu-category__note { text-align: center; max-width: 560px; margin: 10px auto 0; color: var(--text-soft); font-size: 0.92rem; font-style: italic; }

.gf-note {
  max-width: 700px;
  margin: 0 auto 8px;
  background: var(--green-tint);
  color: var(--green-dark);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
}

/* ---------------------------------------------------------
   Menu rows — horizontal-scrolling compact cards (DoorDash/Uber-Eats
   style), one row per category, replacing the old vertical grid of full
   cards. Native touch swipe handles scrolling on any width; the chevron
   arrows are desktop-only (see breakpoint below) since touch users don't
   need them and mouse/trackpad users benefit from a click target.
   --------------------------------------------------------- */
.menu-row-wrapper {
  position: relative;
  max-width: var(--container);
  margin: 40px auto 0;
  padding: 0 20px;
}
.menu-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.menu-row::-webkit-scrollbar { display: none; }

.menu-row__arrow {
  display: none;
  position: absolute;
  top: 76px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.menu-row__arrow svg { width: 18px; height: 18px; }
.menu-row__arrow:hover { background: var(--red); border-color: var(--red-dark); color: var(--cream); }
.menu-row__arrow.is-disabled { opacity: 0; pointer-events: none; }
.menu-row__arrow--left { left: 4px; }
.menu-row__arrow--right { right: 4px; }
@media (min-width: 861px) {
  .menu-row__arrow { display: flex; }
}

.menu-compact-card {
  flex: 0 0 auto;
  width: 156px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}
@media (min-width: 641px) {
  .menu-compact-card { width: 190px; }
}
.menu-compact-card:hover .menu-compact-card__photo { transform: scale(1.03); }

.menu-compact-card__photo-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--cream-line);
}
.menu-compact-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.menu-compact-card .photo-placeholder { aspect-ratio: 1; padding: 12px; gap: 6px; }
.menu-compact-card .photo-placeholder__icon { width: 40px; height: 40px; }
.menu-compact-card .photo-placeholder__icon svg { width: 20px; height: 20px; }
.menu-compact-card .photo-placeholder strong { font-size: 0.76rem; }
.menu-compact-card .photo-placeholder span { display: none; }

.menu-compact-card__add-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.menu-compact-card__add-badge svg { width: 16px; height: 16px; }

.menu-compact-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.25;
}
.menu-compact-card__price { font-weight: 700; color: var(--red-dark); font-size: 0.88rem; }

/* .custom-pizza-table / .topping-groups / .topping-chips / .custom-pizza-cta
   removed — Custom Pizza's info table + topping-group preview + "Build Your
   Pizza" button used to render directly on the page; it's now a single
   compact card in a .menu-row (like every other category) that opens the
   same builder modal. The size/topping-picker UI itself, inside the modal,
   is unchanged — see .custom-builder__* below. */

.menu-cta-band { text-align: center; padding: 56px 0; }

/* Floating "back to categories" button */
.back-to-categories {
  position: fixed;
  right: 22px;
  bottom: 28px;
  z-index: 450;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--red);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.18s ease;
}
.back-to-categories svg { width: 22px; height: 22px; }
.back-to-categories.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-categories:hover { background: var(--green); }
@media (max-width: 640px) {
  .back-to-categories { right: 16px; bottom: 90px; width: 48px; height: 48px; }
}

/* ---------------------------------------------------------
   About page
   --------------------------------------------------------- */
.about-hero {
  padding: 60px 0 20px;
  text-align: center;
}
.about-hero .eyebrow { justify-content: center; display: flex; }
.about-hero .italian-rule { margin-top: 18px; }
.story {
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 0 60px;
}
.story p {
  font-size: 1.12rem;
  color: var(--text-soft);
  margin-bottom: 22px;
}
.story p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--red);
  float: left;
  line-height: 0.8;
  margin: 8px 8px 0 0;
}
.story .support-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--green-dark);
  text-align: center;
  margin-top: 30px;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
}
@media (max-width: 760px) { .value-grid { grid-template-columns: 1fr; } }
.value-card {
  background: var(--paper);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.value-card svg { width: 34px; height: 34px; color: var(--red); margin: 0 auto 14px; }
.value-card:nth-child(2) svg { color: var(--green); }
.value-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.value-card p { font-size: 0.92rem; color: var(--text-soft); }

.about-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: var(--container); margin: 0 auto; }
@media (max-width: 760px) { .about-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .about-gallery { grid-template-columns: 1fr; max-width: 320px; } }

/* Real gallery photo — same square footprint as .photo-placeholder.is-square
   so it doesn't shift the grid next to a still-placeholder slot; the caption
   sits below the frame (matching the placeholder's own caption style) since
   a real photo doesn't have anywhere to bake one in the way the placeholder
   does. */
.gallery-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery-caption { margin-top: 10px; text-align: center; font-size: 0.85rem; font-style: italic; color: var(--ink-soft); }

/* ---------------------------------------------------------
   Contact page
   --------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.contact-list { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.contact-list__row { display: flex; gap: 16px; align-items: flex-start; }
.contact-list__row svg { width: 24px; height: 24px; color: var(--red); flex-shrink: 0; margin-top: 2px; }
.contact-list__row:nth-child(even) svg { color: var(--green); }
.contact-list__row h3 { font-size: 0.98rem; margin-bottom: 4px; }
.contact-list__row p, .contact-list__row a { font-size: 0.94rem; color: var(--text-soft); }
.contact-list__row a:hover { color: var(--red); }
.hours-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.hours-table td { padding: 3px 0; font-size: 0.94rem; color: var(--text-soft); }
.hours-table td:last-child { text-align: right; font-weight: 600; color: var(--text); }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 6px solid var(--paper);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

.social-row { display: flex; gap: 12px; margin-top: 22px; }
.social-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, transform 0.18s ease;
}
.social-btn:hover { background: var(--red); transform: translateY(-2px); }
.social-btn svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------
   Footer — rebuilt as an aligned flex/grid layout with
   fixed-size icon badges so icon + label pairs line up
   consistently regardless of how many lines the label wraps.
   --------------------------------------------------------- */
#site-footer { background: var(--ink); color: var(--cream-dim); position: relative; }
#site-footer::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--red) 0 50%, var(--green) 50% 100%);
}
.footer__top {
  max-width: var(--container);
  margin: 0 auto;
  padding: 52px 20px 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
}
.footer__brand { display: flex; align-items: center; margin-bottom: 14px; }
.footer__logo { height: 46px; width: auto; display: block; }
.footer p { font-size: 0.9rem; line-height: 1.6; }
.footer h4 { font-family: var(--font-body); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; color: var(--green-light); margin-bottom: 16px; }
.footer ul { display: flex; flex-direction: column; gap: 11px; }
.footer ul a { font-size: 0.92rem; }
.footer a:hover { color: var(--cream); }

.social-row { display: flex; gap: 10px; margin-top: 20px; }

.footer-contact-list { display: flex; flex-direction: column; gap: 16px; }
.footer-contact-list .contact-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
}
.footer-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(251, 241, 225, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-icon svg { width: 14px; height: 14px; color: var(--cream); }

/* Placed after every base .footer* rule above on purpose — a media query
   doesn't out-rank equal-specificity rules, so an override declared
   earlier in the file than its own base rule loses the cascade tie even
   while the media query matches (bit us on .hero__trust earlier too). */
@media (max-width: 760px) {
  .footer__top { grid-template-columns: 1fr; gap: 0; padding: 40px 20px 28px; text-align: center; }
  /* Thin dividers between the brand/contact/links groups instead of a
     long uninterrupted stack of centered text — gives the eye somewhere
     to break instead of one continuous wall. */
  .footer__top > div:not(:first-child) {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(251, 241, 225, 0.14);
  }
  .footer__brand { justify-content: center; }
  .footer-contact-list .contact-line { justify-content: center; }
  .social-row { justify-content: center; }
  /* Explore links as a compact 2-column grid instead of five stacked
     rows — shorter section, easier to scan. */
  .footer ul { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
}

.footer__bottom {
  border-top: 1px solid rgba(251,241,225,0.14);
  padding: 18px 20px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-mute);
}
.footer__bottom a:hover { color: var(--cream); }

/* ---------------------------------------------------------
   Cart — toggle button/badge, slide-out drawer, line items
   --------------------------------------------------------- */
.cart-toggle { position: relative; }
.cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--green);
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cream);
}
.footer ul button.cart-toggle {
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: static;
}
.footer ul button.cart-toggle .cart-badge { position: static; border-color: var(--ink); }
.footer a:hover, .footer button:hover { color: var(--cream); }

body.no-scroll { overflow: hidden; }

.cart-drawer { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(36, 18, 9, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.cart-drawer.is-open { pointer-events: auto; }
.cart-drawer.is-open .cart-drawer__overlay { opacity: 1; }
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 2px solid var(--cream-line);
  flex-shrink: 0;
}
.cart-drawer__header h2 { font-size: 1.3rem; }
.cart-drawer__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
.cart-drawer__close:hover { background: var(--cream-dim); }

.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cart-drawer__empty { color: var(--text-soft); text-align: center; padding: 40px 0; }

.cart-drawer__footer {
  padding: 18px 24px 24px;
  border-top: 2px solid var(--cream-line);
  background: var(--cream-dim);
  flex-shrink: 0;
}
.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.cart-drawer__subtotal strong { color: var(--red-dark); font-size: 1.3rem; }
.cart-drawer__note { font-size: 0.8rem; color: var(--text-soft); margin-bottom: 14px; }

.cart-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--cream-line);
}
.cart-line:last-child { border-bottom: none; padding-bottom: 0; }
.cart-line__info { display: flex; flex-direction: column; gap: 3px; }
.cart-line__info strong { font-family: var(--font-display); font-size: 1rem; }
.cart-line__meta { font-size: 0.82rem; color: var(--text-soft); }
.cart-line__price { font-size: 0.78rem; color: var(--ink-mute); }
.cart-line__controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.cart-line__stepper { display: flex; align-items: center; gap: 10px; }
.cart-line__step {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.cart-line__step:hover { background: var(--ink); color: var(--cream); }
.cart-line__qty { min-width: 18px; text-align: center; font-weight: 700; }
.cart-line__total { color: var(--red-dark); font-size: 0.98rem; white-space: nowrap; }
.cart-line__remove { font-size: 0.78rem; color: var(--ink-mute); text-decoration: underline; }
.cart-line__remove:hover { color: var(--red); }

/* ---------------------------------------------------------
   Modal — shared by the item detail modal and Custom Pizza builder
   --------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(36, 18, 9, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 480px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 28px;
}
.modal h3 { margin-bottom: 8px; padding-right: 36px; }

/* Added by scripts/cart.js openModal() itself (not per-builder), so every
   modal gets the same close control automatically. */
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cream-dim);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.modal__close:hover { background: var(--red); color: var(--cream); }

/* ---------------------------------------------------------
   Item detail modal — opened from a .menu-compact-card click
   --------------------------------------------------------- */
.item-modal__photo-wrap {
  margin: -28px -28px 18px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.item-modal__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.item-modal__photo-wrap .photo-placeholder { aspect-ratio: 16 / 10; }
.item-modal__desc { color: var(--text-soft); font-size: 0.94rem; margin-bottom: 20px; }
.item-modal__section-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--green-dark); margin-bottom: 12px; }

.item-modal__sizes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.item-modal__size-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--cream-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.item-modal__size-option:has(input:checked) { border-color: var(--red); background: var(--red-tint); }
.item-modal__size-option input { accent-color: var(--red); width: 18px; height: 18px; flex-shrink: 0; }
.item-modal__size-info { display: flex; justify-content: space-between; align-items: center; flex: 1; font-weight: 600; }
.item-modal__size-price { color: var(--red-dark); }

.item-modal__add:disabled { opacity: 0.55; cursor: not-allowed; }
.item-modal__add:disabled:hover { transform: none; }

.custom-builder__hint { font-size: 0.85rem; color: var(--text-soft); margin-bottom: 18px; }
.custom-builder__sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.cb-size {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 12px 8px;
  border: 2px solid var(--cream-line);
  border-radius: var(--radius-md);
  font-size: 0.86rem;
  font-weight: 600;
}
.cb-size strong { color: var(--red-dark); }
.cb-size.is-selected { border-color: var(--red); background: var(--red-tint); }

.custom-builder__toppings { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.cb-group h4 { font-family: var(--font-display); font-size: 0.98rem; color: var(--green-dark); margin-bottom: 10px; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1.5px solid var(--cream-line);
  border-radius: 999px;
  font-size: 0.84rem;
  cursor: pointer;
}
.cb-chip input { accent-color: var(--red); }
.cb-chip:has(input:checked) { border-color: var(--red); background: var(--red-tint); }

.custom-builder__summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-top: 2px solid var(--cream-line);
  margin-bottom: 16px;
  font-size: 1.05rem;
}
.custom-builder__summary strong { color: var(--red-dark); font-size: 1.3rem; }

.custom-pizza-cta { text-align: center; margin-top: 32px; }

/* ---------------------------------------------------------
   Checkout page
   --------------------------------------------------------- */
.checkout-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
}
@media (max-width: 860px) { .checkout-grid { grid-template-columns: 1fr; } }

.checkout-form { display: flex; flex-direction: column; gap: 24px; }
.checkout-section {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.checkout-section h2 { font-size: 1.25rem; margin-bottom: 18px; }

.fulfillment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .fulfillment-options { grid-template-columns: 1fr; } }
.fulfillment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 2px solid var(--cream-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 700;
}
.fulfillment-option:has(input:checked) { border-color: var(--red); background: var(--red-tint); }
.fulfillment-option input { accent-color: var(--red); width: 18px; height: 18px; }

.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-field:last-child { margin-bottom: 0; }
.form-field label { font-weight: 700; font-size: 0.88rem; }
.form-field__optional { font-weight: 400; color: var(--text-soft); }
.form-field input, .form-field textarea {
  padding: 12px 14px;
  border: 2px solid var(--cream-line);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
}
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--red);
}

.form-field.has-error input,
.form-field.has-error textarea {
  border-color: var(--red);
}

.form-error {
  background: var(--red-tint);
  color: var(--red-dark);
  border: 2px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.92rem;
}

/* Delivery-address distance-check feedback (scripts/checkout.js) — sits
   right under the address input, so it reads as a smaller, inline sibling
   of .form-error rather than a duplicate page-level banner. */
.form-field__hint {
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-weight: 600;
  font-size: 0.85rem;
}
.form-field__hint.is-checking { background: var(--cream-line); color: var(--text-soft); }
.form-field__hint.is-ok { background: var(--green-tint); color: var(--green-dark); }
.form-field__hint.is-error { background: var(--red-tint); color: var(--red-dark); }

.pay-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--green-tint);
  border: 2px solid var(--green);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-weight: 700;
  color: var(--green-dark);
}
.pay-notice svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--green); margin-top: 1px; }

.order-summary {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
.order-summary h2 { font-size: 1.2rem; margin-bottom: 18px; }
.order-summary__items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--cream-line);
}
.order-summary__item { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; }
.order-summary__item-name { display: block; font-weight: 600; }
.order-summary__item-meta { display: block; font-size: 0.78rem; color: var(--text-soft); font-weight: 400; }
.order-summary__totals { display: flex; flex-direction: column; gap: 8px; }
.order-summary__row { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--text-soft); }
.order-summary__row.is-total {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
  padding-top: 10px;
  border-top: 2px solid var(--ink);
  margin-top: 4px;
}
.order-summary__row.is-total strong { color: var(--red-dark); }

.checkout-confirmation { text-align: center; max-width: 560px; margin: 0 auto; padding: 40px 0; }
.checkout-confirmation__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.checkout-confirmation__icon svg { width: 36px; height: 36px; }

/* ---------------------------------------------------------
   Motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); animation: reveal-up 0.7s ease forwards; }
  .reveal-d1 { animation-delay: 0.08s; }
  .reveal-d2 { animation-delay: 0.16s; }
  .reveal-d3 { animation-delay: 0.24s; }
}
@keyframes reveal-up { to { opacity: 1; transform: translateY(0); } }

/* Scroll-triggered fade-in for major sections (see scripts/include.js,
   initScrollReveal). Gentle ease-in only — no slide/bounce. */
.fade-in-section {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-in-section { opacity: 1; transform: none; transition: none; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}