/*
  Slice 3 storefront design contract, extracted from the three approved concepts.

  Copy: only functional labels present in the concepts (menu, offers, fulfillment,
  cart, coupon, OTP, checkout and order summary). No hero copy or decorative badges.
  Surfaces: true white cards/shell on a very light neutral canvas; dark navy text.
  Brand: --sf-accent is tenant supplied. The concept reference is #d23f32.
  Type: 14px supporting copy, 16px controls/body, 20-24px section titles,
  32-40px desktop page title. Strong weights are 700-800.
  Space/radius: 4/8/12/16/24/32px rhythm; 8px controls and 12px cards.
  Icons: delivery truck, pickup bag, location, account, cart, chevron, plus/minus,
  coupon, payment, note, leaf, information and back. Icons remain code-native.
  Media: menu rows use 4:3 crops; offer/category thumbnails are square.
  Layout: desktop max 1440px with a persistent 360-400px cart rail; mobile is one
  column with horizontally scrollable categories and a sticky cart/submit action.
  Accessibility: every interactive control has at least a 44 CSS pixel target,
  visible focus, semantic labels/headings and live regions for changing state.
*/

:root {
  --sf-accent: #d23f32;
  --sf-accent-strong: #b83228;
  --sf-accent-soft: #fff0ee;
  --sf-canvas: #f7f7f8;
  --sf-surface: #fff;
  --sf-text: #101828;
  --sf-muted: #667085;
  --sf-line: #e4e7ec;
  --sf-success: #159447;
  --sf-danger: #c92f28;
  --sf-radius-control: 8px;
  --sf-radius-card: 12px;
  --sf-space-1: 4px;
  --sf-space-2: 8px;
  --sf-space-3: 12px;
  --sf-space-4: 16px;
  --sf-space-6: 24px;
  --sf-space-8: 32px;
  --sf-touch: 44px;
  --sf-content-max: 1440px;
  --sf-cart-width: 380px;
  --sf-font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

.sf-touch {
  min-width: var(--sf-touch);
  min-height: var(--sf-touch);
}

.sf-surface {
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius-card);
}

.sf-focus:focus-visible,
.sf-touch:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sf-accent) 28%, transparent);
  outline-offset: 2px;
}

.sf-desktop-cart {
  width: min(var(--sf-cart-width), 100%);
}

.sf-mobile-sticky-action {
  position: sticky;
  bottom: 0;
  z-index: 10;
}

@media (min-width: 800px) {
  .sf-mobile-sticky-action {
    position: static;
  }
}

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

.sf-primary,
.sf-secondary,
.sf-mode-button,
.sf-category-button,
.sf-offer-card,
.sf-quantity button {
  border-radius: var(--sf-radius-control);
  font: 700 1rem/1 var(--sf-font);
  cursor: pointer;
}

.sf-primary {
  border: 1px solid var(--sf-accent);
  color: #fff;
  background: var(--sf-accent);
}

.sf-secondary,
.sf-quantity button {
  border: 1px solid var(--sf-line);
  color: var(--sf-text);
  background: var(--sf-surface);
}

.sf-primary:disabled {
  border-color: #d0d5dd;
  color: #667085;
  background: #eaecf0;
  cursor: not-allowed;
}

.sf-fulfillment,
.sf-offers,
.sf-menu,
.sf-product-configurator,
.sf-cart,
.sf-checkout {
  color: var(--sf-text);
  font-family: var(--sf-font);
}

.sf-segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sf-space-2);
}

.sf-mode-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-space-2);
  border: 1px solid var(--sf-line);
  background: var(--sf-surface);
}

.sf-mode-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.sf-mode-button[aria-pressed="true"] {
  border-color: var(--sf-accent);
  color: #fff;
  background: var(--sf-accent);
}

.sf-fulfillment-summary,
.sf-section-heading,
.sf-product-heading,
.sf-checkout-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-space-4);
}

.sf-fulfillment-summary {
  padding: var(--sf-space-3) 0;
  color: var(--sf-muted);
}

.sf-open-state,
.sf-verified {
  color: var(--sf-success);
}

.sf-browse-state,
.sf-repricing {
  padding: var(--sf-space-3);
  border-radius: var(--sf-radius-control);
  color: var(--sf-muted);
  background: var(--sf-canvas);
}

.sf-section-heading h2,
.sf-order-summary h2,
.sf-otp-gate h2,
.sf-contact-fields h2,
.sf-payment-methods legend {
  margin: 0;
  font-size: 1.25rem;
}

.sf-offer-rail,
.sf-category-rail {
  display: flex;
  gap: var(--sf-space-3);
  overflow-x: auto;
  padding: var(--sf-space-2) 0;
}

.sf-offer-card {
  flex: 1 0 260px;
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  padding: var(--sf-space-3);
  border: 1px solid var(--sf-line);
  color: var(--sf-text);
  background: var(--sf-surface);
  text-align: left;
}

.sf-offer-card img {
  width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.sf-offer-card span {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sf-space-1);
}

.sf-offer-card small,
.sf-offer-card em,
.sf-menu-item p,
.sf-menu-item small,
.sf-product-heading p,
.sf-summary-line small,
.sf-summary-line span,
.sf-cart-line p {
  color: var(--sf-muted);
  font-style: normal;
}

.sf-offer-card[data-coupon-required="true"] em {
  color: var(--sf-accent);
}

.sf-category-button {
  flex: 0 0 auto;
  padding: 0 var(--sf-space-4);
  border: 1px solid transparent;
  color: var(--sf-text);
  background: var(--sf-surface);
}

.sf-category-button[aria-current="true"] {
  color: #fff;
  background: var(--sf-accent);
}

.sf-menu-heading h1 {
  margin: var(--sf-space-4) 0;
  font-size: clamp(2rem, 4vw, 3rem);
}

.sf-menu-list {
  display: grid;
}

.sf-menu-item {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto auto;
  gap: var(--sf-space-4);
  align-items: center;
  padding: var(--sf-space-3) 0;
  border-bottom: 1px solid var(--sf-line);
}

.sf-menu-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--sf-radius-control);
  object-fit: cover;
}

.sf-menu-item h3,
.sf-menu-item p,
.sf-cart-line h3,
.sf-cart-line p {
  margin: 0;
}

.sf-menu-item-copy {
  display: grid;
  gap: var(--sf-space-1);
}

.sf-product-hero {
  width: 100%;
  max-height: 460px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.sf-product-heading,
.sf-modifier-groups,
.sf-product-tags,
.sf-validation-state {
  margin: var(--sf-space-4);
}

.sf-product-heading h1,
.sf-product-heading p {
  margin: 0;
}

.sf-modifier-groups fieldset,
.sf-payment-methods {
  margin: 0 0 var(--sf-space-4);
  padding: var(--sf-space-3);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius-control);
}

.sf-option-row,
.sf-payment-row,
.sf-check {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
}

.sf-option-row strong {
  margin-left: auto;
}

.sf-option-row input,
.sf-payment-row input,
.sf-check input {
  width: 24px;
  height: 24px;
  accent-color: var(--sf-accent);
}

.sf-product-action,
.sf-cart-action,
.sf-checkout-action {
  display: flex;
  gap: var(--sf-space-3);
  padding: var(--sf-space-3);
  border-top: 1px solid var(--sf-line);
  background: var(--sf-surface);
}

.sf-product-action > .sf-primary,
.sf-cart-action > .sf-primary,
.sf-checkout-action > .sf-primary {
  flex: 1;
}

.sf-quantity {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
}

.sf-quantity output {
  min-width: 28px;
  text-align: center;
}

.sf-cart {
  padding: var(--sf-space-6);
}

.sf-cart-line,
.sf-summary-line {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: var(--sf-space-3);
  align-items: start;
  padding: var(--sf-space-4) 0;
  border-bottom: 1px solid var(--sf-line);
}

.sf-cart-line img,
.sf-summary-line img {
  width: 80px;
  aspect-ratio: 1;
  border-radius: var(--sf-radius-control);
  object-fit: cover;
}

.sf-totals {
  display: grid;
  gap: var(--sf-space-2);
}

.sf-totals > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sf-space-3);
}

.sf-totals dd {
  margin: 0;
}

.sf-discount {
  color: var(--sf-danger);
}

.sf-grand-total {
  padding-top: var(--sf-space-3);
  border-top: 1px solid var(--sf-line);
  font-size: 1.3rem;
  font-weight: 800;
}

.sf-blocking-reasons,
.sf-coupon [role="alert"],
.sf-otp-gate [role="alert"] {
  color: var(--sf-danger);
}

.sf-coupon > label,
.sf-field label {
  display: block;
  margin-bottom: var(--sf-space-1);
  font-weight: 700;
}

.sf-coupon > div {
  display: flex;
  gap: var(--sf-space-2);
}

.sf-coupon input,
.sf-field input,
.sf-field textarea {
  width: 100%;
  min-height: var(--sf-touch);
  padding: var(--sf-space-2) var(--sf-space-3);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius-control);
  color: var(--sf-text);
  background: var(--sf-surface);
  font: 1rem/1.4 var(--sf-font);
}

.sf-otp-gate,
.sf-fulfillment-card,
.sf-order-summary,
.sf-payment-methods,
.sf-field {
  margin-bottom: var(--sf-space-4);
}

.sf-otp-gate,
.sf-fulfillment-card {
  display: grid;
  gap: var(--sf-space-3);
  padding: var(--sf-space-4);
}

.sf-fulfillment-card span,
.sf-payment-row small {
  color: var(--sf-muted);
}

.sf-summary-line > div,
.sf-payment-row {
  display: flex;
  flex-direction: column;
}

.sf-payment-row {
  align-items: flex-start;
  padding: var(--sf-space-2) 0;
}

@media (max-width: 799px) {
  .sf-segmented-control {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-fulfillment-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-menu-item {
    grid-template-columns: 42% minmax(0, 1fr) auto;
    gap: var(--sf-space-3);
  }

  .sf-menu-item .sf-primary {
    grid-column: 2 / -1;
  }

  .sf-cart {
    width: 100%;
    padding: var(--sf-space-4);
  }
}