@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/Landing.razor.rz.scp.css */
.navigation-header[b-dys7mgs05b] {
    padding: 10px;
    display: flex;
    font-size: 1.5rem;
}

.all-countries[b-dys7mgs05b] {
    margin-left: auto;
}

.country[b-dys7mgs05b], .city[b-dys7mgs05b] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0px;
    overflow: hidden;
}

    .country > span[b-dys7mgs05b], .city > span[b-dys7mgs05b] {
        margin: auto;
        font-size: 1.2rem;
        padding: 10px;
    }

.flag[b-dys7mgs05b], .city-image[b-dys7mgs05b] {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.countries[b-dys7mgs05b], .cities[b-dys7mgs05b] {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

    .countries > div[b-dys7mgs05b], .cities > div[b-dys7mgs05b] {
        aspect-ratio: 1;
    }

@media (min-width: 600px) {
    .countries[b-dys7mgs05b], .cities[b-dys7mgs05b] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}
/* /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;
}

.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 rgba(17,17,19,.16);
        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;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

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

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

    .plu-cards[b-f5xl6g0ouh] {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
    }

    .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 rgba(17, 17, 19, .10);
    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 rgba(17,17,19,.16);
    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 rgba(17,17,19,.16);
    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: #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: rgba(255, 255, 255, .22);
        background: var(--shop-surface, #1e1e1e);
    }

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

    .so-skel-card[b-f5xl6g0ouh] {
        background: var(--shop-surface, #1e1e1e);
        border-color: rgba(255, 255, 255, .12);
    }

    .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: #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: #18181b; /* ink sits on the brand button — constant across themes */
    --cd-surface: var(--shop-surface, #ffffff);
    --cd-muted: var(--shop-bg, #f5f5f7);
    --cd-muted-2: #efeff2;
    --cd-border: rgba(17, 17, 19, .10);
    --cd-border-strong: rgba(17, 17, 19, .16);
    --cd-ink: var(--shop-font-color, #18181b);
    --cd-ink-2: var(--shop-muted, #52525b);
    --cd-ink-3: #8a8a93;
    --cd-sale: #e23434;
    --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, and the literal-only tokens (borders/muted-2/sale/success) get dark
   values so light colours no longer leak onto the dark surface. */
@media (prefers-color-scheme: dark) {
  .cd[b-ylmwflrok9] {
    --cd-surface: var(--shop-surface, #1e1e1e);
    --cd-muted: var(--shop-bg, #262629);
    --cd-muted-2: #303036;
    --cd-border: rgba(255, 255, 255, .12);
    --cd-border-strong: rgba(255, 255, 255, .22);
    --cd-ink: var(--shop-font-color, #f1f1f1);
    --cd-ink-2: var(--shop-muted, #b4b4bd);
    --cd-ink-3: #9c9ca6;
    --cd-sale: #ff5c5c;
    --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;
}

/* ── 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-sale);
  border-color: var(--cd-sale);
  background: color-mix(in srgb, var(--cd-sale) 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-sale) 12%, transparent);
  color: var(--cd-sale);
  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);
}
.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: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-sale) 10%, transparent);
  color: var(--cd-sale);
  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: #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: rgba(255, 255, 255, .10);
        --cat-border-strong: rgba(255, 255, 255, .18);
        --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; MainLayout's NavMenu is hidden.
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

.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-sale) 40%, transparent);
    background: color-mix(in srgb, var(--c-sale) 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, rgba(0, 0, 0, .12));
    --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, rgba(0,0,0,.12));
}

.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: #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: #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/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] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--lang-border, rgba(0, 0, 0, .12));
    background: transparent;
    color: var(--lang-ink, inherit);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    gap: 1px;
    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: .65rem;
    opacity: .7;
}

.lang-picker__code[b-14df4mrsj5] {
    font-size: .6rem;
    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, rgba(0, 0, 0, .1));
    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, rgba(255, 255, 255, .16));
    }

        .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, rgba(255, 255, 255, .14));
        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/PriceRangeInput.razor.rz.scp.css */
.pri-range[b-sqrg9fc3ng] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

    .pri-range__inputs label[b-sqrg9fc3ng] {
        flex: 1;
        font-size: .76rem;
        font-weight: 600;
        color: var(--shop-font-color, #52525b);
        opacity: .7;
        display: flex;
        flex-direction: column;
        gap: .3rem;
    }

.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] {
    padding-bottom: .8rem;
    color: var(--shop-font-color, #18181b);
    opacity: .4;
}

.pri-range__slider[b-sqrg9fc3ng] {
    width: 100%;
    accent-color: var(--lp-primary, #ff7200);
}

/* ── 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
   accent-color is brand-coloured and stays put. */
@media (prefers-color-scheme: dark) {
    .pri-range__inputs label[b-sqrg9fc3ng] {
        color: var(--shop-font-color, #b4b4bd);
    }

    .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-surface, #ffffff);
    --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);
    /* Semantic sale/discount red — stays red across themes (matches the
       hardcoded --c-sale in Checkout.razor.css); no theme token maps to it. */
    --pd-sale: #e23434;
    --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-sale);
    background: color-mix(in srgb, var(--pd-sale) 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-sale);
    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 > svg[b-rrplitbb5m] {
        flex-shrink: 0;
    }

.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-sale, #e23434) 40%, transparent);
    background: color-mix(in srgb, var(--pd-sale, #e23434) 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-sale: #e23434;
}

.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-sale);
    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-surface, #ffffff);
}

/* ── 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-sale: #ff5c5c;
    }

    .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: #18181b;
    --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-muted: #f5f5f7;
    --pf-muted-2: #efeff2;
    --pf-border: rgba(17, 17, 19, .10);
    --pf-border-strong: rgba(17, 17, 19, .16);
    --pf-text: var(--shop-font-color, #18181b);
    --pf-text-2: #52525b;
    --pf-text-3: #8a8a93;
    --pf-text-soft: #8a8a93;
    --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;
}


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

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

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

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

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

/* 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) {
    .pf[b-31ahw7d01j] {
        --pf-surface: var(--shop-surface, #1e1e1e);
        --pf-muted: #262629;
        --pf-muted-2: #303036;
        --pf-border: rgba(255, 255, 255, .12);
        --pf-border-strong: rgba(255, 255, 255, .22);
        --pf-text: var(--shop-font-color, #f1f1f1);
        --pf-text-2: #b4b4bd;
        --pf-text-3: #9c9ca6;
        --pf-text-soft: #9c9ca6;
    }

    .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);
    }
}
/* /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);
    /* Semantic constants — stay fixed across themes (gold star, sale red). */
    --c-star: #f5a623;
    --plu-sale: #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;
    display: flex;
    flex-direction: column;
    background: var(--plu-surface);
    border: 1px solid 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(--plu-border-strong);
    }

/* ── Media ──────────────────────────────────────────────────────────────── */
.plu__media[b-dzgcyq279s] {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--plu-muted);
    overflow: hidden;
    display: block;
}

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

.plu:hover .plu__media 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] {
    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: #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__media 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__media 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(--error-color, #dc3545);
    color: #fff;
    font-size: .7rem;
    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(--plu-sale) 12%, transparent);
    border-color: color-mix(in srgb, var(--plu-sale) 40%, transparent);
    color: var(--plu-sale);
}

/* 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: #ff5c5c;
        --plu-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
        --plu-shadow-card: 0 12px 28px -14px rgba(0, 0, 0, .7);
    }
}
/* /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: rgba(17, 17, 19, .10);
    --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 top-left, buy box spans the right, info under the gallery. */
.rpd-hero[b-pdz7x1pr61] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas:
        "gallery buy"
        "info    buy";
    grid-template-rows: auto 1fr;
    gap: 2.5rem;
    align-items: start;
}

.rpd-gallery[b-pdz7x1pr61] { grid-area: gallery; }
.rpd-buy[b-pdz7x1pr61] { grid-area: buy; }
.rpd-info[b-pdz7x1pr61] { grid-area: info; }

/* ── 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(--error-color, #dc3545);
    color: #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;
}

/* ── Information (always visible) ──────────────────────────────────────── */
.rpd-info[b-pdz7x1pr61] {
    min-width: 0;
    margin-top: .5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--rpd-border);
    border-left: 3px solid var(--rpd-primary);
    border-radius: var(--rpd-r-sm);
    background: color-mix(in srgb, var(--rpd-primary) 6%, var(--rpd-surface));
}

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

.rpd-info__body[b-pdz7x1pr61] {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--rpd-text-2);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
/* Single column: gallery, then buy box, then info last (after the Add button). */
@media (max-width: 860px) {
    .rpd-hero[b-pdz7x1pr61] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "gallery"
            "buy"
            "info";
        grid-template-rows: none;
        gap: 1.5rem;
    }
}

/* ── 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: rgba(255, 255, 255, .12);
        --rpd-text: var(--shop-font-color, #f1f1f1);
        --rpd-text-2: #b4b4bd;
        --rpd-text-3: #9c9ca6;
    }
}
/* /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;
}

/* ── 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 rgba(0, 0, 0, .12);
    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 rgba(0, 0, 0, .12);
    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: #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: 16px;
}

    .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 rgba(0, 0, 0, .12);
    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: #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 rgba(0, 0, 0, .12);
    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: #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 rgba(0, 0, 0, .12);
    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: rgba(255, 255, 255, .12);
    }

    .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: rgba(255, 255, 255, .12);
    }

    .lp-side-menu-account[b-9nke172zl9] {
        border-color: rgba(255, 255, 255, .16);
    }

    .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/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/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: #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: #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;
}

.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: 16px;
    /* 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(--error-color, #dc3545);
    color: #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/Layouts/MainLayout.razor.rz.scp.css */
.header[b-odjtekd14e] {
    /*position: fixed;*/
    /*top: 0px;*/
    /*left: 0px;*/
    /*right: 0px;*/
    /*flex-shrink: 0;*/
    /*display: flex;*/
    /*align-items: center;*/
}

.main[b-odjtekd14e] {
    /*    padding-top: 40px;
    height: 100%;
*/
}

.page[b-odjtekd14e] {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures footer sticks to the bottom */
}

.header[b-odjtekd14e] {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    padding: 10px;
    height: 52px;
    z-index: 2;
}

.content[b-odjtekd14e] {
    flex-grow: 1; /* Expands to fill available space */
    min-width: 0; /* let checkout (and other pages) shrink below min-content on phones */
    /* Content styles */
}

.footer[b-odjtekd14e] {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    bottom: 0;
    height: 74px;
    /*z-index: 1;*/
}

.page > div[b-odjtekd14e] {
    width: 100%;
    /*max-width: 1280px;*/
    /*margin: auto;*/
}
/* /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));
    }
}
/* /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/NavMenu.razor.rz.scp.css */
.navmenu-container[b-bfv6sie6fi] {
    display: flex;
}

.menu-button[b-bfv6sie6fi] {
    line-height: 1;
    font-size: x-large;
    margin-right: 10px;
}

    .menu-button:hover[b-bfv6sie6fi] {
        cursor: pointer;
    }

.inzzii-brand[b-bfv6sie6fi] {
    font-size: large;
    text-decoration: none;
    /*margin-left: 10px;*/
}

.initials-button[b-bfv6sie6fi]  button {
    height: 32px;
    width: 32px;
    border-radius: 16px;
}

/* Logged-out auth controls: text buttons on desktop, user-circle icon on mobile */
.nav-auth-desktop[b-bfv6sie6fi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-auth-mobile[b-bfv6sie6fi] {
    display: none;
}

@media (max-width: 576px) {
    .nav-auth-desktop[b-bfv6sie6fi] {
        display: none;
    }

    .nav-auth-mobile[b-bfv6sie6fi] {
        display: inline-block;
    }
}
/* /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/OrderList.razor.rz.scp.css */
.toggle-button-container[b-cmqy2e8d1h] {
    display: flex;
    padding-bottom: 10px;
    justify-content: center;
    align-items: center;
    padding-top: 3rem;
}

    .toggle-button-container[b-cmqy2e8d1h] >  button {
        /*margin: 5px;*/
    }

.checkout-button[b-cmqy2e8d1h] {
    width: 100%;
    /*display: flex;*/
    /*justify-content: end;*/
}

    .checkout-button[b-cmqy2e8d1h]  button > span {
        width: 100%;
    }

    .checkout-button[b-cmqy2e8d1h]  button {
        width: 100%;
        padding-block: 0.6rem !important; /* make footer buttons higher */
    }
/* /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: rgba(255, 255, 255, .16);
        --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;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--lp-primary, #ff7200);
    color: #fff;
    font-size: 1rem;
    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 */
    height: 120px;
    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: 40px;
    font-size: 20px;
    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: 40px;
    font-size: 12px;
}

.plu-ingredients[b-j0ge4077dm] {
    height: 28px;
    font-size: 11px;
    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: 13px;
}

.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: 100px;
    width: 100px;
    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(--error-color, #dc3545);
    color: #fff;
    font-size: 10px;
    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: 2.5rem;
}



.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: 12px;
    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] {
    color: var(--plu-sale, var(--error-color, #dc3545));
}

/* 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 shared --error-color, 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(--error-color, #dc3545);
    color: #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, rgba(17, 17, 19, .10));
    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: rgba(255, 255, 255, .12);
        --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: rgba(17, 17, 19, .10);
    --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: #18181b;
    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: rgba(255, 255, 255, .12);
        --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: 12px !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; }
}