/* 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:  #b4513f;              /* hover of the red buttons, a step darker than --red (U11) */
  --accent:      var(--red);
  --on-accent:   #ffffff;
  --bg:          #ffffff;
  --sale:        var(--red);
  --soft-solid:  #ffffff;

  --ink:         var(--dark-gray);      /* body text and headings */
  --muted:       #6f6a65;              /* readable secondary text, ~5.3:1 on white (U7);
                                        --medium-gray stays for placeholders and disabled */
  --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;
  --lh-body:     22px;                  /* 16px x 1.4: several lines breathe (U1) */

  --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-size: 14px;                      /* one size for every button (U5) */
  font-weight: var(--fw-accent);
  letter-spacing: .04em;               /* uppercase needs the air */
  line-height: 1;
  text-transform: uppercase;
}

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

/* 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-accent);
  letter-spacing: .04em;
  line-height: 1;
  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: var(--ink);
  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-size: 24px;                      /* reads as a title over 16px rows (U4) */
  font-weight: 800;
  line-height: 28px;
  letter-spacing: -0.3px;
}

/* 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-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 {
    height: 30px;                     /* the 24px lettering, in logo-header.svg (24 x 78/63) */
    margin: 0;
  }

  /* The mark (ba-logo.svg): only in the compact header. */
  body[data-fulfillment-header] header .navbar-brand.default-logo img.ba-logo-mark {
    display: none;
    width: auto;
    height: 24px;
  }

  body[data-fulfillment-header="compact"] header .navbar-brand.default-logo img:not(.ba-logo-mark) {
    display: none;
  }

  body[data-fulfillment-header="compact"] header .navbar-brand.default-logo img.ba-logo-mark {
    display: block;
  }

  /* 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;
  }

  /* Compact: the full logo gives way to the mark (as on Norico's phone
     header), which comes in with the pill. */
  body[data-fulfillment-header="compact"][data-fulfillment-header-animate] header .navbar-brand.default-logo {
    animation: fulfillment-pill-in 200ms ease-out;
  }

  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 8px !important;   /* 8px after the mark */
  }

  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: var(--fs-caption);           /* 12px, not below (U7) */
    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-body);
    line-height: 22px;
  }

  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-small);
  }

  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"][data-fulfillment-header-animate] header .navbar-brand.default-logo {
    animation: 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;
}

/* Desktop: logo-header.svg already centres the lettering; the site lifted
   the old drawing by 8px (6px scrolled), which now sends it 4px high. */
@media (min-width: 1200px) {
  header .navbar-brand.default-logo img,
  header.scrolled .navbar-brand.default-logo img {
    margin-top: 0;
  }
}

/* Fields are never below 16px (--fs-field): iOS zooms smaller ones on
   focus. The site sets the phone and SMS-code fields and the country dial
   code at 1.25rem, 15px on its 12px phone root; larger roots keep the
   site's size. The quantity steppers are not fields. */
.otp-input,
.otp-code-input,
.iti__selected-dial-code {
  font-size: max(var(--fs-field), 1.25rem);
}

/* ── Header between breakpoints ───────────────────────────────────────── */

/* 992-1199px: the phone header, so the menu folds into the burger
   (navbar-expand-xl on stage 0) and opens as the site's classic phone menu,
   which the theme only styles up to 991px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body[data-fulfillment-header] header .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 60px);
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 20px 15px 0 rgba(23, 23, 23, 0.05);
  }

  body[data-fulfillment-header] header .navbar-collapse.show {
    overflow-y: auto;
  }

  body[data-fulfillment-header] header .navbar-collapse .navbar-nav {
    display: block;
    padding: 15px 15px 28px;
  }

  body[data-fulfillment-header] header .navbar-collapse .navbar-nav .nav-item {
    display: block;
  }

  body[data-fulfillment-header] header .navbar-collapse .navbar-nav .nav-link {
    display: block;
    padding: 10px 15px;
    font-size: 20px;
    line-height: 20px;
  }
}

/* The address strip sits in the page's container wherever the container
   is narrower than the screen (576px up); phones keep it edge to edge. */
.fulfillment-strip__container {
  position: relative;
}

@media (max-width: 575.98px) {
  .fulfillment-strip__container {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 576px) {
  .fulfillment-strip {
    padding: 8px 0;
  }

  .fulfillment-strip__link {
    border-radius: var(--r-control);
  }

  body[data-fulfillment-header] .fulfillment-strip .fulfillment-prompt--mobile {
    right: auto;
    left: 15px;                       /* the container's padding: the strip's edge */
  }
}

/* 1200-1399px: the logo column takes the room the menu and the icons leave,
   so the pill shows the address instead of a few letters. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  body[data-fulfillment-header] header .navbar > .container > .col-auto:first-child {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }

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

  /* A slightly smaller menu (the site's 20px / 22px) leaves the pill room
     for a whole street address. */
  body[data-fulfillment-header] header .navbar-nav .nav-link {
    padding-right: 16px;
    padding-left: 16px;
    font-size: 18px;
  }
}

/* ── Typography and contrast (U1–U11) ─────────────────────────────────── */

/* U1: the header prompt's question and the small notes under lists. */
.fulfillment-prompt__message {
  font: var(--fw-body) 15px/22px var(--font-ui);
}

.delivery-address-selector__limit,
.checkout-mobile-submit__consent {
  font-size: 13px;
  line-height: 18px;
}

/* U2: the site's 30px body line height leaks into the fields. */
.bottom-sheet-modal input,
.bottom-sheet-modal select,
.bottom-sheet-modal textarea,
#addOrder input,
#addOrder select,
#addOrder textarea {
  line-height: var(--lh-field);
}

/* U3: what is typed is ink, the hint is the site's light gray. */
.delivery-address-create input {
  color: var(--ink);
}

.delivery-address-create input::placeholder,
#addOrder input::placeholder,
#addOrder textarea::placeholder {
  color: var(--medium-gray);
}

/* U6: one eyebrow for section labels, the field label and the checkout
   cards' labels. */
.delivery-address-selector__section-title,
.delivery-address-create__field label,
.checkout-fulfillment-card__label {
  color: var(--muted);
  font: 700 12px/16px var(--font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* The city inside a card is the card's data, not a section label. */
.fulfillment-option__city {
  font-size: 13px;
  font-weight: var(--fw-label);
  letter-spacing: 0;
  text-transform: none;
}

/* U7: unavailable stays light. */
.pickup-shop-selector__choose.is-disabled {
  color: var(--medium-gray);
}

/* U8: an error is not the accent: darker red, a size up. */
.delivery-address-modal .invalid-feedback,
.delivery-address-create .invalid-feedback,
#addOrder .invalid-feedback {
  color: var(--danger-ink);
  font-size: 13px;
  line-height: 18px;
}

/* U9: neutral facts on the neutral fill, not on the warning pink. */
.delivery-address-create__eta,
.fulfillment-option__badge {
  background: var(--fill);
  color: var(--ink);
}

/* U11: the shop's name without the site's h3 tracking, like the
   addresses; the recipient's "Schimbă" in the brand colour like the
   others on the checkout. */
.fulfillment-option__title {
  letter-spacing: 0;
}

.checkout-customer-card__edit.ez-btn {
  color: var(--brand);
}

/* U10: on phones the "Livrăm tot la …?" question takes the full width,
   its two buttons go under it. */
@media (max-width: 575.98px) {
  .fulfillment-prompt--selection_confirm {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .fulfillment-prompt--selection_confirm .fulfillment-prompt__message {
    margin-bottom: 0;
  }

  .fulfillment-prompt--selection_confirm .fulfillment-prompt__actions {
    justify-content: flex-start;
  }
}