/* Final spacing layer. Typography, colours, component order and behaviour
   continue to come from the original component styles. */
.section-subtitle, #delivery .section-subtitle,
.page-subtitle { margin-top: var(--space-description); }
.ordering { padding-top: var(--space-section); }
.field-group { margin-top: var(--space-8); }
.field-group + .field-group { margin-top: var(--space-group); }
.field-label { margin-bottom: var(--space-control); }
.pills { gap: var(--space-3); }
#selection-summary { margin-top: var(--space-control); }
#menu, #delivery { margin-top: var(--space-12); }
.dates { margin-top: var(--space-control); gap: var(--space-control); }
#menu-title { margin-top: var(--space-group); margin-bottom: var(--space-control); }
.dish-grid { gap: var(--space-group); }
.dish-content { padding: var(--space-card); }
.meal-type { margin-bottom: var(--space-2); }
.meal-detail { margin-top: var(--space-2); }
.dish-price { margin-top: var(--space-3); gap: var(--space-2); }
.menu-note { margin-top: var(--space-control); }
.delivery-fields { gap: var(--space-group); margin-top: var(--space-group); }
.delivery-fields label { gap: var(--space-label); }
.delivery-fields small { margin-top: 0; }
#delivery-rule { margin-top: var(--space-control); }
#delivery > p:not(.section-subtitle):not(.tiny):not(.status) { margin-top: var(--space-group); }
.order-bottom { margin-top: var(--space-control); gap: var(--space-control); }
.status, .inline-error { margin-top: var(--space-2); }
.delivery-banner, .delivery-map { margin-top: var(--space-section); }
.faq, .production, .reviews { padding-top: var(--space-section); }
.faq-inner { min-height: 0; }
.faq-tabs { margin: var(--space-8) 0 var(--space-group); gap: var(--space-control); }
.faq details { margin-bottom: var(--space-group); }
.faq details:last-child { margin-bottom: 0; }
.faq summary { padding: 0 0 var(--space-control); gap: var(--space-control); }
.faq details p { padding-bottom: var(--space-control); }
.production-description { margin-top: var(--space-description); }
.production-stats { margin-top: var(--space-8); gap: var(--space-group); }
.production-stats p { margin-top: var(--space-3); }
.benefits { margin-top: var(--space-16); gap: var(--space-group); }
.benefits p { margin-top: var(--space-3); }
.review-grid { margin-top: var(--space-8); gap: var(--space-8) var(--space-group); }
.review-grid h3 { margin-top: var(--space-3); }
.review-grid p { margin-top: var(--space-3); }
.map-card { padding: var(--space-8); height: auto; }
.map-card p { margin-top: var(--space-3); }
.map-card h2 + p { margin-top: var(--space-group); }
.map-card small { margin-top: var(--space-1); }
.site-footer { padding-top: var(--space-section); padding-bottom: var(--space-8); }
.site-footer h4 { margin-bottom: var(--space-3); }
.footer-top > div:not(:first-child) > a { margin-bottom: var(--space-2); }
.footer-support p, .footer-support p span + span { margin-top: var(--space-3); }
.footer-bottom { margin-top: var(--space-10); gap: var(--space-2); }
body.inner-route .site-footer,
body[data-route=cart] .site-footer,
body[data-route=payment] .site-footer { padding-top: var(--space-16); padding-bottom: var(--space-8); }
.breadcrumb { margin-bottom: var(--space-group); }
.cart-layout { margin-top: var(--space-8); gap: var(--space-group); }
.cart-layout > div, .cart-layout > aside, .form-grid > *, .form-field { min-width: 0; }
.surface { padding: var(--space-card); }
.surface h3, .order-summary h3,
body[data-route=cart] .cart-layout > div > .surface > h3 { margin-bottom: var(--space-control); }
.cart-eating-dates { margin-top: var(--space-group); padding-top: var(--space-group); }
.delivery-summary { margin-top: var(--space-control); padding: var(--space-control); }
.cart-actions { margin-top: var(--space-group); gap: var(--space-control); }
.order-summary .summary-count { margin-top: var(--space-2); }
.order-summary .summary-line { margin: var(--space-control) 0; gap: var(--space-control); }
.order-summary .summary-total { margin-top: var(--space-control); padding-top: var(--space-control); margin-bottom: 0; }
.order-summary .button { margin-top: var(--space-group); }
.order-summary.cart-aside .summary-help { margin-top: var(--space-control); }
.composition-title, body[data-route=payment] .composition-title { margin: var(--space-8) 0 0; }
.composition-count, body[data-route=payment] .composition-count { margin: var(--space-2) 0 var(--space-control); }
.cart-day, body[data-route=cart] .cart-day { margin-top: var(--space-control); padding: 0 var(--space-card); }
.cart-day > summary { padding: var(--space-group) 0; gap: var(--space-control); }
.cart-day > div { padding: 0 0 var(--space-3); }
.cart-menu-row { padding: var(--space-3) 0; }
.cart-menu-row p { margin-top: var(--space-2); gap: var(--space-control); }
.form-field, dialog .form-field, .checkout-surface .form-field { gap: var(--space-label); }
.form-grid, .checkout-surface .form-grid { gap: var(--space-group); }
.checkout-surface,
.checkout-surface:first-child,
.checkout-surface:nth-child(2) { padding: var(--space-8); }
.checkout-surface + .checkout-surface { margin-top: var(--space-group); }
.checkout-surface > h3 { margin-bottom: var(--space-description); }
.checkout-surface .section-caption { margin-bottom: var(--space-control); }
.checkout-surface .sms-widget .sms-heading { margin-bottom: var(--space-description); }
.checkout-surface .sms-widget .form-field { margin-top: var(--space-control); }
.checkout-surface .sms-widget .sms-button { margin-top: var(--space-control); }
.zone-check, .checkout-surface .zone-check { margin-top: 0; }
.form-field small { min-width: 0; }
.checkout-aside { padding: var(--space-card); }
.checkout-aside h3 { margin-bottom: var(--space-control); }
.checkout-meals, .checkout-count { margin-top: var(--space-1); }
.checkout-aside-body { margin-top: var(--space-control); }
.checkout-shipping { padding: var(--space-control); }
.checkout-shipping p { margin-top: var(--space-1); }
.checkout-shipping p + small, .checkout-shipping small + small { margin-top: var(--space-3); }
.checkout-billing { margin-top: var(--space-group); }
.billing-row + .billing-row { margin-top: var(--space-3); }
.billing-total { margin-top: var(--space-control); padding-top: var(--space-control); }
.checkout-check { gap: var(--space-3); margin-top: var(--space-control); }
.checkout-check + .checkout-check { margin-top: var(--space-3); }
.checkout-privacy, .checkout-billing .button,
.checkout-billing .checkout-pay-help { margin-top: var(--space-3); }
.check { gap: var(--space-3); align-items: flex-start; }
.notice { margin-top: var(--space-control); padding: var(--space-control); }
.empty-cart { padding: var(--space-16) 0; }
.empty-cart h2 { margin-bottom: var(--space-description); }
.empty-cart .button { margin-top: var(--space-group); max-width: 100%; }
.payment-card { padding: var(--space-card); }
.payment-card > h3 { margin-bottom: var(--space-description); }
.payment-status-icon { margin-bottom: var(--space-control); }
.payment-card .button { margin-top: var(--space-group); max-width: 100%; }
.payment-card #payment-state:not(:empty) { margin-top: var(--space-3); }
.payment-aside h3 { margin-bottom: var(--space-control); }
.order-summary.payment-aside > .payment-parameters,
.order-summary.payment-aside > .payment-count { margin-top: var(--space-1); }
.payment-delivery, .payment-costs { margin-top: var(--space-control); padding: var(--space-control); }
.payment-costs { padding: var(--space-control) 0 0; }
.payment-delivery p + p { margin-top: var(--space-3); }
.payment-costs .payment-sum { margin-top: var(--space-control); }
.account-phone { margin-top: var(--space-2); }
.account-history { margin-top: var(--space-8); }
.account-history p { margin: var(--space-3) 0 var(--space-control); }
.account-exit { margin-top: var(--space-group); }
.info-body { margin-top: var(--space-control); }
.info-body p + p { margin-top: var(--space-control); }
.info-body .button { margin-top: var(--space-group); max-width: 100%; }
/* Each modal keeps a distinct title, content group, and closing action. */
dialog { padding: var(--space-group); }
dialog .modal-title { margin-bottom: var(--space-group); }
dialog .sms-heading { margin-bottom: var(--space-description); }
dialog .form-field { margin-top: var(--space-control); }
dialog .button, dialog .sms-button { margin-top: var(--space-control); }
dialog .tiny { margin-top: var(--space-3); }
dialog .modal-close { margin-top: var(--space-group); }
.nav-modal { gap: var(--space-control); }
.nav-modal .button, .nav-modal .modal-close { margin-top: 0; }
/* Calendar padding must also leave seven usable columns on a narrow field. */
.calendar-head { padding: var(--space-control) var(--space-control) 0; }
.calendar-grid { padding: 0 var(--space-control); }
.calendar-info { margin: var(--space-3) var(--space-control) 0; }
.calendar-info p + p { margin-top: var(--space-2); }
.picker-cancel, .date-popover .picker-cancel { margin: var(--space-control); max-width: calc(100% - 32px); }
@media (min-width: 601px) and (max-width: 900px) {
  .checkout-aside-body { gap: var(--space-group); }
  .checkout-billing { margin-top: 0; }
}
@media (max-width: 900px) {
  .checkout-surface, .checkout-surface:first-child, .checkout-surface:nth-child(2) { padding: var(--space-card); }
  body[data-route=checkout] .cart-layout { row-gap: var(--space-8); }
  .benefits p { margin-top: 0; }
}
@media (max-width: 600px) {
  .field-group { margin-top: var(--space-group); }
  #menu, #delivery { margin-top: var(--space-8); }
  .form-grid, .checkout-surface .form-grid { row-gap: var(--space-control); column-gap: var(--space-control); }
  .cart-layout { margin-top: var(--space-group); }
  .surface, .checkout-surface, .checkout-surface:first-child, .checkout-surface:nth-child(2) { padding: var(--space-card); }
  .cart-layout > div > .surface { padding-top: var(--space-card); padding-bottom: var(--space-card); }
  .benefits { margin-top: var(--space-12); padding: var(--space-8) var(--space-group); }
  .map-card { padding: var(--space-8) var(--space-group); }
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-bottom { margin-top: var(--space-8); }
  body.inner-route .site-footer, body[data-route=cart] .site-footer, body[data-route=payment] .site-footer { padding-top: var(--space-12); }
}
@media (max-width: 600px) {
  .checkout-surface:first-child .form-grid { row-gap: var(--space-group); }
}
.cart-layout > div > .payment-card > h3 { margin-bottom: var(--space-description); }
/* Paragraphs and lists from the approved FAQ copy use the existing answer type. */
.faq details ul { margin: 0; padding: 0 var(--space-group) var(--space-control); color: var(--state-muted-text); font-size: 16px; line-height: 26px; }
.faq details li + li { margin-top: var(--space-2); }
.faq details p a { text-decoration: underline; }
@media (max-width: 600px) { .faq details ul { font-size: 14px; line-height: 22px; } }
.cart-ration { margin-bottom: 32px; min-width: 0; }
.ration-delivery + .ration-delivery { margin-top: 24px; }
/* Designer-supplied coverage map; the existing delivery card keeps its layout. */
#delivery-map { background-image: url('/assets/delivery-coverage-v2.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; }
@media (max-width:900px) {
  #delivery-map { background-size: auto 678px; background-position: 30% top; }
}
@media (max-width:600px) {
  #delivery-map { background-size: auto 460px; background-position: 30% top; }
}
/* Distinguish the ration overview from the dish composition below it. */
.cart-ration > section.surface { background-color: var(--ds-yellow-light); }

/* Delivery selection and price card follow the supplied reference. */
#delivery { display:grid; grid-template-columns:minmax(0,792fr) minmax(0,384fr); gap:24px; align-items:start; }
#delivery .delivery-selection { min-width:0; }
#delivery .section-subtitle { margin-top:24px; }
#delivery .delivery-fields { margin-top:32px; }
#delivery-rule { display:flex; align-items:center; gap:16px; }
.delivery-rule-icon { display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; border-radius:12px; background:var(--ds-neutral-background); }
.delivery-rule-icon img { display:block; object-fit:contain; }
.delivery-order-card { min-width:0; border:1px solid var(--ds-border); border-radius:20px; padding:24px; background:var(--ds-porcelain); }
.delivery-order-card h3 { margin:0 0 8px; }
.delivery-order-card > p { margin:0; }
.delivery-order-costs { padding:24px 0; margin-top:24px; border-top:1px solid var(--ds-border); border-bottom:1px solid var(--ds-border); }
.delivery-order-costs p,.delivery-order-total { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.delivery-order-costs p + p { margin-top:12px; }
.delivery-order-total { margin-top:24px; font-size:24px; line-height:32px; }
.delivery-order-total strong { font-size:36px; line-height:44px; font-weight:500; white-space:nowrap; }
#delivery .delivery-order-card > .button { width:100%; margin-top:24px; min-width:0; }
#delivery > #message { grid-column:1/-1; margin:0; }
#delivery > #message:empty { display:none; }
@media(min-width:1001px){.delivery-banner{margin-top:150px}}
@media(max-width:1000px){#delivery{grid-template-columns:1fr}.delivery-order-card{max-width:100%}}
@media(max-width:600px){#delivery .delivery-fields{margin-top:24px}.delivery-order-card{padding:24px}.delivery-order-total strong{font-size:32px;line-height:40px}}

/* Banner content is controlled by the admin catalogue without changing hero dimensions. */
.hero { background-image:var(--hero-desktop-image,url('/assets/hero-v2.webp')); }
.hero-content h1 { white-space:pre-line; }
.hero .pagination[hidden],.hero-content .button[hidden] { display:none; }
@media(max-width:600px){.hero{background-image:var(--hero-mobile-image,var(--hero-desktop-image,url('/assets/hero-v2.webp')))}}
.review-photo { overflow:hidden; }
.review-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.reviews[hidden] { display:none; }

/* Short pages fill the viewport so the footer always closes the page. */
body { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
body > .site-header, body > .site-footer { flex-shrink:0; }
body > main { flex:1 0 auto; }

/* Dish information reuses catalogue data without changing the ration controls. */
.dish-photo.dish-detail-trigger { width:100%; padding:0; border:0; color:inherit; cursor:pointer; font:inherit; }
.dish-name-trigger { display:block; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.dish-detail-trigger:focus-visible,.dish-name-trigger:focus-visible { outline:2px solid #14283F; outline-offset:3px; }
.dish-name-trigger:hover { text-decoration:underline; text-underline-offset:3px; }
dialog.dish-details-dialog { width:min(800px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0 24px 24px; border-radius:16px; overflow:auto; background:#FAF7F4; color:#14283F; }
.dish-detail-close-bar { position:sticky; top:0; z-index:1; display:flex; justify-content:flex-end; padding:12px 0; background:#FAF7F4; }
.dish-detail-close { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:12px; background:transparent; color:#14283F; font-size:28px; line-height:1; cursor:pointer; }
.dish-detail-close:hover { background:#E3E9EF; }
.dish-detail-close:focus-visible { outline:2px solid #14283F; outline-offset:-2px; }
.dish-details-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:24px; align-items:start; }
.dish-details-without-photo { grid-template-columns:1fr; }
.dish-details-photo { height:280px; min-width:0; overflow:hidden; border-radius:12px; }
.dish-details-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.dish-details-info { min-width:0; overflow-wrap:anywhere; }
.dish-details-info h2 { margin:0; font-size:24px; line-height:32px; }
.dish-details-info section,.dish-details-metrics { margin:24px 0 0; }
.dish-details-info h3 { margin:0 0 8px; font-size:18px; line-height:28px; }
.dish-details-ingredients { white-space:pre-line; line-height:26px; }
.dish-details-basis { color:#667789; margin:0 0 12px; }
.dish-details-metrics,.dish-details-nutrition { display:grid; gap:8px; }
.dish-details-metrics > div,.dish-details-nutrition > div { display:flex; justify-content:space-between; gap:16px; }
.dish-details-metrics dd,.dish-details-nutrition dd { margin:0; white-space:nowrap; }
.hero[hidden] { display:none; }
body.without-hero .site-header { position:relative; background:#FAF7F4; }
@media(max-width:600px){
 .dish-details-layout { grid-template-columns:1fr; gap:24px; }
 dialog.dish-details-dialog { padding:0 16px 24px; }
 .dish-details-photo { height:220px; }
 .dish-details-info h2 { font-size:24px; line-height:32px; }
 .dish-details-info p,.dish-details-info dl { line-height:26px; }
}

/* Mobile sections use the requested 180px rhythm and the desktop artwork. */
@media(max-width:600px){
 #home { --space-section:180px; }
 body:not(.inner-route) > .site-footer { padding-top:180px; }
 .benefits > div > img:first-child { display:block; width:70px; height:70px; min-width:70px; flex:0 0 70px; object-fit:contain; }
 .benefits .benefit-vector { display:none; }
}

/* The nutrition group is confined to dish details. */
.dish-details-info .dish-nutrition-heading h3 { margin:0; }
.dish-details-info .dish-nutrition-heading .dish-details-basis { margin:4px 0 0; font-size:14px; line-height:22px; color:#667789; }
.dish-details-info .dish-details-nutrition { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:16px 0 0; }
.dish-details-info .dish-details-nutrition > div { display:block; min-width:0; }
.dish-details-info .dish-details-nutrition dt { line-height:24px; }
.dish-details-info .dish-details-nutrition dd { margin:4px 0 0; font-weight:600; line-height:24px; white-space:normal; overflow-wrap:anywhere; }

/* Independent, manually controlled advertising beneath the static hero. */
.promo-carousel { margin-top:var(--space-section); }
.promo-carousel[hidden],.promo-carousel [hidden] { display:none; }
.promo-frame { height:380px; position:relative; overflow:hidden; border-radius:16px; touch-action:pan-y; }
.promo-slide { position:absolute; inset:0; }
.promo-slide > a,.promo-slide picture { display:block; width:100%; height:100%; }
.promo-slide img { display:block; width:100%; height:100%; object-fit:cover; user-select:none; }
.promo-arrow { position:absolute; z-index:1; top:calc(50% - 22px); width:44px; height:44px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:#14283F; color:#FAF7F4; cursor:pointer; }
.promo-arrow:hover { background:#34465A; }
.promo-left { left:12px; }.promo-right { right:12px; }
.promo-controls { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:4px; margin-top:12px; }
.promo-dot { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; background:transparent; cursor:pointer; }
.promo-dot::before { content:''; width:8px; height:8px; border-radius:50%; background:#AAB8C5; }
.promo-dot[aria-pressed=true]::before { background:#14283F; }
.promo-dot:focus-visible,.promo-arrow:focus-visible { outline:2px solid #14283F; outline-offset:3px; }
.promo-status { margin-left:8px; font-size:14px; color:#667789; }
#delivery h2 { overflow-wrap:break-word; }

@media(max-width:600px){.promo-carousel{margin-top:180px}.promo-frame{height:auto;aspect-ratio:4/3}.promo-arrow{display:none}.dish-details-info .dish-details-nutrition dt{font-size:14px}.dish-details-info .dish-details-nutrition dd{font-size:16px}}
@media(prefers-reduced-motion:reduce){.promo-slide{animation:none}}
/* Reuse the existing close button for the phone modal. */
dialog.auth-dialog { max-height:calc(100dvh - 32px); overflow:auto; }
dialog.auth-dialog .dialog-close { display:grid; place-items:center; position:sticky; top:0; z-index:1; margin:0 0 8px auto; width:44px; height:44px; border:0; border-radius:12px; padding:0; background:#FAF7F4; color:#14283F; font-size:28px; line-height:1; cursor:pointer; }
dialog.auth-dialog .dialog-close:focus-visible { outline:2px solid #14283F; outline-offset:-2px; }
.promo-status { min-width:64px; font-variant-numeric:tabular-nums; }
/* Delivery is chosen first; the final ration summary spans the ordering container. */
#delivery-settings { margin-bottom:48px; min-width:0; }
#delivery-settings .section-subtitle { margin-top:8px; }
#delivery-settings .delivery-fields { margin-top:24px; }
#delivery { display:block; }
#delivery .delivery-order-card { width:100%; max-width:none; }
@media(max-width:600px){#delivery-settings{margin-bottom:32px}}

/* Keep desktop/tablet controls outside the clipped image. */
.promo-stage { position:relative; }
.promo-left { left:-56px; }.promo-right { right:-56px; }
@media(min-width:601px){.promo-carousel{width:calc(100% - 128px);max-width:1200px;margin-left:auto;margin-right:auto}}

/* Keep menu cards and their price rows aligned for names of any length. */
#dishes.dish-grid { align-items:stretch; grid-auto-rows:1fr; }
#dishes > .dish { display:flex; flex-direction:column; min-width:0; height:100%; }
#dishes > .dish > .dish-photo { flex-shrink:0; }
#dishes > .dish > .dish-content { display:flex; flex-direction:column; flex:1; min-width:0; }
#dishes .dish-price { margin-top:auto; padding-top:12px; }

/* Ration summary only: keep delivery and edit action on the yellow surface. */
.cart-ration > section.surface .delivery-summary {
  background:transparent;
  padding:0;
  margin-top:16px;
}
.cart-ration > section.surface [data-edit-ration] {
  background:transparent;
  border:1px solid #14283F;
  color:#14283F;
}
@media (hover:hover) {
  .cart-ration > section.surface [data-edit-ration]:hover:not(:disabled) {
    background:rgba(20,40,63,0.06);
  }
}
.cart-ration > section.surface [data-edit-ration]:active:not(:disabled) {
  background:rgba(20,40,63,0.10);
}
.cart-ration > section.surface [data-edit-ration]:focus-visible {
  outline:2px solid #14283F;
  outline-offset:2px;
}

/* Compact order summary, scoped to the constructor's final card. */
#delivery .delivery-order-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,32%);
  align-items:stretch;
  gap:32px;
  padding:32px;
  height:auto;
}
#delivery .delivery-order-description { display:flex; flex-direction:column; gap:24px; min-width:0; }
#delivery .delivery-order-intro { display:flex; flex-direction:column; gap:16px; }
#delivery .delivery-order-description h3,#delivery-order-program { margin:0; }
#delivery-order-program { display:flex; flex-direction:column; gap:4px; }
#delivery-order-program > span { display:block; }
#delivery .delivery-order-costs { display:flex; flex-direction:column; gap:16px; margin:0; padding:0; border:0; }
#delivery .delivery-order-costs p { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0; }
#delivery .delivery-order-costs p > span { min-width:0; overflow-wrap:anywhere; }
#delivery .delivery-order-costs p > span:last-child { text-align:right; }
#delivery .delivery-order-checkout { display:flex; flex-direction:column; justify-content:flex-end; gap:24px; min-width:0; padding-left:32px; border-left:1px solid var(--ds-border); }
#delivery .delivery-order-total { display:flex; flex-direction:row; justify-content:space-between; align-items:baseline; gap:16px; margin:0; }
#delivery .delivery-order-total > span { color:var(--ds-neutral-text); font-size:18px; line-height:28px; }
#delivery .delivery-order-total strong { min-width:0; font-size:32px; line-height:40px; font-weight:600; white-space:normal; overflow-wrap:anywhere; text-align:right; }
#delivery .delivery-order-checkout > .button { width:100%; min-width:0; height:56px; min-height:56px; margin:0; border-radius:25px; }
@media(max-width:900px) {
  #delivery .delivery-order-card { grid-template-columns:minmax(0,1fr); gap:24px; padding:20px; }
  #delivery .delivery-order-checkout { padding:24px 0 0; border-left:0; border-top:1px solid var(--ds-border); }
}

/* Quantity controls belong only to basket ration cards. */
.cart-ration > .surface .cart-ration-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cart-ration > .surface .cart-ration-heading h3 { flex:1; min-width:120px; margin:0; }
.cart-ration > .surface .cart-ration-description { margin-top:16px; font-size:18px; line-height:28px; }
.cart-ration > .surface .ration-quantity { display:flex; flex-direction:column; gap:8px; color:#14283F; }
.cart-ration > .surface .ration-stepper { display:grid; grid-template-columns:44px minmax(36px,1fr) 44px; align-items:center; box-sizing:border-box; height:50px; border:1.5px solid #14283F; border-radius:16px; background:transparent; overflow:hidden; }
.cart-ration > .surface .ration-stepper button { display:grid; place-items:center; width:44px; height:47px; min-height:44px; padding:0; border:0; color:#14283F; background:transparent; flex-shrink:0; }
.cart-ration > .surface .ration-stepper button svg { display:block; width:16px; height:16px; stroke:#14283F; stroke-width:1.5; }
.cart-ration > .surface .ration-stepper output { text-align:center; color:#14283F; line-height:24px; }
.cart-ration > .surface .ration-stepper button:hover:not(:disabled) { background:rgba(20,40,63,.06); }
.cart-ration > .surface .ration-stepper button:active:not(:disabled) { background:rgba(20,40,63,.10); }
.cart-ration > .surface .ration-stepper button:focus-visible { outline:2px solid #14283F; outline-offset:-4px; border-radius:12px; }
.cart-ration > .surface .ration-position-price { display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.cart-ration > .surface .ration-position-price small { font-size:14px; line-height:22px; }
@media(max-width:600px) {
 .cart-ration > .surface .cart-ration-heading { gap:16px; }
 .cart-ration > .surface .cart-ration-heading h3 { flex-basis:100%; min-width:0; }
}

.back-to-top { position:fixed; right:24px; bottom:24px; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:20; display:grid; place-items:center; width:48px; height:48px; padding:0; border:1.5px solid #14283F; border-radius:50%; background:#FAF7F4; color:#14283F; box-shadow:0 4px 16px rgba(20,40,63,.10); transition:background-color .15s,transform .15s; }
.back-to-top svg { display:block; width:24px; height:24px; stroke-width:1.5; }
.back-to-top:hover { background:#E3E9EF; transform:translateY(-2px); }
.back-to-top:active { transform:translateY(0); }
.back-to-top:focus-visible { outline:2px solid #14283F; outline-offset:3px; }
@media(max-width:600px) { .back-to-top { right:16px; } }
@media(prefers-reduced-motion:reduce) { .back-to-top { transition:none; } }