/* /Areas/Admin/Components/Categories/CategoryTreeNode.razor.rz.scp.css */
.hide-tree-arrow[b-u1qqf1z8kh]  .mud-treeview-item-arrow {
    visibility: hidden;
    pointer-events: none; /* Prevents clicking the invisible space */
}
/* /Areas/Admin/Components/Categories/CategoryVisibilityToggle.razor.rz.scp.css */
/* Idle means plain visible: the button exists, so it can be hovered and focused, but shows only
   then — the owner wants the slot empty until the pointer reaches it. */
.visibility-toggle--idle[b-24xja15t1t] {
    opacity: 0;
    transition: opacity 120ms ease-in-out;
}

.visibility-toggle--idle:hover[b-24xja15t1t],
.visibility-toggle--idle:focus-within[b-24xja15t1t] {
    opacity: 1;
}
/* /Areas/Admin/Components/LanguageMenu.razor.rz.scp.css */
.language-links[b-twfa9hxldg] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
}

.language-links a[b-twfa9hxldg] {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.language-links a:hover[b-twfa9hxldg] {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

.language-links-sep[b-twfa9hxldg] {
    color: rgba(255, 255, 255, 0.25);
}
/* /Areas/Admin/Components/Mappings/MappingSearchPanel.razor.rz.scp.css */
/* The candidates' list, scrolling inside the dialog. On a phone the dialog is too narrow for five columns: the EAN, size
   and pack count columns give way to one line of size and pack count under the name, and the list takes the height the
   dialog has rather than a fixed 360px. Plain classes on our own cells, as MudSimpleTable has no responsive columns. */
.mapping-results[b-6r1l5h89s8] {
    max-height: 360px;
    overflow-y: auto;
}

.mapping-detail-inline[b-6r1l5h89s8] {
    display: none;
}

@media (max-width: 600px) {
    .mapping-results[b-6r1l5h89s8] {
        max-height: calc(100dvh - 320px);
    }

    .mapping-detail[b-6r1l5h89s8] {
        display: none;
    }

    .mapping-detail-inline[b-6r1l5h89s8] {
        display: block;
    }
}
/* /Areas/Admin/Components/Reading/AttentionCounts.razor.rz.scp.css */
/* The marks are links laid out as a number beside its icon; a hover tint shows they can be clicked, which no MudBlazor
   prop gives a plain link. */
.marks[b-kef7crbs3t] {
    display: inline-flex;
    gap: 4px;
    white-space: nowrap;
}

.mark[b-kef7crbs3t] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.mark:hover[b-kef7crbs3t], .mark:focus-visible[b-kef7crbs3t] {
    background: rgba(107, 143, 212, 0.15);
}

.mark.suspicious[b-kef7crbs3t] {
    color: var(--reading-suspicious);
}

.mark.empty[b-kef7crbs3t]  .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.ok[b-kef7crbs3t] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--mud-palette-success);
    white-space: nowrap;
}
/* /Areas/Admin/Components/Reading/AttentionRows.razor.rz.scp.css */
/* Each row is one link across the card, its parts laid out in a line, with a hover that shows it leads somewhere: no
   MudBlazor component draws a whole row as a link. */
.attention[b-c6u62ekgyu] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.attention:hover[b-c6u62ekgyu], .attention:focus-visible[b-c6u62ekgyu] {
    border-color: var(--mud-palette-primary);
    background: rgba(107, 143, 212, 0.10);
}

.suspicious[b-c6u62ekgyu]  .mud-icon-root, .suspicious .count[b-c6u62ekgyu] {
    color: var(--reading-suspicious);
}

.empty[b-c6u62ekgyu]  .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.count[b-c6u62ekgyu] {
    min-width: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.what[b-c6u62ekgyu] {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.title[b-c6u62ekgyu] {
    font-size: 0.875rem;
}

.why[b-c6u62ekgyu] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.go[b-c6u62ekgyu] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--mud-palette-primary);
    white-space: nowrap;
}

.go[b-c6u62ekgyu]  .mud-icon-root {
    color: var(--mud-palette-primary);
}

.clear[b-c6u62ekgyu] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.875rem;
    color: var(--mud-palette-success);
}
/* /Areas/Admin/Components/Reading/AttentionStepper.razor.rz.scp.css */
/* A label with its count and place, and two small arrow buttons joined to it: plain elements, as no MudBlazor
   component joins a label and two buttons into one bordered control. */
.stepper[b-oxuqlqmpln] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    font-size: 0.8125rem;
    overflow: hidden;
}

.step-label[b-oxuqlqmpln] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-variant-numeric: tabular-nums;
}

.stepper.suspicious .step-label[b-oxuqlqmpln] {
    color: var(--reading-suspicious);
}

.stepper.empty .step-label[b-oxuqlqmpln]  .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.stepper.none .step-label[b-oxuqlqmpln] {
    color: var(--mud-palette-text-secondary);
}

.step[b-oxuqlqmpln] {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border: none;
    border-left: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.step:hover:not(:disabled)[b-oxuqlqmpln], .step:focus-visible[b-oxuqlqmpln] {
    background: rgba(107, 143, 212, 0.15);
    outline: none;
}

.step:disabled[b-oxuqlqmpln] {
    color: var(--mud-palette-text-disabled);
    cursor: default;
}

/* The arrows widen a little on a touch screen, where 6px either side of the icon is hard to hit. */
@media (pointer: coarse) {
    .step[b-oxuqlqmpln] {
        min-width: 32px;
        justify-content: center;
    }
}
/* /Areas/Admin/Components/Reading/PageMap.razor.rz.scp.css */
/* The leaflet in small: a cell for each page, the one shown filled, a dot under a page with
   a suspicious offer, a dashed outline for one without an offer. Plain buttons in a grid, as no MudBlazor component
   draws a strip of this kind. A cell is at least 7px wide, so a long leaflet wraps into rows rather than thinning its
   cells below a dot and a click; a short one stretches its cells across the row. */
.page-map[b-nx9yf72r9m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7px, 1fr));
    gap: 2px;
    margin: 4px 6px 6px;
}

.map-cell[b-nx9yf72r9m] {
    position: relative;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: rgba(148, 163, 184, 0.16);
    cursor: pointer;
}

.map-cell:hover[b-nx9yf72r9m], .map-cell:focus-visible[b-nx9yf72r9m] {
    background: rgba(107, 143, 212, 0.45);
    outline: none;
}

.map-cell.empty[b-nx9yf72r9m] {
    background: transparent;
    outline: 1px dashed var(--mud-palette-text-secondary);
    outline-offset: -1px;
}

.map-cell.suspicious[b-nx9yf72r9m]::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--reading-suspicious);
}

.map-cell.current[b-nx9yf72r9m] {
    background: var(--mud-palette-primary);
    outline: none;
}

/* A finger needs more than 7×16px: on a touch screen the cells grow to a target it can hit, wrapping into more rows. */
@media (pointer: coarse) {
    .page-map[b-nx9yf72r9m] {
        grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
        gap: 4px;
    }

    .map-cell[b-nx9yf72r9m] {
        height: 20px;
    }

    .map-cell.suspicious[b-nx9yf72r9m]::after {
        bottom: 3px;
        width: 6px;
        height: 6px;
        margin-left: -3px;
    }
}
/* /Areas/Admin/Components/Reading/ReadLeafletTable.razor.rz.scp.css */
/* Numbers line up on the right; a class because the cells are plain table cells of this component. */
.num[b-8sfsjuvm04] {
    text-align: right;
    white-space: nowrap;
}
/* /Areas/Admin/Components/StatCard.razor.rz.scp.css */
@keyframes fadeSlideUp-b-yqmus6g6am {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* stat-link / stat-card must be on plain HTML elements rendered by this component
   so Blazor CSS isolation adds the b-xxxx scoping attribute. */

.stat-link[b-yqmus6g6am] {
    display: block;
    text-decoration: none;
    color: inherit;
}

.stat-card[b-yqmus6g6am] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    transition: box-shadow 0.18s ease, border-color 0.18s ease,
    border-top-color 0.18s ease, transform 0.18s ease;
}

/* ── Primary (hero numbers) ─────────────────────────────────────────────────── */

.stat-card--primary[b-yqmus6g6am] {
    border-top: 3px solid transparent;
    animation: fadeSlideUp-b-yqmus6g6am 0.35s ease both;
}

.stat-link:hover .stat-card--primary[b-yqmus6g6am] {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-top-color: var(--accent);
}

/* ── Secondary (supporting metrics) ─────────────────────────────────────────── */

.stat-card--secondary[b-yqmus6g6am] {
    animation: fadeSlideUp-b-yqmus6g6am 0.35s ease both;
}

.stat-link:hover .stat-card--secondary[b-yqmus6g6am] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: var(--mud-palette-action-disabled);
}

/* ── Alert (failed jobs, data quality issues) ────────────────────────────────── */

.stat-card--alert[b-yqmus6g6am] {
    border-color: color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 3%, transparent);
}

.stat-link:hover .stat-card--alert[b-yqmus6g6am] {
    border-color: color-mix(in srgb, var(--mud-palette-error) 50%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
}

/* ── Icon circle ─────────────────────────────────────────────────────────────── */

/* Sized icon container — no MudBlazor equivalent; background set via inline style */
.stat-icon-wrap[b-yqmus6g6am] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    flex-shrink: 0;
}
/* /Areas/Admin/Pages/Account/Login.razor.rz.scp.css */
.login-page[b-w9wmx1ja1m] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e2640 45%, #1a3154 100%);
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

.login-page[b-w9wmx1ja1m]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--mud-palette-info) 8%, transparent) 0%, transparent 50%);
    pointer-events: none;
}

.login-card[b-w9wmx1ja1m] {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    color: rgba(255, 255, 255, 0.9);
    animation: card-in-b-w9wmx1ja1m 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 1;
}

@keyframes card-in-b-w9wmx1ja1m {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-brand[b-w9wmx1ja1m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.75rem 2rem 0;
}

.brand-mark[b-w9wmx1ja1m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-info));
    border-radius: 10px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.login-body[b-w9wmx1ja1m] {
    padding: 1.5rem 2rem 2rem;
}

.login-form[b-w9wmx1ja1m]  form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.field-group[b-w9wmx1ja1m] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field-label[b-w9wmx1ja1m] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.01em;
}

.login-form[b-w9wmx1ja1m]  .field-input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.6875rem 0.875rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.login-form[b-w9wmx1ja1m]  .field-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.login-form[b-w9wmx1ja1m]  .field-input:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.login-form[b-w9wmx1ja1m]  .field-input:focus {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.remember-label[b-w9wmx1ja1m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    user-select: none;
}

/* InputCheckbox is a Blazor component — class= doesn't get b-xxxx; use ::deep from scoped parent */
.remember-label[b-w9wmx1ja1m]  .remember-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
    flex-shrink: 0;
}
/* /Areas/Admin/Pages/Dashboard.razor.rz.scp.css */
/* Left-border accent on section headings — no MudBlazor equivalent */
.section-header[b-dghwvlijhw] {
    padding-left: 10px;
    border-left: 3px solid var(--mud-palette-primary);
}

/* .table-wrap, which wraps the tables below, lives in app.css: it is shared with
   the search index page, and its companion rule clipping the table's corners can
   never be scoped anyway (CSS isolation does not reach a child component's own
   rendered markup). */
/* /Areas/Admin/Pages/Leaflet/LeafletValidate.razor.rz.scp.css */
/* ── Full-viewport flex layout ──────────────────────────────────────────────
   validate-fill fills all remaining height in the MudMainContent flex column
   (established by app.css on .mud-main-content / .mud-main-content > .mud-container).
   No viewport-height magic numbers needed. */

.validate-fill[b-7xgjp8v1nx] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Named grid areas (not DOM order) drive both the desktop layout — header
   spans only the left column's width, so the right column's row height isn't
   reduced by it — and the mobile reorder below, with no markup duplication. */
.validate-split[b-7xgjp8v1nx] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(320px, 38%) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header right"
        "left   right";
    gap: 16px;
    overflow: hidden;
}

.validate-header[b-7xgjp8v1nx] {
    grid-area: header;
}

/* Left column: header shrinks to content, products panel fills the rest */
.validate-left[b-7xgjp8v1nx] {
    grid-area: left;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* PageHeader + page nav card — never grow, always shrink to natural height */
.validate-left-top[b-7xgjp8v1nx] {
    flex-shrink: 0;
}

.products-panel[b-7xgjp8v1nx] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px; /* compensate for scrollbar width */
    padding-bottom: 8px;
}

/* Right column: image fills the full column height */
.validate-right[b-7xgjp8v1nx] {
    grid-area: right;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* container-type: size makes this element a CSS containment context.
   Children can then use cqh (container-query height) units to reference
   this element's definite flex height, breaking the circular dependency
   that prevents max-height: 100% from resolving on the image container. */
.page-image-sticky[b-7xgjp8v1nx] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    container-type: size;
}

/* Shrink-to-fit wrapper so bbox % overlays align with the rendered image.
   line-height: 0 removes the inline-block descender gap below <img>. */
.page-image-container[b-7xgjp8v1nx] {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

/* 100cqh = 100% of the nearest container-type:size ancestor (.page-image-sticky).
   This correctly caps the image height to the available column space. */
.page-image-container img[b-7xgjp8v1nx] {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100cqh;
}

/* Each product bounding-box overlay drawn on top of the image.
   Position/size come from inline style (dynamic % values). Clickable to select + scroll. */
.bbox-overlay[b-7xgjp8v1nx] {
    position: absolute;
    box-sizing: border-box;
    border: 3px solid color-mix(in srgb, var(--mud-palette-primary) 85%, transparent);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.bbox-overlay:hover[b-7xgjp8v1nx] {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

/* Highlighted state when its product card is selected — fixed deep blue, intentional design choice */
.bbox-selected[b-7xgjp8v1nx] {
    border-color: #1e40af;
    background-color: rgba(30, 64, 175, 0.18);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.55), 0 0 14px 3px rgba(30, 64, 175, 0.4);
    z-index: 2;
}

/* Number badge anchored to the top-left corner of each box */
.bbox-num[b-7xgjp8v1nx] {
    position: absolute;
    top: -1px;
    left: -1px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: var(--mud-palette-primary);
    border-bottom-right-radius: 6px;
}

.bbox-selected .bbox-num[b-7xgjp8v1nx] {
    background-color: #1e40af;
}

/* Date pickers colored by whether price validity matches leaflet validity */
.date-valid[b-7xgjp8v1nx]  .mud-input-root {
    background-color: color-mix(in srgb, var(--mud-palette-success) 7%, transparent);
}

.date-valid[b-7xgjp8v1nx]  .mud-input-outlined-border {
    border-color: var(--mud-palette-success) !important;
}

.date-warning[b-7xgjp8v1nx]  .mud-input-root {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 7%, transparent);
}

.date-warning[b-7xgjp8v1nx]  .mud-input-outlined-border {
    border-color: var(--mud-palette-warning) !important;
}

/* Matching number chip on each product card header */
.product-num[b-7xgjp8v1nx] {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: var(--mud-palette-primary);
    border-radius: 11px;
}

/* Manual-add indicator — same pill shape, info color */
.product-num-manual[b-7xgjp8v1nx] {
    background-color: var(--mud-palette-info);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 3-column grid for the page navigation card: the navigation as wide as it needs, so "22 / 37" stays on one line in
   the narrow column, the count in the middle taking the rest. */
.page-nav-grid[b-7xgjp8v1nx] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
}

.page-nav-left[b-7xgjp8v1nx] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    white-space: nowrap;
}

.page-nav-center[b-7xgjp8v1nx] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-nav-right[b-7xgjp8v1nx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* Wrapper div in this component gets the scoped attribute, ::deep pierces into MudNumericField */
.page-jump-wrap[b-7xgjp8v1nx]  input {
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* The way back up to the page image, on a phone only (below). */
.back-to-page[b-7xgjp8v1nx] {
    display: none;
}

/* ── Mobile: stack image above the product list instead of a fixed 2-pane split ──
   The desktop layout is a full-viewport split with independently scrolling panes
   (no page scroll). That only works with a wide image column; below this width the
   image shrinks to unusably small. Switch to normal single-column page scroll with
   the page image (bounded height, so it stays legible but doesn't push the product
   list too far down) on top, product list below. */
@media (max-width: 900px) {
    .validate-fill[b-7xgjp8v1nx] {
        flex: initial;
        min-height: 0;
        display: block;
    }

    /* Single column — same three grid items as desktop (header/left/right),
       just re-stacked via grid-template-areas: header, then image, then the
       nav+products list. No DOM reordering needed. */
    .validate-split[b-7xgjp8v1nx] {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "header"
            "right"
            "left";
        overflow: visible;
        gap: 12px;
    }

    .validate-left[b-7xgjp8v1nx],
    .validate-right[b-7xgjp8v1nx] {
        overflow: visible;
        min-height: 0;
    }

    .products-panel[b-7xgjp8v1nx] {
        overflow-y: visible;
        flex: initial;
        padding-right: 0;
    }

    /* container-type:size (used for the cqh sizing below) needs a definite block
       height from a flex/grid ancestor — .validate-right no longer fills a flex
       column here, so fall back to a plain viewport-relative cap instead. */
    .page-image-sticky[b-7xgjp8v1nx] {
        container-type: normal;
    }

    /* Well-known flexbox quirk: .mud-main-content > .mud-container (app.css) is
       both the scrolling element (overflow-y:auto) AND a flex column — in that
       combination, a scrolling flex container's own end-side padding (bottom,
       for column direction) is excluded from the scrollable area entirely, so
       the page's own 16px bottom padding never reserves any space after our
       last element. Confirmed live: scrollTop maxes out with the button's
       bottom edge flush against the viewport edge, 0px to spare. Restore the
       breathing room on our own last child instead of touching the shared
       global container. */
    .add-product-wrap[b-7xgjp8v1nx] {
        margin-bottom: 16px;
    }

    /* Back up to the page image from the offers far below it, always at hand in the corner. */
    .back-to-page[b-7xgjp8v1nx] {
        display: block;
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 10;
    }
}


/* The price tag of an offer card: the promotion price large on the left as the leaflet prints it, the other prices
   in a label/value column on the right. A grid of two areas, which MudGrid's 12 columns cannot size to content. */
.price-tag[b-7xgjp8v1nx] {
    display: grid;
    /* The large price keeps room for "199,90"; the side column gives way first. */
    grid-template-columns: minmax(7rem, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.price-side[b-7xgjp8v1nx] {
    display: grid;
    grid-template-columns: auto 5rem;
    column-gap: 12px;
    align-items: center;
}

.price-label[b-7xgjp8v1nx] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    text-align: right;
}

.price-main + .price-label[b-7xgjp8v1nx] {
    text-align: left;
}

/* The prices read as text, editable in place: no box, a dashed line under the value says it can be changed. */
.price-tag[b-7xgjp8v1nx]  .mud-input-control {
    margin-top: 0;
}

.price-tag[b-7xgjp8v1nx]  input {
    padding: 2px 0;
    border-bottom: 1px dashed var(--mud-palette-lines-inputs);
    text-align: right;
}

.price-main[b-7xgjp8v1nx]  input {
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.1;
    text-align: left;
}

/* Where the typing goes: the dashed line turns solid in the primary colour. */
.price-tag[b-7xgjp8v1nx]  input:focus {
    border-bottom: 1px solid var(--mud-palette-primary);
}

/* The lines under the header line up with the product's name: past the number badge and its gap. */
.offer-details[b-7xgjp8v1nx] {
    padding-left: 30px;
    margin-bottom: 12px;
}

/* The range of sizes under the product's name, edited in place like the prices beside it: a dashed line under each
   value, the label as theirs, the values a step below theirs to sit in the size's line; MudBlazor's inputs keep their
   body size and top margin without these. */
.size-range[b-7xgjp8v1nx] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.size-range > span[b-7xgjp8v1nx] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.size-range[b-7xgjp8v1nx]  .mud-input-control {
    margin-top: 0;
    flex: 0 0 auto;
}

.size-range[b-7xgjp8v1nx]  input {
    padding: 2px 0;
    font-size: 14px;
    border-bottom: 1px dashed var(--mud-palette-lines-inputs);
    text-align: right;
}

.size-range[b-7xgjp8v1nx]  input:focus {
    border-bottom: 1px solid var(--mud-palette-primary);
}

/* Adding or removing a range is rare, so its actions wait for the card under the pointer, the selected card or the
   keyboard; MudBlazor renders the cards and the actions, so ::deep reaches them from the panel. */
.products-panel[b-7xgjp8v1nx]  .card-hover-action {
    opacity: 0;
    transition: opacity 0.15s;
}

.products-panel[b-7xgjp8v1nx]  .mud-paper:hover .card-hover-action,
.products-panel[b-7xgjp8v1nx]  .mud-border-primary .card-hover-action,
.products-panel[b-7xgjp8v1nx]  .card-hover-action:focus-visible {
    opacity: 1;
}

.size-range[b-7xgjp8v1nx]  .mud-icon-button {
    padding: 0;
}

.size-range[b-7xgjp8v1nx]  .mud-icon-button .mud-icon-root {
    font-size: 1rem;
}

/* The steppers through what wants a look, side by side and wrapping in a narrow column; each draws itself
   (AttentionStepper). */
.steppers[b-7xgjp8v1nx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 6px 6px;
}
/* /Areas/Admin/Pages/LeafletReading/LeafletReadingPage.razor.rz.scp.css */
/* Numbers line up on the right; a class because the cells are plain table cells of this page. */
.num[b-uuwe2tg3s7] {
    text-align: right;
    white-space: nowrap;
}

/* The total under the chains, set off by a rule: plain table cells of this page. */
.total td[b-uuwe2tg3s7] {
    font-weight: 600;
    border-top: 2px solid var(--mud-palette-lines-default);
}