:root {
    color-scheme: light;
    --cs-background: #fffdfb;
    --cs-background-soft: #fff5ef;
    --cs-surface: #ffffff;
    --cs-surface-strong: #fff1e7;
    --cs-text: #352720;
    --cs-muted: #78685e;
    --cs-border: #efdccf;
    --cs-accent: #ce7e5d;
    --cs-accent-strong: #9b5639;
    --cs-shadow-soft: 0 10px 28px rgba(186, 125, 94, 0.14);
    --cs-shadow-strong: 0 18px 40px rgba(186, 125, 94, 0.16);
    --cs-radius-sm: 0.9rem;
    --cs-radius-md: 1.2rem;
    --cs-radius-lg: 1.75rem;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(circle at top right, #fff1e7 0%, #fff8f3 38%, #fffdfb 100%);
    color: var(--cs-text);
    font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    line-height: 1.6;
}

* {
    box-sizing: border-box;
}

a {
    color: inherit;
}

a:hover {
    color: inherit;
}

h1:focus {
    outline: none;
}

h1,
h2,
h3 {
    margin-top: 0;
    letter-spacing: -0.02em;
}

p {
    margin-top: 0;
}

button,
input,
select,
textarea {
    font: inherit;
}

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

.leaflet-container {
    overflow: hidden;
}

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
}

.leaflet-container,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-control-container,
.leaflet-pane,
.leaflet-overlay-pane svg,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    user-select: none;
}

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
    max-width: none !important;
    max-height: none !important;
}

.leaflet-pane {
    z-index: 400;
}

.leaflet-tile-pane {
    z-index: 200;
}

.leaflet-overlay-pane {
    z-index: 400;
}

.leaflet-marker-pane {
    z-index: 600;
}

.leaflet-tooltip-pane {
    z-index: 650;
}

.leaflet-popup-pane {
    z-index: 700;
}

.leaflet-control {
    position: relative;
    z-index: 800;
    pointer-events: auto;
}

.leaflet-top,
.leaflet-bottom {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
}

.leaflet-top {
    top: 0;
}

.leaflet-right {
    right: 0;
}

.leaflet-bottom {
    bottom: 0;
}

.leaflet-left {
    left: 0;
}

.leaflet-control-zoom {
    margin-left: 10px;
    margin-top: 10px;
    border: 1px solid var(--cs-border);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: var(--cs-shadow-soft);
}

.leaflet-control-zoom a {
    display: block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    background: #fff;
    color: var(--cs-text);
    text-align: center;
    text-decoration: none;
    font-weight: 800;
}

.leaflet-control-attribution {
    margin: 0;
    padding: 0.2rem 0.4rem;
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.75rem;
}

.leaflet-popup {
    position: absolute;
    text-align: center;
    margin-bottom: 20px;
}

.leaflet-popup-content-wrapper {
    padding: 0.2rem 0.4rem;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: var(--cs-shadow-soft);
}

.leaflet-interactive {
    cursor: pointer;
}

.cs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.85rem 1.2rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs-button:hover {
    transform: translateY(-1px);
}

.cs-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.cs-button:disabled:hover {
    transform: none;
}

.cs-button--primary {
    background: linear-gradient(135deg, var(--cs-accent), #e29a73);
    color: #fff;
    box-shadow: var(--cs-shadow-soft);
}

.cs-button--secondary {
    background: rgba(255, 255, 255, 0.72);
    border-color: var(--cs-border);
}

/* Toast notifications — fixed top-right on desktop, out of the way of the modal layer (z-index
   1000) and the floating contact button. On mobile it docks to the bottom, clearing the fixed
   contact-fab bubble (contact-fab bottom offset + its own height stays under ~4rem — see
   ContactFloatingChat.razor.css). */
.cs-toast-host {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

.cs-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    pointer-events: auto;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-left: 4px solid var(--cs-accent);
    border-radius: var(--cs-radius-sm);
    box-shadow: var(--cs-shadow-strong);
    color: var(--cs-text);
    padding: 0.85rem 0.9rem;
    animation: cs-toast-in 0.2s ease;
}

@keyframes cs-toast-in {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

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

.cs-toast--success {
    border-left-color: #1e6b1e;
}

.cs-toast--error {
    border-left-color: #8a1a1a;
}

.cs-toast--info {
    border-left-color: var(--cs-accent-strong);
}

.cs-toast__body {
    flex: 1 1 auto;
    min-width: 0;
}

.cs-toast__title {
    margin: 0 0 0.15rem;
    font-weight: 700;
}

.cs-toast__message {
    margin: 0;
    font-size: 0.9rem;
    color: var(--cs-muted);
}

.cs-toast__close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 1;
    font-size: 1.2rem;
    color: var(--cs-muted);
    cursor: pointer;
}

.cs-toast__close:hover {
    color: var(--cs-text);
}

@media (max-width: 640px) {
    .cs-toast-host {
        top: auto;
        bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
        left: 1rem;
        right: 1rem;
        width: auto;
    }
}

.auth-page {
    display: flex;
    justify-content: center;
    padding: 2rem 0 1rem;
}

.auth-card {
    width: min(100%, 32rem);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-soft);
    padding: 2rem;
}

.checkout-page {
    align-items: flex-start;
    padding-inline: 1rem;
}

.checkout-shell {
    width: min(100%, 84rem);
    display: grid;
    grid-template-columns: minmax(34rem, 1.05fr) minmax(24rem, 0.95fr);
    gap: 1.5rem;
    align-items: start;
}

.checkout-form-card {
    width: 100%;
}

.checkout-map-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-soft);
    padding: 2rem;
    position: sticky;
    top: 1rem;
}

.checkout-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.checkout-form__span-2,
.checkout-form__full {
    grid-column: 1 / -1;
}

.checkout-online-payment {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.25rem;
    border: 1px solid rgba(206, 126, 93, 0.24);
    border-radius: var(--cs-radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 245, 239, 0.74)),
        radial-gradient(circle at top right, rgba(206, 126, 93, 0.12), transparent 42%);
    box-shadow: 0 14px 32px rgba(186, 125, 94, 0.1);
}

.checkout-online-payment h3 {
    margin-bottom: 0.35rem;
}

.checkout-payment-panel__header {
    display: grid;
    gap: 0.35rem;
}

.checkout-payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.checkout-payment-badge {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0.42rem 0.78rem;
    border: 1px solid var(--cs-border);
    border-radius: 999px;
    background: #fff;
    color: var(--cs-text);
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(120, 104, 94, 0.08);
}

.checkout-payment-badge--stripe {
    color: #635bff;
}

.checkout-payment-badge--visa {
    color: #1434cb;
}

.checkout-payment-badge--mastercard {
    color: #c74716;
}

.checkout-payment-badge--maestro {
    color: #2072ba;
}

.checkout-payment-badge--wallet {
    color: #111;
}

.checkout-payment-options {
    display: grid;
    gap: 0.75rem;
}

.checkout-payment-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(239, 220, 207, 0.9);
    border-radius: var(--cs-radius-md);
    background: rgba(255, 255, 255, 0.88);
    color: var(--cs-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.checkout-payment-option:hover,
.checkout-payment-option:focus-visible {
    border-color: rgba(206, 126, 93, 0.72);
    box-shadow: 0 10px 24px rgba(206, 126, 93, 0.14);
    outline: none;
    transform: translateY(-1px);
}

.checkout-payment-option--selected {
    border-color: var(--cs-accent);
    background: rgba(255, 245, 239, 0.95);
    box-shadow: 0 12px 28px rgba(206, 126, 93, 0.16);
}

.checkout-payment-option__radio {
    width: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
    border: 2px solid var(--cs-accent);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px #fff;
    background: var(--cs-accent);
}

.checkout-payment-option:not(.checkout-payment-option--selected) .checkout-payment-option__radio {
    background: #fff;
    border-color: var(--cs-border);
}

.checkout-payment-option strong,
.checkout-payment-option span {
    display: block;
}

.checkout-payment-option span {
    color: var(--cs-muted);
    font-size: 0.94rem;
}

.checkout-payment-notice {
    padding: 0.9rem 1rem;
    border-radius: var(--cs-radius-md);
    background: rgba(238, 250, 241, 0.78);
    border: 1px solid #bfe0c7;
    color: #256b39;
    font-size: 0.95rem;
}

.checkout-legal {
    display: grid;
    gap: 0.9rem;
    padding: 1.25rem;
    border: 1px solid rgba(206, 126, 93, 0.24);
    border-radius: var(--cs-radius-lg);
    background: rgba(255, 250, 247, 0.82);
}

.checkout-legal__header h3 {
    margin-bottom: 0;
}

.checkout-checkbox {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    color: var(--cs-text);
    line-height: 1.45;
}

.checkout-checkbox input {
    margin-top: 0.2rem;
    accent-color: var(--cs-accent);
}

.checkout-checkbox--invoice {
    margin-top: 0.35rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(239, 220, 207, 0.85);
    font-weight: 800;
}

.checkout-invoice-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    background: rgba(255, 255, 255, 0.88);
}

.checkout-invoice-panel__span-2 {
    grid-column: 1 / -1;
}

.checkout-terms {
    border: 1px solid rgba(239, 220, 207, 0.9);
    border-radius: var(--cs-radius-md);
    background: rgba(255, 255, 255, 0.86);
    overflow: hidden;
}

.checkout-terms summary {
    padding: 0.9rem 1rem;
    color: var(--cs-accent-strong);
    font-weight: 800;
    cursor: pointer;
}

.checkout-terms__content {
    max-height: 22rem;
    overflow-y: auto;
    padding: 0 1rem 1rem;
    color: var(--cs-muted);
    line-height: 1.6;
}

.checkout-terms__content h4 {
    margin: 1rem 0 0.35rem;
    color: var(--cs-text);
}

@media (max-width: 900px) {
    .checkout-shell {
        grid-template-columns: 1fr;
    }

    .checkout-map-card {
        position: static;
    }
}

@media (max-width: 640px) {
    .checkout-form {
        grid-template-columns: 1fr;
    }

    .checkout-online-payment {
        padding: 1rem;
    }

    .checkout-legal {
        padding: 1rem;
    }

    .checkout-invoice-panel {
        grid-template-columns: 1fr;
    }

    .checkout-payment-option {
        padding: 0.85rem;
    }
}

.auth-card__header {
    margin-bottom: 1.5rem;
}

.auth-eyebrow {
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-accent-strong);
}

.auth-subtitle {
    color: var(--cs-muted);
    margin-bottom: 0;
}

.auth-form {
    display: grid;
    gap: 1rem;
}

.auth-field {
    display: grid;
    gap: 0.45rem;
}

.auth-label {
    font-weight: 700;
}

.auth-input {
    width: 100%;
    min-height: 3rem;
    padding: 0.85rem 1rem;
    border-radius: var(--cs-radius-sm);
    border: 1px solid var(--cs-border);
    background: #fff;
    color: var(--cs-text);
}

.auth-input:focus {
    outline: 2px solid rgba(206, 126, 93, 0.22);
    border-color: var(--cs-accent);
}

.auth-submit {
    width: 100%;
    margin-top: 0.25rem;
}

.auth-footer {
    margin-top: 1.25rem;
    color: var(--cs-muted);
}

.auth-footer a {
    color: var(--cs-accent-strong);
    font-weight: 700;
    margin-left: 0.35rem;
    text-decoration: none;
}

.auth-links {
    margin-top: 1rem;
    display: grid;
    gap: 0.5rem;
}

.auth-links a {
    color: var(--cs-accent-strong);
    font-weight: 700;
    text-decoration: none;
}

.auth-alert {
    padding: 0.9rem 1rem;
    border-radius: var(--cs-radius-sm);
    margin-bottom: 1rem;
}

.auth-alert ul {
    margin: 0;
    padding-left: 1.1rem;
}

.auth-alert--error {
    background: #fff1f0;
    color: #8f312e;
    border: 1px solid #f1c6c2;
}

.auth-alert--success {
    background: #eefaf1;
    color: #256b39;
    border: 1px solid #bfe0c7;
}

.auth-alert--warning {
    background: #fff8e6;
    color: #8a6415;
    border: 1px solid #f0dca3;
}

/* .auth-validation went with the <ValidationSummary> blocks on 2026-09-17: every message in
   those forms is field-level and was already rendered under its own input, so the summary was
   the same text a second time. Only .auth-message survives. */
.auth-message {
    color: #b13d39;
    font-size: 0.92rem;
}

.auth-captcha {
    padding: 1rem;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    background: var(--cs-background-soft);
}

.auth-captcha__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.auth-captcha__refresh {
    border: 0;
    background: transparent;
    color: var(--cs-accent-strong);
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.auth-captcha__refresh:disabled {
    cursor: default;
    opacity: 0.6;
}

.auth-captcha__image-wrap {
    display: flex;
    justify-content: center;
    padding: 0.35rem;
    border-radius: var(--cs-radius-sm);
    background: #fff;
    border: 1px dashed var(--cs-border);
}

.auth-captcha__image {
    display: block;
    max-width: 100%;
    height: auto;
}

.auth-captcha__hint {
    margin: 0;
    color: var(--cs-muted);
    font-size: 0.92rem;
}

.auth-captcha__input {
    text-align: center;
    letter-spacing: 0.3rem;
    font-weight: 700;
}

.admin-page {
    padding: 1.5rem;
}

.admin-page__header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-page__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-accent-strong);
}

.admin-page__title {
    margin-bottom: 0.75rem;
}

.admin-page__lead {
    max-width: 46rem;
    margin-bottom: 0;
    color: var(--cs-muted);
}

.admin-page__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    background: var(--cs-background-soft);
    border: 1px solid var(--cs-border);
    font-weight: 700;
    color: var(--cs-accent-strong);
}

.admin-page__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-page__content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1rem;
}

.admin-page__content-grid--editor {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
}

.product-editor__column {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

/* The admin order-detail "Управление" panel — a single persistent panel, never conditionally
   unmounted, so the grid never reflows while an action is in flight (that was the old page's
   layout-break: the "Приемане" card unmounted on every click). Sticks alongside the left info
   column on desktop; on narrow screens it stacks first (see the 1100px breakpoint below) since the
   actions are the point of the screen. */
.admin-order-manage {
    position: sticky;
    top: 1rem;
    align-self: start;
    display: grid;
    gap: 1.1rem;
    min-width: 0;
}

.admin-order-manage__meta {
    display: grid;
    gap: 0.25rem;
}

.admin-order-manage__section {
    display: grid;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cs-border);
}

.admin-order-manage__section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.admin-order-manage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-page__title .admin-badge {
    margin-left: 0.6rem;
    vertical-align: middle;
}

.admin-page__content-grid--full {
    grid-template-columns: minmax(0, 1fr);
}

.admin-card,
.admin-panel,
.admin-role-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    box-shadow: var(--cs-shadow-soft);
}

.admin-card {
    padding: 1.1rem;
}

.admin-card__label,
.admin-card__note,
.admin-role-card__text,
.admin-list span,
.admin-inline-note {
    color: var(--cs-muted);
}

.admin-card__label {
    margin-bottom: 0.35rem;
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-card__value {
    margin: 0 0 0.45rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.admin-card__note {
    margin-bottom: 0;
}

.admin-panel {
    padding: 1.25rem;
}

.admin-panel__title,
.admin-role-card__title {
    margin-bottom: 0.85rem;
}

.admin-panel__header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-panel__divider {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--cs-border);
}

.admin-list {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.85rem;
}

.admin-list li {
    display: grid;
    gap: 0.2rem;
}

.admin-role-grid {
    display: grid;
    gap: 0.85rem;
}

.admin-role-card {
    padding: 1rem;
}

.admin-role-card__title {
    font-weight: 700;
}

.admin-inline-note {
    font-size: 0.92rem;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid rgba(239, 220, 207, 0.8);
    vertical-align: top;
}

.admin-table th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cs-muted);
}

.admin-table__actions {
    width: 13rem;
}

.admin-table__thumb {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--cs-radius-sm);
    object-fit: cover;
    display: block;
    background: var(--cs-background-soft);
    border: 1px solid var(--cs-border);
}

.admin-table__thumb--empty {
    display: grid;
    place-items: center;
    color: var(--cs-muted);
    font-size: 0.8rem;
}

.admin-table__empty {
    color: var(--cs-muted);
    text-align: center;
}

.admin-action-link {
    background: transparent;
    border: 0;
    padding: 0;
    margin-right: 0.8rem;
    color: var(--cs-accent-strong);
    font-weight: 700;
    cursor: pointer;
}

.admin-action-link--danger {
    color: #a13832;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #efe6df;
    color: var(--cs-text);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
}

.admin-badge--ok {
    background: #d8efd8;
    color: #1e6b1e;
}

.admin-badge--warn {
    background: #fbe7c2;
    color: #7a4d00;
}

.admin-badge--danger {
    background: #f7d4d4;
    color: #8a1a1a;
}

.admin-badge--info {
    background: #dbe7f5;
    color: #1f4e79;
}

.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(53, 39, 32, 0.45);
    display: grid;
    place-items: center;
    padding: 1.5rem;
    z-index: 1000;
}

.admin-modal {
    width: min(100%, 32rem);
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    box-shadow: var(--cs-shadow-strong);
    padding: 1.5rem;
}

.admin-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.home-announcement {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    background: linear-gradient(135deg, rgba(255, 241, 231, 0.95), rgba(255, 255, 255, 0.96));
    box-shadow: var(--cs-shadow-soft);
}

.home-announcement__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.home-announcement__title {
    margin-bottom: 0.25rem;
    font-weight: 800;
}

.home-announcement__text {
    margin: 0;
    color: var(--cs-muted);
}

.home-placement__image {
    display: block;
    width: 100%;
    max-height: 18rem;
    object-fit: cover;
    border-radius: var(--cs-radius-md);
    margin-top: 1rem;
    border: 1px solid var(--cs-border);
}

.home-placement__image--card {
    max-height: 12rem;
    margin-bottom: 1rem;
}

.home-placement__image--hero {
    max-height: 20rem;
}

/* The hero used to be panel + advertisement aside. The advertisement card was removed, so the hero is
   now a single full-width panel and the two-column split moved inside it: copy left, image right.
   (Legacy `@media` blocks below still list `.home-hero` in their `grid-template-columns: 1fr` groups —
   harmless, since this is no longer a grid container.) */
.home-hero {
    display: block;
    margin-bottom: 2rem;
}

.home-hero__panel,
.home-card,
.home-story,
.home-visit {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(239, 220, 207, 0.92);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-soft);
}

.home-hero__panel {
    padding: 2rem;
}

.home-hero__eyebrow,
.home-section__eyebrow {
    margin-bottom: 0.85rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-accent-strong);
}

.home-hero__title {
    font-size: clamp(2.4rem, 4vw, 4.3rem);
    line-height: 1;
    margin-bottom: 1rem;
}

.home-hero__lead,
.home-section__lead {
    font-size: 1.05rem;
    color: var(--cs-muted);
    max-width: 42rem;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 1.5rem 0 0;
}

/* This had no base rule at all — only the flex-direction override in the 1100px media query below,
   which does nothing without a display:flex to override. So every card footer using it was a plain
   block: wrapped buttons touched each other with no gap, and the mobile rule that is supposed to
   stack them full width never applied. ClientProfile and ProfileOrders both rely on it. */
.home-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* Removed with the hero rework: `.home-hero__stats` (Поръчка / Витрина / Поводи) and
   `.home-hero__spotlight*` (the advertisement card). `.home-pill` below is still used by the
   promotion and catering cards, so it stays. */

.home-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--cs-border);
    color: var(--cs-accent-strong);
    font-size: 0.85rem;
    font-weight: 700;
}

.home-spotlight__price {
    font-size: 2rem;
    font-weight: 800;
}

.home-section {
    margin-top: 2.5rem;
}

.home-section__header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.home-card {
    padding: 1.4rem;
}

.home-card__title {
    margin-bottom: 0.65rem;
    font-size: 1.2rem;
}

/* The card title is a real link so the catalogue is crawlable; it should still read as a heading. */
.home-card__title-link {
    color: inherit;
    text-decoration: none;
}

.home-card__title-link:hover .home-card__title,
.home-card__title-link:focus-visible .home-card__title {
    color: var(--cs-accent-strong);
    text-decoration: underline;
}

.home-card__meta {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--cs-background-soft);
    color: var(--cs-accent-strong);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
}

.home-card__text {
    color: var(--cs-muted);
    margin-bottom: 1rem;
}

.home-story {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
    gap: 1.25rem;
    padding: 1.75rem;
}

.home-story__panel {
    border-radius: var(--cs-radius-md);
    background: linear-gradient(135deg, rgba(255, 245, 238, 0.95), rgba(255, 255, 255, 0.95));
    border: 1px solid var(--cs-border);
    padding: 1.25rem;
}

.home-story__list {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: var(--cs-muted);
}

.home-story__aside {
    display: grid;
    gap: 0.9rem;
}

.home-story__note {
    padding: 1rem;
    border-radius: var(--cs-radius-md);
    background: var(--cs-background-soft);
    border: 1px solid var(--cs-border);
}

.home-visit {
    padding: 1.75rem;
}

.home-visit__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.home-visit__item {
    padding: 1.1rem;
    border-radius: var(--cs-radius-md);
    background: var(--cs-background-soft);
    border: 1px solid var(--cs-border);
}

.home-visit__label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cs-muted);
    margin-bottom: 0.35rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.product-view__gallery {
    display: grid;
    gap: 1rem;
}

.product-view__hero-wrap {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
}

.product-view__hero {
    display: block;
    width: 100%;
    max-height: 28rem;
    object-fit: cover;
    background: var(--cs-background-soft);
}

.product-view__empty-image {
    min-height: 18rem;
    display: grid;
    place-items: center;
    color: var(--cs-muted);
    padding: 1rem;
}

.order-slots-bulk-grid,
.order-day-slot-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.order-slots-days-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.product-view__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.product-view__thumb {
    width: 6rem;
    height: 6rem;
    padding: 0;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-sm);
    overflow: hidden;
    background: #fff;
    cursor: pointer;
}

.product-view__thumb--active {
    border-color: var(--cs-accent);
    box-shadow: 0 0 0 2px rgba(206, 126, 93, 0.22);
}

.product-view__thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-view__details {
    display: grid;
    gap: 1rem;
}

.product-view__details div {
    display: grid;
    gap: 0.3rem;
}

.product-view__details dt {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--cs-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.product-view__details dd {
    margin: 0;
}

/* Size/variant picker. Split from .product-view__add-to-cart so the filling picker can sit between
   the two, which is the order the shop asked for: size -> filling -> add to cart. */
.product-view__variant {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr);
    gap: 0.35rem;
    margin-top: 1.25rem;
    margin-bottom: 1rem;
}

.product-view__add-to-cart {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.product-view__quantity-label {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--cs-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.product-view__quantity-select {
    min-width: 0;
}

.product-view__cart-button {
    white-space: nowrap;
}

.product-view__cart-message {
    grid-column: 1 / -1;
    color: var(--cs-muted);
    font-weight: 700;
}

@media (max-width: 640px) {
    .product-view__add-to-cart {
        grid-template-columns: 1fr;
    }

    .product-view__cart-button {
        width: 100%;
    }

    .product-view__cart-message {
        text-align: center;
    }
}

.product-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 18rem));
    gap: 1rem;
    align-items: start;
}

.product-image-card {
    width: 100%;
    max-width: 18rem;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--cs-shadow-soft);
}

.product-image-card__preview {
    display: block;
    width: 100%;
    height: 12rem;
    object-fit: cover;
    background: var(--cs-background-soft);
}

.product-image-card__body {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
}

.product-image-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.product-price-list {
    display: grid;
    gap: 1rem;
}

.product-price-row {
    padding: 1rem;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--cs-shadow-soft);
}

.product-price-row__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.product-price-row__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

@media (max-width: 900px) {
    .admin-page,
    .admin-panel {
        padding: 1.1rem;
    }

    .admin-page__header,
    .admin-page__content-grid,
    .admin-page__stats,
    .home-hero,
    .home-story,
    .home-visit__grid,
    .home-grid {
        grid-template-columns: 1fr;
    }

    .home-section__header {
        align-items: start;
        flex-direction: column;
    }

    .product-images-grid {
        grid-template-columns: 1fr;
    }

    .product-image-card {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .auth-card,
    .home-hero__panel,
    .home-card,
    .home-story,
    .home-visit {
        padding: 1.25rem;
    }
}

@media (max-width: 1100px) {
    .admin-page__stats,
    .admin-page__content-grid,
    .admin-page__content-grid--editor,
    .home-hero,
    .home-feature-grid,
    .home-story,
    .home-visit,
    .catalog-grid,
    .catalog-filters,
    .catalog-highlight,
    .layout-shell {
        grid-template-columns: 1fr;
    }

    .admin-page__header,
    .layout-shell__topbar,
    .home-hero__actions,
    .home-card__footer,
    .catalog-card__footer,
    .catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .product-price-row__grid {
        grid-template-columns: 1fr;
    }

    /* The actions panel is the point of this screen — stack it above the info cards, and drop the
       desktop-only sticky positioning now that the column is no longer beside anything. */
    .admin-order-manage {
        position: static;
        order: -1;
    }
}



/* Product catalog layout (shared cross-platform source of truth) */
.product-card { position: relative; }
.product-card__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid var(--cs-border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.product-card__icon--favorite {
    position: absolute;
    top: .85rem;
    right: .85rem;
}

.product-card__footer {
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
}

/* FilterBar now supplies its own complete surface (warm gradient, border, accent top edge — see
   FilterBar.razor.css), so this wrapper only needs to handle sticky positioning: it used to also
   paint a bordered/blurred white box of its own, which sat ~12px outside FilterBar's own box and
   read as two nested near-white rectangles rather than one considered surface. */
.catalog-sticky-filters {
    position: sticky;
    top: .75rem;
    z-index: 5;
}

.product-card__icon {
    width: 2.9rem;
    height: 2.9rem;
    font-size: 1.15rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.product-card__icon:hover {
    transform: translateY(-1px) scale(1.04);
    background: var(--cs-background-soft);
    box-shadow: var(--cs-shadow-soft);
}

.product-card__icon:active {
    transform: scale(.97);
}

.catalog-favorites-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 3rem;
    font-weight: 650;
}

.catalog-load-more {
    text-align: center;
    margin-top: 1rem;
}

/* ═══════════════════════════════════════════════
   Shared text-clamp + media-frame primitives
   Fixed aspect-ratio boxes so a CMS-uploaded image can never stretch a card taller than its neighbours
   or push surrounding text around while it loads (no reserved space = layout shift on load).
═══════════════════════════════════════════════ */
.cs-clamp-1,
.cs-clamp-2,
.cs-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-clamp-1 { -webkit-line-clamp: 1; }
.cs-clamp-2 { -webkit-line-clamp: 2; }
.cs-clamp-3 { -webkit-line-clamp: 3; }

.cs-media-frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--cs-radius-md);
    border: 1px solid var(--cs-border);
    background: var(--cs-background-soft);
}

.cs-media-frame > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-media-frame--wide {
    aspect-ratio: 16 / 9;
}

/* Empty state is styled, not bare: a soft diagonal wash plus a low-contrast glyph, so a section with
   no photography yet reads as "deliberately blank" rather than "broken image". */
.cs-media-frame--empty {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85), transparent 58%),
        linear-gradient(135deg, #f7ddcd, #fdeee4);
}

.cs-media-frame--empty > span {
    font-size: 2.1rem;
    opacity: 0.5;
}

.cs-badge-new {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    background: var(--cs-accent-strong);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(155, 86, 57, 0.32);
}

/* The hero panel splits copy | image. Below 900px it stacks, image last. */
.home-hero__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: center;
}

.home-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.home-hero__media {
    margin: 0;
    min-width: 0;
}

@media (min-width: 901px) {
    .home-hero__panel {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 2.25rem;
    }
}

/* ═══════════════════════════════════════════════
   Landing-page rhythm
   The complaint this solves: consecutive sections ran together, so the page read as one long column
   with no hierarchy. Three devices, applied consistently: a bigger gap between sections, an accent
   rule under every section eyebrow, and an optional tinted band that alternating sections sit on.
═══════════════════════════════════════════════ */
:root {
    --cs-section-gap: 4.5rem;
}

.home-section {
    margin-top: var(--cs-section-gap);
    scroll-margin-top: 1.5rem;
}

.home-section__header {
    margin-bottom: 1.5rem;
}

/* The eyebrow carries a short accent rule — a cheap, repeatable signal that a new section started. */
.home-section__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.home-section__eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: var(--cs-accent);
    flex: none;
}

.home-section__header h2 {
    font-size: clamp(1.5rem, 2.2vw, 2.1rem);
    line-height: 1.2;
    margin: 0;
    max-width: 34ch;
}

.home-section__header .home-section__lead {
    margin-top: 0.6rem;
}

/* Tinted band for alternating sections, so neighbouring sections never share a background. */
.home-band {
    padding: 2.5rem;
    border-radius: var(--cs-radius-lg);
    background: linear-gradient(160deg, var(--cs-surface-strong), var(--cs-background-soft) 65%);
    border: 1px solid var(--cs-border);
}

/* Closing band on the home page that hands off to /contacts. */
.home-contact-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 2rem 2.5rem;
    border-radius: var(--cs-radius-lg);
    background: linear-gradient(160deg, var(--cs-surface-strong), var(--cs-background-soft) 65%);
    border: 1px solid var(--cs-border);
}

.home-contact-cta__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    line-height: 1.2;
}

.home-contact-cta .home-section__lead {
    margin: 0;
}

@media (max-width: 640px) {
    .home-contact-cta {
        padding: 1.25rem;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    :root {
        --cs-section-gap: 3rem;
    }

    .home-band {
        padding: 1.25rem;
    }
}

/* Hero: the original clamp topped out at 4.3rem, which broke a 45-character Bulgarian headline across
   four lines inside a ~560px column. Smaller ceiling + tighter leading keeps it to two. */
.home-hero__title {
    font-size: clamp(2rem, 3.1vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    max-width: 18ch;
}

.home-hero__lead {
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 44ch;
}

/* Without this the left panel stretches to match the taller two-note aside, leaving a large empty
   area under a single paragraph. */
.home-story {
    align-items: start;
}

.home-visit__label {
    letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════
   Nebular-inspired Admin Shell  (global styles)
═══════════════════════════════════════════════ */
:root{
  --nb-sw:260px;--nb-sc:68px;--nb-th:56px;
  --nb-bg:#1a0e08;--nb-bd:rgba(255,255,255,.07);
  --nb-tx:rgba(255,235,215,.82);--nb-mt:rgba(255,200,160,.38);
  --nb-hv:rgba(255,255,255,.07);
  --nb-ab:rgba(224,123,58,.18);--nb-at:#f0a06a;
  --nb-tr:.22s ease;
}
.nb-shell{display:flex;min-height:100vh;background:#f9f4f0}
.nb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
/* Sidebar */
.nb-sidebar{
  display:flex;flex-direction:column;
  width:var(--nb-sw);min-height:100vh;
  background:var(--nb-bg);border-right:1px solid var(--nb-bd);
  flex-shrink:0;overflow:hidden;
  position:sticky;top:0;height:100vh;
  transition:width var(--nb-tr);
}
/* Brand */
.nb-sidebar__brand{
  display:flex;align-items:center;gap:.9rem;
  padding:1.25rem 1rem 1rem;
  border-bottom:1px solid var(--nb-bd);
  flex-shrink:0;overflow:hidden;min-height:72px;
}
.nb-sidebar__logo{
  width:2.6rem;height:2.6rem;object-fit:contain;
  border-radius:8px;flex-shrink:0;
  /* No brightness/invert filter here (unlike the old line-art crest): this mark is full-color
     (red on transparent), and forcing it through brightness(0) invert(1) would flatten it into an
     unreadable solid-white silhouette instead of showing the actual logo. Red reads fine on the
     sidebar's dark background as-is. */
}
.nb-sidebar__brand-text{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap}
.nb-sidebar__brand-name{font-size:.95rem;font-weight:800;color:#fff;letter-spacing:.01em}
.nb-sidebar__brand-sub{font-size:.72rem;color:var(--nb-mt);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:.1rem}
/* Nav */
.nb-sidebar__nav{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:.75rem .65rem;
  display:flex;flex-direction:column;gap:.1rem;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;
}
.nb-nav-group{margin-bottom:.35rem}
.nb-nav-group__label{
  display:block;font-size:.66rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--nb-mt);padding:.55rem .65rem .3rem;
  white-space:nowrap;overflow:hidden;
}
.nb-nav-item{
  display:flex;align-items:center;gap:.8rem;
  padding:.62rem .75rem;border-radius:10px;
  text-decoration:none;color:var(--nb-tx);
  border:1px solid transparent;
  transition:background var(--nb-tr),color var(--nb-tr),border-color var(--nb-tr);
  white-space:nowrap;overflow:hidden;
}
.nb-nav-item:hover{background:var(--nb-hv);color:#fff}
.nb-nav-item.active{background:var(--nb-ab);color:var(--nb-at);border-color:rgba(224,123,58,.25);font-weight:700}
.nb-nav-item__badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;min-width:2rem;border-radius:8px;
  background:rgba(255,255,255,.09);
  font-size:.65rem;font-weight:900;letter-spacing:.03em;
  color:rgba(255,220,190,.75);flex-shrink:0;
  transition:background var(--nb-tr),color var(--nb-tr);
}
.nb-nav-item.active .nb-nav-item__badge{background:rgba(224,123,58,.30);color:var(--nb-at)}
.nb-nav-item__label{font-size:.875rem;font-weight:600;overflow:hidden;text-overflow:ellipsis}
/* Footer */
.nb-sidebar__footer{border-top:1px solid var(--nb-bd);padding:.75rem .65rem;flex-shrink:0;overflow:hidden}
.nb-user-card{
  display:flex;align-items:center;gap:.75rem;
  padding:.5rem .65rem;border-radius:10px;
  background:rgba(255,255,255,.06);margin-bottom:.5rem;overflow:hidden;
}
.nb-user-card__avatar{
  width:2.1rem;height:2.1rem;min-width:2.1rem;
  border-radius:50%;background:linear-gradient(135deg,#e07b3a,#c96a2d);
  color:#fff;font-weight:800;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}
.nb-user-card__info{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap}
.nb-user-card__name{font-size:.8rem;font-weight:700;color:rgba(255,235,215,.9);overflow:hidden;text-overflow:ellipsis}
.nb-user-card__role{font-size:.7rem;color:var(--nb-mt);overflow:hidden;text-overflow:ellipsis}
.nb-footer-actions{display:flex;gap:.4rem}
.nb-footer-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;
  padding:.45rem .6rem;border-radius:8px;
  font-size:.78rem;font-weight:700;
  border:1px solid var(--nb-bd);background:rgba(255,255,255,.07);
  color:var(--nb-tx);text-decoration:none;cursor:pointer;
  transition:background var(--nb-tr),color var(--nb-tr);white-space:nowrap;
}
.nb-footer-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.nb-footer-btn--danger{border-color:rgba(229,57,53,.3);color:rgba(255,160,140,.8)}
.nb-footer-btn--danger:hover{background:rgba(229,57,53,.15);color:#ff8a80}
/* Content */
.nb-content{flex:1;display:flex;flex-direction:column;min-width:0}
.nb-topbar{
  position:sticky;top:0;z-index:20;
  height:var(--nb-th);background:#fff;
  border-bottom:1px solid var(--cs-border,#ede0d6);
  display:flex;align-items:center;gap:1rem;padding:0 1.5rem;
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.nb-topbar__toggle{
  display:flex;flex-direction:column;justify-content:center;gap:.3rem;
  width:2.2rem;height:2.2rem;padding:.35rem .4rem;
  border:none;background:transparent;border-radius:8px;
  cursor:pointer;flex-shrink:0;transition:background .15s;
}
.nb-topbar__toggle:hover{background:#f5ede4}
.nb-topbar__toggle span{display:block;height:2px;border-radius:999px;background:#2c1a12}
.nb-topbar__title{font-size:1rem;font-weight:700;color:#2c1a12}
.nb-main{flex:1;padding:1.5rem}
/* Collapsed */
.nb-shell--collapsed .nb-sidebar{width:var(--nb-sc)}
.nb-shell--collapsed .nb-sidebar__brand-text,
.nb-shell--collapsed .nb-nav-group__label,
.nb-shell--collapsed .nb-nav-item__label,
.nb-shell--collapsed .nb-user-card__info,
.nb-shell--collapsed .nb-footer-actions{display:none}
.nb-shell--collapsed .nb-user-card{justify-content:center;padding:.5rem}
.nb-shell--collapsed .nb-nav-item{justify-content:center;padding:.62rem}
.nb-shell--collapsed .nb-nav-item__badge{width:2.2rem;height:2.2rem}
/* Mobile */
@media(max-width:900px){
  .nb-overlay{display:block}
  .nb-sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:50;
    transform:translateX(-100%);
    transition:transform var(--nb-tr);
    width:min(var(--nb-sw),90vw);
  }
  .nb-sidebar--open{transform:translateX(0);box-shadow:4px 0 32px rgba(0,0,0,.25)}
  .nb-shell--collapsed .nb-sidebar{width:min(var(--nb-sw),90vw)}
  .nb-main{padding:1rem}
}
@media(max-width:640px){
  .nb-topbar{padding:0 .875rem}
  .nb-main{padding:.75rem}
}

/* Admin page content card */
.nb-main .admin-page {
    background: rgba(255,255,255,.97);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg, 16px);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

/* ── Checkout delivery options ─────────────────── */
.checkout-delivery-options{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.checkout-delivery-option{
  display:flex;align-items:center;gap:.75rem;
  padding:.875rem 1rem;border-radius:12px;
  border:2px solid var(--cs-border,#ede0d6);
  cursor:pointer;transition:border-color .18s,background .18s;
  background:#fff;
}
.checkout-delivery-option input[type=radio]{width:1.1rem;height:1.1rem;accent-color:#e07b3a;flex-shrink:0}
.checkout-delivery-option__icon{font-size:1.4rem;flex-shrink:0}
.checkout-delivery-option div{display:flex;flex-direction:column;gap:.15rem}
.checkout-delivery-option strong{font-size:.9rem;font-weight:700;color:#2c1a12}
.checkout-delivery-option span{font-size:.8rem;color:#888}
.checkout-delivery-option--active{border-color:#e07b3a;background:#fff8f3}
@media(max-width:600px){.checkout-delivery-options{grid-template-columns:1fr}}

/* ── Admin Settings fields ─────────────────────── */
.settings-field{margin-bottom:1.25rem}
.settings-field--row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.settings-label{display:block;font-size:.85rem;font-weight:700;margin-bottom:.35rem;color:#4a2c1a}
.settings-toggle{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-weight:700;font-size:.9rem}
.settings-toggle input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:#e07b3a}
.settings-hint{font-size:.8rem;color:#888;margin:.35rem 0 0}
.admin-panel__desc{font-size:.875rem;color:#666;margin:.25rem 0 1.25rem}
@media(max-width:640px){.settings-field--row{grid-template-columns:1fr}}

/* ── Checkout store info ─────────────────────── */
.checkout-store-info{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem;background:#fff8f3;border:1px solid #e8d9cc;border-radius:12px}
.checkout-store-info__details{display:flex;flex-direction:column;gap:.35rem;font-size:.875rem}
.checkout-store-info__details strong{font-size:.95rem;font-weight:700}
.checkout-store-free{display:inline-block;margin-top:.25rem;color:#2e7d32;font-weight:700;font-size:.8rem}
@media(max-width:640px){.checkout-store-info{grid-template-columns:1fr}}

/* ── Admin stores list ───────────────────────── */
.stores-list{display:flex;flex-direction:column;gap:1rem}
.store-card{background:#fafafa;border:1px solid var(--cs-border);border-radius:12px;padding:1rem;display:grid;grid-template-columns:1fr 200px auto;gap:1rem;align-items:start}
.store-card--editing{border-color:#e07b3a;background:#fff8f3}
.store-card__info{display:flex;flex-direction:column;gap:.3rem;font-size:.875rem}
.store-card__info strong{font-weight:700}
.store-card__actions{display:flex;flex-direction:column;gap:.5rem}
.store-badge--active{color:#2e7d32;font-size:.8rem;font-weight:700}
.store-badge--inactive{color:#999;font-size:.8rem}
.store-edit-panel{margin-top:1.5rem;padding:1.25rem;background:#fff;border:1px solid #e8d9cc;border-radius:12px}
.store-edit-panel h3{margin:0 0 1.25rem;font-size:1rem}
@media(max-width:768px){.store-card{grid-template-columns:1fr;grid-template-rows:auto auto auto}}

/* ── Delivery Slot Picker ──────────────────────── */
.slot-picker{display:flex;flex-direction:column;gap:1rem}
.slot-picker__empty{font-size:.875rem;color:#888}
.slot-picker__days{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}
.slot-day{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.2rem;padding:.65rem .5rem;border-radius:10px;
  border:2px solid var(--cs-border,#ede0d6);
  background:#fff;cursor:pointer;
  transition:border-color .18s,background .18s;
  text-align:center;
}
.slot-day:hover:not(:disabled){border-color:#e07b3a;background:#fff8f3}
.slot-day--active{border-color:#e07b3a!important;background:#fff3e8!important}
.slot-day--disabled{opacity:.4;cursor:not-allowed;background:#f5f5f5}
.slot-day__name{font-size:.82rem;font-weight:700}
.slot-day__count{font-size:.72rem;color:#888}
.slot-day--active .slot-day__count{color:#e07b3a}
.slot-picker__slots{padding:1rem;background:#fff8f3;border-radius:10px;border:1px solid #e8d9cc}
.slot-picker__slots-label{font-size:.82rem;font-weight:700;margin:0 0 .65rem;color:#4a2c1a}
.slot-picker__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.slot-chip{
  padding:.45rem .9rem;border-radius:999px;
  border:1.5px solid var(--cs-border,#ede0d6);
  background:#fff;font-size:.82rem;font-weight:600;
  cursor:pointer;transition:border-color .15s,background .15s,color .15s;
}
.slot-chip:hover{border-color:#e07b3a;color:#e07b3a}
.slot-chip--active{border-color:#e07b3a;background:#e07b3a;color:#fff}
.slot-picker__selected{font-size:.85rem;color:#2e7d32;background:#e8f5e9;padding:.5rem .75rem;border-radius:8px;margin:0}

/* ── Category Slots Admin ─────────────────────── */
.cat-slots-list{display:flex;flex-direction:column;gap:.35rem}
.cat-slots-row{display:flex;align-items:center;gap:.6rem;padding:.45rem .5rem;border-radius:8px;cursor:pointer}
.cat-slots-row:hover{background:#fff8f3}
.cat-slots-row input[type=checkbox]{accent-color:#e07b3a;width:1rem;height:1rem;flex-shrink:0}
.cat-slots-badge{font-size:.7rem;color:#e07b3a;font-weight:700;border:1px solid rgba(224,123,58,.3);border-radius:999px;padding:.1rem .5rem;margin-left:auto}
.cat-slots-clear{margin-left:.25rem;background:none;border:none;cursor:pointer;color:#ccc;font-size:.8rem;padding:.15rem .4rem;border-radius:4px}
.cat-slots-clear:hover{color:#e53935}
.cat-day-row{border-bottom:1px solid #f0e6d8;padding:.75rem 0}
.cat-day-row:last-child{border-bottom:none}
.cat-day-slots{margin-top:.65rem;display:flex;flex-direction:column;gap:.4rem;padding-left:.5rem}
.cat-slot-row{display:flex;align-items:center;gap:.5rem}
.cat-slot-input{width:110px;padding:.35rem .5rem!important;font-size:.85rem}
.cat-slot-remove{background:none;border:none;cursor:pointer;color:#ccc;font-size:.85rem;padding:.2rem .4rem}
.cat-slot-remove:hover{color:#e53935}

/* ── Slot Picker — dropdown layout (overrides grid) ── */
.slot-picker__dropdowns{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.slot-picker__group{display:flex;flex-direction:column;gap:.35rem}
@media(max-width:540px){.slot-picker__dropdowns{grid-template-columns:1fr}}

.auth-input--error{border-color:#e53935!important}
.slot-picker__hint{font-size:.78rem;color:#888;margin:.25rem 0 0}

/* ── Legal documents (ОУ, Поверителност, Бисквитки, Доставка и плащане, Рекламации, Отказ) ── */
.legal-doc {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1.5rem 0 3rem;
}

.legal-doc__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-muted);
}

.legal-doc__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.legal-doc__meta {
    margin: 0 0 1.25rem;
    color: var(--cs-muted);
    font-size: 0.9rem;
}

.legal-doc__print {
    margin-bottom: 1.5rem;
}

.legal-doc__body {
    line-height: 1.65;
}

.legal-doc__body h2 {
    margin: 2.25rem 0 0.75rem;
    font-size: 1.3rem;
    letter-spacing: -0.005em;
}

.legal-doc__body h2:first-child {
    margin-top: 0;
}

.legal-doc__body h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.05rem;
}

.legal-doc__body p {
    margin: 0 0 0.9rem;
}

.legal-doc__body ol,
.legal-doc__body ul {
    margin: 0 0 0.9rem;
    padding-left: 1.4rem;
}

.legal-doc__body li {
    margin-bottom: 0.4rem;
}

.legal-doc__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.25rem;
}

.legal-doc__body th,
.legal-doc__body td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cs-border);
}

.legal-doc__body th {
    background: var(--cs-background-soft);
}

/* Wide tables must scroll inside their own container, never make the page scroll sideways. */
.legal-doc__table-wrap {
    overflow-x: auto;
    margin: 0 0 1.25rem;
}

.legal-doc__table-wrap table {
    min-width: 34rem;
    margin: 0;
}

.legal-doc__current-choice {
    padding: 0.85rem 1rem;
    border-radius: var(--cs-radius-md);
    background: var(--cs-surface-strong);
}

.legal-doc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.legal-doc__note {
    margin: 1.25rem 0;
    padding: 1rem 1.15rem;
    border-radius: var(--cs-radius-md);
    background: var(--cs-background-soft);
    border: 1px solid var(--cs-border);
}

@media (max-width: 640px) {
    .legal-doc {
        padding: 1rem 0 2rem;
    }
}

/* ── Admin help articles (/admin/help/*) — shares .legal-doc__body's prose typography by dual-class,
   only the header/chrome differs (no version/date/print — those are legal-page concepts). ── */
.help-doc {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 0 3rem;
}

.help-doc__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-muted);
}

.help-doc__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.help-doc__lead {
    margin: 0 0 1rem;
    color: var(--cs-muted);
}

.help-doc__back {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.help-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.help-hub__card {
    display: block;
    padding: 1.15rem;
    border-radius: var(--cs-radius-md);
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.help-hub__card:hover {
    box-shadow: var(--cs-shadow-soft);
    border-color: var(--cs-accent);
}

.help-hub__card-title {
    margin: 0 0 0.35rem;
    font-weight: 800;
}

.help-hub__card-desc {
    margin: 0;
    color: var(--cs-muted);
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .help-doc {
        padding: 0 0 2rem;
    }
}

/* ── Print — hide site chrome on every printed page (legal-page requirement, but applies generally) ── */
@media print {
    .cs-header, .cs-footer, .contact-fab, #blazor-error-ui, .legal-doc__print { display: none !important; }
    .cs-main__inner { max-width: none; padding: 0; margin: 0; }
    body { background: #fff; color: #000; }
}

/* ── Realtime orders wall ("Стена с поръчки", /admin/board) — shell + topbar only.
   CSS isolation does not apply to layout components (@Body belongs to the routed page, not to the
   layout's own rendered markup — see FullScreenLayout.razor and the identical note on
   AdminLayout.razor.css), and this block is shared between the board page and its details overlay,
   so it lives here rather than in either component's isolated .razor.css. Card/grid/pulse rules
   specific to the board live in OrdersBoard.razor.css; overlay-panel rules live in
   OrderDetailsOverlay.razor.css — that panel is a DOM sibling of .fsb-shell (not a descendant), so it
   never inherits the dark --cs-* overrides below and renders in the normal light admin theme. */
.fsb-shell {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: clamp(1rem, 0.55vw + 0.85rem, 1.75rem);
    /* Dark theme, re-declared locally so OrderStatusBadge (its colors are theme-independent hex
       values already) and .cs-button (picks up --cs-text/--cs-border/--cs-accent via the cascade)
       keep rendering correctly here without forking either component. */
    --cs-background: #14100e;
    --cs-background-soft: #1c1613;
    --cs-surface: #201a17;
    --cs-surface-strong: #2a221d;
    --cs-text: #f6efe9;
    --cs-muted: #c3b3a8;
    --cs-border: #3a2f29;
    --cs-accent: #e2a074;
    --cs-accent-strong: #f2c39c;
    --cs-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.35);
    --cs-shadow-strong: 0 18px 40px rgba(0, 0, 0, 0.45);
    background: var(--cs-background);
    color: var(--cs-text);
}

.fsb-shell:focus {
    outline: none;
}

.fsb-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* TV overscan safe area: env() covers notched phones, the max() floor guarantees a gutter on a
       TV that reports no insets at all. */
    padding: max(env(safe-area-inset-top), 1.5vh) max(env(safe-area-inset-right), 2.5vw) 0.75rem max(env(safe-area-inset-left), 2.5vw);
    border-bottom: 1px solid var(--cs-border);
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.fsb-topbar__title-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.fsb-topbar__title {
    font-size: clamp(1.1rem, 1.1vw, 1.75rem);
    font-weight: 800;
    letter-spacing: 0.01em;
}

.fsb-scope-toggle {
    display: inline-flex;
    border: 1px solid var(--cs-border);
    border-radius: 999px;
    padding: 0.2rem;
    gap: 0.2rem;
}

.fsb-scope-toggle__btn {
    border: 0;
    background: transparent;
    color: var(--cs-muted);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85em;
    cursor: pointer;
    /* Touch target >=44px, same precedent as .fsb-card__action (5.3) — was 2.25rem (36px). */
    min-height: 2.75rem;
}

.fsb-scope-toggle__btn--active {
    background: var(--cs-accent);
    color: #241a12;
}

.fsb-topbar__status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    color: var(--cs-muted);
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
}

.fsb-connection-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #6b6b6b;
    flex: 0 0 auto;
}

.fsb-connection-dot--live {
    background: #4caf6d;
    box-shadow: 0 0 0 3px rgba(76, 175, 109, 0.25);
}

.fsb-connection-dot--down {
    background: #d9534f;
}

.fsb-topbar__updated--stale {
    color: #f2b6b3;
    font-weight: 700;
}

.fsb-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fsb-icon-button {
    min-width: 3rem;
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--cs-border);
    background: var(--cs-surface);
    color: var(--cs-text);
    font-size: 1.3rem;
    cursor: pointer;
}

.fsb-icon-button:hover {
    border-color: var(--cs-accent);
}

.fsb-icon-button--close {
    font-size: 1.6rem;
    line-height: 1;
}

.fsb-alert {
    margin: 0.75rem max(env(safe-area-inset-right), 2.5vw) 0 max(env(safe-area-inset-left), 2.5vw);
    padding: 0.75rem 1rem;
    border-radius: var(--cs-radius-sm);
    background: #4a1f1c;
    color: #ffd9d6;
    border: 1px solid #7a2e29;
}

.fsb-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--cs-muted);
    font-size: 1.1em;
}

/* Staff preview of a customer's not-yet-ordered cart photo (/admin/orders → „Чакащи снимки"). */
.admin-photo-preview {
    max-width: 100%;
    max-height: 260px;
    width: auto;
    height: auto;
    border-radius: 8px;
    display: block;
}