/* BerezkaAsia look for the stage-0 UI (assets/css/fulfillment.css).
   Every value comes from the live site: its palette in root.css and the
   measured auth modal, buttons and category chips. Nothing from the stage-0
   handoff is used for colours, fonts or radii.

   The site's values are set once, as the shared tokens on :root, so every
   stage-0 element (selector, cart, checkout, profile, prompts) picks them up
   by itself. Rules below are only for what tokens can't express: shapes the
   site draws differently from Romania (pill buttons, chip switches, the close
   button above pop-ups) and clashes with the site's own CSS. */

/* ── Tokens ───────────────────────────────────────────────────────────── */

:root {
  --font-ui:     var(--primary-font);

  --brand:       var(--red);            /* btn-red, active category chip */
  --brand-deep:  var(--red);
  --accent:      var(--red);
  --on-accent:   #ffffff;
  --bg:          #ffffff;
  --sale:        var(--red);
  --soft-solid:  #ffffff;

  --ink:         var(--dark-gray);      /* body text and headings */
  --muted:       var(--medium-gray);
  --line:        var(--extra-medium-gray); /* input border */
  --fill:        var(--very-light-gray);
  --soft:        var(--light-red);
  --ok:          var(--green);
  --danger:      var(--red);

  --r-sheet:     30px;                  /* auth modal, product card */
  --r-card:      30px;
  --r-field:     30px;                  /* form-control */
  --r-photo:     30px;
  --r-control:   50px;                  /* btn-rounded, category chip */
  --r-badge:     50px;

  --fs-caption:  12px;
  --fs-small:    14px;                  /* auth-subtitle */
  --fs-body:     16px;
  --fs-field:    16px;                  /* never below 16px: iOS zooms smaller fields */
  --fs-title:    20px;                  /* auth-title */
  --fw-secondary: 400;
  --fw-body:     400;
  --fw-label:    500;
  --fw-accent:   600;

  --button-height: 52px;                /* btn-medium */
  --inset-sheet:   24px;                /* auth modal padding */
}

/* ── Buttons: the site's btn-rounded, uppercase, 500 ──────────────────── */

.ez-btn {
  border-radius: var(--r-control);
  font-weight: var(--fw-label);
  text-transform: uppercase;
}

.ez-btn.ez-btn-main {
  height: var(--button-height);
  font-size: var(--fs-field);
}

/* customs.css still draws the site's old cart button, .cart-total
   .procced-checkout: 5px corners, block, its own padding. On stage 0 that
   element is an ez-btn, so it gets the ez-btn shape back; the colours are
   the same red, so hover and disabled stay with ez-btn. */
.cart-total .procced-checkout.ez-btn {
  display: inline-flex;
  padding: 0 22px;
  border-radius: var(--r-control);
}

/* Small buttons, including the ones Romania draws with their own classes:
   the checkout cards' "Change" and the header prompt's buttons. */
.ez-btn.ez-btn-small,
.checkout-fulfillment-card__change,
.fulfillment-prompt__button {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-control);
  font-size: var(--fs-small);
  font-weight: var(--fw-label);
  text-transform: uppercase;
}

/* Romania sizes "Later" to its own font (96px); the site's uppercase needs more. */
.fulfillment-prompt__button {
  white-space: nowrap;
}

.fulfillment-prompt__button--secondary {
  width: auto;
}

/* Segmented switches (delivery / pickup, soon / pick a time) as the site's
   category chips. */
.delivery-address-selector__modes,
.checkout-delivery-time-mode,
.fulfillment-lang-selector {
  padding: 4px;
  border-radius: var(--r-control);
  background: #faf8f2;
}

.delivery-address-selector__mode,
.checkout-delivery-time-mode__button,
.fulfillment-lang-selector__item {
  height: 40px;
  border-radius: var(--r-control);
  color: #000;
  font-weight: var(--fw-accent);
}

.delivery-address-selector__mode.is-active,
.checkout-delivery-time-mode__button.is-selected,
.fulfillment-lang-selector__item.is-active {
  background: var(--brand);
  color: var(--on-accent);
  box-shadow: none;
}

/* ── Bottom sheets: chrome of the site's pop-ups ──────────────────────── */

/* Close button as the site's .product-button-close (product, cart, login):
   a 32px circle with Cross.svg above the pop-up. */
.bottom-sheet-modal .bottom-sheet-modal__content {
  overflow: initial;
}

.bottom-sheet-modal .bottom-sheet__close {
  top: -40px;
  right: 0;
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 100%;
  background: #f7f7f7 url("../images/svg/Cross.svg") center / 24px 24px no-repeat;
}

.bottom-sheet-modal .bottom-sheet__close svg {
  display: none;
}

@media (max-width: 991.98px) {
  .bottom-sheet-modal .bottom-sheet__close {
    right: 18px;
  }
}

/* Same 24px around the content as the site's auth pop-up, top and bottom too. */
.bottom-sheet-modal .bottom-sheet__header {
  min-height: 0;
  padding-top: var(--inset-sheet);
}

/* The new-address screen centres the title on the 34px back button. */
.delivery-address-modal .delivery-address-create__header {
  min-height: 0;
  padding-top: 22px;
}

.delivery-address-modal [data-delivery-selector-content] {
  padding-bottom: var(--inset-sheet);
}

.checkout-delivery-time-modal .checkout-delivery-time-modal__body {
  padding-bottom: var(--inset-sheet) !important;
}

.bottom-sheet__title,
.delivery-address-create__header h3,
.delivery-address-delete-title,
.checkout-total-modal__title {
  font-weight: var(--fw-accent);
  font-size: var(--fs-title);
  line-height: 1.32;
}

/* The site's theme pads every <section> by 50px; the selector's panels are sections. */
.delivery-address-modal section {
  padding: 0;
}

/* Centred dialogs: delete confirmation, total breakdown, order fee. */
.delivery-address-delete-modal .delivery-address-delete-body,
.checkout-total-modal .checkout-total-modal__body {
  padding: var(--inset-sheet);
}

.delivery-address-delete-modal .delivery-address-delete-content {
  border-radius: var(--r-card);
}

.delivery-address-delete-modal .delivery-address-delete-message {
  color: #666;
  font-size: var(--fs-small);
  line-height: 21px;
}

/* ── Fields: the site's form-control ──────────────────────────────────── */

.delivery-address-create__control,
.delivery-address-create__details-grid .delivery-address-create__control {
  height: 52px;
  padding: 0 25px;
  font-size: var(--fs-field);
}

.delivery-address-modal input:not([type="radio"]):not([type="checkbox"]),
.delivery-address-modal select,
.delivery-address-modal textarea {
  font-size: var(--fs-field);
}

.delivery-address-create__field label {
  color: var(--ink);
  font-size: var(--fs-small);
}

.delivery-address-autocomplete {
  overflow: hidden;
}

.delivery-address-autocomplete__item {
  padding: 12px 25px;
}

.delivery-address-create__summary,
.delivery-address-create__map-address,
.delivery-address-create__eta {
  padding-right: 20px;
  padding-left: 20px;
}

.pickup-shop-selector__location select {
  font-size: var(--fs-field);
}

/* ── Address and shop cards ───────────────────────────────────────────── */

.fulfillment-option {
  padding: 14px 10px 14px 20px;
}

.fulfillment-option--pickup {
  padding: 14px 14px 14px 20px;
}

.fulfillment-option__title {
  font-weight: var(--fw-accent);
}

.fulfillment-option__badge {
  padding: 2px 8px;
}

/* Day and time wheels: the picked row is a white pill. */
.checkout-delivery-time-wheel__selection {
  border-radius: var(--r-control);
}

/* ── Cart pop-up: the site's own modal with Romania's summary ─────────── */

/* Raised panels with the total and the main button: the cart's summary and
   the checkout's bottom bar on phones. */
.shopping-cart-modal .modal-footer,
.checkout-mobile-submit {
  background: var(--fill);
}

/* Romania's .shopping-cart-modal__footer. */
.shopping-cart-modal .modal-footer {
  display: block;
  padding: 0;
  border-top: 1px solid var(--line);
  border-radius: var(--r-sheet);
  border-bottom-right-radius: inherit;  /* square on the phone sheet, round in the desktop pop-up */
  border-bottom-left-radius: inherit;
  box-shadow: 0 -6px 20px rgba(45, 33, 20, .10);
}

/* Empty cart: no panel, as on Romania. */
.shopping-cart-modal .modal-footer:not(:has(.cart-total)) {
  display: none;
}

/* Sides line up with the cart lines: 12px item padding + 15px column gutter. */
.shopping-cart-modal .modal-footer > .cart-total {
  margin: 0;
  padding: 12px 27px calc(14px + env(safe-area-inset-bottom));
}

/* The site's body line-height (30px) would otherwise spread the rows. */
.shopping-cart-modal .cart-summary__row {
  line-height: normal;
}

/* ── Checkout ─────────────────────────────────────────────────────────── */

/* The bottom bar lines up with the cards: the site's container gutter is 15px. */
.checkout-mobile-submit {
  padding-right: 15px;
  padding-left: 15px;
}

/* Desktop order column: Romania draws it as a card (.billing-item in its
   style.css), the site has no such rule. Same card as the checkout's own. */
.checkout-order-summary {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #fff;
  color: var(--ink);
}

.checkout-order-summary > h6 {
  margin-bottom: 10px;
  font-size: var(--fs-title);
  font-weight: var(--fw-accent);
}

.checkout-order-summary .cart-total {
  padding: 15px 20px;
  border-radius: var(--r-field);
  background: var(--fill);
}

.checkout-order-summary .cart-total .saving {
  font-size: var(--fs-body);
  font-weight: var(--fw-accent);
}

.checkout-order-summary .cart-total .total-price {
  color: var(--brand);
  font-size: var(--fs-title);
  font-weight: var(--fw-accent);
}

/* ── Profile: delivery addresses ──────────────────────────────────────── */

/* On the page the address cards look like the site's other profile cards
   (orders): no outline, the site's .box-shadow-large. In the selector they
   stay outlined list items. Size and layout as on Romania. */
.profile-delivery-addresses {
  --profile-card-shadow: 0 0 25px rgba(0, 0, 0, .08);
}

.profile-delivery-addresses .fulfillment-option,
.profile-delivery-addresses .fulfillment-option-empty {
  border-color: transparent;
  box-shadow: var(--profile-card-shadow);
}

.profile-delivery-addresses .fulfillment-option.is-selected {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand), var(--profile-card-shadow);
}

/* ── Header: delivery / pickup choice next to the logo ────────────────── */

/* Desktop: a light pill with the pin in a white circle, two lines and a
   chevron. Phones keep the icon only (the text is hidden by the markup):
   the circle sits on the light fill instead. One pin for delivery and pickup. */
/* The logo column is narrow (370px at 1200px): the block gives way and cuts
   the address, the logo keeps its size. */
header .navbar-brand {
  flex-shrink: 0;
}

.header-icon:has(.delivery-header-choice__link),
.header-icon:has(.delivery-header-choice__link) .widget-text {
  min-width: 0;
}

.header-icon .icon > a.delivery-header-choice__link {
  height: auto;
  min-width: 0;
  max-width: 340px;
  gap: 10px;
  padding: 0 !important;
  color: var(--ink);
}

.delivery-header-choice__link > .feather {
  width: 36px;
  height: 36px;
  display: flex !important;
  flex: none;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border-radius: 50%;
  background: var(--fill);
  color: var(--brand);
  font-size: 18px;
}

/* The site's header sets every link span to 17px on a 30px line. */
.header-light .widget-text a .delivery-header-choice__text {
  min-width: 0;
  max-width: none;
  height: auto;
  gap: 0;
  font-size: inherit;
}

.header-light .widget-text a .delivery-header-choice__meta {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-caption);
  line-height: 16px;
  text-overflow: ellipsis;
}

.header-light .widget-text a .delivery-header-choice__value {
  max-width: 100%;
  font-size: var(--fs-body);
  line-height: 20px;
}

@media (min-width: 1200px) {
  .header-icon .icon > a.delivery-header-choice__link {
    height: 56px;
    padding: 0 16px 0 10px !important;
    background: var(--fill) !important;
  }

  .delivery-header-choice__link > .feather {
    background: #fff;
  }

  .delivery-header-choice__link::after {
    width: 16px;
    height: 16px;
    flex: none;
    background: currentColor;
    content: '';
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* First-visit and confirmation prompt under the block. The card sits 12px
   under the pin's circle and the arrow is drawn by the pin itself, so it
   points at the pin whatever the header shows (logo and pin now, the full
   pill on phones later) and at any width. The pin is centred in the header
   row: its 36px circle ends 18px below the middle. */
.fulfillment-prompt--desktop,
.fulfillment-prompt--mobile {
  top: calc(50% + 30px);
}

.fulfillment-prompt::before {
  display: none;
}

.delivery-header-choice__link > .feather {
  position: relative;
}

.widget-text:has(.fulfillment-prompt:not(.is-dismissing)) .delivery-header-choice__link > .feather::after {
  position: absolute;
  top: calc(100% + 4px);              /* centred on the card's top edge */
  left: 50%;
  z-index: 3;                         /* over the card (z-index 2) */
  width: 16px;
  height: 16px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--brand) 7%, #fff);  /* the first-visit card's fill */
  transform: translateX(-50%) rotate(45deg);
  content: '';
}

.widget-text:has(.fulfillment-prompt--selection_confirm:not(.is-dismissing)) .delivery-header-choice__link > .feather::after {
  border-color: transparent;
  background: var(--soft-solid);
}

/* The arrow sits 40px into the card, past its 30px corner: the card starts
   40px left of the pin's centre (bare pin on tablets, pin 10px into the pill
   on desktop). */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .fulfillment-prompt--mobile {
    left: -22px;
  }
}

@media (min-width: 1200px) {
  .fulfillment-prompt--desktop {
    left: -12px;
  }
}

/* Phones: the card is fixed full width under the 100px header (pin circle
   ends at 68px). */
@media (max-width: 575.98px) {
  .fulfillment-prompt--mobile {
    top: 80px;
  }
}

/* ── Phone header (handoff A02-A06) ───────────────────────────────────── */

/* Below 1200px, stage 0 only (body[data-fulfillment-header] is set by the
   layout). Sizes and layout from the handoff, colours, fonts, radii and
   buttons from the site; one pin for delivery and pickup.
   - The header row is 60px at every scroll position; the content and the
     category bar follow it.
   - Home page: the logo and, under the header, the address strip that
     scrolls with the page ("full"). Once it is gone fulfillment.js turns the
     header "compact": the logo leaves upwards, the address pill comes in
     from below in its place, 200ms. Other pages are compact from the start.
   - The compact header has no RO switch; the languages are in the menu. */
@media (max-width: 1199.98px) {
  body[data-fulfillment-header] header .navbar {
    height: 60px;
    min-height: 60px;
    padding: 0;
    border-bottom: 1px solid var(--light-medium-gray);
    box-shadow: none;
  }

  body[data-fulfillment-header] header .navbar > .container {
    height: 60px;
  }

  body[data-fulfillment-header] header .navbar-brand.default-logo,
  body[data-fulfillment-header] header.scrolled .navbar-brand.default-logo {
    height: 60px;
    margin: 0;
    padding: 0;
  }

  body[data-fulfillment-header] header .navbar-brand.default-logo img,
  body[data-fulfillment-header] header.scrolled .navbar-brand.default-logo img {
    width: 112px;
    height: 22px;
    margin: 0;
  }

  /* The row as in A02/A05: the logo (or the pill) on the left, then
     RO, account, cart and menu at the right edge, each a 44px tap area,
     2px apart, 6px from the edge. */
  body[data-fulfillment-header] header .navbar > .container {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 2px;
    padding: 0 6px 0 16px;
  }

  body[data-fulfillment-header="compact"] header .navbar > .container {
    padding-left: 12px;
  }

  body[data-fulfillment-header] header .navbar > .container > .col-auto:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  body[data-fulfillment-header] header .navbar > .container > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;                  /* bootstrap's column gutter from 768px */
  }

  body[data-fulfillment-header] header .navbar > .container > .text-end {
    order: 2;
    flex: none;
  }

  body[data-fulfillment-header] header .navbar > .container > .menu-order {
    order: 3;
    width: 44px;
    height: 44px;
    flex: none;
    align-self: center;
    justify-content: center;
    align-items: center;
  }

  body[data-fulfillment-header] header .navbar-toggler {
    margin: 0;
  }

  body[data-fulfillment-header] header .text-end > .header-icon {
    gap: 2px;
    align-items: center;
  }

  body[data-fulfillment-header] header .text-end > .header-icon > .widget-text,
  body[data-fulfillment-header] header .text-end > .header-icon > .header-cart-icon,
  body[data-fulfillment-header] header .text-end .header-cart {
    height: 44px;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  body[data-fulfillment-header] header .text-end > .header-icon > .widget-text.icon,
  body[data-fulfillment-header] header .text-end > .header-icon > .header-cart-icon,
  body[data-fulfillment-header] header .text-end .header-cart {
    width: 44px;
  }

  body[data-fulfillment-header] header .text-end .widget-text.icon > a,
  body[data-fulfillment-header] header .text-end .header-cart > a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }

  body[data-fulfillment-header] header .text-end .widget-text.icon > a > .feather {
    margin: 0 !important;
  }

  /* The cart count at the tap area's top right, as in A06. */
  body[data-fulfillment-header] header .text-end .header-cart > a .cart-count {
    top: 5px;
    right: 4px;
    left: auto;
  }

  body[data-fulfillment-header] header .text-end .dropdown-toggle {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 8px;
  }

  body[data-fulfillment-header] .top-space-margin {
    margin-top: 60px !important;      /* main.js sets 100px inline */
  }

  body[data-fulfillment-header] .cat-slide-menu {
    --sticky-top: 60px;               /* read by vendor-functions.js */
  }

  body[data-fulfillment-header] .cat-slide-menu.fixed-top {
    top: 60px;
  }

  /* Full: logo, no pill; the RO switch stays, the menu has no languages. */
  body[data-fulfillment-header="full"] header .header-icon:has(.delivery-header-choice__link),
  body[data-fulfillment-header="full"] .fulfillment-menu-langs {
    display: none !important;
  }

  /* Compact: the pill in place of the logo, no RO switch. */
  body[data-fulfillment-header] header .navbar-brand.default-logo {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
  }

  body[data-fulfillment-header="compact"] header .navbar-brand.default-logo {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
  }

  body[data-fulfillment-header="compact"] header .header-icon .widget-text:has(> .dropdown-toggle) {
    display: none;
  }


  body[data-fulfillment-header="compact"] header .col-auto:has(.delivery-header-choice__link) {
    flex: 1 1 0;
    min-width: 0;
  }

  body[data-fulfillment-header="compact"] header .header-icon.ms-3:has(.delivery-header-choice__link) {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 4px 0 0 !important;
  }

  body[data-fulfillment-header="compact"] header .header-icon:has(.delivery-header-choice__link) .widget-text {
    width: 100%;
  }

  body[data-fulfillment-header="compact"] .header-icon .icon > a.delivery-header-choice__link {
    width: 100%;
    max-width: none;
    height: 46px;
    gap: 8px;
    padding: 0 10px 0 5px !important;
    border-radius: var(--r-control);
    background: var(--fill) !important;
  }

  body[data-fulfillment-header="compact"][data-fulfillment-header-animate] .header-icon .icon > a.delivery-header-choice__link {
    animation: fulfillment-pill-in 200ms ease-out;
  }

  body[data-fulfillment-header="compact"] .delivery-header-choice__link > .feather {
    width: 34px;
    height: 34px;
    background: #fff;
    font-size: 17px;
  }

  body[data-fulfillment-header="compact"] .header-light .widget-text a .delivery-header-choice__text {
    display: flex !important;           /* the markup hides it below 1200px */
    flex: 1 1 auto;
  }

  body[data-fulfillment-header="compact"] .header-light .widget-text a .delivery-header-choice__meta {
    font-size: 11px;
    font-weight: var(--fw-label);
    line-height: 14px;
    color: var(--muted);
  }

  body[data-fulfillment-header="compact"] .header-light .widget-text a .delivery-header-choice__value {
    font-size: 14px;
    font-weight: var(--fw-accent);
    line-height: 18px;
    color: var(--ink);
  }

  body[data-fulfillment-header="compact"] .delivery-header-choice__link::after {
    width: 14px;
    height: 14px;
    flex: none;
    background: var(--ink);
    content: '';
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* Nothing chosen yet: a light red pill, red text (A06). */
  body[data-fulfillment-header="compact"][data-fulfillment-selection="missing"] .header-icon .icon > a.delivery-header-choice__link {
    background: var(--soft) !important;
  }

  body[data-fulfillment-header="compact"][data-fulfillment-selection="missing"] .header-light .widget-text a :is(.delivery-header-choice__meta, .delivery-header-choice__value) {
    color: var(--brand);
  }

  body[data-fulfillment-header="compact"][data-fulfillment-selection="missing"] .delivery-header-choice__link::after {
    background: var(--brand);
  }

  /* The address strip (A02-A04): 58px, full width, the pin in a white
     circle, the meta and the address, a chevron. */
  .fulfillment-strip {
    position: relative;
    z-index: 5;
  }

  .fulfillment-strip__link {
    height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--fill);
    color: var(--ink);
    text-align: left;
  }

  .fulfillment-strip__link::after {
    width: 18px;
    height: 18px;
    flex: none;
    background: var(--ink);
    content: '';
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .fulfillment-strip__icon {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--brand);
    font-size: 18px;
  }

  .fulfillment-strip__text {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .fulfillment-strip__meta {
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--fw-label);
    line-height: 16px;
  }

  .fulfillment-strip__value {
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    font-weight: var(--fw-accent);
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The prompt on phones (A04): a white card under the strip, or under the
     compact pill on other pages, the arrow at the pin. */
  body[data-fulfillment-header] .fulfillment-strip .fulfillment-prompt--mobile {
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    left: 12px;
    width: auto;
    transform: none;
  }

  .fulfillment-strip:has(.fulfillment-prompt:not(.is-dismissing)) .fulfillment-strip__icon::after {
    position: absolute;
    top: calc(100% + 10px);           /* centred on the card's top edge */
    left: 50%;
    z-index: 6;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
    content: '';
  }

  body[data-fulfillment-header] header .fulfillment-prompt--mobile {
    top: calc(50% + 29px);            /* 12px under the compact pill's 34px circle */
  }

  /* Only the phone placement draws the arrow here: on the home page the
     header keeps just the (hidden) desktop one. */
  body[data-fulfillment-header] .widget-text:not(:has(.fulfillment-prompt--mobile:not(.is-dismissing))) .delivery-header-choice__link > .feather::after {
    display: none;
  }

  body[data-fulfillment-header] .widget-text:has(.fulfillment-prompt--mobile:not(.is-dismissing)) .delivery-header-choice__link > .feather::after {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 3px;
    background: #fff;
  }

  body[data-fulfillment-header] .fulfillment-prompt--mobile.fulfillment-prompt--first_visit,
  body[data-fulfillment-header] .fulfillment-prompt--mobile.fulfillment-prompt--selection_confirm {
    padding: 18px;
    border: 0;
    border-radius: var(--r-card);
    background: #fff;
    filter: drop-shadow(0 1px 1px rgba(40, 39, 37, .08)) drop-shadow(0 12px 24px rgba(40, 39, 37, .18));
  }

  body[data-fulfillment-header] .fulfillment-prompt--mobile .fulfillment-prompt__message {
    margin-bottom: 14px;
    color: var(--ink);
    font-size: 15px;
    font-weight: var(--fw-accent);
    line-height: 21px;
  }

  body[data-fulfillment-header] .fulfillment-prompt--mobile .fulfillment-prompt__actions {
    gap: 10px;
  }

  body[data-fulfillment-header] .fulfillment-prompt--mobile .fulfillment-prompt__button {
    height: 48px;
    flex: 1 1 0;
    font-size: var(--fs-body);
  }

  body[data-fulfillment-header] .fulfillment-prompt--mobile .fulfillment-prompt__button--secondary {
    border: 1px solid var(--line);
    background: #fff;
  }
}

@media (max-width: 575.98px) {
  /* The phone card is fixed under the compact pill (circle ends at 47px). */
  body[data-fulfillment-header] header .fulfillment-prompt--mobile {
    top: 59px;
  }
}

@keyframes fulfillment-pill-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-fulfillment-header] header .navbar-brand.default-logo {
    transition: none;
  }

  body[data-fulfillment-header="compact"] header .navbar-brand.default-logo {
    transform: none;
  }

  body[data-fulfillment-header="compact"][data-fulfillment-header-animate] .header-icon .icon > a.delivery-header-choice__link {
    animation: none;
  }
}

/* Languages at the top of the phone menu (as on Norico): the switch above,
   short codes, fitted to its content. */
.fulfillment-menu-langs {
  padding: 4px 15px 12px;             /* on the menu items' 15px text edge */
}

.fulfillment-lang-selector {
  width: fit-content;
  display: flex;
  gap: 4px;
  margin: 0;
  list-style: none;
}

.fulfillment-lang-selector__item {
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-size: var(--fs-body);
  line-height: 1;
}