:root {
  color-scheme: light;
  --ink: #3a2d23;
  --muted: #665f58;
  --soft: #f7f7f7;
  --paper: #ffffff;
  --surface: #ffffff;
  --line: #e6e6e6;
  --brand: #b51f24;
  --brand-dark: #821418;
  --gold: #f4b23f;
  --charcoal: #3b2e24;
  --shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
  --radius: 8px;
  --page-max: 1320px;
  --page-gutter: clamp(16px, 3vw, 34px);
  /* v114 "white + hairline" refresh: replaces the old cream/beige (#f7efe4,
     #fbf5ee, #fefbf8, #f4efe9, #f7f5f2 and similar warm off-whites) that used
     to differentiate sections/cards. Section/card fills now go white with a
     thin var(--line) border; these two tokens cover the two remaining
     neutral-fill needs (a hover/active/chip tint, and a placeholder tint for
     image thumbnails before their art loads). var(--soft) above now also
     doubles as the subtle backdrop behind white cart-line cards. */
  --row-highlight: #f2f2f2;
  --thumb-bg: #f0f0f0;
  /* Site-wide underline field system (v139): regular form controls use a
     quiet bottom hairline instead of the boxed v132 treatment. Search keeps
     its separate rounded pill container and Stripe owns its iframe fields. */
  --field-border: #d8d0c5;
  --field-border-hover: #bcae9d;
  --field-bg: #ffffff;
  --field-bg-disabled: #faf8f5;
  --field-placeholder: #9d9286;
  --field-invalid: #c23a2f;
}

* {
  box-sizing: border-box;
  touch-action: manipulation;
}

html {
  scroll-behavior: smooth;
  background: #ffffff;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  overflow-x: clip;
  max-width: 100vw;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

/* iOS Safari auto-zooms the whole page when a focused input/select/textarea
   computes to a font-size under 16px. Force every text-entry control to
   >=16px on mobile so tapping checkout fields (address, Name/Phone/Email,
   custom tip, etc.) never triggers that zoom -- keeps pinch-zoom usable for
   accessibility instead of disabling it via the viewport meta. `!important`
   is intentional here so this wins over the more specific, smaller
   font-size rules scattered throughout this file (e.g.
   .checkout-page-one.checkout-step input, .auth-form-body input). */
@media (max-width: 760px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Site-wide underline form-field system. Regular text entry, textareas,
   native dates and selects share the compact Sign Up treatment: no filled
   box, no rounded outline, just a bottom hairline that becomes a thicker
   brand-red underline on focus. The Stripe Payment Element lives in an iframe
   and is intentionally outside these selectors. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input:not([type]),
select,
textarea {
  min-height: 44px;
  border: 0;
  border-bottom: 1.5px solid var(--field-border);
  border-radius: 0;
  padding: 9px 2px 8px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: none;
  caret-color: var(--brand);
  transition: border-color 0.16s ease, box-shadow 0.16s ease,
    color 0.16s ease;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
  color: var(--field-placeholder);
  font-weight: 500;
  opacity: 1;
}

input[type="text"]:hover:not(:disabled),
input[type="email"]:hover:not(:disabled),
input[type="tel"]:hover:not(:disabled),
input[type="password"]:hover:not(:disabled),
input[type="number"]:hover:not(:disabled),
input[type="search"]:hover:not(:disabled),
input[type="url"]:hover:not(:disabled),
input[type="date"]:hover:not(:disabled),
input:not([type]):hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-bottom-color: var(--field-border-hover);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-bottom-color: var(--brand);
  box-shadow: 0 2px 0 var(--brand);
}

input.field-invalid,
textarea.field-invalid,
select.field-invalid,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-bottom-color: var(--field-invalid);
  box-shadow: 0 1px 0 var(--field-invalid);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: transparent;
  border-bottom-style: dashed;
  color: #a99d8d;
  -webkit-text-fill-color: #a99d8d;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}

/* Native <select> chevron -- appearance:none above strips the platform arrow,
   so draw a tasteful brand-tinted caret and leave room for it. */
select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b51f24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  cursor: pointer;
}

/* Prevent browser password/autofill paint from reintroducing the blue/yellow
   filled box that the underline system intentionally removes. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset;
  box-shadow: 0 0 0 1000px var(--field-bg) inset;
  border-bottom-color: var(--brand);
  transition: background-color 9999s ease-out 0s;
}

/* Native date pickers: keep the calendar affordance but tint it to the brand
   and make it feel intentional rather than a raw browser default. */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* Tidy number spinners (custom tip amounts) so they don't add stray chrome. */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Brand-tinted checkboxes/radios (e.g. the Sign Up marketing opt-in). */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand);
}

button {
  cursor: pointer;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(220px, max-content) minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding-block: 10px;
  /* Safe-area top inset (v122): pushes the logo/hamburger/search below the
     iPhone status bar / Dynamic Island inside the standalone iOS app. The
     0px fallback keeps this a no-op on desktop/normal mobile web/Android
     (where env() resolves to 0), so the site layout is unchanged there. */
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-inline: var(--page-gutter);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  backdrop-filter: blur(12px);
  transition: transform 0.25s ease;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-img {
  display: block;
  height: 86px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 20px;
  line-height: 1.1;
}

.brand small {
  color: var(--muted);
  font-size: 13px;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.main-nav a,
.main-nav button {
  color: var(--charcoal);
}

.main-nav button {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.header-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--charcoal);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.header-search-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: currentColor;
}

.header-search-btn:hover,
.header-search-btn:focus-visible {
  color: var(--brand);
}

.header-account-avatar-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
}

.header-account-avatar-btn svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.header-account-avatar-btn:hover,
.header-account-avatar-btn:focus-visible {
  color: var(--brand-dark);
  background: rgba(181, 31, 36, 0.08);
}

/* .header-account-avatar-btn sets display:inline-grid, which (author > UA)
   outranks the UA [hidden]{display:none}. renderAuthControls() hides the
   desktop avatar when signed out (it would be a redundant second sign-in
   affordance next to the "Sign In" pill), so this explicit override is what
   actually makes .hidden = true take effect. */
.header-account-avatar-btn[hidden] {
  display: none;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* START ORDER: filled brand-red primary CTA (v172). Keeps the shared
   .outline-action base (radius / padding / weight / nowrap) but overrides the
   ghost/white treatment so it reads as the header's primary action. */
#headerOrderBtn {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

#headerOrderBtn:hover,
#headerOrderBtn:focus-visible {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #ffffff;
  filter: none;
}

#headerOrderBtn:active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #ffffff;
}

.delivery-location {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

.delivery-location-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  flex: 0 0 auto;
  color: #8f2024;
}

.delivery-location-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.delivery-location-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: #514942;
  line-height: 1.1;
}

.delivery-location-copy strong {
  color: #3a312c;
  font-size: 21px;
  font-weight: 900;
}

.delivery-location-copy a {
  width: fit-content;
  color: #6b625b;
  font-size: 14px;
  font-weight: 700;
}

.outline-action,
.secondary-link {
  border: 1px solid var(--brand);
  border-radius: 7px;
  padding: 12px 16px;
  background: #ffffff;
  color: var(--brand);
  font-weight: 900;
  white-space: nowrap;
}

.primary-action,
.checkout-button {
  border: 0;
  border-radius: 7px;
  padding: 14px 18px;
  background: var(--brand);
  color: #ffffff;
  font-weight: 900;
}

.primary-action:hover,
.checkout-button:hover,
.outline-action:hover {
  filter: brightness(0.96);
}

.storefront {
  min-height: 100vh;
  background: #ffffff;
}

.product-config-page[hidden] {
  display: none;
}

.category-tabs[hidden] {
  display: none;
}

.menu-sections[hidden] {
  display: none;
}

.storefront.category-active .featured-section,
.storefront.category-active #menu .section-heading,
.storefront.category-active #menu .category-shell {
  display: none;
}

.storefront.config-active > :not(.product-config-page):not(.storefront-content) {
  display: none;
}

.storefront.config-active .storefront-content > :not(.ordering-layout) {
  display: none;
}

.storefront.config-active .ordering-layout {
  display: block;
  padding-bottom: 0;
}

.storefront.config-active .ordering-layout .menu-column {
  display: none;
}

.storefront.config-active .ordering-layout .cart-panel {
  display: grid;
}

.storefront.story-active > :not(.story-page) {
  display: none;
}

body.config-active {
  background: #ffffff;
}

.product-config-page {
  min-height: calc(100vh - 126px);
  margin: 0;
  padding: 0 0 72px;
  background: #ffffff;
}

.story-page {
  min-height: calc(100vh - 126px);
  padding: 22px clamp(16px, 4vw, 34px) 220px;
  background: #ffffff;
}

.story-shell {
  width: min(100%, 760px);
  margin: 0 auto;
  color: #352a25;
}

.story-back {
  border: 1px solid rgba(58, 36, 27, 0.24);
  border-radius: 999px;
  padding: 8px 14px;
  background: #ffffff;
  color: #8f2024;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.story-back::before {
  content: "<";
  margin-right: 8px;
}

.story-back:hover,
.story-back:focus-visible {
  border-color: #8f2024;
}

.story-logo {
  display: block;
  width: min(220px, 100%);
  height: auto;
  margin: 22px 0 14px;
}

.story-shell h1 {
  margin: 0 0 18px;
  color: #8f2024;
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.1;
}

.story-shell p {
  margin: 0 0 14px;
  color: #493f3a;
  font-size: 18px;
  line-height: 1.65;
}

.story-shell .story-closing {
  margin-top: 18px;
  color: #8f2024;
  font-weight: 800;
}

/* Standalone legal pages (privacy.html / terms.html) -- served as real URLs,
   outside the SPA, so they carry their own slim top bar + readable content
   column. Reuse the site's Inter font, white theme, and hairline dividers. */
.legal-body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.legal-topbar {
  display: flex;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--page-gutter) 14px;
  border-bottom: 1px solid var(--line);
}

.legal-topbar-brand {
  display: inline-flex;
}

.legal-topbar-brand .brand-img {
  display: block;
  width: auto;
  height: 48px;
}

.legal-page {
  padding: 26px var(--page-gutter) calc(env(safe-area-inset-bottom, 0px) + 80px);
  background: #ffffff;
}

.legal-shell {
  width: min(100%, 760px);
  margin: 0 auto;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(58, 36, 27, 0.24);
  border-radius: 999px;
  padding: 8px 16px;
  background: #ffffff;
  color: #8f2024;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.legal-back::before {
  content: "<";
  margin-right: 8px;
}

.legal-back:hover,
.legal-back:focus-visible {
  border-color: #8f2024;
}

.legal-back-bottom {
  margin-top: 40px;
}

.legal-title {
  margin: 24px 0 6px;
  color: #8f2024;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.1;
}

.legal-updated {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.legal-intro {
  margin: 0 0 8px;
  color: #493f3a;
  font-size: 17px;
  line-height: 1.7;
}

.legal-section {
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid var(--line);
}

.legal-section h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: clamp(19px, 2.6vw, 23px);
  font-weight: 700;
  line-height: 1.25;
}

.legal-section p {
  margin: 0 0 12px;
  color: #493f3a;
  font-size: 16px;
  line-height: 1.7;
}

.legal-section ul {
  margin: 0 0 12px;
  padding-left: 22px;
  color: #493f3a;
  font-size: 16px;
  line-height: 1.7;
}

.legal-section li {
  margin-bottom: 8px;
}

.legal-section a {
  color: #8f2024;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-section a:hover,
.legal-section a:focus-visible {
  color: var(--brand-dark);
}

.legal-contact {
  color: #493f3a;
}

.config-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 46px) 0;
}

.config-back {
  border: 0;
  background: transparent;
  color: #d83b1e;
  font-size: 18px;
  font-weight: 950;
}

.config-back::before {
  content: "<";
  margin-right: 8px;
}

.config-product-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 410px) minmax(270px, 360px);
  gap: clamp(20px, 4vw, 46px);
  align-items: center;
  margin: 0 calc(-1 * clamp(16px, 4vw, 46px));
  padding: 16px clamp(16px, 4vw, 46px) 22px;
  background: transparent;
}

.config-product-copy {
  min-width: 0;
}

.config-product-copy h1 {
  margin: 6px 0 12px;
  color: #40291b;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.08;
}

.config-product-copy #dialogDescription {
  max-width: 660px;
  margin-bottom: 18px;
  color: #4b3f37;
  font-size: 18px;
}

.config-product-copy .dialog-price {
  margin: 8px 0 0;
  color: #40291b;
  font-size: 26px;
}

.config-ingredient-line {
  max-width: 620px;
  margin: 0;
  color: #5d5148;
  font-size: 15px;
  line-height: 1.45;
}

.product-config-page .config-product-image {
  width: min(100%, 410px);
  aspect-ratio: 1;
  height: auto;
  margin: 0;
  border-radius: 50%;
  background-color: transparent;
  background-image: var(--item-image, url("./assets/products/pizza-pepperoni.jpg"));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 28px 36px rgba(68, 44, 28, 0.2));
}

.config-order-panel {
  display: grid;
  gap: 12px;
  align-self: end;
  padding: 16px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(49, 35, 25, 0.08);
}

.config-order-panel .primary-action {
  min-height: 54px;
  background: var(--brand);
  text-transform: uppercase;
}

.order-panel-size-selector {
  display: grid;
  grid-column: 1 / -1;
}

.order-panel-size-wrap .pizza-size-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 6px;
}

.order-panel-size-wrap .pizza-size-card {
  min-height: 88px;
  padding: 8px 4px;
  border-radius: 8px;
  box-shadow: none;
}

.order-panel-size-wrap .pizza-size-icon {
  width: 30px;
  height: 30px;
}

.order-panel-size-wrap .pizza-size-card strong {
  font-size: 13px;
}

.order-panel-size-wrap .pizza-size-card small {
  font-size: 11px;
}

.config-order-panel small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.config-note-field {
  max-width: 760px;
  margin: 22px auto 0;
}

/* .note-field's `display: grid` has the same specificity as the UA
   [hidden]{display:none} rule and comes later in the cascade, so it
   silently wins over `hidden` -- same fix already applied to
   .header-auth-control[hidden] and others elsewhere in this file. */
.config-note-field[hidden] {
  display: none;
}

/* The builder note box (the pizza builder's "Additional information" field,
   and the "Special instructions" field other builders reuse) is the ONLY
   place .config-note-field is rendered. The site-wide underline field
   treatment read as a bare line here, so customers didn't realise it was a
   text box -- give this instance a clearly bordered, rounded, padded box with
   a visible focus ring so it obviously reads as an input. Scoped to
   .config-note-field so no other input (checkout, sign-in, schedule, etc.) is
   affected. */
.config-note-field textarea {
  min-height: 92px;
  border: 1.5px solid var(--field-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: #ffffff;
}

.config-note-field textarea:hover:not(:disabled) {
  border-color: var(--field-border-hover);
}

.config-note-field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(181, 31, 36, 0.14);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.storefront-content {
  width: min(100%, var(--page-max));
  margin: 0 auto;
  padding-inline: var(--page-gutter);
  background: #ffffff;
}

.featured-section {
  padding-top: 34px;
  padding-bottom: 36px;
}

.section-heading {
  max-width: 720px;
  margin-bottom: 22px;
  text-align: left;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.05;
  letter-spacing: 0;
}

.section-heading p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
}

.section-heading.compact {
  margin-bottom: 0;
}

.section-heading.compact h2 {
  font-size: clamp(28px, 2.8vw, 38px);
}

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

.featured-card {
  position: relative;
  min-height: 330px;
  display: grid;
  align-content: end;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: var(--charcoal);
  color: #ffffff;
  text-align: left;
  box-shadow: 0 16px 38px rgba(56, 39, 28, 0.14);
}

.featured-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.78)),
    var(--item-image, url("./assets/pizza-house-menu.jpg"));
  background-size: cover;
  background-position: var(--image-position, center);
  transition: transform 180ms ease;
}

.featured-card:hover::before {
  transform: scale(1.04);
}

.featured-card > span {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 22px;
}

.featured-card em {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--gold);
  color: var(--charcoal);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.featured-card strong {
  font-size: 25px;
  line-height: 1.1;
}

.featured-card small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.35;
}

.featured-card b {
  font-size: 24px;
}

.ordering-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding-bottom: 196px;
}

.site-footer {
  margin-top: 30px;
  border-top: 1px solid #e6e6e6;
  background: #ffffff;
}

.site-footer-main {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 36px clamp(18px, 4vw, 56px) 22px;
  display: grid;
  grid-template-columns: minmax(230px, 1.1fr) minmax(220px, 1.1fr) minmax(220px, 1fr);
  gap: 26px;
}

.site-footer-brand img {
  display: block;
  width: min(220px, 100%);
  height: auto;
  object-fit: contain;
  margin-inline: 0;
}

.site-footer-brand p {
  margin: 12px 0 0;
  max-width: 34ch;
  color: #514941;
  line-height: 1.55;
}

.site-footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px;
  align-content: start;
}

.site-footer-links h3,
.site-footer-contact h3 {
  margin: 0 0 10px;
  color: #8f2024;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer-links a,
.footer-link-button {
  display: block;
  margin: 0 0 8px;
  color: #2c221e;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.site-footer-links a:hover,
.footer-link-button:hover {
  color: #8f2024;
}

.footer-link-button {
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
}

.site-footer-contact {
  color: #3d342f;
}

.site-footer-contact p {
  margin: 0 0 9px;
  line-height: 1.45;
}

.site-footer-hours {
  display: grid;
  gap: 4px;
  margin: 2px 0 14px;
  padding: 0;
  list-style: none;
  line-height: 1.4;
}

.site-footer-hours strong {
  font-weight: 800;
}

.site-footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
}

.site-footer-social a {
  width: 44px;
  height: 44px;
  border: 1px solid #d7c2b2;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8f2024;
  background: #ffffff;
}

.site-footer-social a:hover {
  border-color: #8f2024;
  background: #8f2024;
  color: #ffffff;
}

.site-footer-social svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}

.site-footer-legal {
  border-top: 1px solid #e6e6e6;
  padding: 12px clamp(18px, 4vw, 56px) 18px;
  text-align: center;
  color: #5d554f;
  font-size: 13px;
}

.site-footer-legal p {
  margin: 0;
}

.menu-column {
  min-width: 0;
}

.menu-header {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
  padding: 18px 0 0;
  background: var(--paper);
}

.menu-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--soft);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.menu-search-bar:has(.menu-search-input:focus),
.menu-search-bar.menu-search-bar-focused {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(181, 31, 36, 0.12);
  background: #ffffff;
}

.menu-search-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: var(--muted);
}

/* The search box keeps its distinct rounded "pill" affordance (icon + input +
   clear button in one capsule with its own focus ring on .menu-search-bar), so
   re-assert a chrome-free input here and out-specify the site-wide field
   system above -- the pill is the container, not the raw <input>. */
.menu-search-bar .menu-search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.menu-search-input::-webkit-search-cancel-button {
  display: none;
}

.menu-search-input:focus {
  outline: none;
}

.menu-search-clear {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(58, 45, 35, 0.08);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.menu-search-clear:hover,
.menu-search-clear:focus-visible {
  background: rgba(181, 31, 36, 0.14);
  color: var(--brand-dark);
}

.menu-search-clear[hidden] {
  display: none;
}

.category-shell {
  display: grid;
  gap: 14px;
  padding: 4px 0 20px;
  border-bottom: 1px solid #e6e6e6;
}

.category-shell::before {
  content: "Menu";
  color: #3a241b;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-icon {
  display: none;
}

.menu-icon span {
  width: 20px;
  height: 2px;
  background: var(--brand);
}

.category-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  justify-content: center;
}

.category-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  aspect-ratio: auto;
  min-height: 304px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 20px;
  background: var(--category-bg);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(34, 26, 20, 0.14);
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.82) 0%, rgba(8, 8, 8, 0.5) 26%, rgba(8, 8, 8, 0.06) 52%, rgba(8, 8, 8, 0.34) 100%),
    linear-gradient(130deg, rgba(181, 31, 36, 0.14), rgba(0, 0, 0, 0.08));
  transition: opacity 0.18s ease;
}

.category-card:hover,
.category-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 18px 34px rgba(34, 26, 20, 0.24);
  transform: translateY(-3px);
}

.category-card:hover::before,
.category-card:focus-visible::before {
  opacity: 0.9;
}

.category-card.active {
  border-color: var(--brand);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.32),
    inset 0 -3px 0 var(--brand),
    0 18px 34px rgba(34, 26, 20, 0.26);
}

.category-card-title {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0;
  color: #ffffff;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.55);
}

.category-card-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--category-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.category-card:hover .category-card-image,
.category-card:focus-visible .category-card-image {
  transform: scale(1.08);
}

.menu-sections {
  display: grid;
  gap: 42px;
  padding-top: 28px;
}

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

.menu-section h3 {
  margin: 0 0 16px;
  font-size: 28px;
  line-height: 1.1;
}

.category-detail-shell {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.category-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  min-height: 40px;
  border: 1px solid rgba(181, 31, 36, 0.18);
  border-radius: 999px;
  padding: 9px 18px 9px 14px;
  background: #ffffff;
  color: var(--brand);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.category-detail-back .back-icon {
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.category-detail-back:hover,
.category-detail-back:focus-visible {
  border-color: var(--brand);
  color: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

.category-detail-back:hover .back-icon,
.category-detail-back:focus-visible .back-icon {
  transform: translateX(-2px);
}

.category-detail-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(181, 31, 36, 0.28), 0 10px 22px rgba(15, 23, 42, 0.18);
}

.category-detail-back:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16);
}

.category-detail h3 {
  margin: 0;
}

.search-results-hero {
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
}

.search-results-hero h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  font-weight: 900;
}

.search-empty-state {
  margin: 0;
  padding: 28px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.menu-item {
  min-height: 188px;
  height: 100%;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 10px 26px rgba(70, 50, 38, 0.06);
}

.menu-item:hover {
  border-color: rgba(181, 31, 36, 0.35);
  box-shadow: 0 16px 36px rgba(70, 50, 38, 0.11);
}

.item-image {
  min-height: 154px;
  height: 100%;
  border-radius: 7px;
  background-image: var(--item-image, url("./assets/pizza-house-menu.jpg"));
  background-size: cover;
  background-position: var(--image-position, center);
}

.item-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.item-category-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(181, 31, 36, 0.08);
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.item-title {
  display: block;
  color: #141414;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.item-summary {
  margin: 0;
  color: #6b6b6b;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.item-price {
  color: #141414;
  font-size: 16px;
  font-weight: 700;
}

.item-cta {
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--brand);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.cart-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 0 clamp(12px, 3vw, 28px) calc(env(safe-area-inset-bottom) + 10px);
  pointer-events: none;
}

.cart-panel > * {
  pointer-events: auto;
}

.cart-panel:not(.cart-open) .cart-card {
  pointer-events: none;
}

.cart-drawer-bar {
  order: 2;
  width: min(100%, 1120px);
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #ffffff;
  box-shadow: 0 -10px 26px rgba(130, 20, 24, 0.32), inset 0 -3px 0 var(--gold);
  text-align: left;
}

.cart-drawer-bar span:first-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 800;
}

.cart-drawer-bar strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 19px;
  color: var(--gold);
}

/* Subtle "bump" on the cart bar's item count/total whenever something is
   added, so the change is noticeable even if a customer isn't looking at
   the "Added to cart" toast (see showCartAddedToast/pulseCartBar in app.js).
   Applies to both the collapsed drawer bar and the fullscreen cart's close
   header -- display:inline-block is required for the scale transform since
   these are naturally inline span/strong elements. */
@keyframes cart-value-bump {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

.cart-value-bump {
  display: inline-block;
  animation: cart-value-bump 0.36s ease;
}

.cart-drawer-action {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cart-card {
  order: 1;
  width: min(100%, 1120px);
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 620px);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(70, 50, 38, 0.12);
  overflow: hidden;
  margin-bottom: 8px;
  transform: translateY(calc(100% + 14px));
  opacity: 0;
  transition: transform 0.24s ease, opacity 0.24s ease;
}

.cart-card > * {
  flex-shrink: 0;
}

/* Everything between the pinned "minimize cart" header and the pinned
   Checkout footer button lives in this scrollable region. Without it, the
   header/meta/nudge-banner/totals chrome (all flex-shrink: 0) could add up
   to more height than .cart-card's max-height on short viewports (e.g. a
   ~900-1000px-wide laptop window with limited vertical space), pushing the
   Checkout button past the card's overflow:hidden clip line with no way to
   scroll to it. Giving this wrapper flex: 1 1 auto + min-height: 0 means it
   always absorbs the overflow (scrolling internally) while the header and
   Checkout button keep their full reserved size and stay on-screen. */
.cart-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* overflow-y:auto forces overflow-x from `visible` to a computed `auto`
     (CSS overflow spec), which otherwise let .cart-lines' full-bleed
     `margin: 0 -16px/-20px` scroll horizontally and push cart-row prices off
     the right edge on mobile (v113 fit-to-screen fix). Clip it instead so the
     cart never scrolls sideways -- the full-bleed background simply aligns to
     the card's inner edge. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.cart-scroll > * {
  flex-shrink: 0;
}

.cart-panel.cart-open .cart-card {
  transform: translateY(0);
  opacity: 1;
}

.cart-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.cart-card h2 {
  margin: 0 0 10px;
  font-size: 30px;
}

.cart-close {
  width: 100%;
  min-height: 46px;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: -20px -20px 16px;
  width: calc(100% + 40px);
  border: 0;
  border-radius: 16px 16px 0 0;
  padding: 10px 20px 12px;
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #ffffff;
  text-align: center;
  box-shadow: inset 0 -3px 0 var(--gold);
}

.cart-close-grab {
  justify-self: center;
  width: 52px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
}

.cart-close-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #ffffff;
}

.cart-close-chevron svg {
  display: block;
  width: 16px;
  height: 16px;
}

.cart-close-copy {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.cart-close-row {
  display: contents;
}

.cart-close-summary {
  display: none;
}

.cart-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 14px;
}

.cart-meta span {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--row-highlight);
  font-weight: 850;
}

.cart-lines {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  margin: 0 -20px;
  padding: 16px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--soft);
  box-shadow: inset 0 1px 4px rgba(59, 46, 36, 0.07);
}

.empty-cart {
  margin: 22px 0;
  color: var(--muted);
  line-height: 1.4;
}

.cart-line {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(59, 46, 36, 0.06);
  box-shadow: 0 6px 16px rgba(59, 46, 36, 0.1), 0 1px 3px rgba(59, 46, 36, 0.06);
  /* Never let a row exceed the panel width -- keeps prices/descriptions on
     screen at 390px/414px (v113 fit-to-screen fix). */
  min-width: 0;
  max-width: 100%;
}

.cart-line-media {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  border-radius: 16px;
  background-color: var(--thumb-bg);
  background-image: var(--cart-line-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
  padding: 10px;
  box-shadow: inset 0 0 0 1px rgba(59, 46, 36, 0.08), 0 1px 2px rgba(59, 46, 36, 0.05);
}

.cart-line-body {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.cart-line-name {
  color: #141414;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  /* Long product names/modifiers must wrap, never widen the row (v113). */
  overflow-wrap: anywhere;
  min-width: 0;
}

.cart-line-desc {
  margin: 0;
  color: #6b6b6b;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
  min-width: 0;
}

.cart-line-note {
  margin: 0;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
  min-width: 0;
}

.cart-line-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  /* Allow the stepper/price to wrap onto two lines rather than clip the price
     off the right edge on very narrow phones (v113 fit-to-screen fix). */
  flex-wrap: wrap;
  min-width: 0;
}

.cart-line-stepper {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--row-highlight);
  padding: 3px;
}

.cart-line-stepper button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--brand);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 1px 2px rgba(59, 46, 36, 0.14);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.cart-line-stepper button:hover {
  background: var(--brand);
  color: #ffffff;
}

.cart-line-stepper button:active {
  transform: scale(0.94);
}

.cart-line-stepper span {
  min-width: 22px;
  text-align: center;
  color: var(--ink);
  font-weight: 900;
}

.cart-line-price {
  color: #141414;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.cart-line-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.cart-line-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px 0 10px;
  background: var(--row-highlight);
  color: var(--charcoal);
  font-size: 12px;
  font-weight: 800;
  transition: background 0.15s ease, color 0.15s ease;
}

.cart-line-action-icon {
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}

.cart-line-action--edit:hover,
.cart-line-action--edit:focus-visible {
  background: #e9e9e9;
  color: var(--charcoal);
}

.cart-line-action--remove {
  background: rgba(181, 31, 36, 0.08);
  color: var(--brand-dark);
}

.cart-line-action--remove:hover,
.cart-line-action--remove:focus-visible {
  background: rgba(181, 31, 36, 0.16);
  color: var(--brand-dark);
}

.cart-line-action-divider {
  display: none;
}

.totals {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.totals div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  color: var(--muted);
  font-weight: 700;
}

/* Same latent [hidden]-outranking bug documented elsewhere in this file --
   ".totals div"'s own `display: flex` (class + element, specificity 0,1,1)
   always beat the UA `[hidden]{display:none}` rule (specificity 0,1,0)
   regardless of source order, so a delivery-fee/tip row's `.hidden = true`
   toggle (Pickup orders, no fee/tip yet) never actually hid it. Covers the
   persistent cart panel and the Payment page's "Order summary". */
#deliveryFeeRow[hidden],
#checkoutPaymentSummaryDiscountRow[hidden],
#checkoutPaymentSummaryDeliveryFeeRow[hidden],
#checkoutPaymentSummaryTipRow[hidden] {
  display: none !important;
}

.grand-total {
  padding-top: 12px;
  margin-bottom: 0 !important;
  border-top: 1px dashed rgba(59, 46, 36, 0.22);
  font-size: 22px;
  color: var(--ink) !important;
  font-weight: 900 !important;
}

.grand-total strong {
  color: var(--brand-dark);
}

/* Cart panel totals only (scoped to #cartScroll so the checkout Payment-step
   summary, which reuses the same .totals/.grand-total classes, keeps its
   own roomier sizing) -- tighter padding/type so the selected-items list
   above gets more visible room, especially in the mobile drawer. */
#cartScroll .totals {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
}

#cartScroll .totals div {
  margin-bottom: 5px;
  font-size: 13px;
}

#cartScroll .grand-total {
  padding-top: 8px;
  font-size: 18px;
}

.checkout-button {
  width: 100%;
  margin-top: 8px;
}

.checkout-button:disabled,
.primary-action:disabled {
  cursor: not-allowed;
  background: #c7beb6;
}

dialog {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow);
  max-width: 100vw;
}

dialog::backdrop {
  background: rgba(17, 13, 12, 0.58);
}

.order-dialog form,
.item-dialog form,
.info-dialog form,
.checkout-dialog form {
  width: min(540px, calc(100vw - 26px));
  padding: 30px 40px;
}

.item-dialog form {
  width: min(660px, calc(100vw - 26px));
}

.order-dialog h2,
.item-dialog h2,
.info-dialog h2,
.checkout-dialog h2 {
  margin: 0 0 12px;
  font-size: 31px;
  line-height: 1.08;
}

/* Store-info modal: center the title so it sits between the back button and
   the right edge, matching the other dialogs (v137). */
.info-dialog form {
  position: relative;
}

.info-dialog h2 {
  text-align: center;
  padding: 0 44px;
}

.order-dialog p,
.checkout-dialog p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 800;
}

.split-controls,
.when-row {
  display: grid;
  gap: 14px;
}

.split-controls {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
}

.when-row {
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  margin-bottom: 16px;
}

.when-row span {
  font-weight: 900;
}

.choice {
  border: 2px solid var(--charcoal);
  border-radius: 7px;
  padding: 13px 16px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 900;
}

.choice.active {
  border-color: var(--charcoal);
  background: var(--charcoal);
  color: #ffffff;
}

/* Disabled while the store is closed right now -- see updateAsapAvailability()
   in app.js. Scheduling remains fully available either way. */
.choice.is-disabled,
.choice:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #ffffff;
  color: var(--ink);
}

.schedule-field,
.note-field,
.checkout-dialog label {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  color: var(--muted);
  font-weight: 850;
}

.schedule-field {
  display: none;
}

.schedule-field.show {
  display: grid;
}

.schedule-field select,
.note-field textarea,
.checkout-dialog input {
  /* Visual treatment (border/radius/padding/focus) comes from the site-wide
     form-field system near the top of this file; only width is set here. */
  width: 100%;
}

.item-dialog form {
  position: relative;
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
}

/* Dialog back control (v137): a consistent left-aligned back arrow across the
   sign-in / sign-up / my-profile / my-orders / store-info dialogs, replacing
   the old top-right "x" cross so every modal matches the checkout and
   item-builder back affordance. Keeps the .close-button class so the shared
   close handler still dismisses the dialog. */
.close-button {
  position: absolute;
  top: 14px;
  left: 12px;
  right: auto;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  transition: background 0.15s ease;
}

.close-button:hover {
  background: var(--row-highlight);
}

/* Inside the auth header band, vertically center against the title and respect
   the mobile safe-area top padding the header carries. */
.auth-form-header .close-button {
  top: 50%;
  transform: translateY(-50%);
}

.dialog-image {
  height: 160px;
  margin: -30px -40px 24px;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18)),
    var(--item-image, url("./assets/pizza-house-menu.jpg"));
  background-size: cover;
  background-position: var(--image-position, center);
}

.dialog-price {
  display: block;
  margin-bottom: 12px;
  font-size: 21px;
}

#dialogDescription {
  margin: 0 0 18px;
  color: #463f3f;
  line-height: 1.4;
}

.pizza-builder {
  margin: 20px -40px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: #050909;
  color: #ffffff;
}

.wing-builder {
  margin: 20px -40px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: #050909;
  color: #ffffff;
}

.pizza-size-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 22px 40px 14px;
  background: #f1f2f0;
  color: var(--charcoal);
}

.pizza-size-card {
  appearance: none;
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 112px;
  border: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
}

.pizza-size-card.selected {
  border-color: var(--brand);
  background: rgba(181, 31, 36, 0.06);
}

.pizza-size-card:hover,
.pizza-size-card:focus-visible {
  border-color: rgba(181, 31, 36, 0.45);
  outline: none;
}

.pizza-size-card strong {
  font-size: 14px;
}

.pizza-size-card small {
  color: #4c433a;
  font-weight: 850;
}

.pizza-size-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 35%, rgba(255, 255, 255, 0.45) 36% 38%, transparent 39%),
    conic-gradient(from 0deg, #d83b1e 0 45deg, #f08a31 45deg 48deg, #d83b1e 48deg 90deg, #f08a31 90deg 93deg, #d83b1e 93deg 135deg, #f08a31 135deg 138deg, #d83b1e 138deg 180deg, #f08a31 180deg 183deg, #d83b1e 183deg 225deg, #f08a31 225deg 228deg, #d83b1e 228deg 270deg, #f08a31 270deg 273deg, #d83b1e 273deg 315deg, #f08a31 315deg 318deg, #d83b1e 318deg 360deg);
}

.builder-ingredient-line {
  margin: 0;
  max-width: 1240px;
  margin-inline: auto;
  padding: 0 24px 14px;
  background: #f1f2f0;
  color: #54463d;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
}

.builder-step-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1240px;
  margin: 0 auto;
  border-top: 5px solid #000000;
  border-bottom: 1px solid rgba(120, 180, 78, 0.65);
  background: #111417;
}

.builder-step-tabs button {
  min-height: 72px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #d8d7d3;
  font-size: 17px;
  font-weight: 950;
}

.builder-step-tabs button.active {
  background: #42661f;
  box-shadow: inset 0 0 0 4px #8fc757;
  color: #0e1608;
}

.builder-step-panel {
  display: grid;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 24px 14px;
}

.base-sauce-grid {
  display: grid;
  gap: 14px;
}

.builder-base-group,
.builder-topping-group {
  display: grid;
  gap: 12px;
}

.builder-base-group h3,
.builder-topping-group h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
}

.base-sauce-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.base-sauce-option {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 10px 13px;
  background: #161b1d;
  color: #ffffff;
  font-weight: 850;
}

.base-sauce-option.selected {
  border-color: #8fc757;
  background: #42661f;
  color: #0e1608;
}

.builder-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.builder-group-header span {
  color: #bfc7bd;
  font-size: 13px;
  font-weight: 900;
}

.topping-category-section {
  display: grid;
  gap: 10px;
}

.topping-category-section + .topping-category-section {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.topping-category-heading {
  margin: 0;
  color: #8fc757;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.topping-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.topping-choice {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  padding: 10px;
  background: #121617;
  color: #ffffff;
  text-align: left;
}

.topping-choice span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #ff825b;
  border-radius: 50%;
  color: #ff825b;
  font-size: 20px;
  line-height: 1;
}

.topping-choice.selected {
  border-color: #8fc757;
  background: #1a2615;
}

.topping-choice.selected span {
  border-color: #8fc757;
  background: #8fc757;
  color: #101a0a;
}

.builder-empty {
  margin: 0;
  color: #cfd6cc;
}

.builder-reset {
  justify-self: end;
  margin: 0 40px 22px;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: transparent;
  color: #ff825b;
  font-weight: 950;
}

.builder-reset::after {
  content: "";
  width: 28px;
  height: 28px;
  display: inline-block;
  margin-left: 8px;
  border-radius: 50%;
  background: #ff825b;
  vertical-align: middle;
}

.wing-size-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 22px 40px 14px;
  background: #f1f2f0;
  color: var(--charcoal);
}

.wing-size-card {
  appearance: none;
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 112px;
  border: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
}

.wing-size-card.selected {
  border-color: var(--brand);
  background: rgba(181, 31, 36, 0.06);
}

.wing-size-card:hover,
.wing-size-card:focus-visible {
  border-color: rgba(181, 31, 36, 0.45);
  outline: none;
}

.wing-size-card strong {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d83b1e;
  color: #ffffff;
  font-size: 18px;
}

.wing-size-card small {
  color: #4c433a;
  font-weight: 850;
}

.wing-tabs button.active {
  background: #42661f;
  color: #0e1608;
}

.wing-required-message {
  margin: 0;
  padding: 12px 40px 18px;
  background: #f1f2f0;
  color: var(--brand);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.3;
  text-align: center;
}

.wing-required-message.is-complete {
  color: #226b35;
}

.wing-builder-group {
  display: grid;
  gap: 12px;
}

.wing-card-grid {
  display: grid;
  gap: 16px;
}

.wing-choice-card {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 116px;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 18px;
  background: #f4f7f6;
  color: #33251f;
  text-align: left;
}

.wing-choice-card > span,
.wing-card-copy > span {
  color: #d83b1e;
  font-weight: 950;
}

.wing-choice-card strong {
  display: block;
  font-size: 20px;
}

.wing-choice-card small {
  color: #5e554e;
  font-size: 15px;
  font-weight: 850;
}

.wing-choice-card.selected {
  border-color: #8fc757;
  box-shadow: inset 0 -4px 0 #8fc757;
}

.wing-choice-card::before {
  content: "";
  width: 112px;
  height: 82px;
  display: block;
  grid-row: span 3;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 60%, rgba(162, 64, 34, 0.95) 0 16%, transparent 17%),
    radial-gradient(circle at 55% 45%, rgba(192, 76, 35, 0.95) 0 18%, transparent 19%),
    radial-gradient(circle at 72% 65%, rgba(142, 48, 28, 0.95) 0 14%, transparent 15%),
    #d9dee2;
}

.wing-choice-card.sauce-card::before {
  display: none;
}

.wing-choice-card.sauce-card {
  grid-template-columns: 112px minmax(0, 1fr);
}

.wing-sauce-art {
  width: 112px;
  height: 82px;
  display: block;
  border-radius: 999px;
  background-image: var(--wing-sauce-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.wing-card-copy {
  display: grid;
  gap: 3px;
}

.modifier-groups {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.modifier-group {
  display: grid;
  gap: 12px;
}

.modifier-group h3 {
  margin: 0;
  font-size: 20px;
}

.modifier-rule {
  display: block;
  margin: 3px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.modifier-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

@media (min-width: 761px) {
  .product-config-page .modifier-options-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.modifier-choice-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
  min-width: 0;
  min-height: 126px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 14px 16px;
  background: #f3f3f4;
  color: #40291b;
  text-align: left;
  box-shadow: 0 10px 24px rgba(42, 51, 55, 0.05);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.modifier-choice-card:hover,
.modifier-choice-card:focus-visible {
  border-color: #d1c8bf;
  box-shadow: 0 14px 26px rgba(52, 43, 35, 0.11);
  transform: translateY(-1px);
}

.modifier-choice-art {
  position: relative;
  width: 100%;
  min-height: 112px;
  border-radius: 8px;
  background-image: var(--modifier-option-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.modifier-choice-art.is-prohibited::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 46%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(199, 32, 36, 0.9);
  border-radius: 50%;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1.5px),
    rgba(199, 32, 36, 0.9) calc(50% - 1.5px),
    rgba(199, 32, 36, 0.9) calc(50% + 1.5px),
    transparent calc(50% + 1.5px)
  );
}

.modifier-choice-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.modifier-choice-state {
  color: #d83b1e;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.modifier-choice-card strong {
  font-size: 18px;
  line-height: 1.2;
}

.modifier-choice-card small {
  color: #5b4e46;
  font-size: 13px;
  font-weight: 850;
}

.modifier-choice-card.selected {
  border: 2px solid #8f2024;
  box-shadow: inset 0 -4px 0 #8f2024, 0 12px 30px rgba(143, 32, 36, 0.18);
}

.modifier-choice-card.selected .modifier-choice-state {
  color: #8f2024;
}

.repeatable-drink-group {
  display: grid;
  gap: 10px;
}

.repeatable-drink-summary {
  margin: 0 0 4px;
  padding: 9px 12px;
  border: 1px solid #ead8ca;
  border-radius: 10px;
  background: #fff8f1;
  color: #7a4b2d;
  font-size: 13px;
  font-weight: 850;
}

.repeatable-drink-summary.is-complete {
  border-color: rgba(44, 163, 92, 0.28);
  background: #edf8f1;
  color: #215c36;
}

.repeatable-drink-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 252px;
}

.repeatable-drink-stepper {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(24px, 1fr) 44px;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.repeatable-drink-stepper button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

.repeatable-drink-stepper > span {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}

.repeatable-drink-stepper button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

@media (min-width: 761px) {
  .repeatable-drink-stepper {
    grid-template-columns: 44px minmax(28px, 1fr) 44px;
  }

  .repeatable-drink-stepper button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

.quantity-control button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--brand);
  border-radius: 50%;
  background: #ffffff;
  color: var(--brand);
  font-size: 22px;
  line-height: 1;
}

.wing-sauce-modifier-group {
  gap: 14px;
}

.modifier-wing-sauce-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.modifier-wing-sauce-grid .wing-choice-card {
  width: 100%;
}

.modal-footer {
  position: sticky;
  bottom: -30px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  align-items: center;
  margin: 20px -40px -30px;
  padding: 14px 40px 24px;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.product-config-page .modifier-groups {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  border: 0;
}

.product-config-page .pizza-builder,
.product-config-page .wing-builder {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3a2b21;
}

.product-config-page .pizza-size-selector,
.product-config-page .wing-size-selector {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 16px;
  background: transparent;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Wings builder: add a comfortable gap between the Wing Style / Sauce tab row
   and the weight (1LB-4LB) cards. Scoped to wings so the pizza size selector
   is unaffected; applies at desktop and mobile (the mobile flex rule doesn't
   set margin). */
.product-config-page .wing-size-selector {
  margin-top: 16px;
}

.product-config-page .pizza-size-card,
.product-config-page .wing-size-card {
  flex: 1 1 0;
  min-width: 84px;
  min-height: 104px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
  padding: 10px 6px 8px;
  gap: 4px;
}

.product-config-page .pizza-size-card.selected,
.product-config-page .wing-size-card.selected {
  border-color: #d83b1e;
  background: rgba(216, 59, 30, 0.06);
  box-shadow: inset 0 0 0 1px rgba(216, 59, 30, 0.16);
}

.product-config-page .pizza-size-card:hover,
.product-config-page .pizza-size-card:focus-visible,
.product-config-page .wing-size-card:hover,
.product-config-page .wing-size-card:focus-visible {
  border-color: rgba(216, 59, 30, 0.52);
}

.product-config-page .pizza-size-icon,
.product-config-page .wing-size-card .pizza-size-icon {
  width: 30px;
  height: 30px;
}

.product-config-page .pizza-size-card strong,
.product-config-page .wing-size-card strong {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.product-config-page .pizza-size-card small,
.product-config-page .wing-size-card small {
  color: #6a5e55;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
}

.product-config-page .builder-ingredient-line,
.product-config-page .wing-required-message {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 10px;
  background: transparent;
  color: #4d3e35;
  font-size: 16px;
}

.product-config-page .builder-step-tabs {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1240px;
  margin: 0 auto;
  border: 4px solid #ffffff;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f6f6;
  box-shadow: 0 10px 28px rgba(29, 41, 45, 0.06);
}

.product-config-page .wing-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
}

.product-config-page .builder-step-tabs button {
  min-height: 68px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #5f625f;
  font-size: 15px;
  font-weight: 950;
}

.product-config-page .builder-step-tabs button.active {
  background: #416c1e;
  box-shadow: inset 0 0 0 3px #91c64d;
  color: #ffffff;
}

.product-config-page .builder-step-panel {
  max-width: 1280px;
  margin: 26px auto 0;
  padding: 0;
}

/* Wings only: tighten the gap between the sauce summary line and the pound
   tracker. .builder-step-panel is shared with the pizza builder, so scope the
   reduced top margin to the wings builder so pizza spacing is untouched. */
.wing-builder .builder-step-panel {
  margin-top: 8px;
}

.setup-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.product-config-page .base-sauce-grid {
  display: grid;
  gap: 18px;
}

.product-config-page .topping-choice-grid,
.product-config-page .wing-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.setup-choice-card,
.product-config-page .topping-choice,
.product-config-page .wing-choice-card {
  min-height: 164px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #f3f3f4;
  box-shadow: 0 10px 24px rgba(42, 51, 55, 0.05);
}

.setup-choice-card {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 222px;
  padding: 14px;
}

.product-config-page .base-sauce-option {
  min-height: 222px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(42, 51, 55, 0.05);
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  color: #40291b;
  font-weight: 950;
  text-align: left;
}

.setup-choice-card span,
.setup-sauce-state {
  color: #d83b1e;
  font-weight: 950;
}

.setup-choice-art,
.setup-sauce-art {
  width: 100%;
  height: 128px;
  border-radius: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.setup-choice-art {
  background-image: var(--setup-choice-image);
  height: 150px;
  background-size: contain;
}

.setup-choice-card strong {
  color: #416c1e;
  font-size: 18px;
}

.setup-choice-card small {
  color: #4d3e35;
  font-weight: 850;
}

.setup-choice-card.selected,
.product-config-page .base-sauce-option.selected,
.product-config-page .topping-choice.selected,
.product-config-page .wing-choice-card.selected {
  border: 3px solid #416c1e;
  background: #ffffff;
  box-shadow: inset 0 -4px 0 #416c1e;
}

.product-config-page .builder-base-group {
  gap: 14px;
}

.product-config-page .builder-base-group h3,
.product-config-page .builder-topping-group h3 {
  color: #40291b;
}

.product-config-page .base-sauce-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.setup-sauce-art {
  background-image: var(--setup-sauce-image);
}

.setup-sauce-copy {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.setup-sauce-copy strong {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.product-config-page .base-sauce-option.selected .setup-sauce-state {
  color: #416c1e;
}

/* Text-only Step-1 setup extras (Crust / Doneness / Sauce Level): no hero
   image, so drop the tall image-sized min-height and keep the card compact so
   it never overflows/clips the modal. Scoped to .setup-extra-option only, so
   the real Base Sauce cards and topping cards keep their images. */
.product-config-page .base-sauce-option.setup-extra-option {
  min-height: 0;
  padding: 14px 16px;
  align-content: center;
}

.product-config-page .topping-category-section + .topping-category-section {
  border-top-color: rgba(64, 41, 27, 0.16);
}

.product-config-page .topping-category-heading {
  color: #40291b;
}

.product-config-page .topping-choice {
  grid-template-columns: 34px minmax(0, 1fr);
  align-content: center;
  color: #40291b;
}

.product-config-page .topping-choice strong {
  font-size: 17px;
}

.product-config-page .wing-choice-card {
  color: #40291b;
}

.product-config-page .builder-reset {
  display: block;
  max-width: 1060px;
  margin: 18px auto 0;
  color: #d83b1e;
  text-align: right;
}

.builder-instructions-panel {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 16px;
  min-height: 120px;
  color: #40291b;
}

/* The builder's Special Instructions step already has its own "Add any
   notes for the kitchen below." intro line -- the moved-in note field's own
   "Special instructions" label text would just repeat that, so it's hidden
   here (the field/textarea itself is unaffected and still saves normally;
   the same field's label text still shows normally everywhere else it's
   used, e.g. for simple non-builder items). See syncItemNoteField() in
   app.js for where the field gets physically moved into this panel. */
.builder-instructions-panel .note-field-label-text {
  display: none;
}

/* This step has no preview/topping content, unlike the other builder
   steps -- give it a single, centered column (instead of stretching the
   note field thin across the full builder-step-panel width) so it doesn't
   look like it's floating beside a big empty area. */
.builder-instructions-panel {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.builder-instructions-panel .config-note-field {
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.builder-guided-nav {
  display: grid;
  gap: 10px;
  max-width: 1240px;
  margin: 20px auto 0;
  padding: 0 24px 24px;
}

.builder-guided-message {
  margin: 0;
  padding: 10px 16px;
  border-radius: 10px;
  background: #f1f2f0;
  color: var(--brand);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.builder-guided-nav-buttons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.builder-guided-nav-buttons button {
  flex: 1 1 0;
  min-width: 0;
}

.builder-guided-nav-buttons button[data-guided-nav="back"] {
  flex: 0 1 160px;
}

.builder-guided-nav-buttons button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.topping-config-layout {
  display: grid;
  grid-template-columns: minmax(0, 850px) minmax(300px, 420px);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}

.topping-config-main {
  min-width: 0;
  display: grid;
  gap: 20px;
}

.topping-multi-layout {
  display: grid;
  gap: clamp(18px, 2.8vw, 30px);
}

.product-config-page .topping-step-reset {
  justify-self: end;
  max-width: none;
  margin: 0;
  padding: 0;
}

.product-config-page .topping-step-reset::after {
  content: "";
  width: 20px;
  height: 20px;
  margin-left: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #df3411;
  vertical-align: -4px;
}

.product-config-page .topping-config-layout .builder-topping-group {
  gap: 18px;
}

.product-config-page .topping-config-layout .builder-group-header {
  align-items: flex-end;
  color: #40291b;
}

.product-config-page .topping-config-layout .builder-group-header h3 {
  color: #40291b;
  font-size: 22px;
}

.product-config-page .topping-config-layout .builder-group-header span {
  color: #7a7169;
}

.topping-limit-notice {
  margin: -8px 0 4px;
  border: 1px solid #f0c8b9;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff4ef;
  color: #b33a1f;
  font-size: 13px;
  font-weight: 900;
}

.product-config-page .topping-config-layout .topping-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.product-config-page .topping-config-layout .topping-choice {
  position: relative;
  display: block;
  min-height: 242px;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 0;
  background: #f3f3f4;
  color: #40291b;
  box-shadow: 0 12px 26px rgba(42, 51, 55, 0.06);
  text-align: left;
}

.product-config-page .topping-config-layout .topping-choice-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: start;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  place-items: normal;
  justify-items: start;
  align-items: start;
  padding: 18px 12px 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
}

.product-config-page .topping-config-layout .topping-choice:hover,
.product-config-page .topping-config-layout .topping-choice:focus-visible {
  border-color: #d83b1e;
}

.product-config-page .topping-config-layout .topping-choice.selected {
  border: 3px solid #416c1e;
  background: #ffffff;
  box-shadow: inset 0 -4px 0 #416c1e, 0 12px 26px rgba(42, 51, 55, 0.06);
}

.product-config-page .topping-config-layout .topping-choice.selected .topping-choice-main {
  padding: 18px 12px 0;
}

.product-config-page .topping-config-layout .topping-select-label {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #df3411;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.product-config-page .topping-config-layout .topping-choice.selected .topping-select-label {
  background: transparent;
  color: #416c1e;
}

.product-config-page .topping-config-layout .topping-choice-main strong {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 148px;
  color: #40291b;
  font-size: 16px;
  line-height: 1.05;
}

.product-config-page .topping-config-layout .topping-choice.selected .topping-choice-main strong {
  max-width: 148px;
}

.product-config-page .topping-config-layout .topping-choice-main > small {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 8px;
  color: #4d3e35;
  font-size: 14px;
  font-weight: 950;
}

.product-config-page .topping-config-layout .topping-choice-main > small::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 7px;
  background: #d83b1e;
}

.product-config-page .topping-config-layout .topping-art {
  position: absolute;
  right: 5%;
  top: 116px;
  bottom: 10px;
  left: 5%;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--topping-image);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  color: inherit;
  transition: transform 0.16s ease;
}

.product-config-page .topping-config-layout .topping-choice.selected .topping-art {
  right: 5%;
  top: 116px;
  bottom: 10px;
  left: 5%;
  width: auto;
  height: auto;
}

.product-config-page .topping-config-layout .topping-choice.extra-flavour-choice.selected {
  grid-column: auto;
}

.product-config-page .topping-config-layout .topping-choice.extra-flavour-choice.selected .topping-choice-main,
.product-config-page .topping-config-layout .topping-choice.extra-flavour-choice.no-art .topping-choice-main {
  padding: 18px 12px 0;
}

.product-config-page .topping-config-layout .topping-choice.extra-flavour-choice.selected .topping-choice-main strong {
  max-width: 148px;
}

.product-config-page .topping-config-layout .topping-choice.extra-flavour-choice.selected .topping-art {
  right: 5%;
  top: 116px;
  bottom: 10px;
  left: 5%;
  width: auto;
  height: auto;
}

.product-config-page .topping-config-layout .topping-choice:hover .topping-art,
.product-config-page .topping-config-layout .topping-choice.selected .topping-art {
  transform: translateY(-5px) scale(1.03);
}

.product-config-page .builder-step-panel .builder-topping-group .topping-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.product-config-page .builder-step-panel .builder-topping-group .topping-choice {
  position: relative;
  display: block;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 0;
  background: #f3f3f4;
  color: #40291b;
  box-shadow: 0 12px 26px rgba(42, 51, 55, 0.06);
  text-align: left;
}

.product-config-page .builder-step-panel .builder-topping-group .topping-choice:hover,
.product-config-page .builder-step-panel .builder-topping-group .topping-choice:focus-visible {
  border-color: #d83b1e;
}

.product-config-page .builder-step-panel .builder-topping-group .topping-choice.selected {
  border: 3px solid #416c1e;
  background: #ffffff;
  box-shadow: inset 0 -4px 0 #416c1e, 0 12px 26px rgba(42, 51, 55, 0.06);
}

.product-config-page .builder-step-panel .builder-topping-group .topping-choice-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: start;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  place-items: normal;
  justify-items: start;
  align-items: start;
  padding: 14px 10px 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
}

.product-config-page .builder-step-panel .builder-topping-group .topping-select-label {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #df3411;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.product-config-page .builder-step-panel .builder-topping-group .topping-choice.selected .topping-select-label {
  color: #416c1e;
}

.product-config-page .builder-step-panel .builder-topping-group .topping-choice-main strong {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 148px;
  color: #40291b;
  font-size: 16px;
  line-height: 1.05;
}

.product-config-page .builder-step-panel .builder-topping-group .topping-choice-main > small {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 8px;
  color: #4d3e35;
  font-size: 14px;
  font-weight: 950;
}

.product-config-page .builder-step-panel .builder-topping-group .topping-choice-main > small::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 7px;
  background: #d83b1e;
}

.product-config-page .builder-step-panel .builder-topping-group .topping-art {
  position: absolute;
  right: 5%;
  top: 100px;
  bottom: 8px;
  left: 5%;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--topping-image);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  box-shadow: none;
  transition: transform 0.16s ease;
}

.product-config-page .builder-step-panel .builder-topping-group .topping-choice:hover .topping-art,
.product-config-page .builder-step-panel .builder-topping-group .topping-choice.selected .topping-art {
  transform: translateY(-5px) scale(1.03);
}

.product-config-page .builder-step-panel .builder-topping-group .topping-check {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #416c1e;
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
}

.product-config-page .topping-config-layout .topping-check {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #416c1e;
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
}

.topping-portion-controls {
  position: absolute;
  top: auto;
  bottom: 24px;
  right: 18px;
  z-index: 5;
  display: flex;
  gap: 4px;
}

.topping-portion {
  display: grid;
  justify-items: center;
  gap: 2px;
  border: 0;
  padding: 0;
  min-height: 34px;
  background: transparent;
  color: #6c635c;
  font-size: 10px;
  font-weight: 850;
}

.product-config-page .topping-config-layout .topping-portion .portion-icon {
  width: 20px;
  height: 20px;
  display: block;
  border: 2px solid #d3d8d4;
  border-radius: 50%;
  background: #e9ece9;
  color: inherit;
}

.product-config-page .topping-config-layout .topping-portion small {
  margin: 0;
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.product-config-page .topping-config-layout .topping-portion small::before {
  display: none;
}

.topping-portion.active {
  color: #416c1e;
}

.product-config-page .topping-config-layout .topping-portion.active .portion-icon {
  border-color: #416c1e;
  box-shadow: 0 0 0 2px rgba(65, 108, 30, 0.16);
}

.portion-icon-left {
  background: linear-gradient(90deg, #416c1e 0 50%, #e9ece9 50% 100%) !important;
}

.portion-icon-whole {
  background: #416c1e !important;
}

.portion-icon-right {
  background: linear-gradient(90deg, #e9ece9 0 50%, #416c1e 50% 100%) !important;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 242px;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 0;
  background: #f3f3f4;
  color: #40291b;
  box-shadow: 0 12px 26px rgba(42, 51, 55, 0.06);
  text-align: left;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice.selected {
  border: 3px solid #416c1e;
  background: #ffffff;
  box-shadow: inset 0 -4px 0 #416c1e, 0 12px 26px rgba(42, 51, 55, 0.06);
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0;
  justify-items: start;
  align-items: start;
  padding: 10px 10px 4px;
  background: transparent;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main strong {
  max-width: none;
  line-height: 1.2;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main > small {
  margin-top: 6px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-art {
  position: relative;
  inset: auto;
  width: 100%;
  height: 112px;
  margin-top: 6px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--topping-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  box-shadow: none;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px 6px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-extra-price {
  color: #7a7169;
  font-size: 12px;
  font-weight: 900;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-extra-price.active {
  color: var(--brand);
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-qty-stepper button {
  width: 28px;
  height: 28px;
  border: 1px solid #d2ccc5;
  border-radius: 50%;
  background: #ffffff;
  color: #5d5148;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-qty-stepper button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-qty-stepper span {
  min-width: 12px;
  color: #40291b;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-placement {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 4px 6px 8px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-placement-placeholder {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #d9d2ca;
  border-radius: 14px;
  min-height: 38px;
  padding: 6px 8px;
  color: #7a7169;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-placement.active {
  padding-top: 4px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion-controls {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: 210px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--row-highlight);
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  min-height: 34px;
  padding: 6px 4px;
  border-radius: 999px;
  background: transparent;
  color: #5f564f;
  text-align: center;
  line-height: 1;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion span {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion.active {
  background: #416c1e;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(24, 37, 12, 0.22);
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion .portion-icon {
  display: none;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-check {
  top: 10px;
  right: 10px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice:hover .topping-art,
.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice.selected .topping-art {
  transform: translateY(-2px) scale(1.02);
}

.topping-preview-panel {
  position: sticky;
  top: 132px;
  display: grid;
  gap: 18px;
  min-width: 0;
}

.topping-preview-panel.single-preview {
  justify-items: center;
}

.topping-preview-panel.multi-preview {
  justify-items: stretch;
}

.topping-preview-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 14px;
}

.topping-preview-panel.multi-preview .topping-preview-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.topping-preview-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: #ffffff;
}

.topping-preview-card h4 {
  margin: 0;
  color: #40291b;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topping-preview-stage {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  isolation: isolate;
}

.topping-preview-stage.is-square {
  border-radius: 10%;
}

.topping-preview-base {
  position: absolute;
  border-radius: 50%;
}

.topping-preview-stage.is-square .topping-preview-base {
  border-radius: 10%;
}

.topping-preview-crust {
  inset: 14%;
  background: #dba66e;
}

.topping-preview-sauce {
  inset: 17%;
  background: #be4336;
  opacity: 0.92;
}

.topping-preview-cheese {
  inset: 20%;
  background: #f4cf7f;
  opacity: 0.9;
}

.topping-preview-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: var(--item-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.8;
  filter: drop-shadow(0 26px 32px rgba(68, 44, 28, 0.22));
}

.topping-preview-stage.no-base .topping-preview-base {
  display: none;
}

.topping-preview-stage.no-base .topping-preview-image {
  opacity: 1;
  filter: none;
}

.topping-preview-stage.no-base {
  background: var(--row-highlight);
}

.preview-topping-layer {
  position: absolute;
  inset: 9%;
  overflow: clip;
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(3 + var(--preview-layer-index, 0));
}

.topping-preview-stage.is-square .preview-topping-layer {
  border-radius: 10%;
}

.preview-topping-piece {
  position: absolute;
  left: var(--piece-x);
  top: var(--piece-y);
  width: calc(var(--preview-piece-base-size, 12.5%) * var(--piece-size-multiplier, 1));
  aspect-ratio: 1;
  background-image: var(--topping-piece-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 1px 3px rgba(62, 39, 25, 0.3));
  opacity: 0.95;
  transform: translate(-50%, -50%) rotate(var(--piece-rotation));
  transform-origin: center;
  pointer-events: none;
}

.preview-topping-layer-left {
  clip-path: polygon(0 0, 52% 0, 52% 100%, 0 100%);
}

.preview-topping-layer-right {
  clip-path: polygon(48% 0, 100% 0, 100% 100%, 48% 100%);
}

.topping-preview-sizes {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  min-width: 0;
}

.topping-preview-sizes .pizza-size-selector,
.product-config-page .topping-preview-sizes .pizza-size-selector {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  background: transparent;
}

.topping-preview-sizes .pizza-size-card,
.product-config-page .topping-preview-sizes .pizza-size-card {
  min-width: 0;
  min-height: 96px;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  box-shadow: none;
}

.topping-preview-sizes .pizza-size-card.selected,
.product-config-page .topping-preview-sizes .pizza-size-card.selected {
  border-color: #d83b1e;
  background: rgba(216, 59, 30, 0.06);
  box-shadow: inset 0 0 0 1px rgba(216, 59, 30, 0.16);
}

.topping-preview-sizes .pizza-size-icon {
  width: 28px;
  height: 28px;
}

.topping-preview-sizes .pizza-size-card strong {
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.topping-preview-sizes .pizza-size-card small {
  font-size: 10px;
  line-height: 1.1;
  font-weight: 800;
  color: #6a5e55;
}

.topping-preview-purchase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.topping-preview-qty {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 106px;
  color: #3c2d22;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.topping-preview-qty button {
  width: 28px;
  height: 28px;
  border: 1px solid #d9cec2;
  border-radius: 50%;
  background: #ffffff;
  color: #c74a1a;
  font-size: 18px;
  line-height: 1;
}

.topping-preview-qty button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.topping-preview-qty [data-preview-qty-value] {
  min-width: 18px;
  text-align: center;
}

.topping-preview-live-price {
  color: #3a2a1d;
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: 950;
  line-height: 1;
}

.topping-preview-add {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  white-space: nowrap;
  margin-left: auto;
}

.topping-preview-panel p {
  max-width: none;
  margin: 0;
  color: #5d5148;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.quantity-control {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 900;
}

.info-dialog dl {
  margin: 0;
}

.info-dialog dt {
  margin-top: 16px;
  color: var(--muted);
  font-weight: 900;
}

.info-dialog dd {
  margin: 4px 0;
}

@media (max-width: 1120px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .config-product-hero {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  }

  .config-order-panel {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(240px, 1fr) auto;
    align-items: center;
  }

  .config-order-panel small {
    text-align: right;
  }

  .topping-config-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  }

  .product-config-page .topping-config-layout .topping-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .main-nav {
    display: none;
  }

  .ordering-layout {
    grid-template-columns: 1fr;
  }

  .category-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cart-panel {
    padding: 0;
  }

  .cart-drawer-bar {
    width: 100%;
    max-width: none;
    border-radius: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }

  .cart-card {
    width: 100%;
    max-width: none;
  }
}

/* Desktop/laptop cart: a right-aligned drawer instead of the full-width
   card the rules above force at <=1120px (and the 1120px cap the base
   .cart-card/.cart-drawer-bar rules apply above that). Comes after the
   max-width:1120px block above so it wins the cascade for 761-1120px too,
   and is guarded by min-width so none of it reaches the <=760px fullscreen
   mobile cart styled further below. */
@media (min-width: 761px) {
  .cart-panel {
    justify-items: end;
    padding: 0 clamp(16px, 2.6vw, 28px) calc(env(safe-area-inset-bottom) + 14px) 0;
  }

  .cart-drawer-bar,
  .cart-card {
    width: clamp(360px, 32vw, 460px);
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .cart-card {
    max-height: 50vh;
    padding: 14px 16px;
  }

  .cart-panel.cart-open .cart-card {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: calc(14px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom));
    z-index: 90;
  }

  .cart-panel.cart-open .cart-drawer-bar {
    display: none;
  }

  html.cart-fullscreen-open,
  body.cart-fullscreen-open {
    overflow: hidden;
    height: 100%;
  }

  .cart-close {
    min-height: 56px;
    justify-items: stretch;
    width: calc(100% + 32px);
    /* margin-top used to be a flat -14px, which only cancels the fixed part
       of .cart-card's padding-top (calc(14px + env(safe-area-inset-top)))
       and leaves the inset portion in place -- that stranded the red banner's
       top edge just below the notch (a visible white sliver above it) while
       ALSO re-adding the same inset via this rule's own padding-top below,
       producing a large empty red void above the drag handle. Cancelling the
       inset here too lets the red banner's box start at the true top edge
       (so its background bleeds behind the status bar/Dynamic Island, which
       is the desired look) while padding-top alone -- unchanged -- still
       pushes the actual drag handle/content down to clear the notch, with no
       double-counting. 0px fallback keeps this a no-op on desktop/normal
       mobile web. */
    margin-top: calc(-14px - env(safe-area-inset-top, 0px));
    margin-right: -16px;
    margin-bottom: 12px;
    margin-left: -16px;
    border-radius: 0;
    padding: calc(12px + env(safe-area-inset-top)) 16px 14px;
    gap: 8px;
  }

  .cart-close-grab {
    width: 64px;
    height: 7px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.5);
  }

  .cart-close-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
  }

  .cart-close-summary {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.92);
  }

  .cart-close-summary strong {
    font-size: 18px;
    color: var(--gold);
  }

  .cart-close-copy {
    display: none;
  }

  .cart-close-chevron {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: #ffffff;
  }

  .cart-close-chevron svg {
    width: 18px;
    height: 18px;
  }

  .cart-title-row .eyebrow {
    display: none;
  }

  .cart-card h2 {
    margin: 0;
    font-size: 19px;
  }

  .cart-meta {
    margin-bottom: 8px;
  }

  .cart-meta span {
    padding: 4px 8px;
    font-size: 12px;
  }

  .cart-lines {
    gap: 12px;
    margin: 0 -16px;
    padding: 14px 16px;
  }

  .cart-line {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
  }

  .cart-line-media {
    width: 118px;
    height: 118px;
    border-radius: 15px;
    padding: 8px;
  }

  .cart-line-name {
    font-size: 16.5px;
  }

  .cart-line-desc {
    font-size: 13px;
  }

  .cart-line-price {
    font-size: 17px;
  }

  .cart-line-stepper button {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .cart-line-actions {
    gap: 6px;
    margin-top: 6px;
  }

  .cart-line-action {
    height: 30px;
    font-size: 12px;
  }

  .totals {
    margin-top: 8px;
    padding: 10px 14px;
  }

  .totals div {
    margin-bottom: 4px;
    font-size: 13px;
  }

  .totals .grand-total {
    padding-top: 7px;
    font-size: 16px;
  }

  #cartScroll .totals {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 10px;
  }

  #cartScroll .totals div {
    margin-bottom: 3px;
    font-size: 12px;
  }

  #cartScroll .grand-total {
    padding-top: 6px;
    font-size: 15px;
  }

  .checkout-button {
    margin-top: 6px;
    padding: 12px 18px;
  }

  .brand-img {
    height: 64px;
  }

  .product-config-page {
    padding-bottom: 116px;
  }

  .story-page {
    padding: 16px 14px 190px;
  }

  .story-shell p {
    font-size: 16px;
    line-height: 1.58;
  }

  .config-shell {
    padding: 14px 14px 0;
  }

  .config-product-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-bottom: 18px;
    margin-inline: 0;
  }

  .product-config-page {
    /* clip (not hidden) so it does NOT create a scroll container that would
       break position: sticky on the mobile builder preview */
    overflow-x: clip;
  }

  .config-product-copy {
    text-align: center;
  }

  .config-product-copy h1 {
    font-size: clamp(1.6rem, 8vw, 2.15rem);
    line-height: 1.1;
  }

  .config-product-copy #dialogDescription,
  .config-ingredient-line {
    margin-inline: auto;
    font-size: 15px;
  }

  .config-product-image {
    justify-self: center;
    width: min(76vw, 320px);
  }

  .config-order-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    grid-template-columns: auto minmax(0, 1fr);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 12px 12px 0 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }

  .config-order-panel small {
    display: none;
  }

  .product-config-page .pizza-size-selector,
  .product-config-page .wing-size-selector {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 18px;
  }

  .product-config-page .pizza-size-card,
  .product-config-page .wing-size-card {
    flex: 0 0 124px;
    min-height: 116px;
  }

  .product-config-page .builder-step-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 0;
  }

  .product-config-page .builder-step-tabs button {
    flex: 0 0 150px;
    min-height: 62px;
    font-size: 14px;
  }

  .setup-choice-grid,
  .product-config-page .base-sauce-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-config-page .topping-choice-grid,
  .product-config-page .wing-card-grid {
    grid-template-columns: 1fr;
  }

  .product-config-page .modifier-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setup-choice-card,
  .product-config-page .base-sauce-option {
    min-height: 196px;
  }

  .product-config-page .topping-choice,
  .product-config-page .wing-choice-card {
    min-height: 116px;
  }

  .topping-config-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .topping-preview-panel {
    position: static;
    order: -1;
  }

  .topping-preview-stage {
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .topping-preview-panel p {
    font-size: 13px;
  }

  .product-config-page .topping-config-layout .topping-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .product-config-page .topping-config-layout .topping-choice {
    min-height: 252px;
  }

  .product-config-page .topping-config-layout .topping-choice-main {
    padding: 12px 10px 8px;
  }

  .product-config-page .topping-config-layout .topping-choice-main strong {
    max-width: none;
    font-size: 15px;
  }

  .product-config-page .topping-config-layout .topping-choice-main > small {
    font-size: 13px;
  }

  .product-config-page .topping-config-layout .topping-art {
    height: 98px;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice {
    min-height: 220px;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-main {
    padding: 10px 8px 6px;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-main strong {
    max-width: none;
    font-size: 15px;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-main > small {
    font-size: 13px;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-art {
    height: 80px;
  }

  .topping-portion-controls {
    top: auto;
    right: auto;
    bottom: auto;
    gap: 0;
  }

  .product-config-page .topping-config-layout .topping-portion .portion-icon {
    display: none;
  }

  .product-config-page .topping-config-layout .topping-portion small {
    font-size: 10px;
  }

  .site-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .header-actions {
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .delivery-location,
  .outline-action {
    flex: 1;
  }

  .delivery-location {
    justify-content: center;
  }

  .delivery-location-copy strong {
    font-size: 18px;
  }

  .delivery-location-copy a {
    text-align: center;
  }

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

  .storefront-content {
    padding-inline: 14px;
  }

  .storefront {
    padding-bottom: calc(106px + env(safe-area-inset-bottom));
  }

  .storefront:not(.category-active) .ordering-layout {
    padding-bottom: 0;
  }

  .menu-header {
    top: auto;
  }

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

  .category-card-title {
    font-size: 18px;
    padding: 0;
  }

  .category-card {
    aspect-ratio: 4 / 3.7;
    min-height: 236px;
    padding: 16px;
    border-radius: 13px;
  }

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

  .menu-item {
    grid-template-columns: 102px minmax(0, 1fr);
    min-height: 162px;
  }

  .item-image {
    min-height: 132px;
  }

  .order-dialog form,
  .item-dialog form,
  .info-dialog form,
  .checkout-dialog form {
    padding: 24px;
  }

  .dialog-image {
    margin: -24px -24px 20px;
  }

  .pizza-builder {
    margin-right: -24px;
    margin-left: -24px;
  }

  .wing-builder {
    margin-right: -24px;
    margin-left: -24px;
  }

  .pizza-size-selector,
  .wing-size-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px 24px 14px;
  }

  .builder-ingredient-line,
  .wing-required-message {
    padding: 0 24px 18px;
    font-size: 16px;
  }

  .builder-step-tabs button {
    min-height: 78px;
    padding: 10px 8px;
    font-size: 16px;
  }

  .builder-step-panel {
    padding: 20px 24px 16px;
  }

  .topping-choice-grid {
    grid-template-columns: 1fr;
  }

  .wing-choice-card {
    grid-template-columns: 108px minmax(0, 1fr);
    min-height: 126px;
    padding: 12px;
  }

  .wing-choice-card::before {
    width: 90px;
    height: 76px;
  }

  .builder-reset {
    margin-right: 24px;
    margin-bottom: 18px;
  }

  .product-config-page .modifier-wing-sauce-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .modifier-wing-sauce-grid .wing-choice-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: 12px;
  }

  .modifier-wing-sauce-grid .wing-sauce-art {
    width: 100%;
    max-width: 120px;
    height: 78px;
  }

  .split-controls,
  .when-row,
  .modal-footer {
    grid-template-columns: 1fr;
  }

  .modal-footer {
    margin: 20px -24px -24px;
    padding: 14px 24px 20px;
  }

  .site-footer-main {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-inline: 14px;
  }

  .site-footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 22px;
  }

  .site-footer-legal {
    padding-inline: 14px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 600px) {
  .category-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .category-card {
    aspect-ratio: 4 / 3.8;
    min-height: 196px;
    padding: 14px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(34, 26, 20, 0.16);
  }

  .category-card-title {
    font-size: 16px;
    line-height: 1.12;
    padding: 0;
    max-width: 94%;
  }

  .product-config-page .modifier-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .site-footer-links {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 430px) {
  .brand strong {
    font-size: 18px;
  }

  .header-actions {
    flex-wrap: wrap;
  }

  .delivery-location {
    width: 100%;
    justify-content: flex-start;
  }

  .delivery-location-copy strong {
    font-size: 15px;
  }

  .delivery-location-copy a {
    display: none;
  }

  .menu-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .item-image {
    min-height: 156px;
    height: 156px;
  }
}

.auth-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.auth-controls .auth-btn {
  padding: 10px 14px;
  font-size: 14px;
}

.header-auth-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d5c4b6;
  border-radius: 999px;
  background: #ffffff;
  color: #2c221e;
  text-align: left;
}

/* a class selector like .header-auth-control above otherwise outranks the
   UA [hidden] rule, so headerAuthBtn.hidden = true (set once signed in)
   would fail to actually hide the button without this explicit override. */
.header-auth-control[hidden] {
  display: none;
}

.header-auth-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.header-auth-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.header-auth-copy {
  display: grid;
  gap: 1px;
  line-height: 1.1;
}

.header-auth-copy strong {
  color: #241c18;
  font-size: 14px;
  font-weight: 900;
}

.header-auth-copy span {
  color: #8f2024;
  font-size: 12px;
  font-weight: 700;
}

.auth-switch-link {
  margin-top: 8px;
}

/* "Forgot password?" link under the sign-in password field (2026-07). Right-
   aligned, brand-red underline-style text button matching the auth form's
   underline fields. */
.auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 2px;
}

.auth-forgot-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.auth-forgot-link:hover {
  color: #821418;
}

.account-menu {
  position: relative;
}

/* Signed-in user name (v173): plain professional text, NOT a bordered pill.
   Replaces the old .outline-action .auth-btn "box" treatment. Still the
   #accountMenuToggle popover trigger, with a small down-chevron caret hinting
   at the dropdown. renderAuthControls() only sets its textContent, so the
   ::after caret is preserved. */
.account-name-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--charcoal);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
}

.account-name-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  flex: 0 0 auto;
}

.account-name-toggle:hover,
.account-name-toggle:focus-visible {
  color: var(--brand-dark);
}

/* The popover's `display: grid` below has the same specificity as the UA
   [hidden]{display:none} rule and comes later in the cascade, so it silently
   wins over `hidden` -- the account dropdown then renders permanently open on
   desktop. Explicit override needed (same fix as .header-auth-control[hidden]
   and .config-note-field[hidden] elsewhere in this file). */
.account-menu-popover[hidden] {
  display: none;
}

/* v182: premium account panel -- header (avatar + name + email), a Pizza
   Rewards progress strip, iconed two-line menu items with chevrons, and a
   set-apart footer (Sign out + Delete account). Modeled on the account menus
   of leading food-ordering apps while keeping The Pizza House palette. */
.account-menu-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid rgba(30, 20, 14, 0.08);
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 24px 48px -12px rgba(30, 20, 14, 0.28),
    0 8px 20px -8px rgba(30, 20, 14, 0.16);
  transform-origin: top right;
  animation: accountMenuIn 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
  z-index: 60;
}

@keyframes accountMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.account-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 14px;
}

.account-menu-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand-red, #c1272d), var(--brand-dark, #8f1c20));
  box-shadow: 0 6px 14px -4px rgba(193, 39, 45, 0.5);
}

.account-menu-id {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-menu-id strong {
  font-size: 15px;
  font-weight: 800;
  color: #241a15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-id span {
  font-size: 12.5px;
  color: #8a7d74;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-rewards {
  margin: 0 4px 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff6ec, #fdeede);
  border: 1px solid rgba(193, 39, 45, 0.12);
  display: grid;
  gap: 8px;
}

.account-menu-rewards[hidden] {
  display: none;
}

.account-menu-rewards-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.account-menu-rewards-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1421f;
}

.account-menu-rewards-points {
  font-size: 13px;
  font-weight: 800;
  color: #7a1f14;
  white-space: nowrap;
}

.account-menu-rewards-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(193, 39, 45, 0.14);
  overflow: hidden;
}

.account-menu-rewards-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e0952b, #c1272d);
  transition: width 0.4s ease;
}

.account-menu-rewards-note {
  font-size: 11.5px;
  font-weight: 600;
  color: #9a6b4a;
}

.account-menu-rewards.is-ready {
  background: linear-gradient(135deg, #eafaef, #dff5e6);
  border-color: rgba(31, 145, 73, 0.22);
}

.account-menu-rewards.is-ready .account-menu-rewards-label { color: #1f7a3d; }
.account-menu-rewards.is-ready .account-menu-rewards-points { color: #146b34; }
.account-menu-rewards.is-ready .account-menu-rewards-note { color: #2f8a4f; }
.account-menu-rewards.is-ready .account-menu-rewards-fill {
  background: linear-gradient(90deg, #34c759, #1f9149);
}

.account-menu-group {
  display: grid;
  gap: 2px;
  padding: 4px;
  border-top: 1px solid rgba(30, 20, 14, 0.07);
}

.account-menu-foot {
  display: grid;
  gap: 2px;
  padding: 4px;
  margin-top: 2px;
  border-top: 1px solid rgba(30, 20, 14, 0.07);
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #2a201b;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.06s ease;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: var(--row-highlight, #f6f1ea);
  outline: none;
}

.account-menu-item:active {
  transform: scale(0.99);
}

.account-menu-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f4efe8;
  color: #6b5d53;
}

.account-menu-icon svg {
  width: 18px;
  height: 18px;
}

.account-menu-item-copy {
  display: grid;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.account-menu-item-copy > span {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.account-menu-item-copy small {
  font-size: 11.5px;
  font-weight: 500;
  color: #9a8d83;
}

.account-menu-chevron {
  flex: 0 0 auto;
  color: #c9bcb1;
  display: grid;
  place-items: center;
}

.account-menu-chevron svg {
  width: 16px;
  height: 16px;
}

.account-menu-item:hover .account-menu-chevron {
  color: #6b5d53;
}

.account-menu-quiet .account-menu-icon {
  background: #efeae3;
}

/* Destructive account action (Delete account) -- set apart with a quiet red
   so it reads as irreversible. */
.account-menu-item.account-menu-danger {
  color: #b3261e;
}

.account-menu-item.account-menu-danger .account-menu-icon {
  background: #fdecec;
  color: #c0362c;
}

.account-menu-item.account-menu-danger:hover,
.account-menu-item.account-menu-danger:focus-visible {
  background: #fdecec;
}

@media (prefers-reduced-motion: reduce) {
  .account-menu-popover {
    animation: none;
  }
  .account-menu-rewards-fill {
    transition: none;
  }
}

/* ===== Native customer app V2 ============================================
   Activated only by app.js when running in Capacitor (or ?app=v2 for QA).
   The public website retains the storefront rules above unchanged. */
.native-app-shell,
.native-app-tabbar {
  display: none;
}

body.native-v2 {
  --native-tab-height: 74px;
  --native-red: #971d24;
  --native-red-dark: #651016;
  --native-gold: #f2b72d;
  --native-cream: #fff8ec;
  --native-ink: #241b18;
  --native-muted: #716560;
  --native-line: rgba(70, 43, 34, 0.12);
  --native-card-shadow: 0 14px 34px rgba(74, 35, 25, 0.1);
  background:
    radial-gradient(circle at 92% 4%, rgba(242, 183, 45, 0.12), transparent 26rem),
    #fbf8f3;
  padding-bottom: calc(var(--native-tab-height) + env(safe-area-inset-bottom, 0px));
  letter-spacing: 0;
  color: var(--native-ink);
  overflow-x: clip;
}

body.native-v2 .site-header,
body.native-v2 .site-footer,
body.native-v2 .promo-banner,
body.native-v2 .app-download-promo {
  display: none !important;
}

body.native-v2 .storefront,
body.native-v2 .storefront-content {
  width: 100%;
  max-width: none;
  margin: 0;
}

body.native-v2 .storefront-content {
  padding-top: 0;
}

body.native-v2:not(.native-view-menu) .track-recent-order,
body.native-v2:not(.native-view-menu) .featured-section,
body.native-v2:not(.native-view-menu) .ordering-layout {
  display: none !important;
}

body.native-v2 button,
body.native-v2 input,
body.native-v2 select,
body.native-v2 textarea {
  min-height: 44px;
}

body.native-v2 .native-app-shell {
  display: block;
  width: min(100%, 1040px);
  min-height: 100vh;
  margin: 0 auto;
  padding: env(safe-area-inset-top, 0px) clamp(14px, 3vw, 28px) 36px;
}

body.native-v2.native-view-menu .native-app-shell {
  min-height: auto;
  padding-bottom: 0;
}

body.native-v2 .native-app-header {
  position: sticky;
  z-index: 45;
  top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  margin: 0 calc(clamp(14px, 3vw, 28px) * -1) 18px;
  padding: 8px clamp(14px, 3vw, 28px);
  border-bottom: 1px solid transparent;
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.native-v2.native-view-menu .native-app-header,
body.native-v2.native-view-offers .native-app-header,
body.native-v2.native-view-orders .native-app-header,
body.native-v2.native-view-account .native-app-header {
  border-bottom-color: var(--native-line);
}

body.native-v2 .native-app-brand {
  display: grid;
  min-width: 0;
  padding: 0;
  place-items: center start;
  border: 0;
  background: transparent;
}

body.native-v2 .native-app-logo {
  display: block;
  width: 152px;
  height: 46px;
  object-fit: contain;
  object-position: left center;
}

body.native-v2 .native-app-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.native-v2 .native-app-icon-btn {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--native-line);
  border-radius: 15px;
  background: #ffffff;
  color: var(--native-red-dark);
  box-shadow: 0 7px 18px rgba(73, 33, 24, 0.08);
}

body.native-v2 .native-app-icon-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.native-v2 .native-app-cart-badge {
  position: absolute;
  top: -5px;
  right: -4px;
  display: grid;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid #fbf8f3;
  border-radius: 11px;
  background: var(--native-red);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
}

body.native-v2 .native-app-screen[hidden] {
  display: none !important;
}

body.native-v2 .native-app-screen {
  animation: native-screen-in 0.32s ease both;
}

body.native-v2 .native-app-welcome {
  margin: 4px 0 20px;
}

body.native-v2 .native-app-kicker,
body.native-v2 .native-app-section-heading span,
body.native-v2 .native-app-feature-copy > span,
body.native-v2 .native-app-rewards-top span {
  display: block;
  color: var(--native-red);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.native-v2 .native-app-welcome h1,
body.native-v2 .native-app-page-intro h1 {
  margin: 7px 0 6px;
  color: var(--native-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(31px, 8.6vw, 48px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

body.native-v2 .native-app-welcome > p,
body.native-v2 .native-app-page-intro > p {
  max-width: 620px;
  margin: 0;
  color: var(--native-muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

body.native-v2 .native-app-offline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #edcc72;
  border-radius: 16px;
  background: #fff4ce;
  color: #5c4310;
}

body.native-v2 .native-app-offline[hidden] {
  display: none;
}

body.native-v2 .native-app-offline > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cb7a08;
  box-shadow: 0 0 0 5px rgba(203, 122, 8, 0.13);
}

body.native-v2 .native-app-offline div {
  display: grid;
  gap: 2px;
}

body.native-v2 .native-app-offline small {
  font-size: 11px;
  line-height: 1.3;
}

body.native-v2 .native-app-offline button {
  min-width: 58px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  color: #735110;
  font-weight: 900;
}

body.native-v2 .native-app-feature {
  position: relative;
  display: grid;
  min-height: 430px;
  margin-bottom: 28px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 76% 20%, rgba(242, 183, 45, 0.25), transparent 28%),
    linear-gradient(145deg, #9d2027 0%, #711219 67%, #520c12 100%);
  color: #ffffff;
  box-shadow: 0 24px 44px rgba(102, 17, 23, 0.23);
}

body.native-v2 .native-app-feature-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

body.native-v2 .native-app-feature-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(74, 8, 13, 0.02) 25%, rgba(69, 8, 13, 0.94) 83%);
  content: "";
}

body.native-v2 .native-app-feature-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.03);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body.native-v2 .native-app-feature:active .native-app-feature-art img {
  transform: scale(1.07);
}

body.native-v2 .native-app-feature-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: end;
  width: min(100%, 620px);
  padding: 28px 24px;
}

body.native-v2 .native-app-feature-copy > span {
  color: var(--native-gold);
}

body.native-v2 .native-app-feature h2 {
  max-width: 520px;
  margin: 8px 0 9px;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(32px, 9vw, 56px);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

body.native-v2 .native-app-feature p {
  max-width: 460px;
  margin: 0 0 18px;
  color: #f8e7df;
  font-size: 14px;
  line-height: 1.45;
}

body.native-v2 .native-app-feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

body.native-v2 .native-app-feature button {
  padding: 0 17px;
  border: 0;
  border-radius: 14px;
  background: var(--native-gold);
  color: #3e2708;
  font-size: 12px;
  font-weight: 900;
}

body.native-v2 .native-app-feature button.quiet {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(40, 8, 11, 0.38);
  color: #ffffff;
  backdrop-filter: blur(8px);
}

body.native-v2 .native-app-feature-stamp {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(104, 14, 20, 0.74);
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(8deg);
  backdrop-filter: blur(6px);
}

body.native-v2 .native-app-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}

body.native-v2 .native-app-section-heading h2 {
  margin: 3px 0 0;
  color: var(--native-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 25px;
  letter-spacing: -0.025em;
}

body.native-v2 .native-app-section-heading button {
  min-width: 70px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--native-red);
  font-size: 12px;
  font-weight: 900;
}

body.native-v2 .native-app-deals {
  margin-bottom: 28px;
}

body.native-v2 .native-app-deal-track {
  display: grid;
  grid-auto-columns: minmax(210px, 76vw);
  grid-auto-flow: column;
  gap: 12px;
  margin-right: calc(clamp(14px, 3vw, 28px) * -1);
  padding: 0 clamp(14px, 3vw, 28px) 12px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

body.native-v2 .native-app-deal-track::-webkit-scrollbar {
  display: none;
}

body.native-v2 .native-app-deal-card,
body.native-v2 .native-app-offer-card {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--native-line);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--native-card-shadow);
  text-align: left;
}

body.native-v2 .native-app-deal-card {
  min-height: 256px;
  padding: 0;
  scroll-snap-align: start;
}

body.native-v2 .native-app-deal-card img,
body.native-v2 .native-app-offer-card img {
  display: block;
  width: 100%;
  height: 142px;
  object-fit: cover;
  transition: transform 0.35s ease;
}

body.native-v2 .native-app-deal-card:active img,
body.native-v2 .native-app-offer-card:active img {
  transform: scale(1.04);
}

body.native-v2 .native-app-deal-card-copy,
body.native-v2 .native-app-offer-card-copy {
  display: grid;
  gap: 4px;
  padding: 14px;
}

body.native-v2 .native-app-deal-card-copy > span,
body.native-v2 .native-app-offer-card-copy > span {
  color: var(--native-red);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.native-v2 .native-app-deal-card-copy strong,
body.native-v2 .native-app-offer-card-copy strong {
  color: var(--native-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  line-height: 1.1;
}

body.native-v2 .native-app-deal-card-copy small,
body.native-v2 .native-app-offer-card-copy small {
  color: var(--native-muted);
  font-size: 11px;
  line-height: 1.35;
}

body.native-v2 .native-app-deal-card-copy b,
body.native-v2 .native-app-offer-card-copy b {
  margin-top: 4px;
  color: var(--native-red-dark);
  font-size: 15px;
}

body.native-v2 .native-app-rewards {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding: 17px 13px;
  overflow: hidden;
  border: 1px solid rgba(151, 29, 36, 0.15);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(242, 183, 45, 0.22), transparent 45%),
    #ffffff;
  box-shadow: var(--native-card-shadow);
}

body.native-v2 .native-app-rewards-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  background: var(--native-red);
  color: var(--native-gold);
}

body.native-v2 .native-app-rewards-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.native-v2 .native-app-rewards-content {
  min-width: 0;
}

body.native-v2 .native-app-rewards-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

body.native-v2 .native-app-rewards-top div > strong {
  display: block;
  margin-top: 3px;
  color: var(--native-ink);
  font-size: 13px;
  line-height: 1.25;
}

body.native-v2 .native-app-rewards-top > strong {
  flex: 0 0 auto;
  color: var(--native-red);
  font-size: 15px;
}

body.native-v2 .native-app-rewards-track {
  height: 7px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 8px;
  background: #eee8df;
}

body.native-v2 .native-app-rewards-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--native-gold), #e49815);
  transition: width 0.4s ease;
}

body.native-v2 .native-app-card-link {
  display: grid;
  width: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--native-red);
}

body.native-v2 .native-app-card-link span {
  font-size: 30px;
  line-height: 1;
}

body.native-v2 .native-app-again {
  margin-bottom: 28px;
}

body.native-v2 .native-app-again-body {
  min-height: 126px;
  padding: 17px;
  border: 1px solid var(--native-line);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--native-card-shadow);
}

body.native-v2 .native-app-again-body > p {
  margin: 0 0 13px;
  color: var(--native-muted);
  font-size: 14px;
  line-height: 1.45;
}

body.native-v2 .native-app-again-body > button,
body.native-v2 .native-app-order-card-actions button,
body.native-v2 .native-app-state button,
body.native-v2 .native-app-account-actions button {
  padding: 0 14px;
  border: 1px solid var(--native-line);
  border-radius: 13px;
  background: #ffffff;
  color: var(--native-ink);
  font-size: 12px;
  font-weight: 900;
}

body.native-v2 .native-app-order-card {
  display: grid;
  gap: 12px;
}

body.native-v2 .native-app-order-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body.native-v2 .native-app-order-card-top span strong,
body.native-v2 .native-app-order-card-top span small {
  display: block;
}

body.native-v2 .native-app-order-card-top span small {
  margin-top: 3px;
  color: var(--native-muted);
  font-size: 12px;
}

body.native-v2 .native-app-order-card > p {
  margin: 0;
  color: var(--native-muted);
  font-size: 13px;
  line-height: 1.45;
}

body.native-v2 .native-app-order-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.native-v2 .native-app-order-card-actions button.primary {
  border-color: var(--native-red);
  background: var(--native-red);
  color: #ffffff;
}

body.native-v2 .native-app-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body.native-v2 .native-app-order-meta span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--native-cream);
  color: #665047;
  font-size: 10px;
  font-weight: 800;
  text-transform: capitalize;
}

body.native-v2 .native-app-story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38%;
  min-height: 220px;
  overflow: hidden;
  border-radius: 24px;
  background: #231918;
  color: #ffffff;
}

body.native-v2 .native-app-story > div {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 22px 0 22px 20px;
}

body.native-v2 .native-app-story span {
  color: var(--native-gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.native-v2 .native-app-story h2 {
  margin: 7px 0 9px;
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(24px, 7vw, 38px);
  line-height: 1;
}

body.native-v2 .native-app-story p {
  margin: 0;
  color: #d8c9c3;
  font-size: 12px;
  line-height: 1.45;
}

body.native-v2 .native-app-story img {
  align-self: end;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

body.native-v2 .native-app-page-intro {
  margin: 16px 0 24px;
}

body.native-v2 .native-app-offers-grid,
body.native-v2 .native-app-orders-list {
  display: grid;
  gap: 14px;
}

body.native-v2 .native-app-offer-card {
  grid-template-columns: 38% minmax(0, 1fr);
  min-height: 170px;
  padding: 0;
}

body.native-v2 .native-app-offer-card img {
  height: 100%;
  min-height: 170px;
}

body.native-v2 .native-app-offer-card-copy {
  align-content: center;
  padding: 16px;
}

body.native-v2 .native-app-offer-perks {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

body.native-v2 .native-app-offer-perks article {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-left: 4px solid var(--native-gold);
  border-radius: 0 16px 16px 0;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(74, 35, 25, 0.07);
}

body.native-v2 .native-app-offer-perks strong {
  color: var(--native-red-dark);
}

body.native-v2 .native-app-offer-perks span {
  color: var(--native-muted);
  font-size: 12px;
  line-height: 1.4;
}

body.native-v2 .native-app-orders-list > .native-app-order-card,
body.native-v2 .native-app-state,
body.native-v2 .native-app-account-card {
  padding: 18px;
  border: 1px solid var(--native-line);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--native-card-shadow);
}

body.native-v2 .native-app-state {
  display: grid;
  justify-items: start;
  gap: 10px;
  color: var(--native-muted);
}

body.native-v2 .native-app-state h2,
body.native-v2 .native-app-account-card h2 {
  margin: 0;
  color: var(--native-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
}

body.native-v2 .native-app-state p,
body.native-v2 .native-app-account-card p {
  margin: 0;
  color: var(--native-muted);
  font-size: 13px;
  line-height: 1.5;
}

body.native-v2 .native-app-state.is-loading {
  min-height: 150px;
  align-content: center;
}

body.native-v2 .native-app-skeleton {
  width: 100%;
  height: 13px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(90deg, #eee8df 20%, #fffaf2 50%, #eee8df 80%);
  background-size: 200% 100%;
  animation: native-shimmer 1.4s linear infinite;
}

body.native-v2 .native-app-skeleton.short {
  width: 62%;
}

body.native-v2 .native-app-account-body {
  display: grid;
  gap: 14px;
}

body.native-v2 .native-app-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

body.native-v2 .native-app-profile-avatar {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 18px;
  background: var(--native-red);
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  font-weight: 800;
}

body.native-v2 .native-app-profile-copy {
  min-width: 0;
}

body.native-v2 .native-app-profile-copy strong,
body.native-v2 .native-app-profile-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.native-v2 .native-app-profile-copy strong {
  font-size: 18px;
}

body.native-v2 .native-app-profile-copy span {
  margin-top: 3px;
  color: var(--native-muted);
  font-size: 12px;
}

body.native-v2 .native-app-account-reward {
  margin-top: 16px;
  padding: 14px;
  border-radius: 15px;
  background: var(--native-cream);
}

body.native-v2 .native-app-account-reward strong,
body.native-v2 .native-app-account-reward span {
  display: block;
}

body.native-v2 .native-app-account-reward span {
  margin-top: 3px;
  color: var(--native-muted);
  font-size: 12px;
}

body.native-v2 .native-app-account-actions {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

body.native-v2 .native-app-account-actions button {
  width: 100%;
  text-align: left;
}

body.native-v2 .native-app-account-actions button.primary {
  border-color: var(--native-red);
  background: var(--native-red);
  color: #ffffff;
  text-align: center;
}

body.native-v2 .native-app-account-actions button.danger {
  border-color: rgba(151, 29, 36, 0.2);
  color: var(--native-red);
}

body.native-v2 .native-app-tabbar {
  position: fixed;
  z-index: 80;
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  left: max(8px, env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: var(--native-tab-height);
  padding: 6px;
  border: 1px solid rgba(76, 42, 32, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 38px rgba(56, 25, 18, 0.19);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.native-v2 .native-app-tabbar button {
  display: grid;
  min-width: 0;
  min-height: 60px;
  padding: 5px 2px;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #665d59;
}

body.native-v2 .native-app-tabbar button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.native-v2 .native-app-tabbar button span {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.native-v2 .native-app-tabbar button[aria-current="page"] {
  background: #faeeee;
  color: var(--native-red);
}

body.native-v2.config-active .native-app-tabbar,
body.native-v2.mobile-menu-open .native-app-tabbar,
body.native-v2.cart-fullscreen-open .native-app-tabbar {
  display: none;
}

body.native-v2.native-view-menu .featured-section,
body.native-v2.native-view-menu .ordering-layout {
  width: min(100%, 1040px);
  margin-right: auto;
  margin-left: auto;
}

body.native-v2.native-view-menu .featured-section {
  padding-top: 6px;
}

body.native-v2.native-view-menu .ordering-layout {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

body.native-v2.native-view-menu .featured-section .section-heading h2,
body.native-v2.native-view-menu .menu-header .section-heading h2 {
  font-family: "Fraunces", Georgia, serif;
  letter-spacing: -0.03em;
}

body.native-v2.native-view-menu .featured-card,
body.native-v2.native-view-menu .category-card,
body.native-v2.native-view-menu .item-card {
  border-radius: 20px;
}

body.native-v2 .cart-panel {
  bottom: calc(var(--native-tab-height) + max(16px, env(safe-area-inset-bottom, 0px)));
}

body.native-v2 .cart-card {
  padding-bottom: calc(var(--native-tab-height) + max(16px, env(safe-area-inset-bottom, 0px)));
}

body.native-v2.config-active .product-config-page {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}

body.native-v2.config-active .config-back,
body.native-v2.config-active .builder-reset,
body.native-v2.config-active .topping-step-reset {
  min-height: 44px;
}

@media (min-width: 720px) {
  body.native-v2 .native-app-home-screen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }

  body.native-v2 .native-app-welcome,
  body.native-v2 .native-app-feature,
  body.native-v2 .native-app-deals,
  body.native-v2 .native-app-story {
    grid-column: 1 / -1;
  }

  body.native-v2 .native-app-rewards,
  body.native-v2 .native-app-again {
    align-self: stretch;
  }

  body.native-v2 .native-app-feature {
    min-height: 500px;
  }

  body.native-v2 .native-app-deal-track {
    grid-auto-columns: minmax(220px, 1fr);
    grid-auto-flow: initial;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
  }

  body.native-v2 .native-app-offers-grid,
  body.native-v2 .native-app-orders-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.native-v2 .native-app-offer-card {
    grid-template-columns: 1fr;
  }

  body.native-v2 .native-app-offer-card img {
    height: 200px;
  }

  body.native-v2 .native-app-offer-perks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.native-v2 .native-app-tabbar {
    right: max(50%, env(safe-area-inset-right, 0px));
    left: auto;
    width: min(620px, calc(100vw - 32px));
    transform: translateX(50%);
  }

  body.native-v2.config-active .config-shell {
    padding-right: 28px;
    padding-left: 28px;
  }

  body.native-v2.config-active .product-config-page .topping-config-layout .topping-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  body.native-v2 .native-app-feature {
    min-height: 400px;
  }

  body.native-v2 .native-app-feature-copy {
    padding: 22px 18px;
  }

  body.native-v2 .native-app-feature-actions {
    gap: 7px;
  }

  body.native-v2 .native-app-feature button {
    padding: 0 13px;
  }

  body.native-v2 .native-app-rewards {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.native-v2 .native-app-rewards-icon {
    display: none;
  }

  body.native-v2 .native-app-story {
    grid-template-columns: minmax(0, 1fr) 34%;
  }

  body.native-v2 .native-app-story p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.native-v2 .native-app-screen,
  body.native-v2 .native-reveal,
  body.native-v2 .native-app-feature-art img,
  body.native-v2 .native-app-deal-card img,
  body.native-v2 .native-app-offer-card img,
  body.native-v2 .native-app-skeleton,
  body.native-v2 .native-app-rewards-track span {
    animation: none !important;
    transition: none;
    transform: none !important;
  }
}

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

@keyframes native-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes native-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

body.native-v2.native-v2-ready .native-reveal {
  animation: native-card-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body.native-v2.native-v2-ready .native-reveal:nth-of-type(2) { animation-delay: 0.05s; }
body.native-v2.native-v2-ready .native-reveal:nth-of-type(3) { animation-delay: 0.1s; }
body.native-v2.native-v2-ready .native-reveal:nth-of-type(4) { animation-delay: 0.15s; }
body.native-v2.native-v2-ready .native-reveal:nth-of-type(5) { animation-delay: 0.2s; }

.auth-inline-message {
  margin: 0;
  color: #9e3a1d;
  font-size: 12px;
  font-weight: 800;
  max-width: 220px;
  line-height: 1.25;
}

.auth-dialog h3,
.checkout-dialog h3 {
  margin: 12px 0 4px;
  font-size: 17px;
  color: #342823;
}

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

.dialog-status {
  min-height: 20px;
  margin: 6px 0 4px;
  color: #5b524b;
  font-size: 14px;
  font-weight: 700;
}

.dialog-status.error {
  color: #b22222;
}

.dialog-status.success {
  color: #1d6a3a;
}

.delivery-minimum-notice {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #f0c05a;
  border-radius: 8px;
  background: #fff6e0;
  color: #7a5200;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.delivery-minimum-notice[hidden] {
  display: none;
}

/* Only ever rendered when UBER_DIRECT_QUOTES_ENABLED (app.js) is true. */
.uber-quote-status {
  margin: 2px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #5a4a35;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

.uber-quote-status.error {
  border-color: #f0c05a;
  background: #fff6e0;
  color: #7a5200;
}

.uber-quote-status[hidden] {
  display: none;
}

/* Delivery-address Google Places lookup (checkoutAddressLine1). Degrades
   invisibly when the backend isn't configured -- the list simply never
   gets populated/shown and the input behaves like a normal text field. */
.address-autocomplete-anchor {
  position: relative;
  display: block;
}

.address-autocomplete-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(30, 20, 14, 0.18);
}

.address-autocomplete-list[hidden] {
  display: none;
}

.address-autocomplete-item {
  display: grid;
  gap: 1px;
  padding: 10px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.address-autocomplete-item:hover,
.address-autocomplete-item.active {
  background: var(--row-highlight);
}

.address-autocomplete-primary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-autocomplete-secondary {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Itemized order summary on the checkout Payment step -- now the LAST
   section on that step (2026-07 Payment step reorder: methods -> tip ->
   card fields/fallback -> review), so it gets its own top separator rather
   than the step's shared heading/intro. Reuses the cart panel's own
   .totals/.grand-total classes for the fee breakdown so the numbers/styling
   always match the cart exactly -- see renderCheckoutPaymentSummary() in
   app.js. */
.checkout-payment-summary {
  margin: 14px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.checkout-payment-summary > .checkout-step-heading {
  margin-top: 0;
  margin-bottom: 4px;
}

/* Keep the collapsed summary row + expanded fee breakdown on the same Inter
   type scale as the rest of the checkout, and more compact (2026-07 v117
   polish). The base .totals box is roomy/chunky by default; scope tighter
   padding + row sizing here so the Order summary section isn't oversized. */
.checkout-payment-summary .totals {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
}

.checkout-payment-summary .totals div {
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
}

.checkout-payment-summary .grand-total {
  padding-top: 10px;
  font-size: 17px;
  font-weight: 800 !important;
}

.checkout-payment-summary-lines {
  display: grid;
  gap: 10px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}

.checkout-payment-summary-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.checkout-payment-summary-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.checkout-payment-summary-line-media {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 10px;
  background-color: var(--thumb-bg);
  background-image: var(--summary-line-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
  padding: 4px;
  box-shadow: inset 0 0 0 1px rgba(59, 46, 36, 0.08);
}

.checkout-payment-summary-line-info {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.checkout-payment-summary-line-name {
  font-size: 14px;
  font-weight: 600;
  color: #141414;
}

.checkout-payment-summary-line-desc {
  font-size: 12px;
  font-weight: 400;
  color: #6b6b6b;
  overflow-wrap: break-word;
}

.checkout-payment-summary-line-price {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.checkout-payment-summary-totals {
  margin-top: 14px;
}

.checkout-payment-method-heading {
  margin-top: 4px;
}

/* Collapsible "Order summary" toggle row (2026-07 Uber-style redesign,
   replaces the old always-expanded "Review your order") -- small thumbnail
   of the first cart item, bold item name + muted item-count subtitle, and a
   chevron that rotates 90deg when expanded. Clicking it shows/hides
   #checkoutPaymentSummaryLines below (see the click handler in app.js). */
.checkout-order-summary-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  color: inherit;
  text-align: left;
}

.checkout-order-summary-toggle-media {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--thumb-bg);
  background-size: cover;
  background-position: center;
}

.checkout-order-summary-toggle-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.checkout-order-summary-toggle-text strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-order-summary-toggle-text span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--muted);
}

.checkout-order-summary-chevron {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 900;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform 0.18s ease;
}

.checkout-order-summary-toggle.expanded .checkout-order-summary-chevron {
  transform: rotate(-90deg);
}

.checkout-payment-summary-lines {
  padding-top: 4px;
}

.checkout-payment-summary-lines[hidden] {
  display: none;
}

/* "Pay with Credit or Debit" (inline Stripe Payment Element) + "Billing
   Address Information" -- only shown when "Pay by Card Online" is selected,
   see renderCardPaymentSection() in app.js. */
.checkout-card-payment-section {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

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

.checkout-card-payment-heading .checkout-step-heading {
  margin: 0;
}

.card-brand-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-brand-icon {
  display: grid;
  place-items: center;
  height: 26px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.card-brand-visa {
  color: #1a1f71;
  font-size: 12px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.02em;
}

.card-brand-mastercard {
  display: flex;
  align-items: center;
  gap: -6px;
  padding: 0 6px;
}

.card-brand-mastercard span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.card-brand-mastercard span:first-child {
  background: #eb001b;
  margin-right: -6px;
}

.card-brand-mastercard span:last-child {
  background: #f79e1b;
  opacity: 0.85;
  mix-blend-mode: multiply;
}

.stripe-payment-element {
  margin: 4px 0 6px;
  min-height: 40px;
}

/* "Online payment is temporarily unavailable" -- shown in place of the
   Stripe Payment Element (never a blank gap) when STRIPE_PUBLISHABLE_KEY is
   missing or invalid, see showStripeUnavailableFallback() in app.js. Plain
   block element -- deliberately no explicit `display` override here so
   toggling its `hidden` attribute keeps working via the UA stylesheet (see
   the `[hidden]` override comments elsewhere in this file for why an
   authored `display` would otherwise defeat that). */
.checkout-payment-fallback-message {
  margin: 4px 0 6px;
  padding: 13px 14px;
  border: 1.5px solid #f0d9a6;
  border-radius: 10px;
  background: #fdf6e6;
  color: #6b4f13;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

#checkoutDeliverySection {
  display: grid;
  gap: 8px;
  margin: 14px 0 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

/* an ID selector like #checkoutDeliverySection above otherwise outranks the
   UA [hidden] rule, so the pickup/delivery toggle (checkoutDeliverySection.hidden)
   would fail to actually hide the section without this explicit override. */
#checkoutDeliverySection[hidden] {
  display: none;
}

/* Single-field delivery-address lookup (2026-07 Details-step redesign) --
   the search input + optional manual-entry field grid collapse into this
   compact confirmed-address chip once a full address is known, see
   setAddressUiMode()/syncAddressUiMode() in app.js. */
.checkout-address-manual-toggle {
  display: inline-block;
  margin: -2px 0 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.checkout-address-manual-toggle:hover {
  color: var(--brand-dark);
}

.checkout-address-confirmed {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
}

/* Same [hidden]-outranking issue as #checkoutDeliverySection above --
   .checkout-address-confirmed's own `display: flex` is an author rule and
   always beats the UA [hidden] rule regardless of specificity. */
.checkout-address-confirmed[hidden] {
  display: none;
}

.checkout-address-confirmed-icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}

.checkout-address-confirmed-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.checkout-address-confirmed-text strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  overflow-wrap: break-word;
}

.checkout-address-confirmed-text span {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--muted);
  overflow-wrap: break-word;
}

.checkout-address-edit-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 7px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.checkout-address-edit-btn:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* #checkoutAddressManualFields reuses the shared .checkout-field-grid class
   (display: grid, authored elsewhere), so its own hidden toggle needs the
   same explicit override as the other elements on this page. */
#checkoutAddressManualFields[hidden] {
  display: none;
}

.checkout-field-optional-tag {
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

/* Page 1 static store-pickup address row (Pickup mode) -- reuses
   .checkout-address-confirmed's chip look, minus the "Change" button since
   there's nothing to edit. */
.checkout-pickup-address-row {
  margin: 0 0 14px;
}

/* Page 1 compact "ASAP" / "Tomorrow, 11:00 AM" timing row (2026-07
   Uber-style redesign) -- tap to reveal the ASAP/Schedule pills + time
   select inline, mirroring the start-order dialog's own controls (see
   setWhen()/refreshScheduleSlots() in app.js). */
.checkout-when-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-sizing: border-box;
}

.checkout-when-icon {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 16px;
  line-height: 1;
}

.checkout-when-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
}

.checkout-when-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.checkout-when-row.open .checkout-when-chevron {
  transform: rotate(90deg);
}

.checkout-when-panel {
  margin: -8px 0 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
}

.checkout-when-panel[hidden] {
  display: none;
}

.checkout-when-panel .when-row {
  margin-bottom: 0;
}

#checkoutScheduleField {
  margin: 12px 0 0;
}

/* Same latent [hidden]/display-outranking bug as #checkoutTipCustomField
   and friends elsewhere in this file -- ".checkout-wizard .checkout-step
   label" sets `display: grid` on EVERY label in the step (checkoutScheduleField
   included), which otherwise always beats .schedule-field's own plain
   `display: none` (no ".show" class yet) since it has one more element in
   its selector, leaving the time picker visible even while ASAP is
   selected. */
.checkout-when-panel .schedule-field:not(.show) {
  display: none;
}

.checkout-step {
  margin: 0 0 22px;
}

.checkout-step:last-of-type {
  margin-bottom: 0;
}

.checkout-step-heading {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a2b1f;
}

.checkout-dialog .order-method-options {
  margin: 0;
}

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

.payment-method-card {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
}

.payment-method-card strong {
  font-size: 15px;
}

.payment-method-card small {
  color: #5d5148;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Promo banner (2026-07 marketing campaign): a static, dismissible strip at
   the very top of the page. Not fixed -- it scrolls away, unlike the
   order-status toast below it. */
.promo-banner {
  position: relative;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: calc(11px + env(safe-area-inset-top, 0px)) 44px 11px;
  background: linear-gradient(90deg, #b51f24 0%, #e0473b 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

.promo-banner[hidden] {
  display: none !important;
}

.promo-banner-info {
  background: linear-gradient(90deg, #1d6a3a 0%, #2f9d5b 100%);
}

.promo-banner-alert {
  background: linear-gradient(90deg, #8a5a00 0%, #d99400 100%);
}

.promo-banner-text {
  margin: 0;
}

.promo-banner-cta {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.95);
  color: #b51f24;
  font-weight: 800;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}

.promo-banner-cta[hidden] {
  display: none !important;
}

.promo-banner-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}

.order-status-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* v124: top-anchored banner -- push its text below the iOS status bar /
     Dynamic Island. 0px fallback = no-op on desktop/Android. */
  padding: calc(14px + env(safe-area-inset-top, 0px)) 44px 14px;
  background: #1d6a3a;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  text-align: center;
}

.order-status-banner[hidden] {
  display: none !important;
}

.order-status-banner.error {
  background: #b22222;
}

.order-status-banner p {
  margin: 0;
}

/* Slim, on-brand cookie/analytics notice (v113). Bottom-pinned, unobtrusive,
   never blocks the UI -- app.js hides it once dismissed (localStorage). */
.cookie-notice {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 550;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(31, 24, 18, 0.96);
  color: #fbf6ef;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-size: 13px;
  line-height: 1.45;
}

.cookie-notice[hidden] {
  display: none !important;
}

.cookie-notice-text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.cookie-notice-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cookie-notice-allow,
.cookie-notice-decline {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cookie-notice-allow {
  border: 0;
  background: var(--brand);
  color: #ffffff;
}

.cookie-notice-allow:hover,
.cookie-notice-allow:focus-visible {
  background: var(--brand-dark);
}

.cookie-notice-decline {
  border: 1px solid rgba(251, 246, 239, 0.5);
  background: transparent;
  color: #fbf6ef;
}

.cookie-notice-decline:hover,
.cookie-notice-decline:focus-visible {
  background: rgba(251, 246, 239, 0.14);
}

@media (max-width: 560px) {
  .cookie-notice {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .cookie-notice-actions {
    width: 100%;
  }

  .cookie-notice-allow,
  .cookie-notice-decline {
    flex: 1 1 0;
  }
}

.order-status-banner button {
  position: absolute;
  right: 12px;
  /* Keep the close button centered on the visible text row, not the padded
     safe-area box, by shifting it down by half the top inset (0 on desktop). */
  top: calc(50% + env(safe-area-inset-top, 0px) / 2);
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
}

@media (max-width: 1120px) {
  .delivery-location-copy strong {
    font-size: 17px;
  }

  .delivery-location-copy a {
    font-size: 13px;
  }

  .header-actions {
    flex-wrap: wrap;
  }

  .auth-controls {
    order: 2;
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  @supports (max-height: 50dvh) {
    .cart-card {
      max-height: 50dvh;
    }
  }
}

@media (max-width: 760px) {
  .auth-controls {
    justify-content: stretch;
  }

  .auth-controls .auth-btn {
    flex: 1;
  }

  .header-auth-control {
    justify-content: center;
  }

  .account-menu {
    flex: 1;
  }

  .account-menu .auth-btn {
    width: 100%;
  }

  .address-row {
    grid-template-columns: 1fr;
  }

  .auth-inline-message {
    max-width: none;
  }
}

/* 2026-06 visual refresh */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --button-radius: 12px;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

/* Checkout font consistency (v113): the dialog and every control inside it
   must render in the site's Inter stack like the rest of the pages. Native
   form controls (input/select/textarea) don't reliably inherit font-family,
   and the checkout dialog's headings/labels/summary/buttons should never fall
   back to a UA default -- so pin the whole checkout subtree to --font-sans.
   The Stripe Payment Element (card fields) is handled separately via the
   Elements `fonts` + `appearance.variables.fontFamily` options in app.js. */
.checkout-dialog,
.checkout-dialog h1,
.checkout-dialog h2,
.checkout-dialog h3,
.checkout-dialog h4,
.checkout-dialog p,
.checkout-dialog span,
.checkout-dialog strong,
.checkout-dialog label,
.checkout-dialog button,
.checkout-dialog input,
.checkout-dialog select,
.checkout-dialog textarea {
  font-family: var(--font-sans);
}

h1,
h2,
h3,
h4,
.item-title,
.featured-card strong {
  letter-spacing: 0.01em;
}

.primary-action,
.checkout-button,
.item-action-primary {
  min-height: 46px;
  border: 1px solid var(--brand);
  border-radius: var(--button-radius);
  padding: 10px 18px;
  background: var(--brand);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.outline-action,
.secondary-link,
.item-action-secondary {
  min-height: 46px;
  border: 1px solid #d8d8d8;
  border-radius: var(--button-radius);
  padding: 10px 18px;
  background: #ffffff;
  color: #33251f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.item-action-primary,
.item-action-secondary {
  min-height: 54px;
  padding: 13px 24px;
  font-size: 14px;
}

.item-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.menu-item {
  grid-template-columns: minmax(208px, 264px) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 30px);
  min-height: 248px;
  border-radius: 14px;
  padding: clamp(14px, 2vw, 20px);
  box-shadow: 0 12px 28px rgba(70, 50, 38, 0.08);
}

.item-image-panel {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: transparent;
  padding: 0;
}

.item-image {
  width: 100%;
  min-height: 212px;
  border-radius: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.item-content {
  gap: 10px;
}

.item-title {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
}

.item-summary {
  font-size: 14px;
  -webkit-line-clamp: 3;
}

.item-price {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  font-weight: 700;
}

.item-calories {
  display: none;
}

.item-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 184px));
  gap: 12px;
  margin-top: auto;
}

.item-actions.item-actions-inline {
  display: flex;
  align-items: center;
  gap: 12px;
}

.item-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 14px;
  border: 1px solid #d8d8d8;
  border-radius: var(--button-radius);
  background: #ffffff;
}

.item-qty-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brand);
  border-radius: 50%;
  background: #ffffff;
  color: var(--brand);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.item-qty-value {
  min-width: 18px;
  color: #33251f;
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}

.item-actions-inline .item-action-primary {
  min-width: 184px;
}

.item-action-primary,
.item-action-secondary {
  width: 100%;
}

.item-action-customize {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.mobile-builder-preview {
  display: none;
}

.mobile-builder-add {
  width: 100%;
  margin-top: 14px;
}

/* The wings builder reuses the pizza builder's floating footer button. On
   desktop the hero order panel keeps its own Add to Cart, so hide the
   in-flow floating clone here; the mobile block below pins it to the bottom. */
.wing-builder .mobile-builder-add {
  display: none;
}

/* Wings "by the pound" -- per-sauce pound stepper + live tracker (2+ LB). */
.wing-pound-tracker {
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 1px solid #e7dbd0;
  border-radius: 12px;
  background: #fff7f1;
}

.wing-pound-tracker.is-complete {
  border-color: #bfe3c4;
  background: #f0f9f1;
}

.wing-pound-tracker-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 14px;
}

.wing-pound-tracker-row strong {
  font-size: 15px;
  color: var(--ink, #2b1c12);
}

.wing-pound-tracker-row span {
  color: var(--muted);
  font-weight: 700;
}

.wing-pound-progress {
  height: 8px;
  border-radius: 999px;
  background: #ecdccf;
  overflow: hidden;
}

.wing-pound-progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width 0.2s ease;
}

.wing-pound-tracker.is-complete .wing-pound-progress > span {
  background: #3aa657;
}

.wing-sauce-pound-grid {
  display: grid;
  gap: 10px;
}

.wing-sauce-pound-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border: 1px solid #e7dbd0;
  border-radius: 12px;
  background: #ffffff;
}

.wing-sauce-pound-row.selected {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.wing-sauce-pound-row .wing-sauce-art {
  width: 64px;
  height: 48px;
  border-radius: 10px;
  background-color: #dfe6ea;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.wing-sauce-pound-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wing-sauce-pound-name strong {
  font-size: 15px;
}

.wing-sauce-pound-name small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.wing-sauce-stepper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.wing-sauce-stepper button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #d9cabd;
  background: #ffffff;
  font-size: 20px;
  line-height: 1;
  color: var(--ink, #2b1c12);
  cursor: pointer;
}

.wing-sauce-stepper button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wing-sauce-stepper span[data-wing-sauce-lbs] {
  min-width: 18px;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
}

.builder-cals-line {
  display: none !important;
}

.product-config-page .builder-step-panel .builder-topping-group .topping-choice-main > small,
.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main > small,
.product-config-page .topping-config-layout .topping-choice-main > small {
  display: none;
}

.config-product-image,
.dialog-image.config-product-image,
.topping-preview-image {
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center;
}

.pizza-size-card[data-size-item-id*="square"] .pizza-size-icon {
  border-radius: 8px;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)),
    repeating-linear-gradient(45deg, #d83b1e 0 8px, #f08a31 8px 11px);
}

.wing-choice-card::before {
  display: none !important;
}

.wing-choice-card {
  grid-template-columns: 112px minmax(0, 1fr);
}

.wing-choice-art {
  width: 112px;
  height: 84px;
  border-radius: 12px;
  background-color: #dfe6ea;
  background-image: var(--wing-style-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.wing-choice-art,
.wing-sauce-art {
  box-shadow: inset 0 0 0 1px rgba(49, 35, 25, 0.08);
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-grid {
  gap: 16px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice {
  min-height: 272px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main {
  padding: 12px 14px 6px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main > small {
  margin-top: 6px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-art {
  height: 116px;
  margin-top: 8px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-footer {
  padding: 0 14px 8px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-qty-stepper {
  gap: 10px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-placement {
  min-height: 66px;
  padding: 6px 10px 10px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-placement-placeholder {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 10.5px;
  line-height: 1.15;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion-controls {
  min-width: 0;
  width: 100%;
  max-width: 206px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion {
  min-height: 36px;
  padding: 6px 4px;
}

.product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion span {
  font-size: 10px;
}

.order-dialog .order-method-form {
  width: min(620px, calc(100vw - 26px));
  padding: 34px;
}

.order-method-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.order-method-card {
  display: grid;
  gap: 6px;
  text-align: left;
  padding: 16px;
}

.order-method-card strong {
  font-size: 18px;
}

.order-method-card small {
  color: #5d5148;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.order-time-shell {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
}

.order-time-shell h3 {
  margin: 0 0 10px;
  color: #342823;
  font-size: 16px;
}

.order-when-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.order-method-continue {
  width: 100%;
}

.product-config-page,
.config-shell,
.modifier-groups {
  min-width: 0;
}

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

  .item-image-panel {
    min-height: 200px;
  }

  .item-image {
    min-height: 176px;
  }

  .item-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .site-footer-brand {
    justify-items: center;
  }

  .product-config-page .pizza-builder,
  .product-config-page .wing-builder {
    margin: 0;
    overflow: visible;
  }

  .product-config-page .builder-step-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 0;
  }

  .product-config-page .builder-step-tabs button {
    min-height: 54px;
    padding: 8px 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    color: #4a3b31;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
  }

  .product-config-page .builder-step-tabs button.active {
    border-color: #6f9f42;
    background: #416c1e;
    color: #ffffff;
  }

  .product-config-page .pizza-size-selector,
  .product-config-page .wing-size-selector {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 0 10px;
  }

  .product-config-page .wing-size-card {
    flex: 1 1 0;
    min-width: 84px;
  }

  .wing-required-message,
  .builder-ingredient-line {
    padding: 8px 10px 10px;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
  }

  .wing-style-grid,
  .wing-style-grid .wing-choice-card {
    max-width: none;
  }

  .storefront.category-active .menu-item {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }

  .storefront.category-active .item-image-panel {
    min-height: 148px;
    height: 148px;
    padding: 0;
    background: transparent;
  }

  .storefront.category-active .item-image {
    min-height: 148px;
    height: 148px;
  }

  .storefront.category-active .item-title {
    font-size: 16px;
    line-height: 1.2;
  }

  .storefront.category-active .item-summary {
    font-size: 11px;
    line-height: 1.35;
  }

  .storefront.category-active .item-price {
    font-size: 16px;
  }

  .storefront.category-active .item-calories {
    display: none;
  }

  .storefront.category-active .item-actions {
    grid-template-columns: 1fr;
  }

  .storefront.category-active .item-action-primary,
  .storefront.category-active .item-action-secondary {
    min-height: 38px;
    font-size: 11px;
  }

  .product-config-page .config-product-hero {
    align-items: center;
  }

  .config-order-panel .quantity-control {
    order: 5;
    grid-column: 1;
    grid-row: 5;
  }

  .config-product-copy .dialog-price {
    order: 5;
    grid-column: 2;
    grid-row: 5;
    align-self: center;
    justify-self: end;
  }

  body.pizza-builder-active .product-config-page .config-product-image,
  body.pizza-builder-active .product-config-page .config-product-copy .config-ingredient-line,
  body.pizza-builder-active .product-config-page .config-product-copy .dialog-price,
  body.pizza-builder-active .product-config-page .config-order-panel {
    display: none;
  }

  body.pizza-builder-active .product-config-page .mobile-builder-preview {
    display: block;
    margin-bottom: 12px;
  }

  body.pizza-builder-active .product-config-page .pizza-builder .builder-step-panel .topping-preview-panel {
    display: none;
  }

  body.config-active .cart-panel {
    display: grid !important;
  }

  .cart-drawer-bar {
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
    gap: 10px;
  }
}

@media (max-width: 760px) {
  .order-dialog .order-method-form {
    padding: 24px;
  }

  .order-method-options,
  .payment-method-options {
    grid-template-columns: 1fr;
  }

  .order-status-banner {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 40px 12px;
    font-size: 13px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-grid,
  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice,
  .product-config-page .builder-step-panel .builder-topping-group .topping-choice {
    min-height: 258px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion-controls {
    min-width: 100%;
    max-width: none;
  }
}

/* 2026-06-27 follow-up polish */
.header-hamburger,
.mobile-account-btn,
.mobile-header-actions {
  display: none;
}

.brand-img {
  width: auto;
  height: auto;
  max-height: 120px;
  max-width: min(100%, 320px);
  object-fit: contain;
}

.category-detail-shell {
  display: grid;
  gap: 0;
  margin-bottom: 14px;
}

.category-detail-back {
  margin-bottom: 12px;
}

.category-detail-hero {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 18px 20px;
  min-height: 130px;
  display: flex;
  align-items: flex-start;
}

.category-detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(10, 16, 27, 0.84), rgba(10, 16, 27, 0.5) 46%, rgba(10, 16, 27, 0.76)),
    var(--category-hero-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.category-detail-hero h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.builder-cals-line {
  margin: 0 auto 16px;
  color: #4b3f38;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.wing-style-grid,
.product-config-page .wing-style-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 680px);
  margin: 0 auto;
  justify-content: center;
}

.wing-style-grid .wing-choice-card {
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 152px;
  gap: 20px;
  padding: 22px;
}

.wing-style-grid .wing-choice-art {
  width: 150px;
  height: 112px;
}

.wing-style-grid .wing-choice-card strong {
  font-size: 24px;
}

.wing-style-grid .wing-choice-card small {
  font-size: 16px;
}

.topping-portion-current {
  display: none;
}

/* ===== v160 mobile nav drawer redesign =====================================
   Identity hero (guest CTA / signed-in profile + live rewards) at the top,
   then icon-led "Browse"/"Account" groups and a footer. Brand red + white +
   Inter, var(--line)-style hairlines, and the same env(safe-area-inset-*)
   handling as before so the drawer never tucks under the iOS status bar /
   Dynamic Island or the home indicator. */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: rgba(14, 16, 24, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 1;
  animation: mobileMenuScrimIn 0.22s ease;
}

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

.mobile-menu-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  width: min(88vw, 360px);
  background: #ffffff;
  box-shadow: 20px 0 60px rgba(16, 18, 27, 0.32);
  transform: translateX(-102%);
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Safe-area insets (v124/v160): this drawer is anchored to the very
     top/left/bottom edges of the viewport, so inside the standalone iOS app its
     header/logo was tucked under the status bar / Dynamic Island and its last
     row sat under the home indicator. Left inset covers the notch in landscape;
     bottom inset gives the footer clearance. Top inset is applied on the header
     below so the border/background still reach the true top edge. 0px fallback
     = no-op on desktop/Android/mobile web. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-menu-panel.open {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Match the v122 .site-header treatment: push the logo/close button below the
     iOS status bar / Dynamic Island. 0px fallback keeps desktop/Android intact. */
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px;
  border-bottom: 1px solid var(--line);
}

.mobile-menu-logo {
  width: auto;
  height: auto;
  max-height: 36px;
  object-fit: contain;
}

.mobile-menu-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f3f3f4;
  color: #2f2520;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.mobile-menu-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.mobile-menu-close:hover {
  background: #eaeaec;
}

.mobile-menu-close:active {
  transform: scale(0.94);
}

/* --- Identity hero (guest + signed-in) --- */
.mobile-menu-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 16px 0;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(130, 20, 24, 0.24);
}

.mobile-menu-hero-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}

.mobile-menu-hero-avatar svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-menu-hero-initial {
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  text-transform: uppercase;
}

/* When the initial is present, hide the fallback glyph. */
.mobile-menu-hero-initial:not(:empty) + #mobileMenuAccountGlyph {
  display: none;
}

.mobile-menu-hero-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.mobile-menu-hero-copy strong {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu-hero-copy small {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 16px 4px;
  padding: 13px 16px;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  color: var(--brand-dark);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgba(130, 20, 24, 0.18);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.mobile-menu-cta-arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.mobile-menu-cta:hover {
  background: #fff5f5;
}

.mobile-menu-cta:hover .mobile-menu-cta-arrow {
  transform: translateX(3px);
}

.mobile-menu-cta:active {
  transform: scale(0.985);
}

/* --- Rewards card (signed-in) --- */
.mobile-menu-rewards {
  margin: 12px 16px 4px;
  padding: 12px 14px 13px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf0 0%, #fff6e6 100%);
  border: 1px solid #f4e4c2;
}

.mobile-menu-rewards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.mobile-menu-rewards-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a5620a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mobile-menu-rewards-badge svg {
  width: 16px;
  height: 16px;
  fill: #f0a91b;
  stroke: none;
}

.mobile-menu-rewards-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: #f3e2c2;
  overflow: hidden;
}

.mobile-menu-rewards-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  min-width: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5b301 0%, #e8890b 100%);
  transition: width 0.45s ease;
}

.mobile-menu-rewards-summary {
  display: block;
  margin-top: 8px;
  color: #7a4a00;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

/* --- Grouped rows --- */
.mobile-menu-group {
  display: flex;
  flex-direction: column;
  padding: 4px 10px 0;
  margin-top: 12px;
}

.mobile-menu-section-label {
  margin: 4px 8px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mobile-menu-row {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 10px 10px;
  min-height: 52px;
  background: transparent;
  color: #2f2520;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s ease, transform 0.08s ease;
}

.mobile-menu-row-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #faeceb;
  color: var(--brand);
  transition: background 0.14s ease;
}

.mobile-menu-row-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-menu-row-copy {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.mobile-menu-row-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.mobile-menu-chevron {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #bdb5ac;
  transition: transform 0.14s ease, color 0.14s ease;
}

.mobile-menu-chevron svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-menu-row:hover {
  background: var(--row-highlight);
}

.mobile-menu-row:hover .mobile-menu-row-icon {
  background: #f6dede;
}

.mobile-menu-row:hover .mobile-menu-chevron {
  color: var(--brand);
  transform: translateX(2px);
}

.mobile-menu-row:active {
  background: #f7e7e6;
  transform: scale(0.99);
}

/* --- Footer --- */
.mobile-menu-footer {
  margin-top: auto;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

.mobile-menu-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--brand-dark);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.08s ease;
}

.mobile-menu-signout svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-menu-signout:hover {
  background: #fff5f5;
  border-color: #efd2d2;
}

.mobile-menu-signout:active {
  transform: scale(0.985);
}

/* Destructive drawer action (Delete account) -- red variant of the sign-out
   row so it's clearly separated from the neutral controls. */
.mobile-menu-signout.mobile-menu-danger {
  margin-top: 8px;
  color: #b22222;
  border-color: #efd2d2;
}

.mobile-menu-signout.mobile-menu-danger:hover {
  background: #fde7e7;
  border-color: #e6bcbc;
}

.mobile-menu-footer-note {
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.mobile-menu-footer-note a {
  color: var(--brand);
  font-weight: 800;
}

body.mobile-menu-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 8px;
    padding-left: calc(8px + env(safe-area-inset-left, 0px));
    padding-right: calc(8px + env(safe-area-inset-right, 0px));
    padding-block: 9px;
    /* Re-apply the safe-area top inset on top of this breakpoint's 9px
       block padding (padding-block above would otherwise reset padding-top and
       drop the inset). 0px fallback => unchanged on normal mobile web. */
    padding-top: calc(9px + env(safe-area-inset-top, 0px));
  }

  .header-hamburger {
    width: 40px;
    height: 40px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    padding: 0;
    justify-self: start;
  }

  .header-hamburger span {
    width: 24px;
    height: 3px;
    border-radius: 1px;
    background: #de4a1d;
  }

  .brand {
    justify-self: center;
    width: 100%;
    max-width: 100%;
  }

  .brand-img {
    max-height: 82px;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .mobile-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 72px;
  }

  .mobile-account-btn {
    width: 34px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    padding: 0;
  }

  .mobile-account-btn svg {
    width: 25px;
    height: 25px;
    display: block;
  }

  .mobile-search-btn {
    color: var(--brand);
  }

  .mobile-search-btn svg {
    fill: currentColor;
  }

  .mobile-header-actions .header-account-avatar-btn {
    display: grid;
  }

  .mobile-account-initial {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--brand);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(181, 31, 36, 0.18);
  }

  .main-nav,
  .header-actions {
    display: none;
  }

  .storefront-content {
    width: min(100%, 680px);
    margin: 0 auto;
    padding-inline: 14px;
  }

  .site-footer-main {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer-brand,
  .site-footer-contact,
  .site-footer-links {
    width: 100%;
    justify-items: center;
    text-align: center;
  }

  .site-footer-brand img,
  .site-footer-brand p {
    margin-inline: auto;
  }

  .site-footer-links {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .site-footer-links a,
  .footer-link-button {
    text-align: center;
  }

  .category-detail-hero {
    border-radius: 0;
    margin-inline: -14px;
    padding: 16px 14px;
    min-height: 104px;
  }

  .category-detail-back {
    padding: 8px 16px 8px 12px;
    font-size: 13.5px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
  }

  .category-detail-shell {
    position: relative;
    margin-bottom: 10px;
  }

  .category-detail-shell::before {
    content: "";
    position: absolute;
    top: 28px;
    left: -14px;
    right: -14px;
    bottom: 0;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(11, 15, 24, 0.12) 100%);
    pointer-events: none;
  }

  .storefront.category-active .ordering-layout {
    padding-bottom: calc(214px + env(safe-area-inset-bottom));
  }

  /* Category detail view: header, .menu-header and .menu-sections normally
     reserve space for the (hidden) heading/tabs above -- tighten that up so
     the Back pill sits close under the header instead of leaving a big gap. */
  .storefront.category-active #menu {
    padding-top: 0;
  }

  .storefront.category-active .menu-sections {
    padding-top: 10px;
  }

  .storefront.category-active .item-grid {
    gap: 14px;
    padding-bottom: 22px;
  }

  .storefront.category-active .menu-item {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(70, 50, 38, 0.08);
  }

  .storefront.category-active .item-image-panel {
    min-height: 148px;
    height: 148px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
  }

  .storefront.category-active .item-image {
    min-height: 148px;
    height: 148px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .storefront.category-active .item-content {
    gap: 6px;
    align-items: stretch;
  }

  .storefront.category-active .item-title {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
  }

  .storefront.category-active .item-summary {
    font-size: 11px;
    color: #6b6b6b;
    line-height: 1.35;
    -webkit-line-clamp: 3;
  }

  .storefront.category-active .item-price {
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
  }

  .storefront.category-active .item-calories {
    display: none;
  }

  .storefront.category-active .item-actions {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 4px;
  }

  .storefront.category-active .item-action-primary,
  .storefront.category-active .item-action-secondary {
    min-height: 38px;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 0.05em;
    font-weight: 900;
  }

  .storefront.category-active .item-actions.item-actions-inline {
    display: flex;
    gap: 8px;
  }

  .storefront.category-active .item-qty-stepper {
    min-height: 38px;
    gap: 6px;
    padding: 0 6px;
  }

  .storefront.category-active .item-qty-btn {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .storefront.category-active .item-qty-value {
    font-size: 14px;
  }

  .storefront.category-active .item-actions-inline .item-action-primary {
    min-width: 0;
    flex: 1;
  }

  .storefront.category-active .item-action-secondary {
    border-color: #e2e2e2;
    background: #ffffff;
  }

  .config-product-hero {
    margin: 0;
    padding: 8px 12px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    overflow: hidden;
  }

  .config-product-copy {
    display: contents;
  }

  .product-config-page .config-product-image {
    order: 2;
    grid-column: 1 / -1;
    width: min(78vw, 280px);
    max-width: 280px;
    aspect-ratio: 1;
    display: block;
    margin: 2px auto 0;
    justify-self: center;
    align-self: center;
  }

  .config-product-copy h1 {
    order: 1;
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
    font-size: clamp(1.55rem, 6.6vw, 2rem);
  }

  .config-product-copy .dialog-price {
    order: 5;
    grid-column: 2;
    margin: 0;
    align-self: center;
    justify-self: end;
    font-size: 31px;
    font-weight: 900;
    line-height: 1;
  }

  .config-product-copy #dialogDescription {
    order: 4;
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: #5b4e45;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
  }

  .config-product-copy .config-ingredient-line {
    display: none;
  }

  .config-order-panel {
    display: contents;
    position: static;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .order-panel-size-selector {
    order: 3;
    grid-column: 1 / -1;
  }

  .product-config-page .pizza-size-selector {
    gap: 6px;
    padding: 0 0 12px;
    justify-content: flex-start;
  }

  .product-config-page .pizza-size-card {
    flex: 1 1 0;
    min-width: 74px;
    min-height: 88px;
    padding: 8px 3px;
    border-radius: 10px;
  }

  .product-config-page .pizza-size-icon {
    width: 26px;
    height: 26px;
  }

  .product-config-page .pizza-size-card strong {
    font-size: 10px;
  }

  .product-config-page .pizza-size-card small {
    font-size: 8px;
    line-height: 1.1;
  }

  .config-order-panel .quantity-control {
    order: 5;
    grid-column: 1;
    justify-self: start;
    min-width: 108px;
    gap: 10px;
    font-size: 24px;
  }

  .config-order-panel .primary-action {
    order: 6;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    font-size: 12px;
  }

  .builder-cals-line {
    margin: -8px auto 12px;
    font-size: 14px;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-grid,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 8px 10px;
    min-height: 0;
    padding: 10px;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-main,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main {
    position: static;
    inset: auto;
    grid-column: 1 / span 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 2px 10px;
    padding: 0;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-art,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-art {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 88px;
    height: 68px;
    margin: 0;
    transform: none !important;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-select-label,
  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-main strong,
  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-main > small,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-select-label,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main strong,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main > small {
    grid-column: 2;
    max-width: none;
    margin: 0;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-main > small::before,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main > small::before {
    display: none;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-footer,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-footer {
    grid-column: 2;
    grid-row: 2;
    display: inline-flex;
    justify-self: end;
    align-items: center;
    gap: 10px;
    padding: 0;
    min-width: 0;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-extra-price,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-extra-price {
    display: none;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-placement,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-placement {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 0;
    padding: 0;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-placement-placeholder,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-placement-placeholder {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 36px;
    padding: 6px 8px;
    font-size: 10px;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-portion-controls,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion-controls {
    min-width: 100%;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
  }

  .topping-portion-current {
    grid-column: 1 / -1;
    display: block;
    align-items: center;
    min-width: 0;
    padding: 0 2px 4px;
    color: #5f564f;
    font-size: 12px;
    font-weight: 800;
    border-right: 0;
    text-transform: capitalize;
    white-space: nowrap;
    text-align: left;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-portion,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 4px;
    border-radius: 999px;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-portion span,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion span {
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-check,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-check {
    top: 8px;
    right: 8px;
  }

  .wing-style-grid,
  .product-config-page .wing-style-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  .wing-style-grid .wing-choice-card {
    justify-self: center;
    width: 100%;
    max-width: 360px;
  }

  .topping-preview-panel {
    justify-items: center;
    width: 100%;
    gap: 10px;
  }

  .topping-preview-card {
    width: 100%;
    max-width: 372px;
    justify-items: center;
    gap: 8px;
    padding: 10px 10px 12px;
  }

  .topping-preview-stage {
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .topping-preview-card p {
    width: 100%;
    text-align: left;
    font-size: 12px;
    line-height: 1.35;
  }

  .topping-preview-sizes {
    width: 100%;
    margin-top: 2px;
    padding-top: 10px;
  }

  .topping-preview-sizes .pizza-size-selector,
  .product-config-page .topping-preview-sizes .pizza-size-selector {
    gap: 6px;
  }

  .topping-preview-sizes .pizza-size-card,
  .product-config-page .topping-preview-sizes .pizza-size-card {
    min-width: 70px;
    min-height: 76px;
    padding: 7px 2px;
  }

  .topping-preview-purchase-row {
    gap: 10px;
  }

  .topping-preview-add {
    width: 100%;
    margin-left: 0;
  }

  .topping-preview-qty {
    gap: 8px;
    min-width: 92px;
    font-size: 28px;
  }

  .topping-preview-qty button {
    width: 26px;
    height: 26px;
    font-size: 17px;
  }

  .topping-preview-live-price {
    font-size: clamp(24px, 8vw, 30px);
  }
}

@media (max-width: 760px) {
  .site-header {
    /* The logo is anchored to the header/viewport midpoint instead of the
       space between unequal controls (one hamburger left, two icons right).
       The two flow columns reserve the edges; explicit logo width prevents
       overlap at 320px while preserving a real clickable home link. */
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-left: calc(8px + env(safe-area-inset-left, 0px));
    padding-right: calc(8px + env(safe-area-inset-right, 0px));
  }

  .brand {
    position: absolute;
    /* Centering an abs-positioned item over the header's full padding box
       (rather than offsetting from its top edge) only gives the logo "half
       credit" for any env(safe-area-inset-top) added to the header's own
       padding-top -- centering splits the added height in two, so on a
       notch/Dynamic Island device the logo rode too high (jammed into the
       status bar) even though the in-flow hamburger/search/account icons
       (unaffected by centering) cleared it correctly. Explicit top +
       translateY adds the other half of the inset back in. 0px fallback
       keeps this a no-op on desktop/normal mobile web. */
    top: calc(50% + env(safe-area-inset-top, 0px) / 2);
    left: 50%;
    z-index: 1;
    width: auto;
    max-width: none;
    transform: translate(-50%, -50%);
    justify-content: center;
  }

  .brand-img {
    /* Size the diamond logo by HEIGHT so it reads at a proper size (width-
       capping made it short/cramped). max-width guards against overlapping the
       hamburger (left) or the search/account icons (right) at 320px-430px. */
    height: 68px;
    width: auto;
    max-width: min(58vw, 220px);
  }

  .header-hamburger {
    z-index: 2;
    width: 44px;
    height: 44px;
  }

  .mobile-header-actions {
    z-index: 2;
    width: auto;
    justify-self: end;
    gap: 0;
  }

  .mobile-account-btn {
    width: 44px;
    height: 44px;
  }

  .site-footer-brand {
    justify-items: center;
  }

  .product-config-page .pizza-builder,
  .product-config-page .wing-builder {
    margin: 0;
    overflow: visible;
  }

  .product-config-page .builder-step-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 0;
  }

  .product-config-page .builder-step-tabs button {
    min-height: 54px;
    padding: 8px 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    color: #4a3b31;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
  }

  .product-config-page .builder-step-tabs button.active {
    border-color: #6f9f42;
    background: #416c1e;
    color: #ffffff;
  }

  .product-config-page .pizza-size-selector,
  .product-config-page .wing-size-selector {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 0 10px;
  }

  .wing-required-message,
  .builder-ingredient-line {
    padding: 8px 10px 10px;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
  }

  .wing-style-grid,
  .wing-style-grid .wing-choice-card {
    max-width: none;
  }

  .wing-style-grid .wing-choice-card {
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 136px;
    gap: 16px;
    padding: 18px;
  }

  .wing-style-grid .wing-choice-art {
    width: 118px;
    height: 96px;
  }

  .wing-style-grid .wing-choice-card strong {
    font-size: 21px;
  }

  .wing-style-grid .wing-choice-card small {
    font-size: 14px;
  }

  body.pizza-builder-active .product-config-page .config-product-image,
  body.pizza-builder-active .product-config-page .config-product-copy .config-ingredient-line,
  body.pizza-builder-active .product-config-page .config-product-copy .dialog-price,
  body.pizza-builder-active .product-config-page .config-order-panel {
    display: none;
  }

  body.pizza-builder-active .product-config-page .mobile-builder-preview {
    display: block;
    margin-bottom: 12px;
  }

  body.pizza-builder-active .product-config-page .pizza-builder .builder-step-panel .topping-preview-panel {
    display: none;
  }

  body.pizza-builder-active .product-config-page .config-product-copy #dialogDescription {
    display: block;
    order: 2;
    grid-column: 1 / -1;
    margin: 4px auto 10px;
    max-width: 92%;
    text-align: center;
  }

  .storefront.category-active .menu-item {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }

  .storefront.category-active .item-image-panel {
    min-height: 148px;
    height: 148px;
    padding: 0;
    background: transparent;
  }

  .storefront.category-active .item-image {
    min-height: 148px;
    height: 148px;
  }

  .storefront.category-active .item-title {
    font-size: 16px;
    line-height: 1.2;
  }

  .storefront.category-active .item-summary {
    font-size: 11px;
    line-height: 1.35;
  }

  .storefront.category-active .item-price {
    font-size: 16px;
  }

  .storefront.category-active .item-calories {
    display: none;
  }

  .storefront.category-active .item-actions {
    grid-template-columns: 1fr;
  }

  .storefront.category-active .item-action-primary,
  .storefront.category-active .item-action-secondary {
    min-height: 38px;
    font-size: 11px;
  }

  body.config-active .cart-panel {
    display: grid !important;
  }

  .cart-drawer-bar {
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
    gap: 10px;
  }
}

@media (min-width: 980px) {
  .product-config-page .builder-step-panel .topping-multi-layout {
    gap: 22px;
  }

  .cart-panel.cart-empty .cart-drawer-bar {
    display: none;
  }

  .product-config-page .builder-step-panel .topping-config-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: clamp(20px, 2.4vw, 30px);
    align-items: start;
  }

  .product-config-page .builder-step-panel .topping-config-layout .topping-config-main {
    width: 100%;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    align-items: stretch;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice {
    height: 100%;
    min-height: 272px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main {
    flex: 1 1 auto;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-footer {
    min-height: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 0 10px 8px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-extra-price {
    width: auto;
    height: auto;
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    line-height: 1.25;
    white-space: nowrap;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-qty-stepper {
    gap: 8px;
    flex: 0 0 auto;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-qty-stepper span {
    width: auto;
    height: auto;
    min-width: 14px;
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    line-height: 1;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-placement {
    min-height: 66px;
    margin-top: auto;
    display: grid;
    align-items: stretch;
    padding: 4px 10px 10px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion-controls {
    min-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0;
    border-radius: 999px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion-current {
    grid-column: 1 / -1;
    width: auto;
    height: auto;
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #6b6159;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    padding: 0 2px;
    white-space: nowrap;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
  }

  .topping-preview-panel {
    position: sticky;
    top: 116px;
    align-self: start;
  }
}

/* Mobile pizza-builder overrides:
   - Keep only one Add to Cart button
   - Pin/compact the live topping preview while selecting toppings
   - Render topping cards in a 2-column grid */
@media (max-width: 760px) {
  /* Ensure no ancestor of the sticky preview clips it into a scroll container */
  body.pizza-builder-active .product-config-page .pizza-builder {
    overflow: visible;
  }

  /* Pin the base preview flush beneath the sticky site header while scrolling
     toppings. The header height varies on mobile (the logo renders shorter than
     its 82px max depending on viewport width), so a hardcoded offset either
     overlapped the "PIZZA 1 / PIZZA 2" label (old 60px) or left a visible gap
     that scrolling content bled through (old 100px). We now pin to the header's
     real measured height via --site-header-height (set by JS, already includes
     the iOS safe-area-inset-top since it's measured from the rendered box), so
     the preview sits directly below the header with no gap and no overlap. The
     fallback keeps the label clear if the var hasn't been set yet. When the
     header auto-hides on scroll-down the preview rises to the compact top. */
  body.pizza-builder-active .product-config-page .pizza-builder .mobile-builder-preview {
    display: block;
    position: sticky;
    top: var(--site-header-height, calc(env(safe-area-inset-top) + 92px));
    z-index: 20;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid #e7dbd0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(70, 50, 38, 0.08);
    max-height: 290px;
    overflow: hidden;
    transition: top 0.25s ease;
  }

  body.header-hidden.pizza-builder-active .product-config-page .pizza-builder .mobile-builder-preview {
    top: calc(env(safe-area-inset-top) + 10px);
  }

  body.header-hidden .site-header {
    transform: translateY(-100%);
  }

  body.header-hidden .config-shell {
    /* Mirrors the embedded-checkout back-button fix (v124): once the sticky
       site header auto-hides on scroll, .config-back becomes the top-most
       element in the item/product builder overlay, so it needs its own
       safe-area clearance or it sits under the notch/Dynamic Island. 0px
       fallback keeps this a no-op on desktop/normal mobile web. */
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
  }

  body.pizza-builder-active .product-config-page .pizza-builder.guided-combo {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  body.pizza-builder-active .product-config-page .pizza-builder.has-mobile-preview {
    padding-bottom: calc(138px + env(safe-area-inset-bottom));
  }

  body.pizza-builder-active .product-config-page .pizza-builder.has-mobile-preview .builder-step-panel {
    padding-top: 6px;
  }

  /* On the pizza builder's final step the "Additional information" note box and
     the "You may also like" upsell render BELOW the builder. The builder's
     138px floating-bar bottom padding then became a big empty gap ABOVE the
     note label (owner feedback 2026-07). When the note box is open, trim that
     padding to a normal gap and instead give the bottom-most element (the
     upsell) the floating-bar + bottom-cart-bar clearance, plus a clear gap so
     the note section is visually separated from the upsell. */
  body.pizza-note-open .product-config-page .pizza-builder.has-mobile-preview {
    padding-bottom: 6px;
  }

  body.pizza-note-open .product-config-page .config-note-field {
    margin-top: 16px;
    margin-bottom: 26px;
  }

  /* Floating-bar clearance now lives on the scroll container instead of the
     builder's own padding, so the last element -- whether that's the upsell or
     the note box when the upsell has no candidates -- still clears the fixed
     Add-to-Cart bar and bottom cart bar. */
  body.pizza-note-open .config-shell {
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
  }

  body.pizza-builder-active .product-config-page .pizza-builder .mobile-builder-preview .topping-preview-panel {
    position: static;
    top: auto;
    gap: 6px;
  }

  body.pizza-builder-active .product-config-page .pizza-builder .mobile-builder-preview .topping-preview-card {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 4px 0 0;
  }

  body.pizza-builder-active .product-config-page .pizza-builder .mobile-builder-preview .topping-preview-stage {
    width: 100%;
    max-width: min(100%, 205px);
    margin-inline: auto;
  }

  body.pizza-builder-active .product-config-page .pizza-builder .mobile-builder-preview .topping-preview-card p,
  body.pizza-builder-active .product-config-page .pizza-builder .mobile-builder-preview .topping-preview-sizes .pizza-size-selector {
    display: none;
  }

  /* v117: once the customer scrolls into the topping list, drop the sticky
     base-card quantity stepper + price -- it's redundant with the floating
     bottom Add to Cart bar and only adds clutter while it stays pinned. The
     row (and thus the quantity stepper) reappears when they scroll back to
     the top, so quantity is never lost. */
  body.pizza-builder-active.builder-scrolled .product-config-page .pizza-builder .mobile-builder-preview .topping-preview-purchase-row {
    display: none;
  }

  body.pizza-builder-active .product-config-page #addItemBtn,
  .topping-preview-add {
    display: none;
  }

  body.pizza-builder-active .product-config-page .pizza-builder .mobile-builder-add {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(58px + env(safe-area-inset-bottom));
    z-index: 57;
    width: auto;
    margin: 0;
    min-height: 52px;
    border-radius: 14px;
    box-shadow: 0 10px 20px rgba(34, 24, 19, 0.24);
  }

  /* Wings builder: reuse the exact pizza floating-footer pattern -- hide the
     hero's Add to Cart and pin the wing builder's floating clone to the
     bottom so it stays visible while scrolling the sauce list. */
  body.wings-builder-active .product-config-page #addItemBtn {
    display: none;
  }

  body.wings-builder-active .product-config-page .wing-builder {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  body.wings-builder-active .product-config-page .wing-builder .mobile-builder-add {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(58px + env(safe-area-inset-bottom));
    z-index: 57;
    width: auto;
    margin: 0;
    min-height: 52px;
    border-radius: 14px;
    box-shadow: 0 10px 20px rgba(34, 24, 19, 0.24);
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-grid,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice {
    min-width: 0;
    min-height: 224px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-main,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: start;
    gap: 3px;
    min-width: 0;
    padding: 0;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-art,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-art {
    position: static;
    width: 100%;
    height: 72px;
    margin: 0;
    transform: none !important;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-footer,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    min-width: 0;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-placement,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-placement {
    min-height: 0;
    margin-top: auto;
    padding: 0;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-portion-controls,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion-controls {
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  /* regular topping cards inherit the same stray 2-column grid placement from
     the legacy list-style rules above; the art column shrinks (down to 0) to
     make room for long topping names, so reset it to a consistent full-width row */
  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-main,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main {
    grid-template-columns: 1fr;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-select-label,
  .product-config-page .builder-step-panel .builder-topping-group .topping-choice-main strong,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-select-label,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-main strong {
    grid-column: auto;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-art,
  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-art {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }

  /* extra-flavour-choice cards inherit stray grid-column/grid-row placement and a
     leftover height:100% from the desktop absolute-positioned layout above; reset
     them so the art renders at full size instead of being squeezed */
  .product-config-page .builder-step-panel .builder-topping-group .topping-choice.extra-flavour-choice .topping-choice-main {
    grid-template-columns: 1fr;
    height: auto;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice.extra-flavour-choice .topping-select-label,
  .product-config-page .builder-step-panel .builder-topping-group .topping-choice.extra-flavour-choice .topping-choice-main strong {
    grid-column: auto;
  }

  .product-config-page .builder-step-panel .builder-topping-group .topping-choice.extra-flavour-choice .topping-art {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: 130px;
  }

  .builder-guided-nav {
    margin-top: 14px;
    padding: 0 16px 16px;
  }

  .builder-guided-nav-buttons button {
    font-size: 12px;
    padding: 10px 8px;
    min-height: 44px;
  }

  .builder-guided-nav-buttons button[data-guided-nav="back"] {
    flex: 0 1 96px;
  }
}

/* 2026-07 checkout wizard */
.checkout-dialog {
  border-radius: 22px;
  overflow: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}

.checkout-dialog .checkout-wizard {
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 32px));
  max-width: 100%;
  max-height: min(760px, 92dvh);
  padding: 0;
  box-sizing: border-box;
}

/* Desktop/laptop only: the checkout dialog has plenty of room to breathe on
   larger screens, so give it a noticeably bigger, more comfortable size.
   The @media (max-width: 760px) mobile full-screen layout further below is
   untouched -- it always wins there regardless of this rule's order. */
@media (min-width: 761px) {
  .checkout-dialog .checkout-wizard {
    width: min(760px, calc(100vw - 64px));
    max-height: min(880px, 90dvh);
  }
}

/* Single top-left back arrow + centered title, no X anywhere and no step
   chip (2026-07 redesign) -- consistent across all 3 checkout screens
   (upsell / Details / Payment), see checkoutHeaderBackBtn's click handler
   in app.js. */
.checkout-wizard-header {
  position: relative;
  padding: 26px 32px;
  border-bottom: 1px solid var(--line);
}

.checkout-wizard-header h2 {
  margin: 0;
  font-size: 22px;
  text-align: center;
  padding: 0 36px;
}

.checkout-header-back-btn {
  position: absolute;
  /* Centered via top:50%/translateY like the header logo (.brand) was, this
     button only got "half credit" for any env(safe-area-inset-top) the
     mobile .checkout-wizard-header adds to its own padding-top -- centering
     splits the added height in two, so on a notch/Dynamic Island device the
     back arrow rode too high (jammed against the status bar) while the
     h2 title, a normal in-flow child, cleared it correctly. Adding half the
     inset here compensates. 0px fallback keeps this a no-op on desktop and
     in states (e.g. checkout-upsell-active) where the header's own
     padding-top is likewise safe-area-aware. */
  top: calc(50% + env(safe-area-inset-top, 0px) / 2);
  left: 14px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  transition: background 0.15s ease;
}

.checkout-header-back-btn:hover {
  background: var(--row-highlight);
}

.checkout-header-back-btn[hidden] {
  display: none;
}

.checkout-steps-viewport {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 32px 6px;
  box-sizing: border-box;
}

.checkout-wizard .checkout-step {
  margin: 0;
}

/* Checkout section/step headings ("Order summary", "Add a tip", the upsell
   step's "Add a little something extra", etc.) -- restyled 2026-07 to match
   Uber's in-body section headers (e.g. "Original Shawarma"/"Offers for
   you"): near-black, heavy, and noticeably larger than the old small
   uppercase red eyebrow label the base .checkout-step-heading rule below
   still defines (that base rule is effectively dead inside .checkout-wizard
   since this selector's higher specificity always wins here, but it's kept
   for any future non-wizard reuse). Deliberately NOT the brand-red color --
   the wizard's single top title bar (.checkout-wizard-header h2) is
   untouched and remains the only "chrome" element. */
.checkout-wizard .checkout-step-heading {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #141414;
}

.checkout-step-intro {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

/* "Offers for you"-style upsell STEP (2026-07 redesign; restyled 2026-07 to
   match Uber's compact horizontally-scrolling card row) -- its own screen
   right after the cart's CHECKOUT button: a side-scrolling row of
   fixed-width cards, each with a photo, an optional small "Popular"/deal
   badge (top-left of the photo, only when the item provides one -- see
   item.badge in the menu data), a name, a price, and a round quick-add "+"
   button overlapping the photo's bottom-right corner, like Uber's post-
   checkout offers screen. See showCheckoutUpsellStep()/renderCheckoutUpsell()
   in app.js. */
/* v121: compact subheading (was inheriting the 22px .checkout-wizard
   .checkout-step-heading size, which read as an oversized header). Higher
   specificity (.checkout-wizard .checkout-upsell-heading) overrides it so the
   product photos are the visual focus, not the text. */
.checkout-wizard .checkout-upsell-heading {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.checkout-upsell-confirmation {
  margin: -8px 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #eaf6ee;
  color: #1d6a3a;
  font-size: 13.5px;
  font-weight: 800;
}

.checkout-upsell-confirmation[hidden] {
  display: none;
}

/* Horizontal, side-scrolling row (not a grid) -- contained entirely within
   the checkout sheet's own padding via max-width/box-sizing so it can never
   cause the PAGE to overflow horizontally; only this row itself scrolls
   sideways. Scrollbar hidden (still fully scrollable via touch/drag/wheel). */
.checkout-upsell-grid {
  display: flex;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 -2px;
  padding: 2px 2px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.checkout-upsell-grid::-webkit-scrollbar {
  display: none;
}

.checkout-upsell-card {
  position: relative;
  flex: 0 0 auto;
  width: 178px;
  max-width: 178px;
  box-sizing: border-box;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(42, 33, 27, 0.06);
}

/* v121: significantly larger product photo (was 110px) -- the image is the
   focus of the upsell card per owner feedback. The round "+" add button below
   is repositioned to keep hugging the image's bottom-right corner. */
.checkout-upsell-card-image {
  height: 168px;
  background-image: var(--upsell-image);
  background-size: cover;
  background-position: center;
  background-color: var(--thumb-bg);
}

.checkout-upsell-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 3px 8px rgba(181, 31, 36, 0.3);
}

.checkout-upsell-card-body {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px 12px 12px;
}

.checkout-upsell-card-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.checkout-upsell-card-price {
  font-size: 13px;
  font-weight: 900;
  color: var(--brand-dark);
}

.checkout-upsell-card-add {
  position: absolute;
  top: 150px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(181, 31, 36, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
}

.checkout-upsell-card-add span {
  display: block;
  font-size: 19px;
  line-height: 1;
}

.checkout-upsell-card-add:active {
  transform: scale(0.92);
}

.checkout-upsell-empty {
  margin: 0;
  padding: 24px 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 480px) {
  .checkout-upsell-card {
    width: 162px;
    max-width: 162px;
  }

  .checkout-upsell-card-image {
    height: 150px;
  }

  .checkout-upsell-card-add {
    top: 132px;
  }
}

/* Compact Uber-style upsell modal/bottom-sheet (2026-07 "upsellmodal"):
   toggled by .checkout-upsell-active on #checkoutDialog (added in
   showCheckoutUpsellStep(), removed in renderCheckoutStep()/on close). The
   Details/Tip screens keep the full-viewport layout below; ONLY the upsell
   step collapses the sheet to fit its content (header + horizontal card row +
   Continue button) so there's no large dead space beneath the cards.
   The dialog's usual dim ::backdrop (dialog::backdrop) is the scrim. */
.checkout-dialog.checkout-upsell-active .checkout-wizard {
  height: auto;
  max-height: min(680px, 92dvh);
}

/* v121: the larger upsell photos make the sheet taller; trim the "Complete
   your order" title so it doesn't compound the height and reads as a modest
   modal title rather than a big page header. */
.checkout-dialog.checkout-upsell-active .checkout-wizard-header {
  /* This state's higher specificity overrides the mobile-only
     .checkout-wizard-header padding-top (which already adds
     env(safe-area-inset-top)) at every viewport width, so without its own
     inset this step's header -- and thus the now-inset-aware back button
     above -- would go back to riding under the notch. 0px fallback keeps
     this a no-op on desktop. */
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: 16px;
}

.checkout-dialog.checkout-upsell-active .checkout-wizard-header h2 {
  font-size: 18px;
}

.checkout-dialog.checkout-upsell-active .checkout-upsell-viewport {
  /* Content-sized (no flex-grow): keeps the sheet hugging its content
     instead of stretching the viewport to fill leftover height. */
  flex: 0 1 auto;
}

/* Desktop: a small centered modal card, sized to content (narrower than the
   full 760px checkout dialog). */
@media (min-width: 761px) {
  .checkout-dialog.checkout-upsell-active .checkout-wizard {
    width: min(520px, calc(100vw - 64px));
    max-height: min(560px, 88dvh);
  }
}

/* Mobile: anchor to the bottom as a rounded bottom-sheet that fits its
   content, overriding the base full-viewport .checkout-dialog mobile rule
   (position:fixed; inset:0; height:100dvh) that the Details/Tip screens use.
   Higher specificity (.checkout-dialog.checkout-upsell-active) wins. */
@media (max-width: 760px) {
  .checkout-dialog.checkout-upsell-active {
    inset: auto 0 0 0;
    height: auto;
    max-height: 88dvh;
    border-radius: 20px 20px 0 0;
  }

  .checkout-dialog.checkout-upsell-active .checkout-wizard {
    height: auto;
    max-height: 88dvh;
    border-radius: 20px 20px 0 0;
  }
}

/* Page 1 Delivery/Pickup segmented toggle (2026-07 Uber-style checkout
   redesign) -- a red-filled pill when active, matching checkout-mockup-main.
   Deliberately its own rules (not shared with .payment-method-card below)
   since the two look and behave differently now. */
.checkout-fulfillment-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.fulfillment-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.fulfillment-pill-icon {
  font-size: 18px;
  line-height: 1;
}

.fulfillment-pill.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(181, 31, 36, 0.25);
}

/* Page 2 "Pay Online" / "Pay at Store" cards -- centered icon + label,
   matching checkout-mockup-payment. Always 2-up, even on mobile (see the
   @media block below -- these fit comfortably at 390px). */
.checkout-dialog .payment-method-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 20px;
}

/* DELIVERY hides the whole chooser (see syncPaymentMethodAvailability() in
   app.js) -- same [hidden]-outranking issue as `.payment-method-card[hidden]`
   below: this author `display: grid` rule would otherwise beat the UA
   `[hidden] { display: none }` default, so it needs its own override. */
.checkout-dialog .payment-method-options[hidden] {
  display: none;
}

/* DELIVERY = online payment only: with "Pay at Store" hidden, the lone
   "Pay Online" card fills the row instead of leaving an empty grid slot.
   See syncPaymentMethodAvailability() in app.js. */
.payment-method-options.single-option,
.checkout-dialog .payment-method-options.single-option {
  grid-template-columns: 1fr;
}

.checkout-dialog .payment-method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 112px;
  padding: 20px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Same [hidden]-outranking issue as the plain `.payment-method-card[hidden]`
   rule above: this `.checkout-dialog .payment-method-card` selector has equal
   specificity (0,2,0) and comes later in the cascade, so its own `display:
   flex` would otherwise re-show "Pay at Store" for delivery orders even
   though checkoutPayAtStoreOption.hidden is true (see
   syncPaymentMethodAvailability() in app.js). */
.checkout-dialog .payment-method-card[hidden] {
  display: none;
}

.checkout-dialog .payment-method-card:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.checkout-dialog .payment-method-card .payment-method-icon {
  font-size: 30px;
  line-height: 1;
}

.checkout-dialog .payment-method-card strong {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
}

.checkout-dialog .payment-method-card.active {
  border-color: var(--brand);
  background: #fdf3f1;
  box-shadow: 0 8px 20px rgba(181, 31, 36, 0.14);
}

.checkout-dialog .payment-method-card.active strong {
  color: var(--brand-dark);
}

.checkout-dialog .payment-method-card.active::after {
  content: "\2713";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

/* Restaurant-tip card selector (Page 1, both fulfillment modes) -- see
   #checkoutRestaurantTipSection in index.html and
   renderCheckoutRestaurantTip()/setRestaurantTip() in app.js. Tappable
   pill/cards ($3/$5/$7/$10 + Custom, default $5); brand-red filled when
   selected. Persisted as restaurant_contribution, SEPARATE from the
   delivery-only driver tip on Page 2. Replaced the old "Give $2 to store"
   checkbox (2026-07). Extra top margin sets it apart as its own section
   (Task 3 spacing polish). */
.checkout-tip-cards-section {
  margin: 26px 0 0;
}

.checkout-tip-cards-section[hidden] {
  display: none;
}

.checkout-wizard .checkout-tip-cards-heading {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.tip-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tip-card {
  flex: 1 1 0;
  min-width: 58px;
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 10px 8px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, transform 0.12s ease;
}

.tip-card-custom {
  flex-grow: 1.6;
}

.tip-card-amount {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tip-card:hover {
  border-color: var(--brand);
}

.tip-card.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(181, 31, 36, 0.28);
}

.tip-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(181, 31, 36, 0.18);
}

.tip-custom-input-row {
  display: grid;
  gap: 6px;
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--row-highlight);
}

.tip-custom-input-row[hidden] {
  display: none;
}

.tip-custom-input-row label {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 16px keeps iOS Safari from auto-zooming the viewport on focus. */
.tip-custom-input-row input {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1.5px solid var(--field-border);
  border-radius: 0;
  padding: 9px 2px 8px;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .tip-card {
    min-width: 54px;
    min-height: 50px;
  }

  .tip-card-amount {
    font-size: 15px;
  }
}

/* Page 2 (delivery only): Uber-style "Add a tip" driver-tip screen --
   restored 2026-07 (was folded into Page 1 in v121). See the
   .checkout-page-two section in index.html and renderCheckoutTipPage()/
   setDriverTip() in app.js. Clean rows with a round icon bullet, a label, and
   a dollar "pill" on the right, matching the Uber "Add a tip" reference. The
   explicit [hidden] override keeps the step actually hidden -- the generic
   ".checkout-wizard .checkout-step" rules (display/flow) otherwise outrank the
   bare [hidden]{display:none}. */
.checkout-wizard .checkout-page-two[hidden] {
  display: none;
}

.checkout-tip-heading {
  margin: 2px 0 4px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.checkout-tip-intro {
  margin: 0 0 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.tip-options {
  display: grid;
  gap: 4px;
}

.tip-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 10px;
  border: none;
  border-radius: 12px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.tip-option:hover {
  background: var(--row-highlight);
}

.tip-option-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
  color: #ffffff;
  background: #8a8f98;
}

.tip-option-icon-1 { background: #3b82f6; }
.tip-option-icon-2 { background: #2f6fe0; }
.tip-option-icon-3 { background: #274a9c; }
.tip-option-icon-4 { background: #171c3f; }

.tip-option-icon-custom {
  background: #9aa0a6;
  color: #ffffff;
  font-size: 14px;
}

.tip-option-label {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.tip-option-pill {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--row-highlight);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.tip-option-pill-edit {
  background: var(--row-highlight);
}

.tip-option.active {
  background: var(--row-highlight);
}

.tip-option.active .tip-option-pill {
  background: var(--ink);
  color: #ffffff;
}

.checkout-tip-total {
  margin: 24px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

@media (max-width: 480px) {
  .tip-option-icon {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .tip-option-label {
    font-size: 14px;
  }

  .tip-option-pill {
    padding: 7px 13px;
    font-size: 13px;
  }
}

.checkout-wizard .checkout-step label {
  display: grid;
  gap: 5px;
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.checkout-wizard .checkout-step input,
.checkout-wizard .checkout-step textarea {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1.5px solid var(--field-border);
  border-radius: 0;
  padding: 9px 2px 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.checkout-wizard .checkout-step textarea {
  min-height: 64px;
  resize: vertical;
}

.checkout-wizard .checkout-step input:hover:not(:disabled),
.checkout-wizard .checkout-step textarea:hover:not(:disabled) {
  border-bottom-color: var(--field-border-hover);
}

.checkout-wizard .checkout-step input:focus,
.checkout-wizard .checkout-step textarea:focus {
  outline: none;
  border-bottom-color: var(--brand);
  box-shadow: 0 2px 0 var(--brand);
}

.checkout-wizard .checkout-step input.field-invalid,
.checkout-wizard .checkout-step textarea.field-invalid {
  border-bottom-color: var(--field-invalid);
  box-shadow: 0 1px 0 var(--field-invalid);
}

.checkout-field-error {
  /* Reserve the line's height whether or not there's an error message so
     a field failing validation (e.g. "Name is required.") never
     shifts the fields below it -- see .checkout-wizard .checkout-step
     label's grid gap, which this box participates in as a row. */
  display: block;
  min-height: 14px;
  margin-top: -3px;
  color: #c23a2f;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}

/* Page 1 "Checkout" page (2026-07 Uber-style redesign: fulfillment choice +
   address + timing + contact info + order review + inline upsell, all in
   one dense scrollable page) -- tighter, more compact field styling than
   the base .checkout-wizard rules above (still inherits typography/colors/
   focus ring from them), plus a responsive 2-column field grid so short
   fields like Name/Phone sit side-by-side instead of each eating a full
   row. Scoped to .checkout-page-one so it never touches the item builder or
   other dialogs, which have their own label/input styles entirely. */
.checkout-page-one.checkout-step .checkout-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0 0 6px;
}

.checkout-page-one.checkout-step .checkout-field-grid > label {
  margin: 0;
}

.checkout-field-full {
  grid-column: 1 / -1;
}

/* Note: these use the .checkout-page-one.checkout-step compound selector
   (matching specificity 0,2,1 to the base ".checkout-wizard .checkout-step
   ..." rules above, so source order lets these win) rather than a
   lower-specificity ".checkout-page-one label" selector, which would
   otherwise silently lose to those base rules. */
.checkout-page-one.checkout-step label {
  gap: 4px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.checkout-page-one.checkout-step input,
.checkout-page-one.checkout-step textarea {
  min-height: 44px;
  border-radius: 0;
  padding: 8px 2px;
  font-size: 15px;
}

.checkout-page-one.checkout-step textarea {
  min-height: 60px;
}

@media (max-width: 760px) {
  .checkout-page-one.checkout-step .checkout-field-grid {
    grid-template-columns: 1fr;
  }
}

/* Name / Phone / Email (2026-07 checkout polish) -- sleeker, more compact
   card-style inputs with small uppercase micro-labels and noticeably less
   vertical gap between the three fields than the base .checkout-field-grid
   spacing above. Name + Phone already sit side-by-side (2-col grid
   inherited from .checkout-field-grid on screens > 760px); Email stays
   full-width via its own .checkout-field-full class. Collapses to a single
   compact column on phones (inherited media query above) with no
   horizontal overflow at 390/414px. */
.checkout-page-one.checkout-step .checkout-contact-fields {
  gap: 2px 14px;
  margin: 2px 0 16px;
}

.checkout-page-one.checkout-step .checkout-contact-fields label {
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a3968a;
}

/* Contact inputs inherit the site-wide underline system. Their tighter rhythm
   keeps Name / Phone / Email compact without reintroducing v132 boxes. */
.checkout-page-one.checkout-step .checkout-contact-fields input {
  min-height: 44px;
  border: 0;
  border-bottom: 1.5px solid var(--field-border);
  border-radius: 0;
  padding: 8px 2px;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
  box-sizing: border-box;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.checkout-page-one.checkout-step .checkout-contact-fields input::placeholder {
  color: var(--field-placeholder);
  font-weight: 500;
}

.checkout-page-one.checkout-step .checkout-contact-fields input:hover:not(:disabled) {
  border-bottom-color: var(--field-border-hover);
}

.checkout-page-one.checkout-step .checkout-contact-fields input:focus {
  border-bottom-color: var(--brand);
  box-shadow: 0 2px 0 var(--brand);
  outline: none;
}

.checkout-page-one.checkout-step .checkout-contact-fields input.field-invalid {
  border-bottom-color: var(--field-invalid);
  box-shadow: 0 1px 0 var(--field-invalid);
}

.checkout-page-one.checkout-step .checkout-contact-fields .checkout-field-error {
  min-height: 12px;
  font-size: 11px;
}

/* Promo code control (2026-07 checkout polish): a single-row field where the
   text input flex-grows and the "Apply" button sits to its right, matching
   the modern Uber/Shopify promo-field pattern. The input reuses the same
   underline treatment as the Name/Phone/Email contact fields above; the
   button is an intentionally SECONDARY (outlined, brand-red) control so it
   never competes with the primary CONTINUE / PLACE ORDER button. Spacing
   above/below mirrors the surrounding checkout sections. */
.checkout-promo {
  margin: 16px 0 4px;
}

.checkout-promo-label {
  display: block;
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a3968a;
}

.checkout-promo-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.checkout-promo-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  border: 0;
  border-bottom: 1.5px solid var(--field-border);
  border-radius: 0;
  padding: 10px 2px 9px;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: none;
  box-sizing: border-box;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.checkout-promo-input::placeholder {
  color: var(--field-placeholder);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.checkout-promo-input:hover:not(:disabled) {
  border-bottom-color: var(--field-border-hover);
}

.checkout-promo-input:focus {
  border-bottom-color: var(--brand);
  box-shadow: 0 2px 0 var(--brand);
  outline: none;
}

.checkout-promo-input:disabled {
  color: #8a7f74;
  background: transparent;
  border-bottom-style: dashed;
  opacity: 1;
  box-shadow: none;
  -webkit-text-fill-color: #8a7f74;
}

.checkout-promo-apply {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 46px;
  padding: 0 20px;
  border: 1.5px solid var(--brand);
  border-radius: var(--button-radius);
  background: #ffffff;
  color: var(--brand);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, transform 0.05s ease;
}

.checkout-promo-apply:hover {
  background: var(--brand);
  color: #ffffff;
}

.checkout-promo-apply:active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #ffffff;
  transform: translateY(1px);
}

.checkout-promo-apply:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.checkout-promo-apply:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
  background: #ffffff;
  color: var(--brand);
}

.checkout-promo-message {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.checkout-promo-message.is-valid {
  color: #1e7d4f;
}

.checkout-promo-message.is-error {
  color: var(--brand);
}

/* Divider between the Order summary section and the payment-method section
   (Task 4) so they read as distinct sections, matching the Uber-style
   section breaks used elsewhere in checkout. */
.checkout-section-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 20px 0;
  height: 0;
}

#checkoutDeliverySection {
  margin: 4px 0 2px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
}

#checkoutDeliverySection > label {
  margin: 0;
}

#checkoutDeliverySection h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.checkout-wizard-nav {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  padding: 14px 32px 20px;
  border-top: 1px solid var(--line);
}

/* Without this, setting .hidden = true (e.g. while the embedded Stripe
   panel is showing) has no visible effect: our `display: flex` above has
   the same specificity as the UA [hidden]{display:none} rule and comes
   later in the cascade, so it silently wins over `hidden` -- same fix
   already applied to .embedded-checkout-panel[hidden] and
   #checkoutDeliverySection elsewhere in this file. */
.checkout-wizard-nav[hidden] {
  display: none;
}

.checkout-nav-back {
  flex: 0 0 auto;
}

.checkout-nav-continue,
.checkout-wizard-nav #placeOrderBtn {
  flex: 1 1 auto;
  min-height: 50px;
  font-size: 14px;
}

.checkout-wizard #checkoutMessage {
  margin: 0;
  padding: 0 32px;
  min-height: 0;
}

.checkout-wizard #checkoutMessage:not(:empty) {
  padding-top: 10px;
  padding-bottom: 2px;
}

/* Checkout/payment error banner (v115): replaces the old cramped inline red
   text for every checkout error path (Stripe elements.submit(),
   PaymentIntent creation, confirmPayment declines, and client-side field
   validation -- all routed through setCheckoutMessage(msg, true), see
   app.js). Red-left-border card with a round "!" badge, matching the
   .delivery-minimum-notice/.uber-quote-status warning-banner pattern already
   used elsewhere in this file, but in the brand's error red instead of amber. */
.checkout-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 32px 10px;
  padding: 12px 14px;
  border: 1px solid #f3c6c4;
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  background: #fdf1f0;
}

.checkout-error-banner[hidden] {
  display: none;
}

.checkout-error-banner-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.checkout-error-banner-text {
  flex: 1 1 auto;
  color: #7a1f1c;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .checkout-error-banner {
    margin: 0 20px 10px;
  }
}

/* Full-dialog "processing your payment" overlay (v115): shown for the whole
   online-card-payment window so the customer can't double-submit or see the
   raw form mid-charge (see showPaymentProcessingOverlay()/
   hidePaymentProcessingOverlay() in app.js). Positioned against the dialog's
   own box, which .checkout-dialog sizes to exactly match .checkout-wizard on
   both desktop and the mobile full-screen layout, so `inset: 0` here covers
   the entire visible checkout sheet (header + nav included) in both cases. */
.checkout-processing-overlay {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
}

.checkout-processing-overlay[hidden] {
  display: none;
}

.checkout-processing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 260px;
}

.checkout-processing-logo {
  width: 140px;
  height: auto;
}

.checkout-processing-spinner {
  width: 38px;
  height: 38px;
  border: 4px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: checkout-processing-spin 0.85s linear infinite;
}

@keyframes checkout-processing-spin {
  to {
    transform: rotate(360deg);
  }
}

.checkout-processing-text {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .checkout-processing-logo {
    width: 120px;
  }
}

@media (max-width: 760px) {
  /* Full-screen (edge-to-edge) on mobile, Uber-style -- previously a
     bottom-sheet capped at 95dvh, which (whenever Page 1's content was
     shorter than that) left a gap above the sheet exposing the page behind
     it as dead space. Filling the entire viewport removes that gap and
     lets the checkout content start right at the very top.
     IMPORTANT: an explicit `height` is required here -- `inset: 0` alone is
     NOT enough. The UA stylesheet gives a plain <dialog> `height:
     fit-content` (not `auto`), so without an explicit override the CSS
     "stretch a fixed box via inset" algorithm (which only kicks in when
     `height` computes to `auto`) never applies: the dialog instead
     shrinks to fit whatever step's content happens to be short (e.g. the
     2-card upsell step), rendering as a small box pinned to the top of
     the screen with the rest of the page visible underneath -- i.e. the
     checkout sheet appears to not open at all. `max-height: none` is
     equally required: the UA default (~`calc(100% - 38px)`) otherwise
     clamps our explicit height down, leaving a ~38px gap at the bottom
     that exposes the page's fixed cart bar (the original bottom-bleed
     bug). Both together give a robust, always-full-viewport sheet
     without needing to hide the cart bar as a workaround. */
  .checkout-dialog {
    position: fixed;
    inset: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .checkout-dialog .checkout-wizard {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .checkout-wizard-header {
    padding: calc(16px + env(safe-area-inset-top)) 20px 14px;
  }

  .checkout-wizard-header h2 {
    font-size: 18px;
  }

  .checkout-steps-viewport {
    padding: 14px 20px 6px;
  }

  .checkout-wizard-nav {
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  }

  .checkout-card-payment-heading {
    flex-wrap: wrap;
  }
}

/* 2026-07 embedded Stripe checkout: payment form mounted in-page so the
   customer never leaves our site, mirroring .checkout-steps-viewport's
   layout/scroll behavior so it drops into the same wizard slot. Explicit
   [hidden] rule needed: our own `display: flex` below otherwise wins over
   the UA [hidden] stylesheet rule since both have equal specificity and
   ours is later in the cascade (same reasoning as #checkoutDeliverySection
   and .header-auth-control elsewhere in this file). */
.embedded-checkout-panel[hidden] {
  display: none;
}

.embedded-checkout-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.embedded-checkout-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.embedded-checkout-head .outline-action {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  font-size: 13px;
}

.embedded-checkout-container {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  min-height: 320px;
}

.embedded-checkout-container iframe {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 760px) {
  .embedded-checkout-container {
    min-height: 260px;
  }
}

/* Full-screen embedded payment view: once Stripe's payment form is mounted,
   our own wizard header (title + step progress) and order summary bar are
   redundant chrome that pushes the iframe down and forces scrolling to
   reach the card fields on short phone screens -- collapse them and let the
   dialog fill the viewport instead. Desktop stays a centered, tall panel. */
.checkout-dialog.embedded-checkout-active .checkout-wizard-header {
  display: none;
}

.checkout-dialog.embedded-checkout-active .checkout-wizard {
  max-height: min(760px, 94vh);
}

@media (max-width: 760px) {
  .checkout-dialog.embedded-checkout-active {
    position: fixed;
    inset: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    /* Explicit height required (see the plain .checkout-dialog mobile rule
       above for why): the UA stylesheet gives <dialog> `height:
       fit-content`, so without this the box collapses to its content size
       instead of filling the screen. `max-height: none` clears the UA's
       default cap (~calc(100% - 38px)) that would otherwise clip it. */
    height: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .checkout-dialog.embedded-checkout-active .checkout-wizard {
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .checkout-dialog.embedded-checkout-active .embedded-checkout-panel {
    /* The wizard header is hidden in this view, so the Back button becomes the
       top-most element -- add the status-bar inset so it clears the Dynamic
       Island (v124). 0px fallback = no-op on desktop/Android. */
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 6px;
  }

  .checkout-dialog.embedded-checkout-active .embedded-checkout-container {
    min-height: 0;
  }
}

/* 2026-07 order confirmation */
.order-confirmation-dialog {
  border-radius: 22px;
  overflow: hidden;
  width: min(420px, calc(100vw - 32px));
  height: auto;
  max-width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
}

.order-confirmation-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  text-align: center;
}

.order-confirmation-header {
  display: grid;
  justify-items: center;
  padding: 24px 28px 12px;
  border-bottom: 1px solid var(--line);
}

.order-confirmation-heading {
  min-width: 0;
}

.order-confirmation-content {
  min-height: 0;
  padding: 14px 28px;
  overflow-y: auto;
}

.order-confirmation-actions {
  display: grid;
  gap: 10px;
  padding: 10px 28px 20px;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.order-confirmation-check {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 0 8px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--brand), var(--brand-dark));
  color: #ffffff;
  font-size: 25px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(181, 31, 36, 0.28);
}

.order-confirmation-card h2 {
  margin: 0 0 3px;
  font-size: 23px;
}

.order-confirmation-greeting {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
}

.order-confirmation-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
}

.order-confirmation-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.order-confirmation-detail[hidden] {
  display: none;
}

.order-confirmation-detail dt {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.order-confirmation-detail dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}

.order-confirmation-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.order-confirmation-close {
  width: 100%;
  min-height: 50px;
  font-size: 14px;
}

/* 2026-07 "Phase 1" order tracking: horizontal status timeline ----------- */
.order-tracking-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin: 4px 0 6px;
  padding: 0;
  list-style: none;
}

/* Pickup confirmations (v120) hide the timeline via the `hidden` attribute --
   this author `display: flex` rule outranks the UA `[hidden]` sheet, so an
   explicit override is required for `hidden` to actually take effect. */
.order-tracking-timeline[hidden] {
  display: none;
}

.order-tracking-step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

/* Connecting line between dots -- drawn on every step except the first,
   spanning from this dot's left edge back to the previous one's center. */
.order-tracking-step::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}

.order-tracking-step:first-child::before {
  display: none;
}

.order-tracking-step.is-complete::before,
.order-tracking-step.is-current::before {
  background: var(--brand);
}

.order-tracking-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-bottom: 8px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #ffffff;
  color: transparent;
  font-size: 10px;
  font-weight: 900;
}

.order-tracking-step.is-complete .order-tracking-dot {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.order-tracking-step.is-complete .order-tracking-dot::after {
  content: "\2713";
}

.order-tracking-step.is-current .order-tracking-dot {
  border-color: var(--brand);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(181, 31, 36, 0.16);
}

.order-tracking-step.is-current .order-tracking-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.order-tracking-label {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.25;
  padding: 0 2px;
}

.order-tracking-step.is-complete .order-tracking-label,
.order-tracking-step.is-current .order-tracking-label {
  color: var(--ink);
}

.order-tracking-note {
  margin: 0 0 16px;
  color: var(--brand-dark);
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.4;
}

.order-tracking-note[hidden] {
  display: none;
}

.order-tracking-note.is-pickup-ready {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(44, 163, 92, 0.24);
  border-radius: 12px;
  background: #edf8f1;
  color: #215c36;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
}

.order-tracking-link {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 0 0 18px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  line-height: 46px;
  padding: 0 18px;
}

.order-tracking-link[hidden] {
  display: none;
}

/* Dedicated recent-delivery tracker -------------------------------------- */
.delivery-tracking-dialog {
  width: min(560px, calc(100vw - 24px));
  max-width: min(560px, calc(100vw - 24px));
  height: min(820px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(20, 12, 10, 0.3);
}

.delivery-tracking-dialog::backdrop {
  background: rgba(24, 16, 14, 0.58);
  backdrop-filter: blur(3px);
}

.delivery-tracking-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}

.delivery-tracking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 22px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #fff8f5, #ffffff);
}

.delivery-tracking-eyebrow {
  margin: 0 0 3px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.delivery-tracking-header h2 {
  margin: 0;
  font-size: clamp(21px, 5vw, 27px);
}

.delivery-tracking-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--ink);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.delivery-tracking-body {
  min-height: 0;
  padding: 18px 22px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.delivery-tracking-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--line);
}

.delivery-tracking-overview > div {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 11px 12px;
  background: #ffffff;
}

.delivery-tracking-overview span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.delivery-tracking-overview strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.35;
}

.delivery-tracking-stages {
  display: grid;
  gap: 0;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.delivery-tracking-stage {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  min-height: 48px;
  color: var(--muted);
}

.delivery-tracking-stage::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 14px;
  width: 2px;
  background: var(--line);
}

.delivery-tracking-stage:last-child::before {
  display: none;
}

.delivery-tracking-stage.is-complete::before {
  background: var(--brand);
}

.delivery-tracking-stage-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.delivery-tracking-stage.is-complete .delivery-tracking-stage-dot {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.delivery-tracking-stage.is-complete .delivery-tracking-stage-dot::after {
  content: "\2713";
}

.delivery-tracking-stage.is-current .delivery-tracking-stage-dot {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(181, 31, 36, 0.13);
}

.delivery-tracking-stage.is-current .delivery-tracking-stage-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.delivery-tracking-stage-copy {
  padding: 3px 0 12px;
}

.delivery-tracking-stage-copy strong {
  display: block;
  color: inherit;
  font-size: 14px;
  line-height: 1.25;
}

.delivery-tracking-stage.is-complete,
.delivery-tracking-stage.is-current {
  color: var(--ink);
}

.delivery-tracking-readiness {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff6ec;
  color: #6d451c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.delivery-tracking-readiness[hidden],
.delivery-tracking-courier[hidden],
.delivery-tracking-map[hidden],
.delivery-tracking-refresh-state[hidden] {
  display: none;
}

.delivery-tracking-courier {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.delivery-tracking-courier h3 {
  margin: 0 0 9px;
  font-size: 15px;
}

.delivery-tracking-courier dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.delivery-tracking-courier dl > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.delivery-tracking-courier dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.delivery-tracking-courier dd {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.delivery-tracking-map {
  margin-bottom: 16px;
}

.delivery-tracking-map-frame {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 190px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f4f1ed;
}

.delivery-tracking-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.delivery-tracking-map-link {
  display: grid;
  place-items: center;
  min-height: 48px;
  text-decoration: none;
}

.delivery-tracking-map > p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
}

.delivery-tracking-refresh-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.delivery-tracking-refresh-state button {
  border: 0;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.delivery-tracking-footer {
  padding: 12px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.delivery-tracking-footer .outline-action {
  width: 100%;
  min-height: 48px;
}

@media (max-width: 420px) {
  .delivery-tracking-dialog {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 18px;
  }

  .delivery-tracking-header {
    padding-inline: 16px;
  }

  .delivery-tracking-body {
    padding: 15px 16px 18px;
  }

  .delivery-tracking-overview {
    grid-template-columns: 1fr;
  }

  .delivery-tracking-footer {
    padding-inline: 16px;
  }
}

/* Persistent "Track your recent order" storefront banner ----------------- */
.track-recent-order {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 20px;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
  box-shadow: 0 8px 20px rgba(130, 20, 24, 0.22);
  overflow: hidden;
}

.track-recent-order[hidden] {
  display: none;
}

.track-recent-order-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 8px 14px 16px;
  border: none;
  background: none;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.track-recent-order-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.track-recent-order-icon svg {
  width: 22px;
  height: 22px;
}

.track-recent-order-copy {
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.track-recent-order-copy strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.track-recent-order-copy span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-recent-order-chevron {
  flex: 0 0 auto;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  padding: 0 4px;
}

.track-recent-order-dismiss {
  flex: 0 0 auto;
  width: 40px;
  border: none;
  background: rgba(0, 0, 0, 0.12);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.track-recent-order-dismiss:hover {
  background: rgba(0, 0, 0, 0.22);
}

@media (max-width: 480px) {
  .track-recent-order-main {
    gap: 11px;
    padding: 12px 6px 12px 13px;
  }

  .track-recent-order-icon {
    width: 34px;
    height: 34px;
  }

  .track-recent-order-copy strong {
    font-size: 14px;
  }
}

/* Delivery address / pickup info block ----------------------------------- */
.order-confirmation-address {
  width: 100%;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
}

.order-confirmation-address[hidden] {
  display: none;
}

.order-confirmation-address-label {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.order-confirmation-address-text {
  margin: 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.4;
}

/* Itemized order summary -------------------------------------------------- */
.order-confirmation-summary {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

.order-confirmation-summary[hidden] {
  display: none;
}

.order-confirmation-summary summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.order-confirmation-summary summary::after {
  content: "+";
  color: var(--brand);
  font-size: 18px;
  line-height: 1;
}

.order-confirmation-summary[open] summary::after {
  content: "\2212";
}

.order-confirmation-items {
  margin: 6px 0 0;
  padding: 8px 10px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(140px, 24dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.order-confirmation-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 650;
}

.order-confirmation-item-qty {
  color: var(--muted);
  font-weight: 800;
  margin-right: 2px;
}

@media (max-width: 760px) {
  .order-confirmation-dialog {
    width: min(440px, calc(100vw - 20px));
    height: auto;
    max-width: min(440px, calc(100vw - 20px));
    max-height: calc(100dvh - 24px);
    margin: auto;
    border-radius: 22px;
  }

  .order-confirmation-card {
    padding: 0;
  }

  .order-confirmation-header {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    column-gap: 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 8px;
  }

  .order-confirmation-check {
    grid-row: 1;
    width: 42px;
    height: 42px;
    margin: 0;
    font-size: 21px;
  }

  .order-confirmation-heading {
    grid-column: 2;
    text-align: left;
  }

  .order-confirmation-card h2 {
    font-size: 20px;
  }

  .order-confirmation-greeting {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.3;
  }

  .order-confirmation-details {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 7px 10px;
  }

  .order-confirmation-content {
    padding: 10px 14px;
  }

  .order-confirmation-actions {
    gap: 7px;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .order-confirmation-note {
    font-size: 11.5px;
    line-height: 1.3;
  }

  .order-confirmation-close {
    min-height: 46px;
  }

  .order-tracking-label {
    font-size: 9.5px;
  }
}

/* 2026-07 "You may also like" upsell carousel */
.upsell-section {
  margin: 28px 0 4px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

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

.upsell-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.upsell-nav {
  display: flex;
  gap: 8px;
}

.upsell-nav-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--brand);
  font-size: 20px;
  line-height: 1;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.upsell-nav-btn:hover:not(:disabled) {
  border-color: var(--brand);
}

.upsell-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.upsell-track {
  display: flex;
  gap: 14px;
  margin: 0 -2px;
  padding: 2px 2px 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.upsell-track::-webkit-scrollbar {
  display: none;
}

.upsell-card {
  position: relative;
  flex: 0 0 auto;
  width: 176px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(42, 33, 27, 0.06);
}

.upsell-card-image {
  height: 146px;
  background-image: var(--upsell-image);
  background-size: cover;
  background-position: center;
  background-color: var(--thumb-bg);
}

.upsell-card-body {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px 34px 12px 12px;
  flex: 1 1 auto;
}

.upsell-card-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.upsell-card-price {
  font-size: 13px;
  font-weight: 900;
  color: var(--brand-dark);
}

.upsell-add-btn {
  position: absolute;
  top: 124px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(181, 31, 36, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
}

.upsell-add-btn span {
  display: block;
  font-size: 18px;
  line-height: 1;
}

.upsell-add-btn:active {
  transform: scale(0.92);
}

.upsell-add-btn.added {
  background: #1d6a3a;
}

.upsell-add-btn:disabled {
  cursor: default;
}

@media (max-width: 760px) {
  .upsell-section {
    margin: 22px 0 4px;
    padding-top: 18px;
  }

  .upsell-nav {
    display: none;
  }

  .upsell-card {
    width: 158px;
  }

  .upsell-card-image {
    height: 130px;
  }

  .upsell-add-btn {
    top: 108px;
  }
}

/* 2026-07 premium auth dialogs (sign in / sign up / my profile) */
.auth-dialog .auth-form {
  display: flex;
  flex-direction: column;
  width: min(540px, 96vw);
  max-width: 100%;
  max-height: min(88vh, 720px);
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* v185: when a dialog swaps between two .auth-form panels (e.g. the Delete
   account form -> the "Account deleted" success panel with its Back to menu
   button), the display:flex rule above is an author rule that overrides the UA
   [hidden]{display:none}. Without this override the form never collapses and
   the success panel renders below it (no visible button / dead-end). */
.auth-dialog .auth-form[hidden] {
  display: none;
}

.auth-form-header {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-rows: auto auto;
  column-gap: 0;
  padding: 22px 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.auth-form-header .close-button {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: center;
  top: auto;
  left: auto;
  right: auto;
  margin-top: -5px;
  transform: none;
}

.auth-form-header h2 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.08;
  padding: 0;
}

.auth-form-header p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.auth-form-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 32px 6px;
  box-sizing: border-box;
}

.auth-form-body label {
  display: grid;
  gap: 3px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Two-column pairing so short fields sit side-by-side (v135) -- keeps the
   signup form short enough to fit without a long scroll. Stays 2-up even on
   phones because the underline inputs below are compact. */
.auth-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

/* Underline ("bottom line") input design (v135), mirroring the clean,
   minimal checkout field feel: no boxed border/shadow, just a bottom rule
   that turns brand-colored on focus. Much shorter vertically than the old
   48px boxed inputs, which is what was forcing the signup form to scroll. */
.auth-form-body input,
.auth-form-body textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  border: 0;
  border-bottom: 1.5px solid var(--field-border);
  border-radius: 0;
  padding: 6px 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

/* The marketing opt-in checkbox is auto-width, not a full field. */
.auth-form-body input[type="checkbox"] {
  width: auto;
  min-height: 0;
  border: 0;
  padding: 0;
  box-shadow: none;
  background: none;
}

/* Marketing opt-in row: checkbox beside its consent copy, not stacked. The
   consent sentence must stay readable, so opt out of the small uppercase
   micro-label treatment applied to the field labels above. */
.auth-marketing-optin {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.35;
}

.auth-marketing-optin input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.auth-form-body textarea {
  min-height: 44px;
  resize: vertical;
}

.auth-form-body input:hover:not(:disabled),
.auth-form-body textarea:hover:not(:disabled) {
  border-bottom-color: var(--field-border-hover);
}

.auth-form-body input:focus,
.auth-form-body textarea:focus {
  outline: none;
  border-bottom-color: var(--brand);
  box-shadow: 0 1.5px 0 0 var(--brand);
}

.auth-form-body input.field-invalid,
.auth-form-body textarea.field-invalid,
.auth-form-body input[aria-invalid="true"],
.auth-form-body textarea[aria-invalid="true"] {
  border-bottom-color: var(--field-invalid);
  box-shadow: 0 1px 0 var(--field-invalid);
}

.auth-form-body input:disabled,
.auth-form-body textarea:disabled {
  background: transparent;
  border-bottom-style: dashed;
  color: #a99d8d;
  -webkit-text-fill-color: #a99d8d;
}

.auth-form-body .address-row {
  max-width: 100%;
}

.auth-address-section {
  box-sizing: border-box;
  max-width: 100%;
  margin: 2px 0 12px;
  padding: 4px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.auth-address-section h3 {
  margin: 12px 0 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-dark);
}

.auth-form-body .dialog-status {
  margin: 0;
  min-height: 0;
}

.auth-form-body .dialog-status:not(:empty) {
  margin-top: 4px;
  margin-bottom: 8px;
}

.auth-form-footer {
  display: grid;
  gap: 10px;
  padding: 16px 32px 26px;
  border-top: 1px solid var(--line);
}

.auth-form-footer .primary-action {
  min-height: 50px;
  font-size: 14px;
}

/* Delete-account dialog: a destructive primary + a neutral cancel, plus the
   "what happens" bullet list. */
.auth-form-footer .danger-action {
  min-height: 50px;
  border: 0;
  border-radius: 7px;
  padding: 14px 18px;
  background: #b22222;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.15s ease;
}

.auth-form-footer .danger-action:hover:not(:disabled),
.auth-form-footer .danger-action:focus-visible:not(:disabled) {
  background: #8f1a1a;
}

.auth-form-footer .danger-action:disabled {
  background: #d9a6a6;
  cursor: not-allowed;
}

.auth-form-footer .secondary-action {
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 14px 18px;
  background: #ffffff;
  color: #30251f;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.auth-form-footer .secondary-action:hover,
.auth-form-footer .secondary-action:focus-visible {
  background: var(--row-highlight);
}

.delete-account-points {
  margin: 0 0 18px;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: #5b524b;
  font-size: 14px;
  line-height: 1.45;
}

.delete-account-points li {
  margin: 0;
}

.auth-form-footer .auth-switch-link {
  margin: 0;
  text-align: center;
}

@media (max-width: 760px) {
  .auth-dialog .auth-form {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
  }

  .auth-form-header {
    /* Sign in / Sign up / My profile / My orders share the full-screen
       .checkout-dialog mobile treatment (inset: 0), so this header is
       top-anchored -- add the status-bar inset so the title clears the iOS
       Dynamic Island (v124). 0px fallback = no-op on desktop/Android. */
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 8px 16px;
  }

  .auth-form-header h2 {
    font-size: 22px;
  }

  .auth-form-body {
    padding: 14px 20px 6px;
  }

  .auth-form-footer {
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  }
}

/* 2026-07 "My orders" order history */
/* 2026-07 Chipotle-style loyalty: a tappable points tracker (progress bar   */
/* toward the next $20 reward) on the account/orders screen, and the detail  */
/* view it opens (how it works + points per past order).                     */
.loyalty-tracker {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 18px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff6e5 0%, #ffe9c7 100%);
  border: 1px solid #f0d9ad;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-appearance: none;
  appearance: none;
}

.loyalty-tracker:hover {
  box-shadow: 0 6px 18px rgba(122, 74, 0, 0.14);
}

.loyalty-tracker:active {
  transform: scale(0.995);
}

.loyalty-tracker-head,
.loyalty-detail-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.loyalty-tracker-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.loyalty-tracker-heading {
  font-size: 15px;
  font-weight: 800;
  color: #7a4a00;
}

.loyalty-points-count {
  font-size: 13px;
  font-weight: 700;
  color: #9a6b1f;
  white-space: nowrap;
}

.loyalty-points-count strong {
  font-size: 18px;
  color: #7a4a00;
}

.loyalty-badge {
  font-size: 11px;
  font-weight: 800;
  color: #7a4a00;
  background: #ffd587;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Progress bar: points earned toward the next reward. */
.loyalty-progress-bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #f3e2c2;
  overflow: hidden;
  margin-bottom: 8px;
}

.loyalty-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  min-width: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5b301 0%, #e8890b 100%);
  transition: width 0.4s ease;
}

.loyalty-progress-scale {
  display: none;
}

.loyalty-progress-text {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #7a4a00;
}

.loyalty-tracker-cta {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--brand-red, #c8102e);
}

.loyalty-reward {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px dashed #f0b95a;
  margin-top: 10px;
}

.loyalty-reward strong {
  color: #7a4a00;
  font-size: 13px;
}

.loyalty-reward code {
  font-weight: 800;
  color: var(--brand-red, #c8102e);
}

/* Loyalty detail view (opened from the tracker). */
.loyalty-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.loyalty-back {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-red, #c8102e);
  cursor: pointer;
}

.loyalty-detail-hero {
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff6e5 0%, #ffe9c7 100%);
  border: 1px solid #f0d9ad;
}

.loyalty-how h4,
.loyalty-history h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink, #3a2d23);
}

.loyalty-how ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.loyalty-how li {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted, #665f58);
}

.loyalty-how li strong {
  color: var(--ink, #3a2d23);
}

.loyalty-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loyalty-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #faf8f5;
  border: 1px solid #eceae6;
}

.loyalty-history-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.loyalty-history-main strong {
  font-size: 14px;
  color: var(--ink, #3a2d23);
}

.loyalty-history-main small {
  font-size: 12px;
  color: var(--muted, #665f58);
}

.loyalty-history-pts {
  font-size: 14px;
  font-weight: 800;
  color: #b06f00;
  white-space: nowrap;
}

.orders-state {
  padding: 34px 4px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.orders-state-error {
  color: #b22222;
}

.orders-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.order-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.order-row-summary {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 0;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.order-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.order-row-main strong {
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-row-main small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.order-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.order-row-meta strong {
  font-size: 14px;
  color: var(--brand-dark);
}

.order-status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--row-highlight);
  color: #8a5a20;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.order-row-chevron {
  color: #7b7068;
  font-size: 20px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.order-row.expanded .order-row-chevron {
  transform: rotate(90deg);
}

.order-row-detail {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--line);
  background: #ffffff;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}

.order-detail-items {
  list-style: none;
  margin: 12px 0 10px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.order-detail-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.order-detail-empty {
  color: var(--muted);
  font-weight: 600;
}

.order-detail-meta {
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 650;
}

.order-detail-meta strong {
  color: var(--ink);
}

.order-detail-track-link {
  display: inline-block;
  margin: 0 0 10px;
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
}

.order-detail-track-link:hover {
  text-decoration: underline;
}

.order-detail-totals {
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
}

.order-detail-totals strong {
  color: var(--brand-dark);
  font-size: 14px;
}

@media (max-width: 760px) {
  .order-row-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 14px;
  }

  .order-row-chevron {
    grid-row: 1;
  }

  .order-row-meta {
    grid-column: 1 / -1;
    justify-content: space-between;
    margin-top: 4px;
  }

  .order-detail-item,
  .order-detail-meta,
  .order-detail-totals {
    font-size: 12px;
  }
}

/* 2026-07 paid extra-flavour add-ons (e.g. Extra Cheese, Feta) */
.extra-flavour-price {
  display: inline-block;
  margin-top: 2px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

/* v183: native app launch splash. A clean white branded screen shown briefly
   inside the Capacitor app before the landing page reveals. Removed instantly
   on the normal website by the inline script in index.html, so it never adds
   the .app-splash-active class or affects desktop/web behavior. */
html.app-splash-active,
html.app-splash-active body {
  overflow: hidden;
}

.app-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #ffffff;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  opacity: 1;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.app-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-splash-glow {
  position: absolute;
  width: min(120vw, 620px);
  height: min(120vw, 620px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(193, 39, 45, 0.1),
    rgba(224, 149, 43, 0.06) 45%,
    rgba(255, 255, 255, 0) 70%
  );
  animation: appSplashGlow 2.4s ease-in-out infinite;
}

.app-splash-inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.app-splash-logo {
  width: min(64vw, 260px);
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(120, 20, 20, 0.18));
  animation: appSplashLogo 0.8s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.app-splash-tagline {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #b0402a;
  opacity: 0;
  animation: appSplashFadeUp 0.6s ease 0.35s both;
}

.app-splash-dots {
  display: inline-flex;
  gap: 7px;
  opacity: 0;
  animation: appSplashFadeUp 0.6s ease 0.55s both;
}

.app-splash-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-red, #c1272d);
  animation: appSplashDot 1s ease-in-out infinite;
}

.app-splash-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.app-splash-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes appSplashLogo {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes appSplashFadeUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes appSplashDot {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

@keyframes appSplashGlow {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-splash,
  .app-splash-glow,
  .app-splash-logo,
  .app-splash-tagline,
  .app-splash-dots,
  .app-splash-dots i {
    animation: none;
  }
  .app-splash-tagline,
  .app-splash-dots {
    opacity: 1;
  }
}

/* v184: the mobile drawer's account rows + sign-out button set `display:flex`,
   which (as an author rule) overrides the UA `[hidden]{display:none}` -- so
   they stayed visible for signed-out visitors. Restore hidden behaviour so the
   Account group and Sign out only appear when signed in. */
.mobile-menu-group[hidden],
.mobile-menu-signout[hidden] {
  display: none;
}

/* v184: Delete account now lives inside My profile (a "danger zone" at the
   bottom of the profile dialog) instead of the account menus. */
.profile-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #f0d6d6;
  border-radius: 14px;
  background: #fdf6f6;
}

.profile-danger-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profile-danger-copy strong {
  font-size: 14px;
  font-weight: 800;
  color: #a5231b;
}

.profile-danger-copy span {
  font-size: 12px;
  color: #9a7b78;
  line-height: 1.35;
}

.profile-danger-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid #e6b9b9;
  border-radius: 999px;
  background: #ffffff;
  color: #b3261e;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease;
}

.profile-danger-btn svg {
  width: 16px;
  height: 16px;
}

.profile-danger-btn:hover,
.profile-danger-btn:focus-visible {
  background: #fdecec;
  border-color: #d99a9a;
  outline: none;
}

.profile-danger-btn:active {
  transform: scale(0.98);
}

@media (max-width: 480px) {
  .profile-danger-zone {
    flex-direction: column;
    align-items: stretch;
  }
  .profile-danger-btn {
    justify-content: center;
  }
}

/* =====================================================================
   v186 - Modal system polish
   Richer backdrop (dim + blur), a tasteful entrance animation for the
   account / start / info dialogs, roomier desktop sizing (especially
   My orders, which previously looked tiny), and colour-coded order
   status pills. Scoped so the checkout wizard's own behaviour and the
   mobile full-screen dialog layouts are untouched.
   ===================================================================== */

/* Backdrop: soft top-down dim + blur so the modal reads as a focused layer. */
dialog::backdrop {
  background: radial-gradient(
    130% 130% at 50% 0%,
    rgba(30, 19, 16, 0.5),
    rgba(14, 9, 8, 0.64)
  );
  -webkit-backdrop-filter: blur(5px) saturate(115%);
  backdrop-filter: blur(5px) saturate(115%);
}

@keyframes tphDialogPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

/* Entrance animation for the account/start/info dialogs (leaves the checkout
   wizard, order confirmation, and tracking map to their own treatments). */
.auth-dialog[open],
.order-dialog[open],
.info-dialog[open] {
  animation: tphDialogPop 0.26s cubic-bezier(0.2, 0.9, 0.28, 1);
}

.auth-dialog[open]::backdrop,
.order-dialog[open]::backdrop,
.info-dialog[open]::backdrop {
  animation: tphBackdropFade 0.3s ease both;
}

/* Roomier, more confident sizing on desktop/laptop only -- the mobile
   full-screen sheet layout (max-width: 760px) is intentionally left as-is. */
@media (min-width: 761px) {
  .auth-dialog .auth-form {
    width: min(580px, 94vw);
  }

  /* My orders holds a scrollable list, so give it more width and a minimum
     body height so a short history no longer looks sparse. */
  #ordersDialog .auth-form {
    width: min(680px, 94vw);
    max-height: min(86vh, 800px);
  }

  #ordersDialog .auth-form-body {
    min-height: 340px;
  }
}

/* My orders list: elevate the rows into tappable cards with hover feedback. */
.order-row {
  border-color: #ece4db;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(30, 20, 14, 0.05);
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

.order-row:hover {
  border-color: #e0d4c7;
  box-shadow: 0 10px 22px -12px rgba(30, 20, 14, 0.24);
}

.order-row.expanded {
  border-color: #e0d4c7;
  box-shadow: 0 12px 28px -14px rgba(30, 20, 14, 0.28);
}

.order-row-meta strong {
  font-size: 15px;
}

/* Colour-coded status pills (default keeps the neutral highlight). */
.order-status-pill--paid {
  background: #e6f6ec;
  color: #1f7a3d;
}

.order-status-pill--pending {
  background: #fdf0d8;
  color: #9a6a12;
}

.order-status-pill--cancelled {
  background: #fbe6e6;
  color: #b22222;
}

@media (prefers-reduced-motion: reduce) {
  .auth-dialog[open],
  .order-dialog[open],
  .info-dialog[open],
  .auth-dialog[open]::backdrop,
  .order-dialog[open]::backdrop,
  .info-dialog[open]::backdrop {
    animation: none;
  }
}

/* =============================================================================
   2026-07 App download promotion
   ============================================================================= */
.app-download-promo {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(330px, 1.08fr) minmax(230px, 0.72fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin: clamp(56px, 8vw, 104px) 0 clamp(16px, 3vw, 40px);
  padding: clamp(34px, 5vw, 72px);
  overflow: hidden;
  border: 1px solid rgba(131, 30, 35, 0.1);
  border-radius: clamp(24px, 3vw, 36px);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 235, 0.95)),
    var(--paper-warm);
  box-shadow: 0 28px 80px -50px rgba(72, 35, 25, 0.4);
}

.storefront.category-active .app-download-promo {
  display: none;
}

.app-download-promo::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.66) 43%, rgba(255, 250, 242, 0.45) 100%),
    repeating-linear-gradient(135deg, transparent 0 20px, rgba(181, 31, 36, 0.025) 20px 21px);
}

.app-download-promo::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(620px, 55vw);
  aspect-ratio: 1;
  left: 48%;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181, 31, 36, 0.13), rgba(224, 149, 43, 0.06) 46%, transparent 70%);
  transform: translate(-50%, -50%);
}

.app-download-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.app-download-orb-one {
  width: 180px;
  height: 180px;
  right: -80px;
  top: -90px;
  border: 32px solid rgba(181, 31, 36, 0.05);
}

.app-download-orb-two {
  width: 90px;
  height: 90px;
  left: 41%;
  bottom: -55px;
  background: rgba(224, 149, 43, 0.08);
}

.app-download-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 18px;
}

.app-download-eyebrow {
  color: var(--brand);
  letter-spacing: 0.13em;
}

.app-download-copy h2 {
  margin: 0;
  max-width: 11ch;
  color: var(--ink);
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: clamp(2.1rem, 3.5vw, 3.8rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.app-download-copy > p {
  max-width: 42ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.65;
}

.app-market-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.app-market-badge {
  position: relative;
  min-width: 158px;
  min-height: 52px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background: #111111;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.7);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-standard);
}

.app-market-badge:hover,
.app-market-badge:focus-visible {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.75);
}

.app-market-badge:focus-visible {
  outline: 3px solid rgba(181, 31, 36, 0.28);
  outline-offset: 3px;
}

.app-market-badge.is-coming-soon {
  cursor: default;
  opacity: 0.78;
  pointer-events: none;
}

.app-market-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 31px;
}

.app-market-icon-apple {
  width: 27px;
}

.app-market-badge > span:not(.app-market-coming-soon) {
  display: grid;
  gap: 0;
  text-align: left;
}

.app-market-badge small {
  color: inherit;
  font-size: 8px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: 0.08em;
}

.app-market-badge strong {
  color: inherit;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
}

.app-market-coming-soon {
  position: absolute;
  right: -28px;
  top: 9px;
  width: 98px;
  padding: 3px 0;
  background: var(--accent);
  color: #2f1f13;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(38deg);
}

.app-market-coming-soon[hidden] {
  display: none;
}

.app-download-availability {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 11px !important;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.app-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ca35c;
  box-shadow: 0 0 0 4px rgba(44, 163, 92, 0.12);
  animation: appLivePulse 2.4s ease-in-out infinite;
}

.app-device-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 460px;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.app-device {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  border: 5px solid #1c1816;
  border-radius: 34px;
  background: #171412;
  box-shadow:
    0 36px 52px -30px rgba(26, 13, 10, 0.48),
    0 8px 18px -10px rgba(26, 13, 10, 0.3);
}

.app-device-main {
  z-index: 2;
  width: 220px;
  height: 438px;
  transform: rotate(2.5deg) translateX(38px);
}

.app-device-back {
  z-index: 1;
  width: 176px;
  height: 350px;
  transform: rotate(-9deg) translate(-86px, 27px);
  opacity: 0.97;
}

.app-device-speaker {
  position: absolute;
  z-index: 4;
  top: 7px;
  left: 50%;
  width: 38%;
  height: 14px;
  border-radius: 0 0 10px 10px;
  background: #171412;
  transform: translateX(-50%);
}

.app-device-screen {
  position: absolute;
  inset: 4px;
  overflow: hidden;
  border-radius: 26px;
  background: #ffffff;
}

.app-mini-status {
  height: 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 11px 0;
  color: #2b211c;
  font-size: 6px;
  font-weight: 850;
}

.app-mini-header {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 12px 6px;
}

.app-mini-header img,
.app-device-screen-orders > img {
  width: 66px;
  height: auto;
  object-fit: contain;
}

.app-mini-header > span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f6eee9;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
}

.app-mini-hero {
  height: 144px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  margin: 0 9px 11px;
  padding: 12px;
  overflow: hidden;
  border-radius: 17px;
  background-position: center;
  background-size: cover;
  color: #ffffff;
  box-shadow: inset 0 -80px 60px -35px rgba(17, 8, 5, 0.9);
}

.app-mini-hero span {
  align-self: flex-start;
  padding: 3px 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #24140c;
  font-size: 5px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.app-mini-hero strong {
  color: inherit;
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: 18px;
  line-height: 0.96;
}

.app-mini-kicker {
  display: block;
  padding: 0 11px 7px;
  color: #6b5e54;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-mini-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 0 9px;
}

.app-mini-products span {
  height: 93px;
  border-radius: 12px;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 -25px 24px -22px rgba(0, 0, 0, 0.55);
}

.app-mini-nav {
  position: absolute;
  inset: auto 0 0;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #eee7e2;
  background: rgba(255, 255, 255, 0.96);
}

.app-mini-nav i {
  width: 13px;
  height: 13px;
  border: 2px solid #b7aaa0;
  border-radius: 4px;
}

.app-mini-nav i:first-child {
  border-color: var(--brand);
  background: rgba(181, 31, 36, 0.1);
}

.app-device-screen-orders {
  padding: 0 9px;
}

.app-device-screen-orders > img {
  display: block;
  margin: 9px auto 18px;
}

.app-device-screen-orders .app-mini-kicker {
  padding: 0 1px 8px;
  color: var(--ink);
  font-size: 9px;
  text-transform: none;
}

.app-mini-order {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 7px;
  border-radius: 10px;
  background: #edf8f1;
}

.app-mini-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2ca35c;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
}

.app-mini-order > span:last-child {
  display: grid;
  gap: 2px;
}

.app-mini-order strong {
  color: #215c36;
  font-size: 7px;
}

.app-mini-order small {
  color: #5c7d67;
  font-size: 5.5px;
}

.app-mini-line {
  width: 92%;
  height: 6px;
  margin: 16px 2px 0;
  border-radius: 999px;
  background: #e9e1dc;
}

.app-mini-line.short {
  width: 64%;
  margin-top: 7px;
}

.app-mini-button {
  position: absolute;
  inset: auto 10px 12px;
  padding: 9px;
  border-radius: 9px;
  background: var(--brand);
  color: #ffffff;
  font-size: 7px;
  font-weight: 850;
  text-align: center;
}

.app-device-float-card {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 2px;
  min-width: 128px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 34px -22px rgba(34, 18, 12, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: appCardFloat 4.6s ease-in-out infinite;
}

.app-device-float-card strong {
  color: var(--brand-dark);
  font-size: 10px;
}

.app-device-float-card small {
  color: var(--ink-soft);
  font-size: 7px;
}

.app-device-float-rewards {
  top: 45px;
  right: -2px;
}

.app-device-float-fast {
  left: -10px;
  bottom: 42px;
  animation-delay: -2.2s;
}

.app-download-benefits {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  padding: clamp(22px, 2.5vw, 32px);
  border: 1px solid rgba(131, 30, 35, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 20px 44px -36px rgba(73, 36, 25, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.app-benefit-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--brand-tint);
  color: var(--brand);
}

.app-benefit-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-download-benefits h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.05;
}

.app-download-benefits ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-download-benefits li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.app-download-benefits li span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf7ef;
  color: #23834a;
  font-size: 10px;
  font-weight: 900;
}

.app-download-benefits > p {
  margin: 2px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

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

@keyframes appLivePulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(44, 163, 92, 0.12);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(44, 163, 92, 0.02);
  }
}

@media (max-width: 1160px) {
  .app-download-promo {
    grid-template-columns: minmax(260px, 0.9fr) minmax(340px, 1.1fr);
  }

  .app-download-benefits {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(180px, 0.6fr) minmax(320px, 1fr);
    align-items: center;
  }

  .app-download-benefits ul {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .app-download-benefits > p {
    grid-column: 2;
    padding-top: 10px;
  }
}

@media (max-width: 800px) {
  .app-download-promo {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 34px clamp(20px, 6vw, 40px);
  }

  .app-download-copy {
    justify-items: center;
    text-align: center;
  }

  .app-download-copy h2,
  .app-download-copy > p {
    max-width: 620px;
  }

  .app-market-links {
    justify-content: center;
  }

  .app-device-stage {
    min-height: 440px;
    margin: -4px 0;
  }

  .app-download-benefits {
    grid-column: auto;
    grid-template-columns: auto minmax(0, 1fr);
    text-align: left;
  }

  .app-download-benefits ul {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .app-download-benefits > p {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .app-download-promo {
    margin-top: 48px;
    border-radius: 24px;
  }

  .app-download-copy h2 {
    font-size: clamp(2rem, 11vw, 2.8rem);
  }

  .app-market-links {
    width: 100%;
  }

  .app-market-badge {
    width: min(100%, 220px);
    justify-content: flex-start;
  }

  .app-download-availability {
    flex-wrap: wrap;
    justify-content: center;
  }

  .app-device-stage {
    width: calc(100% + 20px);
    min-height: 390px;
    margin-left: -10px;
    transform: scale(0.88);
    transform-origin: center;
  }

  .app-device-main {
    transform: rotate(2.5deg) translateX(28px);
  }

  .app-device-back {
    transform: rotate(-9deg) translate(-70px, 27px);
  }

  .app-device-float-rewards {
    right: 4px;
  }

  .app-device-float-fast {
    left: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-device-float-card,
  .app-live-dot {
    animation: none;
  }
}

/* =============================================================================
   v190 - Apple review: iPad customize-page usability
   =============================================================================
   At iPad widths the two-column topping layout leaves roughly 390px for the
   topping grid. A higher-specificity desktop rule was still forcing four
   columns there, producing ~86px cards and crushing quantity/placement
   controls together. Keep the live pizza preview alongside the choices, but
   allocate it a compact tablet column and guarantee comfortably sized cards
   and controls. Phone (<=760px) and desktop (>1180px) layouts are untouched. */
@media (min-width: 761px) and (max-width: 1180px) {
  .product-config-page .builder-step-panel .topping-config-layout {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: 24px;
    align-items: start;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    align-items: stretch;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice {
    min-height: 320px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-footer {
    min-height: 52px;
    padding: 0 12px 8px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-qty-stepper {
    gap: 8px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-qty-stepper button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 20px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-qty-stepper span {
    min-width: 16px;
    font-size: 17px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-placement {
    min-height: 82px;
    padding: 6px 10px 10px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-placement-placeholder {
    min-height: 44px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.2;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion {
    min-height: 44px;
    padding: 7px 5px;
  }

  .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion span {
    font-size: 11px;
  }
}

/* v191 - Full iPad customizer touch-target audit. These shared controls appear
   across pizza, wings, pita, salad/fries, drink and upsell flows. Their visual
   buttons previously ranged from 24px to 38px, below Apple's 44px target. */
@media (min-width: 761px) and (max-width: 1180px) {
  .product-config-page .config-back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 4px;
  }

  .product-config-page .config-order-panel .quantity-control button,
  .product-config-page .topping-preview-qty button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .product-config-page .upsell-nav-btn,
  .product-config-page .upsell-add-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .product-config-page .upsell-add-btn {
    top: 118px;
    right: 8px;
  }

  .product-config-page .upsell-add-btn span {
    font-size: 20px;
  }
}

/* =============================================================================
   v192 - Native iPhone/iPad viewport integration
   =============================================================================
   The native shell hides the website header and its bottom tab bar is hidden
   while a product is being configured. The shared web-builder rules assumed
   both were still visible, which put Back under the iOS status area, left the
   mobile pizza preview pinned like a second header, and floated the collapsed
   cart above an empty tab-bar-sized gap. Keep these corrections app-only. */
body.native-v2 {
  --native-safe-top: env(safe-area-inset-top, 0px);
  --native-safe-right: env(safe-area-inset-right, 0px);
  --native-safe-bottom: env(safe-area-inset-bottom, 0px);
  --native-safe-left: env(safe-area-inset-left, 0px);
  padding-bottom: calc(var(--native-tab-height) + var(--native-safe-bottom));
}

body.native-v2 .native-app-tabbar {
  right: 0;
  bottom: 0;
  left: 0;
  min-height: calc(var(--native-tab-height) + var(--native-safe-bottom));
  padding:
    6px
    max(8px, var(--native-safe-right))
    calc(6px + var(--native-safe-bottom))
    max(8px, var(--native-safe-left));
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 22px 22px 0 0;
}

body.native-v2:not(.config-active) .cart-panel {
  bottom: calc(var(--native-tab-height) + var(--native-safe-bottom));
}

body.native-v2.cart-fullscreen-open .cart-panel {
  bottom: 0;
}

body.native-v2 .cart-panel.cart-empty:not(.cart-open) {
  display: none !important;
}

body.native-v2.cart-fullscreen-open .cart-card {
  padding-bottom: calc(14px + var(--native-safe-bottom));
}

body.native-v2.config-active {
  padding-bottom: 0;
}

body.native-v2.config-active .cart-panel {
  display: none !important;
}

body.native-v2.config-active .product-config-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(104px + var(--native-safe-bottom));
}

body.native-v2.config-active .config-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  padding-top: calc(12px + var(--native-safe-top));
}

body.native-v2.config-active .config-back {
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  body.native-v2.pizza-builder-active .product-config-page .pizza-builder .mobile-builder-preview {
    position: relative;
    top: auto;
    z-index: 1;
    max-height: none;
    overflow: visible;
    transition: none;
  }

  body.native-v2.pizza-builder-active .product-config-page .pizza-builder .mobile-builder-add,
  body.native-v2.wings-builder-active .product-config-page .wing-builder .mobile-builder-add {
    bottom: calc(12px + var(--native-safe-bottom));
  }
}

@media (min-width: 720px) {
  body.native-v2 .native-app-tabbar {
    right: 50%;
    left: auto;
    width: min(620px, calc(100vw - 32px));
    transform: translateX(50%);
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  body.native-v2.config-active .config-product-hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr);
    gap: 24px;
    margin-inline: 0;
    padding: 16px 0 24px;
  }

  body.native-v2.config-active .config-product-copy {
    grid-column: 1 / -1;
    text-align: center;
  }

  body.native-v2.config-active .config-product-copy #dialogDescription,
  body.native-v2.config-active .config-ingredient-line {
    margin-right: auto;
    margin-left: auto;
  }

  body.native-v2.config-active .config-product-image {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 340px);
  }

  body.native-v2.config-active .config-order-panel {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 1fr;
    width: 100%;
    align-self: center;
  }

  body.native-v2.config-active .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }

  body.native-v2.config-active .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-extra-price {
    display: none;
  }

  body.native-v2.config-active .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-footer {
    grid-template-columns: 1fr;
    justify-items: end;
  }
}

@media (min-width: 1025px) {
  body.native-v2.config-active .config-product-hero {
    /* Native tablet landscape uses a fixed 28px config-shell gutter. The
       shared desktop hero cancels a larger clamp() gutter, which otherwise
       pushes 18px past each edge at 1180px and relies on overflow clipping. */
    margin-inline: -28px;
  }
}

/* =============================================================================
   v193 - Native ordering typography and spacing
   =============================================================================
   Ordering is a scanning task: item names, descriptions, prices and actions
   need a neutral, high-x-height sans serif with a restrained type scale.
   Reserve Pizza House personality for colour, photography and short marketing
   moments instead of setting every heading/card title in display serif. */
body.native-v2 {
  --native-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --native-page-gutter: clamp(20px, 4vw, 32px);
  font-family: var(--native-font-sans);
  font-size: 16px;
  line-height: 1.5;
}

body.native-v2 .native-app-shell {
  padding-right: var(--native-page-gutter);
  padding-left: var(--native-page-gutter);
}

body.native-v2 .native-app-header {
  margin-right: calc(var(--native-page-gutter) * -1);
  margin-bottom: 24px;
  margin-left: calc(var(--native-page-gutter) * -1);
  padding-right: var(--native-page-gutter);
  padding-left: var(--native-page-gutter);
}

body.native-v2 .native-app-kicker,
body.native-v2 .native-app-section-heading span,
body.native-v2 .native-app-feature-copy > span,
body.native-v2 .native-app-rewards-top span {
  font-family: var(--native-font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.055em;
}

body.native-v2 .native-app-welcome {
  margin: 8px 0 28px;
}

body.native-v2 .native-app-welcome h1,
body.native-v2 .native-app-page-intro h1 {
  max-width: 15ch;
  margin: 8px 0 10px;
  font-family: var(--native-font-sans);
  font-size: clamp(30px, 7.6vw, 38px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.028em;
}

body.native-v2 .native-app-welcome > p,
body.native-v2 .native-app-page-intro > p {
  max-width: 42rem;
  color: #655b57;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

body.native-v2 .native-app-page-intro {
  margin: 24px 0 32px;
}

body.native-v2 .native-app-feature h2 {
  margin: 10px 0 12px;
  font-family: var(--native-font-sans);
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

body.native-v2 .native-app-feature p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 24px;
}

body.native-v2 .native-app-feature button,
body.native-v2 .native-app-again-body > button,
body.native-v2 .native-app-order-card-actions button,
body.native-v2 .native-app-state button,
body.native-v2 .native-app-account-actions button {
  font-family: var(--native-font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

body.native-v2 .native-app-section-heading {
  margin-bottom: 16px;
}

body.native-v2 .native-app-section-heading h2,
body.native-v2 .native-app-state h2,
body.native-v2 .native-app-account-card h2 {
  font-family: var(--native-font-sans);
  font-size: 22px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: -0.018em;
}

body.native-v2 .native-app-section-heading button {
  font-size: 14px;
  font-weight: 700;
}

body.native-v2 .native-app-deals,
body.native-v2 .native-app-rewards,
body.native-v2 .native-app-again {
  margin-bottom: 34px;
}

body.native-v2 .native-app-deal-track {
  gap: 16px;
  margin-right: calc(var(--native-page-gutter) * -1);
  padding-right: var(--native-page-gutter);
}

body.native-v2 .native-app-deal-card-copy,
body.native-v2 .native-app-offer-card-copy {
  gap: 7px;
  padding: 18px;
}

body.native-v2 .native-app-deal-card-copy > span,
body.native-v2 .native-app-offer-card-copy > span {
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.055em;
}

body.native-v2 .native-app-deal-card-copy strong,
body.native-v2 .native-app-offer-card-copy strong {
  font-family: var(--native-font-sans);
  font-size: 17px;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: -0.012em;
}

body.native-v2 .native-app-deal-card-copy small {
  font-size: 13px;
  line-height: 19px;
}

body.native-v2 .native-app-offer-card-copy small {
  font-size: 14px;
  line-height: 20px;
}

body.native-v2 .native-app-deal-card-copy b,
body.native-v2 .native-app-offer-card-copy b {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 800;
  line-height: 22px;
}

body.native-v2 .native-app-offers-grid,
body.native-v2 .native-app-orders-list {
  gap: 18px;
}

body.native-v2 .native-app-offer-card {
  min-height: 196px;
}

body.native-v2 .native-app-offer-card img {
  min-height: 196px;
}

body.native-v2 .native-app-offer-perks {
  gap: 14px;
  margin-top: 32px;
}

body.native-v2 .native-app-offer-perks article,
body.native-v2 .native-app-orders-list > .native-app-order-card,
body.native-v2 .native-app-state,
body.native-v2 .native-app-account-card {
  padding: 20px;
}

body.native-v2 .native-app-offer-perks strong {
  font-size: 16px;
  line-height: 22px;
}

body.native-v2 .native-app-offer-perks span,
body.native-v2 .native-app-state p,
body.native-v2 .native-app-account-card p,
body.native-v2 .native-app-order-card > p {
  font-size: 15px;
  line-height: 22px;
}

body.native-v2 .native-app-order-card-top span small,
body.native-v2 .native-app-profile-copy span,
body.native-v2 .native-app-account-reward span {
  font-size: 13px;
  line-height: 19px;
}

body.native-v2 .native-app-profile-avatar,
body.native-v2 .native-app-feature-stamp,
body.native-v2 .native-app-story h2 {
  font-family: var(--native-font-sans);
}

body.native-v2 .native-app-story h2 {
  font-size: clamp(26px, 6.5vw, 34px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

body.native-v2 .native-app-story p {
  font-size: 14px;
  line-height: 21px;
}

body.native-v2 .native-app-tabbar button span {
  font-family: var(--native-font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

body.native-v2.native-view-menu .featured-section .section-heading h2,
body.native-v2.native-view-menu .menu-header .section-heading h2 {
  font-family: var(--native-font-sans);
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

@media (max-width: 360px) {
  body.native-v2 {
    --native-page-gutter: 16px;
  }

  body.native-v2 .native-app-offer-card {
    grid-template-columns: 1fr;
  }

  body.native-v2 .native-app-offer-card img {
    height: 164px;
    min-height: 164px;
  }
}

/* =============================================================================
   v194 - Native Pizza House brand chrome
   =============================================================================
   Keep the app unmistakably ours with persistent house red, warm gold and
   cream across the status-area backdrop, header, navigation and key surfaces.
   This is an original Pizza House treatment, not a reproduction of another
   restaurant app's colour, layout or assets. */
body.native-v2 {
  --native-red: #991f26;
  --native-red-dark: #651016;
  --native-gold: #f4ba2f;
  --native-gold-light: #ffd86f;
  --native-cream: #fff6e5;
  --native-cream-soft: #fffbf3;
  --native-brand-shadow: 0 14px 34px rgba(101, 16, 22, 0.18);
  background:
    radial-gradient(circle at 96% 12%, rgba(244, 186, 47, 0.2), transparent 19rem),
    radial-gradient(circle at 0 72%, rgba(153, 31, 38, 0.07), transparent 23rem),
    #fff8ed;
}

body.native-v2 .storefront-content {
  padding-right: 0;
  padding-left: 0;
  background: transparent;
}

body.native-v2.native-view-menu .track-recent-order,
body.native-v2.native-view-menu .featured-section,
body.native-v2.native-view-menu .ordering-layout {
  width: min(calc(100% - (var(--native-page-gutter) * 2)), 1040px);
}

body.native-v2 .native-app-shell::before {
  position: fixed;
  z-index: 44;
  top: 0;
  right: 0;
  left: 0;
  height: var(--native-safe-top);
  background: linear-gradient(90deg, var(--native-gold), var(--native-gold-light));
  content: "";
  pointer-events: none;
}

body.native-v2.config-active .native-app-shell::before {
  display: none;
}

body.native-v2 .native-app-header {
  border-bottom: 3px solid var(--native-gold);
  background:
    radial-gradient(circle at 18% -120%, rgba(244, 186, 47, 0.34), transparent 58%),
    linear-gradient(118deg, var(--native-red-dark), var(--native-red));
  box-shadow: 0 12px 28px rgba(77, 8, 13, 0.2);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

body.native-v2.native-view-menu .native-app-header,
body.native-v2.native-view-offers .native-app-header,
body.native-v2.native-view-orders .native-app-header,
body.native-v2.native-view-account .native-app-header {
  border-bottom-color: var(--native-gold);
}

body.native-v2 .native-app-brand {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(255, 216, 111, 0.78);
  border-radius: 14px;
  background: var(--native-cream-soft);
  box-shadow: 0 6px 16px rgba(45, 4, 8, 0.2);
}

body.native-v2 .native-app-logo {
  width: 76px;
  height: 50px;
}

body.native-v2 .native-app-icon-btn {
  border-color: var(--native-gold-light);
  background: linear-gradient(180deg, var(--native-gold-light), var(--native-gold));
  color: var(--native-red-dark);
  box-shadow: 0 7px 18px rgba(47, 4, 7, 0.25);
}

body.native-v2 .native-app-icon-btn:active {
  background: var(--native-cream);
  transform: translateY(1px);
}

body.native-v2 .native-app-cart-badge {
  border-color: var(--native-gold);
  background: var(--native-red-dark);
  color: #ffffff;
}

body.native-v2 .native-app-tabbar {
  border-top: 3px solid var(--native-gold);
  background:
    radial-gradient(circle at 50% 145%, rgba(244, 186, 47, 0.2), transparent 48%),
    linear-gradient(112deg, #5d0d13, var(--native-red));
  box-shadow: 0 -12px 34px rgba(77, 8, 13, 0.24);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

body.native-v2 .native-app-tabbar button {
  color: #fff3dc;
}

body.native-v2 .native-app-tabbar button[aria-current="page"] {
  background: linear-gradient(180deg, var(--native-gold-light), var(--native-gold));
  color: var(--native-red-dark);
  box-shadow: 0 7px 16px rgba(48, 4, 8, 0.24);
}

body.native-v2 .native-app-tabbar button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -3px;
}

body.native-v2 .native-app-deal-card,
body.native-v2 .native-app-offer-card,
body.native-v2 .native-app-rewards,
body.native-v2 .native-app-again-body,
body.native-v2 .native-app-orders-list > .native-app-order-card,
body.native-v2 .native-app-state,
body.native-v2 .native-app-account-card,
body.native-v2 .native-app-offer-perks article {
  border-color: rgba(153, 31, 38, 0.18);
  background: linear-gradient(180deg, #fffefd, var(--native-cream-soft));
  box-shadow: 0 13px 30px rgba(101, 16, 22, 0.1);
}

body.native-v2 .native-app-offer-perks article {
  border-left-color: var(--native-gold);
}

body.native-v2.native-view-menu .featured-card,
body.native-v2.native-view-menu .category-card,
body.native-v2.native-view-menu .item-card {
  border-color: rgba(153, 31, 38, 0.18);
  box-shadow: 0 12px 26px rgba(101, 16, 22, 0.11);
}

body.native-v2 .native-app-order-card-actions button.primary,
body.native-v2 .native-app-account-actions button.primary {
  border-color: var(--native-red-dark);
  background: linear-gradient(118deg, var(--native-red-dark), var(--native-red));
  color: #ffffff;
  box-shadow: 0 7px 15px rgba(101, 16, 22, 0.2);
}

/* =============================================================================
   v195 - Native Menu starts with the menu
   =============================================================================
   House Deals already have dedicated, richer placements on Home and Offers.
   Avoid repeating the website's Featured Specials rail above the app menu so
   customers reach search and food categories immediately. */
body.native-v2.native-view-menu .featured-section {
  display: none !important;
}

body.native-v2.native-view-menu .menu-header {
  padding-top: 0;
  background: transparent;
}

/* =============================================================================
   v196 - Compact native cart bar
   =============================================================================
   The app tab bar already owns the iOS home-indicator inset. Do not add that
   same inset to the collapsed cart a second time: it made a 52px control look
   like an 80px banner. Empty carts stay out of the browsing viewport entirely,
   while a non-empty cart reserves enough document space to avoid covering the
   final menu card. */
body.native-v2 {
  --native-cart-bar-height: 52px;
}

body.native-v2.cart-has-items:not(.cart-fullscreen-open):not(.config-active) {
  padding-bottom: calc(
    var(--native-tab-height) +
    var(--native-safe-bottom) +
    var(--native-cart-bar-height) +
    12px
  );
}

body.native-v2 .cart-panel.cart-empty:not(.cart-open) {
  display: none !important;
}

body.native-v2:not(.config-active) .cart-drawer-bar {
  min-height: var(--native-cart-bar-height);
  padding:
    4px
    max(12px, var(--native-safe-right))
    4px
    max(12px, var(--native-safe-left));
  gap: 8px;
  border-top: 2px solid var(--native-gold);
  box-shadow: 0 -8px 22px rgba(101, 16, 22, 0.2);
}

body.native-v2 .cart-drawer-bar span:first-child {
  font-size: 14px;
  line-height: 18px;
}

body.native-v2 .cart-drawer-bar strong {
  font-size: 17px;
  line-height: 20px;
}

body.native-v2 .cart-drawer-action {
  padding: 6px 10px;
  font-size: 11px;
  line-height: 16px;
}

@media (max-width: 760px) {
  body.native-v2.cart-fullscreen-open .cart-card {
    padding-top: calc(14px + var(--native-safe-top));
  }

  body.native-v2.cart-fullscreen-open .cart-close {
    margin-top: calc(-14px - var(--native-safe-top));
    padding-top: calc(12px + var(--native-safe-top));
  }
}

@media (min-width: 761px) {
  body.native-v2:not(.config-active) .cart-panel {
    justify-items: center;
    padding: 0;
  }

  body.native-v2:not(.config-active) .cart-drawer-bar {
    width: min(620px, calc(100vw - 32px));
  }

  body.native-v2.cart-fullscreen-open {
    overflow: hidden;
  }

  body.native-v2.cart-fullscreen-open .cart-panel {
    inset: 0;
    align-content: center;
    justify-items: center;
    padding:
      max(24px, var(--native-safe-top))
      max(24px, var(--native-safe-right))
      max(24px, var(--native-safe-bottom))
      max(24px, var(--native-safe-left));
  }

  body.native-v2.cart-fullscreen-open .cart-panel::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0;
    background: rgba(36, 27, 24, 0.52);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  body.native-v2.cart-fullscreen-open .cart-card {
    z-index: 1;
    width: min(520px, 100%);
    max-height: min(720px, calc(100dvh - 48px));
    margin: 0;
    border-radius: 20px;
    padding-bottom: 18px;
    box-shadow: 0 28px 70px rgba(36, 16, 17, 0.34);
  }

  body.native-v2.cart-fullscreen-open .cart-drawer-bar {
    display: none;
  }
}

@media (max-width: 360px) {
  body.native-v2:not(.config-active) .cart-drawer-bar {
    gap: 6px;
  }

  body.native-v2 .cart-drawer-action {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 10px;
  }
}

/* Pass 2: keep category cards readable and every ordering control comfortably
   tappable without reverting to the oversized website-card treatment. */
body.native-v2 .storefront.category-active .item-title {
  font-family: var(--native-font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
}

body.native-v2 .storefront.category-active .item-summary {
  font-family: var(--native-font-sans);
  font-size: 13px;
  line-height: 18px;
}

body.native-v2 .storefront.category-active .item-price {
  font-family: var(--native-font-sans);
  font-size: 18px;
  line-height: 22px;
}

body.native-v2 .storefront.category-active .item-action-primary,
body.native-v2 .storefront.category-active .item-action-secondary {
  min-height: 44px;
  font-family: var(--native-font-sans);
  font-size: 12px;
  line-height: 16px;
}

@media (min-width: 761px) and (max-width: 1180px) {
  body.native-v2 .storefront.category-active .item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  body.native-v2 .storefront.category-active .menu-item {
    grid-template-columns: minmax(120px, 140px) minmax(0, 1fr);
    min-height: 220px;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(153, 31, 38, 0.16);
    border-radius: 16px;
  }

  body.native-v2 .storefront.category-active .item-image-panel,
  body.native-v2 .storefront.category-active .item-image {
    min-height: 160px;
    height: 160px;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  body.native-v2 .storefront.category-active .item-actions.item-actions-inline {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.native-v2 .storefront.category-active .item-qty-stepper {
    width: 100%;
    min-height: 44px;
    justify-content: space-between;
  }
}

@media (max-width: 760px) {
  body.native-v2 .storefront.category-active .menu-item {
    grid-template-columns: clamp(112px, 32vw, 140px) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(153, 31, 38, 0.16);
    border-radius: 16px;
  }

  body.native-v2 .storefront.category-active .item-image-panel,
  body.native-v2 .storefront.category-active .item-image {
    width: 100%;
    min-height: clamp(112px, 32vw, 140px);
    height: clamp(112px, 32vw, 140px);
    border-radius: 12px;
  }

  body.native-v2 .storefront.category-active .item-content {
    min-width: 0;
    gap: 6px;
  }

  body.native-v2 .storefront.category-active .item-title {
    font-weight: 700;
  }

  body.native-v2 .storefront.category-active .item-summary {
    -webkit-line-clamp: 3;
  }

  body.native-v2 .storefront.category-active .item-price {
    font-weight: 750;
  }

  body.native-v2 .storefront.category-active .item-actions,
  body.native-v2 .storefront.category-active .item-actions.item-actions-inline {
    gap: 6px;
  }

  body.native-v2 .storefront.category-active .item-action-primary,
  body.native-v2 .storefront.category-active .item-action-secondary {
    min-height: 44px;
    border-radius: 10px;
    padding: 7px 9px;
  }

  body.native-v2 .storefront.category-active .item-qty-stepper {
    min-height: 44px;
    gap: 0;
    padding: 0 3px;
    border-radius: 10px;
  }

  body.native-v2 .storefront.category-active .item-qty-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 360px) {
  body.native-v2 .storefront.category-active .item-actions.item-actions-inline {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.native-v2 .storefront.category-active .item-qty-stepper {
    width: 100%;
    justify-content: space-between;
  }

  body.native-v2.cart-fullscreen-open .cart-line {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  body.native-v2.cart-fullscreen-open .cart-line-media {
    width: 96px;
    height: 96px;
    padding: 6px;
  }

  body.native-v2.cart-fullscreen-open .cart-line-actions {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* Pass 3 follow-up: one native spacing owner, fully branded builder controls,
   and 44px interaction targets in every phone ordering flow. */
body.native-v2 {
  --native-tab-height: 75px;
  --brand: var(--native-red);
  --brand-dark: var(--native-red-dark);
  --gold: var(--native-gold);
}

body.native-v2 .native-app-shell {
  padding-top: var(--native-safe-top);
}

body.native-v2 .native-app-header {
  top: var(--native-safe-top);
}

body.native-v2.native-view-menu:not(.config-active) .storefront,
body.native-v2.native-view-menu:not(.config-active) .storefront .ordering-layout {
  padding-bottom: 0;
}

body.native-v2 .native-app-screen {
  animation: native-screen-in-native 0.16s ease-out both;
}

body.native-v2 .native-app-order-meta span {
  font-size: 12px;
  line-height: 16px;
}

body.native-v2 .storefront.category-active .menu-search-bar {
  display: none;
}

body.native-v2.config-active .product-config-page .builder-step-tabs button.active {
  border-color: var(--native-gold);
  background: linear-gradient(118deg, var(--native-red-dark), var(--native-red));
  color: #ffffff;
  box-shadow: inset 0 0 0 2px var(--native-gold);
}

body.native-v2.config-active .product-config-page .builder-step-panel .builder-topping-group .topping-choice.selected,
body.native-v2.config-active .product-config-page .topping-config-layout .topping-choice.selected {
  border-color: var(--native-red);
  box-shadow: inset 0 -4px 0 var(--native-red), 0 12px 26px rgba(101, 16, 22, 0.1);
}

body.native-v2.config-active .product-config-page .builder-step-panel .builder-topping-group .topping-choice.selected .topping-select-label,
body.native-v2.config-active .product-config-page .topping-config-layout .topping-choice.selected .topping-select-label {
  color: var(--native-red);
}

body.native-v2.config-active .product-config-page .builder-step-panel .builder-topping-group .topping-check,
body.native-v2.config-active .product-config-page .topping-config-layout .topping-check,
body.native-v2.config-active .product-config-page .builder-step-panel .builder-topping-group .topping-portion.active,
body.native-v2.config-active .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion.active {
  background: var(--native-red);
}

body.native-v2.config-active .topping-portion.active {
  color: var(--native-red);
}

body.native-v2.config-active .product-config-page .topping-config-layout .topping-portion.active .portion-icon {
  border-color: var(--native-red);
  box-shadow: 0 0 0 2px rgba(153, 31, 38, 0.16);
}

body.native-v2.config-active .portion-icon-left {
  background: linear-gradient(90deg, var(--native-red) 0 50%, #e9ece9 50% 100%) !important;
}

body.native-v2.config-active .portion-icon-whole {
  background: var(--native-red) !important;
}

body.native-v2.config-active .portion-icon-right {
  background: linear-gradient(90deg, #e9ece9 0 50%, var(--native-red) 50% 100%) !important;
}

@keyframes native-screen-in-native {
  from { opacity: 0.75; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  body.native-v2.config-active .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-qty-stepper button,
  body.native-v2.config-active .product-config-page .builder-step-panel .builder-topping-group .topping-qty-stepper button,
  body.native-v2.config-active .product-config-page .topping-preview-qty button,
  body.native-v2.config-active .product-config-page .wing-sauce-stepper button,
  body.native-v2.cart-fullscreen-open .cart-line-stepper button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  body.native-v2.config-active .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion,
  body.native-v2.config-active .product-config-page .builder-step-panel .builder-topping-group .topping-portion {
    min-height: 44px;
  }

  body.native-v2.config-active .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-portion span,
  body.native-v2.config-active .product-config-page .builder-step-panel .builder-topping-group .topping-portion span,
  body.native-v2.config-active .product-config-page .topping-config-layout .topping-portion small {
    font-size: 12px;
    line-height: 16px;
  }
}

@media (max-width: 390px) and (max-height: 700px) {
  body.native-v2 .native-app-welcome {
    margin-bottom: 18px;
  }

  body.native-v2 .native-app-feature {
    min-height: 320px;
  }

  body.native-v2 .native-app-feature-copy {
    padding: 18px;
  }

  body.native-v2.config-active.pizza-builder-active .product-config-page .pizza-builder .mobile-builder-add,
  body.native-v2.config-active.wings-builder-active .product-config-page .wing-builder .mobile-builder-add {
    position: sticky;
    right: auto;
    bottom: calc(12px + var(--native-safe-bottom));
    left: auto;
    width: 100%;
    margin-top: 14px;
  }
}

@media (max-width: 360px) {
  body.native-v2 .cart-drawer-action {
    font-size: 11px;
  }

  body.native-v2.config-active .product-config-page .builder-step-panel .topping-choice-grid,
  body.native-v2.config-active .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* v194 - Guided combo actions must never cover modifier controls.
   Multi-step deals use the guided navigation until the final step, so a
   floating Add button on the toppings step is both premature and obstructive.
   Keep the final action in normal document flow for every native phone and
   split-screen layout. */
body.native-v2.config-active.pizza-builder-active .product-config-page .pizza-builder.guided-combo > .mobile-builder-add {
  position: static;
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 18px 0 0;
  border-radius: 14px;
  box-shadow: none;
}

body.native-v2.config-active .product-config-page .wing-sauce-stepper button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 760px) {
  body.native-v2.config-active .product-config-page .pizza-builder.guided-combo {
    padding-bottom: calc(24px + var(--native-safe-bottom));
  }

  body.native-v2.config-active .product-config-page .builder-topping-group .builder-group-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 3px;
  }

  body.native-v2.config-active .product-config-page .builder-topping-group .builder-group-header h3 {
    font-size: 20px;
    line-height: 1.2;
  }

}

@media (min-width: 761px) and (max-width: 1024px) {
  body.native-v2.config-active .product-config-page .pizza-builder.guided-combo .builder-step-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v195 - App Store V1 review uses the regular storefront route rather than
   native-v2. Keep that shared customizer usable without changing the website's
   normal menu presentation. */
body:not(.native-v2).config-active .cart-panel {
  display: none !important;
}

body:not(.native-v2).config-active .product-config-page .pizza-builder.guided-combo > .mobile-builder-add {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 18px 0 0;
  border-radius: 14px;
  box-shadow: none;
}

body:not(.native-v2).config-active .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-qty-stepper button,
body:not(.native-v2).config-active .product-config-page .builder-step-panel .builder-topping-group .topping-qty-stepper button,
body:not(.native-v2).config-active .product-config-page .wing-sauce-stepper button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 1280px) {
  body:not(.native-v2).config-active .product-config-page .builder-step-panel .builder-topping-group .topping-choice-footer,
  body:not(.native-v2).config-active .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 6px;
  }

  body:not(.native-v2).config-active .product-config-page .builder-step-panel .builder-topping-group .topping-extra-price,
  body:not(.native-v2).config-active .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-extra-price {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 760px) {
  body:not(.native-v2).config-active .config-shell {
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
  }

  body:not(.native-v2).config-active .product-config-page .pizza-builder.guided-combo {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 480px) {
  body:not(.native-v2).config-active .product-config-page .wing-sauce-pound-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  body:not(.native-v2).config-active .product-config-page .wing-sauce-stepper {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  body:not(.native-v2).config-active .product-config-page .builder-step-panel .topping-choice-grid,
  body:not(.native-v2).config-active .product-config-page .builder-step-panel .topping-config-layout .builder-topping-group .topping-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* v196 - The 761-900px tablet header must reserve real space for the brand.
   The generic <=1120px layout let the signed-out account pill make the
   auto-sized actions column consume nearly the full row, shrinking the logo
   to a few pixels. Keep one compact row with an explicit brand track. */
@media (min-width: 761px) and (max-width: 900px) {
  .site-header {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding-inline: 20px;
  }

  .brand {
    width: 96px;
  }

  .brand-img {
    width: 96px;
    height: auto;
    max-width: 96px;
  }

  .header-actions {
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .auth-controls {
    order: 0;
    width: auto;
  }

  .delivery-location {
    gap: 6px;
  }

  .delivery-location-icon {
    width: 26px;
    height: 26px;
  }

  .delivery-location-copy strong {
    font-size: 14px;
  }

  .delivery-location-copy a,
  .header-search-btn,
  #headerOrderBtn {
    font-size: 12px;
  }

  .header-auth-control {
    gap: 5px;
  }

  .header-auth-icon {
    width: 30px;
    height: 30px;
  }

  .auth-controls .auth-btn {
    padding: 7px 9px;
  }

  .header-auth-copy span {
    display: none;
  }

  #headerOrderBtn {
    padding: 10px 12px;
  }
}

/* v197 - A configurable category card has one action, while the shared action
   grid reserves two columns. Center the single Customize action in the regular
   storefront without changing quick-add controls or the native V2 shell. */
body:not(.native-v2) .storefront.category-active
  .item-actions:not(.item-actions-inline) {
  width: min(100%, 368px);
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
}

/* v198 - Keep every regular category-card element on the same centered axis
   at phone and tablet widths. Native V2 keeps its dedicated card layout. */
@media (max-width: 900px) {
  body:not(.native-v2) .storefront.category-active .menu-item {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  body:not(.native-v2) .storefront.category-active .item-image-panel,
  body:not(.native-v2) .storefront.category-active .item-content {
    width: min(100%, 368px);
    justify-self: center;
  }

  body:not(.native-v2) .storefront.category-active .item-content {
    align-items: center;
    text-align: center;
  }

  body:not(.native-v2) .storefront.category-active .item-category-tag {
    align-self: center;
  }

  body:not(.native-v2) .storefront.category-active .item-title,
  body:not(.native-v2) .storefront.category-active .item-summary,
  body:not(.native-v2) .storefront.category-active .item-price {
    width: 100%;
    text-align: center;
  }

  body:not(.native-v2) .storefront.category-active .item-actions {
    justify-self: center;
  }

  body:not(.native-v2) .storefront.category-active
    .item-actions.item-actions-inline {
    justify-content: center;
  }
}

/* v199 - Compact tablet topping cards.
   The earlier Apple-review safety rules reserved 320px per card plus separate
   fixed-height footer and placement rows. That prevented collisions, but left
   a large amount of unused space. Keep real controls at least 44px, remove the
   redundant per-card "Included" copy (the group header already reports the
   allowance), and let each card size itself to its content. */
body.config-active
  .product-config-page
  .builder-step-panel
  .topping-config-layout
  .builder-topping-group
  .topping-portion {
  min-height: 44px;
}

@media (min-width: 761px) and (max-width: 1180px) {
  body.config-active
    .product-config-page
    .builder-step-panel
    .topping-config-layout
    .builder-topping-group
    .topping-choice-grid {
    align-items: start;
  }

  body.config-active
    .product-config-page
    .builder-step-panel
    .topping-config-layout
    .builder-topping-group
    .topping-choice {
    height: auto;
    min-height: 0;
    align-self: start;
  }

  body.config-active
    .product-config-page
    .builder-step-panel
    .topping-config-layout
    .builder-topping-group
    .topping-choice-main {
    flex: 0 0 auto;
    padding: 10px 12px 2px;
  }

  body.config-active
    .product-config-page
    .builder-step-panel
    .topping-config-layout
    .builder-topping-group
    .topping-art {
    height: 76px;
    margin-top: 4px;
  }

  body.config-active
    .product-config-page
    .builder-step-panel
    .topping-config-layout
    .builder-topping-group
    .topping-choice-footer {
    min-height: 44px;
    display: flex;
    grid-template-columns: none;
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: 0;
    padding: 0 10px 4px;
  }

  body.config-active
    .product-config-page
    .builder-step-panel
    .topping-config-layout
    .builder-topping-group
    .topping-extra-price {
    display: none;
  }

  body.config-active
    .product-config-page
    .builder-step-panel
    .topping-config-layout
    .builder-topping-group
    .topping-choice-placement {
    min-height: 0;
    margin-top: 0;
    padding: 0;
  }

  body.config-active
    .product-config-page
    .builder-step-panel
    .topping-config-layout
    .builder-topping-group
    .topping-choice-placement:not(.active) {
    display: none;
  }

  body.config-active
    .product-config-page
    .builder-step-panel
    .topping-config-layout
    .builder-topping-group
    .topping-choice-placement.active {
    min-height: 44px;
    padding: 0 10px 8px;
  }

  body.config-active
    .product-config-page
    .builder-step-panel
    .topping-config-layout
    .builder-topping-group
    .topping-placement-placeholder {
    min-height: 24px;
    padding: 2px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 11px;
    line-height: 1.2;
  }
}