/* "Price Tag" design tokens that MudTheme has no slot for. Rules: docs/design.md. Theme colors: Components/Theme/AppTheme.cs. */
:root {
    --lpt-font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --lpt-bar: #3B3F44;             /* app bar; also the logo's punched hole */
    --lpt-panel-head: #F0F0F0;      /* header strip of every panel */
    --lpt-row-stripe: #F7F7F7;      /* every other row */
    --lpt-grid: #E6E6E6;            /* inner row rules, chart grid */
    --lpt-button: #F4F4F4;          /* idle grey buttons and segments */
    --lpt-button-line: #BBBBBB;
    --lpt-button-pressed: #DCDCDC;
    --lpt-focus: #CFE2F0;
    --lpt-photo-bg: #FFFFFF;        /* behind product photos, which are shot on white */

    --lpt-tag: #FFD23F;             /* the logo, and the border of the lowest price */
    --lpt-lowest-bg: #FFF3B0;       /* lowest current price across shops: dark text only */
    --lpt-lowest-text: #222222;
    --lpt-drop: #C8102E;            /* price drop: red text with a down arrow and a minus sign */
    --lpt-rise: #222222;            /* price rise: plain text with an up arrow and a plus sign */

    --lpt-available: #1E7B34;       /* ■ */
    --lpt-out-of-stock: #B35C00;    /* □, the same family as the chart band */
    --lpt-out-of-stock-band: #FBE9D7;
    --lpt-delisted: #777777;        /* struck through */
    --lpt-superseded: #6A3FB5;
    --lpt-promo-line: #6B6F75;      /* dashed edge of a promotion or code price: the coupon look, no new hue */
    --lpt-promo-band: #ECECF1;      /* chart band while a code or coupon covered the product; grey, apart from Out of Stock's orange */
    --lpt-page-light: #FFFFFF;      /* AppTheme's light and dark Background, for <html> before MudBlazor's theme is read */
    --lpt-page-dark: #16181B;

    /* Revision lines in the comparison chart: an ordinal ramp of Revision violet, newest darkest (dataviz validator, --ordinal) */
    --lpt-revision-1: #3B1C78;
    --lpt-revision-2: #6A3FB5;
    --lpt-revision-3: #9273CF;
    --lpt-revision-4: #B29BE0;

    /* Country Shop lines: fixed per country, always in this order and next to the code */
    --lpt-country-de: #2A6EBB;
    --lpt-country-cz: #E8820C;
    --lpt-country-sk: #1F9E8F;      /* teal, not the canvas's green: green and orange merge for protanopes (dataviz validator) */
    --lpt-country-pl: #8A3EA8;
}

/* The page from the very first paint. MudBlazor's theme is a style inside <body>, so until the browser reaches it the
   canvas would be its default white; the server puts the chosen theme on <html> (App.razor), and this paints it. */
html.lpt-theme-light {
    background: var(--lpt-page-light);
}

html.lpt-theme-dark {
    background: var(--lpt-page-dark);
    color-scheme: dark;
}

.theme-dark {
    --lpt-bar: #1C1F22;
    --lpt-panel-head: #202328;
    --lpt-row-stripe: #1B1E22;
    --lpt-grid: #2A2E33;
    --lpt-button: #2A2E33;
    --lpt-button-line: #44494F;
    --lpt-button-pressed: #3A3F45;
    --lpt-focus: #2A4A63;

    --lpt-lowest-bg: #FFD23F;
    --lpt-lowest-text: #16181B;
    --lpt-drop: #FF6B6B;
    --lpt-rise: #E4E6E8;

    --lpt-available: #5FC27A;
    --lpt-out-of-stock: #F0A050;
    --lpt-out-of-stock-band: rgba(232, 130, 12, 0.16);
    --lpt-delisted: #A0A5AB;
    --lpt-superseded: #B39CF0;
    --lpt-promo-line: #A0A5AB;
    --lpt-promo-band: rgba(255, 255, 255, 0.08);

    /* On the dark page the ramp runs the other way: newest lightest */
    --lpt-revision-1: #E3D9FC;
    --lpt-revision-2: #B39CF0;
    --lpt-revision-3: #8F72DA;
    --lpt-revision-4: #6E52BC;

    /* Country lines that pass the dataviz validator on the dark page: CZ one step darker, PL one step lighter */
    --lpt-country-cz: #D97316;
    --lpt-country-pl: #A65BC4;
}

/* Shape: one 3 px radius, 32 px buttons (44 px on phones) */
.mud-button-root.mud-button {
    min-height: 32px;
    padding: 0 14px;
}

.mud-button-root.mud-button-outlined {
    border-color: var(--mud-palette-lines-inputs);
    background: var(--lpt-button);
    color: var(--mud-palette-text-primary);
}

.mud-button-root.mud-button-outlined:hover {
    background: var(--lpt-button-pressed);
}

/* Segmented controls (chart range, currency): grey segments, the chosen one pressed */
.mud-toggle-group {
    border-color: var(--lpt-button-line) !important;
}

.mud-toggle-group .mud-toggle-item.mud-button-root {
    min-height: 28px;
    border-color: var(--lpt-button-line);
    background: var(--lpt-button);
    color: var(--mud-palette-text-primary);
    font-weight: 400;
}

.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected {
    background: var(--lpt-button-pressed);
    font-weight: 700;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

@media (max-width: 600px) {
    .mud-button-root.mud-button {
        min-height: 44px;
    }
}

/* App bar: 44 px, the tag logo only */
.lpt-appbar .mud-toolbar {
    min-height: 44px;
    height: 44px;
}

.lpt-appbar .mud-icon-button {
    padding: 8px;
}

.lpt-appbar .mud-button-root.mud-button-outlined {
    background: transparent;
    color: inherit;
    border-color: rgba(255, 255, 255, 0.4);
}

.lpt-appbar .mud-button-root.mud-button-outlined:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lpt-logo {
    display: inline-flex;
    align-items: center;
    padding: 6px 4px;
}

.lpt-logo-tag {
    fill: var(--lpt-tag);
}

.lpt-logo-hole {
    fill: var(--lpt-bar);
}

.lpt-main {
    padding-top: 44px;
}

/* Page: 40 px gutter (12 on phones), 20 px between panels */
.lpt-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 40px 48px;
}

@media (max-width: 600px) {
    .lpt-page {
        padding: 14px 12px 32px;
    }
}

.lpt-page-title {
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Panel: 1 px line with a grey header strip */
.lpt-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    background: var(--mud-palette-background);
}

.lpt-panel + .lpt-panel {
    margin-top: 20px;
}

.lpt-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-height: 34px;
    padding: 4px 12px;
    background: var(--lpt-panel-head);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.lpt-panel-header h2,
.lpt-panel-header .lpt-panel-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
}

.lpt-panel-body {
    padding: 12px;
}

.lpt-notice {
    max-width: 560px;
}

.lpt-code {
    font-family: var(--lpt-font-mono);
    font-size: 0.75rem;
    font-weight: 400;
}

/* Country Shop marker: a 10 px square in --lpt-country-{code}, always next to the country code */
.lpt-country-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* Model Code, e.g. "PBH 1550 C1": codes in mono */
.lpt-model-code {
    font-family: var(--lpt-font-mono);
    font-size: 0.75rem;
}

.lpt-price {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* The current price on the product page: 26 / 700, plain */
.lpt-hero-price {
    font-size: 1.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Lowest current price across shops: yellow fill, dark text */
.lpt-lowest {
    display: inline-block;
    padding: 0 5px;
    background: var(--lpt-lowest-bg);
    border: 1px solid var(--lpt-tag);
    color: var(--lpt-lowest-text);
}

.lpt-old-price {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Price drop: red text with ▼ and a minus, no badge */
.lpt-drop {
    color: var(--lpt-drop);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Converted price: "≈", regular weight, secondary color, so it never reads as Lidl's own price */
.lpt-converted-price {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* Statuses: plain colored text with their own glyph, never a pill */
.lpt-status {
    font-weight: 600;
    white-space: nowrap;
}

.lpt-status-available {
    color: var(--lpt-available);
}

.lpt-status-out-of-stock {
    color: var(--lpt-out-of-stock);
}

.lpt-status-delisted {
    color: var(--lpt-delisted);
    text-decoration: line-through;
}

/* A live check in progress: italic and secondary, like a cached value */
.lpt-checking {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.lpt-checking .mud-progress-circular {
    width: 12px !important;
    height: 12px !important;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--lpt-available);
}

.invalid {
    outline: 1px solid var(--lpt-drop);
}

.validation-message {
    color: var(--lpt-drop);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Search: in the middle of the top bar on every page; on phones a row of its own under it */
.lpt-bar-search {
    flex: 1 1 320px;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    min-width: 0;
}

.lpt-bar-search-field {
    flex: 1;
    display: flex;
    min-width: 0;
}

.lpt-bar-search input {
    flex: 1;
    min-width: 0;
    height: 30px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid var(--lpt-bar);
    border-right: none;
    border-radius: 3px 0 0 3px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font: inherit;
}

.lpt-bar-search input:focus {
    outline: 2px solid var(--lpt-focus);
    outline-offset: 0;
}

.lpt-bar-search-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--mud-palette-primary-darken);
    border-radius: 0 3px 3px 0;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.lpt-bar-search-button:hover {
    background: var(--mud-palette-primary-darken);
}

.lpt-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .lpt-appbar .mud-toolbar {
        height: auto;
        flex-wrap: wrap;
        padding-bottom: 6px;
    }

    .lpt-bar-search {
        order: 99;
        flex-basis: 100%;
        max-width: none;
    }

    .lpt-main {
        padding-top: 82px;
    }
}

.lpt-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.lpt-result-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    background: var(--mud-palette-background);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

.lpt-result-card:hover,
.lpt-result-card:focus-visible {
    border-color: var(--mud-palette-primary);
    outline: none;
}

.lpt-result-image {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lpt-photo-bg);
    border-bottom: 1px solid var(--lpt-grid);
    padding: 10px;
}

.lpt-result-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lpt-result-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 12px 12px;
}

.lpt-result-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

.lpt-result-price {
    display: flex;
    align-items: baseline;
    gap: 4px 8px;
    flex-wrap: wrap;
}

.lpt-result-price .lpt-price {
    font-size: 0.875rem;
}

.lpt-skeleton-card {
    height: 250px;
}

@media (max-width: 600px) {
    .lpt-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .lpt-result-image {
        height: 120px;
    }
}

/* Product page */
.lpt-product-header {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.lpt-product-image {
    flex: 0 0 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--lpt-photo-bg);
    overflow: hidden;
}

.lpt-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lpt-product-info {
    flex: 999 1 420px;
    min-width: 0;
}

.lpt-product-meta {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

/* Variants: a row of grey segments; the open one is pressed */
.lpt-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lpt-variant {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 12px;
    border: 1px solid var(--lpt-button-line);
    border-radius: 3px;
    background: var(--lpt-button);
    color: inherit;
    text-decoration: none;
}

.lpt-variant:hover {
    border-color: var(--mud-palette-primary);
}

.lpt-variant-selected {
    background: var(--lpt-button-pressed);
    font-weight: 700;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Prices in every Country Shop: a dense striped table */
.lpt-compare-row {
    display: grid;
    grid-template-columns: minmax(80px, 180px) minmax(140px, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    padding: 4px 12px;
}

.lpt-compare-row + .lpt-compare-row {
    border-top: 1px solid var(--lpt-grid);
}

.lpt-compare-row:nth-child(even) {
    background: var(--lpt-row-stripe);
}

.lpt-compare-row-muted {
    color: var(--mud-palette-text-secondary);
}

.lpt-compare-row-muted .lpt-price {
    text-decoration: line-through;
    font-weight: 400;
}

.lpt-compare-shop,
.lpt-compare-price,
.lpt-compare-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.lpt-compare-price .lpt-price {
    font-size: 0.875rem;
}

.lpt-checked-at {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.lpt-all-time-low {
    flex-basis: 100%;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.lpt-cheapest-label {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 600px) {
    .lpt-product-image {
        flex-basis: 100%;
        height: 200px;
    }

    .lpt-compare-row {
        grid-template-columns: 56px 1fr auto;
        gap: 4px 8px;
    }

    .lpt-compare-status {
        grid-column: 2 / 4;
        grid-row: 2;
    }
}

/* Price Alerts under the Follow button: each opens its dialog */
.lpt-alert-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lpt-alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 2px 10px;
    border: 1px solid var(--lpt-button-line);
    border-radius: 3px;
    background: var(--lpt-button);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.lpt-alert-chip:hover,
.lpt-alert-chip:focus-visible {
    border-color: var(--mud-palette-primary);
}

/* Revisions: a newer Revision of the same Model Line exists (violet, like the design canvas) */
.lpt-superseded {
    color: var(--lpt-superseded);
    font-size: 0.75rem;
    font-weight: 600;
}

.lpt-superseded-link {
    align-self: flex-start;
    color: var(--lpt-superseded);
    font-weight: 600;
    text-decoration: none;
}

.lpt-superseded-link:hover,
.lpt-superseded-link:focus-visible {
    text-decoration: underline;
}

/* Sort menu above a product list */
.lpt-sort-select {
    flex: 0 0 220px;
    max-width: 220px;
}

/* Infinite scroll: the invisible marker the next page loads at */
.lpt-scroll-sentinel {
    height: 1px;
}

/* Favourites: a result card with an unfollow button on top */
.lpt-favourite-card {
    position: relative;
}

.lpt-favourite-link {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: inherit;
    text-decoration: none;
}

.lpt-unfollow {
    position: absolute !important;
    top: 4px;
    right: 4px;
    background: var(--mud-palette-background) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

.lpt-price-delisted {
    text-decoration: line-through;
    font-weight: 400;
    color: var(--lpt-delisted);
}

/* Price history: one chart per currency, inside the panel */
.lpt-charts {
    display: grid;
    gap: 12px;
}

.lpt-history-table td,
.lpt-history-table th {
    white-space: nowrap;
}

/* Category breadcrumb */
.lpt-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.lpt-breadcrumb a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.lpt-breadcrumb a:hover,
.lpt-breadcrumb a:focus-visible {
    text-decoration: underline;
}

/* Category menu */
.lpt-category-count {
    margin-left: auto;
    padding-left: 12px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* Category rail: icons under the top bar; hover or focus shows the name and subcategories in a flyout */
.lpt-rail {
    position: fixed;
    top: 44px;
    bottom: 0;
    left: 0;
    width: 52px;
    padding-top: 6px;
    background: var(--lpt-panel-head);
    border-right: 1px solid var(--mud-palette-lines-default);
    z-index: 1100;
}

.lpt-rail ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lpt-rail-item {
    position: relative;
}

.lpt-rail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 44px;
    color: var(--mud-palette-text-secondary);
}

.lpt-rail-item:hover > .lpt-rail-icon,
.lpt-rail-item:focus-within > .lpt-rail-icon {
    background: var(--mud-palette-background);
    color: var(--mud-palette-primary);
}

.lpt-rail-flyout {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 240px;
    max-width: 320px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.lpt-rail-item:hover > .lpt-rail-flyout,
.lpt-rail-item:focus-within > .lpt-rail-flyout {
    display: block;
}

.lpt-rail-flyout a {
    display: flex;
    align-items: baseline;
    padding: 6px 12px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.lpt-rail-flyout a:hover,
.lpt-rail-flyout a:focus-visible {
    background: var(--lpt-row-stripe);
    color: var(--mud-palette-primary);
}

.lpt-rail-flyout .lpt-rail-flyout-title {
    padding: 8px 12px;
    background: var(--lpt-panel-head);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-weight: 700;
}

.lpt-rail-failed {
    color: var(--lpt-drop);
}

.lpt-main {
    padding-left: 52px;
}

@media (max-width: 600px) {
    .lpt-rail {
        top: 82px;
        width: 44px;
    }

    .lpt-rail-icon {
        width: 44px;
    }

    .lpt-main {
        padding-left: 44px;
    }

    .lpt-rail-flyout {
        min-width: 200px;
        max-height: calc(100vh - 96px);
    }
}

/* Promotions: a dashed "coupon" edge, grey only; the words carry the meaning (docs/design.md, Promotions) */
.lpt-promo-banner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.lpt-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding: 6px 10px;
    border: 1px dashed var(--lpt-promo-line);
    border-radius: 3px;
    background: var(--lpt-panel-head);
    font-size: 0.875rem;
}

.lpt-promo-glyph {
    font-family: var(--lpt-font-mono);
    font-weight: 700;
}

.lpt-promo-offer {
    font-weight: 600;
}

.lpt-promo-when,
.lpt-code-price-when {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.lpt-promo-terms {
    margin-left: auto;
    color: var(--mud-palette-primary);
}

.lpt-code-price {
    display: inline-block;
    padding: 0 6px;
    border: 1px dashed var(--lpt-promo-line);
    border-radius: 3px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.6;
}

/* Promotions admin: statuses are text with a glyph, in the status colors already used for stock */
.lpt-promo-status {
    font-weight: 600;
    font-size: 0.8125rem;
}

.lpt-promo-status-confirmed { color: var(--lpt-available); }
.lpt-promo-status-needsreview,
.lpt-promo-reason { color: var(--lpt-out-of-stock); }
.lpt-promo-status-rejected { color: var(--lpt-delisted); }
.lpt-promo-status-pending { color: var(--mud-palette-text-secondary); }

.lpt-promo-runs {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 0.8125rem;
}

.lpt-promo-terms-text {
    max-height: 420px;
    overflow: auto;
    margin: 8px 0 0;
    padding: 8px;
    border: 1px solid var(--lpt-grid);
    border-radius: 3px;
    background: var(--lpt-row-stripe);
    font-family: inherit;
    font-size: 0.8125rem;
    white-space: pre-wrap;
}

/* Privacy policy and terms: a readable column */
.lpt-legal {
    max-width: 760px;
}

.lpt-legal-list {
    margin: 0 0 12px;
    padding-left: 20px;
}

.lpt-legal-list li {
    margin-bottom: 4px;
}

/* Every page's footer: the legal links, quiet */
.lpt-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
    padding-top: 12px;
    border-top: 1px solid var(--lpt-grid);
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.lpt-footer a {
    color: inherit;
}

/* Catalog sweep admin: outcomes are words, colored like stock statuses */
.lpt-sweep-completed { color: var(--lpt-available); font-weight: 600; }
.lpt-sweep-braked { color: var(--lpt-out-of-stock); font-weight: 600; }
.lpt-sweep-failed { color: var(--lpt-drop); font-weight: 600; }
.lpt-sweep-running { color: var(--mud-palette-text-secondary); font-weight: 600; }