/* ============================================================================
   MixBox — základní styly a chrome/stránkové bloky.
   Hodnoty přepsané z mockupů Claude Design (cdDesign/*.dc.html), kde jsou inline.
   Barvy/rozměry VŽDY přes tokeny z tokens.css.
   ========================================================================== */

body {
    margin: 0;
    background: var(--surface-page);
    font-family: var(--font-body);
    color: var(--text-primary);
    text-wrap: pretty;
}

/* Obal celé stránky (MainLayout): patička nikdy nevyjede nad spodní hranu okna,
   i když je obsahu málo. Sloupcový flex přes výšku okna + obsah, který si vezme
   zbytek místa. dvh je kvůli mobilním prohlížečům, kde se lišta schovává;
   vh zůstává jako záloha pro prohlížeče bez dvh. */
.mb-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.mb-shell__body {
    /* grow, ale nesmršťovat se: přebytek místa vyplní, obsah se nezmenší */
    flex: 1 0 auto;
    /* Bez tohohle by široký obsah (tabulky, pásy) roztahoval flexový sloupec. */
    min-width: 0;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

    a:hover {
        color: var(--link-hover);
    }

input,
textarea,
select {
    font-family: var(--font-body);
}

    input::placeholder,
    textarea::placeholder {
        color: var(--text-muted);
    }

input[type=range] {
    accent-color: var(--primary-500);
}

h1, h2, h3 {
    font-family: var(--font-display);
}

/* Po každé navigaci Blazor fokusuje <h1> (FocusOnNavigate v Routes.razor — čtečky
   a klávesnice musí vědět, že se stránka vyměnila); cílovému prvku přitom přidá
   tabindex="-1". Prohlížeč pak kolem nadpisu kreslí černý rámeček. Prvek
   s tabindex="-1" se ale NEDÁ vytabovat — rámeček tu nenese žádnou informaci
   o poloze klávesnice, takže se nekreslí. Fokusovatelné prvky (odkazy, tlačítka,
   pole) tohle pravidlo nezasáhne a rámeček jim MUSÍ zůstat, jinak se web nedá
   ovládat klávesnicí. */
[tabindex="-1"]:focus {
    outline: none;
}

/* Vodorovné karusely produktů */
.rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

    .rail > * {
        scroll-snap-align: start;
    }

    .rail::-webkit-scrollbar {
        height: 6px;
    }

    .rail::-webkit-scrollbar-thumb {
        background: var(--paper-200);
        border-radius: 999px;
    }

    .rail::-webkit-scrollbar-track {
        background: transparent;
    }

/* Layoutový obal */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
    box-sizing: border-box;
}

.mb-loading {
    padding: var(--space-16) 0;
    color: var(--text-secondary);
}

/* ===========================================================================
   Výpis kategorie
   Responzivní chování (jeden sloupec, filtry přes celou plochu) řeší media
   query na konci souboru přes třídy .list-grid / .filters / .prod-grid.
   ========================================================================== */
.mb-crumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding-top: 22px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.mb-crumbs__sep {
    color: var(--text-muted);
}

.mb-listing {
    display: block;
    padding-top: 6px;
    padding-bottom: 48px;
}

.mb-listing__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-8);
    padding-bottom: var(--space-6);
}

.mb-listing__headtext {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 720px;
}

.mb-listing__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

.mb-listing__result {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.list-grid {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.mb-listing__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

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

.mb-listing__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* --- Postranní filtry ---------------------------------------------------- */
.mb-filters {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 104px;
    padding: var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
}

.mb-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.mb-filters__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-filters__done {
    border: none;
    background: transparent;
    color: var(--primary-600);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}

.mb-filters__block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .mb-filters__block--divided {
        padding-top: 18px;
        border-top: 1px solid var(--paper-200);
    }

    .mb-filters__block--disabled {
        opacity: .55;
    }

.mb-filters__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-filters__subcat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

    .mb-filters__subcat:hover {
        background: var(--primary-50);
        color: var(--primary-700);
    }

.mb-filters__count {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
}

.mb-filters__range {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mb-filters__input {
    width: 50%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
}

.mb-filters__dash {
    color: var(--text-muted);
}

.mb-filters__hint {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Značek bývá hodně — seznam se scrolluje, ať filtry nepřerostou stránku. */
.mb-filters__scroll {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-height: 240px;
    overflow-y: auto;
}

.mb-filters__check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

.mb-filters__checkname {
    flex: 1 1 auto;
}

.mb-filters__switch {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

    /* Zaškrtávátko přepínače je schované, vizuál dělá kolejnice + knoflík. */
    .mb-filters__switch input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.mb-filters__track {
    display: flex;
    align-items: center;
    width: 38px;
    height: 22px;
    padding: 2px;
    border-radius: 999px;
    background: var(--paper-200);
    transition: background .15s ease;
}

.mb-filters__knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--paper-0);
    margin-left: 0;
    transition: margin .15s ease;
}

.mb-filters__switch input:checked + .mb-filters__track {
    background: var(--primary-500);
}

    .mb-filters__switch input:checked + .mb-filters__track .mb-filters__knob {
        margin-left: 16px;
    }

.mb-filters__switch--disabled {
    opacity: .55;
    cursor: not-allowed;
}

.mb-filters__reset {
    height: 42px;
    border: 1px solid var(--primary-300);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--primary-600);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

    .mb-filters__reset:hover {
        background: var(--primary-50);
    }

/* --- Lišta nad výpisem --------------------------------------------------- */
.mb-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--surface-card);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
}

/* Na široké obrazovce filtry stojí vedle výpisu, tlačítko je tedy zbytečné. */
.filter-trigger {
    display: none;
}

.mb-toolbar__filters {
    align-items: center;
    gap: var(--space-2);
    padding: 9px 16px;
    border: 1px solid var(--primary-300);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--primary-600);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.mb-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mb-toolbar__sortlabel {
    font-size: 13px;
    color: var(--text-secondary);
}

.mb-toolbar__select {
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary-600);
    cursor: pointer;
    outline: none;
}

.mb-toolbar__view {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 3px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
}

.mb-toolbar__viewbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

    .mb-toolbar__viewbtn.is-active {
        background: var(--primary-50);
        color: var(--primary-700);
    }

/* --- Chipy aktivních filtrů ---------------------------------------------- */
.mb-chips {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.mb-chips__label {
    font-size: 12.5px;
    color: var(--text-secondary);
}

.mb-chips__chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--primary-50);
    color: var(--primary-700);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    .mb-chips__chip:hover {
        background: var(--primary-100);
    }

.mb-chips__reset {
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    .mb-chips__reset:hover {
        color: var(--error-500);
    }

/* --- Prázdný výsledek ---------------------------------------------------- */
.mb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: 56px 40px;
    background: var(--surface-card);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
}

.mb-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--paper-100);
    color: var(--primary-500);
}

.mb-empty__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-empty__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

.mb-empty__text {
    max-width: 430px;
    margin: 0;
    font-size: 15px;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

/* --- Donačítání ---------------------------------------------------------- */
.mb-loadmore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding-top: 14px;
}

.mb-loadmore__label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.mb-loadmore__bar {
    width: 220px;
    height: 5px;
    border-radius: 999px;
    background: var(--paper-200);
    overflow: hidden;
}

.mb-loadmore__fill {
    height: 100%;
    background: var(--primary-400);
}

.mb-loadmore__button {
    padding: 13px 28px;
    border: 1px solid var(--primary-300);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--primary-600);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .mb-loadmore__button:hover {
        background: var(--primary-50);
    }

    .mb-loadmore__button:disabled {
        opacity: .6;
        cursor: default;
    }

/* --- Seznamové zobrazení ------------------------------------------------- */
.mb-listrow {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px;
    background: var(--surface-card);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    transition: box-shadow .18s ease;
}

    .mb-listrow:hover {
        box-shadow: var(--shadow-hover);
    }

.mb-listrow__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    background: var(--paper-0);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
}

.mb-listrow__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.mb-listrow__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--paper-50);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: var(--tracking-widest);
    color: var(--text-muted);
}

.mb-listrow__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.mb-listrow__origin {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-listrow__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.mb-listrow__stock {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
}

.mb-listrow__buy {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.mb-listrow__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: var(--font-mono);
}

.mb-listrow__price {
    font-size: 20px;
    font-weight: 600;
    color: var(--price-color);
}

    .mb-listrow__price--none {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-muted);
    }

.mb-listrow__vat {
    font-size: 11px;
    color: var(--text-muted);
}

.mb-listrow__add {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 11px 18px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary-500);
    color: var(--paper-0);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

    .mb-listrow__add:hover {
        background: var(--primary-600);
    }

/* ===========================================================================
   Košík
   Responzivní chování řeší media query přes .cart-grid / .cart-row / .cart-summary.
   ========================================================================== */
.mb-cart {
    display: block;
    padding-top: 6px;
    padding-bottom: 48px;
}

.mb-cart__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
    padding-bottom: var(--space-6);
}

.mb-cart__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-cart__continue {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary-600);
}

.cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 366px;
    gap: 28px;
    align-items: start;
}

.mb-cart__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.cart-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 16px;
    background: var(--surface-card);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
}

.mb-cartrow__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    background: var(--paper-0);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    box-sizing: border-box;
}

.mb-cartrow__img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
}

.mb-cartrow__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--paper-50);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: var(--tracking-widest);
    color: var(--text-muted);
}

.mb-cartrow__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.mb-cartrow__brand {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-cartrow__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.mb-cartrow__stock {
    font-family: var(--font-mono);
    font-size: 11px;
}

    .mb-cartrow__stock .is-instock {
        color: var(--primary-600);
    }

    /* Částečné krytí a doobjednávka musí být na první pohled jiné než „skladem" —
       velkoodběratel podle toho pozná, co dostane hned. */
    .mb-cartrow__stock .is-partial,
    .mb-cartrow__stock .is-backorder {
        color: var(--saffron-500, var(--text-secondary));
    }

.mb-cartrow__noprice {
    font-size: 12.5px;
    color: var(--error-500);
}

.mb-cartrow__right {
    display: flex;
    align-items: center;
    gap: 22px;
    justify-content: flex-end;
}

.mb-cartrow__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: var(--font-mono);
}

.mb-cartrow__line {
    font-size: 18px;
    font-weight: 600;
    color: var(--price-color);
}

.mb-cartrow__unit {
    font-size: 11px;
    color: var(--text-muted);
}

.mb-cartrow__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

    .mb-cartrow__remove:hover {
        background: var(--surface-sunken);
        color: var(--error-500);
    }

.mb-cart__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-2);
}

.mb-cart__clear {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    .mb-cart__clear:hover {
        color: var(--error-500);
    }

.mb-cart__vatnote {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Souhrn objednávky --------------------------------------------------- */
.cart-summary {
    position: sticky;
    top: 104px;
}

.mb-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
}

.mb-summary__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--text-secondary);
}

.mb-summary__value {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.mb-summary__muted {
    opacity: .55;
}

.mb-summary__coupon {
    display: flex;
    gap: var(--space-2);
}

.mb-summary__couponinput {
    flex: 1 1 auto;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    font-size: 13px;
    outline: none;
}

.mb-summary__couponbtn {
    padding: 0 14px;
    border: 1px solid var(--primary-300);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--primary-600);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
}

.mb-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: var(--space-3);
    border-top: 1px solid var(--paper-200);
    font-size: 15px;
    font-weight: 600;
}

.mb-summary__totalvalue {
    font-family: var(--font-mono);
    font-size: 24px;
    color: var(--price-color);
}

.mb-summary__note {
    font-size: 11.5px;
    color: var(--text-muted);
}

.mb-summary__warning {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    font-size: 12.5px;
    color: var(--text-secondary);
}

.mb-summary__checkout {
    height: 48px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary-500);
    color: var(--text-on-primary);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

    .mb-summary__checkout:hover:not(:disabled) {
        background: var(--primary-600);
    }

    .mb-summary__checkout:disabled,
    .mb-summary__checkout.is-disabled {
        opacity: .5;
        cursor: not-allowed;
        pointer-events: none;
    }

/* Tlačítko je odkaz (jde do pokladny), takže potřebuje sladit text na střed. */
a.mb-summary__checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-on-primary);
}

/* ===========================================================================
   Detail produktu
   Responzivní chování (jeden sloupec) řeší media query přes .pd-top / .pd-two.
   ========================================================================== */
.mb-detail {
    display: block;
    padding-top: 6px;
    padding-bottom: 48px;
}

.pd-top {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) 320px;
    gap: 32px;
    align-items: start;
    padding-bottom: var(--space-10);
}

.mb-detail__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.mb-detail__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-detail__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
}

.mb-detail__perex {
    margin: 0;
    font-size: 14.5px;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

/* Prvky, které mockup ukazuje, ale data pro ně zatím nejsou. */
.mb-detail__muted {
    opacity: .55;
}

/* --- Nákupní sloupec ----------------------------------------------------- */
.buy-col {
    position: sticky;
    top: 104px;
}

.mb-buy {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
}

.mb-buy__prices {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: var(--font-mono);
}

.mb-buy__price {
    font-size: 28px;
    font-weight: 600;
    color: var(--price-color);
}

    .mb-buy__price--none {
        font-size: 15px;
        font-weight: 500;
        color: var(--text-muted);
    }

.mb-buy__vat {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Cena za kg / l pod hlavní cenou — mono jako každý číselný údaj. */
.mb-buy__unit {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-secondary);
}

.mb-buy__stock {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
}

    .mb-buy__stock.is-instock {
        color: var(--primary-600);
    }

    .mb-buy__stock.is-soldout {
        color: var(--text-muted);
    }

.mb-buy__expiry {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-secondary);
}

.mb-buy__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.mb-buy__add {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 42px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary-500);
    color: var(--text-on-primary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .mb-buy__add:hover {
        background: var(--primary-600);
    }

.mb-buy__total {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.mb-buy__perks {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: var(--space-3) 0 0;
    list-style: none;
    border-top: 1px solid var(--paper-200);
    font-size: 12.5px;
    color: var(--text-secondary);
}

    .mb-buy__perks li {
        display: flex;
        align-items: center;
        gap: 7px;
    }

/* --- Galerie ------------------------------------------------------------- */
.mb-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.mb-gallery__main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: var(--space-5);
    background: var(--paper-0);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    box-sizing: border-box;
}

/* Stejný důvod jako u dlaždice: v toku by vysoký obrázek rámec roztáhl. */
.mb-gallery__img {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    bottom: var(--space-5);
    left: var(--space-5);
    width: auto;
    height: auto;
    max-width: calc(100% - 2 * var(--space-5));
    max-height: calc(100% - 2 * var(--space-5));
    margin: auto;
    object-fit: contain;
}

.mb-gallery__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--paper-50);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-widest);
    color: var(--text-muted);
}

.mb-gallery__thumbs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
}

.mb-gallery__thumb {
    flex: 0 0 72px;
    height: 72px;
    padding: 6px;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    background: var(--paper-0);
    cursor: pointer;
}

    .mb-gallery__thumb.is-active {
        border-color: var(--primary-500);
    }

    .mb-gallery__thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* --- Popis a boční karty ------------------------------------------------- */
.pd-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
}

/* Bez nutricni karty (produkt bez hodnot) zabere popis celou sirku - prazdny sloupec by vypadal jako chyba. */
.mb-detail__two.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.mb-detail__heading {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-detail__html {
    font-size: 15px;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

    /* Redakční HTML z administrace — obrázky se musí vejít do sloupce. */
    .mb-detail__html img {
        max-width: 100%;
        height: auto;
    }

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

.mb-detail__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.mb-detail__card {
    padding: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    font-size: 13.5px;
    color: var(--text-secondary);
}

.mb-detail__cardtitle {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}

/* Nutriční tabulka na detailu (mockup Produkt): řádky label / mono hodnota, podřádky odsazené. */
.mb-nutrition__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--paper-200);
}

    .mb-nutrition__head .mb-detail__cardtitle {
        margin: 0;
    }

.mb-nutrition__basis {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.mb-nutrition__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--paper-100);
}

    .mb-nutrition__row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .mb-nutrition__row.is-sub {
        padding-top: 6px;
        padding-bottom: 6px;
    }

.mb-nutrition__label {
    font-size: 14px;
    color: var(--text-secondary);
}

.is-sub .mb-nutrition__label {
    padding-left: var(--space-3);
    font-size: 13px;
    color: var(--text-muted);
}

.mb-nutrition__value {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ===========================================================================
   Oznamovací lišta
   ========================================================================== */
.mb-topbar {
    background: var(--primary-700);
    color: var(--primary-100);
    font-size: 12.5px;
}

.mb-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.mb-topbar__group {
    display: flex;
    align-items: center;
    gap: 22px;
}

    .mb-topbar__group:last-child {
        gap: 18px;
    }

.mb-topbar__item {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ---------------------------------------------------------------------------
   Přepínač země doručení (v oznamovací liště)
   Rozbaluje se stejně jako katalog kategorií — čistě CSS přes :hover/:focus-within
   se zpožděným zavřením, po serveru jde až samotná volba.
   -------------------------------------------------------------------------- */
.mb-market {
    position: relative;
    --market-close-delay: .3s;
}

/* Přepínač jazyka stojí vlevo od přepínače země, panel se proto rozbaluje doprava. */
.mb-market--lang .mb-market__panel {
    right: auto;
    left: 0;
    min-width: 180px;
}

.mb-market__button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
}

.mb-market:hover .mb-market__button,
.mb-market:focus-within .mb-market__button {
    background: rgba(255, 255, 255, .12);
}

.mb-market__chevron {
    transition: transform .15s ease;
}

.mb-market:hover .mb-market__chevron,
.mb-market:focus-within .mb-market__chevron {
    transform: rotate(180deg);
}

.mb-market__panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    padding: var(--space-2);
    background: var(--surface-card);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover);
    visibility: hidden;
    transition: visibility 0s linear var(--market-close-delay);
}

.mb-market:hover .mb-market__panel,
.mb-market:focus-within .mb-market__panel {
    visibility: visible;
    transition-delay: 0s;
}

.mb-market__head {
    padding: 4px 10px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}

.mb-market__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

    .mb-market__item:hover {
        background: var(--surface-sunken);
    }

    .mb-market__item.is-active {
        color: var(--primary-700);
        font-weight: 600;
    }

.mb-market__code {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}

.mb-market__name {
    flex: 1 1 auto;
}

.mb-market__currency {
    font-family: var(--font-mono);
    font-size: 11px;
    opacity: .75;
}

/* ===========================================================================
   Hlavička
   ========================================================================== */
.mb-header {
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-default);
    position: sticky;
    top: 0;
    z-index: 40;
}

.mb-header__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.mb-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

    /* Textový wordmark — stejná podoba jako .mb-footer__wordmark v patičce,
       jen v barvách pro světlé pozadí (patička je na tmavé zelené). */
    .mb-header__wordmark {
        font-family: var(--font-display);
        font-size: var(--text-2xl);
        font-weight: 800;
        line-height: 1;
        color: var(--primary-700);
        white-space: nowrap;
    }

        .mb-header__wordmark span {
            color: var(--saffron-500);
        }

.mb-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.mb-header__signin {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 9px 14px;
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary-600);
    white-space: nowrap;
}

    .mb-header__signin:hover {
        background: var(--primary-50);
        color: var(--primary-700);
    }

/* --- Hledání --------------------------------------------------------------- */
.mb-search {
    flex: 1;
    display: flex;
    align-items: center;
    max-width: 620px;
    height: 46px;
    padding: 0 5px 0 var(--space-2);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
}

.mb-search__scope {
    height: 36px;
    padding: 0 10px;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-600);
    cursor: pointer;
}

.mb-search__divider {
    width: 1px;
    height: 20px;
    background: var(--border-default);
}

.mb-search__input {
    flex: 1;
    min-width: 0;
    padding: 0 var(--space-3);
    border: none;
    background: transparent;
    outline: none;
    font-size: 14.5px;
    color: var(--text-primary);
}

.mb-search__button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--saffron-400);
    color: var(--text-on-accent);
    cursor: pointer;
}

    .mb-search__button:hover {
        background: var(--saffron-500);
    }

/* --- Pilulka košíku -------------------------------------------------------- */
.mb-cartpill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: var(--radius-pill);
    background: var(--primary-500);
    color: var(--text-on-primary);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

    .mb-cartpill:hover {
        background: var(--primary-600);
        color: var(--text-on-primary);
    }

.mb-cartpill__total {
    font-family: var(--font-mono);
    font-size: 13px;
}

.mb-cartpill__count {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--saffron-400);
    color: var(--text-on-accent);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
}


/* --- Mobilní hlavička ------------------------------------------------------
   Hamburger, hledání na celou šířku a celoobrazovkový panel MobileNav. Na desktopu
   (> 1150 px) jsou všechny tři skryté; mobilní blok @media dole je zapne a zároveň
   schová oznamovací lištu, desktopové hledání a lištu katalogu. Přepínače jazyka a země
   žijí na mobilu v patičce panelu.
   -------------------------------------------------------------------------- */
.mb-burger,
.mb-msearch,
.mb-drawer {
    display: none;
}

/* Tlacitka mobilni hlavicky a panelu nemaji zadny globalni reset (site.css ho nema),
   takze si ho drzi tady: bez toho maji sedy podklad, ramecek a systemove pismo. */
.mb-burger,
.mb-msearch__button,
.mb-drawer__iconbtn,
.mb-drawer__pill,
.mb-drawer__row {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.mb-burger {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -8px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

    .mb-burger:hover {
        background: var(--paper-100);
    }

.mb-msearch {
    align-items: center;
    gap: 0;
    padding-bottom: var(--space-3);
}

.mb-msearch__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-strong);
    border-right: none;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    background: var(--surface-page);
    font-size: 15px;
}

.mb-msearch__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 44px;
    border: 1px solid var(--saffron-500);
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    background: var(--saffron-400);
    color: var(--text-on-accent);
}

/* Panel menu — vysunutý zleva, přes celou výšku, s tmavým podkladem. */
.mb-drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    visibility: hidden;
    pointer-events: none;
}

.mb-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 18, 0.45);
    opacity: 0;
    transition: opacity .2s ease;
}

.mb-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(88vw, 400px);
    background: var(--surface-card);
    box-shadow: var(--shadow-popover);
    transform: translateX(-100%);
    transition: transform .22s ease;
}

.mb-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

    .mb-drawer.is-open .mb-drawer__backdrop {
        opacity: 1;
    }

    .mb-drawer.is-open .mb-drawer__panel {
        transform: none;
    }

@media (prefers-reduced-motion: reduce) {
    .mb-drawer__backdrop,
    .mb-drawer__panel {
        transition: none;
    }
}

.mb-drawer__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 56px;
    padding: 0 var(--space-3) 0 var(--space-4);
    border-bottom: 1px solid var(--border-default);
}

.mb-drawer__brand {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    color: var(--primary-700);
}

    .mb-drawer__brand span {
        color: var(--saffron-500);
    }

.mb-drawer__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
}

.mb-drawer__iconbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

    .mb-drawer__iconbtn:hover {
        background: var(--paper-100);
    }

.mb-drawer__close {
    margin-left: auto;
}

.mb-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-2) 0;
}

/* Řádek úrovně — tlačítko (má potomky) i odkaz (list) vypadají stejně. */
.mb-drawer__row {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 48px;
    padding: 6px var(--space-4);
    text-align: left;
    font-size: 15.5px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--paper-100);
}

    .mb-drawer__row:active {
        background: var(--paper-100);
    }

.mb-drawer__row--all {
    font-weight: 700;
    color: var(--saffron-600);
}

.mb-drawer__rowname {
    flex: 1 1 auto;
    min-width: 0;
}

.mb-drawer__count {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.mb-drawer__chevron {
    flex-shrink: 0;
    color: var(--text-muted);
}

.mb-drawer__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--paper-100);
    overflow: hidden;
}

    .mb-drawer__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mb-drawer__links {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-default);
}

.mb-drawer__link {
    padding: 12px var(--space-4);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}

.mb-drawer__foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--border-default);
    background: var(--surface-sunken);
}

.mb-drawer__pref {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mb-drawer__preflabel {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-drawer__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mb-drawer__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

    .mb-drawer__pill.is-active {
        border-color: var(--primary-500);
        background: var(--primary-500);
        color: var(--text-on-primary);
    }

.mb-drawer__pillcur {
    font-family: var(--font-mono);
    font-size: 11.5px;
    opacity: .8;
}

/* Tělo stránky pod otevřeným panelem se nesmí posouvat (třídu přepíná mixbox.lockScroll). */
body.mb-noscroll {
    overflow: hidden;
}

/* --- Lišta pod hlavičkou --------------------------------------------------- */
.mb-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

/* Položky menu vedle katalogu — tišší než tlačítko Kategorie, jen text. */
.mb-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mb-nav__link {
    padding: 10px var(--space-3);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

    .mb-nav__link:hover {
        color: var(--link-hover);
    }

/* --- Rozbalovací katalog kategorií ----------------------------------------
   Vzor kosik.cz: zvýrazněné tlačítko → svislý seznam kořenů → panel vysunutý
   doprava s podkategoriemi. Obrázky jen na DRUHÉ úrovni (viz .mb-catmenu__thumb).

   Rozbalení je ČISTĚ CSS (:hover / :focus-within) — otevření tak nečeká na server.
   Blazor řeší jen obsah vysunuté podúrovně. :focus-within pokrývá klávesnici
   i dotyk, kde :hover neexistuje (ťuknutí na tlačítko mu dá fokus).
   -------------------------------------------------------------------------- */
.mb-catmenu {
    position: relative;
    /* Jak dlouho po odjetí myši katalog ještě vydrží otevřený.
       Musí sedět s CatMenuCloseDelayMs v SiteHeader.razor. */
    --catmenu-close-delay: .3s;
}

.mb-catmenu__button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 11px 18px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary-500);
    color: var(--text-on-primary);
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.mb-catmenu:hover .mb-catmenu__button,
.mb-catmenu:focus-within .mb-catmenu__button {
    background: var(--primary-600);
}

.mb-catmenu__chevron {
    transition: transform .15s ease;
}

.mb-catmenu:hover .mb-catmenu__chevron,
.mb-catmenu:focus-within .mb-catmenu__chevron {
    transform: rotate(180deg);
}

.mb-catmenu__panel {
    position: absolute;
    /* Navazuje PŘESNĚ na spodní hranu tlačítka. Jakákoli mezera mezi tlačítkem
       a panelem nepatří ani jednomu, takže by při přejezdu myší obal ztratil
       :hover a menu by zmizelo. */
    top: 100%;
    left: 0;
    z-index: 60;
    display: flex;
    align-items: stretch;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover);
    overflow: hidden;

    /* Skrývá se `visibility`, ne `display` — jen tu jde odložit přes transition-delay.
       Po odjetí myši panel ještě chvíli zůstane, takže kurzor stihne přejet i mimo
       aktivní plochu (třeba šikmo kolem pravé hrany tlačítka). Vrátí-li se do té doby
       zpět, :hover níže zpoždění vynuluje a menu nezmizí vůbec.
       `visibility: hidden` zároveň vyřadí panel z hit-testu, takže zavřený nic neblokuje. */
    visibility: hidden;
    transition: visibility 0s linear var(--catmenu-close-delay);
}

    .mb-catmenu:hover .mb-catmenu__panel,
    .mb-catmenu:focus-within .mb-catmenu__panel {
        visibility: visible;
        transition-delay: 0s; /* otevírá se okamžitě, odkládá se jen zavření */
    }

    /* Po kliknutí na kategorii se katalog zabalí, i když kurzor zůstal nad ním (třídu
       nasazuje site.js). Musí stát ZA pravidlem pro :hover — má stejnou specificitu,
       takže rozhoduje pořadí; proto se sem nesmí nic vkládat mezi. */
    .mb-catmenu.is-collapsed .mb-catmenu__panel {
        visibility: hidden;
        transition-delay: 0s;
    }

    .mb-catmenu.is-collapsed .mb-catmenu__chevron {
        transform: none;
    }

/* Kořenové kategorie — bez obrázků */
.mb-catmenu__roots {
    display: flex;
    flex-direction: column;
    width: 288px;
    flex-shrink: 0;
    padding: var(--space-2) 0;
}

.mb-catmenu__root {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px var(--space-4);
    font-size: 14.5px;
    color: var(--text-primary);
}

    .mb-catmenu__root:hover,
    .mb-catmenu__root.is-active {
        background: var(--primary-50);
        color: var(--primary-700);
    }

.mb-catmenu__rootname {
    flex: 1;
    min-width: 0;
}

.mb-catmenu__rootcount {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Vysunutá druhá úroveň */
.mb-catmenu__flyout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--space-6);
    align-content: start;
    width: 880px;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--space-5) var(--space-6);
    border-left: 1px solid var(--border-default);
    background: var(--surface-page);
}

/* Blok podkategorie (vzor kosik.cz): vlevo obrázek přes celou výšku bloku, vpravo
   název a POD NÍM seznam nejnižší úrovně zarovnaný s názvem. Hlavička (odkaz s obrázkem
   a názvem) se přes display: contents rozpustí do mřížky, ať obrázek může přesáhnout
   řádek s názvem; :hover na odkazu funguje dál (hover dětí bublá na rodiče). */
.mb-catmenu__group {
    display: grid;
    grid-template-columns: var(--catmenu-thumb-w) minmax(0, 1fr);
    grid-auto-rows: min-content;
    column-gap: 12px;
    row-gap: 0;   /* obrazek zabira span 40 radku - mezera by se platila i za prazdne radky */
    align-content: start;
    min-width: 0;
    --catmenu-thumb-w: 96px;
    --catmenu-thumb-h: 64px;
}

.mb-catmenu__grouphead {
    display: contents;
    color: var(--text-primary);
}

    .mb-catmenu__grouphead:hover .mb-catmenu__groupname {
        color: var(--saffron-600);
    }

/* Obrázek kategorie — druhá úroveň, poměr 3:2 (stejný jako generované a nahrávané
   obrázky kategorií), zaoblený obdélník přes celou výšku bloku. Bez obrázku zůstává
   papírová plocha, ať se sloupec názvů nerozjede. */
.mb-catmenu__thumb {
    grid-column: 1;
    grid-row: 1 / span 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--catmenu-thumb-w);
    height: var(--catmenu-thumb-h);
    border-radius: var(--radius-md);
    background: var(--paper-100);
    overflow: hidden;
}

    .mb-catmenu__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mb-catmenu__groupname {
    grid-column: 2;
    align-self: start;
    padding-top: 2px;
    padding-bottom: 3px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: var(--leading-snug);
}

/* Třetí úroveň — jen odkazy, bez obrázků, pod názvem ve druhém sloupci */
.mb-catmenu__leaf {
    grid-column: 2;
    padding: 1.5px 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--text-secondary);
}

    .mb-catmenu__leaf:hover {
        color: var(--saffron-600);
    }

/* ===========================================================================
   Hrdinský blok
   ========================================================================== */
.mb-hero-wrap {
    padding-top: 28px;
}

.mb-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    padding: 44px 48px;
    background: var(--primary-600);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.mb-hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 560px;
}

.mb-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--saffron-300);
}

.mb-hero__title {
    margin: 0;
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--paper-0);
}

.mb-hero__lead {
    margin: 0;
    font-size: 15.5px;
    line-height: var(--leading-normal);
    color: var(--primary-100);
}

.mb-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: 6px;
    flex-wrap: wrap;
}

.mb-hero__secondary {
    padding: 14px 18px;
    border: 1px solid var(--primary-400);
    border-radius: var(--radius-pill);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--paper-0);
}

    .mb-hero__secondary:hover {
        background: var(--primary-500);
        color: var(--paper-0);
    }

/* Souhrnná čísla — tichý pás pod textem (pravou stranu zabrala výloha s fotkami). */
.mb-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--primary-500);
}

.mb-hero__stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mb-hero__statvalue {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--paper-0);
}

.mb-hero__statlabel {
    font-size: 12.5px;
    color: var(--primary-200);
}

.mb-hero__stat--accent .mb-hero__statvalue {
    color: var(--saffron-400);
}

/* --- Výloha: karusel fotek produktů ----------------------------------------
   ČISTĚ CSS: každý snímek má touž animaci se zpožděním o čtvrtinu cyklu, takže se
   střídají crossfadem bez časovače a bez provozu po circuitu. Keyframes počítají
   se ČTYŘMI snímky (HeroSection.SlideCount) — kdo mění počet, přepočítá procenta.
   Jediná povolená animace webu (výslovné přání majitele, jinak animace nejsou);
   prefers-reduced-motion dostane statickou první fotku. */
.mb-hero__show {
    position: relative;
    flex-shrink: 0;
    width: 330px;
    height: 340px;
}

.mb-hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    background: var(--paper-0);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    animation: mb-hero-slide 16s infinite;
}

    .mb-hero__slide img {
        flex: 1;
        min-height: 0;
        width: 100%;
        object-fit: contain;
    }

.mb-hero__slidecaption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.mb-hero__slidename {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mb-hero__slideprice {
    font-family: var(--font-mono);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--price-color);
    white-space: nowrap;
}

/* Viditelnost se přepíná spolu s průhledností — snímky jsou absolutně přes sebe
   a jen s opacity by klikání vždy sebral ten poslední v DOM. */
@keyframes mb-hero-slide {
    0%   { opacity: 0; visibility: visible; }
    4%   { opacity: 1; }
    25%  { opacity: 1; }
    29%  { opacity: 0; visibility: visible; }
    30%  { opacity: 0; visibility: hidden; }
    100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .mb-hero__slide {
        animation: none;
    }

        .mb-hero__slide:first-child {
            opacity: 1;
            visibility: visible;
        }
}

/* ===========================================================================
   Nástěnka expirací (Last call)
   ========================================================================== */
.mb-lastcall-wrap {
    padding-top: var(--space-10);
}

.mb-lastcall {
    padding: 26px 26px 28px;
    background: var(--primary-800);
    border-radius: var(--radius-lg);
}

.mb-lastcall__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    padding-bottom: var(--space-5);
}

.mb-lastcall__headtext {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mb-lastcall__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--saffron-400);
}

.mb-lastcall__title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--paper-0);
}

.mb-lastcall__lead {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--primary-200);
}

.mb-lastcall__all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--saffron-400);
    white-space: nowrap;
}

    .mb-lastcall__all:hover {
        color: var(--saffron-300);
    }

.mb-lastcall__rail {
    display: flex;
    gap: var(--space-4);
    padding-bottom: var(--space-2);
}

.mb-lastcall-card {
    flex: 0 0 216px;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.mb-lastcall-card__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    background: #ffffff;
}

/* Fotka je absolutně pozicovaná ze stejného důvodu jako u regálové dlaždice: v toku
   by vysoký obrázek roztáhl čtvercový rámec (viz .mb-shelf__img). */
.mb-lastcall-card__img {
    position: absolute;
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: contain;
}

.mb-lastcall-card__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: var(--paper-100);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-widest);
    color: var(--text-muted);
}

.mb-lastcall-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-3) 14px 14px;
    border-top: 1px solid var(--paper-100);
}

.mb-lastcall-card__expiry {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    color: var(--discount-500);
}

.mb-lastcall-card__title {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

    .mb-lastcall-card__title:hover {
        color: var(--saffron-600);
    }

.mb-lastcall-card__unit {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
}

.mb-lastcall-card__foot {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

.mb-lastcall-card__pricerow {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-family: var(--font-mono);
}

.mb-lastcall-card__price {
    font-size: 19px;
    font-weight: 600;
    color: var(--discount-500);
}

.mb-lastcall-card__old {
    font-size: 12.5px;
    color: var(--text-muted);
    text-decoration: line-through;
}

/* ===========================================================================
   Pás produktů + regálová dlaždice
   ========================================================================== */
.mb-rail-wrap {
    padding-top: 44px;
}

.mb-rail__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    padding-bottom: 18px;
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--paper-200);
}

.mb-rail__headtext {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.mb-rail__title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-rail__meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}

.mb-rail__controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mb-rail__all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

.mb-rail__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-default);
    border-radius: 50%;
    background: var(--surface-card);
    color: var(--primary-600);
    cursor: pointer;
}

    .mb-rail__arrow:hover {
        background: var(--primary-50);
    }

.mb-rail {
    display: flex;
    gap: var(--space-5);
    padding: 2px 2px 14px;
}

.mb-shelf {
    flex: 0 0 232px;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}

    .mb-shelf:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-2px);
    }

.mb-shelf__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    padding: 14px;
    background: #ffffff;
    box-sizing: border-box;
}

/* Fotka se vejde do čtvercového rámce celá (contain), ať se produkt neořízne.
   Absolutní pozice je tu schválně: v toku by vysoký obrázek rámec roztáhl —
   výška z aspect-ratio není definitivní, takže max-height:100 % nemá k čemu se vztáhnout. */
.mb-shelf__img {
    position: absolute;
    top: 14px;
    right: 14px;
    bottom: 14px;
    left: 14px;
    width: auto;
    height: auto;
    max-width: calc(100% - 28px);
    max-height: calc(100% - 28px);
    margin: auto;
    object-fit: contain;
}

.mb-shelf__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: var(--paper-50);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-widest);
    color: var(--text-muted);
}

.mb-shelf__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px var(--space-4) var(--space-4);
}

.mb-shelf__origin {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-shelf__title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

    .mb-shelf__title:hover {
        color: var(--saffron-600);
    }

.mb-shelf__pack {
    font-size: 12.5px;
    color: var(--text-secondary);
}

.mb-shelf__foot {
    margin-top: auto;
    padding-top: var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

.mb-shelf__prices {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mb-shelf__pricerow {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-family: var(--font-mono);
}

.mb-shelf__price {
    font-size: 20px;
    font-weight: 600;
    color: var(--price-color);
}

    /* Produkt bez ceny v ceníku — text místo částky, ať nekřičí barvou ceny */
    .mb-shelf__price--none {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-muted);
    }

.mb-shelf__old {
    font-size: 12.5px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.mb-shelf__unit {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

/* Dostupnost pod názvem — jen ve výpisu kategorie, pásy na homepage ji nemají. */
.mb-shelf__stock {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
}

/* ===========================================================================
   Mřížka kategorií
   ========================================================================== */
.mb-categories-wrap {
    padding-top: 52px;
}

.mb-categories__title {
    margin: 0 0 18px;
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* Blok kořene — stejná mřížka jako podkategorie v rozbaleném katalogu (.mb-catmenu__group):
   obrázek 3:2 vlevo přes celou výšku, název + počet vpravo, pod nimi seznam podkategorií.
   Hlavička je display: contents, ať obrázek může přesáhnout řádek s názvem. */
.mb-category {
    display: grid;
    grid-template-columns: var(--category-thumb-w) minmax(0, 1fr);
    grid-auto-rows: min-content;
    column-gap: 14px;
    row-gap: 0;   /* obrazek zabira span 40 radku - mezera by se platila i za prazdne radky */
    align-content: start;
    min-width: 0;
    padding: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    --category-thumb-w: 96px;
    --category-thumb-h: 64px;
}

    .mb-category:hover {
        border-color: var(--border-strong);
        background: var(--paper-0);
    }

.mb-category__head {
    display: contents;
    color: var(--text-primary);
}

    .mb-category__head:hover .mb-category__name {
        color: var(--saffron-600);
    }

.mb-category__thumb {
    grid-column: 1;
    grid-row: 1 / span 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--category-thumb-w);
    height: var(--category-thumb-h);
    border-radius: var(--radius-md);
    background: var(--paper-100);
    overflow: hidden;
}

    .mb-category__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mb-category__name {
    grid-column: 2;
    padding-top: 2px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.mb-category__count {
    grid-column: 2;
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

.mb-category__leaf {
    grid-column: 2;
    padding: 1.5px 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--text-secondary);
}

    .mb-category__leaf:hover {
        color: var(--saffron-600);
    }

.mb-category__more {
    color: var(--link-color);
}

/* ===========================================================================
   Kuchyně světa — dlaždice zemí (homepage)
   Obrázky jsou statická SVG (vlajka + jídlo) z wwwroot/assets/cuisine/.
   ========================================================================== */
.mb-cuisines-wrap {
    padding-top: 52px;
}

.mb-cuisines__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.mb-cuisines__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-cuisines__all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

    .mb-cuisines__all:hover {
        color: var(--text-primary);
    }

.mb-cuisines {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.mb-cuisine {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

    .mb-cuisine:hover {
        border-color: var(--border-strong);
    }

.mb-cuisine__img {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}

.mb-cuisine__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 12px var(--space-4) 14px;
}

.mb-cuisine__name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.mb-cuisine__count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

/* ===========================================================================
   Patička
   ========================================================================== */
.mb-footer {
    margin-top: 60px;
    /* Ve sloupcovém flexu (.mb-shell) se patička nesmí smrsknout, když je obsahu moc. */
    flex-shrink: 0;
    background: var(--primary-800);
    color: var(--primary-100);
}

.mb-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px;
    padding-top: 44px;
    padding-bottom: 44px;
}

.mb-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mb-footer__wordmark {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--paper-0);
}

    .mb-footer__wordmark span {
        color: var(--saffron-400);
    }

.mb-footer__brand p {
    margin: 0;
    font-size: 13.5px;
    line-height: var(--leading-normal);
    color: var(--primary-200);
}

.mb-footer__col {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mb-footer__heading {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-widest);
    color: var(--saffron-400);
}

.mb-footer__col a,
.mb-footer__col span:not(.mb-footer__heading) {
    font-size: 13.5px;
    color: var(--primary-100);
}

    .mb-footer__col a:hover {
        color: var(--saffron-400);
    }

.mb-footer__phone {
    font-family: var(--font-mono);
    color: var(--paper-0) !important;
}

/* ===========================================================================
   Responzivita — design má JEDINÝ breakpoint 1150 px.
   ========================================================================== */
@media (max-width: 1150px) {
    /* chrome — mobilní hlavička: oznamovací lišta, desktopové hledání i lišta katalogu
       pryč (jejich obsah přebírá MobileNav a řádek hledání), místo nich hamburger,
       kompaktní košík a hledání na celou šířku. */
    .mb-topbar,
    .head-search,
    .mb-nav {
        display: none !important;
    }

    .mb-burger {
        display: flex;
    }

    .mb-msearch {
        display: flex;
    }

    .mb-drawer {
        display: block;
    }

    .mb-header__inner {
        gap: var(--space-3);
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .mb-header__logo {
        flex: 1 1 auto;
    }

    .mb-header__wordmark {
        font-size: 24px;
    }

    .mb-cartpill {
        padding: 9px 12px;
        gap: 6px;
    }

    .mb-cartpill__total {
        display: none;
    }

    .mb-footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    /* homepage */
    .mb-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 32px var(--space-6);
    }

    .mb-hero__stats {
        width: 100%;
    }

    .mb-hero__show {
        width: 100%;
    }

    .mb-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mb-cuisines {
        grid-template-columns: repeat(2, 1fr);
    }

    /* výpis kategorie */
    .list-grid {
        grid-template-columns: 1fr !important;
    }

    .filters {
        display: none !important;
    }

    .filters-open {
        display: flex !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 70 !important;
        background: var(--surface-card) !important;
        overflow-y: auto !important;
        padding: var(--space-5) !important;
        border-radius: 0 !important;
    }

    .filter-trigger {
        display: inline-flex !important;
    }

    .prod-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* radek vypisu: cena + nakupni prvek se zalomi pod nazev, prvek roztahne na sirku */
    .mb-listrow {
        flex-wrap: wrap;
    }

    .mb-listrow__buy {
        width: 100%;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .mb-qty--row {
        width: auto;
        flex: 1 1 160px;
        max-width: 240px;
    }

    /* dva sloupce na telefonu: cena i nakupni prvek musi do ~130 px */
    .mb-shelf__price {
        font-size: 17px;
    }

    .mb-shelf__body {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* košík */
    .cart-grid {
        grid-template-columns: 1fr !important;
    }

    .cart-summary {
        position: static !important;
    }

    .cart-row {
        grid-template-columns: 88px 1fr !important;
        row-gap: 14px !important;
    }

    .cart-row-right {
        grid-column: 1 / -1 !important;
        justify-content: space-between !important;
    }

    /* kosik: nakupni prvek, ceny a krizek se na uzkem radku zalomi */
    .mb-cartrow__right {
        flex-wrap: wrap;
        gap: 12px;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Rozcestnik kategorii: blok s 96px obrazkem a seznamem podkategorii se do dvou sloupcu
       na telefonu nevejde (slova se lamou po pismenech) - pod 640 px jeden sloupec. */
    .mb-categories {
        gap: 10px;
    }

    /* pokladna */
    .co-grid {
        grid-template-columns: 1fr !important;
    }

    .co-summary {
        position: static !important;
        order: -1 !important;
    }

    .two-col {
        grid-template-columns: 1fr !important;
    }

    .steps span.step-label {
        display: none !important;
    }

    /* Trojice Město / PSČ / Země se na 375 px vejde jen pod sebe. */
    .mb-co__row,
    .mb-co__row--three {
        grid-template-columns: 1fr !important;
    }

    /* Oznamovací lišta: na úzkém displeji se nevejdou dlouhé texty ani oba přepínače
       vedle sebe — zbydou jen ty přepínače, zbytek se schová. Bez toho stránka
       přetéká do stran (rozbalovací panel přepínače trčí za pravý okraj). */
    .mb-topbar__inner {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .mb-topbar__group {
        gap: var(--space-3);
        flex-wrap: wrap;
    }

    /* Na mobilu zůstane jen první údaj v liště — na druhý není místo. */
    .mb-topbar__item:nth-child(2) {
        display: none !important;
    }

    /* Hlavička: logo + hledání + účet + košík se na 375 px nevejdou. Hledání skrývá
       .head-search výše, přihlášení patří do mobilní lišty z mockupu (.mobile-bar),
       která teprve vznikne — do té doby se na úzkém displeji schová. */
    .mb-header__inner {
        gap: var(--space-3) !important;
    }

    .mb-header__signin {
        display: none !important;
    }

    /* detail produktu */
    .pd-top,
    .pd-two {
        grid-template-columns: 1fr !important;
    }

    .buy-col {
        position: static !important;
    }

    .mobile-bar {
        display: flex !important;
    }
}

/* ===========================================================================
   Pokladna a poděkování
   Rozvržení do jednoho sloupce řeší media query výše přes .co-grid / .co-summary
   / .two-col — stránka je jen rozvěsí na správné elementy.
   ========================================================================== */
.mb-co {
    display: block;
    padding-top: var(--space-4);
    padding-bottom: var(--space-12);
}

.mb-co__steps {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0 0 var(--space-4);
    list-style: none;
}

.mb-co__step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
}

    .mb-co__step:not(:last-child)::after {
        content: "";
        width: 26px;
        height: 1px;
        background: var(--border-default);
        margin-left: var(--space-2);
    }

    .mb-co__step.is-active {
        color: var(--text-primary);
    }

.mb-co__stepno {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--border-default);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-700);
}

.mb-co__step.is-active .mb-co__stepno {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: var(--paper-0);
}

.mb-co__step.is-done .mb-co__stepno {
    background: var(--primary-100);
    border-color: var(--primary-100);
}

.mb-co__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    padding-bottom: var(--space-5);
}

.mb-co__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-co__back {
    font-size: 13.5px;
    font-weight: 600;
}

.mb-co__banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: 13px 16px;
    border: 1px solid var(--error-500);
    border-radius: var(--radius-md);
    background: var(--error-100);
    color: var(--error-500);
    font-size: 13.5px;
    font-weight: 600;
}

.mb-co__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-6);
    align-items: start;
}

.mb-co__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.mb-co__card {
    padding: var(--space-6);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.mb-co__cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
}

.mb-co__cardtitle {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-co__cardhead .mb-co__cardtitle {
    margin: 0;
}

.mb-co__optional {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-muted);
}

.mb-co__muted {
    font-size: 12.5px;
    color: var(--text-secondary);
}

.mb-co__note {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.mb-co__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.mb-co__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

    .mb-co__row--three {
        grid-template-columns: 1fr 1fr 1fr;
    }

.mb-co__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mb-co__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.mb-co__input {
    height: 44px;
    box-sizing: border-box;
    width: 100%;
    padding: 0 14px;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    font-size: 14.5px;
    color: var(--text-primary);
    outline: none;
}

    .mb-co__input:focus {
        border-color: var(--primary-500);
    }

    .mb-co__input--mono {
        font-family: var(--font-mono);
        font-size: 14px;
    }

    .mb-co__input.is-invalid {
        border-color: var(--error-500);
    }

/* Předvolba se lepí k poli telefonu — je to údaj ze země doručení, ne vstup. */
.mb-co__prefixed {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mb-co__prefix {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.mb-co__error {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--error-500);
}

.mb-co__check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 13.5px;
    cursor: pointer;
}

    /* Souhlas sedí v souhrnu těsně nad tlačítkem, ne v kartě formuláře. Text se láme
       do dvou řádků, takže čtvereček musí zůstat u PRVNÍHO řádku a nesmí se zmáčknout. */
    .mb-co__check--terms {
        align-items: flex-start;
        margin: var(--space-2) 0 var(--space-4);
        line-height: var(--leading-snug);
        color: var(--text-secondary);
    }

    .mb-co__check input {
        flex: 0 0 auto;   /* bez toho ho dlouhý popisek ve flexu stlačí na proužek */
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--primary-500);
        cursor: pointer;
    }

    /* Optické zarovnání s účařím prvního řádku textu (čtvereček je vyšší než písmo). */
    .mb-co__check--terms input {
        margin-top: 1px;
    }

/* IČO s tlačítkem do rejstříku. Tlačítko sedí vedle pole, ne pod ním — patří k němu
   a nesmí rozhodit trojsloupec s názvem firmy a DIČ. */
.mb-co__ares {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

    .mb-co__ares .mb-co__input {
        flex: 1 1 auto;
        min-width: 0;   /* bez toho input ve flexu nepustí tlačítko ke slovu */
    }

.mb-co__aresbtn {
    flex: 0 0 auto;
    padding: 0 var(--space-3);
    border: 1px solid var(--paper-300);
    border-radius: var(--radius-md);
    background: var(--paper-100);
    color: var(--text-secondary);
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
}

    .mb-co__aresbtn:hover:not(:disabled) {
        border-color: var(--primary-500);
        color: var(--primary-600, var(--primary-500));
    }

    .mb-co__aresbtn:disabled {
        opacity: .6;
        cursor: default;
    }

/* Fakturační adresa navíc: odsazená zleva linkou, aby bylo vidět, že patří pod zatržítko
   nad ní a není to další samostatná sekce formuláře. */
.mb-co__billing {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-left: var(--space-4);
    border-left: 2px solid var(--paper-200);
}

/* Sdělení o daňovém režimu pod polem DIČ. Tři stavy, tři barvy: ověřeno / registr mlčí /
   DIČ neobstálo. Barva je jen doprovod — nese to text, ne odstín. */
.mb-co__vat {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border-left: 3px solid;
    font-size: 13.5px;
    line-height: var(--leading-snug);
}

    .mb-co__vat p {
        margin: 0;
    }

    .mb-co__vat--ok {
        border-color: var(--success-500, #16a34a);
        background: color-mix(in srgb, var(--success-500, #16a34a) 8%, transparent);
    }

    .mb-co__vat--wait {
        border-color: var(--warning-500, #d97706);
        background: color-mix(in srgb, var(--warning-500, #d97706) 8%, transparent);
    }

    .mb-co__vat--bad {
        border-color: var(--danger-500, #dc2626);
        background: color-mix(in srgb, var(--danger-500, #dc2626) 8%, transparent);
    }

    /* Prohlášení je právní úkon, ne přepínač nastavení — dostane vlastní odsazení
       a láme se do víc řádků, takže čtvereček musí zůstat u prvního. */
    .mb-co__vat--wait .mb-co__check {
        align-items: flex-start;
        margin-top: var(--space-3);
    }

.mb-co__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mb-co__option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 14px 16px;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
}

    .mb-co__option.is-selected {
        border-color: var(--primary-500);
        background: var(--primary-50);
    }

    .mb-co__option input {
        width: 19px;
        height: 19px;
        accent-color: var(--primary-500);
        flex-shrink: 0;
        cursor: pointer;
    }

.mb-co__optionbody {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.mb-co__optionname {
    font-size: 14.5px;
    font-weight: 600;
}

.mb-co__optionnote {
    font-size: 12.5px;
    color: var(--text-secondary);
}

.mb-co__optionprice {
    font-family: var(--font-mono);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}

    .mb-co__optionprice.is-free {
        color: var(--success-500);
    }

.mb-co__pickup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    padding: 14px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
}

    .mb-co__pickup.is-invalid {
        border-color: var(--error-500);
    }

.mb-co__pickupbody {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mb-co__pickupname {
    font-size: var(--text-sm);
    font-weight: 600;
}

.mb-co__pickupbtn {
    padding: 9px 16px;
    border: 1px solid var(--primary-300);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--primary-600);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .mb-co__pickupbtn:hover {
        background: var(--primary-50);
    }

.mb-co__textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 88px;
    padding: 12px 14px;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: var(--leading-normal);
    color: var(--text-primary);
    outline: none;
    resize: vertical;
}

/* --- Souhrn --------------------------------------------------------------- */
.mb-co__summary {
    position: sticky;
    top: var(--space-6);
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
}

.mb-co__summaryhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 0 var(--space-4);
    border: none;
    background: transparent;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    cursor: pointer;
}

.mb-co__count {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.mb-co__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--paper-200);
}

.mb-co__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.mb-co__thumb {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-sm);
    background: var(--paper-0);
}

    .mb-co__thumb img {
        max-width: 100%;
        max-height: 100%;
    }

.mb-co__qty {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--primary-500);
    color: var(--paper-0);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
}

.mb-co__itembody {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.mb-co__itemname {
    font-size: 13.5px;
    font-weight: 600;
    line-height: var(--leading-snug);
}

.mb-co__itemunit {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

.mb-co__itemtotal {
    font-family: var(--font-mono);
    font-size: 14px;
    white-space: nowrap;
}

.mb-co__lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--paper-200);
}

    /* Rozklad daně sedí mezi položkami a celkovou částkou — patří k ní, ne k výčtu položek,
       takže nemá vlastní spodní linku a drží se blíž k součtu. */
    .mb-co__lines--vat {
        padding-bottom: 0;
        border-bottom: 0;
    }

.mb-co__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.mb-co__linevalue {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--text-primary);
    white-space: nowrap;
}

.mb-co__total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) 0 var(--space-5);
}

.mb-co__totallabel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
}

.mb-co__totalnote {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

.mb-co__totalvalue {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--primary-700);
}

.mb-co__warning {
    margin: 0 0 var(--space-3);
    font-size: 12.5px;
    line-height: var(--leading-snug);
    color: var(--warning-500);
}

.mb-co__coupon {
    display: flex;
    gap: var(--space-2);
    padding-top: var(--space-4);
    opacity: .55;
}

.mb-co__couponinput {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: 13px;
}

.mb-co__couponbtn {
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--primary-300);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--primary-600);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

.mb-co__trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--paper-200);
    list-style: none;
}

    .mb-co__trust li {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 12.5px;
        color: var(--text-secondary);
    }

    .mb-co__trust svg {
        color: var(--primary-500);
        flex-shrink: 0;
    }

/* --- Poděkování ----------------------------------------------------------- */
.mb-thanks {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 820px;
    padding-top: var(--space-8);
    padding-bottom: var(--space-12);
}

.mb-thanks__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-8);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    text-align: center;
}

.mb-thanks__badge {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--success-100);
    color: var(--success-500);
}

    /* Stav platby: neúspěch a čekání se nesmí tvářit jako úspěšná objednávka. */
    .mb-thanks__badge.is-error {
        background: var(--error-100);
        color: var(--error-500);
    }

    .mb-thanks__badge.is-waiting {
        background: var(--warning-100);
        color: var(--warning-500);
    }

.mb-thanks__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-thanks__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-thanks__text {
    max-width: 460px;
    margin: 0;
    font-size: 15px;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

.mb-thanks__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.mb-thanks__pill {
    padding: 8px 14px;
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-pill);
    background: var(--primary-50);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--primary-700);
}

.mb-thanks__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-6);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

/* Platební údaje pro převod: vlevo údaje k přepsání, vpravo QR pro ty, kdo mají telefon
   po ruce. Na úzké obrazovce jde QR pod údaje, ne vedle nich. */
.mb-pay__lead {
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.mb-pay__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-6);
}

.mb-pay__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 260px;
    margin: 0;
    min-width: 0;
}

    .mb-pay__rows > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .mb-pay__rows dt {
        color: var(--text-secondary);
        font-size: var(--text-sm);
    }

    .mb-pay__rows dd {
        margin: 0;
        text-align: right;
        /* IBAN se na mobilu nevejde na řádek — ať se radši zalomí, než aby rozjel stránku. */
        overflow-wrap: anywhere;
    }

.mb-pay__mono {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}

.mb-pay__amount {
    font-weight: 600;
    font-size: var(--text-lg);
}

.mb-pay__qr {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

    .mb-pay__qr img {
        display: block;
        width: 220px;
        height: 220px;
        /* QR musí zůstat na bílé i v tmavém režimu, jinak ho čtečka nepřečte. */
        background: #fff;
        padding: var(--space-2);
        border-radius: var(--radius-md);
    }

    .mb-pay__qr figcaption {
        max-width: 220px;
        text-align: center;
        color: var(--text-secondary);
        font-size: 12.5px;
        line-height: var(--leading-snug);
    }

.mb-thanks__cardtitle {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-thanks__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--paper-200);
}

.mb-thanks__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.mb-thanks__thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-sm);
    background: var(--paper-0);
}

    .mb-thanks__thumb img {
        max-width: 100%;
        max-height: 100%;
    }

.mb-thanks__itembody {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.mb-thanks__itemname {
    font-size: 14px;
    font-weight: 600;
    line-height: var(--leading-snug);
}

.mb-thanks__itemunit,
.mb-thanks__itemtotal {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
}

.mb-thanks__itemtotal {
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
}

.mb-thanks__lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--paper-200);
}

.mb-thanks__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.mb-thanks__linevalue {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--text-primary);
    white-space: nowrap;
}

.mb-thanks__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-4);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
}

.mb-thanks__totalvalue {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--primary-700);
}

.mb-thanks__vat,
.mb-thanks__muted {
    font-size: 13px;
    color: var(--text-secondary);
}

.mb-thanks__strong {
    font-size: 14.5px;
    font-weight: 600;
}

.mb-thanks__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.mb-thanks__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-2);
}

/* Faktury ke stažení — řádkové odkazy s ikonou dokumentu a částkou vpravo */
.mb-thanks__invoices {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.mb-thanks__invoice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
}

.mb-thanks__invoice:hover {
    border-color: var(--border-strong);
    background: var(--surface-sunken);
}

.mb-thanks__invoicename {
    flex: 1;
}

.mb-thanks__invoiceamount {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--price-color);
}


/* Pruh s logy plateb a dopravců. Oficiální varianty pro tmavé pozadí — lišta Comgate
   má bílé nápisy, dopravci jsou samonosné barevné boxy — takže žádné podkladové destičky. */
.mb-footer__badges {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    padding-bottom: var(--space-6);
}

    .mb-footer__badges img {
        display: block;
        width: auto;
        /* Široká lišta Comgate se na úzkém displeji smrskne místo přetečení. */
        max-width: 100%;
    }

.mb-footer__badges-strip {
    height: 26px;
}

.mb-footer__badges-carrier {
    height: 32px;
    /* Boxy značek mají ostré rohy; lehké zakulacení je sladí se zbytkem designu. */
    border-radius: var(--radius-sm);
}

/* Spodní pruh patičky — identifikace provozovatele a copyright. */
.mb-footer__legal {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-top: var(--space-4);
    padding-bottom: var(--space-6);
    border-top: 1px solid var(--primary-700);
    font-size: 12.5px;
    color: var(--primary-200);
}

    .mb-footer__legal a {
        color: var(--primary-100);
        text-decoration: underline;
    }

        .mb-footer__legal a:hover {
            color: var(--saffron-400);
        }

.mb-footer__legalend {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ===========================================================================
   Právní stránky — obchodní podmínky, reklamace a vrácení
   ========================================================================== */
.mb-legal {
    /* Souvislý text se čte po řádcích, ne přes celou šířku okna. */
    max-width: 78ch;
    padding-bottom: var(--space-16);
}

.mb-legal__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-legal__lead {
    margin: var(--space-3) 0 var(--space-8);
    font-size: 15.5px;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

.mb-legal__effective {
    margin: calc(-1 * var(--space-4)) 0 var(--space-8);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
}

.mb-legal__section {
    margin-bottom: var(--space-8);
}

    .mb-legal__section h2 {
        margin: 0 0 var(--space-3);
        font-family: var(--font-display);
        font-size: var(--text-xl);
        font-weight: 700;
        letter-spacing: var(--tracking-tight);
    }

    .mb-legal__section p {
        margin: 0 0 var(--space-3);
        line-height: var(--leading-normal);
        color: var(--text-secondary);
    }

    .mb-legal__section ul,
    .mb-legal__section ol {
        margin: 0 0 var(--space-3);
        padding-left: var(--space-6);
        line-height: var(--leading-normal);
        color: var(--text-secondary);
    }

    .mb-legal__section li {
        margin-bottom: 6px;
    }

/* Oddíl, který se nemá přehlédnout (u nás: kdy zboží vrátit nejde). */
.mb-legal__section--notice {
    padding: var(--space-6);
    border: 1px solid var(--paper-200);
    border-left: 3px solid var(--saffron-500);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.mb-legal__address {
    margin: 0 0 var(--space-4) !important;
    padding: var(--space-4) var(--space-6);
    border-left: 3px solid var(--primary-500);
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-primary) !important;
}

/* Vzorový formulář — má být vidět, že jde o text k opsání. */
.mb-legal__form {
    padding: var(--space-6);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}

    .mb-legal__form ul {
        list-style: none;
        padding-left: 0;
        font-family: var(--font-mono);
        font-size: 13.5px;
    }

.mb-legal__formtitle {
    font-weight: 700;
    color: var(--text-primary) !important;
}

/* Tabulky na právních stránkách (účely zpracování, cookies). Široká tabulka se posouvá
   uvnitř svého obalu — stránka se kvůli ní nikdy nesmí rozjet do šířky. */
.mb-legal__tablewrap {
    overflow-x: auto;
    margin: 0 0 var(--space-4);
}

.mb-legal__table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 13.5px;
    line-height: var(--leading-snug);
}

    .mb-legal__table th,
    .mb-legal__table td {
        padding: var(--space-3);
        border-bottom: 1px solid var(--paper-200);
        text-align: left;
        vertical-align: top;
        color: var(--text-secondary);
    }

    .mb-legal__table th {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: var(--tracking-widest);
        text-transform: uppercase;
        color: var(--text-muted);
        border-bottom-color: var(--border-strong);
    }

.mb-legal__mono {
    font-family: var(--font-mono);
    color: var(--text-primary) !important;
    white-space: nowrap;
}

.mb-legal__contact {
    display: inline-block;
    margin-right: var(--space-6);
    font-family: var(--font-mono);
    font-size: 15px;
}

.mb-legal__related {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--paper-200);
    font-size: 14px;
    color: var(--text-muted);
}

/* Cena na dlaždici zlevněné šarže. Barvou se odlišuje od běžné ceny, ať je poznat,
   že jde o slevu, ne o jinou cenovou hladinu. */
.mb-shelf__price--from,
.mb-listrow__price--from {
    color: var(--discount-color);
}

/* Datum trvanlivosti na dlaždici šarže — bez něj je to jen nižší cena bez vysvětlení. */
.mb-shelf__expiry {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--discount-color);
}

/* ===========================================================================
   Výpis „Dojídáme sklad" — zlevněné šarže
   --------------------------------------------------------------------------
   Mřížka dlaždic z pásu na homepage, jen zalomená do řádků. Dlaždice samotná
   je společná (LastCallCard), takže se výpis i pás nemohou rozejít.
   ========================================================================== */
.mb-expiring {
    padding-bottom: var(--space-16);
}

.mb-expiring__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    max-width: 70ch;
}

.mb-expiring__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-expiring__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-expiring__lead {
    margin: 0;
    font-size: 15.5px;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

.mb-expiring__count {
    margin: 0 0 var(--space-4);
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Dlaždice leží na tmavé ploše pásu; ve výpisu musí být čitelné na papíru,
   proto dostane vlastní tmavý podklad. */
.mb-expiring__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--primary-900);
}

.mb-expiring__note {
    max-width: 78ch;
    margin-top: var(--space-10);
}

/* --- Nákupní prvek: ubrat / počet / přidat -------------------------------- */

/* Na detailu produktu zabírá celou šířku sloupce; v okénku šarže tentýž prvek v malém. */
.mb-qty {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    overflow: hidden;
}

.mb-qty__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    border: 0;
    background: var(--surface-primary);
    color: var(--text-on-primary);
    cursor: pointer;
}

    .mb-qty__btn:hover:not(:disabled) {
        background: var(--primary-600);
    }

    .mb-qty__btn:disabled {
        background: var(--paper-200);
        color: var(--text-muted);
        cursor: default;
    }

/* Počet se dá přepsat, proto je to skutečné pole, ne jen text. */
.mb-qty__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    -moz-appearance: textfield;
}

    .mb-qty__input:focus {
        outline: 2px solid var(--saffron-400);
        outline-offset: -2px;
    }

.mb-qty--sm {
    width: auto;
    margin-top: 4px;
}

    .mb-qty--sm .mb-qty__btn {
        width: 30px;
    }

    .mb-qty--sm .mb-qty__input {
        width: 40px;
        font-size: 13px;
    }

/* Nakupni prvek na dlazdici: pres celou sirku pod cenou, -10 / -1 / pocet / +1 / +10.
   Tlacitka se deli o sirku rovnym dilem a smrskavaji se az na 24 px (mobil = dva sloupce,
   dlazdice ~130 px uvnitr), pole s cislem dostane zbytek. */
.mb-qty--tile {
    height: 36px;
    margin-top: 2px;
}

    .mb-qty--tile .mb-qty__btn {
        flex: 1 1 0;
        width: auto;
        min-width: 24px;
        max-width: 44px;
        padding: 0;
    }

    .mb-qty--tile .mb-qty__btn--step {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: -0.02em;
    }

    .mb-qty--tile .mb-qty__input {
        flex: 1.4 1 0;
        min-width: 30px;
        padding: 0;
        font-size: 14px;
    }

/* Radek vypisu: pevna sirka vpravo vedle ceny, vyssi tlacitka. */
.mb-qty--row {
    width: 220px;
    height: 40px;
    flex-shrink: 0;
}

    .mb-qty--row .mb-qty__btn {
        width: 40px;
    }

    .mb-qty--row .mb-qty__btn--step {
        font-family: var(--font-mono);
        font-size: 11.5px;
        font-weight: 600;
    }

    .mb-qty--row .mb-qty__input {
        font-size: 14px;
    }

/* --- Přepínač „blíží se datum" / „po datu" -------------------------------- */
.mb-expiring__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.mb-expiring__tab {
    padding: 7px 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
}

    .mb-expiring__tab.is-active {
        border-color: transparent;
        background: var(--surface-primary);
        color: var(--text-on-primary);
    }

/* Odkazy v hlavičce pásu na homepage — „zobrazit vše" a zboží po datu. */
.mb-lastcall__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}

.mb-lastcall__after {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--paper-200);
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .mb-lastcall__after:hover {
        color: var(--paper-0);
    }

/* ===========================================================================
   Zlevněné šarže na detailu produktu
   --------------------------------------------------------------------------
   Prodávají se odděleně od běžného skladu, takže i vizuálně stojí zvlášť —
   vlastní rámeček pod hlavní koupí, ne mezi jejími řádky.
   ========================================================================== */
.mb-batches {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.mb-batches__head {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-batch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--paper-200);
    border-left: 3px solid var(--saffron-400);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
}

/* Zboží po datu trvanlivosti — jiná barva pruhu, ať se nepřehlédne, že je to jiný případ. */
.mb-batch--after {
    border-left-color: var(--discount-500);
}

.mb-batch__left,
.mb-batch__right {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mb-batch__right {
    align-items: flex-end;
    text-align: right;
}

.mb-batch__date {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.mb-batch__stock {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

.mb-batch__price {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--discount-color);
    white-space: nowrap;
}

.mb-batch__was {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
    white-space: nowrap;
}

.mb-batch__off {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--discount-color);
    white-space: nowrap;
}

.mb-batch__add {
    margin-top: 4px;
    padding: 5px 12px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-primary);
    color: var(--text-on-primary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    .mb-batch__add:hover:not(:disabled) {
        background: var(--primary-600);
    }

    .mb-batch__add:disabled {
        opacity: .5;
        cursor: default;
    }

.mb-batches__note {
    margin: 0;
    font-size: 12.5px;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

/* Řádek košíku se zlevněnou šarží — proč je levnější a jaké datum to je. */
.mb-cartrow__gone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--error-500);
}

.mb-cartrow__batch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--discount-color);
}

.mb-batches__error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--error-100);
    font-size: 12.5px;
    color: var(--error-500);
}

/* ===========================================================================
   Stránka nenalezena (404)
   ========================================================================== */
.mb-notfound {
    max-width: 720px;
    padding-top: var(--space-10);
    padding-bottom: var(--space-16);
}

.mb-notfound__panel {
    padding: var(--space-12) var(--space-8);
}

/* Adresa, která nikam nevede — mono, ať je poznat, že jde o doslovný text.
   Dlouhá adresa se musí zalomit, jinak roztáhne panel do šířky. */
.mb-notfound__url {
    max-width: 100%;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.mb-notfound__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.mb-notfound__report {
    margin-top: var(--space-8);
    padding: var(--space-6);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.mb-notfound__reporttitle {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-notfound__reportlead {
    margin: 0 0 var(--space-4);
    font-size: 14px;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

    .mb-notfound__reportlead:last-child {
        margin-bottom: 0;
    }

/* Rozbalovač formuláře vypadá jako odkaz — tlačítko je to jen proto, že nikam nenaviguje. */
.mb-notfound__reportlink {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--link-color);
    text-decoration: underline;
    cursor: pointer;
}

    .mb-notfound__reportlink:hover {
        color: var(--link-hover);
    }

.mb-notfound__textarea {
    resize: vertical;
}

.mb-notfound__reportactions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* --- Chybová stránka (500) ------------------------------------------------ */

/* Chybová stránka má vlastní layout bez hlavičky (ta sahá do databáze) — zbývá logo. */
.mb-errorbar {
    border-bottom: 1px solid var(--paper-200);
    background: var(--surface-card);
}

.mb-errorbar__inner {
    display: flex;
    align-items: center;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.mb-error__detail {
    border-color: var(--border-strong);
}

.mb-error__type {
    margin: 0 0 var(--space-3);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--error-500);
    overflow-wrap: anywhere;
}

/* Zásobník volání se posouvá uvnitř svého rámce — stránka se kvůli němu nesmí rozjet. */
.mb-error__stack {
    max-height: 320px;
    margin: 0;
    padding: var(--space-3);
    overflow: auto;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: var(--leading-snug);
    color: var(--text-secondary);
}

/* ===========================================================================
   Doprava a platba — karty služeb nacenené podle nastavení eshopu
   ========================================================================== */
.mb-ship {
    /* Stejná šířka jako právní stránky — je to hlavně souvislý text. */
    max-width: 78ch;
    padding-bottom: var(--space-16);
}

/* Pruh se zemí, pro kterou ceny platí. Bez něj by ceny visely ve vzduchu — pásma
   dopravy jsou per země a přepínač je až nahoře v liště. */
.mb-ship__market {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-8);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    font-size: 14px;
    color: var(--text-primary);
}

.mb-ship__markethint {
    color: var(--text-muted);
}

.mb-ship__section {
    margin-bottom: var(--space-10);
}

.mb-ship__heading {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-ship__card {
    margin-bottom: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.mb-ship__cardhead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.mb-ship__name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.mb-ship__price {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--price-color);
    white-space: nowrap;
}

.mb-ship__note,
.mb-ship__payments {
    margin: var(--space-2) 0 0;
    font-size: 14px;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

.mb-ship__flag {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    font-size: 13.5px;
    color: var(--text-muted);
}

.mb-ship__free {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--success-500);
}

/* Rozpis pásem je užší než tabulky na právních stránkách — má jen podmínku a cenu. */
.mb-ship__table {
    min-width: 320px;
    margin-top: var(--space-3);
}

.mb-ship__vat,
.mb-ship__empty {
    margin: 0 0 var(--space-8);
    font-size: 13.5px;
    line-height: var(--leading-normal);
    color: var(--text-muted);
}

/* Země dodavatelů — mono štítky, stejný jazyk jako země původu u produktu. */
.mb-origin__countries {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-4) !important;
    padding-left: 0 !important;
    list-style: none;
}

.mb-origin__country {
    margin: 0 !important;
    padding: 6px var(--space-3);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
}

/* ===========================================================================
   Kontakt — spojení, adresy, mapa a formulář
   ========================================================================== */
.mb-contact {
    padding-bottom: var(--space-16);
}

.mb-contact__head {
    margin-bottom: var(--space-8);
}

.mb-contact__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-contact__lead {
    margin: var(--space-2) 0 0;
    max-width: 62ch;
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

/* Vlevo karty s údaji, vpravo mapa; pod 1150 px je .two-col přerovná pod sebe. */
.mb-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--grid-gap);
    align-items: start;
}

.mb-contact__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.mb-contact__card {
    padding: var(--space-6);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.mb-contact__cardhead {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-contact__person {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-contact__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 6px;
    color: var(--text-secondary);
}

.mb-contact__strong {
    font-family: var(--font-mono);
    font-size: 14.5px;
    color: var(--link-color);
    text-decoration: none;
}

    .mb-contact__strong:hover {
        color: var(--link-hover);
        text-decoration: underline;
    }

.mb-contact__address {
    margin: 0;
    font-style: normal;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

.mb-contact__ids {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
}

.mb-contact__idlabel {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}

.mb-contact__idvalue {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-primary);
}

.mb-contact__note {
    margin: var(--space-3) 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.mb-contact__map {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mb-contact__mapframe {
    width: 100%;
    height: 420px;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}

.mb-contact__maplink {
    align-self: flex-end;
    font-size: 13px;
    color: var(--link-color);
}

.mb-contact__form {
    margin-top: var(--space-12);
    padding: var(--space-8);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.mb-contact__formtitle {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.mb-contact__formlead {
    margin: var(--space-2) 0 var(--space-6);
    color: var(--text-secondary);
}

.mb-contact__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 720px;
}

.mb-contact__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.mb-contact__textarea {
    height: auto;
    padding: 12px 14px;
    line-height: var(--leading-normal);
    resize: vertical;
}

/* Past na roboty: z pohledu člověka pole neexistuje, ale v DOM je normálně vyplnitelné. */
.mb-contact__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mb-contact__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    flex-wrap: wrap;
}

.mb-contact__consent {
    max-width: 46ch;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: var(--leading-snug);
}

.mb-contact__banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: 13px 16px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    font-weight: 600;
}

    .mb-contact__banner--ok {
        border: 1px solid var(--success-500);
        background: var(--success-100);
        color: var(--success-500);
    }

    .mb-contact__banner--error {
        border: 1px solid var(--error-500);
        background: var(--error-100);
        color: var(--error-500);
    }

@media (max-width: 1150px) {
    .mb-contact__pair {
        grid-template-columns: 1fr;
    }

    .mb-contact__mapframe {
        height: 300px;
    }

    .mb-contact__form {
        padding: var(--space-6);
    }
}

/* ===========================================================================
   Blazor — chybová lišta circuitu
   ========================================================================== */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-3) var(--space-6);
    background: var(--error-100);
    color: var(--text-primary);
    border-top: 1px solid var(--error-500);
    box-shadow: var(--shadow-popover);
    font-size: var(--text-sm);
}

    #blazor-error-ui .dismiss {
        position: absolute;
        right: var(--space-4);
        top: 10px;
        cursor: pointer;
    }

/* Perex a redakční popis kategorie nad výpisem zboží. */
.mb-listing__perex {
    margin: var(--space-2) 0 0;
    max-width: 70ch;
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.mb-listing__html {
    margin-bottom: var(--space-6);
    max-width: 80ch;
}

/* --- Doplacení objednávky (PaymentPanel) ---------------------------------------------
   Odpočet k bráně a záchranná tlačítka. Rám je akcentní, protože je to jediná věc, kterou
   má zákazník na stránce udělat — souhrn objednávky pod ním je jen k přečtení. */
.mb-paypanel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--saffron-500);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.mb-paypanel__count {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Číslo odpočtu — mono, ať se šířka nemění s každou vteřinou. */
.mb-paypanel__ring {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--saffron-500);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--saffron-900);
}

.mb-paypanel__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.mb-paypanel__text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.mb-paypanel__error {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--error-100);
    font-size: var(--text-sm);
    color: var(--error-500);
}

.mb-paypanel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* „Zaplatím později" je ústup, ne akce — proto text, ne tlačítko. */
.mb-paypanel__later {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.mb-paypanel__later:hover {
    color: var(--text-primary);
}

.mb-paypanel__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}

.mb-paypanel__optionstitle {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.mb-paypanel__option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-page);
    font-family: inherit;
    font-size: var(--text-base);
    text-align: left;
    cursor: pointer;
}

.mb-paypanel__option:hover:not(:disabled) {
    border-color: var(--primary-500);
}

.mb-paypanel__option.is-current {
    border-color: var(--primary-500);
    background: var(--surface-sunken);
    cursor: default;
}

.mb-paypanel__optionname {
    flex: 1 1 auto;
    color: var(--text-primary);
}

.mb-paypanel__optionprice {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    color: var(--price-color);
}

.mb-paypanel__optionnote {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Potvrzení změny platby — částka se mění, proto se ptáme a rovnou ukazujeme rozdíl. */
.mb-paypanel__confirm {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}

.mb-paypanel__diff {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
}

.mb-paypanel__diff > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.mb-paypanel__diff dt {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.mb-paypanel__diff dd {
    margin: 0;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.mb-paypanel__total {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--price-color);
}

/* Původní částka vedle nové — potlačená, aby nekonkurovala té platné. */
.mb-paypanel__was {
    margin-left: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 400;
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Hmotnosti v kartě dopravy — z čeho vyšla cena. Drobné a potlačené, je to podklad,
   ne nabídka; mono číslice, ať se hodnoty pod sebou zarovnají. */
.mb-co__weights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-default);
}

.mb-co__weights > div {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.mb-co__weights dt {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.mb-co__weights dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

/* Počet balíků u dopravy — je to důvod vyšší ceny, tak ať to není šedivé jako poznámka. */
.mb-co__parcels {
    color: var(--saffron-900);
    font-weight: 600;
}

@media (max-width: 640px) {
    .mb-categories {
        grid-template-columns: 1fr !important;
    }
}