/* ================================================================
   SimpelBesteld.nl — Bestel App styles
   All component styling lives here (no inline styles in templates).
   Everything is scoped under .bestel-app-ui.
   ================================================================ */

.bestel-app-ui{
    --font-body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-head:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

    --color-bg:#ffffff;
    --color-surface:#ffffff;
    --color-surface-2:#f3f3f1;
    --color-text:#1c1e21;
    --color-muted:#6d7075;
    --color-border:#e4e4e1;
    --color-primary:#0d3678;
    --color-on-primary:#ffffff;
    /* Order CTAs ("Bestellen" / "Bestelling plaatsen") — same as primary by
       default, override on .bestel-app-ui to give the order buttons their
       own accent colour without touching every other button. */
    --color-cta:var(--color-primary);
    --color-danger:#b23b3b;
    --color-success:#2f8f4e;
    --color-warning:#8a6d1a;
    --color-warning-bg:#fdf6e3;
    --color-accent-soft:#eef1f4;

    /* Diet / product labels — each its own colour */
    --color-veg:#2f8f4e;      /* vegetarisch — groen */
    --color-featured:#c07d2a; /* van de maand — oker */
    --color-halal:#1f8a70;    /* halal — teal */
    --color-hot:#d1541f;      /* warm — oranjerood */
    --color-gluten:#b8862b;   /* glutenvrij — tarwe/amber */
    --color-alcohol:#7b4fb0;  /* alcohol — paars */

    --radius:8px;
    --radius-sm:6px;
    --radius-pill:999px;
    --border:1px solid var(--color-border);
    --shadow-card:0 1px 2px rgba(0,0,0,.04);
    --shadow-modal:0 12px 44px rgba(0,0,0,.16);
    /* Modal/dialog open-close transition (item 12). One place to tune the
       feel of every overlay (product modal, location modal, confirm
       dialog) instead of a duration hardcoded into each one. */
    --modal-duration:.3s;
    --modal-ease:ease-out;

    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:40px;
    --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

    --container:1440px;
    --main-cols:minmax(0,7fr) minmax(320px,3fr);
    --products-grid:repeat(auto-fill,minmax(270px,1fr));
    --modal-cols:1fr 1.15fr;
    --checkout-cols:minmax(0,1fr) minmax(0,440px);
    /* Extra offset for every sticky element (category nav, cart sidebar), so
       they clear a theme's own fixed/sticky header instead of sliding under
       it. Override on .bestel-app-ui in the theme, e.g. --nav-top:80px. */
    --nav-top:0px;
    --cart-inline-display:flex;
    --cart-mobilebar-display:none;

    font-family:var(--font-body);
    color:var(--color-text);
    line-height:1.45;
    box-sizing:border-box;
}
@media (max-width:1024px){
    /* As soon as the cart would drop under the products, hide the inline cart
       and switch to the sticky button + slide-up offcanvas instead. */
    .bestel-app-ui{ --main-cols:1fr; --checkout-cols:1fr; --cart-inline-display:none; --cart-mobilebar-display:flex; }
}
@media (max-width:900px){
    .bestel-app-ui{ --modal-cols:1fr; }
}
@media (max-width:640px){
    /* 2 product cards per row instead of 1; the description is dropped at
       this width to keep the shorter cards from feeling cramped. */
    .bestel-app-ui{ --products-grid:repeat(2,1fr); }
    .bestel-app-ui .ba-product-desc{ display:none; }
    /* Badge text (Vegetarisch, Halal, …) drops to just the icon — a narrow
       2-up card can't fit the full pill without it colliding with its
       neighbour or wrapping. */
    .bestel-app-ui .ba-badge{ padding:6px; }
    .bestel-app-ui .ba-badge-label{ display:none; }
    /* "Stel samen" / "Toevoegen" (and the stepper it becomes once the
       product is in the cart) get their own full-width row below the price
       instead of squeezed next to it — both end up the same width either
       way, so switching between the two no longer shifts the card's
       layout. A bit more breathing room above that row than the card's
       other internal gaps. */
    .bestel-app-ui .ba-product-foot{ row-gap:var(--space-3); }
    .bestel-app-ui .ba-product-foot > .ba-btn,
    .bestel-app-ui .ba-product-foot > .ba-stepper{ flex:1 1 100%; width:100%; justify-content:center; }
    /* Stepper: qty grows to fill the full-width row, pushing decrement/
       increment to its far left/right edges instead of huddling in the
       middle. */
    .bestel-app-ui .ba-product-foot .ba-stepper .ba-qty{ flex:1; }
    /* Modal footer: once the price wraps onto its own line above, stretch
       the actions row (and its CTA button) to fill the full width too. */
    .bestel-app-ui .ba-modal-actions{ width:100%; }
    .bestel-app-ui .ba-modal-actions .ba-btn-cta{ flex:1; }
}

.bestel-app-ui *, .bestel-app-ui *::before, .bestel-app-ui *::after{ box-sizing:border-box; }
.bestel-app-ui [x-cloak], .bestel-app-ui[x-cloak]{ display:none !important; }
.bestel-app-ui h1, .bestel-app-ui h2, .bestel-app-ui h3, .bestel-app-ui h4, .bestel-app-ui p{ margin:0; }
.bestel-app-ui a{ color:var(--color-primary); }
.bestel-app-ui a:hover{ opacity:.85; }
.bestel-app-ui img{ max-width:100%; }
.bestel-app-ui button{ font:inherit; }
.bestel-app-ui :focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
.bestel-app-ui ::placeholder{ color:var(--color-muted); opacity:.9; }
.bestel-app-ui ::-webkit-scrollbar{ width:6px; height:6px; }
.bestel-app-ui ::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:var(--radius-pill); }
.bestel-app-ui ::-webkit-scrollbar-track{ background:transparent; }

/* ---- Generic utilities (replace one-off inline styles) ---- */
.bestel-app-ui .ba-flex{ display:flex; }
.bestel-app-ui .ba-col{ display:flex; flex-direction:column; }
.bestel-app-ui .ba-items-center{ align-items:center; }
.bestel-app-ui .ba-items-start{ align-items:flex-start; }
.bestel-app-ui .ba-between{ justify-content:space-between; }
.bestel-app-ui .ba-wrap{ flex-wrap:wrap; }
.bestel-app-ui .ba-grow{ flex:1; min-width:0; }
.bestel-app-ui .ba-none{ flex:none; }
.bestel-app-ui .ba-gap-2{ gap:var(--space-2); }
.bestel-app-ui .ba-gap-3{ gap:var(--space-3); }
.bestel-app-ui .ba-mt-2{ margin-top:var(--space-2); }
.bestel-app-ui .ba-mt-3{ margin-top:var(--space-3); }
.bestel-app-ui .ba-mt-4{ margin-top:var(--space-4); }
.bestel-app-ui .ba-free{ color:var(--color-success); font-weight:var(--fw-semibold); }
.bestel-app-ui .ba-strong{ font-weight:var(--fw-semibold); }
.bestel-app-ui .ba-mb-1{ margin-bottom:var(--space-1); }
.bestel-app-ui .ba-mb-3{ margin-bottom:var(--space-3); }
.bestel-app-ui .ba-mb-4{ margin-bottom:var(--space-4); }
.bestel-app-ui .ba-danger{ color:var(--color-danger); }
.bestel-app-ui .ba-success{ color:var(--color-success); }
.bestel-app-ui .ba-warning{ color:var(--color-warning); }

/* Layout */
.bestel-app-ui .ba-page{ max-width:var(--container); margin:0 auto; }
.bestel-app-ui .ba-main-grid{ display:grid; grid-template-columns:var(--main-cols); gap:var(--space-6); align-items:start; }
.bestel-app-ui .ba-checkout-grid{ display:grid; grid-template-columns:var(--checkout-cols); gap:var(--space-6); align-items:start; }
.bestel-app-ui .ba-products-grid{ display:grid; grid-template-columns:var(--products-grid); gap:var(--space-4); }
.bestel-app-ui .ba-col-min0{ min-width:0; }
.bestel-app-ui .ba-empty-note{ padding:var(--space-5) 0; font-size:16px; }
.bestel-app-ui .ba-py-4{ padding:var(--space-4) 0; }

/* Typography helpers */
.bestel-app-ui .ba-page-title{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:34px; letter-spacing:-.01em; margin:0 0 var(--space-5); }
.bestel-app-ui .ba-section-title{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:24px; }
.bestel-app-ui .ba-heading{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:20px; }
.bestel-app-ui .ba-muted{ color:var(--color-muted); }
.bestel-app-ui .ba-small{ font-size:13px; }

/* Search */
.bestel-app-ui .ba-search{ position:relative; z-index:21; margin:0 0 var(--space-5); }
.bestel-app-ui .ba-search .ba-search-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--color-muted); display:inline-flex; pointer-events:none; }
.bestel-app-ui .ba-search input{ padding-left:44px; }

/* Inputs */
.bestel-app-ui .ba-input, .bestel-app-ui .ba-select, .bestel-app-ui .ba-textarea{
    width:100%; padding:11px 12px; border:var(--border); border-radius:var(--radius);
    font:inherit; font-size:15px; background:var(--color-surface); color:var(--color-text);
}
.bestel-app-ui .ba-textarea{ resize:vertical; }
.bestel-app-ui .ba-input:focus, .bestel-app-ui .ba-select:focus, .bestel-app-ui .ba-textarea:focus{ border-color:var(--color-primary); outline:none; }
.bestel-app-ui .ba-input:disabled, .bestel-app-ui .ba-select:disabled{ background:var(--color-surface-2); color:var(--color-muted); }
.bestel-app-ui .ba-input.ba-invalid, .bestel-app-ui .ba-select.ba-invalid, .bestel-app-ui .ba-textarea.ba-invalid{ border-color:var(--color-danger); }
.bestel-app-ui .ba-input--sm{ padding:9px 12px; font-size:14px; }
.bestel-app-ui .ba-error-text{ color:var(--color-danger); font-size:13px; margin-top:4px; }
.bestel-app-ui .ba-label{ display:block; font-size:14px; font-weight:var(--fw-semibold); margin-bottom:6px; }
.bestel-app-ui .ba-label--sm{ font-size:13px; margin-bottom:4px; }
.bestel-app-ui .ba-label .ba-req{ color:var(--color-danger); }
.bestel-app-ui .ba-label .ba-opt{ color:var(--color-muted); font-weight:var(--fw-normal); }
.bestel-app-ui .ba-fieldset{ border:none; padding:0; margin:0; }
.bestel-app-ui .ba-form-hint{ color:var(--color-muted); font-size:12px; margin-top:4px; display:block; }

/* Buttons */
.bestel-app-ui .ba-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 16px; border:none; border-radius:var(--radius);
    background:var(--color-primary); color:var(--color-on-primary);
    font:inherit; font-weight:var(--fw-semibold); font-size:14px; cursor:pointer;
    text-decoration:none; white-space:nowrap;
    transition:filter .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bestel-app-ui .ba-btn:hover{ filter:brightness(1.22); opacity:1; color:var(--color-on-primary); box-shadow:0 2px 8px rgba(0,0,0,.14); }
.bestel-app-ui .ba-btn-lg{ width:100%; padding:14px; font-size:16px; }
.bestel-app-ui .ba-btn-cta{ padding:12px 24px; font-size:15px; }
.bestel-app-ui .ba-btn-order{ background:var(--color-cta); }
.bestel-app-ui .ba-btn-outline{
    background:var(--color-surface); color:var(--color-text); border:var(--border);
}
.bestel-app-ui .ba-btn-outline:hover{ filter:none; border-color:var(--color-primary); color:var(--color-text); }
.bestel-app-ui .ba-btn-outline.ba-btn-danger-text{ color:var(--color-danger); }
.bestel-app-ui .ba-btn:disabled, .bestel-app-ui .ba-btn.ba-disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.bestel-app-ui .ba-btn-icon{ border:none; background:none; cursor:pointer; color:var(--color-muted); display:inline-flex; align-items:center; padding:4px; }
.bestel-app-ui .ba-btn-icon:hover{ color:var(--color-text); }

/* Category nav */
.bestel-app-ui .ba-catnav-wrap{ position:sticky; top:var(--nav-top); z-index:20; background:var(--color-bg); padding:var(--space-3) 0; margin-bottom:var(--space-4); border-bottom:var(--border); }
/* Extends the sticky nav's own background upward to fill the --nav-top gap
   reserved for a theme's own fixed/sticky header. Positioned absolute
   against ba-catnav-wrap (its sticky ancestor), so it only reaches into
   that gap once ba-catnav-wrap itself is actually stuck — never while
   scrolled to the top of the page. Anything in that gap that must stay
   visible above it (e.g. .ba-search) needs a higher z-index than 20. */
.bestel-app-ui .ba-catnav{ display:flex; gap:var(--space-2); overflow-x:auto; padding-bottom:2px; cursor:grab; user-select:none; scrollbar-width:none; -ms-overflow-style:none; }
.bestel-app-ui .ba-catnav::-webkit-scrollbar{ display:none; }
.bestel-app-ui .ba-pill{
    padding:8px 15px; border-radius:var(--radius-pill); border:1px solid var(--color-border);
    background:var(--color-surface); color:var(--color-text); font:inherit; font-size:14px;
    font-weight:var(--fw-medium); cursor:pointer; white-space:nowrap; flex:none; text-decoration:none;
}
.bestel-app-ui .ba-pill:hover{ border-color:var(--color-primary); opacity:1; }
.bestel-app-ui .ba-pill.ba-active{ border-color:var(--color-primary); background:var(--color-primary); color:var(--color-on-primary); font-weight:var(--fw-semibold); }

/* Section headers */
.bestel-app-ui .ba-section{ scroll-margin-top:90px; margin-bottom:var(--space-6); }
.bestel-app-ui .ba-section:last-of-type{ margin-bottom:0; }
.bestel-app-ui .ba-section-head{ display:flex; align-items:center; gap:var(--space-3); margin:0 0 var(--space-4); }
.bestel-app-ui .ba-count{
    display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px;
    padding:0 8px; border-radius:var(--radius-pill); background:var(--color-surface-2);
    color:var(--color-muted); font-size:13px; font-weight:var(--fw-semibold);
}

/* Product card */
.bestel-app-ui .ba-product{
    background:var(--color-surface); border:var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-card); display:flex; flex-direction:column;
}
.bestel-app-ui .ba-product-media{ position:relative; aspect-ratio:4/3; background:var(--color-surface-2); border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; }
.bestel-app-ui .ba-product-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bestel-app-ui .ba-product-badges{ position:absolute; top:var(--space-3); left:var(--space-3); z-index:2; display:flex; flex-direction:row; flex-wrap:wrap; gap:6px; align-items:flex-start; width:calc(100% - var(--space-3) - var(--space-3)); }
.bestel-app-ui .ba-badge{
    display:inline-flex; align-items:center; gap:5px; color:#fff; font-size:12px;
    font-weight:var(--fw-semibold); padding:4px 10px; border-radius:var(--radius-pill);
}
.bestel-app-ui .ba-badge svg{ flex:none; }
.bestel-app-ui .ba-badge--featured{ background:var(--color-featured); }
.bestel-app-ui .ba-badge--veg{ background:var(--color-veg); }
.bestel-app-ui .ba-badge--halal{ background:var(--color-halal); }
.bestel-app-ui .ba-badge--gluten{ background:var(--color-gluten); }
.bestel-app-ui .ba-badge--hot{ background:var(--color-hot); }
.bestel-app-ui .ba-badge--alcohol{ background:var(--color-alcohol); }
.bestel-app-ui .ba-soldout-overlay{ position:absolute; inset:0; z-index:3; background:rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; }
.bestel-app-ui .ba-soldout-overlay span{ background:rgba(28,30,33,.92); color:#fff; padding:7px 16px; border-radius:var(--radius-pill); font-weight:var(--fw-semibold); font-size:14px; }
.bestel-app-ui .ba-product-body{ padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.bestel-app-ui .ba-product-title{ font-family:var(--font-head); font-weight:var(--fw-semibold); font-size:18px; line-height:1.25; cursor:pointer; }
.bestel-app-ui .ba-product-desc{ color:var(--color-muted); font-size:13px; line-height:1.45; }
.bestel-app-ui .ba-product-foot{ margin-top:auto; padding-top:var(--space-3); display:flex; align-items:center; justify-content:space-between; gap:var(--space-2) var(--space-3); flex-wrap:wrap; }
.bestel-app-ui .ba-product-foot > .ba-btn, .bestel-app-ui .ba-product-foot > .ba-stepper, .bestel-app-ui .ba-product-foot > .ba-soldout-label{ flex:none; }
/* "Stel samen" always shows regardless of cart state (unlike the plain
   +/stepper swap for quick-add products), so a product added more than
   once — each time with different options, ending up as separate cart
   lines — otherwise gives no sign any of it made it into the cart. */
.bestel-app-ui .ba-product-foot > .ba-btn{ position:relative; }
.bestel-app-ui .ba-cart-count-badge{
    position:absolute; top:-6px; right:-6px; z-index:1;
    min-width:18px; height:18px; padding:0 4px; border-radius:var(--radius-pill);
    background:var(--color-danger); color:#fff; font-size:11px; font-weight:var(--fw-bold);
    display:flex; align-items:center; justify-content:center; line-height:1;
}
.bestel-app-ui .ba-price-stack{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; min-width:0; }
.bestel-app-ui .ba-price{ font-weight:var(--fw-bold); font-size:18px; }
.bestel-app-ui .ba-price-old{ font-size:13px; color:var(--color-danger); text-decoration:line-through; font-weight:var(--fw-normal); }
.bestel-app-ui .ba-soldout-label{ display:inline-flex; align-items:center; padding:9px 16px; border-radius:var(--radius); background:var(--color-surface-2); color:var(--color-muted); font-weight:var(--fw-semibold); font-size:14px; }
.bestel-app-ui .ba-product.ba-unavailable .ba-product-media { opacity:.5; }
.bestel-app-ui .ba-product.ba-unavailable .ba-product-body{ opacity:.6; }
.bestel-app-ui .ba-product.ba-unavailable .ba-product-title{ cursor:default; }

/* Stepper */
.bestel-app-ui .ba-stepper{ display:inline-flex; align-items:stretch; border-radius:var(--radius); overflow:hidden; background:var(--color-primary); }
.bestel-app-ui .ba-stepper button{ border:none; background:none; color:var(--color-on-primary); cursor:pointer; padding:9px 12px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease, filter .15s ease; }
.bestel-app-ui .ba-stepper button:hover:not(:disabled){ background:rgba(255,255,255,.16); }
.bestel-app-ui .ba-stepper button:disabled{ opacity:.4; cursor:not-allowed; }
.bestel-app-ui .ba-stepper .ba-qty{ display:flex; align-items:center; justify-content:center; min-width:30px; text-align:center; font-size:15px; font-weight:var(--fw-semibold); color:var(--color-on-primary); }
.bestel-app-ui .ba-stepper--light{ background:var(--color-surface); border:var(--border); }
.bestel-app-ui .ba-stepper--light button{ color:var(--color-muted); }
.bestel-app-ui .ba-stepper--light button:hover:not(:disabled){ filter:none; background:var(--color-surface-2); color:var(--color-primary); }
.bestel-app-ui .ba-stepper--light .ba-qty{ color:var(--color-text); border-left:var(--border); border-right:var(--border); padding:6px 4px; }
.bestel-app-ui .ba-stepper--lg .ba-qty{ min-width:32px; }
/* Match the height of the adjacent "Toevoegen" button exactly, so the
   stepper and button line up: plain .ba-btn in the product grid card foot,
   .ba-btn-cta in the modal footer. */
.bestel-app-ui .ba-product-foot .ba-stepper{ height:38px; }
.bestel-app-ui .ba-stepper--lg{ height:46px; }
.bestel-app-ui .ba-qty-select{
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    border:none; outline:none; background:none; font:inherit; color:inherit;
    text-align:center; text-align-last:center; cursor:pointer;
}
.bestel-app-ui .ba-qty-select:focus, .bestel-app-ui .ba-qty-select:focus-visible{ outline:none; box-shadow:none; }
.bestel-app-ui .ba-stepper--sm button{ padding:6px 9px; }
.bestel-app-ui .ba-stepper--sm .ba-qty{ min-width:26px; font-size:14px; padding:6px 2px; }
.bestel-app-ui .ba-stepper--sm svg{ width:14px; height:14px; }

/* Cards / cart */
.bestel-app-ui .ba-card{
    background:var(--color-surface); border:var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-card); padding:var(--space-5);
}
.bestel-app-ui .ba-cart-aside{
    display:var(--cart-inline-display); flex-direction:column;
    max-height:calc(100vh - var(--nav-top) - var(--space-5) * 2); overflow:hidden;
    position:sticky; top:calc(var(--nav-top) + var(--space-5));
}
.bestel-app-ui .ba-cart-body{ display:flex; flex-direction:column; min-height:0; flex:1; margin-top:var(--space-4); }

/* Cart scroll region + custom JS scrollbar (item 2) */
.bestel-app-ui .ba-cart-scroll{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; border-top:var(--border); border-bottom:var(--border); }
.bestel-app-ui .ba-cart-items{ overflow-y:auto; min-height:0; flex:1; scrollbar-width:none; -ms-overflow-style:none; }
.bestel-app-ui .ba-cart-items::-webkit-scrollbar{ width:0; height:0; display:none; }
.bestel-app-ui .ba-scrollbar{ position:absolute; top:4px; bottom:4px; right:-13px; width:3px; border-radius:var(--radius-pill); background:rgba(0,0,0,.04); opacity:0; transition:opacity .2s ease; pointer-events:none; }
.bestel-app-ui .ba-cart-scroll.ba-scrollable .ba-scrollbar{ opacity:1; pointer-events:auto; }
.bestel-app-ui .ba-scrollbar-thumb{ position:absolute; left:0; right:0; border-radius:var(--radius-pill); background:rgba(0,0,0,.22); cursor:grab; transition:background .15s ease; }
.bestel-app-ui .ba-scrollbar-thumb:hover, .bestel-app-ui .ba-scrollbar-thumb.ba-dragging{ background:rgba(0,0,0,.42); }
.bestel-app-ui .ba-scrollbar-thumb.ba-dragging{ cursor:grabbing; }

.bestel-app-ui .ba-cart-items-static{ border-top:var(--border); }
.bestel-app-ui .ba-cart-item{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-3) 0; border-bottom:var(--border); position:relative; }
.bestel-app-ui .ba-cart-item:last-child{ border-bottom:none; }
.bestel-app-ui .ba-cart-item.ba-item-warning{ margin:var(--space-2) 0; border:1px solid var(--color-danger); border-radius:var(--radius); padding:var(--space-3); background:rgba(178,59,59,.06); }
.bestel-app-ui .ba-cart-item--lg{ padding:var(--space-4) 0; }
/* Cart item removal (item 13): a row leaving the list collapses its
   height smoothly instead of the list suddenly jumping shorter. Only
   applied for the duration of the leave transition (via Alpine's
   x-transition:leave) rather than permanently on .ba-cart-item, so the
   overflow:hidden it needs never clips a focus ring during normal use. */
.bestel-app-ui .ba-cart-item-collapse{
    transition:opacity var(--modal-duration) var(--modal-ease), max-height var(--modal-duration) var(--modal-ease), margin var(--modal-duration) var(--modal-ease), padding var(--modal-duration) var(--modal-ease), border-width var(--modal-duration) var(--modal-ease);
    max-height:160px; overflow:hidden;
}
.bestel-app-ui .ba-cart-item-collapse.ba-cart-item-collapse-hidden{
    opacity:0; max-height:0; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-width:0;
}
.bestel-app-ui .ba-cart-thumb{ width:56px; height:56px; flex:none; border-radius:var(--radius-sm); background:var(--color-surface-2); overflow:hidden; }
.bestel-app-ui .ba-cart-thumb--lg{ width:70px; height:70px; }
.bestel-app-ui .ba-cart-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.bestel-app-ui .ba-cart-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.bestel-app-ui .ba-cart-item-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }
.bestel-app-ui .ba-cart-item-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.bestel-app-ui .ba-cart-item-name{ font-weight:var(--fw-semibold); font-size:13px; line-height:1.3; overflow-wrap:anywhere; }
.bestel-app-ui .ba-cart-item-name--lg{ font-size:16px; }
.bestel-app-ui .ba-cart-item-summary{ color:var(--color-muted); font-size:13px; line-height:1.35; overflow-wrap:anywhere; word-break:break-word; }
.bestel-app-ui .ba-cart-item-comment{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.bestel-app-ui .ba-cart-item-controls{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:6px; }
.bestel-app-ui .ba-cart-price{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; }
.bestel-app-ui .ba-cart-price strong{ font-size:15px; }
.bestel-app-ui .ba-cart-price--lg strong{ font-size:16px; }
.bestel-app-ui .ba-icon-btn{
    flex:none; display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border:var(--border); border-radius:var(--radius-sm);
    background:var(--color-surface); color:var(--color-muted); cursor:pointer;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.bestel-app-ui .ba-icon-btn:hover{ border-color:var(--color-primary); color:var(--color-text); }
.bestel-app-ui .ba-icon-btn--danger{ color:var(--color-danger); }
.bestel-app-ui .ba-icon-btn--danger:hover{ border-color:var(--color-danger); color:var(--color-danger); background:rgba(178,59,59,.07); }
.bestel-app-ui .ba-row-line{ display:flex; justify-content:space-between; font-size:14px; color:var(--color-muted); padding:3px 0; }
.bestel-app-ui .ba-row-line--pad{ padding:6px 0; }
.bestel-app-ui .ba-row-line .ba-val{ color:var(--color-text); }
.bestel-app-ui .ba-row-total{ display:flex; justify-content:space-between; align-items:baseline; padding:var(--space-2) 0; border-top:var(--border); margin-top:var(--space-1); }
.bestel-app-ui .ba-row-total--pad{ padding:var(--space-3) 0 2px; }
.bestel-app-ui .ba-row-total .ba-total-label{ font-weight:var(--fw-bold); font-size:20px; }
.bestel-app-ui .ba-row-total .ba-total-value{ font-weight:var(--fw-bold); font-size:22px; }
.bestel-app-ui .ba-totals{ padding-top:var(--space-3); }
.bestel-app-ui .ba-cart-summary{ max-width:340px; margin-left:auto; }
.bestel-app-ui .ba-vat-note{ text-align:right; font-size:12px; }
.bestel-app-ui .ba-checkout-toolbar{ display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; align-items:flex-start; padding:var(--space-4) 0; }
@media (max-width:640px){
    /* The back-link, coupon row and totals are sized/aligned for sharing a
       wide row next to each other; on narrow screens that leaves them each
       looking cramped and off-center, so stack them and let each span the
       full width instead. */
    .bestel-app-ui .ba-checkout-toolbar{ flex-direction:column; align-items:stretch; }
    .bestel-app-ui .ba-checkout-toolbar > .ba-btn{ justify-content:center; }
    .bestel-app-ui .ba-cart-summary{ max-width:none; }
}

/* Alerts (item 6): border + icon with coloured background, like the success panel */
.bestel-app-ui .ba-alert{ display:flex; align-items:flex-start; gap:10px; border:1px solid transparent; border-radius:var(--radius); padding:12px 14px; font-size:13px; margin-top:var(--space-3); }
.bestel-app-ui .ba-alert-icon{ flex:none; width:30px; height:30px; border-radius:var(--radius-pill); display:flex; align-items:center; justify-content:center; }
.bestel-app-ui .ba-alert-icon svg{ width:16px; height:16px; }
.bestel-app-ui .ba-alert-body{ flex:1; min-width:0; align-self:center; }
.bestel-app-ui .ba-alert-danger{ background:rgba(178,59,59,.07); border-color:rgba(178,59,59,.35); color:var(--color-danger); }
.bestel-app-ui .ba-alert-danger .ba-alert-icon{ background:rgba(178,59,59,.15); }
.bestel-app-ui .ba-alert-warning{ background:var(--color-warning-bg); border-color:rgba(192,125,42,.4); color:var(--color-warning); }
.bestel-app-ui .ba-alert-warning .ba-alert-icon{ background:rgba(192,125,42,.18); }
.bestel-app-ui .ba-alert-success{ background:rgba(47,143,78,.07); border-color:rgba(47,143,78,.35); color:var(--color-success); }
.bestel-app-ui .ba-alert-success .ba-alert-icon{ background:rgba(47,143,78,.15); }

/* Status panel (free-delivery / minimum) */
.bestel-app-ui .ba-status-panel{ border:var(--border); border-radius:var(--radius); padding:var(--space-3); margin-top:var(--space-3); }
.bestel-app-ui .ba-status-panel.ba-success{ border-color:rgba(47,143,78,.4); background:rgba(47,143,78,.06); }
.bestel-app-ui .ba-status-panel.ba-warning{ border-color:rgba(192,125,42,.4); background:var(--color-warning-bg); }
.bestel-app-ui .ba-status-row{ display:flex; align-items:center; gap:var(--space-3); }
.bestel-app-ui .ba-status-row--start{ align-items:flex-start; }
.bestel-app-ui .ba-status-icon{ flex:none; width:36px; height:36px; border-radius:var(--radius-pill); display:flex; align-items:center; justify-content:center; }
.bestel-app-ui .ba-status-icon--success{ background:rgba(47,143,78,.15); color:var(--color-success); }
.bestel-app-ui .ba-status-icon--warning{ background:rgba(192,125,42,.15); color:var(--color-warning); }
.bestel-app-ui .ba-status-text{ flex:1; min-width:0; }
.bestel-app-ui .ba-status-title{ font-weight:var(--fw-semibold); margin-bottom:4px; }
.bestel-app-ui .ba-progress{ height:6px; background:rgba(0,0,0,.08); border-radius:var(--radius-pill); overflow:hidden; margin-top:6px; }
.bestel-app-ui .ba-progress-bar{ height:100%; border-radius:var(--radius-pill); background:var(--color-success); transition:width .3s ease; }
.bestel-app-ui .ba-progress-bar.ba-warn{ background:#d9a441; }

/* Segment control */
.bestel-app-ui .ba-segment{ position:relative; display:flex; border-radius:var(--radius); padding:4px; background:var(--color-primary); }
.bestel-app-ui .ba-segment-indicator{ position:absolute; background:var(--color-surface); box-shadow:var(--shadow-card); border-radius:var(--radius-sm); }
.bestel-app-ui .ba-segment button{
    display:flex; align-items:center; gap:10px; justify-content:center; flex:1 1 0;
    position:relative; z-index:1; border:none; background:transparent; cursor:pointer;
    padding:14px 12px; border-radius:var(--radius-sm); color:var(--color-on-primary);
}
.bestel-app-ui .ba-segment button.ba-seg-active{ color:var(--color-text); font-weight:var(--fw-semibold); }
.bestel-app-ui .ba-segment button svg{ flex-shrink:0; }
.bestel-app-ui .ba-segment .ba-seg-title{ display:block; font-size:14px; line-height:1; text-align:left; }
.bestel-app-ui .ba-segment .ba-seg-sub{ display:block; font-size:11px; opacity:.7; line-height:1; margin-top:4px; text-align:left; }

/* Choice rows (radio/checkbox labels) */
.bestel-app-ui .ba-choice{
    display:flex; align-items:center; gap:10px; cursor:pointer; font-size:15px;
    border:var(--border); border-radius:var(--radius); padding:11px 14px;
}
.bestel-app-ui .ba-choice:hover{ border-color:var(--color-primary); }
/* Custom radio/checkbox instead of relying on native accent-color rendering:
   some browsers (notably Safari on macOS) paint an extra dark ring around an
   accent-coloured control when checked, and radio/checkbox otherwise pick up
   slightly different native borders. Building both ourselves keeps them
   identical: same border, and checked is just a plain primary-coloured fill
   (no browser-drawn checkmark on the checkbox). */
.bestel-app-ui .ba-choice input[type="radio"],
.bestel-app-ui .ba-choice input[type="checkbox"]{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    width:18px; height:18px; flex:none; margin:0;
    border:1.5px solid var(--color-text); background:var(--color-surface);
    cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.bestel-app-ui .ba-choice input[type="radio"]{ border-radius:50%; }
.bestel-app-ui .ba-choice input[type="checkbox"]{ border-radius:4px; }
.bestel-app-ui .ba-choice input[type="radio"]:checked,
.bestel-app-ui .ba-choice input[type="checkbox"]:checked{ background:var(--color-primary); }
.bestel-app-ui .ba-choice input:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
.bestel-app-ui .ba-choice .ba-choice-label{ flex:1; min-width:0; }
.bestel-app-ui .ba-choice .ba-choice-price{ color:var(--color-muted); font-size:14px; white-space:nowrap; }
.bestel-app-ui .ba-choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:480px){ .bestel-app-ui .ba-choice-grid{ grid-template-columns:1fr; } }

/* Address grid */
.bestel-app-ui .ba-address-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-3); }
.bestel-app-ui .ba-col-6{ grid-column:span 6; }
.bestel-app-ui .ba-col-3{ grid-column:span 3; }

/* Checkout form column */
.bestel-app-ui .ba-checkout-form{ display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-4); }
.bestel-app-ui .ba-form-title{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:22px; margin:0 0 var(--space-1); }
.bestel-app-ui .ba-subhead{ display:block; font-size:14px; font-weight:var(--fw-semibold); }
.bestel-app-ui .ba-mt-1{ margin-top:var(--space-1); }
.bestel-app-ui .ba-alert--inline{ margin-top:0; }

/* Coupon */
.bestel-app-ui .ba-coupon{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.bestel-app-ui .ba-coupon-input{ width:170px; }
.bestel-app-ui .ba-coupon-btn{ min-width:118px; }
@media (max-width:640px){
    .bestel-app-ui .ba-coupon{ align-items:stretch; width:100%; }
    .bestel-app-ui .ba-coupon-input{ width:auto; flex:1; }
}
.bestel-app-ui .ba-inline-note{ display:inline-flex; align-items:center; gap:5px; }

/* Postcode */
.bestel-app-ui .ba-postcode-btn{ flex:none; min-width:96px; }

/* Mobile sticky bar */
.bestel-app-ui .ba-mobilebar{
    display:var(--cart-mobilebar-display); position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:var(--space-3) var(--space-4); background:var(--color-surface);
    border-top:var(--border); box-shadow:0 -2px 14px rgba(0,0,0,.1);
}
.bestel-app-ui .ba-count-pill{
    display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
    padding:0 7px; border-radius:var(--radius-pill); background:var(--color-primary);
    color:var(--color-on-primary); font-size:12px; font-weight:var(--fw-bold);
}
.bestel-app-ui .ba-count-pill--inverted{ background:var(--color-on-primary); color:var(--color-primary); }
.bestel-app-ui .ba-mobilebar-btn{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
    padding:14px 18px; border:none; border-radius:var(--radius); background:var(--color-primary);
    color:var(--color-on-primary); font:inherit; font-weight:var(--fw-semibold); font-size:15px; cursor:pointer;
}
.bestel-app-ui .ba-mobilebar-btn .ba-mb-label{ display:inline-flex; align-items:center; gap:8px; }

/* Mobile cart offcanvas (bottom sheet, slide-up) */
.bestel-app-ui .ba-offcanvas{
    display:none; position:fixed; inset:0; z-index:10000;
    align-items:flex-end; justify-content:center;
    background:rgba(20,22,25,.5);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
}
@media (max-width:1024px){ .bestel-app-ui .ba-offcanvas{ display:flex; } }
.bestel-app-ui .ba-offcanvas.ba-open{ opacity:1; visibility:visible; }
.bestel-app-ui .ba-offcanvas-panel{
    width:100%; max-height:85vh; overflow:hidden;
    display:flex; flex-direction:column;
    background:var(--color-surface);
    border-radius:var(--radius) var(--radius) 0 0;
    padding:var(--space-5);
    transform:translateY(100%);
    transition:transform .3s ease;
}
.bestel-app-ui .ba-offcanvas.ba-open .ba-offcanvas-panel{ transform:translateY(0); }
.bestel-app-ui .ba-offcanvas-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-2); }

/* Date / time grid */
.bestel-app-ui .ba-datetime-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:480px){ .bestel-app-ui .ba-datetime-grid{ grid-template-columns:1fr; } }

/* Modal/dialog transitions (item 12), applied via Alpine's x-transition
   classes rather than an inline duration on each element — the overlay
   fades, its box fades+pops, both timed by --modal-duration/--modal-ease. */
.bestel-app-ui .ba-modal-fade{ transition:opacity var(--modal-duration) var(--modal-ease); }
.bestel-app-ui .ba-modal-fade.ba-modal-fade-hidden{ opacity:0; }
.bestel-app-ui .ba-modal-pop{ transition:opacity var(--modal-duration) var(--modal-ease), transform var(--modal-duration) var(--modal-ease); }
.bestel-app-ui .ba-modal-pop.ba-modal-pop-hidden{ opacity:0; transform:scale(.96) translateY(8px); }

/* Cart action toast (item 15): small transient confirmation for add /
   remove / quantity-change. Above everything else (incl. modals) so it's
   never hidden behind whichever overlay just closed to trigger it.
   --toast-bottom-offset is measured in JS against whichever mobile bottom
   bar happens to be showing right now — the sticky "Bestelling" bar, or
   the offcanvas's own "Bestellen" button once it's open — so the toast
   never lands underneath either; 0 on desktop, where neither exists. The
   bottom transition lets it follow live if that offset changes while
   already showing (e.g. the mini-cart opens/closes underneath it); its
   very first position (showToast()) is set with .ba-toast-wrap-instant
   instead, skipping this, or it'd visibly slide in from wherever the
   offset last happened to be. */
.bestel-app-ui .ba-toast-wrap{
    position:fixed; left:50%; bottom:calc(var(--toast-bottom-offset, 0px) + var(--space-4));
    transform:translateX(-50%);
    /* Above the offcanvas (10000, so it still shows over the mini-cart) but
       below every modal/dialog overlay (product-modal 10010, confirm/
       location 10020) — a toast should never cover a modal that's open on
       top of it. */
    z-index:10005; pointer-events:none; max-width:calc(100vw - var(--space-5) * 2);
    transition:bottom var(--modal-duration) var(--modal-ease);
}
.bestel-app-ui .ba-toast-wrap.ba-toast-wrap-instant{ transition:none; }
.bestel-app-ui .ba-toast{
    background:var(--color-text); color:var(--color-surface);
    padding:10px 18px; border-radius:var(--radius-pill); box-shadow:var(--shadow-modal);
    font-size:14px; font-weight:var(--fw-medium); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bestel-app-ui .ba-toast-anim{ transition:opacity var(--modal-duration) var(--modal-ease), transform var(--modal-duration) var(--modal-ease); }
.bestel-app-ui .ba-toast-anim.ba-toast-anim-hidden{ opacity:0; transform:translateY(8px); }

/* Confirm dialog (custom, replaces native confirm) */
.bestel-app-ui .ba-confirm{
    position:fixed; inset:0; z-index:10020; background:rgba(20,22,25,.55);
    display:flex; align-items:center; justify-content:center; padding:var(--space-4);
}
.bestel-app-ui .ba-confirm-box{
    background:var(--color-surface); border-radius:var(--radius); box-shadow:var(--shadow-modal);
    max-width:400px; width:100%; padding:var(--space-6) var(--space-5) var(--space-5); text-align:center;
}
.bestel-app-ui .ba-confirm-icon{
    width:52px; height:52px; margin:0 auto var(--space-4); border-radius:var(--radius-pill);
    display:flex; align-items:center; justify-content:center;
    background:rgba(178,59,59,.1); color:var(--color-danger);
}
.bestel-app-ui .ba-confirm-box h3{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:20px; margin-bottom:var(--space-2); }
.bestel-app-ui .ba-confirm-box p{ color:var(--color-muted); font-size:14px; margin-bottom:var(--space-5); }
.bestel-app-ui .ba-confirm-actions{ display:flex; gap:var(--space-3); }
.bestel-app-ui .ba-confirm-actions .ba-btn{ flex:1; }
.bestel-app-ui .ba-btn-danger{ border:none; background:var(--color-danger); color:#fff; }
.bestel-app-ui .ba-btn-danger:hover{ filter:brightness(1.08); }

/* Location selection modal */
.bestel-app-ui .ba-location-box{
    background:var(--color-surface); border-radius:var(--radius); box-shadow:var(--shadow-modal);
    max-width:440px; width:100%; padding:var(--space-5);
}
.bestel-app-ui .ba-location-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.bestel-app-ui .ba-location-head h2{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:20px; }
.bestel-app-ui .ba-location-head p{ margin-top:2px; }
.bestel-app-ui .ba-location-list{ display:flex; flex-direction:column; gap:var(--space-2); max-height:60vh; overflow-y:auto; }
.bestel-app-ui .ba-location-option{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); width:100%; text-align:left;
    border:var(--border); border-radius:var(--radius); padding:14px 16px; background:var(--color-surface); cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
}
.bestel-app-ui .ba-location-option:hover{ border-color:var(--color-primary); background:var(--color-surface-2); }
.bestel-app-ui .ba-location-option.ba-active{ border-color:var(--color-primary); box-shadow:inset 0 0 0 1px var(--color-primary); }
.bestel-app-ui .ba-location-option-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bestel-app-ui .ba-location-option-name{ font-weight:var(--fw-semibold); font-size:15px; }
.bestel-app-ui .ba-location-option-sub{ color:var(--color-muted); font-size:13px; }
.bestel-app-ui .ba-location-option-chevron{ color:var(--color-muted); flex:none; }
.bestel-app-ui .ba-location-option:hover .ba-location-option-chevron{ color:var(--color-primary); }

/* Location change link */
.bestel-app-ui .ba-location-change{ color:var(--color-primary); text-decoration:underline; cursor:pointer; background:none; border:none; padding:0; font:inherit; font-size:inherit; }
.bestel-app-ui .ba-location-change:hover{ opacity:.8; }

/* Product modal */
.bestel-app-ui.ba-modal{
    position:fixed; inset:0; z-index:10010; background:rgba(20,22,25,.55);
    display:flex; align-items:center; justify-content:center; padding:var(--space-4);
}
.bestel-app-ui .ba-modal-panel{
    background:var(--color-surface); border-radius:var(--radius); box-shadow:var(--shadow-modal);
    width:min(1080px,96vw); max-height:92vh; overflow:hidden;
    position:relative;
}
/* .ba-modal-body (not the panel) carries the grid + scrolling, so the panel
   itself never scrolls — that keeps it a stable, non-moving containing
   block for the pinned close button below, on every breakpoint.
   overflow-anchor:none on both this and .ba-modal-right below stops the
   browser's own scroll-anchoring from re-adjusting scrollTop to "preserve"
   content position once a different product (a different height) swaps
   in — which otherwise silently undid the scrollTo(0,0) reset on open in
   bestel-app.js the moment the new content actually rendered in. */
.bestel-app-ui .ba-modal-body{ display:grid; grid-template-columns:var(--modal-cols); max-height:92vh; overflow-anchor:none; }
.bestel-app-ui .ba-modal-media{ position:relative; min-height:240px; background:var(--color-surface-2); }
.bestel-app-ui .ba-modal-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* The white column scrolls on its own next to the fixed photo (item 3). */
.bestel-app-ui .ba-modal-right{
    min-height:0; max-height:92vh; overflow-y:auto; overflow-anchor:none;
    scrollbar-width:none; -ms-overflow-style:none;
}
.bestel-app-ui .ba-modal-right::-webkit-scrollbar{ width:0; height:0; display:none; }
@media (max-width:900px){
    /* Below --modal-cols:1fr (same breakpoint) the photo and form stack into
       two grid rows instead of sharing one, so the whole body scrolls as a
       single unit (photo included) rather than just the white column next
       to a photo that no longer has room to stay fixed beside it. */
    .bestel-app-ui .ba-modal-media{ min-height:180px; }
    .bestel-app-ui .ba-modal-body{
        overflow-x:hidden; overflow-y:auto;
        scrollbar-width:none; -ms-overflow-style:none;
    }
    .bestel-app-ui .ba-modal-body::-webkit-scrollbar{ width:0; height:0; display:none; }
    .bestel-app-ui .ba-modal-right{ max-height:none; overflow-y:visible; }
}
.bestel-app-ui .ba-modal-head{ padding:var(--space-5) var(--space-5) var(--space-4); border-bottom:var(--border); }
/* Pinned to the panel (which never scrolls, see above) so it stays put
   top-right regardless of which part of the modal is scrolling; the round
   background keeps it legible over the photo on mobile too. */
.bestel-app-ui .ba-modal-close{
    position:absolute; top:var(--space-4); right:var(--space-4); z-index:5;
    width:36px; height:36px; padding:0; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.92); color:var(--color-text); box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.bestel-app-ui .ba-modal-close:hover{ background:var(--color-surface); }
.bestel-app-ui .ba-modal-cat{ margin-bottom:4px; }
.bestel-app-ui .ba-modal-title{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:26px; margin:0 44px 6px 0; }
.bestel-app-ui .ba-modal-allergens{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:var(--space-2); }
.bestel-app-ui .ba-modal-scroll{ padding:var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:var(--space-5); }
.bestel-app-ui .ba-group-title{ font-family:var(--font-head); font-weight:var(--fw-semibold); font-size:14px; margin:0 0 2px; }
.bestel-app-ui .ba-group-help{ margin:0 0 8px; }
.bestel-app-ui .ba-group-options{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:6px; }
@media (max-width:640px){ .bestel-app-ui .ba-group-options{ grid-template-columns:1fr; } }
.bestel-app-ui .ba-group-options .ba-choice{ font-size:13px; gap:8px; padding:9px 12px; }
.bestel-app-ui .ba-group-options .ba-choice input{ width:16px; height:16px; }
.bestel-app-ui .ba-group-options .ba-choice .ba-choice-price{ font-size:12px; }
.bestel-app-ui .ba-modal-foot{ border-top:var(--border); padding:var(--space-4) var(--space-5); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.bestel-app-ui .ba-modal-desc{ font-size:14px; }
.bestel-app-ui .ba-modal-vat{ font-size:12px; }
.bestel-app-ui .ba-fw-normal{ font-weight:var(--fw-normal); }
.bestel-app-ui .ba-modal-price{ font-weight:var(--fw-bold); font-size:24px; }
.bestel-app-ui .ba-modal-actions{ display:flex; align-items:center; gap:var(--space-3); }

/* Same overlay scrollbar as the cart (item 2), but positioned inside the
   panel's own edge instead of just outside it — the panel clips overflow
   (for the photo's rounded corners), so the cart's right:-13px would be
   cropped away here. */
.bestel-app-ui .ba-modal-panel .ba-scrollbar{ right:4px; }
.bestel-app-ui .ba-modal-panel.ba-scrollable .ba-scrollbar{ opacity:1; pointer-events:auto; }

/* Spinner */
.bestel-app-ui .ba-spinner{
    width:22px; height:22px; border:3px solid rgba(0,0,0,.15); border-top-color:var(--color-primary);
    border-radius:50%; animation:ba-spin .7s linear infinite; display:inline-block;
}
.bestel-app-ui .ba-spinner--sm{ width:14px; height:14px; border-width:2px; }
.bestel-app-ui .ba-spinner--xl{ width:34px; height:34px; }
.bestel-app-ui .ba-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); padding:var(--space-6) 0; }
.bestel-app-ui .ba-loading-text{ font-size:17px; }
.bestel-app-ui .ba-spinner--light{ border-color:rgba(255,255,255,.3); border-top-color:#fff; }
@keyframes ba-spin{ to{ transform:rotate(360deg); } }

/* Cart link (header widget) */
.bestel-app-ui .ba-cart-link{ display:inline-flex; align-items:center; gap:8px; color:var(--color-text); text-decoration:none; }
.bestel-app-ui .ba-cart-link:hover{ opacity:1; color:var(--color-primary); }
.bestel-app-ui .ba-cart-link-icon{ position:relative; display:inline-flex; }
.bestel-app-ui .ba-cart-link-badge{
    position:absolute; top:-6px; right:-8px; min-width:18px; height:18px; padding:0 5px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--radius-pill); background:var(--color-primary); color:var(--color-on-primary);
    font-size:11px; font-weight:var(--fw-bold); line-height:1;
}
.bestel-app-ui .ba-cart-link-label{ font-size:14px; font-weight:var(--fw-medium); }
@media (max-width:640px){ .bestel-app-ui .ba-cart-link-label{ display:none; } }

/* Allergen chips (product modal) */
.bestel-app-ui .ba-allergen{ display:inline-flex; align-items:center; gap:6px; border:var(--border); border-radius:var(--radius-pill); padding:3px 10px 3px 4px; font-size:13px; }
.bestel-app-ui .ba-allergen img{ width:22px; height:22px; }

/* Allergen indicator + tooltip on the product card */
.bestel-app-ui .ba-allergen-info{
    position:relative; align-self:flex-start; display:inline-flex; align-items:center; gap:5px;
    font-size:12px; color:var(--color-muted); cursor:help; outline:none;
}
.bestel-app-ui .ba-allergen-info:hover, .bestel-app-ui .ba-allergen-info:focus-visible{ color:var(--color-text); }
.bestel-app-ui .ba-allergen-info .ba-tooltip{
    position:absolute; bottom:calc(100% + 9px); left:0; z-index:40;
    min-width:150px; max-width:230px; width:max-content;
    background:var(--color-primary); color:var(--color-on-primary);
    border-radius:var(--radius-sm); padding:9px 11px; box-shadow:var(--shadow-modal);
    opacity:0; visibility:hidden; transform:translateY(4px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s ease; pointer-events:none;
}
.bestel-app-ui .ba-allergen-info:hover .ba-tooltip,
.bestel-app-ui .ba-allergen-info:focus .ba-tooltip,
.bestel-app-ui .ba-allergen-info:focus-within .ba-tooltip{ opacity:1; visibility:visible; transform:translateY(0); }
.bestel-app-ui .ba-allergen-info .ba-tooltip::after{
    content:''; position:absolute; top:100%; left:14px;
    border:5px solid transparent; border-top-color:var(--color-primary);
}
.bestel-app-ui .ba-tooltip-title{ display:block; font-size:11px; font-weight:var(--fw-semibold); opacity:.7; margin-bottom:5px; }
.bestel-app-ui .ba-tooltip-item{ display:flex; align-items:center; gap:7px; font-size:13px; padding:2px 0; }
.bestel-app-ui .ba-tooltip-item img{ width:18px; height:18px; flex:none; object-fit:contain; }