@import '_content/Lib.Components.LandingPage/Lib.Components.LandingPage.thvndq53yv.bundle.scp.css';

/* /Pages/CompleteRegistration.razor.rz.scp.css */
.page-wrapper[b-r6fx33p4qg] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 16px;
    min-height: 100%;
}

.card[b-r6fx33p4qg] {
    width: 100%;
    max-width: 420px;
    /*    background: #fff;*/
    /*    border: 1px solid #e0e0e0;*/
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    margin: 28px 24px;
}

.card-title[b-r6fx33p4qg] {
    margin: 0 0 20px 0;
    text-align: center;
}

.messagebox[b-r6fx33p4qg] {
    text-align: center;
}

/* make the form controls fill the box width */
[b-r6fx33p4qg] .k-form,
[b-r6fx33p4qg] .k-textbox,
[b-r6fx33p4qg] .k-input {
    width: 100%;
}

[b-r6fx33p4qg] .k-form-buttons {
    justify-content: center;
    margin-top: 8px;
}
/* /Pages/Kiosk.razor.rz.scp.css */
.kiosk-container[b-ne1njpbkrz] {
    padding: 30px 10px 10px 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

    .kiosk-container > div[b-ne1njpbkrz] {
        width: 200px;
        height: 200px;
        font-size: 1.2em;
        display: flex;
        justify-content: center;
        align-items: center;
    }
/* /Pages/Order.razor.rz.scp.css */
/* ── Category bar (replaces old department list) ──────────────────────── */

.depart .department-grouping[b-sf7wrbpmvu] {
    padding: 10px 5px 5px 10px;
    font-size: 1.9rem;
    font-weight:bold;
    /*margin-bottom: 10px;*/
}
.depart:not(:first-child) .department-grouping[b-sf7wrbpmvu] {
    padding: 40px 5px 5px 10px;
    font-size: 1.9rem;
    /*margin-bottom: 10px;*/
}

/* Flash the heading when the user scrolls to it from the category bar, so they
   can see they've reached the section. Added via JS (flashElement). */
.depart .department-grouping.flash-highlight[b-sf7wrbpmvu] {
    border-radius: var(--shop-border-radius, 8px);
    animation: departmentFlash-b-sf7wrbpmvu 1s linear;
}

@keyframes departmentFlash-b-sf7wrbpmvu {
    0%, 50% {
        background-color: color-mix(in srgb, var(--lp-primary, #ff7200) 60%, transparent);
    }

    25%, 75%, 100% {
        background-color: transparent;
    }
}

/* The cat-nav is position:fixed at top:var(--lp-navbar-height,56px).
   Push plu-list down so content isn't hidden under the fixed bar. */
.plu-list[b-sf7wrbpmvu] {
    margin: 10px;
    padding-top: 52px;
}

.plu-cards[b-sf7wrbpmvu] {
    display: grid;
    /* Columns are derived from the grid's own width, not the viewport, so the
       boxed layout (container capped at 1280px) keeps ~3 columns while the
       full-width layout adds more columns on wider screens automatically.
       min(100%, 380px) lets a single card shrink to the full width on phones
       instead of leaving a 380px track that overflows. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    grid-gap: 5px;
    justify-content: center;
}

/* Same metrics as the retail list's .so-empty so both pages read alike.
   Colour inherits the page text and is dimmed with opacity — a --shop-font-color
   fallback can't work in both themes (a dark fallback goes invisible on a dark
   tenant, which is exactly what happened here). */
.order-search-empty[b-sf7wrbpmvu] {
    padding: 3rem 1rem;
    text-align: center;
    color: inherit;
    opacity: .6;
    font-size: 1rem;
}
/* /Pages/PaymentRedirection.razor.rz.scp.css */
.wrapper[b-1racdyqi2y] {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width: 100%;
}
/* /Pages/Restaurants.razor.rz.scp.css */
.restaurant-wrapper[b-f4u5y1p9u5] {
    display: flex;
    flex-direction: column;
    max-width: 1280px;
    margin: 0 auto;
}

.filter-wrapper[b-f4u5y1p9u5] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 50px;
    padding: 10px;
    display: none;
}

    .filter-wrapper[b-f4u5y1p9u5] >  input {
        width: 100%;
    }

    .filter-wrapper[b-f4u5y1p9u5] >  button {
        margin-left: 5px;
    }

.top-bar[b-f4u5y1p9u5] {
    margin-top: 10px;
    padding: 10px;
}

.main[b-f4u5y1p9u5] {
    display: flex;
    flex-direction: row;
}

.side-bar[b-f4u5y1p9u5] {
    width: 320px;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

    .side-bar label[b-f4u5y1p9u5] {
        font-size: 1.4rem;
        margin-bottom: 0px;
        margin-top: 10px;
    }

    .side-bar p[b-f4u5y1p9u5] {
        display: flex;
    }

        .side-bar p[b-f4u5y1p9u5] >  span {
            margin-left: auto;
        }

.i-grid-layout[b-f4u5y1p9u5] {
    width: 100%;
}

.dialog-body[b-f4u5y1p9u5]  button {
    margin: 20px;
}

@media (min-width: 800px) {
    .top-bar[b-f4u5y1p9u5] {
        display: none;
    }
}

@media (max-width: 799px) {
    .side-bar[b-f4u5y1p9u5] {
        display: none;
    }
}
/* /Pages/ShopOrder.razor.rz.scp.css */
/* Shop order page — adapted from design/ShopList.razor.css */

.so-page[b-f5xl6g0ouh] {
    padding: 0 1rem 4rem;
}

/* ── List header ────────────────────────────────────────────────────────── */
.so-head[b-f5xl6g0ouh] {
    margin: 1.25rem 0 .5rem;
}

.so-title[b-f5xl6g0ouh] {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--shop-font-color, #18181b);
}

.so-count[b-f5xl6g0ouh] {
    margin: .3rem 0 0;
    color: color-mix(in srgb, var(--shop-font-color, #18181b) 50%, transparent);
    font-weight: 400;
    font-size: .95rem;
}

/* ── Child category thumbnails ──────────────────────────────────────────── */
.so-subcats[b-f5xl6g0ouh] {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 1rem 0 .25rem;
}

    .so-subcats[b-f5xl6g0ouh]::-webkit-scrollbar {
        display: none;
    }

.so-subcat[b-f5xl6g0ouh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 90px;
}

.so-subcat__img[b-f5xl6g0ouh] {
    width: 90px;
    height: 90px;
    border-radius: var(--shop-border-radius, 10px);
    overflow: hidden;
    background: var(--shop-bg, #f5f5f7);
    border: 1.5px solid color-mix(in srgb, var(--shop-font-color, #18181b) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .so-subcat__img img[b-f5xl6g0ouh] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .3s ease;
    }

.so-subcat:hover .so-subcat__img[b-f5xl6g0ouh] {
    border-color: var(--lp-primary, #ff7200);
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--lp-primary, #ff7200) 30%, transparent);
}

    .so-subcat:hover .so-subcat__img img[b-f5xl6g0ouh] {
        transform: scale(1.06);
    }

.so-subcat--active .so-subcat__img[b-f5xl6g0ouh] {
    border-color: var(--lp-primary, #ff7200);
    border-width: 2px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-primary, #ff7200) 15%, transparent);
}

.so-subcat__name[b-f5xl6g0ouh] {
    font-size: .78rem;
    font-weight: 500;
    text-align: center;
    color: var(--shop-font-color, #18181b);
    line-height: 1.3;
    word-break: break-word;
}

.so-subcat--active .so-subcat__name[b-f5xl6g0ouh] {
    color: var(--lp-primary, #ff7200);
    font-weight: 700;
}

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.so-filter-wrap[b-f5xl6g0ouh] {
    padding-bottom: .5rem;
}

/* ── Category heading ───────────────────────────────────────────────────── */
.depart .department-grouping[b-f5xl6g0ouh] {
    padding: 10px 5px 5px 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.depart:not(:first-child) .department-grouping[b-f5xl6g0ouh] {
    padding-top: 2.5rem;
}

/* ── List toolbar (result count + page size) ────────────────────────────── */
.so-listbar[b-f5xl6g0ouh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.so-showing[b-f5xl6g0ouh] {
    color: color-mix(in srgb, var(--shop-font-color, #18181b) 55%, transparent);
    font-size: .9rem;
}

.so-pagesize[b-f5xl6g0ouh] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    color: color-mix(in srgb, var(--shop-font-color, #18181b) 70%, transparent);
}

    .so-pagesize select[b-f5xl6g0ouh] {
        font: inherit;
        font-size: .9rem;
        padding: .35rem 1.6rem .35rem .6rem;
        border-radius: var(--shop-border-radius, 8px);
        border: 1.5px solid color-mix(in srgb, var(--shop-font-color, #18181b) 16%, transparent);
        background: var(--shop-surface, #fff);
        color: var(--shop-font-color, #18181b);
        cursor: pointer;
    }

/* ── Product grid ───────────────────────────────────────────────────────── */
.plu-list[b-f5xl6g0ouh] {
    margin-top: .5rem;
}

.plu-cards[b-f5xl6g0ouh] {
    display: grid;
    /* minmax(0, ...) so a card's unbreakable content (the swatch strip) can
       never widen its column. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 1100px) {
    .plu-cards[b-f5xl6g0ouh] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* One card per row at tablet width and below, as Trademax does: the image and
   its swatches get the full width instead of two cramped columns. */
@media (max-width: 768px) {
    .plu-cards[b-f5xl6g0ouh] {
        grid-template-columns: minmax(0, 1fr);
        gap: .75rem;
    }
}

@media (max-width: 720px) {
    .so-page[b-f5xl6g0ouh] {
        padding-top: 1rem;
    }

    .so-title[b-f5xl6g0ouh] {
        font-size: 1.5rem;
    }
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.so-empty[b-f5xl6g0ouh] {
    text-align: center;
    padding: 3rem 1rem;
    color: #8a8a93;
    font-size: 1rem;
}

/* ── Loading skeleton ─────────────────────────────────────────────────────
   Mirrors RetailPluCard's footprint (square media on top, then name/desc lines
   and a foot row with a price bar + add button) so the grid doesn't jump when
   the real cards arrive. Reuses the same --shop-* tokens as the card, with the
   shimmer tinted off --shop-font-color so it follows the tenant theme + dark. */
.so-skel-card[b-f5xl6g0ouh] {
    display: flex;
    flex-direction: column;
    background: var(--shop-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 10%, transparent);
    border-radius: 12px;
    overflow: hidden;
}

.so-skel-media[b-f5xl6g0ouh] {
    aspect-ratio: 1 / 1;
}

.so-skel-body[b-f5xl6g0ouh] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .85rem .9rem 1rem;
    flex: 1;
}

.so-skel-line[b-f5xl6g0ouh] {
    height: 14px;
    border-radius: 6px;
}

.so-skel-line--title[b-f5xl6g0ouh] {
    height: 16px;
    width: 85%;
}

.so-skel-line--desc[b-f5xl6g0ouh] {
    width: 60%;
}

.so-skel-line--price[b-f5xl6g0ouh] {
    height: 20px;
    width: 40%;
}

.so-skel-foot[b-f5xl6g0ouh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: .65rem;
}

.so-skel-btn[b-f5xl6g0ouh] {
    width: 40px;
    height: 40px;
    border-radius: var(--shop-border-radius, 8px);
    flex-shrink: 0;
}

/* Filter-bar placeholder — mirrors ProductFilter's .pf-bar (All-filters button,
   a facet, and a right-aligned sort button). */
.so-skel-filterbar[b-f5xl6g0ouh] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .75rem 0 .5rem;
}

.so-skel-fbtn[b-f5xl6g0ouh] {
    height: 40px;
    width: 92px;
    border-radius: var(--shop-border-radius, 8px);
    flex-shrink: 0;
}

.so-skel-fbtn--all[b-f5xl6g0ouh] {
    width: 120px;
}

.so-skel-fbtn--end[b-f5xl6g0ouh] {
    margin-left: auto;
    width: 104px;
}

.so-skel-media[b-f5xl6g0ouh],
.so-skel-line[b-f5xl6g0ouh],
.so-skel-btn[b-f5xl6g0ouh],
.so-skel-fbtn[b-f5xl6g0ouh] {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--shop-font-color, #18181b) 10%, transparent);
}

    .so-skel-media[b-f5xl6g0ouh]::after,
    .so-skel-line[b-f5xl6g0ouh]::after,
    .so-skel-btn[b-f5xl6g0ouh]::after,
    .so-skel-fbtn[b-f5xl6g0ouh]::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--shop-font-color, #18181b) 12%, transparent), transparent);
        animation: so-skel-shimmer-b-f5xl6g0ouh 1.4s ease-in-out infinite;
    }

@keyframes so-skel-shimmer-b-f5xl6g0ouh {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .so-skel-media[b-f5xl6g0ouh]::after,
    .so-skel-line[b-f5xl6g0ouh]::after,
    .so-skel-btn[b-f5xl6g0ouh]::after,
    .so-skel-fbtn[b-f5xl6g0ouh]::after {
        animation: none;
    }
}

/* ── Load more ──────────────────────────────────────────────────────────── */
.so-loadmore[b-f5xl6g0ouh] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding-bottom: 1rem;
}

.so-more[b-f5xl6g0ouh] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem 1.6rem;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--shop-font-color, #18181b) 16%, transparent);
    background: var(--shop-surface, #fff);
    color: var(--shop-font-color, #18181b);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}

    .so-more:hover[b-f5xl6g0ouh] {
        border-color: var(--lp-primary, #ff7200);
        background: #f5f5f7;
    }

/* ── Numbered pagination ────────────────────────────────────────────────── */
.so-pager[b-f5xl6g0ouh] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1.5rem;
    padding-bottom: 1rem;
}

.so-pager-btn[b-f5xl6g0ouh] {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--shop-border-radius, 8px);
    border: 1.5px solid color-mix(in srgb, var(--shop-font-color, #18181b) 16%, transparent);
    background: var(--shop-surface, #fff);
    color: var(--shop-font-color, #18181b);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, color .14s ease;
}

    .so-pager-btn:hover:not(:disabled):not(.so-pager-btn--active)[b-f5xl6g0ouh] {
        border-color: var(--lp-primary, #ff7200);
    }

    .so-pager-btn:disabled[b-f5xl6g0ouh] {
        opacity: .45;
        cursor: default;
    }

.so-pager-btn--active[b-f5xl6g0ouh] {
    background: var(--lp-primary, #ff7200);
    border-color: var(--lp-primary, #ff7200);
    color: var(--shop-primary-text, #fff);
    cursor: default;
}

.so-pager-gap[b-f5xl6g0ouh] {
    min-width: 1.5rem;
    text-align: center;
    color: color-mix(in srgb, var(--shop-font-color, #18181b) 45%, transparent);
}

/* ── Cart button ────────────────────────────────────────────────────────── */
.show-order-button[b-f5xl6g0ouh] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 10px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

    .show-order-button[b-f5xl6g0ouh]  button,
    .show-order-button[b-f5xl6g0ouh]  button > span {
        width: 100%;
    }

/* ── Dark fallbacks ───────────────────────────────────────────────────────
   Theme.cs emits a --shop-* token only for colours the tenant actually picked,
   so an un-themed shop falls back to the light literals above. Keeping
   var(--shop-*, …) here means a tenant palette still wins in both modes; only
   the fallback flips. Palette matches CartDrawer. This file has no local token
   block, so the overrides are per-rule. Ink on the brand colour is left alone. */
@media (prefers-color-scheme: dark) {
    .so-title[b-f5xl6g0ouh],
    .so-subcat__name[b-f5xl6g0ouh],
    .so-pagesize select[b-f5xl6g0ouh],
    .so-more[b-f5xl6g0ouh],
    .so-pager-btn[b-f5xl6g0ouh] {
        color: var(--shop-font-color, #f1f1f1);
    }

    .so-count[b-f5xl6g0ouh] {
        color: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 50%, transparent);
    }

    .so-showing[b-f5xl6g0ouh] {
        color: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 55%, transparent);
    }

    .so-pagesize[b-f5xl6g0ouh] {
        color: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 70%, transparent);
    }

    .so-pager-gap[b-f5xl6g0ouh] {
        color: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 45%, transparent);
    }

    .so-subcat__img[b-f5xl6g0ouh] {
        background: var(--shop-bg, #262629);
        border-color: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 14%, transparent);
    }

    .so-pagesize select[b-f5xl6g0ouh],
    .so-more[b-f5xl6g0ouh],
    .so-pager-btn[b-f5xl6g0ouh] {
        border-color: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 22%, transparent);
        background: var(--shop-surface, #1e1e1e);
    }

        .so-more:hover[b-f5xl6g0ouh] {
            background: #262629;
        }

    .so-skel-card[b-f5xl6g0ouh] {
        background: var(--shop-surface, #1e1e1e);
        border-color: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 12%, transparent);
    }

    .so-skel-fbtn[b-f5xl6g0ouh] {
        background: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 14%, transparent);
    }
}
/* /Pages/Shop/AccountButton.razor.rz.scp.css */
/* Signed-in avatar. The host navbar sizes the button box (38px in ShopNavbar,
   42px in CheckoutNavbar), so the circle just fills it — no size parameter to
   keep in sync. padding:0 because CheckoutNavbar's .co-icon doesn't reset the
   browser default and the circle would sit inset. */
button[b-w5nfzmviyo] {
    padding: 0;
}

.acct-initials[b-w5nfzmviyo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--lp-primary, var(--shop-primary, #ff7200));
    color: var(--shop-primary-text, #fff);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    user-select: none;
}
/* /Pages/Shop/CartDrawer.razor.rz.scp.css */
/* Cart drawer — scoped styling for CartDrawer.razor.
   Tokens scoped under .cd / .cd-scrim so this won't bleed into other UI.
   Same shell language as the filter drawer; tunable input is --cd-primary. */

.cd[b-ylmwflrok9] {
    /* Colours source from the app/shop theme tokens (--shop-* / --lp-*) so the
       drawer follows the tenant's palette; the literals are last-resort fallbacks
       for tenants that ship no custom theme. Dark-mode fallbacks live in the
       prefers-color-scheme block below. */
    --cd-primary: var(--lp-primary, #ff7a1a);
    --cd-primary-ink: var(--shop-primary-text, #fff); /* theme: Primary button text */
    --cd-surface: var(--shop-surface, #ffffff);
    --cd-muted: var(--shop-bg, #f5f5f7);
    --cd-ink: var(--shop-font-color, #18181b);
    --cd-ink-2: var(--shop-muted, #52525b);
    /* Neutrals derive from the theme's text/surface, so they suit any palette and
       follow light/dark on their own (no literal overrides below). */
    --cd-ink-3: color-mix(in srgb, var(--cd-ink) 50%, transparent);
    --cd-border: color-mix(in srgb, var(--cd-ink) 12%, transparent);
    --cd-border-strong: color-mix(in srgb, var(--cd-ink) 20%, transparent);
    --cd-muted-2: color-mix(in srgb, var(--cd-ink) 7%, var(--cd-surface));
    /* promotion (new price, savings) vs error (remove, unavailable, warnings) */
    --cd-sale: var(--shop-promo, #e23434);
    --cd-error: var(--error-color, #dc3545);
    --cd-success: #128a4d;
    --cd-r-sm: var(--shop-border-radius, 8px);
    --cd-r-pill: 999px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 260;
    width: min(440px, 94vw);
    height: 100%;
    background: var(--cd-surface);
    box-shadow: -12px 0 40px -16px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2, .7, .2, 1);
    font-family: inherit;
    color: var(--cd-ink);
}
.cd--open[b-ylmwflrok9] { transform: translateX(0); }

/* Dark theme — matches the app's signal (main-dark.css and the branchoffice dark
   stylesheet both load via prefers-color-scheme: dark). Themed tokens keep their
   --shop-* source so a tenant's dark palette still wins; only the fallbacks flip
   to dark. Borders, muted-2 and ink-3 follow --cd-ink, so they need no entry. */
@media (prefers-color-scheme: dark) {
  .cd[b-ylmwflrok9] {
    --cd-surface: var(--shop-surface, #1e1e1e);
    --cd-muted: var(--shop-bg, #262629);
    --cd-ink: var(--shop-font-color, #f1f1f1);
    --cd-ink-2: var(--shop-muted, #b4b4bd);
    --cd-sale: var(--shop-promo, #ff5c5c);
    --cd-error: var(--error-color, #f07178);
    --cd-success: #3ec98a;
  }
}

/* ── Head ───────────────────────────────────────────────────────────────── */
.cd__head[b-ylmwflrok9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--cd-border);
  flex-shrink: 0;
}
.cd__title[b-ylmwflrok9] { display: flex; align-items: baseline; gap: .5rem; }
.cd__title strong[b-ylmwflrok9] { font-size: 1.15rem; font-weight: 800; }
.cd__title span[b-ylmwflrok9] { font-size: .9rem; color: var(--cd-ink-3); font-weight: 500; }
.cd__close[b-ylmwflrok9] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--cd-r-pill);
  border: none;
  background: var(--cd-muted);
  color: var(--cd-ink);
  cursor: pointer;
  transition: background .14s ease;
}
.cd__close:hover[b-ylmwflrok9] { background: var(--cd-muted-2); }

/* ── Order type switch (Delivery / Pickup) ──────────────────────────────────
   The switch itself is the reusable <SegmentSwitch> component; this only lays
   out its wrapper. The component inherits the --cd-* tokens for its colours. */
.cd__ordertype[b-ylmwflrok9] {
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--cd-border);
  flex-shrink: 0;
}

/* Kiosk eat-in / takeaway: a lone label, centred in the block. The icon keeps
   the switch's brand accent here; KioskTypeIndicator itself inherits colour,
   which is what the navbar wants. */
.cd__ordertype--label[b-ylmwflrok9] {
  display: flex;
  justify-content: center;
}
.cd__ordertype--label[b-ylmwflrok9]  .bi { color: var(--cd-primary); }

/* ── Body / item list ───────────────────────────────────────────────────── */
.cd__body[b-ylmwflrok9] { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.cd-item[b-ylmwflrok9] {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: .9rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--cd-border);
}

.cd-item__media[b-ylmwflrok9] { position: relative; width: 84px; height: 84px; }
.cd-item__thumb[b-ylmwflrok9] {
  width: 100%;
  height: 100%;
  border-radius: var(--cd-r-sm);
  overflow: hidden;
  background: var(--cd-muted);
  border: 1px solid var(--cd-border);
}
.cd-item__thumb img[b-ylmwflrok9] { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Trash button — inline next to the qty stepper */
.cd-item__remove[b-ylmwflrok9] {
  width: 38px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cd-r-sm);
  border: 1.5px solid var(--cd-border-strong);
  background: var(--cd-surface);
  color: var(--cd-ink-2);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.cd-item__remove:hover[b-ylmwflrok9] {
  color: var(--cd-error);
  border-color: var(--cd-error);
  background: color-mix(in srgb, var(--cd-error) 8%, transparent);
}

.cd-item__main[b-ylmwflrok9] { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cd-item__name[b-ylmwflrok9] { font-size: .95rem; font-weight: 700; line-height: 1.3; color: var(--cd-ink); }
.cd-item__variant[b-ylmwflrok9] { font-size: .82rem; color: var(--cd-ink-2); }

.cd-item__price[b-ylmwflrok9] { display: flex; align-items: baseline; gap: .45rem; margin-top: .3rem; }
.cd-item__now[b-ylmwflrok9] { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: var(--cd-ink); }
.cd-item__now--sale[b-ylmwflrok9] { color: var(--cd-sale); }
.cd-item__old[b-ylmwflrok9] { font-size: .82rem; color: var(--cd-ink-3); text-decoration: line-through; }
.cd-item__lowest[b-ylmwflrok9] { font-size: .74rem; color: var(--cd-ink-3); margin-top: .05rem; }

.cd-item__row[b-ylmwflrok9] {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .7rem;
  flex-wrap: wrap;
}

/* Stock-cap hint - its own row under the stepper row, so the stepper stays
   centred against the remove button and line total. */
.cd-item__cap[b-ylmwflrok9] {
  margin-top: .4rem;
}

/* Name of the promotion the row takes part in, sitting under the price it changed.
   The saving itself is carried by the was/now price pair.

   Same --error-color as the product card and product page badges, but tinted
   rather than filled: this chip sits on the drawer surface, not on a photo, so it
   follows the established treatment for error-coloured chips on a surface
   (main.css .validation-message, RetailPluCard's out-of-stock badge). That keeps
   it legible in both themes, where a solid fill with white text would not be. */
.cd-item__promo[b-ylmwflrok9] {
  margin-top: .25rem;
}
/* Single line: a long promotion name would otherwise wrap and push the row's
   stepper down. The full name stays in the DOM for screen readers and is on the
   title attribute for hover. */
.cd-item__promo-name[b-ylmwflrok9] {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Without this the clipped box sits on the text baseline and the chip's
     bottom padding is cut off. */
  vertical-align: bottom;
  padding: .1rem .4rem;
  border-radius: var(--cd-r-sm);
  background: color-mix(in srgb, var(--error-color, #dc3545) 15%, transparent);
  color: var(--error-color, #dc3545);
  font-size: .74rem;
  font-weight: 600;
}

/* Compact qty stepper */
.cd-qty[b-ylmwflrok9] {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--cd-border-strong);
  border-radius: var(--cd-r-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.cd-qty button[b-ylmwflrok9] {
  width: 34px;
  height: 36px;
  border: none;
  background: var(--cd-surface);
  color: var(--cd-ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease;
}
.cd-qty button:hover[b-ylmwflrok9] { background: var(--cd-muted); }
.cd-qty button:disabled[b-ylmwflrok9] { color: var(--cd-ink-3); cursor: not-allowed; }
.cd-qty input[b-ylmwflrok9] {
  width: 38px;
  height: 36px;
  border: none;
  text-align: center;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--cd-ink);
  background: var(--cd-surface);
  -moz-appearance: textfield;
}
.cd-qty input[b-ylmwflrok9]::-webkit-outer-spin-button,
.cd-qty input[b-ylmwflrok9]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cd-item__delivery[b-ylmwflrok9] {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--cd-success);
  line-height: 1.25;
}
.cd-item__delivery svg[b-ylmwflrok9] { flex-shrink: 0; }

/* Line total, pushed to the end of the qty row */
.cd-item__linetotal[b-ylmwflrok9] {
  margin-left: auto;
  font-size: .95rem;
  font-weight: 700;
  color: var(--cd-ink);
}

/* Invalid line (not available for the current delivery type) */
.cd-item--invalid[b-ylmwflrok9] { opacity: .55; }
.cd-item--invalid .cd-item__name[b-ylmwflrok9],
.cd-item--invalid .cd-item__now[b-ylmwflrok9] { text-decoration: line-through; }

.cd-item__unavailable[b-ylmwflrok9] {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-top: .1rem;
  padding: .1rem .45rem;
  border-radius: var(--cd-r-pill);
  background: color-mix(in srgb, var(--cd-error) 12%, transparent);
  color: var(--cd-error);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.cd__empty[b-ylmwflrok9] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}
.cd__empty-icon[b-ylmwflrok9] {
  width: 64px;
  height: 64px;
  border-radius: var(--cd-r-pill);
  background: var(--cd-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cd-ink-3);
  font-size: 28px;
  line-height: 1;
}
.cd__empty p[b-ylmwflrok9] { margin: 0; color: var(--cd-ink-2); font-size: .95rem; }
.cd__empty strong[b-ylmwflrok9] { display: block; font-size: 1.1rem; color: var(--cd-ink); margin-bottom: .2rem; }

/* ── Foot / summary ─────────────────────────────────────────────────────── */
.cd__foot[b-ylmwflrok9] {
  flex-shrink: 0;
  border-top: 1px solid var(--cd-border);
  background: var(--cd-muted);
  padding: 1.1rem 1.25rem;
  padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0));
}
.cd__summary[b-ylmwflrok9] { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.cd-sum[b-ylmwflrok9] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: .9rem;
  color: var(--cd-ink-2);
}
.cd-sum--save[b-ylmwflrok9] { color: var(--cd-sale); font-weight: 600; }
/* One row per promotion, so the name gives way and the amount never does.
   min-width:0 is what allows a flex item to shrink below its content and let the
   ellipsis appear; flex-shrink:0 pins the amount at full width. */
.cd-sum--save > span[b-ylmwflrok9] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-sum--save > strong[b-ylmwflrok9] { flex-shrink: 0; }
/* Thin rule between the delivery/subtotal rows and the grand total */
.cd-sum__divider[b-ylmwflrok9] { height: 1px; background: var(--cd-border); margin: .3rem 0; }
.cd-sum--total[b-ylmwflrok9] { font-size: 1.05rem; color: var(--cd-ink); margin-top: .1rem; }
.cd-sum--total strong[b-ylmwflrok9] { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.cd-sum__note[b-ylmwflrok9] { font-size: .78rem; color: var(--cd-ink-3); }

.cd__checkout[b-ylmwflrok9] {
  width: 100%;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: none;
  border-radius: var(--cd-r-sm);
  background: var(--cd-primary);
  color: var(--cd-primary-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .14s ease, transform .12s ease;
}
.cd__checkout-icon[b-ylmwflrok9] { font-size: 1.2rem; line-height: 1; }
/* Delivery/pickup glyphs in the SegmentSwitch - its own .seg__icon rule sizes svg only. */
.cd__type-icon[b-ylmwflrok9] { display: block; font-size: 18px; line-height: 1; }
.cd__checkout:hover[b-ylmwflrok9] { filter: brightness(1.06); }
.cd__checkout:active[b-ylmwflrok9] { transform: scale(.99); }
.cd__checkout:disabled[b-ylmwflrok9] {
  background: var(--cd-muted-2);
  color: var(--cd-ink-3);
  cursor: not-allowed;
  filter: none;
  transform: none;
}

/* Reason the checkout CTA is blocked (e.g. invalid items for this delivery type) */
.cd__warning[b-ylmwflrok9] {
  margin: 0 0 .7rem;
  padding: .6rem .75rem;
  border-radius: var(--cd-r-sm);
  background: color-mix(in srgb, var(--cd-error) 10%, transparent);
  color: var(--cd-error);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
}

.cd__continue[b-ylmwflrok9] {
  width: 100%;
  margin-top: .6rem;
  background: none;
  border: none;
  color: var(--cd-ink-2);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  padding: .5rem;
  border-radius: var(--cd-r-sm);
  transition: color .12s ease, background .12s ease;
}
.cd__continue:hover[b-ylmwflrok9] { color: var(--cd-ink); background: var(--cd-muted-2); }

/* ── Scrim ──────────────────────────────────────────────────────────────── */
.cd-scrim[b-ylmwflrok9] {
  position: fixed;
  inset: 0;
  z-index: 255;
  background: rgba(15, 15, 20, .45);
  /* Blur the page behind the overlay (drawer sits above this at z-index 260). */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.cd-scrim--on[b-ylmwflrok9] { opacity: 1; pointer-events: auto; }

@media (max-width: 420px) {
  .cd-item[b-ylmwflrok9] { grid-template-columns: 70px 1fr; gap: .75rem; }
  .cd-item__media[b-ylmwflrok9] { width: 70px; height: 70px; }
}
/* /Pages/Shop/CategoryBar.razor.rz.scp.css */
/* category nav — drop-in styling for CategoryNav React component.
   All design tokens are scoped to .cat-nav so dropping this into a Blazor page
   won't bleed into other UI. The single tunable input is --cat-primary, set
   inline by the React component (defaults below). */

.cat-nav[b-1hulkh0h5q] {
    --cat-primary: var(--lp-primary, #ff7200);
    --cat-primary-tint: color-mix(in srgb, var(--cat-primary) 8%, transparent);
    --cat-primary-tint-strong: color-mix(in srgb, var(--cat-primary) 14%, transparent);
    --cat-surface: var(--shop-surface, #ffffff);
    --cat-surface-sub: var(--shop-bg, #f5f5f5);
    --cat-border: rgba(15, 23, 42, .08);
    --cat-border-strong: rgba(15, 23, 42, .14);
    --cat-text: var(--shop-font-color, #1f2328);
    --cat-text-soft: color-mix(in srgb, var(--shop-font-color, #1f2328) 60%, transparent);
    --cat-radius: var(--shop-border-radius, 10px);
    /* Hidden on mobile — mobile uses the side-drawer in ShopNavbar. */
    display: none;
    position: fixed;
    top: var(--lp-navbar-height, 56px); /* JS overrides this inline */
    left: 0;
    right: 0;
    z-index: 99;
    transition: top .3s ease;
    background: var(--cat-surface);
    font-family: inherit;
    color: var(--cat-text);
    border-bottom: 1px solid var(--cat-border);
}

@container lp-page (min-width: 768px) {
    .cat-nav[b-1hulkh0h5q] {
        display: block;
    }
}

/* Restaurant Order keeps the bar on phones; retail shop does not. */
.cat-nav--show-mobile[b-1hulkh0h5q] {
    display: block;
}


/* ── Top nav bar (L1 links) ───────────────────────────────────────────── */

.cat-nav__bar[b-1hulkh0h5q] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 .75rem;
}

@container lp-page (min-width: 600px) {
    .cat-nav__bar[b-1hulkh0h5q] {
        padding: 0 1rem;
    }

    .cat-panel__inner[b-1hulkh0h5q] {
        padding: 1.25rem 1rem 1.5rem;
    }
}

@container lp-page (min-width: 960px) {
    .cat-nav__bar[b-1hulkh0h5q] {
        padding: 0 1.25rem;
    }

    .cat-panel__inner[b-1hulkh0h5q] {
        padding: 1.25rem 1.25rem 1.5rem;
    }
}

.cat-nav__list[b-1hulkh0h5q] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .cat-nav__list[b-1hulkh0h5q]::-webkit-scrollbar {
        display: none;
    }

.cat-nav__item[b-1hulkh0h5q] {
    flex-shrink: 0;
    display: flex;
}

.cat-nav__link[b-1hulkh0h5q] {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 1rem 1rem 1rem;
    margin: 0;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
    transition: color .15s ease;
}

    .cat-nav__link[b-1hulkh0h5q]::after {
        content: "";
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0;
        height: 3px;
        background: var(--cat-primary);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .22s cubic-bezier(.2,.7,.2,1);
        border-radius: 2px 2px 0 0;
    }

    .cat-nav__link:hover[b-1hulkh0h5q] {
        color: var(--cat-primary);
    }

        .cat-nav__link:hover[b-1hulkh0h5q]::after {
            transform: scaleX(1);
        }

    .cat-nav__link:focus-visible[b-1hulkh0h5q] {
        color: var(--cat-primary);
        box-shadow: inset 0 0 0 2px var(--cat-primary-tint-strong);
        border-radius: 6px;
    }

.cat-nav__link--active[b-1hulkh0h5q] {
    color: var(--cat-primary);
}

    .cat-nav__link--active[b-1hulkh0h5q]::after {
        transform: scaleX(1);
    }

/* ── Mega panel ───────────────────────────────────────────────────────── */

.cat-panel[b-1hulkh0h5q] {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--cat-surface-sub);
    border-top: 1px solid var(--cat-border);
    box-shadow: 0 18px 48px -12px rgba(15, 23, 42, .18);
    z-index: 120;
    /* Hidden state baseline (animation styles override the in/out per variant) */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease;
}
.cat-panel[b-1hulkh0h5q] {
    position: sticky !important; /* match parent context */
    top: 0;
    max-height: calc(100dvh - var(--lp-navbar-height, 56px));
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
.cat-panel--open[b-1hulkh0h5q] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Animation flavors (variant on the open transition) */
.cat-panel--slide[b-1hulkh0h5q] {
    transform: translateY(-10px);
}

    .cat-panel--slide.cat-panel--open[b-1hulkh0h5q] {
        transform: translateY(0);
    }

.cat-panel--fade[b-1hulkh0h5q] {
    transform: none;
    transition: opacity .2s ease;
}

    .cat-panel--fade.cat-panel--open[b-1hulkh0h5q] {
        transform: none;
    }

.cat-panel--curtain[b-1hulkh0h5q] {
    transform: translateY(-100%);
    transition: transform .32s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}

    .cat-panel--curtain.cat-panel--open[b-1hulkh0h5q] {
        transform: translateY(0);
    }

.cat-panel__inner[b-1hulkh0h5q] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 1rem 1.5rem;
}

/* ── Header (breadcrumb + close) ──────────────────────────────────────── */

.cat-panel__header[b-1hulkh0h5q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    min-height: 28px;
}

.cat-panel__crumbs[b-1hulkh0h5q] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    min-width: 0;
}

.cat-panel__back[b-1hulkh0h5q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: .15rem;
    background: var(--cat-surface);
    border: 1px solid var(--cat-border-strong);
    border-radius: 999px;
    color: var(--cat-text);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .2s ease;
}

    .cat-panel__back:hover[b-1hulkh0h5q] {
        background: var(--cat-primary);
        color: var(--shop-primary-text, #fff);
        border-color: var(--cat-primary);
        transform: translateX(-2px);
    }

.cat-panel__crumb[b-1hulkh0h5q] {
    background: none;
    border: none;
    padding: .25rem .15rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cat-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    transition: color .15s ease;
}

    .cat-panel__crumb:hover[b-1hulkh0h5q] {
        color: var(--cat-primary);
    }

.cat-panel__crumb--all[b-1hulkh0h5q] {
    color: var(--cat-text);
}

    .cat-panel__crumb--all svg[b-1hulkh0h5q] {
        transition: transform .2s ease;
    }

    .cat-panel__crumb--all:hover svg[b-1hulkh0h5q] {
        transform: translateX(3px);
    }

.cat-panel__crumb--current[b-1hulkh0h5q] {
    color: var(--cat-text-soft);
    font-weight: 500;
    cursor: default;
}

    .cat-panel__crumb--current:hover[b-1hulkh0h5q] {
        color: var(--cat-text-soft);
    }

.cat-panel__sep[b-1hulkh0h5q] {
    color: var(--cat-text-soft);
    opacity: .55;
    font-weight: 400;
}

.cat-panel__close[b-1hulkh0h5q] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: none;
    padding: .35rem .5rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    color: var(--cat-text);
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}

    .cat-panel__close:hover[b-1hulkh0h5q] {
        color: var(--cat-primary);
        background: var(--cat-primary-tint);
    }

/* ── Stage + animated layers ──────────────────────────────────────────── */

.cat-panel__stage[b-1hulkh0h5q] {
    position: relative;
    min-height: 1px;
}

.cat-panel__layer[b-1hulkh0h5q] {
    /* Default = visible. Override classes below for transitions. */
    position: relative;
    width: 100%;
}

/* Outgoing layer is positioned absolutely so the incoming one sits in flow
   and the panel can size itself to the new content. */
.cat-panel__layer--out-left[b-1hulkh0h5q],
.cat-panel__layer--out-right[b-1hulkh0h5q] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cat-panel__layer--out-left[b-1hulkh0h5q] {
    animation: catSlideOutLeft-b-1hulkh0h5q .26s ease forwards;
}

.cat-panel__layer--out-right[b-1hulkh0h5q] {
    animation: catSlideOutRight-b-1hulkh0h5q .26s ease forwards;
}

.cat-panel__layer--in-right[b-1hulkh0h5q] {
    animation: catSlideInRight-b-1hulkh0h5q .28s cubic-bezier(.2,.7,.2,1);
}

.cat-panel__layer--in-left[b-1hulkh0h5q] {
    animation: catSlideInLeft-b-1hulkh0h5q .28s cubic-bezier(.2,.7,.2,1);
}

@keyframes catSlideOutLeft-b-1hulkh0h5q {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-3%);
        opacity: 0;
    }
}

@keyframes catSlideOutRight-b-1hulkh0h5q {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(3%);
        opacity: 0;
    }
}

@keyframes catSlideInRight-b-1hulkh0h5q {
    from {
        transform: translateX(3%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes catSlideInLeft-b-1hulkh0h5q {
    from {
        transform: translateX(-3%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ── Card grid ────────────────────────────────────────────────────────── */

.cat-panel__grid[b-1hulkh0h5q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
}

/* ── Card ─────────────────────────────────────────────────────────────── */

.cat-card[b-1hulkh0h5q] {
    background: var(--cat-surface);
    border: 1px solid transparent;
    border-radius: var(--cat-radius);
    padding: 1rem 1rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease, transform .18s ease;
}

    .cat-card:hover[b-1hulkh0h5q] {
        border-color: var(--cat-border-strong);
        box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .15);
    }

.cat-card--compact[b-1hulkh0h5q] {
    padding: .75rem .8rem .65rem;
}

.cat-card__media[b-1hulkh0h5q] {
    background: var(--cat-surface-sub);
    border: none;
    border-radius: var(--shop-border-radius, 8px);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    cursor: pointer;
    padding: 0;
    position: relative;
    display: block;
}

    .cat-card__media img[b-1hulkh0h5q] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .35s ease;
    }

.cat-card:hover .cat-card__media img[b-1hulkh0h5q] {
    transform: scale(1.04);
}

.cat-card__media-fallback[b-1hulkh0h5q] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--cat-text-soft);
    opacity: .35;
}

.cat-card__title[b-1hulkh0h5q] {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cat-text);
    cursor: pointer;
    text-align: left;
    align-self: flex-start;
    max-width: 100%;
    transition: color .15s ease;
}

    .cat-card__title[b-1hulkh0h5q]::after {
        /* Reserved for legacy; the arrow now ships as an inline span so it wraps
     with the text reliably across browsers. */
        content: none;
    }

.cat-card__title-arrow[b-1hulkh0h5q] {
    display: inline-block;
    transition: transform .2s ease;
    white-space: nowrap;
}

.cat-card__title:hover[b-1hulkh0h5q] {
    color: var(--cat-primary);
}

    .cat-card__title:hover .cat-card__title-arrow[b-1hulkh0h5q] {
        transform: translateX(3px);
    }

.cat-card__list[b-1hulkh0h5q] {
    list-style: none;
    margin: .15rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.cat-card__leaf[b-1hulkh0h5q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    background: none;
    border: none;
    padding: .3rem 0;
    font: inherit;
    font-size: .92rem;
    font-weight: 400;
    color: var(--cat-text);
    cursor: pointer;
    text-align: left;
    border-radius: 4px;
    transition: color .15s ease, padding .18s ease;
}

    .cat-card__leaf:hover[b-1hulkh0h5q] {
        color: var(--cat-primary);
        padding-left: 4px;
    }

    .cat-card__leaf > span[b-1hulkh0h5q] {
        min-width: 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .cat-card__leaf svg[b-1hulkh0h5q] {
        opacity: .5;
        transition: opacity .15s ease, transform .15s ease;
        flex-shrink: 0;
    }

    .cat-card__leaf:hover svg[b-1hulkh0h5q] {
        opacity: 1;
        transform: translateX(2px);
    }

.cat-card__leaf--has-kids[b-1hulkh0h5q] {
    font-weight: 500;
}

.cat-card__more[b-1hulkh0h5q] {
    margin-top: .25rem;
    align-self: flex-start;
    background: none;
    border: none;
    padding: .25rem 0;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--cat-text);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s ease;
}

    .cat-card__more:hover[b-1hulkh0h5q] {
        color: var(--cat-primary);
    }

.cat-card__more-count[b-1hulkh0h5q] {
    font-weight: 500;
    color: var(--cat-text-soft);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@container lp-page (max-width: 900px) {
    .cat-nav__link[b-1hulkh0h5q] {
        padding: .8rem .75rem;
        font-size: .95rem;
    }

    .cat-panel__inner[b-1hulkh0h5q] {
        padding: 1rem .75rem 1.25rem;
    }

    .cat-panel__grid[b-1hulkh0h5q] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: .5rem;
    }

    .cat-card[b-1hulkh0h5q] {
        padding: .75rem;
    }

    .cat-card__title[b-1hulkh0h5q] {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cat-panel[b-1hulkh0h5q],
    .cat-panel__layer[b-1hulkh0h5q],
    .cat-card[b-1hulkh0h5q],
    .cat-card__media img[b-1hulkh0h5q],
    .cat-card__title svg[b-1hulkh0h5q],
    .cat-card__leaf[b-1hulkh0h5q],
    .cat-card__leaf svg[b-1hulkh0h5q],
    .cat-panel__back[b-1hulkh0h5q] {
        transition: none !important;
        animation: none !important;
    }
}
/* ── Scroll arrows ────────────────────────────────────────────────────── */

.cat-nav__scroll-wrap[b-1hulkh0h5q] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.cat-nav__arrow[b-1hulkh0h5q] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cat-text);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, color .15s ease;
}

.cat-nav__arrow--left[b-1hulkh0h5q] {
    left: 0;
    background: linear-gradient(to right, var(--cat-surface) 60%, transparent);
}

.cat-nav__arrow--right[b-1hulkh0h5q] {
    right: 0;
    background: linear-gradient(to left, var(--cat-surface) 60%, transparent);
}

.cat-nav__arrow--visible[b-1hulkh0h5q] {
    opacity: 1;
    pointer-events: auto;
}

.cat-nav__arrow:hover[b-1hulkh0h5q] {
    color: var(--cat-primary);
}
.cat-nav__arrow .bi[b-1hulkh0h5q] {
    font-size: 1.25rem;
    -webkit-text-stroke: 0.1rem currentColor;
}
.cat-nav__arrow:focus[b-1hulkh0h5q],
.cat-nav__arrow:focus-visible[b-1hulkh0h5q],
.cat-nav__arrow:active[b-1hulkh0h5q] {
    outline: none;
    box-shadow: none;
    color: var(--cat-text);
}

/* ── Dark fallbacks ───────────────────────────────────────────────────────
   Theme.cs emits a --shop-* token only for colours the tenant actually picked,
   so an un-themed shop falls back to the literals above — all light. Keeping
   var(--shop-*, …) here means a tenant palette still wins in both modes; only
   the fallback flips. Palette matches CartDrawer. Ink that sits on the brand
   colour (buttons, badges) is deliberately left alone. */
@media (prefers-color-scheme: dark) {
    .cat-nav[b-1hulkh0h5q] {
        --cat-surface: var(--shop-surface, #1e1e1e);
        --cat-surface-sub: var(--shop-bg, #262629);
        --cat-border: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 10%, transparent);
        --cat-border-strong: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 18%, transparent);
        --cat-text: var(--shop-font-color, #f1f1f1);
        --cat-text-soft: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 60%, transparent);
    }
}
/* /Pages/Shop/CategoryBreadcrumb.razor.rz.scp.css */
/* Breadcrumb strip — sits below the category bar, above page content.
   Only rendered when a category is selected, so no "display:none" needed. */

.lp-breadcrumb[b-c6l4wmittb] {
    /* position:sticky is silently ignored when body has container-type:inline-size.
       The frame's paddingTop (set by navbarScroll.js) already places this element
       correctly below the fixed navbar + cat-nav, so static flow works perfectly. */
    background: var(--shop-bg, #fafafa);
    border-bottom: 1px solid rgba(127, 127, 127, .1);
}

.lp-breadcrumb-inner[b-c6l4wmittb] {
    max-width: 1200px;
    margin: 0 auto;
    padding: .3rem .75rem;
    display: flex;
    align-items: center;
    gap: .15rem;
    flex-wrap: wrap;
    font-size: .79rem;
}

.lp-breadcrumb-crumb[b-c6l4wmittb] {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: .12rem .28rem;
    border-radius: 4px;
    color: inherit;
    font-size: .79rem;
    cursor: pointer;
    opacity: .6;
    transition: opacity .12s ease, color .12s ease;
}

    .lp-breadcrumb-crumb:hover[b-c6l4wmittb] {
        opacity: 1;
        color: var(--lp-primary, #ff7200);
    }

.lp-breadcrumb-crumb--current[b-c6l4wmittb] {
    opacity: 1;
    font-weight: 600;
    cursor: default;
}

    .lp-breadcrumb-crumb--current:hover[b-c6l4wmittb] {
        color: inherit;
    }

.lp-breadcrumb-sep[b-c6l4wmittb] {
    font-size: .58rem;
    opacity: .35;
    line-height: 1;
}

@container lp-page (min-width: 600px) {
    .lp-breadcrumb-inner[b-c6l4wmittb] {
        padding: .32rem 1rem;
    }
}

@container lp-page (min-width: 960px) {
    .lp-breadcrumb-inner[b-c6l4wmittb] {
        padding: .35rem 1.25rem;
    }
}

/* ── Dark fallbacks ───────────────────────────────────────────────────────
   Theme.cs emits a --shop-* token only for colours the tenant actually picked,
   so an un-themed shop falls back to the literals above — all light. Keeping
   var(--shop-*, …) here means a tenant palette still wins in both modes; only
   the fallback flips. Palette matches CartDrawer. Ink that sits on the brand
   colour (buttons, badges) is deliberately left alone. */
@media (prefers-color-scheme: dark) {
    .lp-breadcrumb[b-c6l4wmittb] {
        background: var(--shop-bg, #1a1a1c);
    }
}
/* /Pages/Shop/Checkout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   New checkout — scoped styles (ported from design/Checkout.razor.css).
   Self-contained: includes the cart-line + summary language (co- prefixed).
   Brand accent: --co-primary (follows the tenant's --shop-primary; lp.css is
   not loaded on checkout, so we can't rely on --lp-*). The mockup's slim
   header (.co-nav*) lives in CheckoutNavbar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tokens (--c-* / --co-*) and their dark variants come from .shop-chrome
   (wwwroot/css/shop-chrome.css), which the .co element also carries. */
.co[b-89ubkpnvyi] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--c-muted);
    color: var(--c-ink);
    /* Flex items default to min-width:auto (min-content). On a 360px phone that
       lets a wide child (payment logos, Telerik combobox, long names) stretch the
       page past the viewport. 0 lets them shrink; clip hides any leftover leak.
       Use `clip` (not `hidden`): `hidden` makes .co a scroll container, which
       breaks `position: sticky` on .co-summary. */
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

/* ── Body ──────────────────────────────────────────────────────────────── */
.co-main[b-89ubkpnvyi] {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: min(var(--maxw), 100%);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.75rem) var(--gut) 3rem;
    box-sizing: border-box;
}

.co-title[b-89ubkpnvyi] {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.025em;
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    text-align: center;
}

.co-login[b-89ubkpnvyi] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    margin: 0 auto clamp(1rem, 2vw, 1.5rem);
    width: 100%;
    max-width: min(640px, 100%);
    min-width: 0;
    padding: 1.25rem;
    border-radius: var(--r);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
    box-sizing: border-box;
}

    .co-login p[b-89ubkpnvyi] {
        margin: 0;
    }

    .co-login .co-btn[b-89ubkpnvyi] {
        width: auto;
        padding: 0 1.4rem;
    }

.co-grid[b-89ubkpnvyi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: clamp(1rem, 2.4vw, 1.75rem);
    align-items: start;
    min-width: 0;
    width: 100%;
}

.co-col[b-89ubkpnvyi] {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    min-width: 0;
    max-width: 100%;
}

/* ── Loading skeleton (shown while the page initializes) ───────────────── */
.co-skel[b-89ubkpnvyi] {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: var(--r);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
    box-sizing: border-box;
}

    .co-skel[b-89ubkpnvyi]::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-ink) 7%, transparent), transparent);
        animation: co-shimmer-b-89ubkpnvyi 1.4s ease-in-out infinite;
    }

.co-skel--lines[b-89ubkpnvyi] {
    height: 270px;
}

.co-skel--form[b-89ubkpnvyi] {
    height: 190px;
}

.co-skel--summary[b-89ubkpnvyi] {
    height: 340px;
}

@keyframes co-shimmer-b-89ubkpnvyi {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .co-skel[b-89ubkpnvyi]::after {
        animation: none;
    }
}

/* ── Section card ──────────────────────────────────────────────────────── */
.co-sec[b-89ubkpnvyi] {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.co-sec__head[b-89ubkpnvyi] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--c-border);
}

    .co-sec__head h2[b-89ubkpnvyi] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 800;
        letter-spacing: -.01em;
    }

.co-step[b-89ubkpnvyi] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--r-pill);
    background: var(--c-ink);
    color: var(--c-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .92rem;
    font-weight: 800;
}

.co-sec__head[b-89ubkpnvyi],
.co-sec__body[b-89ubkpnvyi] {
    min-width: 0;
}

.co-sec__body[b-89ubkpnvyi] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.co-sec__body--flush[b-89ubkpnvyi] {
    padding: 0;
}

/* ── Cart lines ────────────────────────────────────────────────────────── */
.co-lines[b-89ubkpnvyi] {
    display: flex;
    flex-direction: column;
}

.co-line[b-89ubkpnvyi] {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: .9rem;
    padding: 1.1rem 1.25rem;
    min-width: 0;
}

    .co-line + .co-line[b-89ubkpnvyi] {
        border-top: 1px solid var(--c-border);
    }

.co-line__media[b-89ubkpnvyi] {
    position: relative;
    width: 84px;
    height: 84px;
}

.co-line__thumb[b-89ubkpnvyi] {
    width: 100%;
    height: 100%;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--c-muted);
    border: 1px solid var(--c-border);
}

    .co-line__thumb img[b-89ubkpnvyi] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.co-line__remove[b-89ubkpnvyi] {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    border: 2px solid var(--c-surface);
    background: var(--c-ink);
    color: var(--c-surface);
    cursor: pointer;
    padding: 0;
    transition: background .14s ease, transform .12s ease;
}

    .co-line__remove:hover[b-89ubkpnvyi] {
        background: var(--c-error);
        transform: scale(1.08);
    }

.co-line__main[b-89ubkpnvyi] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.co-line__name[b-89ubkpnvyi] {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-ink);
    overflow-wrap: anywhere;
}

.co-line__variant[b-89ubkpnvyi] {
    font-size: .82rem;
    color: var(--c-ink-2);
}

.co-line__row[b-89ubkpnvyi] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .6rem;
    margin-top: .6rem;
    flex-wrap: wrap;
}

.co-line__prices[b-89ubkpnvyi] {
    text-align: right;
}

.co-line__now[b-89ubkpnvyi] {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--c-ink);
}

/* Promotion price pair: the new total, then what it was, struck through. */
.co-line__now--sale[b-89ubkpnvyi] {
    color: var(--c-sale);
}

.co-line__old[b-89ubkpnvyi] {
    margin-left: .4rem;
    font-size: .82rem;
    color: var(--c-ink-3);
    text-decoration: line-through;
}

/* Stock-cap hint — its own row under the stepper row, so the stepper stays
   centred against the line total. */
.co-line__cap[b-89ubkpnvyi] {
    margin-top: .4rem;
}

/* Name of the promotion that changed the price — its own row for the same
   reason as the stock hint. */
.co-line__promo[b-89ubkpnvyi] {
    margin-top: .4rem;
}

/* Same tinted --error-color chip as the cart drawer — on a surface rather than a
   photo, so it is tinted rather than filled.

   Single line: a long promotion name would otherwise wrap and push the row apart.
   The full name stays in the DOM for screen readers and on the title for hover. */
.co-line__promo-name[b-89ubkpnvyi] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Without this the clipped box sits on the text baseline and the chip's
       bottom padding is cut off. */
    vertical-align: bottom;
    padding: .1rem .4rem;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--error-color, #dc3545) 15%, transparent);
    color: var(--error-color, #dc3545);
    font-size: .74rem;
    font-weight: 600;
}

.co-qty[b-89ubkpnvyi] {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    overflow: hidden;
    flex-shrink: 0;
}

    .co-qty button[b-89ubkpnvyi] {
        width: 34px;
        height: 36px;
        border: none;
        background: var(--c-surface);
        color: var(--c-ink);
        font-size: 1.15rem;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background .12s ease;
    }

        .co-qty button:hover[b-89ubkpnvyi] {
            background: var(--c-muted);
        }

        .co-qty button:disabled[b-89ubkpnvyi] {
            color: var(--c-ink-3);
            cursor: not-allowed;
        }

    .co-qty input[b-89ubkpnvyi] {
        width: 38px;
        height: 36px;
        border: none;
        text-align: center;
        font: inherit;
        font-size: .95rem;
        font-weight: 700;
        color: var(--c-ink);
        background: var(--c-surface);
        -moz-appearance: textfield;
    }

        .co-qty input[b-89ubkpnvyi]::-webkit-outer-spin-button, .co-qty input[b-89ubkpnvyi]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

.co-lines__totals[b-89ubkpnvyi] {
    background: var(--c-muted);
    border-top: 1px solid var(--c-border);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* ── Summary rows (shared) ─────────────────────────────────────────────── */
.co-sum[b-89ubkpnvyi] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: .9rem;
    color: var(--c-ink-2);
}

    .co-sum span:last-child[b-89ubkpnvyi] {
        color: var(--c-ink);
        font-weight: 600;
    }

.co-sum--disc[b-89ubkpnvyi], .co-sum--disc span:last-child[b-89ubkpnvyi] {
    color: var(--c-sale);
    font-weight: 700;
}

/* The name gives way, the amount never does. min-width:0 is what allows a flex
   item to shrink below its content so the ellipsis can appear. Applies to both
   summary blocks — the one under the lines and the one in the aside. */
.co-sum--disc > span:first-child[b-89ubkpnvyi] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-sum--disc > span:last-child[b-89ubkpnvyi] {
    flex-shrink: 0;
}

.co-sum--grand[b-89ubkpnvyi] {
    margin-top: .4rem;
    padding-top: .8rem;
    border-top: 1px solid var(--c-border);
    font-size: 1.05rem;
    color: var(--c-ink);
}

    .co-sum--grand strong[b-89ubkpnvyi] {
        font-size: 1.55rem;
        font-weight: 800;
        letter-spacing: -.02em;
    }

.co-sum__vat[b-89ubkpnvyi] {
    font-size: .72rem;
    font-weight: 500;
    color: var(--c-ink-3);
    margin-left: .35rem;
}

/* ── Payment instructions (how the redirect to Swish/card works) ───────── */
.co-pay-note[b-89ubkpnvyi] {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--co-primary) 35%, transparent);
    border-left: 4px solid var(--co-primary);
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--co-primary) 12%, transparent);
    color: var(--c-ink);
}

.co-pay-note svg[b-89ubkpnvyi] {
    flex: none;
    color: var(--co-primary);
}

.co-pay-note p[b-89ubkpnvyi] {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
}

/* ── Delivery cost / status note ───────────────────────────────────────── */
.co-delivery-note[b-89ubkpnvyi] {
    margin: 0;
    padding: .6rem .75rem;
    border-radius: var(--r-sm);
    background: var(--co-primary-tint);
    color: var(--c-ink);
    font-size: .85rem;
    font-weight: 600;
}

/* "order waits for payment" note in the flush cart section: line up with the lines */
.co-locked-note[b-89ubkpnvyi] {
    margin: 1.1rem 1.25rem 0;
}

.co-delivery-calc[b-89ubkpnvyi] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .85rem;
    color: var(--c-ink-2);
}

/* ── PLU-not-available warning ─────────────────────────────────────────── */
.co-plu-warning[b-89ubkpnvyi] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .9rem 1rem;
    border-radius: var(--r-sm);
    border: 1px solid color-mix(in srgb, var(--c-error) 40%, transparent);
    background: color-mix(in srgb, var(--c-error) 8%, transparent);
}

.co-plu-warning__title[b-89ubkpnvyi] {
    margin: 0;
    font-size: .95rem;
    font-weight: 800;
    color: var(--c-ink);
}

.co-plu-warning__info[b-89ubkpnvyi] {
    margin: 0;
    font-size: .82rem;
    color: var(--c-ink-2);
}

.co-plu-chips[b-89ubkpnvyi] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.co-plu-chip[b-89ubkpnvyi] {
    padding: .25rem .6rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--c-sale) 16%, transparent);
    color: var(--c-ink);
    font-size: .78rem;
    font-weight: 600;
}

/* ── Order actions: terms + temp-closed ────────────────────────────────── */
.co-terms[b-89ubkpnvyi] {
    margin: 0 0 .2rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--c-ink-3);
    text-align: center;
}

    .co-terms .i-anchor[b-89ubkpnvyi] {
        color: var(--co-primary);
        cursor: pointer;
    }

.co-tempclosed[b-89ubkpnvyi] {
    margin: 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-sale);
    text-align: center;
}

/* ── Fields ────────────────────────────────────────────────────────────── */
.co-field[b-89ubkpnvyi] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}

.co-label[b-89ubkpnvyi] {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-ink-2);
}

/* Blazor's InputText / InputSelect / InputTextArea render their own
   <input>/<select>/<textarea>, which don't inherit this component's scoped-CSS
   attribute — reach them through ::deep so the design styling actually applies. */
.co[b-89ubkpnvyi]  .co-input,
.co[b-89ubkpnvyi]  .co-textarea,
.co[b-89ubkpnvyi]  .co-select {
    width: 100%;
    min-width: 0;
    font: inherit;
    font-size: .95rem;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    padding: .7rem .8rem;
    transition: border-color .14s ease, box-shadow .14s ease;
}

    .co[b-89ubkpnvyi]  .co-input::placeholder,
    .co[b-89ubkpnvyi]  .co-textarea::placeholder {
        color: var(--c-ink-3);
    }

    .co[b-89ubkpnvyi]  .co-input:focus,
    .co[b-89ubkpnvyi]  .co-textarea:focus,
    .co[b-89ubkpnvyi]  .co-select:focus {
        outline: none;
        border-color: var(--co-primary);
        box-shadow: 0 0 0 3px var(--co-primary-tint-2);
    }

.co[b-89ubkpnvyi]  .co-textarea {
    min-height: 96px;
    resize: vertical;
}

.co[b-89ubkpnvyi]  .co-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 2.4rem;
}

.co-select-wrap[b-89ubkpnvyi] {
    position: relative;
    display: block;
}

    .co-select-wrap > svg[b-89ubkpnvyi] {
        position: absolute;
        right: .7rem;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        color: var(--c-ink-2);
        pointer-events: none;
    }

.co-grid2[b-89ubkpnvyi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .9rem;
    min-width: 0;
}

.co-half[b-89ubkpnvyi] {
    width: calc(50% - .45rem);
}

.co-phone[b-89ubkpnvyi] {
    display: flex;
    gap: .6rem;
}

.co-phone__cc[b-89ubkpnvyi] {
    flex-shrink: 0;
    width: auto;
}

    .co-phone__cc[b-89ubkpnvyi]  .co-select {
        padding: .7rem 2.2rem .7rem .7rem;
        font-weight: 600;
    }

.co-phone[b-89ubkpnvyi]  .co-input {
    flex: 1;
}

/* ── Themed 3rd-party inputs (checkout-only) ───────────────────────────────
   PhonePrefix (.pp) and AddressAutoComplete (Telerik combobox) ship their own
   light/dark styling. On checkout we remap them onto the webshop theme tokens
   so they match the rest of the form. These rules are scoped to .co, so the
   components keep their default look everywhere else. */

/* PhonePrefix — override its internal design tokens with the checkout theme. */
.co[b-89ubkpnvyi]  .pp,
.co[b-89ubkpnvyi]  .pp-field {
    min-width: 0;
    max-width: 100%;
}

.co[b-89ubkpnvyi]  .pp {
    --pp-field-bg: var(--c-surface);
    --pp-text: var(--c-ink);
    --pp-muted: var(--c-ink-3);
    --pp-border: var(--c-border-strong);
    --pp-chip-bg: color-mix(in srgb, var(--c-ink) 6%, transparent);
    --pp-chip-bg-hover: color-mix(in srgb, var(--c-ink) 12%, transparent);
    --pp-accent: var(--co-primary);
}

/* AddressAutoComplete — restyle the Telerik combobox to match .co-input. */
.co[b-89ubkpnvyi]  .k-combobox,
.co[b-89ubkpnvyi]  .k-dropdownlist,
.co[b-89ubkpnvyi]  .k-picker,
.co[b-89ubkpnvyi]  .co-address {
    max-width: 100%;
    min-width: 0;
}

.co[b-89ubkpnvyi]  .co-address {
    width: 100%;
    background-color: var(--c-surface);
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    color: var(--c-ink);
    transition: border-color .14s ease, box-shadow .14s ease;
}

    .co[b-89ubkpnvyi]  .co-address:hover {
        border-color: var(--c-border-strong);
    }

    .co[b-89ubkpnvyi]  .co-address.k-focus,
    .co[b-89ubkpnvyi]  .co-address:focus-within {
        border-color: var(--co-primary);
        box-shadow: 0 0 0 3px var(--co-primary-tint-2);
    }

    .co[b-89ubkpnvyi]  .co-address .k-input-inner {
        color: var(--c-ink);
    }

        .co[b-89ubkpnvyi]  .co-address .k-input-inner::placeholder {
            color: var(--c-ink-3);
            opacity: 1;
        }

    .co[b-89ubkpnvyi]  .co-address .k-input-button,
    .co[b-89ubkpnvyi]  .co-address .k-clear-value,
    .co[b-89ubkpnvyi]  .co-address .k-input-icon {
        color: var(--c-ink-2);
        background: transparent;
    }

/* ── Order summary ─────────────────────────────────────────────────────── */
/* offset for the sticky checkout navbar (60px) + a little breathing room */
.co-summary[b-89ubkpnvyi] {
    position: sticky;
    top: calc(60px + 1rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    max-width: 100%;
}

.co-summary__card[b-89ubkpnvyi] {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.co-summary__head[b-89ubkpnvyi] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--c-border);
}

    .co-summary__head h2[b-89ubkpnvyi] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
    }

.co-summary__body[b-89ubkpnvyi] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.co-trust[b-89ubkpnvyi] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--c-border);
    background: var(--c-muted);
}

.co-trust__item[b-89ubkpnvyi] {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-ink-2);
}

    .co-trust__item svg[b-89ubkpnvyi] {
        width: 17px;
        height: 17px;
        color: var(--c-success);
        flex-shrink: 0;
    }

/* lives inside the Payment section body now, so no extra card padding;
   a top divider separates it from the payment methods */
.co-actions[b-89ubkpnvyi] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--c-border);
}

/* ── Swedbank saved-card one-click ─────────────────────────────────────── */
.co-oneclick[b-89ubkpnvyi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .8rem 1rem;
    margin-top: .25rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-muted);
}

.co-switch[b-89ubkpnvyi] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    margin: 0;
}

.co-switch__label[b-89ubkpnvyi] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--c-ink);
}

.co-oneclick__forget[b-89ubkpnvyi] {
    width: auto;
    height: 38px;
    padding: 0 1rem;
    font-size: .88rem;
}

.co-btn[b-89ubkpnvyi] {
    width: 100%;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .14s ease, transform .12s ease, background .14s ease;
}

.co-btn--primary[b-89ubkpnvyi] {
    border: none;
    background: var(--co-primary);
    color: var(--co-primary-ink);
}

    .co-btn--primary:hover[b-89ubkpnvyi] {
        filter: brightness(1.06);
    }

    .co-btn--primary:active[b-89ubkpnvyi] {
        transform: scale(.99);
    }

.co-btn--ghost[b-89ubkpnvyi] {
    height: 46px;
    background: var(--c-surface);
    border: 1.5px solid var(--c-border-strong);
    color: var(--c-ink);
}

    .co-btn--ghost:hover[b-89ubkpnvyi] {
        background: var(--c-muted);
    }

.co-stickybar[b-89ubkpnvyi] {
    display: none;
}

/* Payment logos live in a nowrap row (global .paymentmethod-cards). Without a
   bounded width that row's min-content stretches every ancestor card past the
   viewport. Contain it here so it scrolls (or wraps on phones) inside the card. */
.co[b-89ubkpnvyi]  .paymentmethod-cards {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
    .co-grid[b-89ubkpnvyi] {
        /* `1fr` still has min-width:auto; minmax(0, 1fr) is what actually
           stops a wide child from blowing the single column out past 360px. */
        grid-template-columns: minmax(0, 1fr);
    }

    .co-summary[b-89ubkpnvyi] {
        position: static;
    }
}

@media (max-width: 560px) {
    .co-main[b-89ubkpnvyi] {
        padding: 1.25rem .75rem 6rem;
    }

    /* stack paired fields (street/number, zip/city, first/last name) so inputs
       aren't squeezed and cut off on narrow phones */
    .co-grid2[b-89ubkpnvyi] {
        grid-template-columns: minmax(0, 1fr);
    }

    .co-half[b-89ubkpnvyi] {
        width: 100%;
    }

    .co-login[b-89ubkpnvyi],
    .co-sec__head[b-89ubkpnvyi],
    .co-sec__body[b-89ubkpnvyi],
    .co-summary__head[b-89ubkpnvyi],
    .co-summary__body[b-89ubkpnvyi],
    .co-line[b-89ubkpnvyi],
    .co-lines__totals[b-89ubkpnvyi],
    .co-trust[b-89ubkpnvyi] {
        padding-left: .9rem;
        padding-right: .9rem;
    }

    .co-sec__body--flush[b-89ubkpnvyi] {
        padding-left: 0;
        padding-right: 0;
    }

    .co-line[b-89ubkpnvyi] {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: .65rem;
        padding-top: .9rem;
        padding-bottom: .9rem;
    }

    .co-line__media[b-89ubkpnvyi],
    .co-line__thumb[b-89ubkpnvyi] {
        width: 64px;
        height: 64px;
    }

    .co-actions[b-89ubkpnvyi] {
        display: none;
    }

    .co[b-89ubkpnvyi]  .paymentmethod-cards {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: .35rem;
    }

    .co[b-89ubkpnvyi]  .paymentmethod-info .logo > img {
        height: 52px;
    }

    .co-stickybar[b-89ubkpnvyi] {
        display: flex;
        gap: .6rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        padding: .7rem .75rem;
        padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0));
        background: var(--c-surface);
        border-top: 1px solid var(--c-border);
        box-shadow: 0 -8px 24px -16px rgba(0,0,0,.3);
        box-sizing: border-box;
    }

        .co-stickybar .co-btn[b-89ubkpnvyi] {
            height: 50px;
            min-width: 0;
        }

        .co-stickybar .co-btn--ghost[b-89ubkpnvyi] {
            flex: 1;
        }

        .co-stickybar .co-btn--primary[b-89ubkpnvyi] {
            flex: 2;
        }
}
/* /Pages/Shop/CheckoutNavbar.razor.rz.scp.css */
/* Slim checkout header — follows the webshop theme (matches .lp-shop-navbar:
   surface background, font-color text, primary accent). Colors come from the
   --c-* tokens defined on the parent .co, so the bar follows light/dark with
   the page (Checkout.razor.css). */

.co-nav[b-ndrglt7yhw] {
    --co-primary: var(--shop-primary, #ff7200);
    --r-sm: var(--shop-border-radius, 8px);
    --r-pill: 999px;
    --maxw: 1240px;
    --gut: 1rem;
    /* Retheme the reusable <LanguagePicker> onto the checkout tokens. */
    --lang-ink: var(--c-ink, #1f2328);
    --lang-accent: var(--co-primary);
    --lang-border: var(--c-border-strong, color-mix(in srgb, var(--shop-font-color, #18181b) 12%, transparent));
    --lang-hover-bg: color-mix(in srgb, var(--c-ink, #1f2328) 6%, transparent);
    --lang-surface: var(--c-surface, #fff);
    --lang-menu-ink: var(--c-ink, #1f2328);
    /* --c-* come from the parent .co, so the bar follows light/dark with it. */
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-surface, #fff);
    color: var(--c-ink, #1f2328);
    border-bottom: 1px solid var(--c-border, color-mix(in srgb, var(--shop-font-color, #18181b) 12%, transparent));
}

.co-nav__inner[b-ndrglt7yhw] {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gut);
    height: 60px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.co-nav__back[b-ndrglt7yhw] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    justify-self: start;
    color: var(--c-ink-2, color-mix(in srgb, #1f2328 65%, transparent));
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    padding: .4rem .55rem .4rem .35rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: color .14s ease;
}

    .co-nav__back:hover[b-ndrglt7yhw] {
        color: var(--c-ink, #1f2328);
    }

/* Middle grid column: brand plus the optional table label. Without this the
   label would become a fourth column and knock the brand off centre. */
.co-nav__center[b-ndrglt7yhw] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    justify-self: center;
    min-width: 0;
}

/* Renders as an <a> when a home target is known, so pin the link colour. */
.co-nav__brand[b-ndrglt7yhw] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    justify-self: center;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

/* Real logo: natural aspect ratio at a fixed height, matching .lp-shop-logo in
   ShopNavbar so the same asset reads identically across the shop flow. */
.co-brand-pic[b-ndrglt7yhw] {
    display: inline-flex;
    flex-shrink: 0;
}

.co-brand-logo[b-ndrglt7yhw] {
    height: 34px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

/* Fallback mark when the shop has no logo configured. */
.co-logo[b-ndrglt7yhw] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--co-primary);
    color: var(--shop-primary-text, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.03em;
    flex-shrink: 0;
}

.co-name[b-ndrglt7yhw] {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.02em;
    color: var(--c-ink, #1f2328);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.co-nav__actions[b-ndrglt7yhw] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    justify-self: end;
}


/* .co-icon lives inside the reusable <AccountButton>, so ::deep is required
   to pierce component-scoped CSS and reach the child button. */
.co-nav__actions[b-ndrglt7yhw]  .co-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-pill);
    border: none;
    background: transparent;
    color: var(--c-ink, #1f2328);
    cursor: pointer;
    transition: background .15s ease;
}

    .co-nav__actions[b-ndrglt7yhw]  .co-icon:hover {
        background: color-mix(in srgb, var(--c-ink, #1f2328) 8%, transparent);
    }

.co-badge[b-ndrglt7yhw] {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 .3rem;
    border-radius: var(--r-pill);
    background: var(--co-primary);
    color: var(--shop-primary-text, #fff);
    font-size: .68rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--c-surface, #fff);
}

/* ── Mobile: keep the bar compact so a long shop name can't break it ──── */
@media (max-width: 560px) {
    .co-name[b-ndrglt7yhw] {
        display: none;
    }
}

@media (max-width: 400px) {
    .co-nav__back-label[b-ndrglt7yhw] {
        display: none;
    }
}
/* /Pages/Shop/KioskTypeIndicator.razor.rz.scp.css */
/* Same treatment as TableIndicator's .tbl-label, which shares both hosts:
   colour from the host (a tenant primary can land unreadable on its own
   surface), so the icon inherits too. */

.kiosk-label[b-qhaah1xhls] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: .9rem;
    font-weight: 600;
    color: inherit;
}
/* /Pages/Shop/LanguagePicker.razor.rz.scp.css */
/* Reusable language picker. Colors come from CSS custom properties that fall
   back to the webshop tokens, so it matches ShopNavbar by default; hosts can
   override --lang-* to retheme it (see the checkout, which maps them to --c-*). */

.lang-picker[b-14df4mrsj5] {
    position: relative;
    flex-shrink: 0;
}

/* Circle button */
.lang-picker__btn[b-14df4mrsj5] {
    /* Globe and code side by side on one centred line, like the other navbar
       icons (stacked, they sat above and below that line). A pill rather than a
       circle so both fit; it is still 38px tall like its neighbours. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-width: 38px;
    padding: 0 .6rem;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--lang-border, color-mix(in srgb, var(--shop-font-color, #18181b) 12%, transparent));
    background: transparent;
    color: var(--lang-ink, inherit);
    cursor: pointer;
    line-height: 1;
    transition: border-color .15s ease, background .15s ease;
}

    .lang-picker__btn:hover[b-14df4mrsj5] {
        border-color: var(--lang-accent, var(--lp-primary, #ff7200));
        background: var(--lang-hover-bg, rgba(0, 0, 0, .04));
    }


.lang-picker__globe[b-14df4mrsj5] {
    font-size: .8rem;
    opacity: .7;
}

.lang-picker__code[b-14df4mrsj5] {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/* Dropdown card */
.lang-picker__menu[b-14df4mrsj5] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--lang-surface, var(--shop-surface, #fff));
    color: var(--lang-menu-ink, var(--shop-font-color, #1f2328));
    border: 1px solid var(--lang-border, color-mix(in srgb, var(--shop-font-color, #18181b) 10%, transparent));
    border-radius: var(--shop-border-radius, 10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: .35rem;
    min-width: 160px;
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Each language row */
.lang-picker__item[b-14df4mrsj5] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: .4rem .6rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: .88rem;
    cursor: pointer;
    text-align: left;
    transition: background .12s ease;
}

    .lang-picker__item:hover[b-14df4mrsj5] {
        background: var(--lang-hover-bg, rgba(0, 0, 0, .05));
    }

.lang-picker__item--active[b-14df4mrsj5] {
    background: color-mix(in srgb, var(--lang-accent, var(--lp-primary, #ff7200)) 12%, transparent);
    font-weight: 600;
    color: var(--lang-accent, var(--lp-primary, #ff7200));
}

.lang-picker__item img[b-14df4mrsj5] {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ── Dark fallbacks ───────────────────────────────────────────────────────
   Only reached when neither the host nor the tenant supplies colours: hosts
   that map --lang-* (CheckoutNavbar → --c-*) and tenants that set --shop-*
   still win, because every rule keeps the same var() chain and swaps only the
   literal at the end. ShopNavbar sets no --lang-*, which is why the picker
   stayed light there. Palette matches CartDrawer.
   --lang-accent / the active row are brand-coloured, so they stay put. */
@media (prefers-color-scheme: dark) {
    .lang-picker__btn[b-14df4mrsj5] {
        border-color: var(--lang-border, color-mix(in srgb, var(--shop-font-color, #f1f1f1) 16%, transparent));
    }

        .lang-picker__btn:hover[b-14df4mrsj5] {
            background: var(--lang-hover-bg, rgba(255, 255, 255, .07));
        }

    .lang-picker__menu[b-14df4mrsj5] {
        background: var(--lang-surface, var(--shop-surface, #1e1e1e));
        color: var(--lang-menu-ink, var(--shop-font-color, #f1f1f1));
        border-color: var(--lang-border, color-mix(in srgb, var(--shop-font-color, #f1f1f1) 14%, transparent));
        box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
    }

    .lang-picker__item:hover[b-14df4mrsj5] {
        background: var(--lang-hover-bg, rgba(255, 255, 255, .08));
    }
}
/* /Pages/Shop/OrderTypeIndicator.razor.rz.scp.css */
/* Order-type pill for the shop navbar. Same var() chain as LanguagePicker /
   CartDrawer: tenant --shop-* tokens win, the literals are only the un-themed
   fallback, and the accent is --lp-primary. */

.otp[b-7xu9w056jd] {
    position: relative;
    flex-shrink: 0;
}

/* Resting pill — reads as a status first, a control second. */
.otp__btn[b-7xu9w056jd] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 32px;
    padding: 0 .55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 12%, transparent);
    background: transparent;
    color: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .otp__btn:hover[b-7xu9w056jd] {
        border-color: var(--lp-primary, #ff7200);
        background: rgba(0, 0, 0, .04);
    }

/* Only one type on offer: nothing to open, so drop the affordances but keep
   the label — saying which mode you are in is the whole point. */
.otp__btn--static[b-7xu9w056jd],
.otp__btn--static:hover[b-7xu9w056jd] {
    cursor: default;
    border-color: transparent;
    background: transparent;
    opacity: .75;
}

.otp__icon[b-7xu9w056jd] {
    display: inline-flex;
    color: var(--lp-primary, #ff7200);
    font-size: 1rem;
    line-height: 1;
}

.otp__chev[b-7xu9w056jd] {
    font-size: .6rem;
    opacity: .5;
}

/* Dropdown card — mirrors .lang-picker__menu. The pill sits in the navbar's
   right-hand group, so the card opens leftwards. */
.otp__menu[b-7xu9w056jd] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--shop-surface, #fff);
    color: var(--shop-font-color, #1f2328);
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 10%, transparent);
    border-radius: var(--shop-border-radius, 10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: .35rem;
    min-width: 170px;
    z-index: 151;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Sits under the card but over everything else, so any click outside closes. */
.otp__backdrop[b-7xu9w056jd] {
    position: fixed;
    inset: 0;
    z-index: 150;
}

.otp__item[b-7xu9w056jd] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: .45rem .6rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: .88rem;
    cursor: pointer;
    text-align: left;
    transition: background .12s ease;
}

    .otp__item:hover[b-7xu9w056jd] {
        background: rgba(0, 0, 0, .05);
    }

    .otp__item:disabled[b-7xu9w056jd] {
        opacity: .4;
        cursor: not-allowed;
    }

.otp__item--active[b-7xu9w056jd] {
    background: color-mix(in srgb, var(--lp-primary, #ff7200) 12%, transparent);
    font-weight: 600;
    color: var(--lp-primary, #ff7200);
}

/* Phones: icon only, dressed as one of the navbar's round action buttons
   (search, cart) since it sits in that row. No chevron - tapping opens the
   card anyway, and the type is named there; the two glyphs differ (truck vs. bag). */
@container lp-page (max-width: 599.98px) {
    .otp__btn[b-7xu9w056jd] {
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        gap: 0;
    }

        .otp__btn:hover[b-7xu9w056jd] {
            border-color: color-mix(in srgb, var(--shop-font-color, #18181b) 12%, transparent);
        }

    .otp__btn .otp__icon[b-7xu9w056jd] {
        color: inherit;
    }

        /* Same glyph size as the cart and search buttons. */
        .otp__btn .otp__icon[b-7xu9w056jd] {
            font-size: 1.15rem;
        }

    .otp__label[b-7xu9w056jd],
    .otp__chev[b-7xu9w056jd] {
        display: none;
    }

    /* Nothing to open, nothing to read — a lone icon would be decoration. */
    .otp__btn--static[b-7xu9w056jd] {
        display: none;
    }

    .otp__menu[b-7xu9w056jd] {
        min-width: 150px;
    }
}

/* ── Dark fallbacks ─────────────────────────────────────────────────────
   Only reached when the tenant set no --shop-* token; the brand accent and the
   active row are brand-coloured, so they stay put. */
@media (prefers-color-scheme: dark) {
    /* No button border/hover override: the navbar dropped its own (see the
       commented-out block in ShopNavbar.razor.css), and a white outline on a
       light tenant surface made this circle vanish next to the cart. */
    .otp__menu[b-7xu9w056jd] {
        background: var(--shop-surface, #1e1e1e);
        color: var(--shop-font-color, #f1f1f1);
        border-color: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 14%, transparent);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
    }

    .otp__item:hover[b-7xu9w056jd] {
        background: rgba(255, 255, 255, .08);
    }
}
/* /Pages/Shop/PriceRangeInput.razor.rz.scp.css */
.pri-range[b-sqrg9fc3ng] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pri-range__labels[b-sqrg9fc3ng] {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    font-weight: 600;
    color: var(--shop-font-color, #52525b);
    opacity: .75;
}

.pri-range__inputs[b-sqrg9fc3ng] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

    .pri-range__inputs .pri-range__field[b-sqrg9fc3ng] {
        flex: 1;
    }

.pri-range__field[b-sqrg9fc3ng] {
    display: flex;
    align-items: center;
    border: 1.5px solid color-mix(in srgb, var(--shop-font-color, #18181b) 16%, transparent);
    border-radius: var(--shop-border-radius, 8px);
    padding: .55rem .7rem;
    background: var(--shop-surface, #fff);
}

    .pri-range__field input[b-sqrg9fc3ng] {
        border: none;
        outline: none;
        width: 100%;
        font: inherit;
        font-size: .95rem;
        font-weight: 700;
        color: var(--shop-font-color, #18181b);
        background: var(--shop-surface, #fff);
        -moz-appearance: textfield;
    }

        .pri-range__field input[b-sqrg9fc3ng]::-webkit-outer-spin-button,
        .pri-range__field input[b-sqrg9fc3ng]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

.pri-range__sep[b-sqrg9fc3ng] {
    color: var(--shop-font-color, #18181b);
    opacity: .4;
}

/* Two range inputs stacked on one track. Only their handles take the pointer,
   so either handle can be grabbed wherever the other one sits. The part
   between the handles is painted from --lo/--hi, set inline. */
.pri-range__track[b-sqrg9fc3ng] {
    position: relative;
    height: 22px;
    margin: 0 11px;
}

    .pri-range__track[b-sqrg9fc3ng]::before,
    .pri-range__track[b-sqrg9fc3ng]::after {
        content: "";
        position: absolute;
        top: 50%;
        height: 4px;
        margin-top: -2px;
        border-radius: 2px;
    }

    .pri-range__track[b-sqrg9fc3ng]::before {
        left: -11px;
        right: -11px;
        background: color-mix(in srgb, var(--shop-font-color, #18181b) 14%, transparent);
    }

    .pri-range__track[b-sqrg9fc3ng]::after {
        left: var(--lo);
        right: calc(100% - var(--hi));
        background: var(--lp-primary, #ff7200);
    }

.pri-range__slider[b-sqrg9fc3ng] {
    position: absolute;
    inset: 0 -11px;
    width: calc(100% + 22px);
    height: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 1;
}

    .pri-range__slider[b-sqrg9fc3ng]::-webkit-slider-runnable-track {
        background: none;
        border: none;
    }

    .pri-range__slider[b-sqrg9fc3ng]::-moz-range-track {
        background: none;
        border: none;
    }

    .pri-range__slider[b-sqrg9fc3ng]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--shop-surface, #fff);
        border: 2px solid var(--lp-primary, #ff7200);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
        pointer-events: auto;
        cursor: grab;
    }

    .pri-range__slider[b-sqrg9fc3ng]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--shop-surface, #fff);
        border: 2px solid var(--lp-primary, #ff7200);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
        pointer-events: auto;
        cursor: grab;
    }

    .pri-range__slider:active[b-sqrg9fc3ng]::-webkit-slider-thumb {
        cursor: grabbing;
    }

    .pri-range__slider:focus-visible[b-sqrg9fc3ng]::-webkit-slider-thumb {
        outline: 2px solid var(--lp-primary, #ff7200);
        outline-offset: 2px;
    }

/* ── Dark fallbacks ───────────────────────────────────────────────────────
   This component reads --shop-* directly rather than the filter's --pf-*
   tokens, so it isn't covered by ProductFilter's dark block. A tenant palette
   still wins in both modes; only the literal fallbacks flip. The slider's
   handles and fill are brand-coloured and stay put. */
@media (prefers-color-scheme: dark) {
    .pri-range__labels[b-sqrg9fc3ng] {
        color: var(--shop-font-color, #b4b4bd);
    }

    .pri-range__track[b-sqrg9fc3ng]::before {
        background: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 22%, transparent);
    }

    .pri-range__field[b-sqrg9fc3ng] {
        border-color: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 24%, transparent);
        background: var(--shop-surface, #1e1e1e);
    }

        .pri-range__field input[b-sqrg9fc3ng] {
            color: var(--shop-font-color, #f1f1f1);
            background: var(--shop-surface, #1e1e1e);
        }

    .pri-range__sep[b-sqrg9fc3ng] {
        color: var(--shop-font-color, #f1f1f1);
    }
}
/* /Pages/Shop/ProductConfigurator.razor.rz.scp.css */
/* Retail buy box + right-side option drawer.
   Tokens mirror design/ProductDetail.razor.css but are compiled here (that file
   is reference-only). Retints to the tenant brand via --lp-primary / --shop-*. */

.pd-buy[b-rrplitbb5m] {
    --pd-primary: var(--lp-primary, #ff7a1a);
    /* on-primary text/icon colour — using the existing --shop-surface param
       (white-ish in light theme), white fallback. TODO: revisit theme params. */
    --pd-primary-ink: var(--shop-primary-text, #fff);
    --pd-primary-tint: color-mix(in srgb, var(--pd-primary) 8%, transparent);
    --pd-surface: var(--shop-surface, #ffffff);
    /* Derive neutrals from the theme tokens so they invert with light/dark
       instead of staying light-theme constants. Borders + muted text are tints
       of --shop-font-color (dark ink → subtle dark tints in light mode; light
       ink → subtle light tints in dark mode); muted bg follows --shop-bg. */
    --pd-muted: var(--shop-bg, #f5f5f7);
    --pd-border: color-mix(in srgb, var(--shop-font-color, #18181b) 10%, transparent);
    --pd-border-strong: color-mix(in srgb, var(--shop-font-color, #18181b) 16%, transparent);
    --pd-text: var(--shop-font-color, #18181b);
    --pd-text-2: color-mix(in srgb, var(--shop-font-color, #18181b) 65%, transparent);
    --pd-text-3: color-mix(in srgb, var(--shop-font-color, #18181b) 45%, transparent);
    /* Required-option and notice errors: the theme's error colour. */
    --pd-error: var(--error-color, #dc3545);
    --pd-r: var(--shop-border-radius, 12px);
    --pd-r-sm: var(--shop-border-radius, 8px);

    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--pd-text);
    font-family: inherit;
}

.pd-buy__heading[b-rrplitbb5m] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.pd-buy__title[b-rrplitbb5m] {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.pd-buy__sku[b-rrplitbb5m] {
    font-size: .82rem;
    color: var(--pd-text-3);
    line-height: 1.3;
    letter-spacing: .01em;
}

.pd-buy__price[b-rrplitbb5m] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    --plu-price-size: 2rem;
    --plu-price-weight: 800;
    --plu-price-tracking: -.01em;
}

.pd-buy__vat[b-rrplitbb5m] {
    font-size: .78rem;
    color: var(--pd-text-3);
}

.pd-buy__short[b-rrplitbb5m] {
    font-size: .98rem;
    color: var(--pd-text-2);
    line-height: 1.6;
    margin: 0;
}

.pd-buy__ingredients[b-rrplitbb5m] {
    font-size: .88rem;
    color: var(--pd-text-3);
    line-height: 1.5;
    margin: 0;
}

.pd-buy__divider[b-rrplitbb5m] {
    height: 1px;
    background: var(--pd-border);
}

/* ── Summary rows ──────────────────────────────────────────────────────── */
.pd-opts[b-rrplitbb5m] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.pd-optrow[b-rrplitbb5m] {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    text-align: left;
    padding: .85rem 1rem;
    border: 1.5px solid var(--pd-border-strong);
    border-radius: var(--pd-r-sm);
    background: var(--pd-surface);
    color: var(--pd-text);
    font: inherit;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.pd-optrow:hover[b-rrplitbb5m] {
    border-color: var(--pd-primary);
}

.pd-optrow--error[b-rrplitbb5m] {
    border-color: var(--pd-error);
    background: color-mix(in srgb, var(--pd-error) 6%, transparent);
}

.pd-optrow__main[b-rrplitbb5m] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0;
}

.pd-optrow__label[b-rrplitbb5m] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--pd-text-2);
}

.pd-optrow__req[b-rrplitbb5m] {
    color: var(--pd-error);
    margin-left: .15rem;
}

.pd-optrow__value[b-rrplitbb5m] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--pd-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-optrow__value--empty[b-rrplitbb5m] {
    color: var(--pd-text-3);
    font-weight: 500;
}

.pd-optrow__chev[b-rrplitbb5m] {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--pd-text-3);
    flex-shrink: 0;
}

/* ── Quantity + CTA ────────────────────────────────────────────────────── */
.pd-buy__cta[b-rrplitbb5m] {
    display: flex;
    gap: .7rem;
    align-items: stretch;
}

.pd-qty-wrap[b-rrplitbb5m] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    flex-shrink: 0;
}

    /* The cap hint uses the global .plu-stock-badge pill; stretched to the
       stepper width by the wrap, so centre its text. */
    .pd-qty-wrap .plu-stock-badge[b-rrplitbb5m] {
        justify-content: center;
    }

.pd-qty[b-rrplitbb5m] {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--pd-border-strong);
    border-radius: var(--pd-r-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.pd-qty button[b-rrplitbb5m] {
    width: 46px;
    height: 52px;
    border: none;
    background: var(--pd-surface);
    color: var(--pd-text);
    font-size: 1.3rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease;
}

.pd-qty button:hover[b-rrplitbb5m] {
    background: var(--pd-muted);
}

.pd-qty input[b-rrplitbb5m] {
    width: 44px;
    height: 52px;
    border: none;
    text-align: center;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pd-text);
    background: var(--pd-surface);
    -moz-appearance: textfield;
}

.pd-qty input[b-rrplitbb5m]::-webkit-outer-spin-button,
.pd-qty input[b-rrplitbb5m]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pd-btn-primary[b-rrplitbb5m] {
    flex: 1;
    /* A flex item sizes to its content by default, so the stepper + button row
       would rather run off the side of a narrow phone than let the button
       shrink. min-width:0 lets it fit the space it actually has; the font and
       padding scale down with the viewport and the label ellipsises, so the
       content adapts to the button instead of the button to the content. */
    min-width: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.35rem, 1.6vw, .55rem);
    height: 52px;
    padding: 0 clamp(.65rem, 3vw, 1.1rem);
    border-radius: var(--pd-r-sm);
    border: none;
    background: var(--pd-primary);
    color: var(--pd-primary-ink);
    font: inherit;
    font-size: clamp(.82rem, 3.2vw, 1rem);
    font-weight: 700;
    cursor: pointer;
    transition: filter .14s ease, transform .12s ease;
}

    .pd-btn-primary__icon[b-rrplitbb5m] {
        flex-shrink: 0;
        font-size: 1.2rem;
        line-height: 1;
    }

.pd-btn-primary:hover[b-rrplitbb5m] {
    filter: brightness(1.06);
}

.pd-btn-primary:active[b-rrplitbb5m] {
    transform: scale(.99);
}

.pd-btn-primary:disabled[b-rrplitbb5m] {
    opacity: .45;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

/* The label is the part that may be clipped — the price never is. */
.pd-btn-primary__label[b-rrplitbb5m] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-btn-primary__total[b-rrplitbb5m] {
    margin-left: auto;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}

.pd-notice[b-rrplitbb5m] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .85rem 1rem;
    margin-bottom: .25rem;
    border-radius: var(--pd-r-sm, 8px);
    border: 1px solid color-mix(in srgb, var(--pd-error) 40%, transparent);
    background: color-mix(in srgb, var(--pd-error) 8%, transparent);
}

.pd-notice__title[b-rrplitbb5m] {
    margin: 0;
    font-size: .95rem;
    font-weight: 800;
    color: var(--pd-text, inherit);
}

.pd-notice__info[b-rrplitbb5m] {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--pd-text-2, inherit);
}

.pd-qty button:disabled[b-rrplitbb5m],
.pd-qty input:disabled[b-rrplitbb5m] {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Right-side drawer ─────────────────────────────────────────────────── */
.pd-scrim[b-rrplitbb5m] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 2100;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.pd-scrim.is-open[b-rrplitbb5m] {
    opacity: 1;
    visibility: visible;
}

.pd-drawer[b-rrplitbb5m] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    z-index: 2101;
    background: var(--shop-surface, #fff);
    color: var(--shop-font-color, #18181b);
    box-shadow: -12px 0 32px -16px rgba(0, 0, 0, .4);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s ease;
    /* The drawer <aside> is a sibling of .pd-buy, so it can't inherit .pd-buy's
       tokens — redefine the theme-derived neutrals here too so its borders /
       muted surfaces follow light/dark like the rest of the buy box. */
    --pd-muted: var(--shop-bg, #f5f5f7);
    --pd-border: color-mix(in srgb, var(--shop-font-color, #18181b) 10%, transparent);
    --pd-border-strong: color-mix(in srgb, var(--shop-font-color, #18181b) 20%, transparent);
    --pd-text-3: color-mix(in srgb, var(--shop-font-color, #18181b) 45%, transparent);
    --pd-error: var(--error-color, #dc3545);
}

.pd-drawer.is-open[b-rrplitbb5m] {
    transform: translateX(0);
}

.pd-drawer__head[b-rrplitbb5m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--pd-border);
}

.pd-drawer__head h3[b-rrplitbb5m] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.pd-drawer__close[b-rrplitbb5m] {
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: .25rem;
    display: inline-flex;
}

.pd-drawer__body[b-rrplitbb5m] {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.25rem;
}

.pd-drawer__hint[b-rrplitbb5m] {
    margin: 0 0 .9rem;
    font-size: .85rem;
    color: var(--shop-font-color, #52525b);
    opacity: .75;
}

.pd-drawer__hint--err[b-rrplitbb5m] {
    color: var(--pd-error);
    opacity: 1;
    font-weight: 600;
}

.pd-drawer__foot[b-rrplitbb5m] {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--pd-border);
}

.pd-drawer__foot .pd-btn-primary[b-rrplitbb5m] {
    width: 100%;
    /* redefined here because the drawer <aside> is a sibling of .pd-buy, not a
       child, so it can't inherit the tokens. */
    --pd-primary: var(--lp-primary, #ff7a1a);
    --pd-primary-ink: var(--shop-primary-text, #fff);
}

/* ── Choice rows (inside drawer) ───────────────────────────────────────── */
.pd-choices[b-rrplitbb5m] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.pd-choice[b-rrplitbb5m] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border: 1px solid var(--pd-border);
    border-radius: var(--shop-border-radius, 8px);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.pd-choice:hover[b-rrplitbb5m] {
    border-color: var(--pd-border-strong);
}

.pd-choice--on[b-rrplitbb5m] {
    border-color: var(--lp-primary, #ff7a1a);
    background: color-mix(in srgb, var(--lp-primary, #ff7a1a) 7%, transparent);
}

.pd-choice__img[b-rrplitbb5m] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--pd-muted);
}

.pd-choice__name[b-rrplitbb5m] {
    flex: 1;
    font-size: .92rem;
    font-weight: 500;
    min-width: 0;
}

.pd-choice__name--off[b-rrplitbb5m] {
    text-decoration: line-through;
    color: var(--pd-text-3);
}

.pd-choice__price[b-rrplitbb5m] {
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Sticky mobile buy bar ─────────────────────────────────────────────── */
.pd-stickybar[b-rrplitbb5m] {
    /* Inherits --pd-primary / --pd-primary-ink from .pd-buy (it's a child of it
       in the DOM — fixed positioning doesn't affect custom-property inheritance). */
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    align-items: center;
    gap: .8rem;
    padding: .7rem 1rem;
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0));
    background: var(--shop-surface, #ffffff);
    border-top: 1px solid var(--pd-border);
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .3);
    transition: transform .25s ease;
}

.pd-stickybar__info[b-rrplitbb5m] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    min-width: 0;
}

.pd-stickybar__price[b-rrplitbb5m] {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--shop-font-color, #18181b);
    white-space: nowrap;
}

.pd-stickybar__btn[b-rrplitbb5m] {
    height: 48px;
    margin-left: auto;
    flex: 1;
    max-width: 62%;
}

/* Slides out of view while the real Add button is on screen. */
.pd-stickybar--hidden[b-rrplitbb5m] {
    transform: translateY(130%);
}

@media (max-width: 860px) {
    .pd-stickybar[b-rrplitbb5m] {
        display: flex;
    }
}

/* ── Narrow phones ─────────────────────────────────────────────────────────
   The CTA is one row: quantity stepper + Add. Instead of letting it push past
   the screen edge, give the button back the width it needs. */
@media (max-width: 480px) {
    /* On a discounted article the button carried both figures ("84,00 kr
       120,00 kr"), which alone is wider than the button. The was/now pair is
       already spelled out above the option rows — the button keeps the total. */
    .pd-btn-primary__total[b-rrplitbb5m]  .plu-price__old {
        display: none;
    }
}

@media (max-width: 400px) {
    .pd-buy__cta[b-rrplitbb5m] {
        gap: .5rem;
    }

    .pd-qty button[b-rrplitbb5m] {
        width: 40px;
    }

    .pd-qty input[b-rrplitbb5m] {
        width: 36px;
    }
}

/* ── Dark fallbacks ───────────────────────────────────────────────────────
   Theme.cs emits a --shop-* token only for colours the tenant actually picked,
   so an un-themed shop falls back to the literals above — all light. Keeping
   var(--shop-*, …) here means a tenant palette still wins in both modes; only
   the fallback flips. Palette matches CartDrawer. Ink that sits on the brand
   colour (buttons, badges) is deliberately left alone. */
@media (prefers-color-scheme: dark) {
    .pd-buy[b-rrplitbb5m],
    .pd-drawer[b-rrplitbb5m] {
        --pd-surface: var(--shop-surface, #1e1e1e);
        --pd-muted: var(--shop-bg, #262629);
        --pd-border: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 14%, transparent);
        --pd-border-strong: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 24%, transparent);
        --pd-text: var(--shop-font-color, #f1f1f1);
        --pd-text-2: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 65%, transparent);
        --pd-text-3: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 45%, transparent);
        --pd-error: var(--error-color, #f07178);
    }

    .pd-drawer[b-rrplitbb5m] {
        background: var(--shop-surface, #1e1e1e);
        color: var(--shop-font-color, #f1f1f1);
        box-shadow: -12px 0 32px -16px rgba(0, 0, 0, .75);
    }

    .pd-drawer__hint[b-rrplitbb5m] {
        color: var(--shop-font-color, #b4b4bd);
    }

    .pd-scrim[b-rrplitbb5m] {
        background: rgba(0, 0, 0, .6);
    }

    .pd-stickybar[b-rrplitbb5m] {
        background: var(--shop-surface, #1e1e1e);
        box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .8);
    }

    .pd-stickybar__price[b-rrplitbb5m] {
        color: var(--shop-font-color, #f1f1f1);
    }
}
/* /Pages/Shop/ProductFilter.razor.rz.scp.css */
/* Trademax-style faceted filter — scoped styling for ProductFilter.razor.
   All design tokens are scoped to .pf so dropping this into a Blazor page
   won't bleed into other UI. The single tunable input is --pf-primary;
   set it on .pf (or a parent) to retint to the tenant's brand colour. */

.pf[b-31ahw7d01j] {
    --pf-primary: var(--lp-primary, #ff7a1a);
    --pf-primary-ink: var(--shop-primary-text, #fff);
    /* The section toggle is chrome, not brand: dark navy whatever the tenant's
       primary colour is, so it stays readable next to any of them. */
    --pf-toggle: #0a2540;
    --pf-toggle-ink: #ffffff;
    --pf-primary-tint: color-mix(in srgb, var(--pf-primary) 8%, transparent);
    --pf-primary-tint-2: color-mix(in srgb, var(--pf-primary) 14%, transparent);
    --pf-surface: var(--shop-surface, #ffffff);
    --pf-text: var(--shop-font-color, #18181b);
    /* Everything else is mixed from the shop's own text and surface, so it
       follows whichever theme file is loaded - light, dark, or light in a dark
       OS when the shop has dark mode off. Fixed greys went invisible there. */
    --pf-muted: color-mix(in srgb, var(--pf-text) 5%, var(--pf-surface));
    --pf-muted-2: color-mix(in srgb, var(--pf-text) 9%, var(--pf-surface));
    --pf-border: color-mix(in srgb, var(--pf-text) 11%, transparent);
    --pf-border-strong: color-mix(in srgb, var(--pf-text) 18%, transparent);
    --pf-text-2: color-mix(in srgb, var(--pf-text) 72%, var(--pf-surface));
    --pf-text-3: color-mix(in srgb, var(--pf-text) 52%, var(--pf-surface));
    --pf-text-soft: var(--pf-text-3);
    --c-star: #f5a623;
    --pf-r: var(--shop-border-radius, 12px);
    --pf-r-sm: var(--shop-border-radius, 8px);
    --pf-r-pill: 999px;
    font-family: inherit;
    color: var(--pf-text);
}

/* ═══ Filter / sort bar ════════════════════════════════════════════════════ */
.pf-bar[b-31ahw7d01j] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .75rem 0 .5rem;
}

.pf-bar__all[b-31ahw7d01j] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-radius: var(--pf-r-sm);
    border: 1.5px solid var(--pf-text);
    background: var(--pf-text);
    /* Inverted button: ink background, surface-coloured label. Must use
       --pf-surface, not var(--shop-surface, #fff) — the raw fallback stayed
       white in dark mode and vanished against the now-light --pf-text. */
    color: var(--pf-surface);
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: filter .14s ease;
}

    .pf-bar__all:hover[b-31ahw7d01j] {
        filter: brightness(1.15);
    }

.pf-bar__count[b-31ahw7d01j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 .35rem;
    border-radius: var(--pf-r-pill);
    background: var(--pf-primary);
    color: var(--pf-primary-ink);
    font-size: .72rem;
    font-weight: 800;
    /* The inherited line height left room above the digit, so it sat low. */
    line-height: 1;
    font-variant-numeric: tabular-nums;
}


/* ── Inline dropdown wrapper ──────────────────────────────────────────── */
.pf-drop[b-31ahw7d01j] {
    position: relative;
    flex-shrink: 0;
}

.pf-drop__panel[b-31ahw7d01j] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    min-width: 260px;
    background: var(--pf-surface);
    border: 1.5px solid var(--pf-border-strong);
    border-radius: var(--pf-r);
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.18);
    padding: 1rem 1.1rem 1.1rem;
}

/* Right-aligned panel (used by Sort at the end of the bar) */
.pf-drop--end[b-31ahw7d01j] {
    margin-left: auto;
}

    .pf-drop--end .pf-drop__panel[b-31ahw7d01j] {
        left: auto;
        right: 0;
    }

/* Sort option rows */
.pf-drop__panel--sort[b-31ahw7d01j] {
    padding: .4rem;
    min-width: 200px;
}

.pf-sort-opt[b-31ahw7d01j] {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .65rem .75rem;
    background: none;
    border: none;
    border-radius: var(--pf-r-sm);
    font: inherit;
    font-size: .9rem;
    color: var(--pf-text);
    cursor: pointer;
    text-align: left;
    transition: background .12s ease;
}

    .pf-sort-opt:hover[b-31ahw7d01j] {
        background: var(--pf-muted);
    }

.pf-sort-opt--on[b-31ahw7d01j] {
    font-weight: 700;
    color: var(--pf-primary);
}

.pf-sort-opt svg[b-31ahw7d01j] {
    flex-shrink: 0;
}

.pf-drop__scrim[b-31ahw7d01j] {
    position: fixed;
    inset: 0;
    z-index: 199;
}

.pf-bar__facet-val[b-31ahw7d01j] {
    font-weight: 700;
    font-size: .8rem;
    color: var(--pf-primary);
    margin-left: .15rem;
}

.pf-bar__chev[b-31ahw7d01j] {
    opacity: .55;
    transition: transform .18s ease;
    flex-shrink: 0;
}

.pf-bar__facet--open .pf-bar__chev[b-31ahw7d01j] {
    transform: rotate(180deg);
}

.pf-bar__quick[b-31ahw7d01j] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.pf-bar__facet[b-31ahw7d01j] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .6rem .85rem;
    border-radius: var(--pf-r-sm);
    border: 1.5px solid var(--pf-border-strong);
    background: var(--pf-surface);
    color: var(--pf-text);
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}

    .pf-bar__facet:hover[b-31ahw7d01j] {
        border-color: var(--pf-primary);
    }

    .pf-bar__facet svg[b-31ahw7d01j] {
        opacity: .55;
    }

.pf-bar__facet--on[b-31ahw7d01j] {
    border-color: var(--pf-primary);
    background: var(--pf-primary-tint);
    color: var(--pf-text);
}



/* ═══ Right drawer ══════════════════════════════════════════════════════════ */
.pf-drawer[b-31ahw7d01j] {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 250;
    width: min(420px, 92vw);
    height: 100%;
    background: var(--pf-surface);
    box-shadow: -12px 0 40px -16px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
}

.pf-drawer--open[b-31ahw7d01j] {
    transform: translateX(0);
}

.pf-drawer__head[b-31ahw7d01j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--pf-border);
    flex-shrink: 0;
}

    .pf-drawer__head strong[b-31ahw7d01j] {
        font-size: 1.15rem;
        font-weight: 800;
    }

.pf-drawer__close[b-31ahw7d01j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--pf-r-pill);
    border: none;
    background: var(--pf-muted);
    color: var(--pf-text);
    cursor: pointer;
    transition: background .14s ease;
}

    .pf-drawer__close:hover[b-31ahw7d01j] {
        background: var(--pf-muted-2);
    }

.pf-drawer__body[b-31ahw7d01j] {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .25rem 1.25rem;
    /* The scrollbar's room is kept even while nothing scrolls, so opening a
       group doesn't shove everything sideways when the bar turns up. Thin and
       quiet, it only needs to say "there is more". */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--pf-text) 25%, transparent) transparent;
}

.pf-drawer__foot[b-31ahw7d01j] {
    display: flex;
    gap: .75rem;
    padding: 1rem 1.25rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--pf-border);
    flex-shrink: 0;
}

.pf-drawer__clear[b-31ahw7d01j] {
    flex-shrink: 0;
    padding: 0 1.1rem;
    height: 48px;
    border-radius: var(--pf-r-sm);
    border: 1.5px solid var(--pf-border-strong);
    background: var(--pf-surface);
    color: var(--pf-text);
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
}

    .pf-drawer__clear:hover[b-31ahw7d01j] {
        border-color: var(--pf-text);
    }

.pf-btn-primary[b-31ahw7d01j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border-radius: var(--pf-r-sm);
    border: none;
    background: var(--pf-primary);
    color: var(--pf-primary-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .14s ease, transform .12s ease;
}

    .pf-btn-primary:hover[b-31ahw7d01j] {
        filter: brightness(1.06);
    }

    .pf-btn-primary:active[b-31ahw7d01j] {
        transform: scale(.99);
    }

.pf-drawer__apply[b-31ahw7d01j] {
    flex: 1;
    height: 48px;
}

.pf-drawer__scrim[b-31ahw7d01j] {
    position: fixed;
    inset: 0;
    z-index: 240;
    background: rgba(15,15,20,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

.pf-drawer__scrim--on[b-31ahw7d01j] {
    opacity: 1;
    pointer-events: auto;
}

/* ── Drawer sections ────────────────────────────────────────────────────── */
.pf-sec[b-31ahw7d01j] {
    border-bottom: 1px solid var(--pf-border);
}

.pf-sec__head[b-31ahw7d01j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.05rem 0;
    background: none;
    border: none;
    font: inherit;
    font-size: .98rem;
    font-weight: 700;
    color: var(--pf-text);
    cursor: pointer;
}

    /* The chevron sits in a filled circle, as on the rest of the shop's
       section heads - a target rather than a decoration. */
    .pf-sec__toggle[b-31ahw7d01j] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        border-radius: 50%;
        background: var(--pf-toggle);
        color: var(--pf-toggle-ink);
    }

    /* The count belongs to the name, but not glued to it. */
    .pf-sec__head .pf-bar__count[b-31ahw7d01j] {
        margin-inline-start: .5rem;
    }

    .pf-sec__head svg[b-31ahw7d01j] {
        transition: transform .2s ease;
    }

.pf-sec--open .pf-sec__head svg[b-31ahw7d01j] {
    transform: rotate(180deg);
}

/* Opening and closing slide: the panel's one grid row grows from 0fr to 1fr,
   which animates to the content's real height without knowing it. */
.pf-sec__panel[b-31ahw7d01j] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}

.pf-sec--open .pf-sec__panel[b-31ahw7d01j] {
    grid-template-rows: 1fr;
    opacity: 1;
}

.pf-sec__inner[b-31ahw7d01j] {
    min-height: 0;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .pf-sec__panel[b-31ahw7d01j],
    .pf-sec__head svg[b-31ahw7d01j] {
        transition: none;
    }
}

.pf-sec__body[b-31ahw7d01j] {
    padding: 0 0 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/* An open group shows every filter in it, one after the other: each under a
   small heading of its own, spaced apart so where one ends is obvious. */
.pf-group[b-31ahw7d01j] {
    gap: 1.1rem;
}

.pf-facet[b-31ahw7d01j] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

    /* A line between the filters of a group, like the one between groups. */
    .pf-facet + .pf-facet[b-31ahw7d01j] {
        border-top: 1px solid var(--pf-border);
        padding-top: 1.1rem;
    }

.pf-facet__head[b-31ahw7d01j] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .25rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--pf-text);
}

/* Checkbox option */
.pf-opt[b-31ahw7d01j] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem 0;
    font-size: .92rem;
    color: var(--pf-text);
    cursor: pointer;
}

.pf-check[b-31ahw7d01j] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--pf-border-strong);
    background: var(--pf-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    flex-shrink: 0;
    transition: background .12s ease, border-color .12s ease;
}

.pf-check--on[b-31ahw7d01j] {
    background: var(--pf-primary);
    border-color: var(--pf-primary);
    color: var(--pf-primary-ink);
}

/* Colour facet */
.pf-colors[b-31ahw7d01j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem .75rem;
    padding-top: .25rem;
}

.pf-color[b-31ahw7d01j] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .5rem;
    border-radius: var(--pf-r-sm);
    border: 1.5px solid transparent;
    background: none;
    font: inherit;
    font-size: .9rem;
    color: var(--pf-text);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

    .pf-color:hover[b-31ahw7d01j] {
        background: var(--pf-muted);
    }

.pf-color__dot[b-31ahw7d01j] {
    width: 22px;
    height: 22px;
    border-radius: var(--pf-r-pill);
    border: 1px solid var(--pf-border-strong);
    flex-shrink: 0;
}

.pf-color--on[b-31ahw7d01j] {
    border-color: var(--pf-primary);
    background: var(--pf-primary-tint);
    font-weight: 600;
}


/* Rating facet */
.pf-rate[b-31ahw7d01j] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding-top: .25rem;
}

.pf-rate__row[b-31ahw7d01j] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    color: var(--pf-text);
}

.pf-radio[b-31ahw7d01j] {
    width: 20px;
    height: 20px;
    border-radius: var(--pf-r-pill);
    border: 1.5px solid var(--pf-border-strong);
    flex-shrink: 0;
    position: relative;
}

.pf-radio--on[b-31ahw7d01j] {
    border-color: var(--pf-primary);
}

    .pf-radio--on[b-31ahw7d01j]::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: var(--pf-r-pill);
        background: var(--pf-primary);
    }

.pf-rate__stars[b-31ahw7d01j] {
    display: inline-flex;
}

    .pf-rate__stars svg[b-31ahw7d01j] {
        width: 17px;
        height: 17px;
    }

.pf-rate__txt[b-31ahw7d01j] {
    font-size: .85rem;
    color: var(--pf-text-2);
}

/* ── Dark fallbacks ───────────────────────────────────────────────────────
   Theme.cs emits a --shop-* token only for colours the tenant actually picked,
   so an un-themed shop falls back to the literals above — all light. Keeping
   var(--shop-*, …) here means a tenant palette still wins in both modes; only
   the fallback flips. Palette matches CartDrawer. Ink that sits on the brand
   colour (buttons, badges) is deliberately left alone. */
@media (prefers-color-scheme: dark) {
    /* Only the fallbacks for a shop without a theme; the rest follows. */
    .pf[b-31ahw7d01j] {
        --pf-surface: var(--shop-surface, #1e1e1e);
        --pf-text: var(--shop-font-color, #f1f1f1);
    }

    .pf-drop__panel[b-31ahw7d01j] {
        box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6);
    }

    .pf-drawer[b-31ahw7d01j] {
        box-shadow: -12px 0 40px -16px rgba(0, 0, 0, .75);
    }
}

/* --- Attribute facet options ------------------------------------------ */

.pf-opt[b-31ahw7d01j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    cursor: pointer;
}

.pf-opt__swatch[b-31ahw7d01j] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    object-fit: cover;
}

.pf-opt__swatch--dot[b-31ahw7d01j] {
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 15%, transparent);
}

.pf-opt__name[b-31ahw7d01j] {
    flex: 1 1 auto;
}

/* How many products this option leads to - a zero would be a dead end, so
   options that match nothing are never rendered in the first place. */
/* Unit under a number range ("cm"), quiet like the counts. */
.pf-opt__count[b-31ahw7d01j] {
    opacity: .6;
    font-size: .85em;
}

/* Name, then how many it leads to, then the box - the eye reads the value
   first and the control last, like the rest of the shop's lists. */
.pf-opt__box[b-31ahw7d01j] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0 0 0 .35rem;
    accent-color: var(--pf-primary);
    cursor: pointer;
}

.pf-search[b-31ahw7d01j] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    margin: 0 0 .5rem;
    border: 1px solid var(--pf-border-strong);
    border-radius: 8px;
    color: var(--pf-text);
}

    .pf-search svg[b-31ahw7d01j] {
        opacity: .6;
        flex: 0 0 16px;
    }

    .pf-search input[b-31ahw7d01j] {
        flex: 1 1 auto;
        min-width: 0;
        border: none;
        background: none;
        font: inherit;
        color: inherit;
        outline: none;
    }

/* Opens the rest of a long list. Full width, like Trademax's "show more". */
/* A real button across the whole list, not a link: the outline is drawn in
   the text colour so it reads on any theme. */
.pf-more[b-31ahw7d01j] {
    width: 100%;
    margin-top: .6rem;
    padding: .75rem 1rem;
    border: 1.5px solid var(--pf-text);
    border-radius: var(--pf-r-sm);
    background: var(--pf-surface);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--pf-text);
    cursor: pointer;
    transition: background .14s ease;
}

    .pf-more:hover[b-31ahw7d01j] {
        background: var(--pf-muted);
    }
/* /Pages/Shop/ProductSpecTable.razor.rz.scp.css */
/* Structure only - colours come from the shop theme tokens. */

.pst[b-z0db0drgug] {
    margin-top: 32px;
}

.pst__title[b-z0db0drgug] {
    font-size: 1.15rem;
    margin: 0 0 16px;
}

.pst__group + .pst__group[b-z0db0drgug] {
    margin-top: 20px;
}

.pst__group-title[b-z0db0drgug] {
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--shop-font-color, #222);
}

.pst__list[b-z0db0drgug] {
    margin: 0;
}

/* Key left, value right, with a rule between rows - a spec table is read by
   scanning one column, so the pairs must line up. */
.pst__row[b-z0db0drgug] {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    border-top: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 8%, transparent);
}

.pst__key[b-z0db0drgug] {
    flex: 0 0 40%;
    margin: 0;
    color: var(--shop-font-color, #555);
    opacity: .75;
}

.pst__val[b-z0db0drgug] {
    flex: 1 1 auto;
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .pst__key[b-z0db0drgug] {
        flex-basis: 50%;
    }
}
/* /Pages/Shop/RetailPluCard.razor.rz.scp.css */
/* Retail product card — adapted from design/PluCard.razor.css */

.plu[b-dzgcyq279s] {
    --plu-primary: var(--lp-primary, #ff7a1a);
    --plu-surface: var(--shop-surface, #ffffff);
    --plu-muted: var(--shop-bg,#f5f5f7);
    /* Derive neutrals from the theme tokens so borders + secondary text invert
       with light/dark instead of staying light-theme constants. */
    --plu-border: color-mix(in srgb, var(--shop-font-color, #18181b) 10%, transparent);
    --plu-border-strong: color-mix(in srgb, var(--shop-font-color, #18181b) 16%, transparent);
    --plu-ink: var(--shop-font-color, #18181b);
    --plu-ink-2: color-mix(in srgb, var(--shop-font-color, #18181b) 65%, transparent);
    --plu-ink-3: color-mix(in srgb, var(--shop-font-color, #18181b) 45%, transparent);
    /* Gold star stays fixed; sale red is the theme's promotion colour. */
    --c-star: #f5a623;
    --plu-sale: var(--shop-promo, #e23434);
    --plu-r: var(--shop-border-radius, 12px);
    --plu-r-sm: var(--shop-border-radius, 8px);
    --plu-shadow-sm: 0 1px 2px rgba(17, 17, 19, .05);
    --plu-shadow-card: 0 12px 28px -14px rgba(17, 17, 19, .28);
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--plu-surface);
    /* card edge is a global theme setting shared with the restaurant card */
    border: 1px solid var(--shop-card-border, var(--plu-border));
    border-radius: var(--plu-r);
    overflow: hidden;
    box-shadow: var(--plu-shadow-sm);
    font-family: inherit;
    color: var(--plu-ink);
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

    .plu:hover[b-dzgcyq279s] {
        box-shadow: var(--plu-shadow-card);
        transform: translateY(-3px);
        border-color: var(--shop-card-hover-border, var(--plu-border-strong));
    }

/* ── Media ──────────────────────────────────────────────────────────────── */
/* The frame: the square photo, then (for a family) its swatch strip below. */
.plu__media[b-dzgcyq279s] {
    background: var(--plu-muted);
    overflow: hidden;
    display: block;
}

/* Promo and the unavailable banner are positioned against the photo, not the
   frame, so they stay on the image whether or not a strip follows it. */
.plu__photo[b-dzgcyq279s] {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

    .plu__photo > img[b-dzgcyq279s] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .4s ease;
    }

.plu:hover .plu__photo > img[b-dzgcyq279s] {
    transform: scale(1.05);
}

.plu__media-fallback[b-dzgcyq279s] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--plu-ink-3);
    opacity: .25;
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.plu__body[b-dzgcyq279s] {
    /* min-width: 0 here and on .plu keeps long unbreakable content (a SKU, the
       swatch strip) from stretching the card past its grid column. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .85rem .9rem 1rem;
    flex: 1;
}

.plu__name[b-dzgcyq279s] {
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--plu-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plu__sku[b-dzgcyq279s] {
    font-size: .75rem;
    color: var(--plu-ink-2);
    line-height: 1.3;
    letter-spacing: .01em;
}

.plu__short[b-dzgcyq279s] {
    font-size: .82rem;
    color: var(--plu-ink-2);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plu__ingredients[b-dzgcyq279s] {
    font-size: .75rem;
    color: var(--plu-ink-2);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Foot ───────────────────────────────────────────────────────────────── */
.plu__foot[b-dzgcyq279s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .65rem;
    flex-wrap: wrap;
    --plu-price-size: 1.15rem;
    --plu-price-weight: 800;
    --plu-price-tracking: -.01em;
}

.plu-stock-badge[b-dzgcyq279s] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .plu-stock-badge[b-dzgcyq279s]::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: currentColor;
    }

.plu-stock-badge.out-of-stock[b-dzgcyq279s] {
    background-color: color-mix(in srgb, var(--error-color, #dc3545) 15%, transparent);
    border-color: color-mix(in srgb, var(--error-color, #dc3545) 50%, transparent);
    color: var(--error-color, #dc3545);
}

.plu-stock-badge.low-stock[b-dzgcyq279s] {
    background-color: color-mix(in srgb, var(--warning-color, #C05700) 15%, transparent);
    border-color: color-mix(in srgb, var(--warning-color, #C05700) 45%, transparent);
    color: var(--warning-color, #C05700);
}

.plu-btn-add[b-dzgcyq279s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--plu-r-sm);
    border: none;
    background: var(--plu-primary);
    color: var(--shop-primary-text, #fff);
    cursor: pointer;
    transition: filter .14s ease, transform .12s ease;
    flex-shrink: 0;
}

    .plu-btn-add:hover[b-dzgcyq279s] {
        filter: brightness(1.06);
    }

    .plu-btn-add:active[b-dzgcyq279s] {
        transform: scale(.95);
    }

    .plu-btn-add svg[b-dzgcyq279s] {
        width: 19px;
        height: 19px;
    }

/* ── Out of stock / low stock ───────────────────────────────────────────── */
.plu--oos[b-dzgcyq279s] {
    border-color: color-mix(in srgb, var(--error-color, #dc3545) 45%, var(--plu-border));
}

    .plu--oos .plu__name[b-dzgcyq279s],
    .plu--oos .plu__sku[b-dzgcyq279s],
    .plu--oos .plu__short[b-dzgcyq279s],
    .plu--oos .plu__ingredients[b-dzgcyq279s],
    .plu--oos[b-dzgcyq279s]  .plu-price {
        opacity: .72;
    }

    .plu--oos .plu__photo > img[b-dzgcyq279s] {
        filter: grayscale(.55);
        opacity: .7;
    }

.plu--low[b-dzgcyq279s] {
    border-color: var(--warning-color);
}

/* ── Schedule unavailable (still clickable — view only) ─────────────────── */
.plu--disabled[b-dzgcyq279s] {
    border-color: color-mix(in srgb, var(--plu-ink) 18%, var(--plu-border));
}

    .plu--disabled .plu__photo > img[b-dzgcyq279s] {
        filter: grayscale(.35);
        opacity: .78;
    }

/* The offer this article would earn first — top-left over the image. Shares the
   global --error-color with the product page badge so the two can never drift; it
   sits on a photo, so it must not follow the theme's surface colour. */
.plu__promo[b-dzgcyq279s] {
    position: absolute;
    top: .55rem;
    left: .55rem;
    z-index: 2;
    /* Leave the right edge clear so a long name wraps rather than spanning the card. */
    max-width: calc(100% - 1.6rem);
    padding: .2rem .5rem;
    border-radius: var(--plu-r-sm);
    background: var(--shop-promo, #e23434);
    color: var(--shop-promo-text, #fff);
    font-size: min(.7rem, 12px); /* capped: it sits on the photo */
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    box-shadow: var(--plu-shadow-sm);
    overflow-wrap: anywhere;
    pointer-events: none;
}

.plu__banner[b-dzgcyq279s] {
    position: absolute;
    left: .55rem;
    right: .55rem;
    bottom: .55rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .55rem .7rem;
    border-radius: var(--plu-r-sm);
    background: color-mix(in srgb, var(--plu-surface) 92%, transparent);
    border: 1px solid var(--plu-border);
    box-shadow: var(--plu-shadow-sm);
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.plu__banner-title[b-dzgcyq279s] {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--plu-sale);
}

.plu__banner-sub[b-dzgcyq279s] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--plu-ink-2);
}

.plu-stock-badge.plu-stock-badge--schedule[b-dzgcyq279s] {
    background-color: color-mix(in srgb, var(--error-color, #dc3545) 12%, transparent);
    border-color: color-mix(in srgb, var(--error-color, #dc3545) 40%, transparent);
    color: var(--error-color, #dc3545);
}

/* aria-disabled, not :disabled — the button still handles the tap (it opens the
   product page), it just doesn't add to the cart. */
.plu-btn-add[aria-disabled="true"][b-dzgcyq279s] {
    opacity: .4;
    filter: none;
}

    .plu-btn-add[aria-disabled="true"]:hover[b-dzgcyq279s],
    .plu-btn-add[aria-disabled="true"]:active[b-dzgcyq279s] {
        transform: none;
        filter: none;
    }

/* ── Dark fallbacks ───────────────────────────────────────────────────────
   Theme.cs emits a --shop-* token only for colours the tenant actually picked,
   so an un-themed shop falls back to the literals above — all light. Keeping
   var(--shop-*, …) here means a tenant palette still wins in both modes; only
   the fallback flips. Palette matches CartDrawer. Ink that sits on the brand
   colour (buttons, badges) is deliberately left alone. */
@media (prefers-color-scheme: dark) {
    .plu[b-dzgcyq279s] {
        --plu-surface: var(--shop-surface, #1e1e1e);
        --plu-muted: var(--shop-bg, #262629);
        --plu-border: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 14%, transparent);
        --plu-border-strong: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 24%, transparent);
        --plu-ink: var(--shop-font-color, #f1f1f1);
        --plu-ink-2: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 65%, transparent);
        --plu-ink-3: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 45%, transparent);
        --plu-sale: var(--shop-promo, #ff5c5c);
        --plu-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
        --plu-shadow-card: 0 12px 28px -14px rgba(0, 0, 0, .7);
    }
}

/* The card axis of a family: each swatch is one sibling, drawn with that
   article's own image at 52x38 - the same thumbnail the product page picker
   uses. A centred row under the photo, inside the frame, as Trademax: it covers
   none of the image and has no background of its own. 3 swatches then "+N", or
   2 at 768px and below where two cards share the row. */
.plu__swatches[b-dzgcyq279s] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: transparent;
    overflow: hidden;
}

.plu__swatch-more[b-dzgcyq279s] {
    padding: 0 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--plu-ink-2);
    white-space: nowrap;
}

.plu__swatch--small-only[b-dzgcyq279s],
.plu__swatch-more--small[b-dzgcyq279s] {
    display: none !important;
}

@media (max-width: 768px) {
    .plu__swatch--small-only[b-dzgcyq279s],
    .plu__swatch-more--small[b-dzgcyq279s] {
        display: inline-flex !important;
    }

    .plu__swatch--large-only[b-dzgcyq279s],
    .plu__swatch-more--large[b-dzgcyq279s] {
        display: none !important;
    }
}

.plu__swatch[b-dzgcyq279s] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 44px;
    padding: 1px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: none;
    line-height: 0;
    cursor: pointer;
}

/* 52x38, as Trademax - landscape suits product photos better than squares. */
.plu__swatch img[b-dzgcyq279s],
.plu__swatch-dot[b-dzgcyq279s] {
    display: block;
    width: 52px;
    height: 38px;
    border-radius: 4px;
    object-fit: cover;
}

.plu__swatch-dot[b-dzgcyq279s] {
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 15%, transparent);
}

/* No image and no colour: the option's name, so it is still offered. */
.plu__swatch-text[b-dzgcyq279s] {
    padding: 0 6px;
    font-size: .72rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--plu-ink-2);
}

.plu__swatch:focus-visible[b-dzgcyq279s] {
    outline: 2px solid var(--lp-primary, #222);
    outline-offset: 1px;
}

.plu__swatch--on[b-dzgcyq279s] {
    border-color: var(--lp-primary, #222);
}

/* The other axes' values the swatches keep - what + adds besides the pick. */
.plu__fixed[b-dzgcyq279s] {
    font-size: .75rem;
    color: var(--plu-ink-2);
    line-height: 1.3;
}

/* /Pages/Shop/RetailProductDetail.razor.rz.scp.css */
/* Retail product detail page — scoped styling.
   Tokens follow the shop theme vars (--lp-primary, --shop-*) like the rest of
   the retail design so it retints to the tenant brand. */

.rpd-page[b-pdz7x1pr61] {
    --rpd-primary: var(--lp-primary, #ff7a1a);
    --rpd-surface: var(--shop-surface, #ffffff);
    --rpd-muted: #f5f5f7;
    --rpd-border: color-mix(in srgb, var(--shop-font-color, #18181b) 10%, transparent);
    --rpd-text: var(--shop-font-color, #18181b);
    --rpd-text-2: #52525b;
    --rpd-text-3: #8a8a93;
    --rpd-r: var(--shop-border-radius, 12px);
    --rpd-r-sm: var(--shop-border-radius, 8px);

    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem 6rem;
    color: var(--rpd-text);
    font-family: inherit;
}

/* ── Back ──────────────────────────────────────────────────────────────── */
.rpd-back[b-pdz7x1pr61] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: none;
    padding: .9rem 0;
    cursor: pointer;
    font-size: .9rem;
    color: var(--rpd-text-2);
}

.rpd-back:hover[b-pdz7x1pr61] {
    color: var(--rpd-primary);
}

/* ── Hero layout ───────────────────────────────────────────────────────── */
/* Desktop: gallery left, buy box right. The gallery stays pinned while the buy
   box's choices scroll past - the product stays in view while it is configured -
   and the block ends with the longer column, so About the product follows both. */
.rpd-hero[b-pdz7x1pr61] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 2.5rem;
    align-items: start;
}

/* Pinned below the shop's fixed bars, which navbarScroll.js measures: navbar +
   category bar, or only the category bar while the navbar is slid away - the
   gallery follows with the same .3s as the bars. */
.rpd-gallery[b-pdz7x1pr61] {
    position: sticky;
    top: calc(var(--lp-bars-visible, 0px) + 1.5rem);
    transition: top .3s ease;
}

/* ── Gallery ───────────────────────────────────────────────────────────── */
.rpd-gallery[b-pdz7x1pr61] {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

/* The offer this article would earn first — top-left over the image. Shares the
   global --error-color with the product card badge so the two can never drift; it
   sits on a photo, so it must not follow the theme's surface colour. */
.rpd-gallery__promo[b-pdz7x1pr61] {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    /* Leave the right edge clear so a long name wraps instead of spanning the image. */
    max-width: calc(100% - 2rem);
    padding: .25rem .6rem;
    border-radius: var(--rpd-r-sm);
    background: var(--shop-promo, #e23434);
    color: var(--shop-promo-text, #fff);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.rpd-gallery__main[b-pdz7x1pr61] {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--rpd-r);
    overflow: hidden;
    background: var(--rpd-muted);
    border: 1px solid var(--rpd-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpd-gallery__main img[b-pdz7x1pr61] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rpd-gallery__fallback[b-pdz7x1pr61] {
    color: var(--rpd-text-3);
}

.rpd-gallery__thumbs[b-pdz7x1pr61] {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.rpd-gallery__thumb[b-pdz7x1pr61] {
    width: 70px;
    height: 70px;
    border-radius: var(--rpd-r-sm);
    overflow: hidden;
    border: 2px solid var(--rpd-border);
    background: var(--rpd-muted);
    cursor: pointer;
    padding: 0;
    transition: border-color .14s ease;
}

.rpd-gallery__thumb img[b-pdz7x1pr61] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rpd-gallery__thumb--active[b-pdz7x1pr61] {
    border-color: var(--rpd-primary);
}

/* ── Buy box (ProductConfigurator renders the contents) ────────────────── */
.rpd-buy[b-pdz7x1pr61] {
    min-width: 0;
}

/* ── About the product ─────────────────────────────────────────────────── */
/* A full-width band of open sections (<details>), one per thing the article
   has: Overview (long description + note), Specifications. */
.rpd-about[b-pdz7x1pr61] {
    margin-top: 3.5rem;
    padding: 2.5rem 1.5rem;
    border-radius: var(--rpd-r);
    background: color-mix(in srgb, var(--rpd-primary) 6%, var(--rpd-surface));
}

.rpd-about__title[b-pdz7x1pr61] {
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rpd-text);
}

.rpd-about__item[b-pdz7x1pr61] {
    max-width: 960px;
    margin: 0 auto;
    border-radius: var(--rpd-r-sm);
    background: var(--rpd-surface);
    border: 1px solid var(--rpd-border);
}

.rpd-about__item + .rpd-about__item[b-pdz7x1pr61] {
    margin-top: .75rem;
}

.rpd-about__head[b-pdz7x1pr61] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rpd-text);
    cursor: pointer;
    list-style: none;
}

.rpd-about__head[b-pdz7x1pr61]::-webkit-details-marker {
    display: none;
}

/* Round chevron on the right: down while open, right while closed. */
.rpd-about__head[b-pdz7x1pr61]::after {
    content: "";
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--rpd-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / 70% no-repeat;
    transform: rotate(-90deg);
    transition: transform .2s ease;
}

.rpd-about__item[open] > .rpd-about__head[b-pdz7x1pr61]::after {
    transform: none;
}

.rpd-about__head:focus-visible[b-pdz7x1pr61] {
    outline: 2px solid var(--rpd-primary);
    outline-offset: 2px;
    border-radius: var(--rpd-r-sm);
}

.rpd-about__body[b-pdz7x1pr61] {
    padding: 0 1.4rem 1.4rem;
}

.rpd-about__text[b-pdz7x1pr61] {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--rpd-text-2);
    white-space: pre-line;
}

.rpd-about__text + .rpd-about__text[b-pdz7x1pr61] {
    margin-top: 1rem;
}

/* ── Similar products ──────────────────────────────────────────────────── */
/* Full width under the hero. One strip at every width: it scrolls natively
   (swipe, trackpad) and snaps to a card; the arrows page through it and the bar
   under it shows where you are - both run in the browser (similarStrip.js), so
   nothing waits for the server. --rpd-similar-per cards in view: 4 on desktop,
   3 on tablets, 2 and a slice of the next on phones. */
.rpd-similar[b-pdz7x1pr61] {
    margin-top: 3rem;
}

.rpd-similar__head[b-pdz7x1pr61] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rpd-similar__title[b-pdz7x1pr61] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--rpd-text);
}

.rpd-similar__nav[b-pdz7x1pr61] {
    display: flex;
    gap: .5rem;
}

/* Nothing to page through: every card is in view. */
.rpd-similar__nav--off[b-pdz7x1pr61] {
    display: none;
}

.rpd-similar__arrow[b-pdz7x1pr61] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid var(--rpd-border);
    background: var(--rpd-surface);
    color: var(--rpd-text);
    cursor: pointer;
}

.rpd-similar__arrow:hover:not(:disabled)[b-pdz7x1pr61] {
    border-color: var(--rpd-primary);
    color: var(--rpd-primary);
}

.rpd-similar__arrow:disabled[b-pdz7x1pr61] {
    opacity: .35;
    cursor: default;
}

/* The padding leaves room for the cards' hover shadow, which overflow would clip. */
.rpd-similar__viewport[b-pdz7x1pr61] {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 6px;
    padding: 6px;
    margin: -6px;
    scrollbar-width: none;
}

.rpd-similar__viewport[b-pdz7x1pr61]::-webkit-scrollbar {
    display: none;
}

.rpd-similar__track[b-pdz7x1pr61] {
    --rpd-similar-per: 4;
    --rpd-similar-gap: 1rem;
    display: flex;
    gap: var(--rpd-similar-gap);
}

/* Same width for every card (a swatch strip must never widen its slot), and
   the full height of the row so all cards end level. */
.rpd-similar__item[b-pdz7x1pr61] {
    flex: 0 0 calc((100% - (var(--rpd-similar-per) - 1) * var(--rpd-similar-gap)) / var(--rpd-similar-per));
    min-width: 0;
    display: flex;
    scroll-snap-align: start;
}

.rpd-similar__item[b-pdz7x1pr61]  .plu {
    flex: 1 1 auto;
    width: 100%;
}

.rpd-similar__bar[b-pdz7x1pr61] {
    height: 3px;
    margin: .875rem auto 0;
    max-width: 8rem;
    border-radius: 999px;
    /* --rpd-border is too faint to read as a track on a white page. */
    background: color-mix(in srgb, var(--rpd-text) 15%, transparent);
    overflow: hidden;
}

.rpd-similar__bar--off[b-pdz7x1pr61] {
    display: none;
}

.rpd-similar__thumb[b-pdz7x1pr61] {
    display: block;
    height: 100%;
    width: 50%;
    border-radius: inherit;
    background: var(--rpd-primary);
}

@media (max-width: 1100px) {
    .rpd-similar__track[b-pdz7x1pr61] {
        --rpd-similar-per: 3;
    }
}

@media (max-width: 768px) {
    .rpd-similar[b-pdz7x1pr61] {
        margin-top: 2rem;
    }

    .rpd-similar__track[b-pdz7x1pr61] {
        --rpd-similar-per: 2.2;
        --rpd-similar-gap: .75rem;
    }

    /* Two cards: show both whole rather than leave room to peek at nothing. */
    .rpd-similar__track:not(:has(> :nth-child(3)))[b-pdz7x1pr61] {
        --rpd-similar-per: 2;
    }

    /* Half-width cards: an amount never breaks inside ("161,60 / kr"); the struck
       list price drops under the sale price instead. */
    .rpd-similar__item[b-pdz7x1pr61]  .plu__foot {
        --plu-price-size: 1rem;
    }

    .rpd-similar__item[b-pdz7x1pr61]  .plu-price {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .rpd-similar__item[b-pdz7x1pr61]  .plu-price > span {
        white-space: nowrap;
    }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
/* Single column: gallery, then buy box; nothing pinned. */
@media (max-width: 860px) {
    .rpd-hero[b-pdz7x1pr61] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .rpd-gallery[b-pdz7x1pr61] {
        position: static;
    }

    .rpd-about[b-pdz7x1pr61] {
        margin-top: 2.5rem;
        padding: 1.75rem .75rem;
    }

    .rpd-about__title[b-pdz7x1pr61] {
        font-size: 1.3rem;
    }

    .rpd-about__head[b-pdz7x1pr61] {
        padding: 1rem 1.1rem;
        font-size: 1rem;
    }

    .rpd-about__body[b-pdz7x1pr61] {
        padding: 0 1.1rem 1.1rem;
    }
}

/* ── Dark fallbacks ───────────────────────────────────────────────────────
   Theme.cs emits a --shop-* token only for colours the tenant actually picked,
   so an un-themed shop falls back to the literals above — all light. Keeping
   var(--shop-*, …) here means a tenant palette still wins in both modes; only
   the fallback flips. Palette matches CartDrawer. Ink that sits on the brand
   colour (buttons, badges) is deliberately left alone. */
@media (prefers-color-scheme: dark) {
    .rpd-page[b-pdz7x1pr61] {
        --rpd-surface: var(--shop-surface, #1e1e1e);
        --rpd-muted: #262629;
        --rpd-border: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 12%, transparent);
        --rpd-text: var(--shop-font-color, #f1f1f1);
        --rpd-text-2: #b4b4bd;
        --rpd-text-3: #9c9ca6;
    }
}

/* ── Preview banner ───────────────────────────────────────────────────────
   Shown only on a family preview link: the articles below may not exist yet
   and nothing can be bought. Deliberately loud - it must not be mistaken for
   the live shop. */
.rpd-preview-banner[b-pdz7x1pr61] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .625rem .875rem;
    border-radius: .5rem;
    border: 1px solid var(--lp-primary, #6b4eff);
    background: color-mix(in srgb, var(--lp-primary, #6b4eff) 12%, transparent);
    color: var(--rpd-text, inherit);
    font-weight: 600;
}
/* /Pages/Shop/ShopLayout.razor.rz.scp.css */
/* Shop shell — wraps every page rendered through ShopLayout.
   Background and text colours come from the per-branchoffice theme stylesheet
   loaded by ShopLayout (light or dark variant per the user's OS preference). */
.lp-shop[b-ej0ycwu15o] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--shop-webshop-body-bg, var(--shop-body-bg, var(--shop-bg, #fff)));
    color: var(--shop-font-color, #1f2328);
}

.lp-shop-frame[b-ej0ycwu15o] {
    max-width: var(--shop-max-width, 100%);
    margin: auto;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--shop-bg, #fff);
}

.lp-shop-frame--boxed[b-ej0ycwu15o] {
    max-width: var(--shop-webshop-max-width, 1280px);
}

.lp-shop-body[b-ej0ycwu15o] {
    flex: 1 0 auto;
}

/* ── Dark fallbacks ───────────────────────────────────────────────────────
   Theme.cs emits a --shop-* token only for colours the tenant actually picked,
   so an un-themed shop falls back to the literals above — all light. Keeping
   var(--shop-*, …) here means a tenant palette still wins in both modes; only
   the fallback flips. Palette matches CartDrawer. Ink that sits on the brand
   colour (buttons, badges) is deliberately left alone. */
@media (prefers-color-scheme: dark) {
    .lp-shop[b-ej0ycwu15o] {
        background: var(--shop-webshop-body-bg, var(--shop-body-bg, var(--shop-bg, #161618)));
        color: var(--shop-font-color, #f1f1f1);
    }

    .lp-shop-frame[b-ej0ycwu15o] {
        background: var(--shop-bg, #161618);
    }
}
/* /Pages/Shop/ShopLoader.razor.rz.scp.css */
/* Full-screen loader for retail shop entry.

   This renders before ShopLayout injects the tenant theme CSS, so the --shop-*
   tokens are normally absent while the loader is on screen. In that case it
   falls back to neutral colors that follow the user's OS light/dark preference
   (see the prefers-color-scheme block below) instead of a fixed light palette.
   If the --shop-* tokens ever are present, they still win over the fallbacks. */

.shop-loader[b-yoc8d71nx7] {
    /* Neutral fallbacks (light) — matched to main.css. Overridden for a dark OS
       preference below (matched to main-dark.css). Used ONLY when the tenant
       theme tokens (--shop-*) aren't loaded yet, e.g. the first shop open before
       ShopLayout injects the theme; once --shop-* exist they win over these. */
    --loader-bg: #ffffff;
    --loader-fg: #292b2c;
    --loader-fg-muted: #52525b;
    --loader-accent: #ff7200;

    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    background: var(--shop-webshop-body-bg, var(--shop-body-bg, var(--shop-bg, var(--loader-bg))));
    color: var(--shop-font-color, var(--loader-fg));
    animation: shop-loader-fade-b-yoc8d71nx7 .2s ease both;
}

@media (prefers-color-scheme: dark) {
    .shop-loader[b-yoc8d71nx7] {
        --loader-bg: #1e1e1e;
        --loader-fg: #ffffff;
        --loader-fg-muted: #a1a1aa;
    }
}

.shop-loader__spinner[b-yoc8d71nx7] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    /* fallback tint, then themed tint via color-mix where supported */
    border: 4px solid rgba(255, 114, 0, .22);
    border: 4px solid color-mix(in srgb, var(--shop-primary, var(--loader-accent)) 22%, transparent);
    border-top-color: var(--shop-primary, var(--loader-accent));
    animation: shop-loader-spin-b-yoc8d71nx7 .8s linear infinite;
}

.shop-loader__text[b-yoc8d71nx7] {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--shop-font-color, var(--loader-fg-muted));
    opacity: .8;
}

@keyframes shop-loader-spin-b-yoc8d71nx7 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes shop-loader-fade-b-yoc8d71nx7 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-loader__spinner[b-yoc8d71nx7] {
        animation-duration: 1.8s;
    }

    .shop-loader[b-yoc8d71nx7] {
        animation: none;
    }
}
/* /Pages/Shop/ShopNavbar.razor.rz.scp.css */
/* Shop navbar — mobile-first, single bar.
   Layout: [Brand] [Nav links — scrollable] [Actions: search + order + cart]
   Padding/sizing scales up at tablet/desktop breakpoints. */

.lp-shop-navbar[b-9nke172zl9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--shop-surface, #fff);
    color: var(--shop-font-color, #1f2328);
    border-bottom: 1px solid rgba(127, 127, 127, .15);
    transition: transform .3s ease;
}

.lp-shop-navbar-inner[b-9nke172zl9] {
    max-width: 1200px;
    margin: 0 auto;
    padding: .55rem .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: space-between;
    min-width: 0;
}

/* ── Brand ────────────────────────────────────────────────────────────── */

.lp-shop-brand[b-9nke172zl9] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

.lp-shop-logo[b-9nke172zl9] {
    height: 28px;
    width: auto;
    max-width: min(140px, 30vw);
    object-fit: contain;
    display: block;
    flex-shrink: 1;
}

.lp-shop-name[b-9nke172zl9] {
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Order-type pill (OrderTypeIndicator) — joins the right-hand group at every
   width: it takes the auto margin that normally pushes the actions right, and
   the actions follow straight after it. Never gives way: the brand shrinks
   instead. ::deep because the pill's markup belongs to the child component's
   scope. */
.lp-shop-navbar-inner[b-9nke172zl9]  .otp {
    flex-shrink: 0;
    margin-left: auto;
}

    .lp-shop-navbar-inner[b-9nke172zl9]  .otp ~ .lp-shop-actions {
        margin-left: 0;
    }

/* ── Section nav (center, horizontally scrollable) — desktop only ─────── */

.lp-shop-nav[b-9nke172zl9] {
    display: none; /* hidden on mobile; shown at ≥768px below */
}

.lp-shop-nav-link[b-9nke172zl9] {
    display: inline-block;
    padding: .4rem .65rem;
    font-size: .85rem;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    opacity: .65;
    border-bottom: 2px solid transparent;
    transition: opacity .15s ease, border-color .15s ease;
}

    .lp-shop-nav-link:hover[b-9nke172zl9] {
        opacity: 1;
        border-bottom-color: var(--lp-primary, #ff7200);
    }

/* Bootstrap Icons render as inline pseudo-elements; line-height: 1 keeps them
   pixel-perfect inside flex-centered circular buttons. */
.lp-shop-hamburger .bi[b-9nke172zl9],
.lp-shop-cart .bi[b-9nke172zl9],
.lp-side-menu-close .bi[b-9nke172zl9],
.lp-side-menu-account-icon[b-9nke172zl9] {
    line-height: 1;
}

/* ── Hamburger (mobile only) ──────────────────────────────────────────── */

.lp-shop-hamburger[b-9nke172zl9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 12%, transparent);
    background: transparent;
    color: inherit;
    font-size: 1.3rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease;
}

    .lp-shop-hamburger:hover[b-9nke172zl9] {
        background: color-mix(in srgb, var(--lp-primary, #ff7200) 12%, transparent);
    }

/* ── Side drawer (push-navigation style) ─────────────────────────────────── */

.lp-side-menu[b-9nke172zl9] {
    position: fixed;
    top: 0;
    left: 0;
    width: min(360px, 92vw);
    height: 100%;
    background: var(--shop-surface, #fff);
    color: var(--shop-font-color, #1f2328);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow: hidden;
}

.lp-side-menu--open[b-9nke172zl9] {
    transform: translateX(0);
}

/* Header — shrinks to back button when drilled into a subcategory */
.lp-side-menu-header[b-9nke172zl9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 1rem 1.25rem;
    border-bottom: 1px solid rgba(127, 127, 127, .12);
    flex-shrink: 0;
}

.lp-side-menu-title[b-9nke172zl9] {
    font-weight: 700;
    font-size: 1.05rem;
}

.lp-side-menu-back[b-9nke172zl9] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: none;
    padding: .3rem .15rem;
    margin-left: -.15rem;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: var(--lp-primary, #ff7200);
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s ease;
}

    .lp-side-menu-back .bi[b-9nke172zl9] {
        font-size: 1rem;
        line-height: 1;
    }

    .lp-side-menu-back:hover[b-9nke172zl9] {
        background: color-mix(in srgb, var(--lp-primary, #ff7200) 10%, transparent);
    }

.lp-side-menu-close[b-9nke172zl9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .15s ease;
    flex-shrink: 0;
}

    .lp-side-menu-close:hover[b-9nke172zl9] {
        background: color-mix(in srgb, var(--lp-primary, #ff7200) 12%, transparent);
    }

/* ── Stage: holds the sliding pane layers ───────────────────────────────── */

.lp-side-menu-stage[b-9nke172zl9] {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.lp-side-menu-layer[b-9nke172zl9] {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    background: var(--shop-surface, #fff);
    -webkit-overflow-scrolling: touch;
}

/* Animations — slide horizontally between drill levels */
.lp-side-menu-layer--out-left[b-9nke172zl9] {
    animation: lpSideOutLeft-b-9nke172zl9 .26s ease forwards;
}

.lp-side-menu-layer--out-right[b-9nke172zl9] {
    animation: lpSideOutRight-b-9nke172zl9 .26s ease forwards;
}

.lp-side-menu-layer--in-right[b-9nke172zl9] {
    animation: lpSideInRight-b-9nke172zl9 .28s cubic-bezier(.2,.7,.2,1);
}

.lp-side-menu-layer--in-left[b-9nke172zl9] {
    animation: lpSideInLeft-b-9nke172zl9 .28s cubic-bezier(.2,.7,.2,1);
}

@keyframes lpSideOutLeft-b-9nke172zl9 {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-30%);
        opacity: 0;
    }
}

@keyframes lpSideOutRight-b-9nke172zl9 {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(30%);
        opacity: 0;
    }
}

@keyframes lpSideInRight-b-9nke172zl9 {
    from {
        transform: translateX(30%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes lpSideInLeft-b-9nke172zl9 {
    from {
        transform: translateX(-30%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ── Pane content ───────────────────────────────────────────────────────── */

.lp-side-menu-nav[b-9nke172zl9] {
    display: flex;
    flex-direction: column;
    padding: .35rem 0 1rem;
}

/* Page section quick-links (root only) */
.lp-side-menu-sections[b-9nke172zl9] {
    display: flex;
    flex-direction: column;
    padding: .35rem 0;
}

.lp-side-menu-sect[b-9nke172zl9] {
    display: block;
    padding: .8rem 1.25rem;
    font-size: .92rem;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    opacity: .8;
    transition: color .12s ease, background .12s ease, opacity .12s ease;
}

    .lp-side-menu-sect:hover[b-9nke172zl9] {
        opacity: 1;
        color: var(--lp-primary, #ff7200);
        background: color-mix(in srgb, var(--lp-primary, #ff7200) 8%, transparent);
    }

.lp-side-menu-divider[b-9nke172zl9] {
    height: 1px;
    background: rgba(127, 127, 127, .12);
    margin: .35rem 1.25rem;
}

/* "Categories" label — sits between the section links and category rows */
.lp-side-menu-cat-label[b-9nke172zl9] {
    display: block;
    padding: .55rem 1.25rem .2rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .45;
}

/* "Visa allt inom X" — shown at top of every drilled-in pane */
.lp-side-cat-all[b-9nke172zl9] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .85rem 1.25rem;
    background: color-mix(in srgb, var(--lp-primary, #ff7200) 6%, transparent);
    border: none;
    border-left: 3px solid var(--lp-primary, #ff7200);
    color: var(--lp-primary, #ff7200);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .12s ease;
}

    .lp-side-cat-all:hover[b-9nke172zl9] {
        background: color-mix(in srgb, var(--lp-primary, #ff7200) 14%, transparent);
    }

/* Category row — thumbnail + name + chevron */
.lp-side-cat-row[b-9nke172zl9] {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .7rem 1.25rem;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid rgba(127, 127, 127, .08);
    transition: background .12s ease, color .12s ease;
}

    .lp-side-cat-row:hover[b-9nke172zl9] {
        background: color-mix(in srgb, var(--lp-primary, #ff7200) 6%, transparent);
    }

.lp-side-cat-row--active[b-9nke172zl9] {
    color: var(--lp-primary, #ff7200);
}

.lp-side-cat-row:last-child[b-9nke172zl9] {
    border-bottom: none;
}

.lp-side-cat-row__img[b-9nke172zl9] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: color-mix(in srgb, var(--lp-primary, #ff7200) 6%, var(--shop-bg, #f5f5f5));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .lp-side-cat-row__img img[b-9nke172zl9] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.lp-side-cat-row__img-fallback[b-9nke172zl9] {
    font-size: 1.1rem;
    opacity: .55;
}

.lp-side-cat-row__name[b-9nke172zl9] {
    flex: 1;
    min-width: 0;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.3;
}

.lp-side-cat-row__chev[b-9nke172zl9] {
    font-size: .85rem;
    opacity: .45;
    line-height: 1;
    flex-shrink: 0;
}

/* Backdrop */
.lp-side-menu-backdrop[b-9nke172zl9] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 199;
}

.lp-side-menu-backdrop--open[b-9nke172zl9] {
    display: block;
}

/* ── Drawer footer (login + language) ───────────────────────────────────
   Sits outside the sliding category layers so it stays on screen while
   drilling. Large tap target for zoomed / accessibility text. */

.lp-side-menu-footer[b-9nke172zl9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(127, 127, 127, .12);
    flex-shrink: 0;
}

.lp-side-menu-account[b-9nke172zl9] {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    padding: .55rem .9rem;
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 12%, transparent);
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, border-color .15s ease;
}

    .lp-side-menu-account:hover[b-9nke172zl9] {
        border-color: var(--lp-primary, #ff7200);
        background: color-mix(in srgb, var(--lp-primary, #ff7200) 10%, transparent);
    }

.lp-side-menu-account-icon[b-9nke172zl9] {
    font-size: 1.35rem;
    flex-shrink: 0;
    opacity: .8;
}

.lp-side-menu-account-avatar[b-9nke172zl9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--lp-primary, #ff7200);
    color: var(--shop-primary-text, #fff);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
    flex-shrink: 0;
}

/* Language menu would otherwise open downward off the bottom of the drawer. */
.lp-side-menu-footer[b-9nke172zl9]  .lang-picker__menu {
    top: auto;
    bottom: calc(100% + 6px);
}

/* ── Right-side actions (search + order btn + cart) ───────────────────── */

.lp-shop-actions[b-9nke172zl9] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    /* Never give way: the brand shrinks instead, so cart/search stay on-screen
       when the page is zoomed or the viewport is narrow. */
    flex-shrink: 0;
    margin-left: auto;
}

    /* Every action keeps its size; the search overrides this when expanded.
       ::deep so it reaches the child-component roots (account, language picker)
       too — a plain child selector only matches this component's own markup. */
    .lp-shop-actions[b-9nke172zl9]  > * {
        flex-shrink: 0;
    }

/* ── Mobile search ─────────────────────────────────────────────────────────
   Under 600px the navbar has no room for a usable field, so the icon is a
   trigger that swaps the whole bar for .lp-shop-searchrow. The pill below is
   desktop-only. */

.lp-shop-search-trigger[b-9nke172zl9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(127, 127, 127, .25);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 1.05rem;
    cursor: pointer;
}

    /* A query is active but the field is closed — show the bar is filtered. */
    .lp-shop-search-trigger.is-active[b-9nke172zl9] {
        border-color: var(--lp-primary, #ff7200);
        color: var(--lp-primary, #ff7200);
    }

/* Full-width row replacing the navbar contents while searching. */
.lp-shop-searchrow[b-9nke172zl9] {
    gap: .5rem;
}

.lp-shop-searchrow-field[b-9nke172zl9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 .75rem;
    border: 1px solid var(--lp-primary, #ff7200);
    border-radius: 999px;
}

.lp-shop-searchrow-icon[b-9nke172zl9] {
    font-size: 1rem;
    opacity: .6;
    flex-shrink: 0;
}

.lp-shop-searchrow-input[b-9nke172zl9] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    /* 16px keeps iOS Safari from zooming the page when the field takes focus. */
    font-size: max(16px, 1rem); /* never below 16px: iOS Safari zooms smaller inputs */
}

    .lp-shop-searchrow-input[b-9nke172zl9]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

.lp-shop-searchrow-cancel[b-9nke172zl9] {
    flex-shrink: 0;
    padding: 0 .25rem;
    border: none;
    background: transparent;
    color: inherit;
    font-size: .9rem;
    cursor: pointer;
}

/* Search pill — desktop only (≥600px); mobile uses the trigger + row above. */
.lp-shop-search[b-9nke172zl9] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 12%, transparent);
    border-radius: 999px;
    background: transparent;
    flex-shrink: 0;
    transition: width .2s ease, border-color .15s ease, padding .2s ease;
    overflow: hidden;
}

    /* Expanded: allowed to shrink down to the icon if the bar runs out of room,
       so the pill absorbs the pressure instead of overflowing the navbar.
       Widths live in the ≥600px block — this pill never renders below that. */
    .lp-shop-search:focus-within[b-9nke172zl9],
    .lp-shop-search.is-filled[b-9nke172zl9] {
        padding: 0 .65rem;
        justify-content: flex-start;
        border-color: var(--lp-primary, #ff7200);
        flex-shrink: 1;
        min-width: 38px;
    }

.lp-shop-search-icon[b-9nke172zl9] {
    font-size: 1.05rem;
    opacity: .6;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}

.lp-shop-search-input[b-9nke172zl9] {
    display: block;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font-size: .85rem;
    width: 0;
    min-width: 0;
    padding: 0;
    opacity: 0;
    transition: width .2s ease, opacity .15s ease;
}

    .lp-shop-search:focus-within .lp-shop-search-input[b-9nke172zl9],
    .lp-shop-search.is-filled .lp-shop-search-input[b-9nke172zl9] {
        width: 100%;
        opacity: 1;
    }

    /* Chromium draws its own × on type=search — ours is themed and works in
       every browser, so hide the native one to avoid a double clear button. */
    .lp-shop-search-input[b-9nke172zl9]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

/* Clear (×) — only rendered while the field holds a query. */
.lp-shop-search-clear[b-9nke172zl9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: .55;
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

    .lp-shop-search-clear:hover[b-9nke172zl9],
    .lp-shop-search-clear:focus-visible[b-9nke172zl9] {
        opacity: 1;
        background: color-mix(in srgb, currentColor 12%, transparent);
    }

    .lp-shop-search-input[b-9nke172zl9]::placeholder {
        opacity: .5;
    }

    .lp-shop-search-input[b-9nke172zl9]::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

/* Order Now */
.lp-shop-order-btn[b-9nke172zl9] {
    display: inline-flex;
    align-items: center;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--lp-primary, #ff7200);
    color: var(--shop-primary-text, #fff);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity .15s ease;
    flex-shrink: 0;
}

    .lp-shop-order-btn:hover[b-9nke172zl9] {
        opacity: .88;
    }

/* Cart */
.lp-shop-cart[b-9nke172zl9] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 12%, transparent);
    background: transparent;
    color: inherit;
    font-size: 1.15rem;
    cursor: pointer;
    transition: background .15s ease;
    flex-shrink: 0;
}

    .lp-shop-cart:hover[b-9nke172zl9] {
        background: rgba(0, 0, 0, .04);
    }

/* Soft double-beat while the cart has items — stops when emptied. */
.lp-shop-cart--heartbeat[b-9nke172zl9] {
    animation: lpShopCartHeartbeat-b-9nke172zl9 1.4s ease-in-out infinite;
}

@keyframes lpShopCartHeartbeat-b-9nke172zl9 {
    0% { transform: scale(1); }
    12% { transform: scale(1.14); }
    24% { transform: scale(1); }
    36% { transform: scale(1.22); }
    54% { transform: scale(1); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-shop-cart--heartbeat[b-9nke172zl9] {
        animation: none;
    }
}

.lp-shop-cart-badge[b-9nke172zl9] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--lp-primary, #ff7200);
    color: var(--shop-primary-text, #fff);
    font-size: .65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Account — same circular treatment as the cart / language buttons.
   Rendered inside the reusable <AccountButton>, so ::deep is required to
   pierce component-scoped CSS and reach the child button.
   Hidden on mobile: login lives in the hamburger drawer so zoomed phones
   can still reach it. Shown again at the 768px tablet breakpoint. */
.lp-shop-actions[b-9nke172zl9]  .lp-shop-account {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 12%, transparent);
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: border-color .15s ease, background .15s ease;
}

.lp-shop-actions[b-9nke172zl9]  .lang-picker {
    display: none;
}

.lp-shop-actions[b-9nke172zl9]  .lp-shop-account:hover {
    border-color: var(--lp-primary, #ff7200);
    background: rgba(0, 0, 0, .04);
}

.lp-shop-actions[b-9nke172zl9]  .lp-shop-account svg {
    display: block;
}

/* Language picker markup + styling now live in the reusable <LanguagePicker>
   component (LanguagePicker.razor). It follows the webshop tokens by default. */


/* ── Responsive ───────────────────────────────────────────────────────── */
/* All breakpoints use @container so they respond to the page/iframe width,
   not the browser viewport — works for both direct URL and iframe embed.   */

/* On very small phones hide the shop name text to save space */
@container lp-page (max-width: 400px) {
    .lp-shop-name[b-9nke172zl9] {
        display: none;
    }

    .lp-shop-order-btn[b-9nke172zl9] {
        padding: .3rem .55rem;
        font-size: .78rem;
    }
}

@container lp-page (min-width: 600px) {
    .lp-shop-navbar-inner[b-9nke172zl9] {
        padding: .65rem 1rem;
        gap: .75rem;
    }

    .lp-shop-logo[b-9nke172zl9] {
        height: 32px;
    }

    .lp-shop-name[b-9nke172zl9] {
        font-size: 1.05rem;
    }

    /* Room for a real field again: the pill replaces the mobile trigger + row. */
    .lp-shop-search-trigger[b-9nke172zl9] {
        display: none;
    }

    .lp-shop-search[b-9nke172zl9] {
        display: inline-flex;
        justify-content: flex-start;
        width: 160px;
        height: auto;
        padding: .28rem .6rem;
    }

        /* Re-state padding for every expanded combination: the mobile rules above
           are more specific than the desktop base, so without this the pill loses
           its height. */
        .lp-shop-search:focus-within[b-9nke172zl9],
        .lp-shop-search.is-filled[b-9nke172zl9],
        .lp-shop-search.is-filled:focus-within[b-9nke172zl9] {
            border-color: var(--lp-primary, #ff7200);
            padding: .28rem .6rem;
        }

        /* Holding text is not a reason to be wider here — the field is already
           permanently open, so it keeps the resting width until focused. Needed
           explicitly: the mobile .is-filled vw width outranks the base rule. */
        .lp-shop-search.is-filled[b-9nke172zl9] {
            width: 160px;
        }

        .lp-shop-search:focus-within[b-9nke172zl9],
        .lp-shop-search.is-filled:focus-within[b-9nke172zl9] {
            width: 220px;
        }

    .lp-shop-search-input[b-9nke172zl9] {
        width: 100%;
        opacity: 1;
    }

    .lp-shop-search-icon[b-9nke172zl9] {
        font-size: .9rem;
        opacity: .45;
    }
}

/* Switch to inline nav at tablet+ — hide hamburger and side drawer */
@container lp-page (min-width: 768px) {
    .lp-shop-hamburger[b-9nke172zl9] {
        display: none;
    }

    .lp-side-menu[b-9nke172zl9] {
        display: none;
    }

    .lp-side-menu-backdrop[b-9nke172zl9] {
        display: none !important;
    }

    .lp-shop-nav[b-9nke172zl9] {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
        margin-left: 0;
    }

        .lp-shop-nav[b-9nke172zl9]::-webkit-scrollbar {
            display: none;
        }

    .lp-shop-actions[b-9nke172zl9] {
        margin-left: 0;
        gap: .5rem;
    }

    .lp-shop-actions[b-9nke172zl9]  .lang-picker {
        display: block;
    }

    .lp-shop-actions[b-9nke172zl9]  .lp-shop-account {
        display: inline-flex;
    }
}

@container lp-page (min-width: 960px) {
    .lp-shop-navbar-inner[b-9nke172zl9] {
        padding: .75rem 1.25rem;
        gap: 1rem;
    }

    .lp-shop-logo[b-9nke172zl9] {
        height: 36px;
    }

    .lp-shop-name[b-9nke172zl9] {
        font-size: 1.1rem;
    }

    .lp-shop-actions[b-9nke172zl9] {
        gap: 1rem;
    }

    .lp-shop-search[b-9nke172zl9] {
        width: 190px;
    }

        .lp-shop-search.is-filled[b-9nke172zl9] {
            width: 190px;
        }

        .lp-shop-search:focus-within[b-9nke172zl9],
        .lp-shop-search.is-filled:focus-within[b-9nke172zl9] {
            width: 270px;
        }
}

/* ── Dark fallbacks ───────────────────────────────────────────────────────
   Theme.cs emits a --shop-* token only for colours the tenant actually picked,
   so an un-themed shop renders the literal fallbacks below — which were all
   light. Keeping var(--shop-*, …) here means a tenant palette still wins in
   both modes; only the fallback flips. Same approach as CartDrawer.
   Colours are white/brand text, so they stay put in dark mode. */
@media (prefers-color-scheme: dark) {
    .lp-shop-navbar[b-9nke172zl9] {
        background: var(--shop-surface, #1e1e1e);
        color: var(--shop-font-color, #f1f1f1);
        border-bottom-color: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 12%, transparent);
    }

    .lp-shop-hamburger[b-9nke172zl9],
    .lp-shop-search[b-9nke172zl9],
    .lp-shop-cart[b-9nke172zl9],
    .lp-shop-actions[b-9nke172zl9]  .lp-shop-account {
        /*border-color: rgba(255, 255, 255, .16);*/
    }

        .lp-shop-cart:hover[b-9nke172zl9],
        .lp-shop-actions[b-9nke172zl9]  .lp-shop-account:hover {
/*            background: rgba(255, 255, 255, .07);*/
        }

    .lp-side-menu[b-9nke172zl9] {
        background: var(--shop-surface, #1e1e1e);
        color: var(--shop-font-color, #f1f1f1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, .55);
    }

    .lp-side-menu-footer[b-9nke172zl9] {
        border-top-color: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 12%, transparent);
    }

    .lp-side-menu-account[b-9nke172zl9] {
        border-color: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 16%, transparent);
    }

    .lp-side-menu-layer[b-9nke172zl9] {
        background: var(--shop-surface, #1e1e1e);
    }

    .lp-side-menu-backdrop[b-9nke172zl9] {
        background: rgba(0, 0, 0, .55);
    }

    .lp-side-cat-row__img[b-9nke172zl9] {
        background: color-mix(in srgb, var(--lp-primary, #ff7200) 10%, var(--shop-bg, #262629));
    }
}
/* /Pages/Shop/ShopNotFound.razor.rz.scp.css */
.snf[b-yu90wq2kgn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 440px;
    margin: 0 auto;
    padding: 72px 16px 48px;
    color: var(--shop-font-color, inherit);
}

.snf__icon[b-yu90wq2kgn] {
    font-size: 56px;
    line-height: 1;
    color: var(--lp-primary, #6c757d);
    opacity: .85;
}

.snf__title[b-yu90wq2kgn] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.snf__text[b-yu90wq2kgn] {
    margin: 0;
    opacity: .75;
}

.snf__btn[b-yu90wq2kgn] {
    margin-top: 12px;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--lp-primary, #0d6efd);
    color: var(--shop-primary-text, #fff);
    font-weight: 600;
    text-decoration: none;
}

.snf__btn:hover[b-yu90wq2kgn] {
    filter: brightness(.92);
    color: #fff;
}
/* /Pages/Shop/TableIndicator.razor.rz.scp.css */
/* Inline table label, sat beside the shop brand in both navbars and inside the
   cart drawer's order-type block. Takes its colour from whatever hosts it
   (color: inherit) rather than the brand accent — a tenant primary is an
   arbitrary colour and can land unreadable against its own surface. The number
   carries the emphasis, since that's the part the guest is actually checking. */

.tbl-label[b-ofuh05zam2] {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: .9rem;
    font-weight: 600;
    color: inherit;
    opacity: .75;
}

.tbl-label strong[b-ofuh05zam2] {
    font-weight: 800;
    opacity: 1;
}
/* /Pages/Shop/VariantPicker.razor.rz.scp.css */
/* Structure only - every colour comes from the shop theme tokens, so a
   tenant's palette drives this the same as the rest of the shop. */

.vp[b-hrtehgsil0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.vp-axis__head[b-hrtehgsil0] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.vp-axis__name[b-hrtehgsil0] {
    font-weight: 600;
}

.vp-axis__value[b-hrtehgsil0] {
    color: var(--shop-font-color, #555);
    opacity: .75;
}

/* --- swatches --------------------------------------------------------- */

/* Every option is listed. Past two rows (2 x 44px swatch + one 8px gap, plus
   room for the selected ring) the list scrolls instead of pushing price and
   Add below the fold. */
.vp-swatches[b-hrtehgsil0] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    max-height: calc(2 * 44px + 8px + 4px);
    overflow-y: auto;
    padding: 2px;
    scrollbar-width: thin;
}

/* 52x38 thumbnails of the variant itself - the size Trademax uses. Landscape
   rectangles suit furniture photos far better than circles. */
.vp-swatch[b-hrtehgsil0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 44px;
    padding: 1px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: var(--shop-surface, #fff);
    cursor: pointer;
    line-height: 0;
}

.vp-swatch--on[b-hrtehgsil0] {
    border-color: var(--lp-primary, #222);
}

.vp-swatch__dot[b-hrtehgsil0],
.vp-swatch img[b-hrtehgsil0] {
    display: block;
    width: 52px;
    height: 38px;
    border-radius: 4px;
    object-fit: cover;
}

.vp-swatch__dot[b-hrtehgsil0] {
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 15%, transparent);
}

/* No image and no colour: the option's name. */
.vp-swatch__text[b-hrtehgsil0] {
    padding: 0 8px;
    font-size: .8rem;
    line-height: 1;
    white-space: nowrap;
}

/* --- buttons ---------------------------------------------------------- */

/* Same two-row limit as the swatches: past two rows (2 x 40px button + one 8px
   gap, plus room for the selected border) the list scrolls. */
.vp-buttons[b-hrtehgsil0] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    max-height: calc(2 * 40px + 8px + 4px);
    overflow-y: auto;
    padding: 2px;
    scrollbar-width: thin;
}

/* Fixed height, so the two-row limit is exact and the thicker selected border
   does not make the row jump. */
.vp-button[b-hrtehgsil0] {
    box-sizing: border-box;
    height: 40px;
    min-width: 56px;
    padding: 0 14px;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 20%, transparent);
    border-radius: 6px;
    background: var(--shop-surface, #fff);
    color: var(--shop-font-color, #222);
    cursor: pointer;
}

.vp-button--on[b-hrtehgsil0] {
    border-color: var(--lp-primary, #222);
    border-width: 2px;
    font-weight: 600;
}

/* --- dropdown --------------------------------------------------------- */

.vp-select[b-hrtehgsil0] {
    width: 100%;
    max-width: 320px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--shop-font-color, #18181b) 20%, transparent);
    border-radius: 6px;
    background: var(--shop-surface, #fff);
    color: var(--shop-font-color, #222);
}
/* /Pages/TableBooking.razor.rz.scp.css */
/* TableBooking — follows --shop-* tokens via ShopThemeProvider. */

.tb[b-i7d5ersxj0] {
    color: var(--shop-font-color, #1f2328);
    font-family: var(--shop-font-family, inherit);
    font-size: var(--shop-font-size, 16px);
    min-height: 100%;
}

/* --shop-font-color is only emitted when the tenant sets a text colour, so the
   fallback has to follow the OS the same way main-dark.css does — otherwise
   dark-mode visitors of a tenant without a custom theme get near-black text
   on a dark background. */
@media (prefers-color-scheme: dark) {
    .tb[b-i7d5ersxj0] {
        color: var(--shop-font-color, #e6e8eb);
    }
}

.content-container[b-i7d5ersxj0] {
    width: 100%;
    max-width: 500px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.content-container[b-i7d5ersxj0]  > div {
    border: none;
    background-color: inherit;
    margin: auto;
}

.content-container[b-i7d5ersxj0]  > button {
    margin: 10px;
    border-radius: var(--shop-border-radius, 8px);
}

.tb[b-i7d5ersxj0]  .k-wizard-step {
    border-radius: var(--shop-border-radius, 8px);
}

.tb[b-i7d5ersxj0]  .k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.tb[b-i7d5ersxj0]  .k-calendar .k-calendar-td.k-selected:hover .k-calendar-cell-inner {
    background-color: var(--shop-primary, #ff7200);
    border-color: var(--shop-primary, #ff7200);
    color: var(--shop-primary-text, #fff);
}

.tb[b-i7d5ersxj0]  .k-wizard .k-step-current .k-step-indicator,
.tb[b-i7d5ersxj0]  .k-wizard .k-step-done .k-step-indicator {
    border-color: var(--shop-primary, #ff7200);
    background-color: var(--shop-primary, #ff7200);
    color: var(--shop-primary-text, #fff);
}

.tb[b-i7d5ersxj0]  .k-wizard .k-step-current .k-step-label .k-step-text,
.tb[b-i7d5ersxj0]  .k-wizard .k-step-done .k-step-label .k-step-text {
    color: var(--shop-primary, #ff7200);
}
/* /Pages/ViewOrder.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ViewOrder — follows the checkout theme tokens (--shop-* via ShopThemeProvider).
   Layout: status hero + delivery/items summary (mobile stack / desktop 2-col).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tokens (--c-* / --co-*) and their dark variants come from .shop-chrome
   (wwwroot/css/shop-chrome.css), which the .vo element also carries. */
.vo[b-3k85szmsdj] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--c-muted);
    color: var(--c-ink);
    font-family: var(--shop-font-family, inherit);
    font-size: var(--shop-font-size, 16px);
    overflow-x: clip;
}

.vo-main[b-3k85szmsdj] {
    flex: 1;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(1.25rem, 3.5vw, 2.5rem) var(--gut) 3rem;
}

.vo-grid[b-3k85szmsdj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    gap: clamp(1rem, 2.4vw, 1.75rem);
    align-items: start;
}

.vo-col[b-3k85szmsdj] {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.35rem);
}

.vo-aside[b-3k85szmsdj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: calc(60px + 1rem);
}

/* ── Restaurant banner + shop info (RestaurantInfoHeader data) ─────────── */
.vo-banner.logo-wrapper[b-3k85szmsdj] {
    position: relative;
    width: 100%;
    height: clamp(140px, 22vw, 200px);
    border-radius: var(--r);
    overflow: hidden;
    background-color: var(--c-surface);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vo-banner__logo[b-3k85szmsdj] {
    position: relative;
    z-index: 1;
    max-height: 120px;
    width: 120px;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35));
}

.vo-shop[b-3k85szmsdj] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1.15rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    box-shadow: var(--shadow-card);
}

.vo-shop__head[b-3k85szmsdj] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.vo-shop__logo[b-3k85szmsdj] {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    object-fit: contain;
    background: var(--c-muted);
    flex-shrink: 0;
}

.vo-shop__mark[b-3k85szmsdj] {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    background: var(--co-primary);
    color: var(--co-primary-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.vo-shop__meta[b-3k85szmsdj] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    flex: 1;
}

.vo-shop__name-row[b-3k85szmsdj] {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.vo-shop__name[b-3k85szmsdj] {
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vo-shop__icon[b-3k85szmsdj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--co-primary);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1.05rem;
    transition: background .14s ease;
}

    .vo-shop__icon:hover[b-3k85szmsdj] {
        background: var(--co-primary-tint);
    }

.vo-shop__line[b-3k85szmsdj] {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--c-ink-2);
    line-height: 1.35;
}

    .vo-shop__line i[b-3k85szmsdj] {
        color: var(--co-primary);
        margin-top: .1rem;
        flex-shrink: 0;
    }

.vo-shop__details[b-3k85szmsdj] {
    padding-top: .15rem;
    border-top: 1px solid var(--c-border);
}

    /* Retheme RestaurantDetails onto ViewOrder tokens */
    .vo-shop__details[b-3k85szmsdj]  .restaurant-details-wrapper {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .35rem .85rem;
        font-size: .82rem !important;
        color: var(--c-ink-2);
    }

        .vo-shop__details[b-3k85szmsdj]  .restaurant-details-wrapper div {
            padding: 0;
            text-align: left;
        }

        .vo-shop__details[b-3k85szmsdj]  .restaurant-details-wrapper i {
            padding-right: .3rem;
            color: var(--co-primary);
        }

.vo-shop__closed[b-3k85szmsdj] {
    padding: .65rem .75rem;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--c-sale) 12%, var(--c-surface));
    color: var(--c-sale);
    font-size: .9rem;
    font-weight: 700;
}

/* ── Status hero ───────────────────────────────────────────────────────── */
.vo-status[b-3k85szmsdj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .85rem;
    padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    box-shadow: var(--shadow-card);
}

.vo-status__label[b-3k85szmsdj] {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--co-primary);
}

.vo-status__number[b-3k85szmsdj] {
    font-size: clamp(2.75rem, 8vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--c-ink);
}

.vo-status__badge[b-3k85szmsdj] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border-radius: var(--r-pill);
    background: var(--vo-status-bg, var(--c-success));
    color: var(--vo-status-ink, #111);
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.vo-status__icon[b-3k85szmsdj] {
    flex-shrink: 0;
}

.vo-status__hint[b-3k85szmsdj] {
    margin: 0;
    font-size: .9rem;
    font-weight: 500;
    color: var(--c-ink-2);
}

/* ── Actions ───────────────────────────────────────────────────────────── */
.vo-actions[b-3k85szmsdj] {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.vo-btn[b-3k85szmsdj] {
    flex: 1 1 140px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 0 1.25rem;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .14s ease, transform .12s ease, background .14s ease;
}

.vo-btn--primary[b-3k85szmsdj] {
    border: none;
    background: var(--co-primary);
    color: var(--co-primary-ink);
}

    .vo-btn--primary:hover[b-3k85szmsdj] {
        filter: brightness(1.06);
    }

    .vo-btn--primary:active[b-3k85szmsdj] {
        transform: scale(.99);
    }

.vo-btn--ghost[b-3k85szmsdj] {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border-strong);
    color: var(--c-ink);
}

    .vo-btn--ghost:hover[b-3k85szmsdj] {
        background: var(--c-muted);
    }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.vo-card[b-3k85szmsdj] {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.vo-card--delivery[b-3k85szmsdj] {
    background: color-mix(in srgb, var(--co-primary) 6%, var(--c-surface));
}

.vo-card__head[b-3k85szmsdj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--c-border);
}

    .vo-card__head h2[b-3k85szmsdj] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: -.01em;
    }

.vo-pill[b-3k85szmsdj] {
    display: inline-flex;
    align-items: center;
    padding: .3rem .7rem;
    border-radius: var(--r-pill);
    background: var(--co-primary);
    color: var(--co-primary-ink);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vo-card__body[b-3k85szmsdj] {
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.vo-card__body--flush[b-3k85szmsdj] {
    padding: 0;
    gap: 0;
}

.vo-row[b-3k85szmsdj] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    color: var(--c-ink-2);
}

    .vo-row svg[b-3k85szmsdj] {
        flex-shrink: 0;
        margin-top: .15rem;
        color: var(--co-primary);
    }

.vo-row__title[b-3k85szmsdj] {
    font-weight: 700;
    color: var(--c-ink);
    font-size: .95rem;
}

.vo-row__sub[b-3k85szmsdj] {
    font-size: .85rem;
    color: var(--c-ink-2);
    margin-top: .15rem;
}

/* ── Lines ─────────────────────────────────────────────────────────────── */
.vo-lines[b-3k85szmsdj] {
    display: flex;
    flex-direction: column;
}

.vo-line[b-3k85szmsdj] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .75rem;
    padding: 1rem 1.15rem;
    align-items: start;
}

    .vo-line + .vo-line[b-3k85szmsdj] {
        border-top: 1px solid var(--c-border);
    }

.vo-line__qty[b-3k85szmsdj] {
    font-weight: 800;
    color: var(--c-ink-2);
    font-size: .9rem;
    padding-top: .1rem;
}

.vo-line__name[b-3k85szmsdj] {
    font-weight: 700;
    color: var(--c-ink);
    font-size: .95rem;
}

.vo-line__variant[b-3k85szmsdj] {
    color: var(--c-ink-3);
    font-weight: 600;
}

.vo-line__mods[b-3k85szmsdj] {
    margin: .35rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .82rem;
    color: var(--c-ink-2);
}

    .vo-line__mods li[b-3k85szmsdj] {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem;
    }

.vo-line__price[b-3k85szmsdj] {
    font-weight: 700;
    white-space: nowrap;
    color: var(--c-ink);
    text-align: right;
}

/* The promotion and its saving, under the article's own price. Capped so a long
   name cannot widen the price column; the full name is on the title attribute. */
.vo-line__promo[b-3k85szmsdj] {
    display: block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .15rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--error-color, #dc3545);
}

/* ── Totals ────────────────────────────────────────────────────────────── */
.vo-sums[b-3k85szmsdj] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1rem 1.15rem;
    border-top: 1px solid var(--c-border);
}

.vo-sum[b-3k85szmsdj] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .92rem;
    color: var(--c-ink-2);
}

    .vo-sum span:last-child[b-3k85szmsdj] {
        color: var(--c-ink);
        font-weight: 600;
    }

.vo-sum--disc[b-3k85szmsdj],
.vo-sum--disc span:last-child[b-3k85szmsdj] {
    color: var(--c-sale);
    font-weight: 700;
}

.vo-sum--grand[b-3k85szmsdj] {
    margin-top: .35rem;
    padding-top: .75rem;
    border-top: 1px solid var(--c-border);
    font-size: 1.05rem;
    color: var(--c-ink);
    align-items: baseline;
}

    .vo-sum--grand strong[b-3k85szmsdj] {
        font-size: 1.55rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--co-primary);
    }

.vo-loyalty[b-3k85szmsdj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.15rem;
    background: var(--co-primary-tint-2);
    color: var(--c-ink);
    font-size: .9rem;
    font-weight: 600;
    border-top: 1px solid var(--c-border);
}

    .vo-loyalty strong[b-3k85szmsdj] {
        color: var(--co-primary);
        font-weight: 800;
        font-size: 1.05rem;
    }

.vo-pay[b-3k85szmsdj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.15rem;
    background: var(--c-muted);
    border-top: 1px solid var(--c-border);
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-ink-2);
    text-transform: uppercase;
    letter-spacing: .03em;
}

    .vo-pay strong[b-3k85szmsdj] {
        color: var(--c-ink);
        font-weight: 800;
        text-transform: none;
        letter-spacing: 0;
        font-size: .9rem;
    }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
    .vo-grid[b-3k85szmsdj] {
        grid-template-columns: 1fr;
    }

    .vo-aside[b-3k85szmsdj] {
        position: static;
    }

    .vo-actions[b-3k85szmsdj] {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 0 calc(-1 * var(--gut));
        padding: .75rem var(--gut) calc(.75rem + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--c-muted) 92%, transparent);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--c-border);
    }
}
/* /Pages/ViewReceipt.razor.rz.scp.css */
.viewreceipt-content[b-sbu7gvsziv] {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.viewreceipt-ticketstatus-container[b-sbu7gvsziv] {
    margin: 5px;
    cursor: pointer;
}

.viewreceipt-ticketstatus[b-sbu7gvsziv] {
    font-size: 4.0rem;
    font-weight: 600;
    line-height: 1.2;
}

.viewreceipt-ticketnumber[b-sbu7gvsziv] {
    font-size: 8rem;
}

.viewreceipt-refresh[b-sbu7gvsziv] {
    padding: 20px;
    font-size: 2rem;
}

.subscription[b-sbu7gvsziv] {
    padding: 10px;
}

.subscription[b-sbu7gvsziv]  button {
    margin-left: 5px;
}

/* Overrule padding used in PurchaseHistoryTransaction component */
.receipt[b-sbu7gvsziv]  > div {
    padding-bottom: 0px !important;
}

/* main-dark.css hardcodes a dark .order-contents for every dark-OS visitor, while
   a shop with dark mode off forces light theme text, giving dark-on-dark. Follow
   the shop theme instead via the .shop-chrome tokens, like the navbar does. */
.receipt[b-sbu7gvsziv]  .order-contents {
    background-color: var(--c-surface);
    color: var(--c-ink);
}

.receipt[b-sbu7gvsziv]  .order-contents hr {
    background-color: var(--c-border);
}

/* main.css dropped flex: 1 on .item-price (cart name-overlap fix), which left the
   price glued to the name in light mode. Push it right without letting it grow. */
.receipt[b-sbu7gvsziv]  .cart-item .item-price {
    margin-left: auto;
}

.status-None[b-sbu7gvsziv] {
    background-color: #23B104 !important;
    color: black;
}

.status-Pending[b-sbu7gvsziv] {
    background-color: #FD3580 !important;
    color: black;
}

.status-Preparing[b-sbu7gvsziv] {
    background-color: #F1E202 !important;
    color: black;
}

.status-Ready[b-sbu7gvsziv] {
    background-color: #23B104 !important;
    color: black;
}

.status-Taken[b-sbu7gvsziv] {
    background-color: #23B1E7 !important;
    color: black;
}
/* /Pages/ViewVoucher.razor.rz.scp.css */
/* ViewVoucher — follows --shop-* tokens via ShopThemeProvider. */

.vv[b-coe29ge6y0] {
    color: var(--shop-font-color, #1f2328);
    font-family: var(--shop-font-family, inherit);
    font-size: var(--shop-font-size, 16px);
    min-height: 100%;
}

/* --shop-font-color is only emitted when the tenant sets a text colour, so the
   fallback has to follow the OS the same way main-dark.css does — otherwise
   dark-mode visitors of a tenant without a custom theme get near-black text
   on a dark background. */
@media (prefers-color-scheme: dark) {
    .vv[b-coe29ge6y0] {
        color: var(--shop-font-color, #e6e8eb);
    }
}

.voucher-info[b-coe29ge6y0] {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

.voucher-container[b-coe29ge6y0] {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1rem;
    display: flex;
    background: var(--shop-surface, transparent);
    border-radius: var(--shop-border-radius, 8px);
}

    .voucher-container .voucher-image[b-coe29ge6y0] {
        background-image: url("images/gift-card.jpeg");
        width: 30%;
        aspect-ratio: 1;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: var(--shop-border-radius, 8px) 0 0 var(--shop-border-radius, 8px);
    }

    .voucher-container .voucher[b-coe29ge6y0] {
        width: 70%;
        padding: 1rem;
    }

    .voucher-container .voucher-code[b-coe29ge6y0] {
        display: flex;
    }

        .voucher-container .voucher-code[b-coe29ge6y0]  button {
            margin-left: 1rem;
            border-radius: var(--shop-border-radius, 8px);
        }

@media (max-width: 600px) {
    .voucher-container[b-coe29ge6y0] {
        flex-direction: column;
    }

        .voucher-container .voucher-image[b-coe29ge6y0] {
            display: none;
        }

        .voucher-container .voucher[b-coe29ge6y0] {
            width: 100%;
        }
}
/* /Pages/Vouchers.razor.rz.scp.css */
/* Vouchers — follows --shop-* tokens via ShopThemeProvider. */

.vc[b-xj2snz9cw2] {
    color: var(--shop-font-color, #1f2328);
    font-family: var(--shop-font-family, inherit);
    font-size: var(--shop-font-size, 16px);
    min-height: 100%;
}

/* --shop-font-color is only emitted when the tenant sets a text colour, so the
   fallback has to follow the OS the same way main-dark.css does — otherwise
   dark-mode visitors of a tenant without a custom theme get near-black text
   on a dark background. */
@media (prefers-color-scheme: dark) {
    .vc[b-xj2snz9cw2] {
        color: var(--shop-font-color, #e6e8eb);
    }
}

.content-container[b-xj2snz9cw2] {
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: 0.8rem;
}

.vouchers-container[b-xj2snz9cw2]  > button {
    margin: 5px;
    width: 100px;
    height: 50px;
    border-radius: var(--shop-border-radius, 8px);
}

.body[b-xj2snz9cw2] {
    text-align: center;
    font-size: 1.2rem;
    padding: 0.8rem;
}

[b-xj2snz9cw2] .k-input {
    padding: .5rem !important; /* make text boxes 50% higher */
    border-radius: var(--shop-border-radius, 8px);
}
/* /Shared/AddressAutoComplete.razor.rz.scp.css */
.ac-container[b-hvs34494qe] {
    position: relative;
    width: 100%;
}

.ac-input[b-hvs34494qe] {
    width: 100%;
    padding: 8px;
}

.ac-dropdown[b-hvs34494qe] {
    position: absolute;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
}

.ac-item[b-hvs34494qe] {
    padding: 8px;
    cursor: pointer;
}

    .ac-item:hover[b-hvs34494qe] {
        background: #f2f2f2;
    }
/* /Shared/Dialogs/AboutUsDialog.razor.rz.scp.css */
.dialog-container[b-zwq7f9v3jk] {
    display: flex;
    flex-direction: row;
}

.address[b-zwq7f9v3jk] {
    padding: 10px;
}


@media (min-width: 449.99px) {
    .map[b-zwq7f9v3jk] {
        margin-left: auto;
        width: 400px;
    }
}

@media (max-width: 550px) {
    .dialog-container[b-zwq7f9v3jk] {
        flex-direction: column;
    }

    .map[b-zwq7f9v3jk] {
        width: 100%;
    }
}
/* /Shared/Dialogs/Component/ModifierQuantity.razor.rz.scp.css */
.qs-container[b-p1pb3qiinc] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.qs-total[b-p1pb3qiinc] {
    font-weight: 600;
/*    color: var(--kendo-text-color, #111827);*/
}

.qs-wrapper[b-p1pb3qiinc] {
    position: relative;
    display: inline-block;
    outline: none;
}
/* Mandatory tints derive from the brand accent so they track the theme. */
.qs-circle[b-p1pb3qiinc] {
    --qs-color-mandatory: color-mix(in srgb, var(--lp-primary, var(--shop-primary, #ff7200)) 12%, var(--shop-surface, #fff));
    --qs-color-dark-mandatory: color-mix(in srgb, var(--lp-primary, var(--shop-primary, #ff7200)) 20%, #1e1e1e);
    --qs-diameter: 70px;
    --qs-icon-size: 28px;
    --qs-border: 1px; /* was 2px; thicker ring highlights �middle of border� */
    /* brand accent follows the shop theme; legacy orange fallback */
    --qs-color: var(--lp-primary, var(--shop-primary, #ff7200));

    --qs-hit-padding: 12px; /* area extends outside the circle */

    width: var(--qs-diameter);
    height: var(--qs-diameter);
    border-radius: 50%;
    border: var(--qs-border) solid var(--qs-color);
    /*    color: var(--qs-color);   */
    background: transparent;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.qs-circle.disabled[b-p1pb3qiinc] {
    opacity: .5;
    cursor: not-allowed;
}

.qs-wrapper:focus-visible .qs-circle[b-p1pb3qiinc] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qs-color) 30%, transparent);
}

/* Center value (shows only when expanded) */
.qs-value[b-p1pb3qiinc] {
    font-weight: 700;
    font-size: x-large;
    opacity: 0;
    transform: scale(.95);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none; /* let hits go through to the hit boxes */
    color: var(--shop-font-color, var(--dark))
}
.qs-price[b-p1pb3qiinc] {
    color: var(--shop-font-color, var(--dark))
}
.qs-circle.expanded .qs-value[b-p1pb3qiinc] {
    opacity: 1;
    transform: scale(1);
}

/* Plus/Minus small buttons sitting on the big circle border midline */
.qs-icon[b-p1pb3qiinc] {
    position: absolute;
    width: var(--qs-icon-size);
    height: var(--qs-icon-size);
    border-radius: 50%;
    /*    border: var(--qs-border) solid var(--qs-color);*/
    background: color-mix(in srgb, var(--lp-primary, var(--shop-primary, #ff7200)) 12%, var(--shop-surface, #fff));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--qs-color);
    /*    box-shadow: 0 1px 2px rgba(0,0,0,.08);*/
    transition: all .25s ease;
    z-index: 0; /* above the wide hit boxes */
}
.qs-icon.manadatory[b-p1pb3qiinc] {
    background: var(--qs-color-mandatory);
}
@media (prefers-color-scheme: dark) {
    .qs-icon[b-p1pb3qiinc] {
        background: var(--shop-surface, #1e1e1e);
    }
    .qs-icon.manadatory[b-p1pb3qiinc] {
        background: var(--qs-color-dark-mandatory);
    }
    .qs-value[b-p1pb3qiinc] {
        color: var(--shop-font-color, var(--light))
    }
    .qs-price[b-p1pb3qiinc] {
        color: var(--shop-font-color, var(--light))
    }
}

    .qs-icon:hover[b-p1pb3qiinc] {
/*        background: #f3f4f6;*/
    }

/* PLUS: center when collapsed; move to right border midline when expanded */
.qs-icon-plus[b-p1pb3qiinc] {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: x-large;
}

.qs-circle.expanded .qs-icon-plus[b-p1pb3qiinc] {
/*    left: auto;
    right: calc((var(--qs-icon-size) / -2) + (var(--qs-border) / 2));*/
    transform: translate(70%, -50%);
}

/* MINUS: defines position on left border midline; hidden when collapsed */
.qs-icon-minus[b-p1pb3qiinc] {
    font-size: x-large;
/*    top: 50%;
    left: calc((var(--qs-icon-size) / -2) + (var(--qs-border) / 2));*/
    transform: translate(-116%, 0%);
    opacity: 0;
    pointer-events: none;
}

.qs-circle.expanded .qs-icon-minus[b-p1pb3qiinc] {
    opacity: 1;
    pointer-events: auto;
}

/* Large invisible hit areas that extend beyond the circle */
.qs-hit[b-p1pb3qiinc] {
    position: absolute;
    top: calc(-0.5 * var(--qs-hit-padding));
    bottom: calc(-0.5 * var(--qs-hit-padding));
    background: transparent;
    cursor: pointer;
    z-index: 0; /* below icons, above circle background */
    touch-action: manipulation;
}

.qs-hit-left[b-p1pb3qiinc] {
    left: calc(-1 * var(--qs-hit-padding));
    right: 50%;
}

.qs-hit-right[b-p1pb3qiinc] {
    left: 50%;
    right: calc(-1 * var(--qs-hit-padding));
}
/* /Shared/Dialogs/Component/VariationSelector.razor.rz.scp.css */
/* Variation Selector Styles */
.variation-selector[b-sh4r1cox19] {
    background: transparent;
    border-radius: var(--shop-border-radius, 8px);
/*    padding: 16px;*/
/*    margin: 16px 0;*/
}

.variation-selector h4[b-sh4r1cox19] {
    color: var(--shop-font-color, #333);
/*    font-size: 1.2rem;*/
    font-weight: 600;
/*    margin-bottom: 16px;*/
}

/* Variation Group Styles */
.variation-group[b-sh4r1cox19] {
    margin-bottom: 20px;
}

.variation-type-title[b-sh4r1cox19] {
    color: var(--shop-font-color, #555);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
}

/* Variation Options */
.variation-options[b-sh4r1cox19] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.variation-option[b-sh4r1cox19] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-inline-end: 13px;
    padding-bottom: 10px;
    padding-left: 12px;
    background: transparent;
    border-bottom: 1px solid var(--kendo-base-border, #e4e7eb);
    /*    border-radius: 6px;*/
    cursor: pointer;
    transition: all 0.2s ease;
}
@media (prefers-color-scheme: dark) {
    .variation-option[b-sh4r1cox19] {
        border-bottom: 1px solid var(--kendo-base-border, #444444);
    }
    .variation-selector h4[b-sh4r1cox19] {
        color: var(--shop-font-color, #fff);
    }

    .variation-type-title[b-sh4r1cox19] {
        color: var(--shop-font-color, #fff);
    }
    .option-name[b-sh4r1cox19] {
        color: var(--shop-font-color, #fff);
    }
}

    .variation-option:hover[b-sh4r1cox19] {
/*        border-color: #ff7200;
        background-color: rgba(255, 114, 0, 0.1);*/
    }

    .variation-option.selected[b-sh4r1cox19] {
/*        border-color: #ff7200;
        background-color: rgba(255, 114, 0, 0.1);*/
    }

.option-content[b-sh4r1cox19] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.option-right[b-sh4r1cox19] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.option-name[b-sh4r1cox19] {
    font-weight: 500;
    color: var(--shop-font-color, #333);
    margin-bottom: 2px;
}

.option-price[b-sh4r1cox19] {
    font-size: 0.9rem;
    color: var(--lp-primary, var(--shop-primary, #ff7200));
    font-weight: 600;
}

/* Custom Radio Button Styles */
.radio-circle[b-sh4r1cox19] {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle[b-sh4r1cox19] {
    width: 70px;
    height: 70px;
    border: 1px solid var(--lp-primary, var(--shop-primary, #ff7200));
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

    .circle.selected[b-sh4r1cox19] {
        background-color: var(--lp-primary, var(--shop-primary, #ff7200));
        border-color: var(--lp-primary, var(--shop-primary, #ff7200));
    }

/* Selected Variation Summary */
.selected-variation-summary[b-sh4r1cox19] {
    padding: 12px;
    background: color-mix(in srgb, var(--lp-primary, var(--shop-primary, #ff7200)) 10%, transparent);
    border: 1px solid var(--lp-primary, var(--shop-primary, #ff7200));
    border-radius: 6px;
    text-align: center;
}

    .selected-variation-summary strong[b-sh4r1cox19] {
        color: var(--lp-primary, var(--shop-primary, #ff7200));
    }

/* Responsive Design */
@media (max-width: 768px) {

    .option-content[b-sh4r1cox19] {
    }

    .variation-selector[b-sh4r1cox19] {
    }
}



/* Multiple options layout for wider screens */
@media (min-width: 1024px) {
    .variation-options[b-sh4r1cox19] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 12px;
    }
}
/* /Shared/Dialogs/ConfigureOrderLineDialog.razor.rz.scp.css */
i[b-eytcg5do2p] {
    cursor: pointer;
}

h2[b-eytcg5do2p] {
    font-size: 1.8rem !important;
    line-height: 1.8rem !important;
}

.description[b-eytcg5do2p] {
    font-size: 0.9rem;
    margin: 0px 10px 10px 10px;
}

.description.ingredients[b-eytcg5do2p] {
    font-size: 0.85rem;
    opacity: 0.85;
}

.note1[b-eytcg5do2p] {
    font-size: 0.9rem;
    margin: 0px 10px 10px 10px;
}

.dialog-condiments[b-eytcg5do2p] {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

    .dialog-condiments .condiment-group[b-eytcg5do2p] {
        font-weight: bold;
        font-size: 1.2rem;
        margin-inline-start: 18px;
    }

    .dialog-condiments .condiment-group-comment[b-eytcg5do2p] {
        font-size: 0.9rem;
        margin-inline-start: 18px;
    }

.condiments[b-eytcg5do2p] {
    margin-bottom: 15px;
}

.condiment[b-eytcg5do2p] {
    display: flex;
    flex-direction: row;
    padding: 2px;
}

.condiment-price[b-eytcg5do2p] {
    margin-left: auto;
}

/* Quantity stepper (- N +). The container and the two TelerikButtons inside it
   all carry .k-button-solid-secondary, which Kendo hardcodes to #6c757d with
   white text in BOTH bootstrap-main.css and bootstrap-main-dark.css — so it
   follows neither the tenant theme nor the colour scheme on its own.

   Kept a brand-TINTED neutral rather than the full accent: the primary "Add"
   button sits right beside this row, and a second accent-coloured control would
   compete with it. Not --shop-muted either, that token is the tenant's muted
   TEXT colour and goes pale (#a0a4a8 in the dark preset), which the light -/+
   glyphs can't sit on. With no theme loaded the mix is grey into grey, i.e.
   exactly Kendo's original #6c757d. */
/* The stepper is a row, not a block of inline content. Left as display:block the -,
   the count and the + are inline boxes, so they wrap the moment the footer squeezes
   them - at Safari's larger page-zoom levels the + dropped onto its own line and left
   the stepper two rows tall. inline-flex keeps them on one line and flex-shrink:0
   makes the Add button beside it give up the width instead. */
.buttons[b-eytcg5do2p] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    /* Static floor first. color-mix() needs Safari 16.2; below that the custom property
       is invalid at computed-value time, so every var() reading it falls back to the
       property's INITIAL value - background-color becomes transparent and the white
       glyphs disappear into the dialog. Reported on iPhone SE 2022 / iOS 15.4: the -/+
       were invisible but still clickable, which is exactly this. These greys are Kendo's
       own secondary ramp, i.e. what the row looked like before it was themed. */
    --stepper-bg: #6c757d;
    --stepper-bg-hover: #5a6268;
    --stepper-bg-active: #545b62;
    --stepper-ink: #fff;
    background-color: var(--stepper-bg) !important;
    border-color: var(--stepper-bg) !important;
}

/* Tenant tint layered on only where color-mix actually resolves. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .buttons[b-eytcg5do2p] {
        --stepper-bg: color-mix(in srgb, var(--lp-primary, var(--shop-primary, #6c757d)) 18%, #6c757d);
        --stepper-bg-hover: color-mix(in srgb, var(--stepper-bg) 85%, #000);
        --stepper-bg-active: color-mix(in srgb, var(--stepper-bg) 78%, #000);
    }
}

/* ::deep to pierce TelerikButton's own scope. The states mirror Kendo's own
   secondary ramp (it darkens #6c757d for hover/active); deriving them from
   --stepper-bg keeps that behaviour once the base colour is themed. */
.buttons[b-eytcg5do2p]  .k-button-solid-secondary {
    background-color: var(--stepper-bg) !important;
    border-color: var(--stepper-bg) !important;
    color: var(--stepper-ink) !important;
}

.buttons[b-eytcg5do2p]  .k-button-solid-secondary:hover,
.buttons[b-eytcg5do2p]  .k-button-solid-secondary.k-hover {
    background-color: var(--stepper-bg-hover) !important;
    border-color: var(--stepper-bg-hover) !important;
}

.buttons[b-eytcg5do2p]  .k-button-solid-secondary:active,
.buttons[b-eytcg5do2p]  .k-button-solid-secondary.k-active,
.buttons[b-eytcg5do2p]  .k-button-solid-secondary.k-selected {
    background-color: var(--stepper-bg-active) !important;
    border-color: var(--stepper-bg-active) !important;
}

.buttons[b-eytcg5do2p]  button:focus {
    box-shadow: none;
}

/* Was a hard 30px margin either side. That is the roomy spacing we want on a normal
   phone, so it stays the cap - but as a fixed value it was also what made the row too
   wide to fit once the page was zoomed. vw tracks the layout width Safari's page zoom
   actually reports, so the gap tightens instead of forcing a wrap. */
.buttons__count[b-eytcg5do2p] {
    padding-inline: clamp(.5rem, 8vw, 1.875rem);
    text-align: center;
}
.ingredient-list[b-eytcg5do2p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ingredient-item[b-eytcg5do2p] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.option-group[b-eytcg5do2p] {
    position: relative;
    /* Remove mask properties */
}

    /* Fades the truncated option list into the dialog's own surface, so it has to
       follow --shop-surface and not --kendo-body-bg: the Kendo variable comes from
       bootstrap-main[-dark].css, which _Layout serves by the VISITOR's OS scheme,
       while the dialog stays light whenever the merchant hasn't enabled dark mode
       (CreateCssAsync mirrors the light config into the tenant's dark stylesheet).
       That mismatch smudged a dark gradient across a light dialog. Only the
       fallback flips per scheme - same shape as .load-toggle-row below. */
    .option-group:not(.expanded)[b-eytcg5do2p]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(transparent, var(--shop-surface, white));
        pointer-events: none;
/*        z-index: -1;*/
    }

@media (prefers-color-scheme: dark) {
    .option-group:not(.expanded)[b-eytcg5do2p]::after {
        background: linear-gradient(transparent, var(--shop-surface, #1e1e1e));
    }
}
/* Ensure ModifierQuantity can overflow */
.option-row[b-eytcg5do2p] {
    position: relative;
    z-index: 0;
}

.option-row[b-eytcg5do2p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0px;
    border-bottom: 1px solid var(--kendo-base-border, #e4e7eb);
    gap: 12px;
    padding-inline-end: 13px;
    cursor: pointer;
}
@media (prefers-color-scheme: dark) {
    .option-row[b-eytcg5do2p] {
        border-bottom: 1px solid var(--kendo-base-border, #444444);
    }
    .mandatory-option-group.option-row:last-child[b-eytcg5do2p] {
        border-bottom: none;
    }
}
.mandatory-option-group.option-row:last-child[b-eytcg5do2p] {
    border-bottom: none;
}
.mandatory-option-group[b-eytcg5do2p] {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
.option-image[b-eytcg5do2p] {
    width: 70px;
    height: 70px;
    border-radius: var(--shop-border-radius, 8px);
    object-fit: cover;
    margin-inline-start: 3px;
}

.option-name[b-eytcg5do2p] {
    flex-grow: 1;
    font-size: 1rem;
    /* color: var(--kendo-body-text, #333); */
    word-break: break-word;
    width:25%;
}

.strikeout[b-eytcg5do2p] {
    text-decoration: line-through;
    opacity: 0.5;
}
/* The row fades the truncated option list out behind it, so the gradient is the
   dialog's own surface at partial alpha — not white. Only the base colour flips
   per scheme; --shop-surface is only emitted when the tenant sets a surface
   colour, so the fallback has to follow the OS the way main-dark.css does,
   otherwise dark-mode users get a white band across a dark dialog. */
[b-eytcg5do2p] .load-toggle-row {
    --fade-surface: var(--shop-surface, #fff);
    padding: 8px 12px;
    text-align: center;
    cursor: pointer;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--fade-surface) 60%, transparent),
        color-mix(in srgb, var(--fade-surface) 90%, transparent));
    font-weight: 500;
    color: var(--primary, #4CAF50);
    border-top: 1px solid var(--kendo-base-border, #ddd);
    backdrop-filter: blur(2px);
}

@media (prefers-color-scheme: dark) {
    [b-eytcg5do2p] .load-toggle-row {
        --fade-surface: var(--shop-surface, #1e1e1e);
    }
}

.option-list.expanded[b-eytcg5do2p] {
    animation: fadeSlide-b-eytcg5do2p 0.5s ease forwards;
    opacity: 1;
    max-height:5000px;
}
.option-list[b-eytcg5do2p] {
    max-height: 0;
    opacity: 0;
    overflow-y: clip;
    transition: all 0.5s ease;
    animation: fadeSlideOut-b-eytcg5do2p 0.5s ease forwards;
}
@keyframes fadeSlideOut-b-eytcg5do2p {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}
@keyframes fadeSlide-b-eytcg5do2p {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.expandable-list[b-eytcg5do2p] {
    position: relative;
}

.peek-container[b-eytcg5do2p] {
    position: relative;
    margin-top: 0px;
    z-index: 0;
}

.load-more-overlay[b-eytcg5do2p] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
/*    background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,1));*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: var(--primary, #4CAF50);
    cursor: pointer;
    z-index: 1;
    backdrop-filter: blur(2px);
}
/* Mandatory groups are tinted with the brand accent so they track the tenant
   theme. Accent chain matches the rest of the dialog components: --lp-primary is
   set on .lp-shop, --shop-primary comes from the theme CSS, legacy orange last.

   Mixed with `transparent` rather than a surface colour, so the tint composites
   over whatever the dialog body is (--shop-surface, which itself differs per
   scheme) instead of hardcoding a base. Percentages reproduce the previous
   literals: rgba(255,242,230,.8) over white is ~8% accent, and the old dark
   value was already exactly 10% accent. */
.mandatory-list-header[b-eytcg5do2p],
.mandatory-option-group[b-eytcg5do2p] {
    --mandatory-tint: color-mix(in srgb, var(--lp-primary, var(--shop-primary, #ff7200)) 8%, transparent);
    background-color: var(--mandatory-tint);
}

.mandatory-list-header[b-eytcg5do2p] {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

/* A faint tint reads weaker against a dark surface, hence the slight lift. The
   radii above are scheme-independent and are not repeated here. */
@media (prefers-color-scheme: dark) {
    .mandatory-list-header[b-eytcg5do2p],
    .mandatory-option-group[b-eytcg5do2p] {
        --mandatory-tint: color-mix(in srgb, var(--lp-primary, var(--shop-primary, #ff7200)) 10%, transparent);
    }
}
.mandatory-list-footer[b-eytcg5do2p] {
/*    border-left: 1px solid #ff7200;
    border-right: 1px solid #ff7200;
    border-bottom: 1px solid #ff7200;*/
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.mandatory-option-image[b-eytcg5do2p] {
    /*width: 70px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #ff7200;*/ /* Orange border matching your theme */
    /*padding: 8px;*/ /* Inner padding around the image */
    /*background-color: rgba(255, 242, 230, 0.3);*/ /* Light orange background */
    /*box-sizing: border-box;*/ /* Include padding and border in total size */
}
.moveup[b-eytcg5do2p] {
    transform: translate(0%, -80%);
}

.configure-hero[b-eytcg5do2p] {
    position: relative;
    height: 100%;
    width: 100%;
}

/* The offer this article would earn first — top-left over the image. Shares the
   global --error-color with the product card badge so the two can never drift. */
.configure-hero__promo[b-eytcg5do2p] {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    max-width: calc(100% - 2rem);
    padding: .25rem .6rem;
    border-radius: var(--shop-border-radius, 8px);
    background: var(--shop-promo, #e23434);
    color: var(--shop-promo-text, #fff);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.configure-offers[b-eytcg5do2p] {
    margin: 0 10px;
}

.configure-offers[b-eytcg5do2p]  .poff-offers {
    margin-top: .4rem;
    margin-bottom: 10px;
}
/* /Shared/Dialogs/ConfirmationDialog.Razor.rz.scp.css */
.body[b-qw0zoavkec] {
    text-align: center;
    font-size: 1.2rem;
    padding: 0.8rem;
    /* lets a message put a listing on its own line instead of inlining it
       into the sentence, where item names read as part of the punctuation */
    white-space: pre-line;
}
/* /Shared/Dialogs/DialogTemplate.razor.rz.scp.css */
.dialog-container[b-d76tyu5iqh] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* Same scrim as CartDrawer (.cd-scrim): dim + blur the page behind. */
    background-color: rgba(15, 15, 20, .45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 2100; /* above the cart drawer (.order-drawer z-index 2001) so dialogs stack on top */
    display: flex;
    flex-direction: column;
}

.dialog[b-d76tyu5iqh] {
    align-self: center;
    margin: auto;
    position: relative;
    max-height: 100%;
}

.dialog-fixedwidth[b-d76tyu5iqh] {
    width: 500px;
}

.dialog-fullwidth[b-d76tyu5iqh] {
    width: 100%;
    max-width: 1000px;
}

.close-container[b-d76tyu5iqh] {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 40px;
    width: 40px;
    z-index: 2001;
}

    .close-container[b-d76tyu5iqh]  button {
        height: 40px;
        width: 40px;
        border-radius: 50%;
    }

.dialog-main[b-d76tyu5iqh] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
    border-radius: var(--shop-border-radius, .75rem);
    color: var(--shop-font-color, inherit);
    font-family: var(--shop-font-family, inherit);
    background-color: var(--shop-surface, #ffffff);
}

/* --shop-surface is only emitted when the tenant sets a surface colour, so the
   fallback has to follow the OS the same way main-dark.css does — otherwise the
   shell stays white behind the dark .i-color-body children (visible in the
   footer / scroll-indicator strip, which have no .i-color-body of their own). */
@media (prefers-color-scheme: dark) {
    .dialog-main[b-d76tyu5iqh] {
        background-color: var(--shop-surface, #1e1e1e);
    }
}

.dialog-logo[b-d76tyu5iqh] {
    height: 25vh;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

div.dialog-logo[b-d76tyu5iqh]  img {
    height: 100%;
    width: 100%;
    object-position: center;
    object-fit: cover;
}

.dialog-header[b-d76tyu5iqh] {
    position: sticky;
    position: -webkit-sticky;  
    top: 0;
    z-index: 2000;
    height: 60px;
    display: flex;
    align-items: center;
}

.header-content[b-d76tyu5iqh] {
    padding: 0px 10px 0px 10px;
    width: 100%;
}

.header-pusher[b-d76tyu5iqh] {
    width: 60px;
    height: 60px;
}

.dialog-header[b-d76tyu5iqh]  h2 {
    font-size: 1.5rem;
    margin: 0;
    line-height: 1.3rem;
    font-weight: bold;
}

    .dialog-body[b-d76tyu5iqh]  h3 {
        font-size: 1rem;
        margin: 0;
        line-height: 1.3rem;
    }

div.dialog-footer[b-d76tyu5iqh] {
    position: sticky;
    position: -webkit-sticky; /* Safari */
    bottom: 0;
    display: flex;
    flex-direction: column;
}

div.dialog-main-footer[b-d76tyu5iqh] {
    padding: 0.8rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

div.dialog-main-footer[b-d76tyu5iqh]  button {
    padding-block: 0.6rem !important; /* make footer buttons higher */
}

/* scrollIndicator */
#scrollIndicator[b-d76tyu5iqh] {
    color: white;
    text-align: center;
    padding: 0px;
    animation: scrollIndicator-entry-b-d76tyu5iqh .5s;
}

    #scrollIndicator .k-icon[b-d76tyu5iqh] {
        font-size: 24px !important;
    }

@keyframes scrollIndicator-entry-b-d76tyu5iqh {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#scroll-end-div[b-d76tyu5iqh] {
    height: 1px;
}
/* /Shared/Dialogs/LoadingDialog.razor.rz.scp.css */
.loading-container[b-jrv2j6j91o] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* /Shared/Dialogs/LoginOrRegisterDialog.razor.rz.scp.css */
.body[b-7xby543dka] {
    text-align: center;
    font-size: 1.2rem;
    padding: 0.8rem;
}
/* /Shared/Dialogs/LoyaltyInfoDialog.razor.rz.scp.css */
.dialog-title[b-jymlgccufm] {
    display: flex;
    padding: 0;
}

    .dialog-title > img[b-jymlgccufm] {
        height: 100px;
        padding-right: 5px;
    }

    .dialog-title > div[b-jymlgccufm] {
        margin-top: auto;
        margin-bottom: auto;
    }

.container[b-jymlgccufm] {
    padding: 1.3rem;
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .dialog-title > img[b-jymlgccufm] {
        height: 75px !important;
    }
}
/* /Shared/Dialogs/MessageDialog.razor.rz.scp.css */
.body-message[b-4oo8glsywf] {
    text-align: center;
    font-size: 1.2rem;
    padding: 0.8rem;
}

.body-markup[b-4oo8glsywf] {
    padding: 0.8rem;
    overflow-y: auto;
}
/* /Shared/Dialogs/OrderDialog.razor.rz.scp.css */
.dialog-message[b-nka60u7zt2] {
    text-align: center;
    font-size: 1.2rem;
    padding: 0.8rem 0.8rem 0 0.8rem;
}
/* /Shared/Dialogs/ReceiptDialog.razor.rz.scp.css */
.qr-container[b-33yf06ms1b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.qr-image[b-33yf06ms1b] {
    width: 200px;
    height: 200px;
    margin: 10px auto 10px auto;
}
/* /Shared/Dialogs/RestaurantInfoDialog.razor.rz.scp.css */
.dialog-title[b-inkgepz4oj] {
    display: flex;
    padding:0;
}

    .dialog-title > img[b-inkgepz4oj] {
        height: 100px;
        padding-right: 5px;
    }

    .dialog-title > div[b-inkgepz4oj] {
        margin-top: auto;
        margin-bottom: auto;
    }

.container[b-inkgepz4oj] {
    padding: 1.3rem;
    overflow-y: auto;
}

    .container table[b-inkgepz4oj] {
        width: 100%;
    }

    .container td[b-inkgepz4oj] {
        width: 50%;
    }

    .container h2[b-inkgepz4oj] {
        font-size: 1.4rem;
        margin: 0;
        line-height: 1.3rem;
        padding-bottom: 0.5rem;
    }

@media (max-width: 991.98px) {
    .container table[b-inkgepz4oj] {
        width: 100% !important;
    }

    .dialog-title > img[b-inkgepz4oj] {
        height: 75px !important;
    }
}
/* /Shared/Dialogs/RestaurantOfflineDialog.razor.rz.scp.css */
.dialog-title[b-w0mi6ernds] {
    display: flex;
    padding: 0;
}

    .dialog-title > img[b-w0mi6ernds] {
        height: 100px;
        padding-right: 5px;
    }

    .dialog-title > div[b-w0mi6ernds] {
        margin-top: auto;
        margin-bottom: auto;
    }

.container[b-w0mi6ernds] {
    padding: 1.3rem;
    overflow-y: auto;
    font-size: 1.2rem;
}

    .container i[b-w0mi6ernds] {
        margin-right: 5px;
    }

@media (max-width: 991.98px) {
    .dialog-title > img[b-w0mi6ernds] {
        height: 75px !important;
    }
}
/* /Shared/Dialogs/SelectTagsDialog.razor.rz.scp.css */
.dialog-tags[b-76xyy77iey] {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 2rem;
}
/* /Shared/Drawers/DrawerTemplate.razor.rz.scp.css */
.drawer-container[b-eyg7d5ew1o] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000; /* above the sticky cat-nav (z-index 99) */
}

.order-drawer[b-eyg7d5ew1o] {
    z-index: 2001;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    transition: all .5s;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .order-drawer.close[b-eyg7d5ew1o] {
        top: 100%;
        height: 0;
        pointer-events: none;
    }

/*.order-drawer {
    z-index: 2;
    position: absolute;
    overflow: hidden;*/ /* Prevent scrollbar from appearing */
    /*top: 52px;
    bottom: 0;
    transition: transform .5s ease-in;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}*/

.order-drawer-visible[b-eyg7d5ew1o] {
    transform: translateY(100%); 
}

.close-container[b-eyg7d5ew1o] {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    height: 2.5rem;
    width: 2.5rem;
    z-index: 2001;
}

    .close-container[b-eyg7d5ew1o]  button {
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 50%;
    }

.drawer-contents[b-eyg7d5ew1o] {
    z-index: 3;
    width: 100%;
    height: 100%;
    max-width: 600px;
    position: absolute;
}
/* /Shared/Help.razor.rz.scp.css */
span[b-qg7w7knf9f] {
    cursor: pointer;
    margin-left: 5px;
}
/* /Shared/LayoutComponents/StickyFooter.razor.rz.scp.css */
.footer-content[b-jvntq7u0ht] {
    height: 60px;
    padding: 10px; 
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 1280px;
    font-size: larger;
    z-index: 1;
    display: flex;
}

.push-me-up[b-jvntq7u0ht] {
    height: 70px;
}
/* /Shared/Loader.razor.rz.scp.css */
.loader-container[b-tw7n7804b1] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* /Shared/LoyaltyPointsPerRestaurantCard.razor.rz.scp.css */
img[b-t0hl3i1c1h] {
    width: 90px;
    height: 90px;
}

label[b-t0hl3i1c1h] {
    width:100%;
    margin-bottom: 0px;
}

.wrapper[b-t0hl3i1c1h] {
    display:flex;
}

.labels[b-t0hl3i1c1h] {
    display:flex;
    flex-direction:column;
    padding: 5px;
}

.name[b-t0hl3i1c1h] {
    font-size: 1.2rem;
}

.name i[b-t0hl3i1c1h] {
    cursor: pointer;
}

.detail-card[b-t0hl3i1c1h] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 25%);
}

.detail-card > div[b-t0hl3i1c1h] {
    margin: 5px 10px 5px 10px;
    text-align: end;
}
/* /Shared/LoyaltyRedeem.razor.rz.scp.css */
/* Responsive grid of redeem buttons — 2 per row on mobile, auto-fills wider.
   Replaces the old horizontal-scroll row so all options stay visible. */
.cards-box[b-maykg0wi6r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .5rem;
    min-width: 0;
    width: 100%;
}

@media (min-width: 560px) {
    .cards-box[b-maykg0wi6r] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* Locked while the order waits for payment */
.cards-box--disabled[b-maykg0wi6r] {
    opacity: .55;
    pointer-events: none;
}
/* /Shared/LoyaltyRedeemCard.razor.rz.scp.css */
/* Loyalty redeem button.
   Colours are themeable from the portal (Layout settings → Loyalty buttons) via
   --shop-loyalty-* variables. When a tenant hasn't set them, the fallbacks below
   reproduce the default look: surface background, body-text points, primary-tinted
   amount, and a primary border on the selected card. Light/dark comes from the
   shop theme tokens automatically. */
.lr-card[b-t0o7jigum7] {
    --lr-bg: var(--shop-loyalty-bg, var(--shop-surface, #2c2018));
    --lr-border: var(--shop-loyalty-border, color-mix(in srgb, var(--shop-font-color, #ffffff) 16%, transparent));
    --lr-text: var(--shop-loyalty-text, var(--shop-font-color, #ffffff));

    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 84px;
    padding: .6rem .75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .15rem;
    text-align: center;
    cursor: pointer;
    border-radius: var(--shop-border-radius, 10px);
    background: var(--lr-bg);
    border: 2px solid var(--lr-border);
    color: var(--lr-text);
    transition: filter .14s ease, border-color .14s ease, transform .12s ease;
}

    .lr-card:hover[b-t0o7jigum7] {
        filter: brightness(1.08);
    }

    .lr-card:active[b-t0o7jigum7] {
        transform: scale(.99);
    }

.lr-card--selected[b-t0o7jigum7] {
    --lr-bg: var(--shop-loyalty-sel-bg, var(--shop-loyalty-bg, var(--shop-surface, #2c2018)));
    --lr-border: var(--shop-loyalty-sel-border, var(--shop-primary, var(--lp-primary, #ff7200)));
    --lr-text: var(--shop-loyalty-sel-text, var(--shop-loyalty-text, var(--shop-font-color, #ffffff)));
}

.lr-card__points[b-t0o7jigum7],
.lr-card__amount[b-t0o7jigum7] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lr-card__points[b-t0o7jigum7] {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    white-space: nowrap;
}

.lr-card__amount[b-t0o7jigum7] {
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--shop-primary, var(--lp-primary, #ff7200));
}
/* /Shared/NavigationMenu/ExternalAuthButtons.razor.rz.scp.css */
.external-auth-buttons[b-2753scbzlq] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.external-auth-btn[b-2753scbzlq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.external-auth-btn:focus[b-2753scbzlq] {
    outline: none;
}

.external-auth-btn:focus-visible[b-2753scbzlq] {
    box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.35);
}

.external-auth-btn:disabled[b-2753scbzlq],
.external-auth-btn--disabled[b-2753scbzlq] {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

.external-auth-btn__icon[b-2753scbzlq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.external-auth-btn__icon svg[b-2753scbzlq] {
    width: 100%;
    height: 100%;
    display: block;
}

.external-auth-btn__label[b-2753scbzlq] {
    white-space: nowrap;
}

.external-auth-btn--google[b-2753scbzlq] {
    background-color: #ffffff;
    color: #3c4043;
    border: 1px solid #dadce0;
}

.external-auth-btn--google:hover:not(:disabled)[b-2753scbzlq] {
    background-color: #f8f9fa;
    border-color: #d2e3fc;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.external-auth-btn--apple[b-2753scbzlq] {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #000000;
}

.external-auth-btn--apple:hover:not(:disabled)[b-2753scbzlq] {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}

.external-auth-btn--apple:focus-visible[b-2753scbzlq] {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
}

.external-auth-divider[b-2753scbzlq] {
    position: relative;
    margin: 1rem 0 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    color: #6c757d;
}

.external-auth-divider[b-2753scbzlq]::before,
.external-auth-divider[b-2753scbzlq]::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 5.5rem);
    height: 1px;
    background-color: #dee2e6;
}

.external-auth-divider[b-2753scbzlq]::before {
    left: 0;
}

.external-auth-divider[b-2753scbzlq]::after {
    right: 0;
}

@media (prefers-color-scheme: dark) {
    .external-auth-btn--google[b-2753scbzlq] {
        background-color: #ffffff;
        color: #3c4043;
        border-color: #dadce0;
    }

    .external-auth-btn--google:hover:not(:disabled)[b-2753scbzlq] {
        background-color: #f1f3f4;
    }

    .external-auth-divider[b-2753scbzlq] {
        color: #adb5bd;
    }

    .external-auth-divider[b-2753scbzlq]::before,
    .external-auth-divider[b-2753scbzlq]::after {
        background-color: #495057;
    }
}
/* /Shared/NavigationMenu/FooterNavigation.razor.rz.scp.css */
.nav-container[b-jallbmivjl] {
    display: flex;
    justify-content: center;
    padding: 10px;
    border-top: 1px solid;
}

    .nav-container > *[b-jallbmivjl] {
        margin-left: 10px;
        margin-right: 10px;
    }

    .nav-container[b-jallbmivjl]  button {
        border-radius: 50%;
    }

i[b-jallbmivjl] {
    font-size: 20px;
}
/* /Shared/NavigationMenu/MenuDialog.razor.rz.scp.css */
.nav-item[b-t7eon03yxq]  a {
    color: #ffffff;
    background-color: #182535;
    border-color: #182535;
    /*border-radius: $border-radius;*/
    border-style: solid;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 1rem;
}

    .nav-item[b-t7eon03yxq]  a.active {
        color: #182535;
        background-color: #ffffff;
        border-color: #182535;
    }

    .nav-item[b-t7eon03yxq]  a:hover {
        color: #182535;
        background-color: #ffffff;
        cursor: pointer;
    }

.nav-item i[b-t7eon03yxq] {
    padding-right: 10px;
}

.qr-image[b-t7eon03yxq] {
    width: 300px;
    height: 300px;
    margin: 10px auto 10px auto;
}

.password-strength[b-t7eon03yxq] {
    font-size: smaller;
}

.login-mode[b-t7eon03yxq] {
    --login-mode-field-bg: #e1e3e4;
    --login-mode-text: #586062;
    --login-mode-switch-indicator: #ffffff;
    --login-mode-text-hover: #182535;
}

@media (prefers-color-scheme: dark) {
    .login-mode[b-t7eon03yxq] {
        --login-mode-field-bg: #2b2b2b;
        --login-mode-text: #c7c7c7;
        --login-mode-switch-indicator: #3f3f3f;
        --login-mode-text-hover: #f1f1f1;
    }
}

/* The Email / Phone switch is now the reusable <SegmentSwitch> component.
   The --login-mode-* vars above are inherited by it for theming (incl. dark). */
/* /Shared/NavigationMenu/SelectLanguage.razor.rz.scp.css */
.language-list > img[b-b1142uwngw] {
    padding-left: 3px;
    padding-bottom: 3px;
    height: 28px;
    cursor: pointer;
}

    .language-list > img:hover[b-b1142uwngw] {
        transform: scale(1.3);
    }
/* /Shared/NoDataFound.razor.rz.scp.css */
.wait-container[b-ulg2rp0bvf] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 20px;
    color: red;
}

span[b-ulg2rp0bvf] {
    padding: 5px;
}

@media (min-width: 992px) {
    .wait-container[b-ulg2rp0bvf] {
        font-size: 30px;
    }
}
/* /Shared/OrderHistroryCard.razor.rz.scp.css */
.order-history-card[b-gj2rhpvqd9] {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
}

.order-status[b-gj2rhpvqd9], .payment-status[b-gj2rhpvqd9] {
    text-align: right;
}

.total-amount[b-gj2rhpvqd9] {
    text-align: right;
    font-size: 1.1rem;
}

.restaurant-name[b-gj2rhpvqd9] {
}

.order-number[b-gj2rhpvqd9] {
}

.order-date[b-gj2rhpvqd9] {
}
/* /Shared/PhonePrefix.razor.rz.scp.css */
/* Old single-pill design, rebuilt on the Telerik dropdown: the country picker is
   styled as a borderless flag+code "chip", a divider, then a borderless number
   input — all inside one bordered field. Telerik still owns the popup (renders at
   root, auto-positions), we only restyle its in-place button. */

.pp[b-xdi990a9wk] {
    min-width: 0;
    max-width: 100%;
    --pp-field-bg: #ffffff;
    --pp-text: #1d1b1a;
    --pp-muted: #9a98a2;
    --pp-border: rgba(29, 27, 26, .14);
    --pp-chip-bg: #f3f1f0;
    --pp-chip-bg-hover: #ebe8e6;
    --pp-accent: var(--main-color, #182535);
    --pp-ring: color-mix(in srgb, var(--pp-accent) 22%, transparent);
    --pp-error: #ba1a1a;
}

@media (prefers-color-scheme: dark) {
    .pp[b-xdi990a9wk] {
        --pp-field-bg: #2b2b2b;
        --pp-text: #f1f1f1;
        --pp-muted: #a8a8a8;
        --pp-border: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 16%, transparent);
        --pp-chip-bg: #3a3a3a;
        --pp-chip-bg-hover: #474747;
        --pp-error: #ff6b6b;
    }
}

/* The pill */
.pp-field[b-xdi990a9wk] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    height: calc(1.5em + 0.75rem + 2px); /* match Bootstrap .form-control */
    padding: 0 5px;
    background: var(--pp-field-bg);
    border: 1.5px solid var(--pp-border);
    border-radius: 0.25rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .pp-field:focus-within[b-xdi990a9wk] {
        border-color: var(--pp-accent);
        box-shadow: 0 0 0 4px var(--pp-ring);
    }

.pp-field--error[b-xdi990a9wk] {
    border-color: var(--pp-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-error) 18%, transparent);
}

    .pp-field--error:focus-within[b-xdi990a9wk] {
        border-color: var(--pp-error);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--pp-error) 28%, transparent);
    }

.pp-field--disabled[b-xdi990a9wk] {
    background: var(--pp-chip-bg);
    opacity: .7;
}

/* Country dropdown → flag+code chip. ::deep pierces into the Telerik markup;
   the popup is at root and unaffected (styled via inline templates). */
.pp-field[b-xdi990a9wk]  .pp-ddl {

    height: 30px;
    flex-shrink: 0;
    border: none;
    background: var(--pp-chip-bg);
    border-radius: 0.2rem;
    box-shadow: none;
}

    .pp-field[b-xdi990a9wk]  .pp-ddl:hover {
        background: var(--pp-chip-bg-hover);
    }

    .pp-field[b-xdi990a9wk]  .pp-ddl .k-input-inner {
        padding: 0 2px 0 8px;
        color: var(--pp-text);
        font-weight: 600;
        /* Theme sets position:relative; z-index:1 here. With our borderless chip
           that lifted the value over the dialog — reset it so the trigger stays
           in flow (only the popup should sit above the dialog). */
        z-index: 0;
    }

    .pp-field[b-xdi990a9wk]  .pp-ddl .k-input-button {
        color: var(--pp-muted);
        padding-inline: 2px;
    }

    /* Telerik draws its own focus ring; the pill already shows focus-within */
    .pp-field[b-xdi990a9wk]  .pp-ddl.k-focus {
        box-shadow: none;
    }

.pp-divider[b-xdi990a9wk] {
    width: 1.5px;
    height: 20px;
    background: var(--pp-border);
    flex-shrink: 0;
}

.pp-input[b-xdi990a9wk] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font: inherit;
    font-size: 1rem;
    color: var(--pp-text);
    padding: 0 8px 0 0;
}

    .pp-input:disabled[b-xdi990a9wk] {
        cursor: not-allowed;
    }

.pp-error[b-xdi990a9wk] {
    color: var(--pp-error);
    font-size: .9rem;
    font-weight: 600;
    margin-top: 6px;
}
/* /Shared/PluCard.razor.rz.scp.css */

.plu-card-wrapper[b-j0ge4077dm] {
    /*    display: grid;
    grid-template-columns: 1fr auto;
    height: 140px;
    overflow: hidden;*/
    position: relative;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Same visual as ShopNavbar cart badge — quantity of this PLU already in cart.
   Sits on the top-right corner of the product image. */
.lp-shop-cart-badge[b-j0ge4077dm] {
    position: absolute;
    top: 4px;
    right: 4px;
    /* capped: it sits on the photo, which must stay visible at any font size */
    min-width: min(2rem, 32px);
    height: min(2rem, 32px);
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--lp-primary, #ff7200);
    color: var(--shop-primary-text, #fff);
    font-size: min(1rem, 16px);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
    pointer-events: none;
}

.plu-text[b-j0ge4077dm] {
    position: relative;
    z-index: 1; /* stock badges may overlap the image on narrow screens */
    /* Every box is in rem (16px = the old px values) so the card grows with the
       theme font size instead of the text spilling out of fixed boxes. */
    height: 7.5rem;
    padding-top: 5px;
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .plu-text > div[b-j0ge4077dm] {
        padding: 5px;
    }

    .plu-text > .plu-description[b-j0ge4077dm],
    .plu-text > .plu-ingredients[b-j0ge4077dm] {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.plu-name[b-j0ge4077dm] {
    height: 2.5rem;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.plu-name__text[b-j0ge4077dm] {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.plu-description[b-j0ge4077dm] {
    height: 2.5rem;
    font-size: .75rem;
}

.plu-ingredients[b-j0ge4077dm] {
    height: 1.75rem;
    font-size: .6875rem;
    opacity: 0.85;
}

/* price + stock badge on one line, so no state adds height to the card.
   Overflow is left visible so the badge can paint over the image on narrow screens. */
.plu-meta[b-j0ge4077dm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: visible;
    white-space: nowrap;
    --plu-price-size: .8125rem;
}

.plu-meta .plu-stock-badge[b-j0ge4077dm] {
    flex: none;
}

/* An item that cannot be bought right now (out of stock or outside its schedule)
   reads as unavailable. The card stays clickable so it can still be opened, so
   dim it rather than block it. */
.plu-card-wrapper.stock-out .plu-name[b-j0ge4077dm],
.plu-card-wrapper.stock-out .plu-description[b-j0ge4077dm] {
    opacity: 0.72;
}

/* no line-through: a struck price reads as "old price" next to a discount */
.plu-card-wrapper.stock-out[b-j0ge4077dm]  .plu-price {
    opacity: 0.72;
}

.plu-card-wrapper.stock-out .plu-image[b-j0ge4077dm] {
    filter: grayscale(0.55);
    opacity: 0.7;
}

.plu-image[b-j0ge4077dm] {
    position: relative;
    z-index: 0;
    margin: 10px;
    height: 6.25rem;
    width: 6.25rem;
    flex-shrink: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* The offer this article would earn first — top-right over the image, the outer
   edge of the card. Shares the global --error-color with the product-page badge
   so the two can never drift.

   Wraps to two lines rather than ellipsising on one: the thumbnail is only 100px
   wide, so a single 10px line fits about fourteen characters and most promotion
   names would be cut to nothing. Two lines is the cap — beyond that the pill
   starts swallowing the photo, and the title attribute covers the rest.
   No pointer-events:none, or that title would never appear on hover; the click
   still reaches the card, since it bubbles up to the wrapper's handler. */
.plu-promo[b-j0ge4077dm] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    max-width: calc(100% - 8px);
    padding: .15rem .4rem;
    border-radius: 4px;
    background: var(--shop-promo, #e23434);
    color: var(--shop-promo-text, #fff);
    font-size: min(.625rem, 11px); /* capped: it sits on the photo */
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Cart quantity already occupies the top-right corner — drop below it rather than
   insetting from the right, which on a 100px thumbnail left the pill about seven
   characters wide. Two clamped lines from 2.5rem still clear the image's bottom. */
.plu-promo--with-cart[b-j0ge4077dm] {
    top: calc(min(2rem, 32px) + 8px); /* just below the cart badge */
}



.disabled[b-j0ge4077dm] {
    position: relative;
    z-index: 0;
}

/* Edge info — AvailableAt on the right side of the card (same red as out of stock) */
.overlay-edge[b-j0ge4077dm] {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--error-color);
    pointer-events: none;
    z-index: 1;
}

.plu-stock-badge.schedule-unavailable[b-j0ge4077dm] {
    background-color: color-mix(in srgb, var(--error-color, #dc3545) 15%, transparent);
    border-color: color-mix(in srgb, var(--error-color, #dc3545) 50%, transparent);
    color: var(--error-color, #dc3545);
}
/* /Shared/PosAndChefsAppState.razor.rz.scp.css */
i[b-bx6ee3f9g2] {
    margin-right:5px;
}
/* /Shared/Promotions/OfferPrice.razor.rz.scp.css */
.plu-price[b-nmha14m0hq] {
    display: inline-flex;
    align-items: baseline;
    gap: .4em;
    font-size: var(--plu-price-size, inherit);
    font-weight: var(--plu-price-weight, inherit);
    letter-spacing: var(--plu-price-tracking, inherit);
    /* No color here: a scoped selector outranks a plain utility class, so declaring one
       would beat the Class the caller passes - PluCard sends i-color-info. It inherits. */
}

.plu-price__now[b-nmha14m0hq] {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.plu-price--sale .plu-price__now[b-nmha14m0hq] {
    /* --plu-sale on the retail card; the restaurant card reads the theme directly */
    color: var(--plu-sale, var(--shop-promo, #e23434));
}

/* On a filled Add button the sale red fights the brand fill. Keep the button's
   ink and let the struck list price carry the "this is a saving" signal. */
.plu-price--on-accent.plu-price--sale .plu-price__now[b-nmha14m0hq] {
    color: inherit;
}

.plu-price__old[b-nmha14m0hq] {
    font-size: .85em;
    font-weight: 500;
    letter-spacing: normal;
    text-decoration: line-through;
    opacity: .55;
}
/* /Shared/Promotions/PromotionOfferBadges.razor.rz.scp.css */
/* Offers sit directly under the price: just the names, as tappable chips. The
   detail lives in the drawer, so this stays a compact row however many there are.

   Own the neutrals here the way PromotionOfferDrawer does, rather than reading the
   retail page's --rpd-* set: those exist only under .rpd-page, so on the restaurant
   configure dialog every one of them would resolve to its fallback anyway. Same
   values the retail page uses, so nothing shifts there. */
.poff-offers[b-hti58df36t] {
    margin-top: .9rem;
    --poff-text-3: #8a8a93;
    --poff-primary: var(--lp-primary, var(--shop-primary, #ff7a1a));
}

.poff-offers__heading[b-hti58df36t] {
    margin: 0 0 .45rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--poff-text-3);
}

.poff-offers__list[b-hti58df36t] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.poff-offers__hint[b-hti58df36t] {
    margin: .45rem 0 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--poff-text-3);
}

/* Filled chip in the theme's promotion colour, same as the photo badge.

   Capped and single-line: a long promotion name would otherwise wrap inside the
   pill and leave the row ragged. Nothing is lost — the name is the drawer's
   heading, the title attribute covers hover, and the untruncated text stays in
   the DOM for screen readers. min-width:0 is what lets a flex item shrink below
   its content so the ellipsis can appear at all. */
.poff-offer-badge[b-hti58df36t] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: min(100%, 16rem);
    min-width: 0;
    padding: .3rem .6rem;
    border: none;
    border-radius: 999px;
    background: var(--shop-promo, #e23434);
    color: var(--shop-promo-text, #fff);
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: filter .14s ease;
}

.poff-offer-badge__text[b-hti58df36t] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Expanded detail, inline surfaces only. Sits under the chip row, boxed just enough
   to read as belonging to the chip that opened it rather than to the dialog body. */
.poff-offers__detail[b-hti58df36t] {
    margin-top: .6rem;
    padding: .75rem .85rem;
    border: 1px solid var(--poff-border, color-mix(in srgb, var(--shop-font-color, #18181b) 10%, transparent));
    border-radius: var(--shop-border-radius, 8px);
    background: var(--poff-panel, rgba(17, 17, 19, .03));
}

/* Chevron points down while its detail is open. */
.poff-offer-badge.is-open svg[b-hti58df36t] {
    transform: rotate(90deg);
}

.poff-offer-badge:hover[b-hti58df36t] {
    filter: brightness(1.08);
}

.poff-offer-badge:focus-visible[b-hti58df36t] {
    outline: 2px solid var(--poff-primary);
    outline-offset: 2px;
}

.poff-offer-badge svg[b-hti58df36t] {
    flex-shrink: 0;
    opacity: .8;
    transition: transform .14s ease;
}

@media (prefers-color-scheme: dark) {
    .poff-offers[b-hti58df36t] {
        --poff-text-3: #9c9ca6;
        --poff-border: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 12%, transparent);
        --poff-panel: rgba(255, 255, 255, .04);
    }
}
/* /Shared/Promotions/PromotionOfferDetail.razor.rz.scp.css */
/* Carries its own neutrals rather than inheriting the drawer's: this body is now
   rendered inside the configure dialog too, where no --poff-* set is in scope.
   Same values the drawer defines, so the retail page is unchanged. */
.poff-detail[b-bh3e61rqlh] {
    --poff-text: var(--shop-font-color, #18181b);
    --poff-text-2: #52525b;
    --poff-text-3: #8a8a93;
}

/* No extra gap above whichever block happens to come first - the "how it works"
   line is optional, and without this the description would push itself down. */
.poff-detail > :first-child[b-bh3e61rqlh] {
    margin-top: 0;
}

.poff-offer__title[b-bh3e61rqlh] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--poff-text);
}

.poff-offer__desc[b-bh3e61rqlh] {
    margin: .7rem 0 0;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--poff-text-2);
}

.poff-offer__list[b-bh3e61rqlh] {
    margin: .7rem 0 0;
    padding-left: 1.15rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--poff-text-2);
}

.poff-offer__list li + li[b-bh3e61rqlh] {
    margin-top: .2rem;
}

/* Standing terms, deliberately not part of the checklist above: they hold whether
   or not the cart satisfies them, so they are stated rather than presented as
   things left to do.

   Warning colour rather than a muted grey — these are the conditions that stop an
   offer applying, so they need to read as caveats. --warning-color is global and
   already follows both the theme and the tenant (--shop-warning), so unlike the
   --poff-* neutrals it needs no light/dark copy of its own. */
.poff-offer__rules[b-bh3e61rqlh] {
    margin: .85rem 0 0;
    padding: .7rem 0 0 1.15rem;
    border-top: 1px dashed color-mix(in srgb, var(--warning-color, #C05700) 35%, transparent);
    list-style: none;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--warning-color, #C05700);
}

.poff-offer__rules li[b-bh3e61rqlh] {
    position: relative;
}

.poff-offer__rules li[b-bh3e61rqlh]::before {
    content: "•";
    position: absolute;
    left: -.85rem;
}

.poff-offer__rules li + li[b-bh3e61rqlh] {
    margin-top: .2rem;
}

.poff-offer__ends[b-bh3e61rqlh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .65rem;
    margin: .9rem 0 0;
    font-size: .82rem;
    color: var(--poff-text-3);
}

.poff-offer__ends svg[b-bh3e61rqlh] {
    flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
    .poff-detail[b-bh3e61rqlh] {
        --poff-text: var(--shop-font-color, #f1f1f1);
        --poff-text-2: #b4b4bd;
        --poff-text-3: #9c9ca6;
    }
}
/* /Shared/Promotions/PromotionOfferDrawer.razor.rz.scp.css */
/* Drawer chrome only - the offer body itself is PromotionOfferDetail, which carries
   its own type styles so the configure dialog can render it inline. */

/* Geometry mirrors the option drawer in ProductConfigurator so the shop has one
   drawer language. Rendered only while open, so no transform transition on
   entry — it mounts already in place. */
.poff-scrim[b-j2kdg083u5] {
    position: fixed;
    inset: 0;
    z-index: var(--poff-z, 2100);
    background: rgba(0, 0, 0, .45);
}

.poff-drawer[b-j2kdg083u5] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    z-index: calc(var(--poff-z, 2100) + 1);
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 32px -16px rgba(0, 0, 0, .4);

    --poff-surface: var(--shop-surface, #ffffff);
    --poff-muted: #f5f5f7;
    --poff-border: color-mix(in srgb, var(--shop-font-color, #18181b) 10%, transparent);
    --poff-text: var(--shop-font-color, #18181b);
    --poff-text-2: #52525b;
    --poff-text-3: #8a8a93;
    --poff-r-sm: var(--shop-border-radius, 8px);
    --poff-primary: var(--lp-primary, var(--shop-primary, #ff7a1a));

    background: var(--poff-surface);
    color: var(--poff-text);
}

.poff-drawer__head[b-j2kdg083u5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--poff-border);
    flex-shrink: 0;
}

.poff-drawer__head h3[b-j2kdg083u5] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
}

.poff-drawer__close[b-j2kdg083u5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: var(--poff-muted);
    color: inherit;
    cursor: pointer;
}

.poff-drawer__body[b-j2kdg083u5] {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.15rem;
}

.poff-drawer__foot[b-j2kdg083u5] {
    padding: .9rem 1.15rem;
    border-top: 1px solid var(--poff-border);
    flex-shrink: 0;
}

.poff-drawer__done[b-j2kdg083u5] {
    width: 100%;
    padding: .85rem 1rem;
    border: none;
    border-radius: var(--poff-r-sm);
    background: var(--poff-primary);
    color: var(--shop-primary-text, #fff);
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .14s ease;
}

.poff-drawer__done:hover[b-j2kdg083u5] {
    filter: brightness(1.05);
}

.poff-drawer__done:focus-visible[b-j2kdg083u5] {
    outline: 2px solid var(--poff-text);
    outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
    .poff-drawer[b-j2kdg083u5] {
        --poff-surface: var(--shop-surface, #1e1e1e);
        --poff-muted: #262629;
        --poff-border: color-mix(in srgb, var(--shop-font-color, #f1f1f1) 12%, transparent);
        --poff-text: var(--shop-font-color, #f1f1f1);
        --poff-text-2: #b4b4bd;
        --poff-text-3: #9c9ca6;
    }
}
/* /Shared/PurchaseHistoryBranchofficeCard.razor.rz.scp.css */
img[b-fa91gmm2i3] {
    width: 90px;
    height: 90px;
}

label[b-fa91gmm2i3] {
    width: 100%;
    margin-bottom: 0px;
}

.wrapper[b-fa91gmm2i3] {
    display: flex;
}

.labels[b-fa91gmm2i3] {
    display: flex;
    flex-direction: column;
    padding: 5px;
}

.name[b-fa91gmm2i3] {
    font-size: 1.2rem;
}
/* /Shared/ReceiptCard.razor.rz.scp.css */
img[b-af4rp5x1wz] {
    width: 90px;
    height: 90px;
}

label[b-af4rp5x1wz] {
    width: 100%;
    margin-bottom: 0px;
}

.wrapper[b-af4rp5x1wz] {
    display: flex;
}

.labels[b-af4rp5x1wz] {
    display: flex;
    flex-direction: column;
    padding: 5px;
}

.name[b-af4rp5x1wz] {
    font-size: 1.2rem;
}
/* /Shared/RestaurantCard.razor.rz.scp.css */
.wrapper[b-2t82q4oqlt] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* make sure the image is inside of the rounded border*/
}

.details-wrapper[b-2t82q4oqlt] {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.title[b-2t82q4oqlt] {
    font-size: 1.2rem;
    display: flex;
    font-weight: 500;
}

    .title i[b-2t82q4oqlt] {
        padding-left: 5px;
    }
/* /Shared/RestaurantDetails.razor.rz.scp.css */
.restaurant-details-wrapper[b-w2yyjblhl8] {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: .75rem !important;
}

    .restaurant-details-wrapper div[b-w2yyjblhl8] {
        padding: 2px;
        text-align: center;
    }

.restaurant-details-wrapper i[b-w2yyjblhl8] {
  padding-right: 5px;
}
/* /Shared/RestaurantInfoHeader.razor.rz.scp.css */
.restaurant-info-header-name[b-sp8h1q4kud] {
    text-align: center;
    margin-top: 5px;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--shop-font-color, inherit);
    font-family: var(--shop-font-family, inherit);
}

    .restaurant-info-header-name i[b-sp8h1q4kud] {
        padding-left: 5px;
        padding-right: 5px;
        cursor: pointer;
        color: var(--shop-primary, var(--main-color, inherit));
    }

.restaurant-info-header-details[b-sp8h1q4kud] {
    display: flex;
}

.restaurant-info-header-closed[b-sp8h1q4kud] {
    padding: 5px;
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
}

.restaurant-info-header-details[b-sp8h1q4kud]  div {
    width: 100%;
}
/* /Shared/RestaurantLogo.razor.rz.scp.css */
.logo-wrapper[b-r8pjjo325k] {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 13rem;
    width: 100%;
}
/* /Shared/SegmentSwitch.razor.rz.scp.css */
/* SegmentSwitch — scoped styling.
   --seg-* tokens fall back to the cart/shop/login theme tokens (inherited from
   an ancestor such as .cd or .login-mode) and finally to sensible defaults, so
   the switch is themable without coupling it to any single host. */

.seg[b-xw9emdhfus] {
  --seg-bg: var(--cd-muted, var(--login-mode-field-bg, var(--shop-bg, #e1e3e4)));
  --seg-border: var(--cd-border, transparent);
  --seg-indicator: var(--cd-surface, var(--login-mode-switch-indicator, var(--shop-surface, #ffffff)));
  --seg-text: var(--cd-ink-2, var(--login-mode-text, #586062));
  --seg-text-active: var(--cd-ink, var(--login-mode-text-hover, var(--shop-font-color, #182535)));
  --seg-focus: var(--cd-primary, var(--login-mode-text-hover, var(--lp-primary, #182535)));
  --seg-primary: var(--cd-primary, var(--login-mode-text-hover, var(--lp-primary, #0d6efd)));

  position: relative;
  display: flex;
  /* Stretch, not centre: an option that needs two lines grows the switch with
     it. align-items:center + a fixed height let the text spill out of the pill
     and over whatever sits below (long labels like "Hämta upp själv"). */
  align-items: stretch;
  min-height: 46px;
  padding: 4px;
  background-color: var(--seg-bg);
  border: 1px solid var(--seg-border);
  border-radius: 12px;
  overflow: hidden;
}

.seg__indicator[b-xw9emdhfus] {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  box-sizing: border-box;
  background-color: var(--seg-indicator);
  border-radius: var(--shop-border-radius, 8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
}

.seg--second .seg__indicator[b-xw9emdhfus] { transform: translateX(100%); }

.seg__option[b-xw9emdhfus] {
  position: relative;
  z-index: 1;
  flex: 1;
  /* Content-based min-width would keep both options at their natural width and
     overflow the switch. Let them share the space; the label wraps or the font
     steps down instead. */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.25rem, 1.4vw, .4rem);
  padding: .3rem .55rem;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: clamp(.75rem, 2.7vw, .9rem);
  line-height: 1.2;
  text-align: center;
  color: var(--seg-text);
  cursor: pointer;
  transition: color .2s ease;
}

.seg__label[b-xw9emdhfus] { min-width: 0; overflow-wrap: anywhere; }

.seg__icon[b-xw9emdhfus] { display: inline-flex; flex-shrink: 0; }
.seg__icon svg[b-xw9emdhfus] { display: block; width: 18px; height: 18px; }

.seg__option--active[b-xw9emdhfus] { color: var(--seg-text-active); }
.seg__option:disabled[b-xw9emdhfus],
.seg__option[aria-disabled="true"][b-xw9emdhfus] {
  opacity: .4;
  cursor: not-allowed;
}
.seg__option:focus[b-xw9emdhfus] { outline: none; }
.seg__option:focus-visible[b-xw9emdhfus] {
  outline: 2px solid var(--seg-focus);
  outline-offset: 2px;
}

/* Prominent variant — active option reads as strongly selected using the host
   theme's primary. Light: a tinted/outlined primary pill with primary text +
   icon. Dark (prefers-color-scheme): a solid primary fill with light text. */
.seg--prominent .seg__indicator[b-xw9emdhfus] {
  background-color: color-mix(in srgb, var(--seg-primary) 14%, var(--seg-indicator));
  border: 1.5px solid color-mix(in srgb, var(--seg-primary) 55%, transparent);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--seg-primary) 22%, transparent);
}
.seg--prominent .seg__option--active[b-xw9emdhfus] { color: var(--seg-primary); }

@media (prefers-color-scheme: dark) {
  .seg--prominent .seg__indicator[b-xw9emdhfus] {
    background-color: var(--seg-primary);
    border-color: transparent;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--seg-primary) 45%, transparent);
  }
  .seg--prominent .seg__option--active[b-xw9emdhfus] { color: #fff; }
}