/* Norico look for the stage-0 UI (assets/css/fulfillment.css).
   Colours, fonts and radii come from the live site: its palette in
   preload.blade.php (:root) and the measured auth pop-up, category chips,
   product cards and fields. Where the site and the stage-0 handoff differ,
   the user chose (2026-10-08): titles in Bebas Neue, selection in black
   (red only to finish), 48px fields, black-outlined secondary buttons.

   The site's values are set once, as the shared tokens on :root, so every
   stage-0 element picks them up by itself. Rules below are only for what
   tokens can't express and for clashes with the site's own CSS. */

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

:root {
  --font-ui:      var(--primary-font);  /* Inter */
  --font-display: var(--alt-font);      /* Bebas Neue: page titles, product names */

  --brand:       var(--red);            /* btn-red: finish an action */
  --brand-deep:  #b8080f;
  --accent:      var(--red);
  --on-accent:   #ffffff;
  --bg:          #ffffff;
  --sale:        var(--red);
  --soft-solid:  #ffffff;
  --select:      var(--black);          /* active category chip and RO/EN: choose */

  --ink:         var(--black);          /* body text */
  --muted:       oklch(45% .01 80);     /* product weight and description */
  --line:        var(--norico-border-color); /* product card and chip outline */
  --fill:        #f7f7f7;               /* close button */
  --soft:        var(--light-red);
  --ok:          var(--green);
  --danger:      var(--red);
  --sheet-bg:    oklch(98.5% .003 80);  /* page and pop-up background */

  --r-sheet:     var(--main-radius);    /* 8px: pop-ups, cards, fields */
  --r-card:      var(--main-radius);
  --r-field:     var(--main-radius);
  --r-photo:     var(--main-radius);
  --r-control:   50px;                  /* btn-rounded, category chip */
  --r-badge:     30px;

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

  --button-height: 48px;                /* secondary buttons and fields */
  --inset-sheet:   24px;                /* auth pop-up padding */
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.ez-btn {
  border-radius: var(--r-control);
  font-weight: var(--fw-accent);
}

/* Main button: the site's btn-medium btn-rounded btn-red. Every red button
   but the small ones is one, with ez-btn-main or without ("Livrează aici!",
   "Salvează adresa", "Este clar" don't carry it). */
.ez-btn.ez-btn-main,
.ez-btn.ez-btn-primary:not(.ez-btn-small),
.ez-btn.ez-btn-danger:not(.ez-btn-small) {
  height: 52px;
  font-size: 16px;
  font-weight: 700;
}

/* Secondary: black outline, choose rather than finish. */
.ez-btn.ez-btn-secondary {
  border: 1.5px solid var(--select);
  background: transparent;
  color: var(--select);
}

.ez-btn.ez-btn-small {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
}

/* Icon buttons: the delete bin is grey, the back arrow black. */
.ez-btn.ez-btn-ghost {
  color: var(--muted);
}

.ez-btn.ez-btn-ghost.bottom-sheet__back {
  color: var(--ink);
}

/* Segmented switch (delivery / pickup, soon / pick a time): an outlined
   pill, the active option black like the site's RO/EN and category chips. */
.delivery-address-selector__modes,
.checkout-delivery-time-mode {
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: transparent;
}

.delivery-address-selector__mode,
.checkout-delivery-time-mode__button {
  height: 40px;
  border-radius: var(--r-control);
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--fw-accent);
}

.delivery-address-selector__mode.is-active,
.checkout-delivery-time-mode__button.is-selected {
  background: var(--select);
  color: #fff;
  box-shadow: none;
}

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

.bottom-sheet-modal .bottom-sheet-modal__content {
  overflow: initial;
  background: var(--sheet-bg);
}

/* The site's pop-ups have no drag handle. */
.bottom-sheet-modal .bottom-sheet__handle {
  display: none;
}

/* Close button as the site's .product-button-close (product, cart, login):
   a 32px square with Cross.svg above the pop-up. */
.bottom-sheet-modal .bottom-sheet__close {
  top: -40px;
  right: 0;
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: var(--main-radius);
  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;
  }
}

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

.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;
}

/* Titles in Bebas Neue, as the site's page titles. */
.bottom-sheet__title,
.delivery-address-create__header h3,
.delivery-address-delete-title,
.checkout-total-modal__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 36px;
  letter-spacing: -.5px;
}

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

/* Section captions: a red bar and spaced capitals. */
.delivery-address-selector__section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-label);
  letter-spacing: .08em;
}

.delivery-address-selector__section-title::before {
  width: 20px;
  height: 4px;
  flex: none;
  border-radius: 4px;
  background: var(--brand);
  content: '';
}

/* Centred dialogs: delete confirmation, total breakdown, order fee. */
.delivery-address-delete-modal .delivery-address-delete-content,
.checkout-total-modal .checkout-total-modal__content {
  background: var(--sheet-bg);
}

.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-title {
  font-size: 32px;
  line-height: 34px;
}

.delivery-address-delete-modal .delivery-address-delete-message {
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}

.delivery-address-delete-modal .ez-btn {
  height: 52px;
  font-size: 16px;
}

/* ── Fields ───────────────────────────────────────────────────────────── */

.delivery-address-create__control,
.delivery-address-create__details-grid .delivery-address-create__control {
  height: 48px;
  padding: 0 14px;
  border-radius: var(--r-field);
  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);
  font-weight: var(--fw-accent);
  letter-spacing: 0;
  text-transform: none;
}

.delivery-address-create__divider {
  font-size: var(--fs-small);
}

.delivery-address-create__summary,
.delivery-address-create__map-address {
  border: 1px solid var(--line);
  background: #fff;
}

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

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

.fulfillment-option {
  padding: 14px 6px 14px 14px;
  border-color: var(--line);
}

.fulfillment-option.is-selected {
  border-color: var(--select);
  box-shadow: inset 0 0 0 .5px var(--select);   /* 1.5px in all */
}

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

.fulfillment-option__details {
  line-height: 18px;
}

/* "Last used": a small black chip. */
.fulfillment-option__badge {
  height: 20px;
  align-items: center;
  padding: 0 7px;
  background: var(--select);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Field text in black, as the auth pop-up's phone field: the site's
   generic rule (.form-control, input, select, textarea) paints it grey. */
:is(.delivery-address-modal, .billing-form) :is(input, select, textarea) {
  color: var(--ink);
}

/* 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. */
.cart-total .procced-checkout.ez-btn {
  display: inline-flex;
  padding: 0 22px;
  border-radius: var(--r-control);
}

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

/* A flat panel under the lines: the pop-up's background, a hairline above. */
.shopping-cart-modal .modal-footer {
  display: block;
  padding: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  border-bottom-right-radius: inherit;  /* square on the phone sheet, round in the desktop pop-up */
  border-bottom-left-radius: inherit;
  background: var(--sheet-bg);
}

/* 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 (18px). */
.shopping-cart-modal .modal-footer > .cart-total {
  margin: 0;
  padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
  background: transparent;
}

/* Rows in black 16/600, the total in red 20/700, as the site's old cart. */
.shopping-cart-modal .cart-summary__row {
  line-height: normal;
}

.shopping-cart-modal .cart-summary__label,
.shopping-cart-modal .cart-summary__value {
  color: var(--ink);
  font-size: 16px;
  font-weight: var(--fw-accent);
}

.shopping-cart-modal .cart-summary__note {
  color: var(--muted);
  font-weight: var(--fw-label);
}

.shopping-cart-modal .cart-summary__row--total,
.shopping-cart-modal .cart-summary__row--total > :last-child {
  color: var(--brand);
  font-size: 20px;
  font-weight: 700;
}

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

/* Card headings in Bebas Neue, as the handoff's card titles. Field labels
   (the comment) and the time sheet's wheel labels stay small captions. */
.checkout-fulfillment-card :is(span, h2).checkout-fulfillment-card__label {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
}

label.checkout-fulfillment-card__label {
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-accent);
  letter-spacing: 0;
  text-transform: none;
}

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

/* "Change" as in the handoff: a red link at the top right of the card,
   on the heading's line (Bebas 22 on 24px; the customer's name on 18px),
   with no hover fill. The same in every card. */
.checkout-fulfillment-card__row,
.checkout-customer-card__summary {
  align-items: flex-start;
}

.checkout-fulfillment-card__change,
.ez-btn.checkout-customer-card__edit {
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--brand);
  font-size: 14px;
  font-weight: var(--fw-accent);
  line-height: 24px;
  text-transform: none;
}

.ez-btn.checkout-customer-card__edit {
  height: 18px;
  line-height: 18px;
}

.checkout-fulfillment-card__change:hover,
.ez-btn.checkout-customer-card__edit:hover {
  background: transparent;
  color: var(--brand);
}

/* Payment and options: choosing is black. */
.checkout-payment-option:has(.checkout-payment-option__input:checked) {
  background: var(--fill);
}

.checkout-payment-option__input:checked + .checkout-payment-option__radio,
.checkout-payment-change__checkbox:checked + .checkout-payment-change__checkbox-ui {
  border-color: var(--select);
  background: var(--select);
}

.checkout-payment-option__label {
  font-size: var(--fs-body);
}

/* Fields: 48px as in the selector. */
.billing-form textarea.form-control {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  font-size: var(--fs-field);
}

.checkout-coupon__input.form-control,
.checkout-coupon__button {
  height: var(--button-height);
}

.checkout-coupon__input.form-control {
  padding: 0 14px !important;
  border-color: var(--line);
}

.ez-btn.ez-btn-gray.checkout-coupon__button {
  border: 1.5px solid var(--select);
  background: transparent;
  color: var(--select);
}

/* Phone bottom bar: flat, a hairline above, like the cart's summary. */
.checkout-mobile-submit {
  border-radius: 0;
  background: var(--sheet-bg);
  box-shadow: none;
}

.checkout-mobile-submit__total,
.checkout-mobile-submit__total .t-title {
  color: var(--brand);
  font-size: 20px;
  font-weight: 700;
}

/* Desktop order column: a card like the checkout's own (Romania draws it
   with .billing-item from its style.css). */
.checkout-order-summary {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #fff;
  color: var(--ink);
}

.checkout-order-summary > h6 {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Its totals as the cart's: rows in black 16/600, the total in red 20/700. */
.checkout-order-summary .cart-total .saving {
  color: var(--ink);
  font-size: 16px;
  font-weight: var(--fw-accent);
}

.checkout-order-summary .cart-total .total-price {
  color: var(--brand);
  font-size: 20px;
  font-weight: 700;
}

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

/* Outlined cards as in the selector, a little roomier on the page. */
.profile-delivery-addresses .fulfillment-option {
  padding: 16px 6px 16px 16px;
}

.profile-delivery-addresses .fulfillment-option__title {
  font-size: 16px;
}

.profile-delivery-addresses .fulfillment-option__details {
  font-size: 14px;
  line-height: 20px;
}

/* On the page "add" is the main red button; in the selector it stays outlined. */
.profile-delivery-addresses .ez-btn.delivery-address-selector__add {
  height: 52px;
  border: 0;
  background: var(--brand);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 700;
}

@media (hover: hover) {
  .profile-delivery-addresses .ez-btn.delivery-address-selector__add:hover {
    background: var(--brand-deep);
    color: var(--on-accent);
  }
}

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

/* The handoff's pill at every width: white, the site's outline, the pin, the
   meta and the address on two lines and a chevron; the address is red
   without a choice. On phones the full logo gives way to the mark
   (globaltemplate) and the pill takes the free room; from 1200px it is
   capped at 360px. */
.location-container {
  position: relative;
  width: auto;
  height: auto;
  --pin-x: 20px;                      /* 1px outline + 10px padding + half the 18px pin */
}

/* The logo keeps its size; the block gives way and cuts the address. */
header .navbar-brand {
  flex-shrink: 0;
}

/* The mark (28x36): the site sizes every logo image to 90/120px wide. */
header .navbar-brand.default-logo img.norico-logo-mark {
  width: 28px;
  height: 36px;
  margin-top: 0;
}

/* The logo column takes the free room up to the icons or the menu; the
   right column (menu, language, account, cart) keeps its content width. */
header .container > [class*="col-xl-3"]:has(.delivery-header-choice__link) {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

header .container:has(.delivery-header-choice__link) > [class*="col-xl-9"] {
  flex: 0 0 auto;
  width: auto;
}

.header-icon:has(.delivery-header-choice__link),
.location-container:has(.delivery-header-choice__link) {
  flex: 1 1 auto;
  min-width: 0;
}

/* 8px from the logo and from the icons on the right, as in the handoff. */
.header-icon.ms-3:has(.delivery-header-choice__link) {
  margin-right: 8px;
  margin-left: 8px !important;
}

/* The site's .location-container a makes a 36px circle. */
.location-container a.delivery-header-choice__link {
  width: auto;
  min-width: 0;
  height: 36px;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px 0 10px !important;
  border: 1px solid var(--line);
  background: #fff !important;
}

/* The handoff's outline pin (1.8px stroke) instead of the site's filled
   sprite glyph. */
.delivery-header-choice__link > svg {
  display: none;
}

.delivery-header-choice__link::before {
  width: 18px;
  height: 18px;
  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='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%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='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The handoff has no hover state; the site's header links turn red. */
.location-container a.delivery-header-choice__link:hover {
  border-color: var(--line);
  color: var(--ink);
}

body:not([data-fulfillment-selection="missing"]) .delivery-header-choice__link:hover .delivery-header-choice__value {
  color: var(--ink);
}

/* The markup hides the text below 1200px (d-none d-xl-inline-flex). */
.delivery-header-choice__link .delivery-header-choice__text {
  min-width: 0;
  height: auto;
  display: flex !important;
  flex: 1 1 auto;
  gap: 0;
}

.delivery-header-choice__meta {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  font-weight: var(--fw-label);
  line-height: 14px;
  text-overflow: ellipsis;            /* cut like the address when the pill narrows, as on BerezkaAsia */
  white-space: nowrap;
}

.delivery-header-choice__value {
  max-width: 100%;
  font-size: 13.5px;
  font-weight: var(--fw-accent);
  line-height: 17px;
}

body[data-fulfillment-selection="missing"] .delivery-header-choice__value {
  color: var(--brand);
}

.delivery-header-choice__link::after {
  width: 14px;
  height: 14px;
  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 on a phone: the pill is outlined in black, as in A03. */
@media (max-width: 1199.98px) {
  .location-container:has(.fulfillment-prompt--first_visit:not(.is-dismissing)) .delivery-header-choice__link {
    border: 1.5px solid var(--select);
  }
}

@media (min-width: 1200px) {
  .location-container {
    --pin-x: 22px;                    /* 1px outline + 12px padding + half the 18px pin */
  }

  .header-icon:has(.delivery-header-choice__link),
  .location-container:has(.delivery-header-choice__link) {
    flex: 0 1 auto;
  }

  /* 20px from the logo on desktop (G23). */
  .header-icon.ms-3:has(.delivery-header-choice__link) {
    margin-left: 20px !important;
  }

  .location-container a.delivery-header-choice__link {
    max-width: 360px;
    gap: 10px;
    padding: 0 14px 0 12px !important;
  }

  .delivery-header-choice__value {
    font-size: 14px;
    line-height: 18px;
  }
}

/* First-visit and confirmation prompt, as in the handoff. The card sits
   12px under the block, its arrow is drawn by the block at the pin, so it
   follows the pin whatever the header shows (the full pill on phones later). */
.fulfillment-prompt--desktop,
.fulfillment-prompt--mobile {
  top: calc(100% + 12px);
  left: 0;
}

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

.location-container:has(.fulfillment-prompt:not(.is-dismissing))::after {
  position: absolute;
  top: calc(100% + 5px);
  left: calc(var(--pin-x) - 7px);
  z-index: 3;                         /* over the card (z-index 2) */
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--black);
  transform: rotate(45deg);
  content: '';
}

.location-container:has(.fulfillment-prompt--selection_confirm:not(.is-dismissing))::after {
  width: 12px;
  height: 12px;
  top: calc(100% + 6px);
  left: calc(var(--pin-x) - 6px);
  border-top: 1px solid #f6c9c6;
  border-left: 1px solid #f6c9c6;
  border-radius: 0;
  background: var(--soft);
}

/* Phones: the card is fixed full width under the 65px header; the block's
   circle ends at 50px. */
@media (max-width: 575.98px) {
  .fulfillment-prompt--mobile {
    top: 62px;
    left: 12px;
    width: calc(100vw - 24px);
  }
}

/* First visit: a black card. */
.fulfillment-prompt--first_visit {
  padding: 16px;
  border: 0;
  border-radius: var(--r-card);
  background: var(--black);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  filter: none;
}

.fulfillment-prompt--first_visit .fulfillment-prompt__message {
  margin-bottom: 14px;
  color: #d8d2cc;
  font-size: 14px;
  line-height: 20px;
}

/* Confirmation: a light red plate. */
.fulfillment-prompt--selection_confirm {
  padding: 14px 14px 12px 16px;
  border: 1px solid #f6c9c6;
  border-radius: var(--r-card);
  background: var(--soft);
  filter: none;
}

.fulfillment-prompt--selection_confirm .fulfillment-prompt__message {
  color: var(--ink);
  font-size: 15px;
  font-weight: var(--fw-accent);
  line-height: 21px;
}

/* Prompt buttons: red to finish, the other one a plain link. */
.fulfillment-prompt__button {
  height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-control);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.fulfillment-prompt__button--compact {
  height: 40px;
  padding: 0 26px;
}

.fulfillment-prompt__button--secondary,
.fulfillment-prompt__button--text {
  width: auto;
  padding: 0 14px;
  border: 0;
  background: transparent;
  font-weight: var(--fw-accent);
}

.fulfillment-prompt__button--secondary {
  color: #fff;
}

.fulfillment-prompt__button--text {
  height: 40px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .fulfillment-prompt__button--secondary:hover,
  .fulfillment-prompt__button--text:hover {
    background: transparent;
  }

  .fulfillment-prompt__button--secondary:hover {
    color: #fff;
  }
}

/* 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 root; larger roots keep the site's
   size. The quantity steppers are disabled, not fields. */
.otp-input,
.otp-code-input,
.iti__selected-dial-code {
  font-size: max(var(--fs-field), 1.25rem);
}