/* ── SECTIONS: the rest of the page in the new design language ──
   Loaded after styles.css and home.css. Same visual system as the top section:
   rounded paper cards, sticker badges, mono details, Bricolage headings,
   yellow / cream / charcoal bands with a wavy edge. */

:root {
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V18C1320 40 1200 40 1080 22S840 4 720 22 480 44 360 24 120 6 0 30Z'/%3E%3C/svg%3E");
  --card-radius: 20px;
}

/* ───────────── shared section system ───────────── */

section { padding-top: 5.5rem; padding-bottom: 5rem; }

.section-label {
  font: 500 .74rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ember-deep); margin-bottom: .5rem;
}

.section-title {
  font: 800 clamp(2rem, 4.6vw, 3.2rem)/1 var(--display); letter-spacing: -0.04em;
  margin-bottom: .6rem; color: var(--char);
}

/* a band's top edge is the previous band's colour, with a wavy lower border */

.offers-section, .spin-section, .reviews-section, .info-section, .contact-section { position: relative; padding-top: 6.5rem; }

.offers-section::before, .reviews-section::before, .info-section::before, .contact-section::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38px; z-index: 0; pointer-events: none;
  background: var(--wave-from, var(--dough));
  -webkit-mask: var(--wave-mask) center / 100% 100% no-repeat; mask: var(--wave-mask) center / 100% 100% no-repeat;
}

/* spin-section already uses ::before for its glow, so its wave sits on a dedicated element */

.spin-section { padding-top: 6.5rem; }

.offers-section  { background: var(--sun-soft); --wave-from: var(--dough); }

.spin-section    { background: var(--char); }

.reviews-section { background: var(--dough); --wave-from: var(--char); }

.info-section    { background: var(--sun-soft); --wave-from: var(--dough); }

.contact-section { background: var(--char); color: #fff; --wave-from: var(--sun-soft); }

.menu-section    { background: var(--dough); }

/* ───────────── MENU ───────────── */

.menu-header { align-items: flex-end; margin-bottom: 1.6rem; }

.menu-sizes {
  border: 1.5px solid var(--char); border-radius: 16px; background: var(--paper); overflow: hidden;
  box-shadow: 4px 4px 0 var(--char);
}

.menu-sizes-label { background: var(--sun) !important; color: var(--char) !important; }

.menu-sizes-label .sizes-sub { font: 600 .74rem/1.2 var(--mono); letter-spacing: .06em; color: var(--char); }

.menu-sizes-label.meal-label { background: var(--ember-deep) !important; }

.menu-sizes-label.meal-label .sizes-sub { color: #fff; }

.size-badge { border-left: 1.5px dashed var(--crust); }

.size-badge .size-in { font: 700 1.1rem/1 var(--display); color: var(--char); letter-spacing: -0.02em; }

.size-badge .size-name { font: 500 .62rem/1.2 var(--mono); letter-spacing: .08em; color: var(--ash); }

.meal-headline { font: 700 .95rem/1.2 var(--display); }

.meal-price { color: var(--ember-deep); }

.meal-subline { font-size: .78rem; color: var(--ash); }

.menu-category { margin-bottom: 2.6rem; }

.menu-category-title {
  display: flex; align-items: center; gap: .5rem;
  font: 800 1.5rem/1.1 var(--display); letter-spacing: -0.03em; text-transform: none; color: var(--char);
  border: 0; padding: 0; margin: 0 0 1rem;
}

.menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; background: none; border: 0; }

.menu-item {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "left img" "price img";
  gap: 4px 14px; align-content: start; align-items: start; min-height: 148px;
  padding: 16px; background: var(--paper); border: 1.5px solid var(--crust); border-radius: var(--card-radius);
  box-shadow: none; transition: border-color .15s ease, transform .18s var(--ease-out);
}

.menu-item:hover { background: var(--paper); transform: none; box-shadow: none; }

.menu-item-left { grid-area: left; margin: 0; min-width: 0; }

.menu-item-name { font: 700 1.05rem/1.2 var(--display); letter-spacing: -0.02em; margin-bottom: .25rem; }

.menu-item-desc { font-size: .84rem; line-height: 1.45; color: var(--ash);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.menu-item-price { grid-area: price; align-self: end; font: 500 .95rem/1.2 var(--mono); color: var(--ember-deep); letter-spacing: -0.01em; white-space: normal; }

.menu-item-price .price-note { display: block; text-align: left; font: 500 .66rem/1.3 var(--mono); letter-spacing: .04em; color: var(--ash); margin-top: 2px; }

.menu-item-img, .menu-item:hover .menu-item-img {
  grid-area: img; width: 108px; height: 108px; margin: 0; border-radius: 16px; object-fit: cover; box-shadow: none; transform: none; align-self: start;
}

@media (hover: hover) and (pointer: fine) {
  .menu-item:hover { border-color: var(--char); }
}

/* badges: the whole menu is veg, so the VEG tag is just noise */

.badge-row { gap: .35rem; margin: .4rem 0 0; flex-wrap: wrap; }

.badge { font: 700 .66rem/1 var(--display); letter-spacing: 0; text-transform: none; padding: 5px 9px; border-radius: 999px; border: 1.5px solid var(--char); }

.badge-veg { display: none; }

.badge-best { background: var(--sun); color: var(--char); box-shadow: 1.5px 1.5px 0 var(--char); }

.badge-spicy { background: #FFE3DD; color: var(--brick); border-color: var(--brick); }

/* add button: a round yellow "+" on the photo's corner */

.add-row { position: static; margin: 0; display: block; }

.add-btn {
  position: absolute; right: 8px; top: 96px; z-index: 2;
  width: 46px; height: 46px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--char); background: var(--sun); color: var(--char);
  box-shadow: 2px 2px 0 var(--char); font-size: 0; letter-spacing: 0;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease;
}

.add-btn svg { width: 20px; height: 20px; stroke-width: 2.6; }

.add-btn:hover { background: #fff; box-shadow: 2px 2px 0 var(--char); }

.add-btn:active { transform: scale(.94); box-shadow: 1px 1px 0 var(--char); }

.add-btn.active { background: #fff; }

.menu-item:not(:has(.menu-item-img)) .add-btn { top: auto; bottom: 14px; }

/* once in the cart, the "+" becomes a stepper at the same spot */

.menu-stepper {
  position: absolute; right: 8px; top: 98px; z-index: 2;
  border: 2px solid var(--char); border-radius: 999px; background: var(--sun); box-shadow: 2px 2px 0 var(--char); overflow: hidden;
}

.menu-item:not(:has(.menu-item-img)) .menu-stepper { top: auto; bottom: 14px; }

.stepper-btn { width: 34px; height: 40px; color: var(--char); font-size: 1.15rem; }

.stepper-btn:hover { background: rgba(26,26,24,.12); }

.stepper-count { color: var(--char); border-color: rgba(26,26,24,.35); font: 700 .9rem/40px var(--mono); min-width: 28px; }

.size-stepper-wrap { margin-top: .6rem !important; gap: .35rem !important; }

.size-pill-stepper { gap: .5rem; }

.sps-size-label { font: 600 .78rem var(--mono); width: 2.2rem; text-align: left; color: var(--char); }

.sps-qty-wrap { border: 1.5px solid var(--char); background: var(--sun); border-radius: 999px; box-shadow: none; }

.size-pill-stepper .sps-btn { color: var(--char); min-height: 32px; width: 30px; }

.size-pill-stepper .sps-btn:hover { background: rgba(26,26,24,.12); }

.size-pill-stepper .sps-count { color: var(--char); border-color: rgba(26,26,24,.35); font: 700 .82rem/32px var(--mono); }

/* flavour pills (drinks, garlic bread) */

.variant-pills-row { margin-top: .5rem; gap: .35rem; }

.variant-pill { font: 600 .72rem var(--body); padding: 6px 12px; min-height: 32px; border: 1.5px solid var(--crust); background: transparent; color: var(--char); border-radius: 999px; }

.variant-pill:hover { border-color: var(--char); color: var(--char); }

.variant-pill.active { background: var(--char); border-color: var(--char); color: #fff; }

/* quick bites jump links */

.qb-subnav { background: var(--sun-soft); border: 1.5px solid var(--crust); border-radius: 999px; padding: .5rem .7rem; margin: 0 0 1.6rem; }

.qb-sub-label { font: 500 .68rem var(--mono); letter-spacing: .08em; color: var(--ash); }

.qb-sub-btn { font: 600 .8rem var(--body); padding: 6px 14px; min-height: 36px; border: 1.5px solid var(--char); border-radius: 999px; background: transparent; color: var(--char); }

.qb-sub-btn:hover { background: #fff; color: var(--char); border-color: var(--char); }

.qb-sub-btn.active { background: var(--char); color: #fff; border-color: var(--char); box-shadow: none; }

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

@media (max-width: 480px) {
  .menu-item { padding: 14px; min-height: 140px; }
  .menu-item-img, .menu-item:hover .menu-item-img { width: 96px; height: 96px; }
  .add-btn { top: 86px; }
  .menu-stepper { top: 88px; }
}

/* ───────────── OFFER POSTERS ───────────── */

.offers-header .section-label { color: var(--ember-deep); }

.offers-header h2 { font: 800 clamp(2rem, 4.6vw, 3.2rem)/1 var(--display); letter-spacing: -0.04em; color: var(--char); }

/* ───────────── SPIN ───────────── */

.spin-section::before { background: radial-gradient(ellipse 60% 80% at 70% 50%, rgba(255,200,61,.10) 0%, transparent 70%); }

.spin-left .section-label { color: var(--sun); }

.spin-title { font: 800 clamp(2.2rem, 5vw, 3.8rem)/.98 var(--display); letter-spacing: -0.04em; color: #fff; }

.spin-title em { font-style: normal; color: var(--sun); }

.spin-sub { color: #CFC6BB; font-size: 1rem; line-height: 1.6; }

.spin-rules { flex-direction: row; flex-wrap: wrap; gap: 10px 12px; }

.spin-rules span {
  display: inline-flex; align-items: center; gap: .4rem; padding: 5px 13px; border-radius: 999px; background: var(--sun); color: var(--char);
  border: 2px solid var(--char); box-shadow: 2px 2px 0 rgba(255,255,255,.25); font: 700 .8rem var(--display); letter-spacing: -0.01em; transform: rotate(-1.5deg);
}

.spin-rules span:nth-child(2) { transform: rotate(1.5deg); background: #fff; }

.spin-rules span:nth-child(3) { transform: rotate(-1deg); background: var(--ember); color: #fff; }

.spin-btn { font: 800 .74rem var(--display); letter-spacing: .08em; border: 2px solid var(--char); }

.spin-result-card {
  background: var(--paper); color: var(--char); border: 1.5px solid var(--char); border-radius: var(--card-radius); box-shadow: 6px 6px 0 var(--ember);
}

.spin-result-label { font: 500 .74rem var(--mono); letter-spacing: .1em; color: var(--ember-deep); }

.spin-result-prize { font: 800 clamp(1.6rem, 4vw, 2.2rem)/1.05 var(--display); letter-spacing: -0.03em; color: var(--char); }

.spin-result-hint { color: var(--ash); }

.spin-wa-btn { border-radius: 999px; }

.spin-add-cart-btn { border-radius: 999px; }

.spin-again-hint { color: var(--ash); }

/* ───────────── REVIEWS ───────────── */

.reviews-header { margin-bottom: 2rem; }

.reviews-list { display: block; column-count: 3; column-gap: 16px; }

.review-card, .review-card:first-child {
  break-inside: avoid; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; margin: 0 0 16px; padding: 18px;
  background: var(--paper); border: 1.5px solid var(--crust); border-radius: var(--card-radius); box-shadow: none;
}

.review-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--char); font: 800 .9rem var(--display); border: 2px solid var(--char); }

.review-card:nth-child(3n+2) .review-avatar { background: var(--ember); color: #fff; }

.review-card:nth-child(3n) .review-avatar { background: var(--char); color: #fff; }

.review-name { font: 700 .98rem var(--display); letter-spacing: -0.02em; }

.review-stars { color: var(--ember-deep); font-size: .8rem; letter-spacing: .08em; }

.review-text { font-size: .9rem; line-height: 1.55; color: #3A3330; margin-top: .35rem; }

.review-photos { gap: 8px; margin-top: .75rem; }

.review-photo { width: 76px; height: 76px; border-radius: 12px; border: 1.5px solid var(--crust); }

.extra-reviews { display: none; }

.extra-reviews.open { display: contents; }

.reviews-toggle-btn {
  column-span: all; display: block; margin: .4rem auto 0; min-height: 46px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid var(--char); background: transparent; color: var(--char); font: 600 .9rem var(--body);
}

.reviews-toggle-btn:hover { background: var(--sun); color: var(--char); }

.reviews-footer { margin-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.reviews-powered { font: 500 .72rem var(--mono); letter-spacing: .06em; color: var(--ash); }

.reviews-see-all { font-weight: 600; color: var(--ember-deep); }

@media (max-width: 1000px) {
  .reviews-list { column-count: 2; }
}

@media (max-width: 640px) {
  .reviews-list { column-count: 1; }
}

/* ───────────── HOURS & LOCATION ───────────── */

.hours-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem .8rem; margin: 0 -.8rem; border: 0; border-bottom: 1.5px dashed var(--crust); border-radius: 10px; }

.hours-row .day { font: 600 .95rem var(--body); color: var(--char); }

.hours-row .time { font: 500 .88rem var(--mono); color: var(--ash); }

.hours-row.today { background: var(--sun); border-bottom-color: transparent; }

.hours-row.today .time { color: var(--char); font-weight: 500; }

.hours-open { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .9rem; padding: 6px 12px; border-radius: 999px; font: 600 .8rem var(--body); background: var(--sun-soft); border: 1.5px solid var(--char); }

.hours-open .dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--basil); }

.hours-open.closed .dot { background: var(--brick); }

/* ───────────── CONTACT ───────────── */

.contact-section .section-label { color: var(--sun); }

.contact-section .section-title { color: #fff; }

/* ───────────── FOOTER ───────────── */

footer { background: #0F0F0E; color: #A39A92; padding-top: 2.4rem; padding-bottom: 2.4rem; font-size: .82rem; letter-spacing: 0; }

footer span { color: var(--sun); }

footer a { color: #A39A92; }

/* ───────────── CART DRAWER ───────────── */

.cart-drawer { background: var(--dough); border-radius: 24px 0 0 24px; box-shadow: -12px 0 40px rgba(26,26,24,.25); }

.cart-header { border-bottom: 1.5px dashed var(--crust); background: transparent; }

.cart-header-title { font: 800 1.4rem/1 var(--display); letter-spacing: -0.03em; }

.cart-header-title span { color: var(--ember); }

.cart-header-count { background: var(--sun); color: var(--char); border: 2px solid var(--char); font: 700 .78rem var(--mono); }

.cart-close { border: 1.5px solid var(--char); background: transparent; color: var(--char); }

.cart-close:hover { background: var(--sun); }

.cart-clear-btn { font: 600 .8rem var(--body); color: var(--ash); }

.cart-empty p { font: 500 1rem var(--body); color: var(--ash); }

.cart-item { padding: 14px 0; border-bottom: 1.5px dashed var(--crust); }

.cart-item-name { font: 700 .98rem/1.25 var(--display); letter-spacing: -0.02em; }

.cart-item-size { font: 500 .72rem var(--mono); background: var(--sun-soft); border: 1.5px solid var(--crust); border-radius: 999px; padding: 2px 8px; color: var(--char); }

.cart-item-price { font: 500 .95rem var(--mono); color: var(--char); }

.cart-addon-tag { background: var(--sun-soft); border: 1.5px solid var(--crust); border-radius: 999px; color: var(--char); }

.cart-addon-edit, .cart-addon-add { font: 600 .74rem var(--body); color: var(--ember-deep); }

.qty-btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--char); background: transparent; color: var(--char); }

.qty-btn:hover { background: var(--sun); color: var(--char); border-color: var(--char); }

.qty-num { font: 700 .95rem var(--mono); }

.cart-fill-nudge { border-radius: 999px; background: var(--sun); color: var(--char); border: 2px solid var(--char); font: 700 .85rem var(--body); }

.cart-details-title { font: 800 1.15rem var(--display); letter-spacing: -0.02em; }

.cart-input { border: 1.5px solid var(--crust); border-radius: 14px; background: var(--paper); font: 400 1rem var(--body); color: var(--char); min-height: 48px; }

.cart-input:focus { outline: none; border-color: var(--char); box-shadow: 2px 2px 0 var(--char); }

.cart-note-label { font: 600 .82rem var(--body); }

.pickup-btn { border-radius: 999px; border: 1.5px solid var(--char); background: transparent; color: var(--char); font: 600 .85rem var(--body); min-height: 48px; }

.pickup-btn:hover, .pickup-btn.active { background: var(--sun); border-color: var(--char); color: var(--char); }

.cart-footer { background: var(--paper); border-top: 1.5px solid var(--char); }

.cart-total-label { font: 500 .8rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }

.cart-total-amount { font: 800 1.9rem/1 var(--display); letter-spacing: -0.03em; }

.cart-total-amount span { color: var(--char); }

.whatsapp-btn { border-radius: 999px; min-height: 54px; font: 700 1rem var(--body); letter-spacing: 0; text-transform: none; }

/* ───────────── ADD-ON POPUP ───────────── */

.addon-popup { background: var(--dough); border: 1.5px solid var(--char); border-radius: 24px; }

.addon-popup-label { font: 500 .72rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ember-deep); }

.addon-popup-pizza { font: 800 1.5rem/1.1 var(--display); letter-spacing: -0.03em; }

.addon-popup-hint { color: var(--ash); }

.addon-popup-group-title { font: 600 .84rem var(--body); color: var(--char); }

.popup-cheese, .popup-premium, .popup-veggie { font: 700 .66rem var(--display); border: 1.5px solid var(--char); border-radius: 999px; background: var(--sun); color: var(--char); padding: 3px 9px; }

.addon-popup-card { border: 1.5px solid var(--crust); border-radius: 16px; background: var(--paper); }

.addon-popup-card:hover { border-color: var(--char); }

.addon-popup-card.selected { border-color: var(--char); background: var(--sun-soft); box-shadow: 2px 2px 0 var(--char); }

.popup-card-name { font: 600 .84rem var(--body); }

.popup-card-price { font: 500 .8rem var(--mono); color: var(--ember-deep); }

.popup-card-check { background: var(--basil); }

.addon-popup-footer { border-top: 1.5px dashed var(--crust); background: transparent; }

.addon-popup-skip { border-radius: 999px; border: 1.5px solid var(--char); background: transparent; color: var(--char); font: 600 .95rem var(--body); min-height: 50px; }

.addon-popup-skip:hover { background: #fff; }

.addon-popup-done { border-radius: 999px; background: var(--ember-deep); color: #fff; font: 700 .95rem var(--body); min-height: 50px; border: 0; }

.addon-popup-done:hover { background: #8d3a00; }

/* add-on popup: the old one was dark — every colour that assumed a dark background is reset */

.addon-popup-overlay { background: rgba(26,26,24,.5); }

.addon-popup-handle::before { background: var(--crust); }

.addon-popup-pizza { color: var(--char); }

.addon-popup-hint { color: var(--ash); font-size: .85rem; }

.addon-popup-group-title { color: var(--char); text-transform: none; letter-spacing: 0; font: 600 .86rem var(--body); display: flex; align-items: center; gap: .5rem; }

.addon-popup-group-title .addon-group-price { font: 500 .82rem var(--mono); color: var(--ember-deep); }

.addon-popup-grid { background: none; border: 0; gap: 8px; padding: 0; margin-bottom: 1rem; }

.addon-popup-card { background: var(--paper); color: var(--char); }

.addon-popup-card:hover { background: #fff; }

.addon-popup-card.selected { background: var(--sun-soft); }

.popup-card-name { color: var(--char); }

.popup-card-price { color: var(--ember-deep); font-size: .9rem; }

.popup-card-check { border-color: var(--crust); }

.addon-popup-card.selected .popup-card-check { background: var(--basil); border-color: var(--basil); color: #fff; }

.addon-popup-footer { background: var(--dough); border-top: 1.5px dashed var(--crust); }

.addon-popup-skip { color: var(--char); }

.addon-popup-skip:hover { border-color: var(--char); color: var(--char); }

@media (max-width: 480px) {
  .hours-row { gap: .5rem; }
  .hours-row .day { font-size: .88rem; }
  .hours-row .time { font-size: .76rem; white-space: nowrap; }
}

/* cart: Thapar student checkbox */

.stu-toggle { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: #FFF4D1; border: 1.5px solid var(--sun); cursor: pointer; font-size: .8rem; line-height: 1.35; }

.stu-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.stu-box { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 2px solid var(--char); background: #fff; display: grid; place-items: center; transition: background-color 140ms ease; }

.stu-box::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 160ms var(--ease-out); }

.stu-toggle input:checked + .stu-box { background: var(--char); }

.stu-toggle input:checked + .stu-box::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

.stu-toggle input:focus-visible + .stu-box { outline: 3px solid var(--ember); outline-offset: 2px; }

.stu-toggle b { display: block; font-weight: 700; color: var(--char); }

.stu-toggle small { display: block; margin-top: 2px; color: #5b564c; font-size: .74rem; }

/* spin section: a bigger wheel and bigger type, so it fills the band */

.spin-inner { max-width: 1280px; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 5rem); }

.spin-title { font-size: clamp(3rem, 8vw, 6.4rem); line-height: .94; margin-bottom: 1.2rem; }

.spin-sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 30em; }

.spin-prizes { margin: 0 0 1.4rem; max-width: 32em; font-size: .95rem; line-height: 1.6; color: #CFC6BB; }

.spin-prizes b { color: var(--sun); font-weight: 600; }

.spin-rules span { font-size: .95rem; padding: 8px 16px 8px 14px; }

.wheel-image { width: min(540px, 40vw); height: auto; aspect-ratio: 1; }

.spin-btn { width: 21%; height: auto; aspect-ratio: 1; font-size: clamp(.8rem, 1.4vw, 1.1rem); }

.spin-pointer { top: -18px; font-size: 2rem; }

@media (max-width: 900px) {
  .spin-inner { grid-template-columns: 1fr; }
  .wheel-image { width: min(86vw, 420px); }
  .spin-pointer { top: -14px; font-size: 1.7rem; }
}

@media (max-width: 900px) {
  .spin-rules { justify-content: center; }
  .spin-prizes { margin-inline: auto; }
}

/* menu title stays on the left even when the pizza-size box is hidden (every tab but Pizzas) */

.menu-header { justify-content: flex-start; }

.menu-header > :first-child { margin-right: auto; }

/* size label ("Regular", "Single", "Large") grows to its text instead of sliding under the stepper */

.sps-size-label { width: auto; min-width: 2.2rem; margin-right: .3rem; white-space: nowrap; }

/* "Jump to" row: same family as the Pizza Sizes / Make it a Meal / Garlic Bread boxes */

.qb-subnav { gap: 0; padding: 0; background: var(--paper); border: 1.5px solid var(--char); border-radius: 16px; box-shadow: 4px 4px 0 var(--char); overflow: hidden; align-items: stretch; flex-wrap: nowrap; }

.qb-sub-label { display: flex; align-items: center; padding: .7rem 1rem; background: var(--sun); color: var(--char); font: 700 .78rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; flex: none; }

.qb-sub-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 46px; padding: .5rem .6rem; border: 0; border-left: 1.5px dashed var(--crust); border-radius: 0; background: transparent; color: var(--char); font: 700 .88rem/1.1 var(--display); white-space: nowrap; transition: background-color 160ms ease, color 160ms ease; }

.qb-sub-btn:hover { background: var(--sun-soft); }

.qb-sub-btn.active { background: var(--char); color: #fff; border-left-color: var(--char); }

/* cart: notices, spin offer and the student box scroll with the form; the bottom panel is only the total and the order button */

.cart-extras { margin-bottom: 14px; }

.cart-extras > * { margin-bottom: 10px; }

.cart-eta { font-size: .78rem; color: var(--ash); }

.cart-eta strong { color: var(--char); }

.cart-footer { padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

.cart-footer .cart-total-row { margin-bottom: 8px; }

/* ───────────── MENU ROWS (menu-board list) ─────────────
   Each dish is a row: photo on the left, name and starting price on one line, then the
   description, the tag and the size buttons. Two columns on desktop with hairlines between
   rows, one column on phones. The markup and the cart wiring are unchanged; menu-wiring.js
   adds the .size-chips and .menu-from. */

.menu-category { margin-bottom: 2.2rem; }

.menu-category-title { font-size: 1.35rem; margin-bottom: .2rem; padding-bottom: .8rem; border-bottom: 1.5px solid var(--char); }

.menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }

.menu-item {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-areas: "img body"; gap: 0 18px; align-items: start;
  min-height: 0; padding: 18px 0; background: none; border: 0; border-bottom: 1px solid var(--crust); border-radius: 0;
}

.menu-item:hover { background: none; border-color: var(--crust); }

.menu-item:not(:has(.menu-item-img)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body"; }

.menu-item-left { grid-area: body; }

.menu-item-img, .menu-item:hover .menu-item-img { grid-area: img; width: 116px; height: 116px; border-radius: 14px; }

.menu-item-name { font-size: 1.1rem; margin-bottom: .3rem; }

.menu-item:has(.menu-from) .menu-item-name, .menu-item-left:has(+ .menu-item-price) .menu-item-name { padding-right: 5.5rem; }

/* the starting price, top right of the row (single-price dishes show their price; sized dishes show the chips instead) */

.menu-from, .menu-item-price { position: absolute; right: 0; top: 20px; grid-area: unset; align-self: auto; font: 700 1rem/1.2 var(--display); letter-spacing: -0.01em; color: var(--char); white-space: nowrap; }

.menu-from small { font: 500 .66rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ash); margin-right: 2px; }

.menu-item:has(.size-chips) .menu-item-price { display: none; }

.badge { border: 0; border-radius: 4px; padding: 4px 7px; font: 600 .66rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: none; }

.badge-best { background: var(--sun); color: var(--char); box-shadow: none; }

.badge-spicy { background: var(--brick); color: #fff; border: 0; }

/* sizes as buttons, each with its price */

.add-row { margin-top: 10px; display: block; }

.size-chips { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; max-width: 340px; }

.size-chip {
  min-height: 46px; padding: 6px 4px; border: 1.5px solid var(--crust); border-radius: 10px; background: var(--paper); color: var(--char);
  text-align: center; line-height: 1.15; cursor: pointer; font: inherit;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.size-chip small { display: block; font: 500 .66rem var(--mono); letter-spacing: .03em; color: var(--ash); }

.size-chip b { font: 600 .95rem var(--body); font-variant-numeric: tabular-nums; }

.size-chip:active { transform: scale(.96); }

@media (hover: hover) and (pointer: fine) {
  .size-chip:hover { background: var(--ember-deep); border-color: var(--ember-deep); color: #fff; }
  .size-chip:hover small { color: #FFD9C2; }
}

/* single-price dishes keep one Add button, now inline instead of floating on the photo */

.add-btn {
  position: static; width: auto; height: 40px; padding: 0 16px; gap: 6px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1.5px solid var(--char); background: var(--paper); color: var(--char); box-shadow: none; font: 600 .86rem var(--body);
}

.add-btn svg { width: 14px; height: 14px; stroke-width: 2.4; }

.add-row:has(.size-chips) .add-btn { display: none; }

@media (hover: hover) and (pointer: fine) {
  .add-btn:hover { background: var(--ember-deep); border-color: var(--ember-deep); color: #fff; box-shadow: none; }
}

.add-btn:active { transform: scale(.96); box-shadow: none; }

.menu-stepper { position: static; display: inline-flex; align-items: center; height: 40px; border: 1.5px solid var(--char); border-radius: 10px; background: var(--sun); box-shadow: none; }

.stepper-btn { height: 37px; }

.stepper-count { font: 700 .9rem/37px var(--mono); }

.menu-item:not(:has(.menu-item-img)) .add-btn, .menu-item:not(:has(.menu-item-img)) .menu-stepper { top: auto; bottom: auto; }

.size-stepper-wrap { margin-top: .5rem !important; }

@media (max-width: 900px) {
  .menu-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 480px) {
  .menu-item { grid-template-columns: 92px minmax(0, 1fr); gap: 0 14px; padding: 16px 0; }
  .menu-item-img, .menu-item:hover .menu-item-img { width: 92px; height: 92px; }
  .size-chips { max-width: none; }
  .menu-from, .menu-item-price { top: 18px; }
}

/* sized dishes: once a size is in the cart, its stepper sits beside the size buttons so the row keeps its height
   (it wraps underneath when the column is too narrow, and always on phones) */

@media (min-width: 601px) {
  .add-row:has(.size-chips) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .add-row:has(.size-chips) .size-chips { flex: 0 1 276px; min-width: 0; }
  .add-row:has(.size-chips) .size-stepper-wrap { margin-top: 0 !important; justify-content: center; }
}

/* ───────────── POLISH ─────────────
   Contact is a light section (the page already has its dark band in Spin; a second near-black block
   right before the footer read as an accident), and the footer text is big enough to read. */

.contact-section { background: var(--dough); color: var(--char); --wave-from: var(--sun-soft); }

.contact-section .section-label { color: var(--ember-deep); }

.contact-section .section-title { color: var(--char); }

footer { color: #CFC6BB; font-size: .95rem; line-height: 1.6; }

footer a { color: #CFC6BB; }

/* section reveals: start a little before the section reaches the screen, move less, and skip the motion when asked */

.reveal { transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }

.reveal.visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ───────────── REVIEWS: one featured review, the rating as a headline number ───────────── */

.reviews-header { align-items: flex-end; }

.reviews-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-count: auto; gap: 16px; align-items: start; }

.review-card, .review-card:first-child { margin: 0; break-inside: auto; }

.review-avatar { border: 0; }


.reviews-toggle-btn { grid-column: 1 / -1; justify-self: center; column-span: none; }

@media (max-width: 1000px) {
  .reviews-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .reviews-list { grid-template-columns: minmax(0, 1fr); }
}

.spin-result-card, .info-block { border-color: var(--crust); box-shadow: 0 22px 36px -26px rgba(120,53,15,.4); }

.menu-sizes, .qb-subnav { border-color: var(--crust); box-shadow: none; }

.spin-rules span { border: 0; box-shadow: none; transform: none; }

.card .tag, .card:nth-child(even) .tag { border: 0; border-radius: 4px; transform: none; box-shadow: none; padding: 5px 8px; font: 600 .66rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

.opt[aria-checked="true"], .pay-opt.on, .addon-popup-card.selected { box-shadow: none; }

.cta-main, .cta-main:active { box-shadow: none; }

.cta-main { border: 0; }

/* ───────────── 04 · cart bar on desktop (phones have the dock) ───────────── */

@media (min-width: 761px) {
  .cartbar { display: block; left: 0; right: 0; margin-inline: auto; width: min(720px, calc(100% - 48px)); }
  .cartbar-btn { background: var(--char); border-color: var(--char); box-shadow: 0 20px 40px -16px rgba(0,0,0,.55); }
  body.has-cartbar { padding-bottom: 84px; }
  body.has-cartbar .toast { bottom: 92px; }
}

/* ───────────── 05 · OFFERS: "On right now" is the page's dark deals zone (it runs into Spin) ───────────── */

.offers-section { background: var(--char); color: #F6E9D5; --wave-from: var(--dough); }

.offers-header { text-align: left; margin-bottom: 28px; }

.offers-header .section-label { color: var(--sun); justify-content: flex-start; }

.offers-header h2 { color: #fff; text-align: left; }

.onnow-sub { color: #C9B79F; margin-top: 10px; }

.onnow-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }

.onnow-big { display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 34px; border-radius: 22px; background: var(--sun); color: var(--char); }

.onnow-big h3 { font: 800 clamp(2rem, 3.6vw, 2.9rem)/1 var(--display); letter-spacing: -0.04em; max-width: 14ch; }

.onnow-big p { max-width: 38ch; }

.onnow-big .btn { align-self: flex-start; margin-top: auto; }

.onnow-big.off { background: #33261B; color: #fff; }

.onnow-live { display: inline-flex; align-items: center; gap: 8px; font: 500 .74rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.onnow-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brick); animation: ping-dot 1.6s ease-in-out infinite; }

.onnow-big.off .onnow-live::before { background: #C9B79F; animation: none; }

@keyframes ping-dot { 50% { opacity: .35; } }

.onnow-list { display: grid; gap: 12px; align-content: start; }

.onnow-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 1px solid #4A3A2C; border-radius: 16px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 160ms ease, transform 140ms var(--ease-out); }

.onnow-row:active { transform: scale(.985); }

.onnow-row b { display: block; font: 700 1.1rem/1.15 var(--display); letter-spacing: -0.02em; color: #fff; }

.onnow-row small { display: block; margin-top: 3px; font-size: .84rem; color: #C9B79F; }

.onnow-when { display: grid; justify-items: end; gap: 6px; flex: none; }

.onnow-when em { font: 500 .66rem/1 var(--mono); font-style: normal; letter-spacing: .07em; text-transform: uppercase; color: #C9B79F; }

.spill { font: 500 .66rem/1 var(--mono); font-style: normal; letter-spacing: .07em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; background: #EDE3D4; color: var(--ash); white-space: nowrap; }

.spill.live { background: #D8EEDC; color: var(--basil); }

.spill.later { background: #FDE7BD; color: #8A4B00; }

@media (hover: hover) and (pointer: fine) {
  .onnow-row:hover { border-color: var(--sun); }
}

.onnow-more { margin-top: 18px; }

.onnow-more a { color: var(--sun); font-weight: 600; text-decoration: none; border-bottom: 2px solid rgba(255,200,61,.5); }

.spin-section { padding-top: 4.5rem; border-top: 1px solid rgba(255,255,255,.08); }

@media (max-width: 900px) {
  .onnow-grid { grid-template-columns: minmax(0, 1fr); }
  .onnow-big { min-height: 0; padding: 24px; }
}

/* ───────────── 06 · FIND US: hours, address, contact and map in one panel; light footer ───────────── */

.visit { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 580px; overflow: hidden; border-radius: 24px; background: var(--paper); box-shadow: 0 22px 36px -26px rgba(120,53,15,.4); }

.visit-tx { position: relative; z-index: 2; display: grid; gap: 16px; align-content: start; width: min(430px, calc(100% - 48px)); margin: 24px; padding: clamp(22px, 3vw, 32px); background: var(--paper); border-radius: 18px; box-shadow: 0 24px 50px -20px rgba(40,20,5,.5); }

.visit .section-title { margin: 0; }

.visit .hours-open { margin: 0; width: max-content; }

.visit .hours-row { margin: 0; max-width: 420px; }

.visit-addr { font-style: normal; line-height: 1.7; color: #3A3330; }

.visit-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; color: var(--ash); }

.visit-links a { color: var(--char); font-weight: 500; }

.visit-cta { display: flex; flex-wrap: wrap; gap: 10px; }

.visit-map { position: absolute; inset: 0; background: #e6dfcf; }

.visit-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; visibility: hidden; }

.visit-map iframe.on { visibility: visible; }

.map-toggle { position: absolute; right: 16px; top: 16px; z-index: 3; display: flex; padding: 4px; border-radius: 12px; background: var(--paper); box-shadow: 0 6px 18px -8px rgba(40,20,5,.5); }

.map-toggle button { font: 600 .82rem var(--body); border: 0; background: transparent; color: var(--char); padding: 8px 14px; border-radius: 9px; cursor: pointer; transition: background .2s, color .2s; }

.map-toggle button.on { background: var(--char); color: #fff; }

.map-toggle button:focus-visible { outline: 3px solid var(--ember-deep); outline-offset: 2px; }

@media (max-width: 900px) {
  .visit { min-height: 0; grid-template-rows: 320px auto; }
  .visit-map { position: relative; inset: auto; grid-row: 1; }
  .visit-tx { grid-row: 2; width: auto; margin: 0; border-radius: 0; box-shadow: none; }
}

footer { background: var(--dough); color: var(--ash); border-top: 1px solid var(--crust); }

footer span { color: var(--ember-deep); }

footer a, .footer-links a { color: var(--char); }

.footer-links a:hover, footer a:hover { color: var(--ember-deep); }

.offers-header { max-width: none; margin: 0 0 28px; padding: 0; }

.onnow-more a, .onnow-more a:visited { color: var(--sun); }

.visit-cta .btn:not(.fill):not(.wa), .visit-cta .btn:not(.fill):not(.wa):visited { color: var(--char); }

.visit-cta .btn.wa { width: auto; padding: 0 17px; }

/* ── restored: reviews rating, spin wave, tickets row, tiles ── */
.spin-wave { position: absolute; left: 0; right: 0; top: 0; height: 38px; background: var(--sun-soft); pointer-events: none;
  -webkit-mask: var(--wave-mask) center / 100% 100% no-repeat; mask: var(--wave-mask) center / 100% 100% no-repeat; }
.reviews-rating {
  display: inline-flex; align-items: center; gap: .6rem; padding: 6px 14px; border-radius: 999px; background: var(--sun-soft);
  border: 1px solid var(--crust);
}
.reviews-rating-num { font: 800 1.5rem/1 var(--display); color: var(--char); }
.reviews-rating-stars { color: var(--ember-deep); letter-spacing: .08em; }

/* ── Offers: every offer is a photo card; the live one is large ── */
.onnow-grid { align-items: stretch; }
.onnow-big, .onnow-row { position: relative; isolation: isolate; overflow: hidden; color: #fff; }
.onnow-big { min-height: 400px; justify-content: flex-end; background: var(--warm, #33261B); }
.onnow-big > img, .onnow-row > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out, ease-out); }
.onnow-big::after, .onnow-row::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(26,26,24,.92) 10%, rgba(26,26,24,.4) 55%, rgba(26,26,24,.12)); }
.onnow-big h3 { color: #fff; max-width: 13ch; }
.onnow-big p { color: #EADFCB; }
.onnow-big .onnow-live { position: absolute; top: 24px; left: 28px; color: #fff; }
.onnow-big .btn { margin-top: 6px; }
.onnow-big.off > img { opacity: .55; }
.onnow-list { grid-auto-rows: 1fr; }
.onnow-row { min-height: 118px; padding: 16px 18px; align-items: flex-end; border-color: transparent; }
.onnow-row::after { background: linear-gradient(to right, rgba(26,26,24,.92) 20%, rgba(26,26,24,.66)); }
.onnow-tx { min-width: 0; }
.onnow-row small { color: #E3D7C3; }
.onnow-when { align-self: flex-start; }
.onnow-when em { color: #EADFCB; }
@media (hover: hover) and (pointer: fine) {
  .onnow-big:hover > img, .onnow-row:hover > img { transform: scale(1.04); }
  .onnow-row:hover { border-color: transparent; box-shadow: 0 0 0 2px var(--sun); }
}
@media (max-width: 900px) { .onnow-big { min-height: 320px; } .onnow-list { grid-auto-rows: auto; } }
@media (prefers-reduced-motion: reduce) { .onnow-big > img, .onnow-row > img { transition: none; } }

/* ── find us: tidy contact rows, all three buttons on one line ── */
.visit-tx { width: min(500px, calc(100% - 48px)); }
.visit-links { gap: 0; }
.visit-links li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1.5px dashed var(--crust); font: 500 .92rem var(--body); color: var(--char); }
.visit-links li::before { flex: 0 0 74px; font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.visit-links li:nth-child(1)::before { content: "Call"; }
.visit-links li:nth-child(2)::before { content: "Email"; }
.visit-links li:nth-child(3)::before { content: "Instagram"; }
.visit-links a { text-decoration: none; }
.visit-links a:hover { color: var(--ember-deep); text-decoration: underline; }
.visit-cta { flex-wrap: nowrap; gap: 8px; }
.visit-cta .btn, .visit-cta .btn.wa { flex: 1 1 0; width: auto; min-width: 0; justify-content: center; padding: 0 10px; white-space: nowrap; font-size: .85rem; }
@media (max-width: 420px) { .visit-cta { flex-wrap: wrap; } .visit-cta .btn, .visit-cta .btn.wa { flex: 1 1 45%; } .visit-cta .btn.wa { flex-basis: 100%; } }

/* ── find us: centre the pin in the part of the map the card doesn't cover ── */
@media (min-width: 901px) {
  #mapFrame { left: 0; width: calc(100% + 520px); }
}

/* offers and spin are both dark: no cream wave between them */
.spin-wave { display: none; }
.spin-section { border-top: 0; }

/* ── offers: cards drift and rise in ── */
@keyframes offer-drift-a { from { transform: scale(1.05) translate3d(0, 0, 0); } to { transform: scale(1.15) translate3d(-2.5%, -2%, 0); } }
@keyframes offer-drift-b { from { transform: scale(1.15) translate3d(-2%, 1.5%, 0); } to { transform: scale(1.05) translate3d(1.5%, -1%, 0); } }
@keyframes offer-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
.onnow-big > img, .onnow-row > img { will-change: transform; animation: offer-drift-a 16s ease-in-out infinite alternate; }
.onnow-row:nth-child(even) > img { animation-name: offer-drift-b; animation-duration: 19s; }
.onnow-row:nth-child(3n) > img { animation-delay: -6s; }
.onnow-big:hover > img, .onnow-row:hover > img { transform: none; }
.onnow-row { transition: border-color 160ms ease, transform 220ms var(--ease-out, ease-out), box-shadow 220ms ease; }
@media (hover: hover) { .onnow-row:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--sun), 0 16px 28px -14px rgba(0,0,0,.7); } }
@supports (animation-timeline: view()) {
  .onnow-big, .onnow-row { animation: offer-rise linear backwards; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .onnow-big > img, .onnow-row > img, .onnow-big, .onnow-row { animation: none; }
}

/* ── offers: rotating big card, list on the right picks one ── */
#onNowMain { display: grid; }
.onnow-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 700ms ease, visibility 0s linear 700ms; }
.onnow-slide.on { opacity: 1; visibility: visible; transition: opacity 700ms ease; }
.onnow-slide > img { animation-play-state: paused; }
.onnow-slide.on > img { animation-play-state: running; }
.onnow-meta { font: 500 .78rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #EADFCB; opacity: .85; }
.onnow-note { align-self: flex-start; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); font: 600 .8rem/1.2 var(--body); color: #fff; }
.onnow-row { overflow: hidden; }
.onnow-row.on { box-shadow: 0 0 0 2px var(--sun); }
.onnow-row::before { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--sun); transform: scaleX(0); transform-origin: left; z-index: 1; }
.onnow-row.on::before { animation: onnow-prog 6s linear forwards; }
.onnow-grid.paused .onnow-row.on::before { animation-play-state: paused; }
@keyframes onnow-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .onnow-slide, .onnow-slide.on { transition: none; } .onnow-row.on::before { animation: none; transform: scaleX(1); } }
@media (max-width: 900px) {
  .onnow-list { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .onnow-row { flex: 0 0 min(260px, 78%); scroll-snap-align: start; }
}

/* ── spin prize reminders: free topping on pizza cards and in the add-on sheet, free 250 ml drink, FREE tag in the cart ── */
.badge-free { background: var(--sun, #ffc83d); color: var(--char, #1a1a18); border: 1px solid var(--char, #1a1a18); font-weight: 700; }
.size-chip.is-free { border-color: var(--basil, #1b7f3b); background: color-mix(in srgb, var(--basil, #1b7f3b) 9%, var(--paper, #fffcf6)); }
.size-chip.is-free b { color: var(--basil, #1b7f3b); }
.menu-item-price.is-free { text-decoration: line-through; text-decoration-color: var(--basil, #1b7f3b); opacity: .6; }
.popup-card-price s { opacity: .5; margin-right: 2px; }
.popup-card-price .pf { color: var(--basil, #1b7f3b); font-weight: 800; letter-spacing: .02em; }
.cart-addon-tag.is-free { border-color: var(--basil, #1b7f3b); }
.cart-addon-tag.is-free em { color: var(--basil, #1b7f3b); font-style: normal; font-weight: 700; }

/* ── spin section: the pay table (the same icons as the reels) ── */
.pay { margin: 0 0 1.4rem; max-width: 36em; }
.pay-head { margin: 0 0 .75rem; font: 500 .74rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--sun); }
.pay-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.pay-list li { display: flex; align-items: center; gap: 12px; font: 600 .9rem/1.25 var(--body); color: var(--dough); }
.pay-reel { display: inline-flex; flex: none; gap: 3px; padding: 4px 5px; border-radius: 10px; background: var(--paper); box-shadow: 0 6px 14px -8px rgba(0,0,0,.6); }
.pi { width: 26px; height: 26px; }
@media (max-width: 560px) { .pay-list { grid-template-columns: minmax(0, 1fr); } }
.pay-list li > span:last-child { text-align: left; }

/* ── header into hero: no hard edge. The top of the yellow band fades up from the header's own cream. ── */
.live-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 110px; pointer-events: none;
  background: linear-gradient(to bottom, var(--dough) 0%, color-mix(in srgb, var(--dough) 55%, transparent) 38%, transparent 100%); }
@media (max-width: 760px) { .live-band::before { height: 84px; } }

/* ── soft edges: nothing in the page ends in a hard line ──────────────────────────────────────
   One idea, used everywhere: a colour fades into the next instead of being cut. --edge is the height of the
   fade under the two sticky bars; section joins use a taller fade (they are the whole transition). */
:root { --edge: 26px; }

/* the sticky header and the sticky menu search/chips bar: content dissolves under them, no slicing */
.bar::after, .tools::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--edge); pointer-events: none;
  background: linear-gradient(to bottom, var(--dough) 0%, color-mix(in srgb, var(--dough) 70%, transparent) 30%, color-mix(in srgb, var(--dough) 28%, transparent) 65%, transparent 100%); }

/* the join into each section: the previous section's colour fades out over the top of the new one (replaces the waves) */
.offers-section::before, .reviews-section::before, .info-section::before, .contact-section::before {
  height: 6.25rem; -webkit-mask: none; mask: none;
  background: linear-gradient(to bottom,
    var(--wave-from, var(--dough)) 0%,
    color-mix(in srgb, var(--wave-from, var(--dough)) 86%, transparent) 16%,
    color-mix(in srgb, var(--wave-from, var(--dough)) 58%, transparent) 38%,
    color-mix(in srgb, var(--wave-from, var(--dough)) 24%, transparent) 66%,
    transparent 100%);
}

/* the yellow hero: no wave at the bottom, it melts into the cream menu area instead */
.live-band .wave { display: none; }
.live-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--dough) 30%, transparent) 40%, color-mix(in srgb, var(--dough) 75%, transparent) 75%, var(--dough) 100%); }
@media (max-width: 760px) { :root { --edge: 20px; } .live-band::after { height: 56px; } }

/* ── menu search + categories on desktop: a bigger search on its own row, every category visible under it (no sideways scrolling) ── */
@media (min-width: 761px) {
  .tools-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search veg" "chips chips"; align-items: center; gap: 12px 24px; padding-top: 16px; padding-bottom: 14px; }
  .search { grid-area: search; flex: none; max-width: 760px; }
  .search svg { left: 20px; width: 22px; height: 22px; }
  .search input { min-height: 56px; padding: 0 22px 0 54px; font-size: 1.05rem; border-width: 2px; }
  .search-clear { right: 10px; }
  .veg { grid-area: veg; justify-self: end; white-space: nowrap; }
  .chips { grid-area: chips; flex-wrap: wrap; overflow: visible; gap: 10px; padding: 2px 0; scroll-snap-type: none; }
}

/* ── softer edges (round two): taller, eased fades so no band or edge is visible ── */
:root { --edge: 54px; --join: 9rem; }

/* under the sticky bars: the cream eases out over a longer distance (no milky smear over dark sections) */
.bar::after, .tools::after { height: var(--edge);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--dough) 100%, transparent) 0%,
    color-mix(in srgb, var(--dough) 94%, transparent) 10%,
    color-mix(in srgb, var(--dough) 82%, transparent) 22%,
    color-mix(in srgb, var(--dough) 62%, transparent) 38%,
    color-mix(in srgb, var(--dough) 40%, transparent) 55%,
    color-mix(in srgb, var(--dough) 20%, transparent) 72%,
    color-mix(in srgb, var(--dough) 7%, transparent) 88%,
    color-mix(in srgb, var(--dough) 0%, transparent) 100%); }

/* into each section: an even, eased colour ramp from the previous section to this one (in perceptual colour space, so dark to light has no muddy band) */
.offers-section { --wave-to: var(--char); padding-top: 10rem; }
.reviews-section { --wave-to: var(--dough); padding-top: 10rem; }
.info-section { --wave-to: var(--sun-soft); --join: 6.5rem; }
.offers-section::before, .reviews-section::before, .info-section::before {
  height: var(--join);
  background: linear-gradient(in oklab to bottom,
    color-mix(in oklab, var(--wave-from, var(--dough)) 100%, var(--wave-to)) 0%,
    color-mix(in oklab, var(--wave-from, var(--dough)) 94%, var(--wave-to)) 10%,
    color-mix(in oklab, var(--wave-from, var(--dough)) 82%, var(--wave-to)) 22%,
    color-mix(in oklab, var(--wave-from, var(--dough)) 62%, var(--wave-to)) 38%,
    color-mix(in oklab, var(--wave-from, var(--dough)) 40%, var(--wave-to)) 55%,
    color-mix(in oklab, var(--wave-from, var(--dough)) 20%, var(--wave-to)) 72%,
    color-mix(in oklab, var(--wave-from, var(--dough)) 7%, var(--wave-to)) 88%,
    color-mix(in oklab, var(--wave-from, var(--dough)) 0%, var(--wave-to)) 100%); }

@media (max-width: 760px) {
  :root { --edge: 38px; --join: 7rem; }
  .offers-section, .reviews-section { padding-top: 8.5rem; }
  .info-section { --join: 5.5rem; }
}

/* the header ends in a plain straight edge (the fade under it is gone); the search bar keeps its soft edge */
.bar::after { content: none; }

/* ── layered soft hills: the wave comes back, in three feathered layers instead of one hard cut ──
   Each join is the previous section's colour, masked by three stacked wave shapes of different strength,
   over the smooth colour fade above, so the silhouette is there but no edge is. */
:root {
  --hills-top: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20120'%20preserveAspectRatio='none'%3E%3Cfilter%20id='b'%20x='-10%25'%20y='-60%25'%20width='120%25'%20height='220%25'%3E%3CfeGaussianBlur%20stdDeviation='5'/%3E%3C/filter%3E%3Cg%20filter='url%28%23b%29'%3E%3Cpath%20fill-opacity='0.14'%20d='M-60%20-60H1500V104H1440C1270%20118%201130%20108%20950%20106S650%20100%20500%20112%20210%20118%200%20108H-60Z'/%3E%3Cpath%20fill-opacity='0.32'%20d='M-60%20-60H1500V88H1440C1290%20106%201150%2090%20980%2084S690%2094%20530%2094%20220%2080%200%2092H-60Z'/%3E%3Cpath%20fill-opacity='0.62'%20d='M-60%20-60H1500V66H1440C1310%2084%201170%2062%201010%2058S720%2072%20560%2068%20240%2046%200%2070H-60Z'/%3E%3Cpath%20fill-opacity='1.0'%20d='M-60%20-60H1500V42H1440C1330%2058%201210%2032%201050%2034S770%2052%20610%2046%20270%2024%200%2046H-60Z'/%3E%3C/g%3E%3C/svg%3E");
  --hills-bottom: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20120'%20preserveAspectRatio='none'%3E%3Cfilter%20id='b'%20x='-10%25'%20y='-60%25'%20width='120%25'%20height='220%25'%3E%3CfeGaussianBlur%20stdDeviation='5'/%3E%3C/filter%3E%3Cg%20filter='url%28%23b%29'%3E%3Cpath%20fill-opacity='0.14'%20d='M-60%20180H1500V16H1440C1270%202%201130%2012%20950%2014S650%2020%20500%208%20210%202%200%2012H-60Z'/%3E%3Cpath%20fill-opacity='0.32'%20d='M-60%20180H1500V32H1440C1290%2014%201150%2030%20980%2036S690%2026%20530%2026%20220%2040%200%2028H-60Z'/%3E%3Cpath%20fill-opacity='0.62'%20d='M-60%20180H1500V54H1440C1310%2036%201170%2058%201010%2062S720%2048%20560%2052%20240%2074%200%2050H-60Z'/%3E%3Cpath%20fill-opacity='1.0'%20d='M-60%20180H1500V78H1440C1330%2062%201210%2088%201050%2086S770%2068%20610%2074%20270%2096%200%2074H-60Z'/%3E%3C/g%3E%3C/svg%3E");
}
.offers-section::after, .reviews-section::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--join); z-index: 0; pointer-events: none;
  background: var(--wave-from, var(--dough));
  -webkit-mask: var(--hills-top) center / 100% 100% no-repeat; mask: var(--hills-top) center / 100% 100% no-repeat; }
/* the hero hands over to the cream menu area with the same hills rising from below */
.live-band::after { height: 96px; background: var(--dough);
  -webkit-mask: var(--hills-bottom) center / 100% 100% no-repeat; mask: var(--hills-bottom) center / 100% 100% no-repeat; }
@media (max-width: 760px) { .live-band::after { height: 72px; } }

/* the Find us panel hands over to the cream footer with the same hills rising from below */
footer { position: relative; border-top: 0; }
footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 96px; z-index: 0; pointer-events: none;
  background: var(--dough);
  -webkit-mask: var(--hills-bottom) center / 100% 100% no-repeat; mask: var(--hills-bottom) center / 100% 100% no-repeat; }
@media (max-width: 760px) { footer::before { height: 72px; } }

/* ── phone home: the menu starts sooner (Menu board layout), prize shown as a coupon strip ── */
.prize-strip { display: flex; flex-direction: column; gap: 2px; width: min(100% - 32px, 1100px); margin: 14px auto 4px; padding: 10px 14px; border: 1.5px dashed var(--ember); border-radius: 14px; text-decoration: none; color: var(--ember-deep);
  background: repeating-linear-gradient(135deg, #fff 0 8px, var(--sun-soft) 8px 16px); }
.prize-strip b { font: 500 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.prize-strip span { font: 600 .84rem/1.35 var(--body, 'DM Sans', sans-serif); color: var(--char); }

@media (max-width: 760px) {
  .top { padding-top: 12px; padding-bottom: 40px; }
  .top h1 { font-size: 1.9rem; margin: 4px 0 8px; }
  .hero .lede { display: none; }
  .hero-cta { margin-bottom: 14px; }
  .hero-rating { display: none; }
  .hero .eyebrow { font-size: .62rem; }
  /* the category photo circles sit right under the hero, above the offer cards */
  .live-grid { display: flex; flex-direction: column; row-gap: 14px; }
  .live-grid .reorder { order: -3; width: 100%; box-sizing: border-box; align-self: stretch; }
  .live-grid .quick-tiles { order: -2; width: 100%; min-width: 0; box-sizing: border-box; }
  .live-grid .student-card { order: 9; }
  .quick-tiles h2 { display: none; }
  .ticket.primary .tbody { padding: 14px 16px 16px; }
  .quick .student-card { padding: 10px 12px; }
}

/* the Spin glow fades in from nothing at the top, so it never leaves a line where Offers ends */
.spin-section::before { -webkit-mask: linear-gradient(to bottom, transparent 0, #000 240px); mask: linear-gradient(to bottom, transparent 0, #000 240px); }

/* Offers and Spin are the same dark: overlap by a pixel so a fractional page height can't show the cream behind as a hairline */
.spin-section { margin-top: -1px; }

/* phones: reviews are a swipe row (next card peeks in) instead of a long stack */
@media (max-width: 760px) {
  .reviews-list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 10px; scroll-padding-inline: 16px; scrollbar-width: none; align-items: stretch; overscroll-behavior-x: contain; }
  .reviews-list::-webkit-scrollbar { display: none; }
  .extra-reviews, .extra-reviews.open { display: contents; }
  .reviews-toggle-btn { display: none; }
  .reviews-list .review-card { flex: 0 0 84%; scroll-snap-align: start; margin: 0; }
  .reviews-list .review-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; line-clamp: 9; overflow: hidden; }
  .reviews-list .review-photos { flex-wrap: nowrap; }
}

/* desktop: the live offers fit on one screen (header, big card and every row, no scrolling to see them) */
@media (min-width: 901px) {
  .offers-section { padding-top: 7.5rem; }
  .offers-header { margin-bottom: 18px; }
  .offers-header h2 { font-size: clamp(2rem, 3.4vw, 2.6rem); }
  .onnow-sub { margin-top: 6px; }
  .onnow-grid { gap: 14px; }
  .onnow-big { min-height: 0; padding: 26px 28px; }
  .onnow-big h3 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
  .onnow-list { gap: 10px; }
  .onnow-row { min-height: 0; padding: 12px 16px; }
  .onnow-row b { font-size: 1.02rem; }
  .onnow-row small { font-size: .8rem; margin-top: 2px; }
}

.clock-section { position: relative; background: var(--char); padding: 0 var(--gutter) 3rem; }
.clock-section .clock { margin: 0 auto; max-width: 1100px; color: var(--char); }
@media (max-width: 760px) { .clock-section { padding: 0 16px 2.5rem; } }

/* Offers on desktop: one tall lead card on the left, the four offers as rows on the right, and the week link as the last box */
@media (min-width: 901px) {
  .onnow-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
  #onNowMain { grid-row: 1 / span 2; display: grid; }
  .onnow-big { min-height: 440px; }
  .onnow-more { grid-column: 2; margin: 0; }
  .onnow-more a { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1.5px solid rgba(255,200,61,.5); border-radius: 16px; border-bottom: 1.5px solid rgba(255,200,61,.5); }
}

/* ── Offers by the clock: hidden until "See the full week" is pressed; opens as a dark panel that matches the section ── */
.clock-section { padding: 0 var(--gutter); }
.clock-section:has(.clock[open]) { padding-bottom: 3.5rem; }
.clock-section .clock:not([open]) > summary { display: none; }
.clock-section .clock { margin: 0 auto; max-width: 1100px; background: #221F1B; color: #F6E9D5; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; box-shadow: 0 30px 50px -30px rgba(0,0,0,.7); }
.clock-section .clock > summary { padding: 20px 24px 8px; }
.clock-section .clock > summary h2 { color: #fff; font-size: 1.35rem; }
.clock-section .clock .rule-note { color: #C9B79F; }
.clock-section .clock .chev { color: var(--sun); }
.clock-section .clock-body { padding: 4px 24px 22px; }
.clock-section .clock-hint { color: #C9B79F; }
.clock-section .dchip { border-color: rgba(255,255,255,.22); color: #F6E9D5; }
.clock-section .dchip[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: var(--char); }
.clock-section .dchip.today::after { background: var(--sun); }
.clock-section .dchip[aria-pressed="true"].today::after { background: var(--ember-deep); }
.clock-section .lane { border-top-color: rgba(255,255,255,.1); }
.clock-section .lane-label span, .clock-section .tick { color: #C9B79F; }
.clock-section .lane-btn, .clock-section .lane-label b { color: #fff; text-decoration-color: rgba(255,255,255,.3); }
.clock-section .band.later { background: rgba(255,200,61,.14); border-color: var(--sun); color: var(--sun); }
.clock-section .band.done { background: rgba(255,255,255,.1); color: #C9B79F; }
.clock-section .band.off { border-color: rgba(255,255,255,.2); color: #C9B79F; }
.clock-section .needle { background: var(--sun); }
.clock-section .needle-tag { background: var(--sun); color: var(--char); }
.clock-section .clock-sum { background: rgba(255,200,61,.12); color: #F6E9D5; }
.clock-section .clock-sum.exploring { background: var(--sun); color: var(--char); border-color: var(--sun); }
.clock-section .btn-mini { border-color: var(--sun); }
@media (max-width: 760px) { .clock-section .clock > summary { padding: 16px 16px 6px; } .clock-section .clock-body { padding: 4px 16px 16px; } }

/* Google's own "Satellite" thumbnail sits in the bottom-left corner of the embedded map and can't be moved:
   slide the map 80px left inside its clipped frame (same centre) so the thumbnail falls outside the visible area */
.visit-map #mapFrame { left: -80px; width: calc(100% + 160px); }
@media (min-width: 901px) { .visit-map #mapFrame { left: -80px; width: calc(100% + 680px); } }
.visit-map { overflow: hidden; }

/* arriving at the menu from the nav: the heading lands below the soft fade under the sticky search bar, so it reads sharp straight away */
#menu { scroll-margin-top: 20px; }
.tools::after { height: 28px; }

/* "Jump to": a label and small pills, left aligned, instead of one stretched black bar */
.qb-subnav { gap: 8px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; align-items: center; justify-content: flex-start; margin: 0 0 1.4rem; }
.qb-sub-label { padding: 0 6px 0 0; background: none; color: var(--ash); font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.qb-sub-btn { flex: none; min-height: 38px; padding: 0 18px; border: 1.5px solid var(--crust); border-radius: 999px; background: var(--paper); color: var(--char); font: 700 .86rem/1 var(--display); }
.qb-sub-btn:hover { background: #fff; border-color: var(--char); }
.qb-sub-btn.active { background: var(--char); border-color: var(--char); color: #fff; }

/* ── the four info widgets beside "Our Menu" (pizza sizes, make it a meal, garlic bread, jump to): one look, one place ──
   same height, same border and radius, a yellow label tab on the left, the detail on the right */
.menu-sizes { min-height: 64px; border: 1.5px solid var(--crust); border-radius: 16px; background: var(--paper); box-shadow: none; overflow: hidden; align-items: stretch; }
.menu-sizes-variant, .menu-sizes .qb-subnav.visible { min-height: 61px; }
.menu-sizes-label, .menu-sizes-label.meal-label, .menu-sizes .qb-sub-label {
  display: flex; align-items: center; align-self: stretch; flex: none; padding: 0 20px; margin: 0;
  background: var(--sun) !important; color: var(--char) !important;
}
.menu-sizes-label .sizes-sub, .menu-sizes-label.meal-label .sizes-sub, .menu-sizes .qb-sub-label {
  font: 700 .74rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--char);
}
.menu-sizes-text { align-items: center; padding: 0 22px; font: 600 .92rem/1.25 var(--display); color: var(--char); }
.menu-sizes-text-center { justify-content: flex-start; text-align: left; }
.menu-sizes-text-stacked { justify-content: center; }
.size-badge { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 74px; padding: 0 14px; border-left: 1.5px dashed var(--crust); }
/* quick bites: the jump pills live in the same box */
.menu-sizes .qb-subnav { gap: 8px; margin: 0; padding: 0 16px 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; align-items: center; flex-wrap: nowrap; }
.menu-sizes .qb-sub-label { margin-right: 6px; }
.menu-sizes .qb-sub-btn { min-height: 36px; padding: 0 16px; }
@media (max-width: 760px) { .menu-sizes { align-self: stretch; } .menu-sizes-text { padding: 0 14px; font-size: .82rem; } .menu-sizes-label, .menu-sizes .qb-sub-label { padding: 0 14px; } .size-badge { min-width: 0; flex: 1; padding: 0 8px; } }
.menu-sizes .qb-subnav.visible { margin: 0 !important; position: static !important; }

/* "Start your order" tiles: the phone strip carries every category; the desktop card keeps its six (the chip bar covers the rest) */
@media (min-width: 761px) { .tile-x { display: none; } }