@charset "UTF-8";
/* ==========================================================================
   BASIC CUSTOMIZATION POPUP — STANDALONE STYLESHEET (LP-2404)
   ==========================================================================
   Served as its own compiled entry (`/assets-css/…-popup_basic.css`) and linked
   from layout_css.rhtml only when the `basic_popup` theme setting is on.

   NOT an @import in touch/stylesheets/theme.scss on purpose: 87 touch child
   themes carry a forked full copy of theme.scss (zinglet 11,867 lines,
   caprinos-2023 12,390, yardsalepizza-sidetouch-2024 10,576), so an import
   added to the base file never reaches them and the setting would need a
   per-theme SCSS edit to do anything. Same pattern as locator-v2.scss and
   mobile_app_download_prompt.css — resolved by name across the ancestor chain
   (RsThemeAsset.names_including_scss), so a child theme can still override any
   of these partials by shipping one under the same name.

   _tokens + _breakpoints moved here from basic-touch by LP-2404: _popup_basic
   consumes the D-12 --bt-* spacing / radius / ink / paper / accent tokens and
   the bt-tablet-down mixin. The --bt-* namespace is collision-free with
   --theme-* / --extended-theme-* and inert when unreferenced. On Basic Touch
   the :root { --bt-* } block is emitted twice (theme.css + popup_basic.css)
   with identical values.
   ========================================================================== */
/* ==========================================================================
   BASIC TOUCH — DESIGN TOKENS (LP-2186 / D-12)
   ==========================================================================
   Palette, spacing, radius scales emitted as :root CSS custom properties so
   they're reachable from .rhtml inline `style` attributes and from B1's
   postMessage live preview. Mirrors corporate_server's backoffice-design-base.

   Convention: --bt-* namespace, collision-free with --theme-* and
   --extended-theme-*. SCSS variables follow the existing var()-fallback shim
   pattern (see _theme_extended_coloring.scss L21+).
   ========================================================================== */
:root {
  /* Accent ramp (orange) */
  --bt-accent-100: #ffedd5;
  --bt-accent-200: #fed7aa;
  --bt-accent-300: #fdba74;
  --bt-accent-400: #fb923c;
  --bt-accent-500: #f97316;
  --bt-accent-600: #ea580c;
  /* Ink ramp (near-black for body text + dark surfaces) */
  --bt-ink-700: #1a0f09;
  --bt-ink-800: #171210;
  --bt-ink-850: #15110f;
  --bt-ink-900: #0f0c0b;
  --bt-ink-950: #0b0908;
  /* Paper (light backgrounds) */
  --bt-paper-0: #ffffff;
  --bt-paper-50: #fff7ed;
  --bt-paper-100: #f8fafc;
  /* Warm accents + structural neutrals */
  --bt-soft: #fff2e2;
  --bt-border: #eadfd4;
  --bt-muted: #746b63;
  --bt-panel: #fffaf4;
  /* Stateful */
  --bt-state-success: #16a34a;
  --bt-state-warning: #f59e0b;
  --bt-state-danger: #dc2626;
  --bt-state-info: #475569;
  /* Spacing scale (1rem = 10px per touch _base.scss `html { font-size: 62.5% }`) */
  --bt-space-4: 0.4rem;
  --bt-space-6: 0.6rem;
  --bt-space-8: 0.8rem;
  --bt-space-10: 1.0rem;
  --bt-space-12: 1.2rem;
  --bt-space-14: 1.4rem;
  --bt-space-16: 1.6rem;
  --bt-space-18: 1.8rem;
  --bt-space-20: 2.0rem;
  --bt-space-24: 2.4rem;
  --bt-space-28: 2.8rem;
  --bt-space-32: 3.2rem;
  /* Radius scale */
  --bt-radius-pill: 999px;
  --bt-radius-sm: 10px;
  --bt-radius-md: 12px;
  --bt-radius-lg: 16px;
  --bt-radius-xl: 18px;
  --bt-radius-xxl: 22px; }

/* SCSS semantic shim — components consume THESE, not raw palette tokens.
   Retheming = set the semantic var; palette stays stable. */
/* Spacing aliases — used by mixins/utilities. Pure rem values so SCSS math works. */
/* ==========================================================================
   BASIC TOUCH — BREAKPOINTS (LP-2186 / D-12)
   ==========================================================================
   Standardised three-tier responsive system. 52.5em is the de-facto primary
   breakpoint in touch (~85% of existing @media usage); the rest are derived.
   Escape-hatch mixins (`bt-at-most`, `bt-at-least`) allow ad-hoc values when
   matching legacy widget breakpoints.
   ========================================================================== */
/* Tier boundaries (em-based — honour user font-size; max-width semantics use
   the upper edge of each tier). */
/*  640px */
/*  840px — primary, matches touch's 85%-used breakpoint */
/*  960px */
/* "tablet-down" = tablet AND below; reads as "the condensed layout side".
   Disambiguates vs. `tablet` alone which is often misread as "only tablet". */
/* Escape hatches for legacy / ad-hoc breakpoints (32em, 23.75em, 60em, etc.) */
/* ==========================================================================
   BASIC CUSTOMIZATION POPUP (LP-2285 / D-8b; moved to base touch by LP-2404)
   ==========================================================================
   Redesign of the add-to-basket / customization popup (Basket.newItem, target
   popup). Everything is scoped under .popup_basic so the touch .popup_improved
   rules are cleanly overridden and other themes are untouched. Compiled into
   the standalone popup_basic.css entry, which is only linked when the
   basic_popup theme setting is on — a shop with the setting off downloads
   nothing and its theme.css is unchanged.

   Layout:
     - Desktop (>= tablet): two columns — full-height image (.popup__media) on
       the left, scrollable body + sticky footer on the right. (UberEats /
       Pizzan desktop.)
     - Mobile (<= tablet): bottom sheet — image hero on top that scrolls away
       with the content, footer pinned. (UberEats / Pizzan mobile.)

   References: pizzan.is customizer (size/crust selector, minus icons) +
   the LP-2182 card look for visual continuity.

   COLOURS: reuse the SAME shop-configurable keys the product card uses
   (--theme-button-* for interactive, --theme-product-* for surfaces) — NO new
   colour keys. Each falls back through the existing $bt-* token (which itself
   falls back to the palette), preserving the epic's nested-var() rule.
   ========================================================================== */
/* warm-neutral soft surface */
/* Customisation-popup description — own key (LP-2360 item 3), separate from the
   deal-wizard description. Falls back to the popup muted text so unset = no
   change. Declared + guarded in basic-touch only (basic_touch_layout_vars.rhtml),
   so on a non-Basic-Touch shop running basic_popup it is simply unset and the
   fallback applies. */
/* Quantity stepper (number + / −) — dedicated key shared with the card stepper;
   unset ⇒ falls back to the product-title key (its historical default). */
/* Scoped under the #popup id so these rules out-specify the parent
   extended-mode popup styling (which is class-only — it paints
   .popup-enum__text as a button pill and .popup-set__text with a
   pseudo-element checkbox). An id beats any number of classes, so this wins
   cleanly without per-property !important whack-a-mole. */
#popup.popup_basic {
  /* DO NOT override position / top / left / transform here.
     The parent .popup_improved is position:relative inside the
     .popup-holder-improved, centred via top:50% + translateY(-50%) +
     margin:0 auto, and the holder's open/close animation slides it to
     top:-100% and sets the popup opacity:0 on close. Overriding position to
     fixed escaped the holder, so the closed (opacity:0) popup stayed pinned
     at centre and kept capturing clicks — an invisible "ghost" that blocked
     reopening. We only override the visual look + size; positioning and the
     show/hide animation stay with the parent.
     width 96rem capped at 94vw — written as width + max-width because Ruby
     Sass 3.4.19 evaluates min()/max()/clamp() as Sass functions and errors
     on mixed units (vw vs rem) instead of passing the CSS through. */
  width: 96rem;
  max-width: 94vw;
  /* % of the holder, not vh: the holder is position:fixed; height:100%, i.e.
     the VISIBLE viewport, while vh is the toolbars-hidden height on iOS
     Safari / Android Chrome. The page is pinned while the popup is open so
     the toolbars never hide, and a vh-sized box (plus the close button above
     it) would overshoot the screen. Same pattern as the parent's
     .popup_full-height { height: 96% }. The cap keeps 6rem above the box
     for the close button on short viewports (phones in landscape use this
     layout: the tablet-down breakpoint is 840px and a landscape iPhone is
     844+ wide with ~340px visible). */
  height: 82%;
  max-height: calc(100% - 12rem);
  margin: 0 auto;
  padding: 0;
  padding-bottom: 0;
  /* parent reserves room for absolute buttons; ours is in-flow */
  background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
  border-radius: var(--bt-radius-xl);
  box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.28);
  /* overflow stays visible: the close button hangs OUTSIDE the box, on the
     overlay (LP-2482). The wrapper below does the clipping instead. */
  overflow: visible;
  /* Every width in here (.popup__body, .popup-buttons_basic, the size/crust
     pills) is a flex basis or a percentage on a padded box, so the layout only
     holds under border-box. Basic Touch's own theme.css sets that globally,
     but the other basic_popup pilots run a forked theme.css that grants it to
     the legacy .popup__buttons class alone — on 1295 / 1358 / 1266 the footer
     fell back to content-box and overflowed its column by its own padding
     (right edge 1256 instead of 1200 at 1440×900), clipping the add-to-order
     price. Scoped to the popup, so nothing outside it changes. */
  /* LP-2404: the cached body carries the union of every sku's options and
     _product.js marks the ones off the hydrated sku (see updateOptions /
     data-option-skus). Base touch hides disabled set rows, but the three
     forked pilot themes predate that rule and no theme has ever hidden a
     disabled enum row, so state it here — popup_basic.css is the one
     stylesheet every basic_popup shop loads. */
  /* ---- two-column desktop layout -------------------------------------- */
  /* Full product image (not cropped); neutral surface behind it (no coloured
     filler band). Magnify-glass zoom on hover is JS-driven: transform-origin
     follows the cursor and the image scales up, clipped by overflow:hidden.
     Scaling around the cursor point keeps that pixel fixed (true magnify),
     so object-fit:contain letterboxing doesn't throw the alignment off. */
  /* crisp tracking */
  /* ---- close button --------------------------------------------------- */
  /* NB: named popup-basic__close — the parent hides .popup__close with
     `display:none !important` (improved layout uses its own close).
     LP-2482: sits on the dark overlay just above the box, right-aligned, so
     it neither covers the customization content nor takes room inside the
     popup. Room above the box: 9 % of the visible viewport on desktop, never
     under 6rem (the box is capped at 100% - 12rem), 6rem above the mobile
     sheet (see the tablet-down block); the button needs 4.8rem. */
  /* ---- header (UberEats-style: left title, price, description) --------- */
  /* ---- segmented size / crust selector -------------------------------- */
  /* Written out in full: `& + &` under the #popup.popup_basic parent compiles
     to `#popup.popup_basic .popup-segment + #popup.popup_basic .popup-segment`,
     which never matches (basic_touch.md gotcha #6, LP-2482). */
  /* selected pill — drive the whole label off :checked via :has fallback.
     Ruby Sass 3.4.19 passes standalone :has() through verbatim (gotcha #9). */
  /* ---- option rows (enum + set) --------------------------------------- */
  /* Dividers BETWEEN option sections only. The header already carries the
     single top divider (its border-bottom), so the first section after it
     gets none — fixes the "divider too much at the top". */
  /* Half-&-half (LP-2286): popup_product_options_basic emits one
     fieldset.popup-row[data-side="N"] per side, so each side is a normal
     option section and the rule above draws the divider between them. No
     extra per-side box: basic-touch carried a `.popup_basic [data-side]`
     block in _basic_deal_wizard.scss that never applied (the .popup-row rule
     right above out-specifies it — it has the #popup id), so boxing the
     sides here would CHANGE the Basic Touch popup instead of preserving it.
     LP-2404 dropped that dead block rather than reviving it. */
  /* full-width topping/ingredient rows — large tap targets (ticket req) */
  /* parent paints the checked/disabled enum text black — keep the selected
     visual on the .popup-enum__label wrapper instead (text stays on the
     stepper key). */
  /* ---- extra-topping rows: UberEats-style +/- stepper ----------------- */
  /* These rows opt out of the card look; they're a name+price row with a
     stepper on the right and a light divider between them. */
  /* free topping: strike the price + append the "(Gratuit)" chip from the
     price element's checked-free-label attribute (existing i18n key). */
  /* Fade the struck price with colour, not `opacity`: opacity creates a group
     that composites the ::after label too, and a child's `opacity: 1` can't
     undo it. Colour is per-element, so the label keeps its own accent colour. */
  /* partial free (double topping: only some of a row's units are free, e.g.
     1 of 2). Hide the per-unit price and show the JS-filled breakdown:
     full row price struck + charged remainder in red. */
  /* Neutralise the parent's free-topping display (_popup_set.scss hides the
     price + shows a :before "(Gratuit)" on .free_topping — a class the old
     _product.js toggles unreliably). Basic Touch owns free display via
     .is-free-topping (cheapest-N, add+remove), so keep the price visible and
     drop the legacy :before. */
  /* hide the count + minus until something is selected (show only "+") */
  /* ---- sticky footer: stepper + add ----------------------------------- */
  /* the min-toppings hint and the transient info line (LP-2482) share the
     footer slot and the look: a limit message in the accent colour */
  /* The +/- glyphs are CONTROLS on the quantity stepper, so they take the
     dedicated stepper key ($pop-stepper, which falls back to the title key
     when unset) — independent of the product-text/title. The topping "+"
     sits on an accent-filled button and overrides these bars to
     $pop-on-accent above. */
  /* parent floats/positions these so they overlap — force normal flex items
     so label sits left and price right (space-between). */
  /* parent appends a '|' separator after the price — drop it in our layout */
  /* ---- section collapse (LP-2482) --------------------------------------
     popup_basic_collapse decorates each section title with a summary box
     (one chip per pick) and a chevron, and hides the section body once it
     has scrolled past. The synthetic head is the one it creates for the
     size / crust chips and the per-side topping row, which have no title of
     their own: open, it is a bare chevron on the right, so the expanded
     layout keeps the body's own labels; folded, it reads like the others. */
  /* open: a right-aligned chevron only, the body keeps its own labels;
     collapsed: title + chips + chevron like the other heads */
  /* "All" / "Nothing added" / "No basil": a state, not a pick */
  /* pinned to the right edge of the first line whatever the head holds
     (title only, chips wrapping on two lines, or nothing at all on an open
     synthetic head): margin-left auto takes the free space when the summary
     is empty, align-self keeps it on the first line when the chips wrap.
     Open or folded, only the rotation changes. */
  /* direct child only: a collapsed half-&-half side must not flip the
     chevrons of the topping groups nested inside it */
  /* ====================================================================
     MOBILE — bottom sheet
     ==================================================================== */ }
  #popup.popup_basic, #popup.popup_basic *, #popup.popup_basic *::before, #popup.popup_basic *::after {
    box-sizing: border-box; }
  #popup.popup_basic .popup-set__option[data-option-disabled],
  #popup.popup_basic .popup-enum__option[data-option-disabled],
  #popup.popup_basic [data-option-group-empty] {
    display: none; }
  #popup.popup_basic .popup__wrapper {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-radius: inherit;
    /* clips the image and the scroll area to the rounded box */ }
  #popup.popup_basic #popup_form,
  #popup.popup_basic .popup__layout {
    height: 100%; }
  #popup.popup_basic .popup__layout {
    display: flex;
    align-items: stretch;
    overflow: hidden; }
  #popup.popup_basic .popup__media {
    position: relative;
    flex: 0 0 44%;
    max-width: 44%;
    overflow: hidden;
    cursor: zoom-in;
    /* magnify-glass affordance */
    /* neutral fallback only shown if the image is missing — no decorative
       filler band (reuses the product background colour key). */
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0))); }
  #popup.popup_basic .popup__media-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.12s ease-out;
    will-change: transform; }
  #popup.popup_basic .popup__media_zooming .popup__media-image {
    transition: none; }
  #popup.popup_basic .popup__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; }
  #popup.popup_basic .popup__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* reaching the end never scrolls the page behind */
    /* popup_basic_collapse shifts scrollTop itself when a section above the
       viewport folds; Chrome's scroll anchoring would shift it a second
       time (measured: the content jumped down by the folded height) */
    overflow-anchor: none;
    overflow-x: hidden;
    /* never scroll sideways (guards against overhangs) */
    -webkit-overflow-scrolling: touch;
    padding: var(--bt-space-28) var(--bt-space-28) var(--bt-space-20); }
  #popup.popup_basic .popup-basic__close {
    position: absolute;
    top: -4.8rem;
    right: 0;
    z-index: 6;
    width: 3.6rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bt-radius-pill);
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.18);
    text-decoration: none; }
  #popup.popup_basic .popup-basic__close-icon {
    position: relative;
    width: 1.6rem;
    height: 1.6rem; }
    #popup.popup_basic .popup-basic__close-icon::before, #popup.popup_basic .popup-basic__close-icon::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 0.2rem;
      background: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900)));
      border-radius: 0.2rem; }
    #popup.popup_basic .popup-basic__close-icon::before {
      transform: rotate(45deg); }
    #popup.popup_basic .popup-basic__close-icon::after {
      transform: rotate(-45deg); }
  #popup.popup_basic .popup__top {
    /* parent makes .popup__top a grid (its image+header layout); we moved
       the image out to .popup__media, so force plain block flow. */
    display: block;
    /* Same class of leak as the box-model reset above. Yard Sale's fork
       still carries its old single-column header rule —
       .popup__top { margin: 0 -3rem; padding: 3rem 3rem 3rem 31% } — written
       for the popup whose image sat BEHIND the header. Here the image has
       its own column, so that 31 % gutter indents the title by ~119 px and
       the -3rem bleeds 2 px past .popup__scroll's padding (clipped, but it
       is the last overflowing box on 1295). The header is this layout's own. */
    margin: 0;
    padding: 0;
    background: none;
    margin-bottom: var(--bt-space-20);
    padding-bottom: var(--bt-space-20);
    border-bottom: 0.1rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    /* the single divider under the header */ }
  #popup.popup_basic .popup__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--bt-space-10); }
  #popup.popup_basic .popup__title {
    margin: 0;
    font-size: 2.8rem;
    line-height: 1.12;
    font-weight: 800;
    text-align: left;
    color: var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup__price {
    /* parent .popup__price is float:right WITH margin-right:-105px (legacy
       overhang) — that negative margin made the block 105px wider than its
       column and caused a HORIZONTAL scrollbar. Reset float + all margins. */
    float: none;
    clear: both;
    margin: var(--bt-space-10) 0 0;
    font-size: 2rem;
    font-weight: 700;
    text-align: left;
    color: var(--theme-product-price-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup__price:empty {
    display: none; }
  #popup.popup_basic .popup__description {
    margin-top: var(--bt-space-12);
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--theme-popup-description-color, var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))));
    text-align: left;
    /* UNCLAMPED — show the full description/ingredients (card clamps). */ }
  #popup.popup_basic .product__calories {
    margin-top: var(--bt-space-8);
    font-size: 1.3rem;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-group_sku {
    border: 0;
    margin: 0 0 var(--bt-space-20);
    padding: 0; }
  #popup.popup_basic .popup-segment + .popup-segment {
    margin-top: var(--bt-space-16); }
  #popup.popup_basic .popup-segment__label {
    display: block;
    margin-bottom: var(--bt-space-8);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup-segment__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bt-space-8);
    margin: 0;
    padding: 0;
    list-style: none; }
  #popup.popup_basic .popup-segment__item {
    margin: 0;
    flex: 1 1 auto;
    min-width: 9rem;
    list-style: none; }
  #popup.popup_basic .popup-segment__option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.6rem;
    padding: var(--bt-space-8) var(--bt-space-14);
    border: 0.15rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-md);
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900)));
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease; }
  #popup.popup_basic .popup-segment__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0; }
  #popup.popup_basic .popup-segment__option:hover {
    border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))); }
  #popup.popup_basic .popup-segment__radio:checked + .popup-segment__text,
  #popup.popup_basic .popup-segment__radio:checked ~ .popup-segment__text {
    color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))); }
  #popup.popup_basic .popup-segment__option:has(.popup-segment__radio:checked) {
    border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    background: var(--bt-soft);
    color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))); }
  #popup.popup_basic .popup-segment__radio:disabled + .popup-segment__text {
    opacity: 0.35; }
  #popup.popup_basic .popup-row {
    border: 0;
    margin: 0 0 var(--bt-space-20);
    padding: var(--bt-space-20) 0 0; }
  #popup.popup_basic .popup-row + .popup-row,
  #popup.popup_basic .popup-group_sku + .popup-row {
    border-top: 0.1rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border))); }
  #popup.popup_basic .popup-row__title {
    margin: 0 0 var(--bt-space-12);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup-row__description {
    margin: -0.4rem 0 var(--bt-space-12);
    font-size: 1.3rem;
    color: var(--theme-popup-description-color, var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted)))); }
  #popup.popup_basic .popup-set__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--bt-space-8);
    margin: 0;
    padding: 0;
    list-style: none; }
  #popup.popup_basic .popup-set__option {
    margin: 0;
    list-style: none;
    /* parent floats these at 33.33% — full-width rows instead */
    float: none;
    width: 100%; }
  #popup.popup_basic .popup-set__label {
    display: flex;
    align-items: center;
    gap: var(--bt-space-12);
    width: 100%;
    min-height: 4.8rem;
    margin: 0;
    padding: var(--bt-space-10) var(--bt-space-14);
    border: 0.15rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-md);
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease; }
    #popup.popup_basic .popup-set__label:hover {
      border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))); }
  #popup.popup_basic .popup-set__option:has(input:checked) .popup-set__label {
    border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    background: var(--bt-soft); }
  #popup.popup_basic .popup-set__label input[type="checkbox"] {
    flex: 0 0 auto;
    /* re-show the real checkbox the parent custom-input mixin hides */
    position: static;
    opacity: 1;
    -webkit-appearance: auto;
    appearance: auto;
    width: 2rem;
    height: 2rem;
    margin: 0;
    accent-color: var(--theme-button-background-color, var(--bt-accent-500));
    cursor: pointer; }
  #popup.popup_basic .popup-set__text {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bt-space-10);
    min-width: 0;
    /* parent draws a pseudo-element checkbox at left:-21px + padding-left;
       we render a real checkbox in the flex row, so drop both. */
    padding-left: 0;
    background: transparent; }
  #popup.popup_basic .popup-set__text::before,
  #popup.popup_basic .popup-set__text::after {
    display: none; }
  #popup.popup_basic .popup-set__name {
    font-size: 1.5rem;
    font-weight: 600;
    /* Ingredient / non-stepper option names take the stepper colour key.
       Topping/supplement rows (.popup-set__option_stepper .popup-set__name)
       override this back to $pop-text below — they are the +/- button rows,
       deliberately styled differently, and stay unchanged. */
    color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)))); }
  #popup.popup_basic .popup-enum {
    display: flex;
    flex-direction: column;
    gap: var(--bt-space-8);
    margin: 0;
    padding: 0;
    list-style: none; }
  #popup.popup_basic .popup-enum__option {
    margin: 0;
    list-style: none; }
  #popup.popup_basic .popup-enum__label {
    display: flex;
    align-items: center;
    gap: var(--bt-space-12);
    width: 100%;
    min-height: 4.8rem;
    padding: var(--bt-space-10) var(--bt-space-14);
    border: 0.15rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-md);
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    cursor: pointer; }
    #popup.popup_basic .popup-enum__label:hover {
      border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500))); }
  #popup.popup_basic .popup-enum__option:has(input:checked) .popup-enum__label {
    border-color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    background: var(--bt-soft); }
  #popup.popup_basic .popup-enum__radio {
    flex: 0 0 auto;
    /* re-show the radio the parent hides (position:absolute; opacity:0) */
    position: static;
    opacity: 1;
    -webkit-appearance: auto;
    appearance: auto;
    width: 2rem;
    height: 2rem;
    margin: 0;
    accent-color: var(--theme-button-background-color, var(--bt-accent-500));
    cursor: pointer; }
  #popup.popup_basic .popup-enum__text {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bt-space-10);
    /* neutralise the parent extended-mode button-pill treatment */
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1.5rem;
    font-weight: 600;
    /* Enum option (variant) text follows the stepper colour key too. */
    color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)))); }
  #popup.popup_basic .popup-enum__radio:checked + .popup-enum__text,
  #popup.popup_basic .popup-enum__radio:disabled + .popup-enum__text {
    background: transparent;
    border: 0;
    color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)))); }
  #popup.popup_basic .popup-enum__price,
  #popup.popup_basic .popup-set__name + [data-option-price],
  #popup.popup_basic [data-option-price] {
    font-weight: 700;
    color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    white-space: nowrap; }
  #popup.popup_basic .popup-set__group-title {
    margin: var(--bt-space-12) 0 var(--bt-space-8);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-set__option_stepper {
    margin: 0;
    list-style: none; }
  #popup.popup_basic .popup-set__option_stepper .popup-set__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bt-space-12);
    min-height: 4.4rem;
    padding: var(--bt-space-10) 0;
    border-bottom: 0.1rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border))); }
  #popup.popup_basic .popup-set__option_stepper:last-child .popup-set__line {
    border-bottom: 0; }
  #popup.popup_basic .popup-set__option_stepper .popup-set__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 auto;
    background: transparent;
    padding: 0; }
  #popup.popup_basic .popup-set__option_stepper .popup-set__name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup-set__priceline {
    font-size: 1.4rem;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-set__priceline .popup-set__price {
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-set__option_stepper.is-free-topping .popup-set__price {
    text-decoration: line-through;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-set__option_stepper.is-free-topping .popup-set__price::after {
    content: attr(checked-free-label);
    /* atomic inline: stops the parent's line-through from being drawn across
       the free label — a child's `text-decoration: none` can't remove an
       ancestor's decoration line, but an inline-block isn't crossed at all. */
    display: inline-block;
    margin-left: var(--bt-space-6);
    text-decoration: none;
    font-weight: 700;
    color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    white-space: nowrap; }
  #popup.popup_basic .popup-set__price-breakdown {
    display: none; }
  #popup.popup_basic .popup-set__option_stepper.is-partial-free .popup-set__price {
    display: none; }
  #popup.popup_basic .popup-set__option_stepper.is-partial-free .popup-set__price-breakdown {
    display: inline; }
  #popup.popup_basic .popup-set__price-breakdown .popup-set__price-full {
    text-decoration: line-through;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-set__price-breakdown .popup-set__price-charged {
    margin-left: var(--bt-space-6);
    color: var(--bt-state-danger);
    font-weight: 700;
    white-space: nowrap; }
  #popup.popup_basic .free_topping .popup-set__price {
    visibility: visible; }
  #popup.popup_basic .free_topping .popup-set__price::before {
    content: none; }
  #popup.popup_basic .popup-topping-stepper {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--bt-space-8); }
  #popup.popup_basic .popup-set__option_stepper:not(.popup-set__option_active) .popup-topping-stepper__count,
  #popup.popup_basic .popup-topping-stepper__minus.is-hidden {
    display: none; }
  #popup.popup_basic .popup-topping-stepper__count {
    min-width: 1.6rem;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    /* The topping quantity number sits on the popup BACKGROUND (not inside a
       button), so it reads as plain text → product-text key, not the stepper
       key. Only the count; the +/- topping buttons keep their own colours. */
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup-topping-stepper__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: var(--bt-radius-pill);
    background: var(--bt-soft);
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900)));
    text-decoration: none;
    transition: filter 0.12s ease, opacity 0.12s ease; }
    #popup.popup_basic .popup-topping-stepper__btn:hover {
      filter: brightness(0.95); }
  #popup.popup_basic .popup-topping-stepper__plus {
    background: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    color: var(--theme-button-color, var(--bt-on-accent, var(--bt-paper-0))); }
  #popup.popup_basic .popup-topping-stepper__plus .popup-stepper__minus::before,
  #popup.popup_basic .popup-topping-stepper__plus .popup-stepper__plus::before,
  #popup.popup_basic .popup-topping-stepper__plus .popup-stepper__plus::after {
    background: var(--theme-button-color, var(--bt-on-accent, var(--bt-paper-0))); }
  #popup.popup_basic .popup-topping-stepper__plus.is-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed; }
  #popup.popup_basic .popup-buttons_basic {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--bt-space-8);
    margin: 0;
    padding: var(--bt-space-16) var(--bt-space-28);
    border-top: 0.1rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    position: static; }
  #popup.popup_basic .popup-buttons__controls {
    display: flex;
    align-items: center;
    gap: var(--bt-space-14); }
  #popup.popup_basic .popup__budget-hint,
  #popup.popup_basic .popup__flash {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    text-align: center; }
  #popup.popup_basic .popup__budget-hint[hidden],
  #popup.popup_basic .popup__flash[hidden] {
    display: none; }
  #popup.popup_basic .popup-buttons__button.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed; }
  #popup.popup_basic .popup-stepper {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    border: 0.15rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-pill);
    overflow: hidden;
    /* Soft fill so the bottom quantity stepper matches the topping stepper
       buttons ($pop-soft). Text/glyphs keep their own key ($pop-stepper). */
    background: var(--bt-soft); }
  #popup.popup_basic .popup-stepper__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4.4rem;
    text-decoration: none;
    color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))));
    /* container is now $pop-soft, so darken slightly on hover (matches the
       topping stepper button hover) rather than filling with the same soft. */ }
    #popup.popup_basic .popup-stepper__button:hover {
      filter: brightness(0.95); }
  #popup.popup_basic .popup-stepper__field {
    width: 3.4rem;
    height: 4.4rem;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900)))); }
  #popup.popup_basic .popup-stepper__minus,
  #popup.popup_basic .popup-stepper__plus {
    position: relative;
    width: 1.4rem;
    height: 1.4rem; }
    #popup.popup_basic .popup-stepper__minus::before,
    #popup.popup_basic .popup-stepper__plus::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 0.2rem;
      margin-top: -0.1rem;
      background: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))));
      border-radius: 0.2rem; }
  #popup.popup_basic .popup-stepper__plus::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.2rem;
    height: 100%;
    margin-left: -0.1rem;
    background: var(--theme-product-stepper-color, var(--theme-product-title-color, var(--bt-text, var(--bt-ink-900))));
    border-radius: 0.2rem; }
  #popup.popup_basic .popup-buttons__button {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* parent sets wrap → price drops to a clipped 2nd line */
    align-items: center;
    justify-content: space-between;
    gap: var(--bt-space-12);
    min-height: 4.8rem;
    padding: var(--bt-space-12) var(--bt-space-20);
    border-radius: var(--bt-radius-pill);
    background: var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
    color: var(--theme-button-color, var(--bt-on-accent, var(--bt-paper-0)));
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    transition: filter 0.12s ease;
    /* base bg already = button colour; darken slightly on hover (no separate
       "button hover" colour key exists, so reuse the same key + brightness) */ }
    #popup.popup_basic .popup-buttons__button:hover {
      filter: brightness(0.93); }
  #popup.popup_basic .popup-buttons__button-text,
  #popup.popup_basic .popup-buttons__button-price {
    position: static;
    float: none;
    width: auto;
    display: inline-block;
    white-space: nowrap; }
  #popup.popup_basic .popup-buttons__button-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis; }
  #popup.popup_basic .popup-buttons__button-price {
    flex: 0 0 auto; }
  #popup.popup_basic .popup-buttons__button-price::after {
    content: none; }
  #popup.popup_basic .popup-collapse__head {
    display: flex;
    align-items: center;
    gap: var(--bt-space-10);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none; }
    #popup.popup_basic .popup-collapse__head:focus-visible {
      outline: 0.2rem solid var(--theme-button-background-color, var(--bt-accent, var(--bt-accent-500)));
      outline-offset: 0.2rem; }
  #popup.popup_basic .popup-collapse__head_synthetic {
    min-height: 2.4rem;
    /* the folded head's line, so the chevron never moves */
    margin: 0 0 var(--bt-space-12);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 2.4rem;
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900))); }
  #popup.popup_basic .popup-collapse__head_synthetic .popup-collapse__title {
    display: none; }
  #popup.popup_basic .popup-collapse_collapsed > .popup-collapse__head_synthetic .popup-collapse__title {
    display: inline; }
  #popup.popup_basic .popup-collapse__title {
    flex: 0 1 auto; }
  #popup.popup_basic .popup-collapse__summary {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--bt-space-6);
    min-width: 0;
    margin-left: auto;
    text-transform: none; }
  #popup.popup_basic .popup-collapse__summary:empty {
    display: none; }
  #popup.popup_basic .popup-collapse__chip {
    display: inline-block;
    max-width: 100%;
    padding: 0.2rem 0.9rem;
    border: 0.1rem solid var(--theme-product-border-color, var(--bt-border-color, var(--bt-border)));
    border-radius: var(--bt-radius-pill);
    background: var(--theme-product-background-color, var(--bt-surface, var(--bt-paper-0)));
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--theme-product-text-color, var(--bt-text, var(--bt-ink-900)));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  #popup.popup_basic .popup-collapse__chip_muted,
  #popup.popup_basic .popup-collapse__chip_removed {
    border-style: dashed;
    font-weight: 500;
    color: var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted))); }
  #popup.popup_basic .popup-collapse__chevron {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 0.9rem;
    height: 0.9rem;
    margin: 0.7rem 0.3rem 0 auto;
    border-right: 0.2rem solid var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted)));
    border-bottom: 0.2rem solid var(--theme-product-text-color, var(--bt-text-muted, var(--bt-muted)));
    transform: rotate(-135deg);
    /* points up while the section is open */
    transition: transform 0.15s ease; }
  #popup.popup_basic .popup-collapse_collapsed > .popup-collapse__head .popup-collapse__chevron {
    transform: rotate(45deg); }
  #popup.popup_basic .popup-collapse__hidden {
    display: none !important; }
  @media screen and (max-width: 52.5em) {
    #popup.popup_basic {
      /* position:absolute (NOT fixed) — anchored to the .popup-holder-improved,
         so it slides off-screen WITH the holder on close (no ghost). */
      position: absolute;
      top: auto;
      left: 0;
      right: 0;
      bottom: 0;
      transform: none;
      width: 100%;
      max-width: 100%;
      height: auto;
      /* % of the fixed holder = the visible viewport (see the desktop note on
         vh); the 6rem left above the sheet hold the close button (4.8rem). */
      max-height: calc(100% - 6rem);
      margin: 0;
      border-radius: var(--bt-radius-xl) var(--bt-radius-xl) 0 0;
      /* The sheet's max-height bounds the scroll area through a flex column
         (wrapper > form > layout): a percentage max-height on the inner boxes
         would not resolve against this auto-height sheet, and a vh one is the
         toolbars-hidden height. Only the open state is made flex: outside
         extended mode the parent's .popup_improved { display:none } must
         keep winning while closed (improvedToggle only toggles the -visible
         class). In extended mode the popup is always display:block and the
         holder keeps .popup_animation for the 480ms close fade with the
         sheet still on screen (this layout pins top:auto), so the column
         must hold through the animation too or the scroll area unbounds
         and the footer drops mid-fade. */
      /* the whole sheet scrolls: image hero + body scroll together,
         footer pinned via sticky. */
      /* tighten so the full "Add to basket" label + price fit beside the
         stepper without ellipsis on narrow screens */ }
      #popup.popup_basic.popup_improved-visible, .popup-holder-improved.popup_animation > #popup.popup_basic {
        display: flex;
        flex-direction: column; }
      #popup.popup_basic .popup__wrapper,
      #popup.popup_basic #popup_form {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        height: auto; }
      #popup.popup_basic .popup__layout {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        display: block;
        overflow-y: auto;
        overscroll-behavior: contain;
        overflow-anchor: none;
        /* same reason as .popup__scroll above */
        -webkit-overflow-scrolling: touch; }
      #popup.popup_basic .popup__media {
        flex: none;
        max-width: 100%;
        width: 100%;
        height: 28vh;
        min-height: 18rem; }
      #popup.popup_basic .popup__body {
        display: block;
        overflow: visible; }
      #popup.popup_basic .popup__scroll {
        overflow: visible;
        padding: var(--bt-space-20) var(--bt-space-18) var(--bt-space-16); }
      #popup.popup_basic .popup-basic__close {
        right: var(--bt-space-12); }
      #popup.popup_basic .popup-buttons_basic {
        position: sticky;
        bottom: 0;
        gap: var(--bt-space-10);
        padding: var(--bt-space-12) var(--bt-space-14);
        box-shadow: 0 -0.2rem 1.2rem rgba(0, 0, 0, 0.08); }
      #popup.popup_basic .popup-buttons__button {
        padding-left: var(--bt-space-14);
        padding-right: var(--bt-space-16);
        font-size: 1.5rem; }
      #popup.popup_basic .popup-stepper__button {
        width: 3.4rem; }
      #popup.popup_basic .popup-stepper__field {
        width: 2.6rem; } }

/* ---- page scroll lock while the basic popup is open (LP-2482) --------------
   _popup.js adds this class on open and sets body's top to the negative scroll
   offset, so the page stays put behind the fixed popup holder; on close the
   class and the inline top go and the offset is restored. Pinning the body
   (rather than overflow: hidden alone) is what iOS Safari honours. */
html.html_popup-basic-visible body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden; }

/* ---- closed popup in extended mode (LP-2482 hotfix) -------------------------
   Extended mode never hides the popup: _theme_extended_mode.scss keeps
   .popup-holder-improved .popup { display: block; opacity: 0 } with the holder
   parked at top: -100%, and relies on the box being clipped. The basic popup
   box is overflow: visible (close button on the overlay) and the mobile sheet
   hangs from the holder's bottom edge, i.e. the viewport top; once the 480 ms
   close fade is over (.popup_animation gone) the flex column above no longer
   applies, the wrapper grows back to its content height and spills below the
   box into the viewport: invisible, but hit-testable, and .popup__layout is a
   scroll container with overscroll-behavior: contain, so every touch pan on the
   page was swallowed. Measured on a 390 px wide viewport: box 604 px above the
   fold, wrapper 2403 px, elementFromPoint at mid-screen = a popup row. The
   -visible and .popup_animation states are excluded so both fades still play. */
.popup-holder-improved:not(.popup-holder-improved_visible):not(.popup_animation) > #popup.popup_basic {
  display: none; }