/*  Generated: 2026-10-15 17:57:40 */
/* ============================================================
   Design system — výpis produktů v mobilním režimu (Phase 99 / E12, 2026-10-02)
   Načítá se v mobilním režimu ($dsMobile, @layout.latte: telefon a od D0 tablet s designSystem.tablet) a od D11 i na novém
   desktopu, ale JEN na převedené stránce výpisu ($dsDesktop && $dsVypis — kategorie), od D13a na homepage a od D13e na
   kartě produktu ($dsDesktop && $dsHomepage / $dsKarta — nová karta produktu v obalech se značkou `.ds-karty`).
   Ostatní desktopové stránky ho nedostanou. Pravidla pro tablet (D2) jsou pod html.ds-tablet, pro desktop (D11) pod html.ds-desktop.ds-vypis
   (konec souboru) — pravidla bez prefixu (lišta, pilulky, stránkování, karta E18) platí na desktopu taky a sekce D11 je
   jen přizpůsobuje šířce.
   ============================================================ */

/* Mřížka karet: `minmax(0, 1fr)`, NE holé `1fr` (responsive-stylesheet.css ř. ~1598) — sloupec `1fr` se nezúží
   pod min-content karty a na úzkém telefonu výpis přetekl do šířky (změřeno 3. 10.: 320 px 168+169 px ve výpisu
   304 px, hu 191+192 px; hu i na 360 px). Chrome na Androidu kvůli tomu rozšíří layout viewport a s ním
   i panel filtru přes celou obrazovku — křížek vyjel mimo displej (E13). Dlouhé slovo v názvu se zalomí.
   POČET sloupců na telefonu zůstává přesně podle legacy (do 480 px dva — responsive-stylesheet.css ř. ~1598; 481–1024 px
   tři — ř. ~665 a ~2117, na tom stojí i rámečky nth-child(3n…)); mění se JEN typ sloupce. Tablet má od D2 vlastní
   počet (4 / 5, html.ds-tablet níž). Bez podmínek by telefon na šířku
   (nízký režim R13, 844 px) spadl ze tří sloupců na dva — nález Phase 7B. max-width = výjimka z min-width breakpointů
   .ds-* (soubor restyluje legacy, hranice jsou její). */
@media (max-width: 480px) {
    .productListing,
    .vsechny-barevne-varianty {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 481px) and (max-width: 1024px) {
    .productListing,
    .vsechny-barevne-varianty {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* D2 (R27/3, vlastník 11. 10.): tablet 4 sloupce, na šířku 5 — karta zhruba jako na telefonu (~185–270 px; dřív
   232–337 px a na iPadu na šířku jedna řada na obrazovku). Telefon zůstává na dvou, na šířku na třech.
   Svislé čáry mezi kartami: legacy je kreslí `border-left` a v 1. sloupci ho ruší přes nth-child podle počtu sloupců
   (3n-1 do 980 px, 4n-2 nad) — to drží jen bez děr v mřížce. Po „Načíst další" banner připojené stránky (přes 2 sloupce)
   při 5 sloupcích jednou za čas začne v posledním sloupci, skočí na další řádek a nechá díru (5. stránka; 7B D2,
   2. kolo) — od ní by nth-child čáry rozházel. Proto na tabletu BEZ nth-child: čára všem kartám (barva = horní okraj
   karty) a 1. sloupci ji ořízne výpis (`clip-path` jen 1 px zleva, nahoru, doprava a dolů nic); díru zaplní další karta
   (`dense`). Nezávisí to na pořadí ani na počtu načtených stránek.
   „Tablet" = třída ds-tablet na <html> (server: mobilní režim NA TABLETU, BasePresenter::rozhodniDsTablet) a šířka
   ≥ 768 px. Telefon ji nedostane (server ho pozná podle UA / Client Hints — i rozloženou skládačku a telefon na šířku)
   a vypnutí designSystem.tablet ji vrátí — proto třída, ne jen šířka okna (nález 7B D2). Tatáž podmínka v header, menu,
   search, filter a listing.css (DesignSystemTabletTest). */
@media (min-width: 768px) {
    html.ds-tablet .productListing,
    html.ds-tablet .vsechny-barevne-varianty {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-flow: row dense;
        clip-path: inset(-100vh -100vw -100vh 1px);
    }

    html.ds-tablet .productListing div.centerBoxContentsProducts:nth-child(n),
    html.ds-tablet .vsechny-barevne-varianty div.centerBoxContentsProducts:nth-child(n) {
        border-left-width: 1px;
    }

    /* Inventura § 34: „K produktu se hodí" jako mřížka (bez S6 / designSystem.unifiedProduct, který ji nahradí karuselem).
       Legacy `repeat(5, 1fr)` (stylesheet.css) v pásu 768–1024 px nesrazí sloupec pod min-content karty → mřížka přetekla
       a `overflow: hidden` uřízl pátou kartu na pravém okraji (snímek iPad 820 px). Proto sloupce jako výpis (4, na šířku 5,
       minmax(0, 1fr)) a všechny položky jako na telefonu (legacy pravidlo do 768 px): sbalení na 520 px + „Zobrazit další"
       počítá s pěti sloupci — tlačítko se ukáže až od šesti položek, takže při čtyřech sloupcích a právě pěti položkách by
       pátá zůstala schovaná bez možnosti rozbalit. Přepínač (checkbox) pryč i z pořadí Tab — bez tlačítka nic nedělá. */
    html.ds-tablet .product-detail-crosssell .crosssell-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-height: none;
    }

    html.ds-tablet .product-detail-crosssell .crosssell-toggle,
    html.ds-tablet .product-detail-crosssell .crosssell-more-btn {
        display: none;
    }

    /* S1 (vlastník 14. 10., § 34; přepínač designSystem.unifiedCard): jednotná karta na tabletu — mezera 16 px
       a boční vnitřek 14 px jako nový desktop, štítky přes fotku v jeho velikosti, šipky karuselu o rozšíření zpět.
       Telefonní hodnoty v bloku S1 u karet nového desktopu; tady vyšší specificita (.ds-tablet), pořadí nevadí. */
    html.ds-tablet.ds-jednotna-karta .productListing,
    html.ds-tablet.ds-jednotna-karta .vsechny-barevne-varianty {
        gap: 16px;
        clip-path: none;
    }
    html.ds-tablet.ds-jednotna-karta .productListing .centerBoxContentsProducts-in,
    html.ds-tablet.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in {
        padding-right: 14px;
        padding-left: 14px;
    }
    html.ds-tablet.ds-jednotna-karta .owl-box.ds-karty {
        width: calc(100% + 16px);
        margin-right: -8px;
        margin-left: -8px;
    }
    html.ds-tablet.ds-jednotna-karta .owl-box.ds-karty .owl-item {
        padding: 0 8px;
    }
    html.ds-tablet.ds-jednotna-karta .productListing .listing_foto .ikony > .doprava,
    html.ds-tablet.ds-jednotna-karta .productListing .listing_foto .doprava_big,
    html.ds-tablet.ds-jednotna-karta .ds-karty .listing_foto .ikony > .doprava,
    html.ds-tablet.ds-jednotna-karta .ds-karty .listing_foto .doprava_big {
        gap: 5px;
        height: 26px;
        padding: 0 10px;
        font-size: 13px;
    }
    html.ds-tablet.ds-jednotna-karta .productListing .listing_foto .ikony > .doprava .fas,
    html.ds-tablet.ds-jednotna-karta .productListing .listing_foto .doprava_big .fas,
    html.ds-tablet.ds-jednotna-karta .ds-karty .listing_foto .ikony > .doprava .fas,
    html.ds-tablet.ds-jednotna-karta .ds-karty .listing_foto .doprava_big .fas {
        font-size: 12px;
    }
    html.ds-tablet.ds-jednotna-karta .productListing .listing_foto .sleva,
    html.ds-tablet.ds-jednotna-karta .ds-karty .listing_foto .sleva {
        height: 26px;
        padding: 0 10px;
        line-height: 26px;
    }
    html.ds-tablet.ds-jednotna-karta .productListing .listing_foto .sleva .sleva-hodnota,
    html.ds-tablet.ds-jednotna-karta .ds-karty .listing_foto .sleva .sleva-hodnota {
        font-size: 13px;
        line-height: 26px;
    }
    html.ds-tablet.ds-jednotna-karta .owl-box.ds-karty .owl-buttons .owl-prev {
        left: 2px;
    }
    html.ds-tablet.ds-jednotna-karta .owl-box.ds-karty .owl-buttons .owl-next {
        right: 2px;
    }
    /* S2 (§ 34): pruh Navštívených na tabletu jako na desktopu (telefon má menší miniaturu, sekce D13f) */
    html.ds-tablet.ds-jednotne-sekce .ds-navstivene {
        padding: 16px 20px 18px;
    }
    html.ds-tablet.ds-jednotne-sekce .ds-navstivene__seznam {
        gap: 16px;
    }
    html.ds-tablet.ds-jednotne-sekce .ds-navstivene__polozka {
        flex-basis: 110px;
        width: 110px;
    }
    html.ds-tablet.ds-jednotne-sekce .ds-navstivene__foto {
        width: 110px;
        height: 110px;
    }
}
@media (min-width: 1025px) {
    html.ds-tablet .productListing,
    html.ds-tablet .vsechny-barevne-varianty {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    html.ds-tablet .product-detail-crosssell .crosssell-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
.productListing .itemTitle,
.ds-karty .itemTitle {
    overflow-wrap: anywhere;
}
/* „Všechny barevné varianty" na detailu (E19): VIP výzva se smí zalomit jako ve výpisu (níž, E18). Legacy `nowrap`
   roztáhl vnitřní mřížku karty (jediný sloupec `auto`) přes kartu — při 320 px stránka šla posunout do strany o 7 px,
   na bibik.hu o 24 px (změřeno 4. 10.; stejné i před E19). Výpis to nemá, karta je tam sloupcový flex (E18). */
.vsechny-barevne-varianty .centerBoxContentsProducts-in .product-card__vip-title,
.vsechny-barevne-varianty .centerBoxContentsProducts-in .product-card__vip-subtitle {
    white-space: normal;
}

/* ------------------------------------------------------------
   Lišta výpisu — Filtry · řazení · počet (varianta B, vlastník 2. 10.)
   Jedna béžová pilulka (jako pole vyhledávání), v ní segment Filtry vyplněný tmavě (jako tlačítko
   menu v hlavičce), řazení a počet. Platí pro všechny výpisy s lištou (Category, Novinky, Topall,
   Skladem, ParamBrand, ParamAuthor, značka, hledání) — markup Phase 85 se nemění, jen vzhled.

   Proč tu je i ROZLOŽENÍ (flex, sticky), ne jen vzhled: pravidla Phase 85 v responsive-stylesheet.css
   platí do 767 px. Telefon s novým vzhledem má i výšku na šířku (nízký režim, R13; iPhone 844 px) —
   tam by lišta zůstala `display: contents` se starým vzhledem. Tenhle soubor dostane jen telefon,
   takže podmínka šířkou tu není potřeba.

   Selektory mají stejnou specificitu jako Phase 85 a soubor se načítá PO responsive-stylesheet.css,
   takže vyhrává pořadí; tenantní `.modal-button-filtr:hover` (0,0,2,0) prohraje se (0,0,3,0).
   ------------------------------------------------------------ */
.listing-toolbar {
    --ds-listing-bar-h: 40px;        /* výška pilulky — „nižší řádek" (vlastník 2. 10.); dřív 48 */
    --ds-listing-bar-pad: 4px;       /* bílý pruh nad a pod pilulkou — připnutá lišta v rozích nesmí prosvítat */
    display: flex;
    align-items: center;
    gap: 0;
    margin: 2px 0 8px;
    padding: var(--ds-listing-bar-pad) 0;
    border: 0;
    border-radius: 0;
    background: var(--ds-surface);
    /* Připnutí jako Phase 85 (top = výška sbalené hlavičky, app.js initListingStickyOffset; v nízkém
       režimu 0). z-index v pásmu 10000–10999: nad obsahem, pod hlavičkou a modály. */
    position: sticky;
    top: var(--listing-sticky-top, 99px);
    z-index: 10500;
}
/* Béžová pilulka je vrstva POD obsahem lišty, ne pozadí lišty: lišta sama zůstává bílý obdélník,
   jinak by v oblých rozích připnuté lišty prosvítaly produkty (změřeno na prototypu). z-index -1
   zůstává uvnitř lišty — sticky + z-index z ní dělá samostatný kontext vrstvení. */
.listing-toolbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--ds-listing-bar-pad);
    bottom: var(--ds-listing-bar-pad);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface-muted);
    z-index: -1;
}
.listing-toolbar > .clearBoth,
.listing-toolbar #productsListingTop .clearBoth,
.listing-toolbar .navSplitPagesLinks {
    display: none;
}

/* --- Filtry: tmavý segment ------------------------------------ */
.listing-toolbar > #button-count {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}
.listing-toolbar .modal-button-filtr,
.listing-toolbar .modal-button-filtr:hover,
.listing-toolbar .modal-button-filtr:focus,
.listing-toolbar .modal-button-filtr.has-filters,
.listing-toolbar .modal-button-filtr.has-filters:hover {
    /* Výplň i barva textu SPOLEČNĚ a pro všechny stavy: iOS drží :hover i po klepnutí a Phase 85
       i témata klientů na :hover přebarvují (viz komentář v responsive-stylesheet.css). */
    background: var(--ds-menu-bg);
    color: var(--ds-menu-fg);
    font-weight: 600;               /* i se zapnutým filtrem — Phase 85 .has-filters dává 700 (nález 7B) */
}
.listing-toolbar .modal-button-filtr {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;                    /* legacy .modal-button-filtr má width: 100% */
    height: var(--ds-listing-bar-h);
    margin: 0;
    border: 0;
    border-radius: var(--ds-radius-pill);
    font-size: 1.5rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}
/* Odsazení zvlášť (ne v hlavním pravidle výš), ať ho úzké telefony níž přepíšou jedním řádkem. */
.listing-toolbar .modal-button-filtr {
    padding: 0 14px;
}
.listing-toolbar .modal-button-filtr::after {
    content: none;
}
.listing-toolbar .modal-button-filtr .fas,
.listing-toolbar .modal-button-filtr:hover .fas,
.listing-toolbar .modal-button-filtr:focus .fas,
.listing-toolbar .modal-button-filtr.has-filters .fas,
.listing-toolbar .modal-button-filtr.has-filters:hover .fas {
    color: var(--ds-menu-fg);
    font-size: 1.5rem;
    padding: 0;
}
/* Počet zapnutých filtrů — bílý kruh s tmavým číslem (inverze segmentu) */
.listing-toolbar .modal-button-filtr .filter-count,
.listing-toolbar .modal-button-filtr:hover .filter-count,
.listing-toolbar .modal-button-filtr:focus .filter-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
/* Obrys fokusu tmavý: akcent (#AC876C) na béžové měl kontrast 2,83 : 1, pod 3 : 1 (WCAG 1.4.11, nález 7B) */
.listing-toolbar .modal-button-filtr:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 2px;
}

/* --- Řazení: nativní <select> přes celou plochu segmentu ------- */
.listing-toolbar > #select-sorter-out {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: var(--ds-listing-bar-h);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
/* Ze štítku „Řazení:" zůstane jen ikona (Phase 85: slovo se na úzkém displeji nevejde) */
.listing-toolbar #select-sorter-out > div {
    display: block;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0;
    line-height: 0;
    z-index: 3;
    pointer-events: none;   /* klepnutí projde na <select> */
}
.listing-toolbar #select-sorter-out > div .fas {
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    color: var(--ds-text-primary);
}
.listing-toolbar #select-sorter {
    width: 100%;
    height: var(--ds-listing-bar-h);
    margin: 0;
    padding: 0 26px 0 36px;     /* vlevo ikona řazení, vpravo šipka */
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ds-text-primary);
    font-size: 1.6rem;              /* 16 px = práh iOS: pod ním Safari při klepnutí zvětší stránku (nález 7B) */
    line-height: var(--ds-listing-bar-h);
    text-align: left;
    text-align-last: left;
    -webkit-appearance: none;
    appearance: none;
}
.listing-toolbar #select-sorter:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: -2px;
}
.listing-toolbar #select-sorter-out::after {
    content: "\f078";               /* šipka DOLŮ — rozbalovátko (legacy má \f054 = doprava) */
    right: 12px;
    font-size: 1.2rem;
    color: var(--ds-text-primary);
    z-index: 3;
}

/* --- Počet: jen číslo, oddělené čárou ------------------------- */
.listing-toolbar > [id^="snippet--paginationTop"] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    height: 24px;
    margin: 0;
}
/* Nula výsledků: počet (.navSplitPagesResult) se nevykreslí — bez toho by v pilulce zbyla osamocená čára (nález 7B) */
.listing-toolbar > [id^="snippet--paginationTop"]:not(:has(.navSplitPagesResult)) {
    display: none;
}
/* Oddělovač před počtem: barva z tokenu, zjemněná průhledností (komponenty nečtou surové barvy, AR3) */
.listing-toolbar > [id^="snippet--paginationTop"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--ds-field-border);
    opacity: .35;
}
.listing-toolbar #productsListingTop {
    float: none;                    /* legacy float: left; width: 100 % (stylesheet.css) — dnes neutralizuje jen flex */
    width: auto;
    margin: 0;
    padding: 0 12px 0 10px;
    color: var(--ds-text-muted);
    line-height: 1.25;
    white-space: nowrap;
}
.listing-toolbar #productsListingTop strong {
    color: var(--ds-text-secondary);
}
.listing-toolbar #productsListingTopNumber,
.listing-toolbar .navSplitPagesResult {
    float: none;
    height: auto;
    margin: 0;
    font-size: 1.4rem;              /* tady, ne na #productsListingTop — legacy písmo je přímo na tomto prvku */
    line-height: 1.25;
}
/* Slovo „výsledků" jen pro čtečky (vizuálně schované, v textu zůstává) — v jednom řádku se na
   telefon nevejde a číslo vedle řazení je srozumitelné (rozhodnutí vlastníka 2. 10., varianta B). */
.listing-toolbar #productsListingTop .toolbar-count-word {
    display: inline;                /* Phase 85 ho pod 360 px schovává display: none — tím by zmizelo i čtečce */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Telefony užší než 390 px (375 iPhone SE/mini, 360 běžné Androidy): se zapnutým filtrem a trojciferným počtem
   chybělo pro „Od nejlevnějšího" (16 px = 125 px) na 375 px 4 px, na 360 px přes 20 px. Ustupuje IKONA řazení
   (22 px) a ubere se odsazení — šipka dolů dál říká „rozbalovací výběr", text volby nese informaci, kterou jinde
   zákazník nezjistí. Měřeno: acceptance-e12.funkce.js sekce „uzky" (320/360/375/390, cs i sk). */
@media (max-width: 389px) {
    .listing-toolbar #select-sorter-out > div {
        display: none;
    }
    .listing-toolbar #select-sorter {
        padding-left: 12px;
    }
    .listing-toolbar .modal-button-filtr {
        gap: 6px;
        padding: 0 12px;
    }
    .listing-toolbar #productsListingTop {
        padding: 0 10px 0 8px;
    }
}

/* Nejužší telefony (320 px). Písmo řazení zmenšit NELZE (16 px = práh iOS, jinak zvětší stránku) a nativní
   <select> ořízne text uprostřed písmene (trojtečku neumí). Místo pro nejdelší volbu („Od nejlevnějšího",
   sk „Od najlacnejšieho") se proto uvolní tím, že se POČET schová — jen vizuálně, čtečka ho přečte dál.
   Je to doplňková informace; Filtry a řazení jsou ovladače. Hranice 359 px je převzatá z Phase 85
   (responsive-stylesheet.css), proto max-width — výjimka z min-width breakpointů .ds-* (soubor restyluje legacy). */
@media (max-width: 359px) {
    .listing-toolbar > [id^="snippet--paginationTop"] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
}

/* --- Phase 99 / E14 — popis kategorie: řádek „O kategorii …" pod výpisem --------------------------------------------
   Místo velké karty pod nadpisem (tučný titulek + obří tlačítko, výpis pod ohybem) jeden řádek jako skupina filtru.
   Vnitřní <details> AI karty otevře server a označí data-ds-otevreno (DsPopisKategorie) — jen u označené se skryje
   její shrnutí; neoznačená (nečekaný tvar popisu) má shrnutí dál vidět i funkční, obsah tedy nikdy nezůstane schovaný.
   Kartu (description-box.css) jen zklidní: bez rámečku, stínu a vnitřních okrajů, nadpisy menší. */
.ds-category-about {
    margin: 24px 0 8px;
    border-top: 1px solid var(--ds-divider);
    border-bottom: 1px solid var(--ds-divider);
    color: var(--ds-text-primary);
    text-align: left;
}
.ds-category-about__row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 12px 44px 12px 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.3;
}
.ds-category-about__row::-webkit-details-marker {
    display: none;
}
.ds-category-about__row::marker {
    content: "";
}
.ds-category-about__chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid var(--ds-text-primary);
    border-bottom: 2px solid var(--ds-text-primary);
    transform: rotate(45deg);
    transition: transform .15s ease-out;
}
.ds-category-about[open] .ds-category-about__chevron {
    margin-top: -2px;
    transform: rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
    .ds-category-about__chevron {
        transition: none;
    }
}
.ds-category-about__row:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 2px;
}
.ds-category-about__body {
    padding: 0 0 16px;
    color: var(--ds-text-secondary);
    font-size: 1.5rem;
    line-height: 1.55;
}
.ds-category-about .description-box {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    line-height: inherit;
}
.ds-category-about .description-box > details[data-ds-otevreno] > summary {
    display: none;
}
.ds-category-about .description-box .desc-content {
    padding: 0;
}
/* legacy `.columnCenter p { text-align: justify }` dělá na úzkém displeji díry mezi slovy (i u starého tvaru popisu) */
.ds-category-about .ds-category-about__body p,
.ds-category-about .ds-category-about__body li {
    text-align: left;
}
/* úvod karty bez modré bočnice a podkladu — v řádku je to obyčejný první odstavec */
.ds-category-about .description-box section.lead {
    padding: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
}
.ds-category-about .description-box section.lead p {
    color: inherit;
}
.ds-category-about .description-box section h2 {
    margin: 0 0 8px;
    color: var(--ds-text-primary);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
}

/* --- Phase 99 / E16 — podkategorie jako vodorovně rolovaná řada pilulek -------------------------------------------
   Vlastník 3. 10. (varianta A — úspora místa před mřížkou): na /krmeni blok 438 px → jedna řada, první produkt
   833 → ~450 px. Totéž zobrazení mají typy výrobků na stránce značky (stejný .categorie-list).
   Mění se JEN telefon s novým vzhledem — mřížka Phase 85 (responsive-stylesheet.css, max-width 767 px) platí dál pro
   všechny ostatní; tenhle soubor desktop nedostane (tablet od D0 ano — v mobilním režimu má tytéž pilulky).
   Prefix #indexProductList: tenanti barví plošky vlastním pravidlem (bibik-cz `.categorie-list ul li a` #f1f1f1,
   tenant-shared `…a:hover` 0,2,3) a načítají se PO nás — bez id by přebili béžovou z tokenu.
   Přehlédnutelnost zbytku řady (Baymard: vodorovně rolované řady se přehlížejí) — podmínka vlastníka pro tuhle variantu:
   - slábnoucí pravý okraj 32 px: padne-li okraj displeje do mezery mezi pilulkami (Android 412 px), poslední viditelná
     pilulka leží ve slábnutí; konec řady má odsazení 32 px, takže dorolovaná poslední pilulka slábnutím nezasažena;
   - pilulka nejvýš `100vw − 72 px` s trojtečkou: dlouhý název (goldex „Zásnubní prsteny se zirkony bílé zlato EXCLUSIVE
     line" = 405 px na 390px displeji, nález Phase 7B) jinak schoval celou další pilulku za okraj. 72 = okraj 8 + odsazení
     řady 8 + mezera 8 + slábnutí 32 + 16 px další pilulky vidět neprůhledně. Celý název zůstává v textu odkazu (čtečka).
   Řada sahá k okrajům displeje (okraj stránky 8 px) a nesmí rozšířit stránku. */
#indexProductList .categorie-list {
    margin: 0 -8px 12px;
    padding: 0;
}
#indexProductList .categorie-list ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 0 32px 0 8px;
    /* Tab na napůl schovanou pilulku ji doroluje celou mimo slábnutí */
    scroll-padding-inline: 8px 32px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
}
#indexProductList .categorie-list ul::-webkit-scrollbar {
    display: none;
}
#indexProductList .categorie-list ul:after {
    content: none;
}
#indexProductList .categorie-list ul li {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    float: none;
}
/* :hover/:focus ve stejném pravidle — iOS drží :hover po klepnutí a tenant ho barví; core k němu přidává šedý stín
   (stylesheet.css `.categorie-list ul li a:hover { box-shadow }`), proto box-shadow: none.
   Výška z line-height (ne pevná height): při zvětšeném písmu se pilulka nepřelije. */
#indexProductList .categorie-list ul li a,
#indexProductList .categorie-list ul li a:hover,
#indexProductList .categorie-list ul li a:focus {
    display: block;
    box-sizing: border-box;
    max-width: calc(100vw - 72px);
    padding: 0 16px;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface-muted);
    box-shadow: none;
    color: var(--ds-text-primary);
    font-size: 1.5rem;
    line-height: 40px;
    /* core `a { transition: all .35s }` by animoval i prstenec fokusu a stín — pilulky přechod nepotřebují */
    transition: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
/* Prstenec uvnitř pilulky — řada má overflow-x: auto, které by vnější prstenec nahoře a dole ořízlo (nález Phase 7B). */
#indexProductList .categorie-list ul li a:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: -2px;
}
#indexProductList .categorie-list ul li a:before {
    content: none;
}
/* Obrázky pryč — VŠECHNY, ne jen zástupné: BÍBÍK obrázky podkategorií nemá (0 z 352), goldexové vracejí 404. Kdyby se
   data opravila, pilulka je pořád bez obrázku; obrázky by chtěly vlastní návrh (výzkum E16 — Rohlík má fotky). */
#indexProductList .categorie-list ul li a img {
    display: none;
}

/* ------------------------------------------------------------
   Stránkování pod výpisem — „Načíst dalších N" (Phase 99 / E15, vlastník 3. 10.: připojovat)
   Šablona components/paginator/dsPager.latte (PagePaginator ji vybere jen pro telefon s novým vzhledem),
   chování core/js/src/ds-pager.js. Počítadlo + tenký pruh postupu + tlačítko design systemu se zeleným
   obrysem přes celou šířku + kompaktní čísla stránek 44 px (Apple HIG; WCAG 2.5.8 minimum 24 px).
   Starý blok „24 dalších" a odkaz „Nahoru" stojí v šablonách výpisů MIMO komponentu (#productsListingBottom),
   proto se schovávají tady; plovoucí šipka nahoru (#backToTop) zůstává.
   ------------------------------------------------------------ */
#productsListingBottom {
    position: static;
    margin: 16px 0 24px;
    padding: 0;
    border: 0;
}
#productsListingBottom #go-top,
#productsListingBottom #next-listing {
    display: none;
}
.ds-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0;
    text-align: center;
}
.ds-pager .ds-pager__count {
    margin: 0;
    padding: 0;
    color: var(--ds-text-secondary);
    font-size: 1.4rem;
    line-height: 2rem;
}
.ds-pager .ds-pager__bar {
    display: block;
    width: 160px;
    max-width: 100%;
    height: 4px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-divider);
    overflow: hidden;
}
.ds-pager .ds-pager__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ds-text-primary);
}
.ds-pager .ds-pager__more {
    margin: 4px 0 0;
}
.ds-pager .ds-pager__more[aria-busy="true"] {
    opacity: .6;
    pointer-events: none;
}
.ds-pager .ds-pager__pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}
.ds-pager .ds-pager__pages li {
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}
.ds-pager .ds-pager__pages li:before {
    content: none;
}
/* :hover/:focus ve stejném pravidle — iOS drží :hover po klepnutí a core i tenanti barví `a:hover`.
   Bez přechodu z core `a { transition: all .35s }` (animoval by i prstenec fokusu — E16). */
.ds-pager .ds-pager__page,
.ds-pager .ds-pager__page:link,
.ds-pager .ds-pager__page:visited,
.ds-pager .ds-pager__page:hover,
.ds-pager .ds-pager__page:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    height: 44px;
    padding: 0 6px;
    border-radius: var(--ds-radius-pill);
    background: none;
    color: var(--ds-text-primary);
    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: none;
    transition: none;
}
.ds-pager .ds-pager__page[aria-current="page"] {
    background: var(--ds-menu-bg);
    color: var(--ds-menu-fg);
    font-weight: 700;
}
.ds-pager .ds-pager__page:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: -2px;
}
.ds-pager .ds-pager__gap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 44px;
    color: var(--ds-text-muted);
}
/* Banner PŘIPOJENÉ stránky (ds-pager.js mu dá data-ds-pripojeno; první banner výpisu ne): legacy ho do 767 px
   řadí `order: 2` za prvních 10 karet výpisu (responsive-stylesheet.css ř. ~1610), takže by vyskočil k banneru první
   stránky. `order: 3` = jako ostatní karty → zůstane na svém místě v DOM mezi kartami své stránky. Výsledky hledání
   mají `order: inherit` se silnějším selektorem (#advSearchResultsDefault) — tam se neřadí nic a pravidlo nevyhraje. */
@media (max-width: 767px) {
    .productListing div.bannerListing[data-ds-pripojeno] {
        order: 3;
    }
}
@media (max-width: 767px) {
    /* D11 (R30): dlaždice s bannerem (před 3. kartou) zůstane mezi prvními kartami — bez pořadí (0) by skočila na začátek.
       Je to další potomek výpisu, takže legacy `nth-child(-n+11)` s ní zahrne jen 9 karet a 10. jde za banner výpisu.
       Díru, která by tím před bannerem zůstala, zaplní 10. karta sama — výpis s dlaždicí má `dense` (níž). Dřívější
       pravidlo „o potomka víc" (nth-child(-n+12)) tím bylo nadbytečné: mutace, která ho odebrala, test přežila. */
    .productListing .ds-dlazdice {
        order: 1;
    }
}

/* ============================================================
   Phase 99 / E18 — karta produktu ve výpisu, varianta V1 (výběr vlastníka 4. 10. 2026; docs/phase-99-mobilni-redesign/
   vyzkum-z2-vypis.md § 6b a kolo 3). Šablona (components/productList/default.latte, větev $dsCard) přidává prvky
   .ds-card__*; přeskládání a vzhled platí JEN uvnitř `.productListing` (výpisy kategorií, značek, hledání, oblíbených…)
   a v obalech se značkou `.ds-karty` (D13e: karusely, „K produktu se hodí", barevné varianty… — ke každému selektoru
   karty výpisu dvojče v témž pravidle, oběma směry hlídá DesignSystemHomepageDesktopTest::testCssKartyMaDvojceKaruselu).
   Značku dává šablona plochy podle
   BasePresenter::dsKarty (telefon a tablet za přepínačem designSystem.karty, nový desktop podle oblasti). Bez značky
   kartu vykreslují stejnou šablonou, ale nové prvky zůstanou skryté a karta vypadá jako dřív.
   ============================================================ */
.ds-card__chips,
.ds-card__params,
.ds-card__stock {
    display: none;
}
/* Phase 99 / D11 (R31, vlastník 12. 10.) — karty DALŠÍ stránky na doplnění neúplného posledního řádku (server je posílá
   jen tabletu a novému desktopu kategorie). Schované; kolik jich ukázat podle počtu sloupců, rozhodne ds-doplnky.js.
   Bez JS zůstanou schované (řádek jako dřív). Specificita nad legacy pravidly karty, která nastavují display. */
.productListing > .ds-doplnek:not(.is-viditelny) {
    display: none;
}

/* Phase 99 / D11 (R30, vlastník 12. 10.) — banner BAN_2026_BEST jako dlaždice přes dva sloupce před 3. kartou (místo bloku
   Nejprodávanější nad výpisem; šablona productList/default.latte, jen nový vzhled výpisu podkategorie, 1. strana).
   Banner u horního okraje, ne uprostřed výšky řádku; čáry mřížky jako karty (horní a levá — 1. sloupec ořízne výpis).
   Na desktopu a tabletu leží v 1. řádku vedle dvou karet, na telefonu (2 sloupce) přes celou šířku za 1. řádkem. */
.productListing .ds-dlazdice {
    grid-column: span 2;
    box-sizing: border-box;
    padding: 16px;
    border-top: 1px solid var(--ds-outline-soft);
    border-left: 1px solid var(--ds-outline-soft);
}
.productListing .ds-dlazdice a {
    display: block;
}
.productListing .ds-dlazdice img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ds-radius-card);
}
/* Dlaždice je další potomek výpisu: legacy čáry mezi kartami na telefonu (border-left: 0 přes nth-child(2n-2) do 480 px
   a 3n-1 do 980 px — responsive-stylesheet.css ř. ~2102 a ~2125) by se za ní posunuly o sloupec, a na telefonu na šířku
   (3 sloupce) by dlaždice přes dva sloupce za 2. kartou skočila na další řádek a nechala díru (nález 7B D11). Výpis
   s dlaždicí proto kreslí čáry jako tablet a nový desktop (D2, D11): čára všem kartám, 1. sloupec ořízne clip-path
   (jen 1 px zleva), díru zaplní další karta (dense). Tablet a desktop to mají i bez dlaždice. */
.productListing:has(> .ds-dlazdice) {
    grid-auto-flow: row dense;
    clip-path: inset(-100vh -100vw -100vh 1px);
}
.productListing:has(> .ds-dlazdice) div.centerBoxContentsProducts:nth-child(n) {
    border-left-width: 1px;
}

/* Název a varianta jsou ve větvi $dsCard dva <span> uvnitř odkazu — legacy `.itemTitle a span` (stylesheet.css,
   1,5rem / 400, míněné pro řádek „Typ") by je mimo výpis zvětšil na 15 px a ve 3řádkovém nadpisu pevné výšky usekl
   spodek (nález Phase 7B). Mimo výpis tedy přesně písmo odkazu jako dřív; ve výpisu platí pravidla níž (0,3,0). */
.itemTitle a > .ds-card__name,
.itemTitle a > .ds-card__variant {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* D13a → D13e: tatáž karta i mimo výpis — ke každému selektoru výpisu druhý `.ds-karty …` (značku dává obalu plochy
   šablona podle BasePresenter::dsKarty: karusely, „K produktu se hodí", barevné varianty…; do D13e to bylo
   `html.ds-homepage .owl-box …` jen pro homepage nového desktopu). Seznam selektorů, ne :is() — prohlížeč bez :is()
   by jinak zahodil i pravidla výpisu na telefonu. */
/* Pořadí: fotka → štítky → název + varianta → parametry → dostupnost → cenový blok (dolů).
   Legacy skládá kartu do mřížky a cenový blok drží dole přes `.product-info--out { align-self: end }`
   (stylesheet.css, viz poznámka „POZOR: vnitřek karty NEpřepínat na flex-column") — ve sloupcovém flexu by
   align-self mířil na příčnou osu a blok by se zúžil doprava. Proto stretch u všech dětí a dolů margin-top: auto. */
.productListing .centerBoxContentsProducts .centerBoxContentsProducts-in,
.ds-karty .centerBoxContentsProducts .centerBoxContentsProducts-in {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
/* Svislé odsazení karty jako ve výpisu: legacy ho má jen `.productListing .centerBoxContentsProducts-in` (24 px,
   stylesheet.css) — karusely a mřížky mimo výpis (`.ds-karty`) měly 14 px a karta vypadala jinak než ve výpisu
   kategorie (vlastník 13. 10.). Pro výpis tytéž hodnoty jako legacy; bočních 14 px (telefon 10 px) beze změny. */
.productListing .centerBoxContentsProducts-in,
.ds-karty .centerBoxContentsProducts-in {
    padding-top: 24px;
    padding-bottom: 24px;
}
.productListing .centerBoxContentsProducts-in > *,
.ds-karty .centerBoxContentsProducts-in > * {
    flex-shrink: 0;
    align-self: stretch;
}
.productListing .centerBoxContentsProducts-in > .listing_foto,
.ds-karty .centerBoxContentsProducts-in > .listing_foto {
    order: 1;
}
/* Jeden řádek štítků: co se nevejde, spadne CELÉ do skrytého druhého řádku (výška = jeden štítek: 1em písma
   + 2× 4 px), žádný štítek se neusekne uprostřed slova (nález Phase 7B: „ECO" viditelné 11 z 34 px). Výška v em,
   ne v px, aby rostla s písmem štítku (zoom stránky, uživatelská velikost písma). PŘEDPOKLAD, neověřeno na zařízení:
   zvětšení textu v Chrome na Androidu přes „text autosizing" nemusí měnit em kontejneru (2. kolo 7B). */
.productListing .centerBoxContentsProducts-in > .ds-card__chips,
.ds-karty .centerBoxContentsProducts-in > .ds-card__chips {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    height: calc(1em + 8px);
    margin-top: 6px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1;
}
.productListing .centerBoxContentsProducts-in > .itemTitle,
.ds-karty .centerBoxContentsProducts-in > .itemTitle {
    order: 3;
    min-height: 0;
    height: auto;
    margin: 8px 0 0;
    padding: 0;
    text-align: left;
}
.productListing .centerBoxContentsProducts-in > .param_vune,
.productListing .centerBoxContentsProducts-in > .starsRate,
.productListing .centerBoxContentsProducts-in > .listing-variants,
.ds-karty .centerBoxContentsProducts-in > .param_vune,
.ds-karty .centerBoxContentsProducts-in > .starsRate,
.ds-karty .centerBoxContentsProducts-in > .listing-variants {
    order: 4;
}
/* Hvězdičky hodnocení: legacy záporný okraj (margin -20 px, stylesheet.css — stará karta měla nad nimi volné místo)
   je v nové kartě vytahoval přes předchozí prvek — na telefonu přes název, na novém desktopu přes VIP box (vlastník
   14. 10.). Teď pod předchozím prvkem. Platí i pro telefon (nová karta je tam na produkci zapnutá) — jen oprava
   překryvu, zarovnání zůstává; vlevo jen na novém desktopu (níž), vzhled telefonu bez náhledu vlastníka neměnit (7B). */
.productListing .centerBoxContentsProducts-in > .starsRate,
.ds-karty .centerBoxContentsProducts-in > .starsRate {
    margin: 4px 0 0;
}
.productListing .centerBoxContentsProducts-in > .ds-card__params,
.ds-karty .centerBoxContentsProducts-in > .ds-card__params {
    order: 5;
    display: flex;
}
.productListing .centerBoxContentsProducts-in > .ds-card__stock,
.ds-karty .centerBoxContentsProducts-in > .ds-card__stock {
    order: 6;
    display: flex;
}
.productListing .centerBoxContentsProducts .centerBoxContentsProducts-in > .product-info--out,
.ds-karty .centerBoxContentsProducts .centerBoxContentsProducts-in > .product-info--out {
    order: 7;
    margin-top: auto;
    padding-top: 8px;
}

/* Přes fotku jen sleva (.sleva) a doprava zdarma (beneo .ikony > .doprava, goldex .doprava_big mimo .ikony);
   ostatní štítky jsou v řádku .ds-card__chips, ikona videa a „Expedice již dnes" na kartě ve výpisu nejsou
   (schválený náhled V1). Specificita nad mstylesheet.css `.centeredContent .ikony div` (načítá se později). */
.productListing .centeredContent .listing_foto .ikony > :not(.doprava),
.productListing .centeredContent .listing_foto .youtube-video,
.productListing .centeredContent .listing_foto .product-list-24h,
.ds-karty .centeredContent .listing_foto .ikony > :not(.doprava),
.ds-karty .centeredContent .listing_foto .youtube-video,
.ds-karty .centeredContent .listing_foto .product-list-24h {
    display: none;
}

/* D11 (R30): pořadí v žebříčku nejprodávanějších kategorie („TOP 3", vzor Alza) — tmavý jako tlačítko menu, aby se
   odlišil od informačních štítků; v šabloně je první, takže se do jednoho řádku vejde vždy. */
.productListing .ds-card__chips .ds-card__top,
.ds-karty .ds-card__chips .ds-card__top {
    background: var(--ds-menu-bg);
    color: var(--ds-menu-fg);
}

/* Štítek: písmo i výška řádku z kontejneru (výška kontejneru = přesně jeden štítek, viz výš). */
.productListing .ds-card__chips span,
.ds-karty .ds-card__chips span {
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--ds-surface-muted);
    color: var(--ds-text-secondary);
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    white-space: nowrap;
}

/* Název tučně max. 2 řádky, varianta (barva) šedě pod ním; zalomení řádku a „Typ" z legacy nadpisu skryté. */
/* flex, ne block: ikona pohlaví (goldex `<i class="fas fa-venus…">` před názvem) zůstane na řádku s názvem,
   název se ořízne na 2 řádky ve zbylé šířce, varianta jde na vlastní řádek. */
.productListing .centerBoxContentsProducts-in > .itemTitle a,
.ds-karty .centerBoxContentsProducts-in > .itemTitle a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    text-align: left;
}
.productListing .itemTitle a > i,
.ds-karty .itemTitle a > i {
    flex: none;
}
.productListing .itemTitle .ds-card__name,
.ds-karty .itemTitle .ds-card__name {
    flex: 1 1 0;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--ds-text-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}
.productListing .itemTitle .ds-card__variant,
.ds-karty .itemTitle .ds-card__variant {
    flex-basis: 100%;
    display: block;
    margin-top: 2px;
    color: var(--ds-text-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}
.productListing .itemTitle a > br,
.productListing .itemTitle a > span:not([class]),
.ds-karty .itemTitle a > br,
.ds-karty .itemTitle a > span:not([class]) {
    display: none;
}

/* Parametry: popisek (6,9:1 na béžové) nad hodnotou, pod sebou. */
.productListing .ds-card__params,
.ds-karty .ds-card__params {
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 0;
    padding: 6px 8px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-muted);
    text-align: left;
}
.productListing .ds-card__params div,
.ds-karty .ds-card__params div {
    display: flex;
    flex-direction: column;
}
.productListing .ds-card__params dt,
.ds-karty .ds-card__params dt {
    color: var(--ds-text-secondary);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
}
/* Dlouhé jednoslovné hodnoty („dvojkombinácia" — bibik.sk, Android 320 px: 118 px textu ve 116 px) se smí zalomit
   i uprostřed slova, jinak přetečou z béžového boxu (3. kolo 7B, měřeno s písmem Poppins). */
.productListing .ds-card__params dt,
.productListing .ds-card__params dd,
.ds-karty .ds-card__params dt,
.ds-karty .ds-card__params dd {
    overflow-wrap: anywhere;
}
.productListing .ds-card__params dd,
.ds-karty .ds-card__params dd {
    margin: 0;
    color: var(--ds-text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

/* Dostupnost „● Skladem…" místo 9px pilulky (legacy pilulka v cenovém bloku skrytá). Barva = token „Skladem"
   design systemu (3,26:1 na bílé — kontrast zelené je otevřené rozhodnutí vlastníka O2, mění se jedním tokenem). */
.productListing .ds-card__stock,
.ds-karty .ds-card__stock {
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--ds-stock-ok);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}
.productListing .ds-card__stock::before,
.ds-karty .ds-card__stock::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
/* Mimo sklad („Na objednávku", goldex výroba / expedice 2–3 dny / na dotaz) neutrálně — zelená jen pro skladem. */
.productListing .ds-card__stock--mimo,
.ds-karty .ds-card__stock--mimo {
    color: var(--ds-text-secondary);
}
.productListing .centerBoxContentsProducts-in .product-info--out > .dostupnost_text,
.ds-karty .centerBoxContentsProducts-in .product-info--out > .dostupnost_text {
    display: none;
}

/* Cenový blok: růžový box i VIP výzva beze změny obsahu (Phase 74 — stejný slot a výška), jen stejné zaoblení
   a stejná minimální výška; odkaz „S kuponem" tmavší (#fc6993 na #FFE6EC = 2,35:1 → #b0124f = 5,84:1). */
.productListing .centerBoxContentsProducts-in .listing-coupon,
.productListing .centerBoxContentsProducts-in .product-card__vip-price,
.ds-karty .centerBoxContentsProducts-in .listing-coupon,
.ds-karty .centerBoxContentsProducts-in .product-card__vip-price {
    box-sizing: border-box;
    min-height: 40px;
    border-radius: 12px;
}
.productListing .centerBoxContentsProducts-in .listing-coupon .coupon-link-simple,
.ds-karty .centerBoxContentsProducts-in .listing-coupon .coupon-link-simple {
    color: var(--ds-coupon-link);
}
/* Titulek i podtitulek VIP výzvy se smí zalomit při každé šířce — legacy `nowrap` (Phase 74, míněné pro karusel) ve
   výpisu text vytlačil z boxu a box z karty (2. kolo 7B: bibik.hu 360 px, 24 z 24 karet). Změřeno 4. 10. s písmem
   Poppins: místo pro text 125 px při 390 px a 120 px při 360 px; „VIP cena po přihlášení" potřebuje 125 px (WebKit)
   až 136 px (Chromium) → od 360 px dolů DVA ŘÁDKY a VIP box 50 px místo 40 px růžového (otevřený bod README E18);
   „VIP ár bejelentkezés után" 142–160 px → dva až tři řádky; podtitulek se zalomí až pod 360 px. */
.productListing .centerBoxContentsProducts-in .product-card__vip-title,
.productListing .centerBoxContentsProducts-in .product-card__vip-subtitle,
.ds-karty .centerBoxContentsProducts-in .product-card__vip-title,
.ds-karty .centerBoxContentsProducts-in .product-card__vip-subtitle {
    white-space: normal;
}
.productListing .centerBoxContentsProducts-in .nase-cena-hodnota,
.ds-karty .centerBoxContentsProducts-in .nase-cena-hodnota {
    font-size: 20px;
}
/* Blok ceny má z legacy šířku 100 % — bez zalomení se smrskne, se zalomením (pod 360 px) by zabral celý řádek
   a vytlačil tlačítko pod sebe i u krátké ceny (změřeno 4. 10.: 24 z 24 karet při 320 px). Šířka podle obsahu. */
.productListing .centerBoxContentsProducts-in .product-info--out .ceny,
.ds-karty .centerBoxContentsProducts-in .product-info--out .ceny {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
/* Pod 360 px (vnitřek karty 132 px při 320 px; 2,2 % telefonů bibiku, 7,6 % goldexu — GA4) se „VIP cena po přihlášení"
   zalomí (pravidlo výš). Cena 16 px: pětimístná „12 990 Kč" měla při 18 px (i dřív) 82 px + tlačítko 52 px = 138 px
   (změřeno 4. 10.). Delší cena zalomí tlačítko pod sebe, nepřeteče. */
@media (max-width: 359px) {
    .productListing .centerBoxContentsProducts-in .nase-cena-hodnota,
    .ds-karty .centerBoxContentsProducts-in .nase-cena-hodnota {
        font-size: 16px;
    }
    .productListing .centerBoxContentsProducts-in .product-info--out > .product-info,
    .ds-karty .centerBoxContentsProducts-in .product-info--out > .product-info {
        flex-wrap: wrap;
    }
}

/* Phase 99 / E18b — výběr velikosti na kartě (X10, rozhodnutí vlastníka 4. 10. 2026). Legacy (Phase 72-G) dává výběr
   a tlačítko do jednoho řádku POD cenu: výběr pak má při 360 px jen 94 px, „délka 17 cm" potřebuje 102 px (12 px,
   Poppins) → oříznutý na všech kartách, a 12 px pod 16 px iOS při ťuknutí zoomuje stránku (mobile-touch-discipline
   facet 2). Nově: cena + tlačítko na jednom řádku jako u karty bez velikostí, výběr na vlastním řádku přes celou
   šířku, 16 px, 44 px vysoký. HTML se nemění — formulář i jeho obal jen „zmizí" z rozložení (display: contents),
   jeho prvky se řadí přímo v řádku ceny; formulář v DOM zůstává (JS hledá select.closest('form'), tlačítko odesílá
   svůj formulář). Specificita nad legacy `.centerBoxContentsProducts-in .product-button.card-variant-quickadd…`. */
.productListing .centerBoxContentsProducts-in .product-button.card-variant-quickadd:not(.card-quickadd-single),
.productListing .centerBoxContentsProducts-in .card-variant-quickadd:not(.card-quickadd-single) > .frm-shopingCardButton,
.ds-karty .centerBoxContentsProducts-in .product-button.card-variant-quickadd:not(.card-quickadd-single),
.ds-karty .centerBoxContentsProducts-in .card-variant-quickadd:not(.card-quickadd-single) > .frm-shopingCardButton {
    display: contents;
}
/* Řádek se zalamuje legacy pravidlem `.product-info:has(.card-variant-quickadd:not(.card-quickadd-single))`.
   Tlačítko 50 px místo 52 px tlačítka design systemu (`.ds-button--sm` padding 0 16px; legacy `padding: 0 14px` míří
   na `.button-shoping-in`, kterou tlačítko design systemu nemá — změřeno 2. kolem 7B E18b): pětimístná „20 266 Kč"
   se tak vejde vedle něj i při 320 px (77 + 4 + 50 = 131 ≤ 132 px; s 52 px o 1 px ne). */
.productListing .centerBoxContentsProducts-in .product-button.card-variant-quickadd .card-variant-add,
.ds-karty .centerBoxContentsProducts-in .product-button.card-variant-quickadd .card-variant-add {
    order: 2;
    padding: 0 15px;
}
.productListing .centerBoxContentsProducts-in .card-variant-quickadd .card-variant-select-wrap,
.ds-karty .centerBoxContentsProducts-in .card-variant-quickadd .card-variant-select-wrap {
    order: 3;
    flex: 1 1 100%;
    height: 44px;
    margin-top: 8px;
}
/* Odsazení o 4 px menší než legacy (9 / 24 px): při 320 px zbývá na text 97 px a „délka 38 cm" / „délka 40 cm" má
   98–99 px (16 px, Poppins) — tlačítko nadstavbou nevzniklo, je to místo, které na úzkém telefonu chybí. Šipka
   (legacy ::after, right 10 px, ~13 px na šířku) končí 23 px od okraje, text 23 px (22 + rámeček) — nepřekrývá se. */
.productListing .centerBoxContentsProducts-in .card-variant-quickadd .card-variant-select,
.ds-karty .centerBoxContentsProducts-in .card-variant-quickadd .card-variant-select {
    padding-right: 22px;
    padding-left: 7px;
    font-size: 16px;
}

/* D13a → D13e — šipky karuselů s novou kartou (obal .ds-karty, všechna zařízení): kulaté tlačítko 44 px v úrovni
   fotky. Legacy je má ve středu výšky karty (stylesheet.css `.owl-buttons .owl-prev { top: calc(50% - 30px) }`), a ta
   je s novou kartou u textu — na telefonu šipka ležela přes název (D13e), na desktopu přes štítky. Na telefonu se dvěma
   kartami je fotka vysoká ≈ (100vw − 58 px) / 2 od 11 px (změřeno 13. 10.: 320 px → 131 px, 390 px → 165 px) — šipka
   (44 px) na jejím středu; pevných 110 px leželo při 320–343 px přes štítky (7B D13e). Tablet (3 karty) a desktop
   (5, fotka ~220–270 px) mají fotku vyšší → strop 110 px. */
.ds-karty .owl-buttons .owl-prev,
.ds-karty .owl-buttons .owl-next {
    top: min(110px, calc((100vw - 58px) / 4 - 11px));
    left: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-raised);
}
.ds-karty .owl-buttons .owl-next {
    right: -6px;
    left: auto;
}
.ds-karty .owl-buttons .fas {
    padding: 0;
    color: var(--ds-text-primary);
    font-size: 18px;
}
/* desktop: nad boční odkazy Facebook/Instagram (goldex, `#facebook_right`/`#instagram_right` — fixed u pravého okraje,
   9999, 51 px přes okraj obsahu mezi 1100 a ~1700 px; změřeno 13. 10.), jinak pravou šipku v té výšce nejde kliknout.
   Od 13. 10. se boční odkazy na novém desktopu nevykreslují (@layout.latte, výzkum UI/UX desktopu A3) — pravidlo zůstává
   jako pojistka pro jiné prvky fixed u okraje pod 10000.
   Pod přilepenou hlavičkou (11000). Na telefonu ne — šipka by překryla spodní navigaci (1001) a lištu s cenou (1000). */
html.ds-desktop .ds-karty .owl-buttons .owl-prev,
html.ds-desktop .ds-karty .owl-buttons .owl-next {
    z-index: 10000;
}

/* ============================================================
   Phase 99 / D11 — výpis na novém desktopu (R29 varianta A, vlastník 12. 10. 2026; vyzkum-desktop-tablet.md § 20–21)
   Filtr trvale v levém sloupci (Alza, Brainmarket; Baymard: filtry na desktopu stále vidět), podkategorie v řádcích
   místo vodorovného posouvání, řazení jako pilulky s počtem vpravo, karty E18 ve sloupcích po ~260 px (při 1440 px
   čtyři). Obal .ds-vypis-plocha (ne .ds-vypis — to je příznak na <html>) kreslí šablona výpisu jen na novém desktopu (Category/default.latte, topDefault.latte);
   telefon a tablet (ds-mobile) třídu ds-desktop nemají, takže nic z téhle sekce nedostanou.
   ============================================================ */
html.ds-desktop.ds-vypis .ds-vypis-plocha {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
    margin: 8px 0 0;
}
/* Sloupec filtru: boční bannery layoutu (BAN_LEFT_*) a filtr pod sebou. Legacy bannery plavou (float: left) —
   ve flexu se to neuplatní. */
html.ds-desktop.ds-vypis .ds-vypis-plocha__bok {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
html.ds-desktop.ds-vypis .ds-vypis-plocha__hlavni {
    min-width: 0;
}
/* D13e 2a: filtr bez jediné skupiny a sloupec bez banneru (goldex „Skladem" — filtr bez parametrů) — bez prázdného
   sloupce, výpis přes celou šířku. Skupiny jsou už v HTML ze serveru (.ds-filter__group s daty pro React — táž značka
   jako ve filter.css, React je jen vykreslí), takže se stránka po načtení nepřeskládá. Platí pro každý převedený výpis
   (i kategorii bez filtru); banner je vždy <img> (showBanner/default.latte, bez přepisů tenantů). */
html.ds-desktop.ds-vypis .ds-vypis-plocha:not(:has(.ds-vypis-plocha__bok .ds-filter__group)):not(:has(.ds-vypis-plocha__bok img)) {
    display: block;
}
html.ds-desktop.ds-vypis .ds-vypis-plocha:not(:has(.ds-vypis-plocha__bok .ds-filter__group)):not(:has(.ds-vypis-plocha__bok img)) .ds-vypis-plocha__bok {
    display: none;
}
/* Okno desktopu užší než 768 px (zmenšené okno, třída ds-desktop se šířkou nemění): filtr nad výpisem — 272 px vedle
   by z výpisu nechalo proužek pro jednu kartu (nález 7B D11). max-width jako výjimka: obrací výchozí stav plochy. */
@media (max-width: 767px) {
    html.ds-desktop.ds-vypis .ds-vypis-plocha {
        display: block;
    }
    html.ds-desktop.ds-vypis .ds-vypis-plocha__bok {
        margin-bottom: 16px;
    }
}

/* Podkategorie: pilulky v řádcích (na telefonu jedna vodorovně rolovaná řada — E16). Na desktopu je místa dost
   a zalamovaná řada nic neschová, takže bez slábnoucího okraje a bez omezení šířky obrazovkou. */
html.ds-desktop.ds-vypis #indexProductList .categorie-list {
    margin: 0 0 16px;
}
html.ds-desktop.ds-vypis #indexProductList .categorie-list ul {
    flex-wrap: wrap;
    justify-content: flex-start;        /* legacy desktop řádek rozprostírá (space-between) — pilulky by stály od sebe */
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}
html.ds-desktop.ds-vypis #indexProductList .categorie-list ul li a {
    max-width: 100%;
}
/* Myš: najetí podtrhne (telefon najetí nemá — tam drží iOS :hover po klepnutí, proto mobilní pravidlo hover ruší) */
html.ds-desktop.ds-vypis #indexProductList .categorie-list ul li a:hover {
    text-decoration: underline;
}
html.ds-desktop.ds-vypis #indexProductList .categorie-list ul li a:focus-visible {
    outline-offset: 2px;                 /* řada už nic neořezává (overflow: visible) — prstenec může ven */
}

/* Phase 99 (vlastník 14. 10. 2026, náhled C): podkategorie jako dlaždice s fotkou v JEDNÉ řadě (karusel) místo pilulek —
   Category/dsPodkategorie.latte, jen s přepínačem designSystem.desktopSubcategoryTiles. Šipky main.js (skryté atributem
   hidden, dokud není kam posouvat), slábnoucí pravý okraj jen dokud je co dál (.is-dal). Dlaždice 136 × 150 px, fotka 76 px
   (miniatura výpisu, mix-blend-mode na bílé dlaždici), rozcestník bez fotky béžový s větším názvem. Selektory s id
   a .ds-podkategorie — přebijí pilulky E16 (#indexProductList .categorie-list ul li a, obrázek tam display: none). */
html.ds-desktop.ds-vypis #indexProductList .categorie-list.ds-podkategorie,
html.ds-dily-desktopu #indexProductList .categorie-list.ds-podkategorie {
    position: relative;
    margin: 0 0 20px;
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__rada,
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__rada {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 52px;        /* dlaždice dorolovaná po Tabu skončí mimo šipku (40 px + odsazení 4 px) */
    scrollbar-width: none;
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__rada::-webkit-scrollbar,
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__rada::-webkit-scrollbar {
    display: none;
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__rada::after,
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__rada::after {
    content: none;
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__polozka,
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__polozka {
    flex: 0 0 136px;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-snap-align: start;
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__dlazdice,
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__dlazdice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;         /* fotky v řadě na stejné výšce i u dvouřádkového názvu */
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 150px;
    margin: 0;
    padding: 14px 8px 12px;
    border: 1px solid var(--ds-outline-soft);
    border-radius: var(--ds-radius-card);
    background: var(--ds-surface);
    box-shadow: none;
    color: var(--ds-text-primary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: normal;                 /* pilulky E16 mají nowrap — dlaždice by se natáhla podle názvu */
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__dlazdice:hover {
    border-color: var(--ds-card-hover-outline);
    box-shadow: none;
    color: var(--ds-text-primary);
    text-decoration: underline;
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__dlazdice:focus-visible,
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__dlazdice:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: -2px;                /* řada má overflow — vnější prstenec by ořízla */
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__dlazdice--text,
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__dlazdice--text {
    justify-content: center;
    background: var(--ds-surface-muted);
    border-color: var(--ds-surface-muted);
    font-size: 15px;
    font-weight: 600;
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__foto,
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__foto {
    display: block;
    flex: none;
    width: 76px;
    max-width: none;
    height: 76px;
    margin: 0;
    object-fit: contain;
    mix-blend-mode: multiply;
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__nazev,
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__nazev {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__sipka,
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__sipka {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-card-hover);
    color: var(--ds-text-primary);
    cursor: pointer;
    transform: translateY(-50%);
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__sipka[hidden],
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__sipka[hidden] {
    display: none;
}
/* šipky UVNITŘ řady — přesah ven (−14 px) dělal v úzkém okně vodorovný posuv stránky (D11, 600 px: +6 px) */
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__sipka--zpet,
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__sipka--zpet {
    left: 4px;
}
html.ds-desktop.ds-vypis #indexProductList .ds-podkategorie .ds-podkategorie__sipka--dal,
html.ds-dily-desktopu #indexProductList .ds-podkategorie .ds-podkategorie__sipka--dal {
    right: 4px;
}
/* Slábnoucí okraj existuje POŘÁD a .is-dal přepíná jen průhlednost. Vlastník a kolega 15. 10. (Firefox 148 a 157): na
   konci řady šipka „zpět" couvla o kousek a skočila zpátky. Skript při rozjezdu přidá .is-dal; když tím pseudoprvek
   VZNIKL, Firefox řadu se scroll-snap znovu přichytil k poslední dlaždici a plynulý posun přerušil (změřeno 650 → 588 →
   650; s okrajem jen přes opacity 650 → 0). Rozhodl právě vznik pseudoprvku — skrývání šipek (display: none) na to vliv
   nemá (ověřeno: oprava jen šipek vadu nechala). Chromium vadu nemá. Hlídá e2e ds-podkategorie „zpět (firefox)". */
html.ds-desktop.ds-vypis #indexProductList .categorie-list.ds-podkategorie::after,
html.ds-dily-desktopu #indexProductList .categorie-list.ds-podkategorie::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 150px;
    background: linear-gradient(to right, transparent, var(--ds-surface));
    opacity: 0;
    pointer-events: none;
}
html.ds-desktop.ds-vypis #indexProductList .categorie-list.ds-podkategorie.is-dal::after,
html.ds-dily-desktopu #indexProductList .categorie-list.ds-podkategorie.is-dal::after {
    opacity: 1;
}

/* Lišta R3 (vlastník 14. 10. 2026; výzkum kolo 2 — konkurence a Baymard): na desktopu se nepřipíná a nemá béžovou
   pilulku. Tichá řádka s tenkou čarou dole: vlevo počet produktů, za ním chipy vybraných filtrů (dsChips.latte — na
   novém desktopu V liště, snippet pod lištou je prázdný), vpravo „Řadit podle: ⌄" — nativní <select> jako na telefonu
   (helper/productSorter.latte, obsluha delegovaná v main.js), široký podle vybrané volby (field-sizing; bez podpory
   prohlížeč ukáže šířku nejdelší volby). V šabloně je výběr až za počtem a chipy, pořadí drží DOM, ne `order`.
   Mobilní pravidla lišty míří na `.listing-toolbar #select-sorter…` (popisek absolutně, písmo 0) — tady je přebíjí. */
html.ds-desktop.ds-vypis .listing-toolbar {
    position: relative;
    top: auto;                          /* mobilní `top` pro připnutí by relativní lištu posunul o ~100 px pod karty */
    z-index: auto;
    min-height: 48px;
    margin: 0 0 16px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--ds-outline-soft);
    background: transparent;
}
html.ds-desktop.ds-vypis .listing-toolbar::before {
    content: none;                      /* béžová pilulka telefonu */
}
html.ds-desktop.ds-vypis .listing-toolbar > [id^="snippet--paginationTop"] {
    flex: 1 1 auto;
    gap: 8px 16px;
    height: auto;
    min-width: 0;
}
html.ds-desktop.ds-vypis .listing-toolbar > [id^="snippet--paginationTop"]::before {
    content: none;
}
html.ds-desktop.ds-vypis .listing-toolbar #productsListingTop {
    flex: none;
    margin: 0;
    padding: 0;
    color: var(--ds-text-secondary);
}
html.ds-desktop.ds-vypis .listing-toolbar #productsListingTopNumber {
    font-size: 1.5rem;
}
html.ds-desktop.ds-vypis .listing-toolbar #productsListingTop strong {
    color: var(--ds-text-primary);
    font-weight: 600;
}
/* Slovo „produktů" je na desktopu vidět (na telefonu jen pro čtečky — místo) */
html.ds-desktop.ds-vypis .listing-toolbar #productsListingTop .toolbar-count-word {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}
html.ds-desktop.ds-vypis .listing-toolbar .ds-listing-chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
html.ds-desktop.ds-vypis .listing-toolbar .ds-listing-chips > li {
    margin: 0;
    padding: 0;
}
html.ds-desktop.ds-vypis .listing-toolbar .ds-listing-chips__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--ds-field-border);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font-size: 1.4rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}
html.ds-desktop.ds-vypis .listing-toolbar .ds-listing-chips__chip:hover {
    border-color: var(--ds-text-primary);
    color: var(--ds-text-primary);
    text-decoration: none;
}
html.ds-desktop.ds-vypis .listing-toolbar .ds-listing-chips__x {
    flex: none;
    width: 10px;
    height: 10px;
}
html.ds-desktop.ds-vypis .listing-toolbar .ds-listing-chips__clear {
    padding: 0 4px;
    color: var(--ds-text-secondary);
    font-size: 1.4rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
html.ds-desktop.ds-vypis .listing-toolbar .ds-listing-chips__chip:focus-visible,
html.ds-desktop.ds-vypis .listing-toolbar .ds-listing-chips__clear:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 2px;
}
html.ds-desktop.ds-vypis .listing-toolbar #select-sorter-out {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    width: auto;
    height: 40px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
}
html.ds-desktop.ds-vypis .listing-toolbar #select-sorter-out > div {
    position: static;
    transform: none;
    color: var(--ds-text-secondary);
    font-size: 1.5rem;
    line-height: 1.25;
    white-space: nowrap;
    pointer-events: none;
}
html.ds-desktop.ds-vypis .listing-toolbar #select-sorter-out > div .fas {
    display: none;                      /* ikona jen na telefonu, kde z popisku nic jiného nezbude */
}
html.ds-desktop.ds-vypis .listing-toolbar #select-sorter {
    width: auto;
    field-sizing: content;
    height: 40px;
    padding: 0 22px 0 2px;
    border: 0;
    background: transparent;
    color: var(--ds-text-primary);
    font-size: 1.6rem;                  /* 16 px = práh iOS i tady: iPad hlásící se jako Mac může dostat nový desktop */
    font-weight: 600;
    line-height: 40px;
    cursor: pointer;
}
html.ds-desktop.ds-vypis .listing-toolbar #select-sorter:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 2px;
}
html.ds-desktop.ds-vypis .listing-toolbar #select-sorter-out::after {
    right: 2px;
    font-size: 1.2rem;
}

/* Karty: sloupce po nejméně 250 px místo pevných čtyř (legacy repeat(4, 1fr)), mezi kartami mezera 16 px (vlastník
   14. 10.: karty s obrysem a zaoblením místo čar — sekce „Karty nového desktopu" níž). 250 px, ne 260: s mezerou
   zůstává počet karet v řadě jako dřív bez ní (změřeno: 1280 a 1366 → 3, 1440 a 1536 → 4, 1680 a širší → 5; s 260 px
   by 1680 px spadlo na 4). auto-fill (ne auto-fit): u krátkého výpisu zůstanou karty v šířce sloupce a nerozplizou se
   přes celý řádek; díry po bannerech přes dva sloupce zaplní dense. */
html.ds-desktop.ds-vypis .productListing {
    grid-template-columns: repeat(auto-fill, minmax(min(250px, calc(50% - 8px)), 1fr));   /* min(): vždy aspoň dva sloupce — banner přes
                                                                                 dva by jinak v úzkém okně přidal sloupec navíc a výpis přetekl
                                                                                 (50 % minus půl mezery, jinak by dva sloupce s mezerou přetekly) */
    grid-auto-flow: row dense;
    gap: 16px;
}
/* Popis produktu (250 znaků) kreslí šablona karty jen na desktopu (productList/default.latte `{if !$isMobile}`) —
   karta V1 (E18) ho nemá a ve sloupcovém flexu by bez pořadí vyskočil nad fotku (změřeno na prvním náhledu).
   D13a: dvojče pro karusel homepage — tam ho dnes schová i legacy `.index .listingDescription`, ale karta nemá stát
   na pravidle, které o ní neví. */
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .listingDescription,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .listingDescription {
    display: none;
}

/* D13e 2d (vlastník 13. 10. — jednotné nadpisy): karusel pod výpisem („Naposledy prohlížené" / „Doporučujeme
   z kategorie", OwlBox .owl-box-head — legacy 20 px 400, od 1711 px 28 px) s nadpisem jako výpisy pod obsahem karty
   produktu (pdp.css, sekce D12: 18 px 700, mezery 28 / 10 px) */
html.ds-desktop.ds-vypis .recently-viewed-block h2.owl-box-head {
    margin: 28px 0 10px;
    padding: 0;
    color: var(--ds-text-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
}

/* „Načíst dalších N" přes celou šířku sloupce by bylo 1100 px dlouhé tlačítko — na desktopu nejvýš 420 px */
html.ds-desktop.ds-vypis .ds-pager .ds-pager__more {
    width: 100%;
    max-width: 420px;
}

/* ============================================================
   Phase 99 / D13f — kompaktní pruh Navštívených (rozhodnutí vlastníka 13. 10. 2026, vyzkum-desktop-tablet.md § 29).
   Homepage, dole na kartě produktu a ve výpisu nového desktopu (listing.css se tam načítá: D11 výpis, D13a homepage,
   D13e karta). Nízký světlý pruh, vizuálně odlišný od prodejních karuselů: miniatura 110 px, název na jeden řádek,
   cena, „×" v rohu miniatury, „Vymazat historii" v hlavičce vpravo. Co se nevejde, posune se do strany.
   Šablona components/navstivene/dsPruh.latte, chování ds-navstivene.js.
   ============================================================ */
html.ds-desktop .ds-navstivene,
html.ds-jednotne-sekce .ds-navstivene {
    margin: 28px 0 8px;
    padding: 16px 20px 18px;
    border: 1px solid var(--ds-divider);
    border-radius: var(--ds-radius-card);
    background: var(--ds-surface);
    text-align: left;
}
html.ds-desktop .ds-navstivene__hlava,
html.ds-jednotne-sekce .ds-navstivene__hlava {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
}
html.ds-desktop .ds-navstivene__nadpis,
html.ds-jednotne-sekce .ds-navstivene__nadpis {
    margin: 0;
    padding: 0;
    color: var(--ds-text-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}
html.ds-desktop .ds-navstivene__vymazat,
html.ds-desktop .ds-navstivene__vymazat:hover,
html.ds-jednotne-sekce .ds-navstivene__vymazat,
html.ds-jednotne-sekce .ds-navstivene__vymazat:hover {
    color: var(--ds-text-secondary);
    font-size: 14px;
    text-decoration: underline;
    white-space: nowrap;
}
html.ds-desktop .ds-navstivene__seznam,
html.ds-jednotne-sekce .ds-navstivene__seznam {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0 0 4px;
    overflow-x: auto;
    list-style: none;
}
html.ds-desktop .ds-navstivene__polozka,
html.ds-jednotne-sekce .ds-navstivene__polozka {
    position: relative;
    flex: 0 0 110px;
    width: 110px;
    margin: 0;
    padding: 0;
    list-style: none;
}
html.ds-desktop .ds-navstivene__odkaz,
html.ds-desktop .ds-navstivene__odkaz:hover,
html.ds-jednotne-sekce .ds-navstivene__odkaz,
html.ds-jednotne-sekce .ds-navstivene__odkaz:hover {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ds-text-primary);
    text-decoration: none;
}
html.ds-desktop .ds-navstivene__foto,
html.ds-jednotne-sekce .ds-navstivene__foto {
    display: block;
    width: 110px;
    height: 110px;
    overflow: hidden;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-muted);
}
html.ds-desktop .ds-navstivene__foto img,
html.ds-jednotne-sekce .ds-navstivene__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
html.ds-desktop .ds-navstivene__nazev,
html.ds-jednotne-sekce .ds-navstivene__nazev {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}
html.ds-desktop .ds-navstivene__cena,
html.ds-jednotne-sekce .ds-navstivene__cena {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
html.ds-desktop .ds-navstivene__odebrat,
html.ds-desktop .ds-navstivene__odebrat:hover,
html.ds-jednotne-sekce .ds-navstivene__odebrat,
html.ds-jednotne-sekce .ds-navstivene__odebrat:hover {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--ds-divider);
    border-radius: 50%;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
}
html.ds-desktop .ds-navstivene__odebrat:hover {
    border-color: var(--ds-text-primary);
}
html.ds-desktop .ds-navstivene__odkaz:focus-visible,
html.ds-desktop .ds-navstivene__vymazat:focus-visible,
html.ds-desktop .ds-navstivene__odebrat:focus-visible,
html.ds-jednotne-sekce .ds-navstivene__odkaz:focus-visible,
html.ds-jednotne-sekce .ds-navstivene__vymazat:focus-visible,
html.ds-jednotne-sekce .ds-navstivene__odebrat:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 2px;
}

/* S2 (§ 34): telefon a tablet s jednotnými sekcemi (html.ds-jednotne-sekce — dvojčata výš): pruh přes šířku obsahu,
   menší miniatura (telefon 96 px), větší „×" pro prst (32 px); tablet jako desktop — pravidla v bloku D2
   @media (min-width: 768px) nahoře (soubor má jediný, DesignSystemTabletTest) */
html.ds-jednotne-sekce .ds-navstivene {
    margin: 24px 0 8px;
    padding: 12px 12px 14px;
}
html.ds-jednotne-sekce .ds-navstivene__seznam {
    gap: 12px;
}
html.ds-jednotne-sekce .ds-navstivene__polozka {
    flex-basis: 96px;
    width: 96px;
}
html.ds-jednotne-sekce .ds-navstivene__foto {
    width: 96px;
    height: 96px;
}
html.ds-jednotne-sekce .ds-navstivene__odebrat,
html.ds-jednotne-sekce .ds-navstivene__odebrat:hover {
    width: 32px;
    height: 32px;
    top: 2px;
    right: 2px;
}
/* ---------- Výzkum UI/UX desktopu C5 (vlastník 13. 10. 2026, vyzkum-ux-desktop.md § 5 P1-5) — pruh „Pro hledání …"
   (Phase 47-5) na stránce, kam hledání přesměrovalo (kategorie, značka, Topall). Na novém desktopu bez počtu produktů —
   ten je v liště řazení („486 výsledků") a v pruhu se opakoval — a v novém vzhledu místo modrého pruhu se svislou čarou.
   Legacy pravidla jsou v all.css (načítá se později), proto plná cesta od html.
   Kontrola vlastníka na develu 15. 10.: i telefon a tablet s jednotnou kartou (dvojče html.ds-jednotna-karta, S1) — počet
   je i tam v liště výpisu; legacy mobilní pruh text centruje a zmenšuje (all.css do 768 / 480 px), proto zarovnání
   a velikost písma odkazu výslovně. ---------- */
html.ds-desktop.ds-vypis .search-redirect-banner,
html.ds-jednotna-karta .search-redirect-banner {
    justify-content: space-between;
    gap: 6px 16px;
    margin: 4px 0 16px;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-muted);
    color: var(--ds-text-secondary);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
}
html.ds-desktop.ds-vypis .search-redirect-banner .srb-text strong,
html.ds-jednotna-karta .search-redirect-banner .srb-text strong {
    color: var(--ds-text-primary);
    font-weight: 700;
}
html.ds-desktop.ds-vypis .search-redirect-banner .srb-pocet,
html.ds-jednotna-karta .search-redirect-banner .srb-pocet {
    display: none;
}
html.ds-desktop.ds-vypis .search-redirect-banner .srb-link,
html.ds-jednotna-karta .search-redirect-banner .srb-link {
    color: var(--ds-text-primary);
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* ---------- Výzkum UI/UX desktopu P2-1 (vlastník 13. 10. 2026, varianta A2; vyzkum-ux-desktop.md § 8) — ve výpisu nového
   desktopu cena a košík hned pod názvem: první řada karet má cenu i tlačítko nad ohybem (1440 × 900 změřeno na náhledu:
   bibik 972 → 825 px, goldex ~1021 → ~873 px). Pokyn vlastníka téhož dne: „skladovost dát pod cenu". Pořadí fotka → štítky
   → název → řádek s cenou a košíkem → dostupnost → VIP box / cena s kupónem → barvy a hodnocení → parametry.
   Aby šla dostupnost mezi řádek s cenou a VIP box, rozpouští se obal .product-info--out (display: contents — vlastní
   vzhled nemá, legacy jen align-self a margin); jeho dva .product-info se řadí jako položky karty. Cenový blok tu nejde
   dolů (žádné margin-top: auto), ceny v řadě proto srovnává název na JEDEN řádek, vyhrazený řádek dodatku a řádek štítků
   (pokyny vlastníka 13. 10., níž).
   Totéž v karuselech nového desktopu (dvojče html.ds-desktop .ds-karty — D13e: tatáž karta ve výpisu i mimo něj).
   S1 (vlastník 14. 10. 2026, § 34): pořadí i název na jeden řádek i na telefonu a tabletu s přepínačem
   designSystem.unifiedCard — dvojčata html.ds-jednotna-karta (třída jen v mobilním režimu, BasePresenter); bez přepínače
   telefon beze změny. Měřidla: obal má po rozpuštění nulový obdélník — měř jeho .product-info. ---------- */
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts .centerBoxContentsProducts-in > .product-info--out,
html.ds-desktop .ds-karty .centerBoxContentsProducts .centerBoxContentsProducts-in > .product-info--out,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts .centerBoxContentsProducts-in > .product-info--out,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts .centerBoxContentsProducts-in > .product-info--out {
    display: contents;
}
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .product-info--out > .product-info,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .product-info--out > .product-info,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .product-info--out > .product-info,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .product-info--out > .product-info {
    order: 4;
}
/* okraj jen řádku s cenou — prázdný .product-info (produkt bez VIP ceny i kupónu) zůstává s pořadím 4 před cenou a se
   svým okrajem by ji v řadě posunul o 8 px níž než u sousedních karet */
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .ceny),
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .ceny),
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .ceny),
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .ceny) {
    margin-top: 8px;
}
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .ds-card__stock,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .ds-card__stock,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .ds-card__stock,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .ds-card__stock {
    order: 5;
    align-self: flex-start;   /* box jen na šířku textu — vlevo pod cenou, nezasahuje pod tlačítko košíku vpravo */
    margin-top: -6px;         /* vlastník 13. 10.: „blíže pod cenu" — řádek s cenou má výšku tlačítka (40 px), text ceny je
                                 uprostřed, takže bez záporného okraje zůstávala pod cenou ~20 px mezera */
}
/* goldex: pod tlačítkem je ještě výběr velikosti (uvnitř řádku s cenou) — tam by záporný okraj zasáhl do výběru */
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in:has(.card-variant-select) > .ds-card__stock,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in:has(.card-variant-select) > .ds-card__stock,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in:has(.card-variant-select) > .ds-card__stock,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in:has(.card-variant-select) > .ds-card__stock {
    margin-top: 8px;
}
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .product-card__vip-price),
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .ceny-coupon-obal-new),
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .product-card__vip-price),
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .ceny-coupon-obal-new),
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .product-card__vip-price),
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .ceny-coupon-obal-new),
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .product-card__vip-price),
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .ceny-coupon-obal-new) {
    order: 6;
    margin-top: 12px;   /* vlastník 13. 10.: VIP box / kupón nelepit na dostupnost */
}
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .param_vune,
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .starsRate,
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .listing-variants,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .param_vune,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .starsRate,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .listing-variants,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .param_vune,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .starsRate,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .listing-variants,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .param_vune,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .starsRate,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .listing-variants {
    order: 7;
}
/* hvězdičky pod VIP boxem / kupónem s mezerou jako mezi ostatními bloky karty (nad nimi je řádek dostupnosti),
   zarovnané vlevo jako zbytek karty */
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .starsRate,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .starsRate,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .starsRate,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .starsRate {
    margin-top: 12px;
    text-align: left;
}
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .ds-card__params,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .ds-card__params,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .ds-card__params,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .ds-card__params {
    order: 8;
    margin-top: 12px;
}
html.ds-desktop.ds-vypis .productListing .itemTitle .ds-card__name,
html.ds-desktop .ds-karty .itemTitle .ds-card__name,
html.ds-jednotna-karta .productListing .itemTitle .ds-card__name,
html.ds-jednotna-karta .ds-karty .itemTitle .ds-card__name {
    -webkit-line-clamp: 1;   /* vlastník 13. 10.: „název produktu v listingu vždy jen na jeden řádek" (celý je v odkazu
                                a na kartě produktu) — výška názvu je pak u všech karet stejná a ceny v řadě lícují */
}
/* druhý řádek s variantou („thunder", „2025 Almond Beige") také na jeden řádek se třemi tečkami — jinak by dlouhá
   varianta na dvou řádcích posunula cenu níž než u sousedních karet */
html.ds-desktop.ds-vypis .productListing .itemTitle .ds-card__variant,
html.ds-desktop .ds-karty .itemTitle .ds-card__variant,
html.ds-jednotna-karta .productListing .itemTitle .ds-card__variant,
html.ds-jednotna-karta .ds-karty .itemTitle .ds-card__variant {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* vlastník 13. 10.: „dodatek pod názvem (barva výrobce) některé produkty nemají, ale to místo vždy rezervovat, ať je to
   srovnané" — odkaz s názvem má vždy výšku řádku názvu (15 px × 1,3) + odsazení varianty (2 px) + řádku varianty
   (14 px × 1,3). Na odkazu, ne na .itemTitle: obal je o několik px vyšší než odkaz (změřeno 47 vs 40 px) a rezerva na něm
   by u karty s variantou nestačila — ceny v řadě se pak rozjely o 7 px. */
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .itemTitle > a,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .itemTitle > a,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .itemTitle > a,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .itemTitle > a {
    min-height: calc(15px * 1.3 + 2px + 14px * 1.3);
}
/* karta bez štítků (produkt nemá žádný — .ds-card__chips v kartě chybí) — místo jejich řádku zůstane prázdné (okraj 6 px
   + výška 11 px + 2 × 4 px), ať název a cena lícují s řadou (změřeno: jinak o 25 px výš) */
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in:not(:has(> .ds-card__chips)) > .itemTitle,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in:not(:has(> .ds-card__chips)) > .itemTitle,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in:not(:has(> .ds-card__chips)) > .itemTitle,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in:not(:has(> .ds-card__chips)) > .itemTitle {
    margin-top: calc(8px + 6px + 11px + 8px);
}

/* ============================================================
   Karty nového desktopu — obrys, zaoblení a zvýraznění po najetí (vlastník 14. 10.: „karty mají hranaté a jakoby
   nedokončené rámování, i když zbytek designu je s kulatými rohy — ať vypadají jednotně"). Náhledy A obrys / B fotka
   na šedém poli / C stín → „A + zvýraznění po najetí", mezera 16 px a počet karet v řadě jako dřív (výpis: sloupec
   nejméně 250 px výš). Průzkum: Northman a Brainmarket bez rámečku s mezerou 15–20 px, Northman po najetí rámeček
   se stínem; Amazon jemný obrys a mezera ~8 px; Alza čáry bez mezer (jako dřív my). vyzkum-ux-desktop.md § 13.
   Všude, kde je karta výpisu: výpis (html.ds-vypis) a obaly se značkou .ds-karty (karusely, K produktu se hodí, barevné
   varianty, okno po přidání, sekce na kartě produktu). S1 (§ 34): obrys a zaoblení i na telefonu a tabletu
   (html.ds-jednotna-karta, mezery v bloku S1 níž); zvýraznění po najetí a karusely níž jen nový desktop.
   ============================================================ */
html.ds-desktop.ds-vypis .productListing div.centerBoxContentsProducts:nth-child(n),
html.ds-desktop .ds-karty div.centerBoxContentsProducts:nth-child(n),
html.ds-desktop #snippet-tabProductListFirst-tabList .ds-karty div.centerBoxContentsProducts,
html.ds-jednotna-karta .productListing div.centerBoxContentsProducts:nth-child(n),
html.ds-jednotna-karta .ds-karty div.centerBoxContentsProducts:nth-child(n),
html.ds-jednotna-karta #snippet-tabProductListFirst-tabList .ds-karty div.centerBoxContentsProducts {   /* legacy přes id (stylesheet.css) */
    border: 1px solid var(--ds-outline-soft);
    border-radius: var(--ds-radius-card);
    transition: border-color .2s, box-shadow .2s;
}
/* jen zařízení s myší — na iPadu by po ťuknutí (třeba na výběr velikosti) zvýraznění zůstalo viset (7B,
   mobile-touch-discipline bod 6) */
@media (hover: hover) {
    html.ds-desktop.ds-vypis .productListing div.centerBoxContentsProducts:nth-child(n):hover,
    html.ds-desktop .ds-karty div.centerBoxContentsProducts:nth-child(n):hover,
    html.ds-desktop #snippet-tabProductListFirst-tabList .ds-karty div.centerBoxContentsProducts:hover {
        border-color: var(--ds-card-hover-outline);
        box-shadow: var(--ds-shadow-card-hover);
    }
}
/* Vnitřek karty má legacy bílé pozadí — zaoblený i on, jinak by jeho rohy přečnívaly přes obrys. Ne overflow: hidden
   na kartě: ořízlo by i to, co z karty legitimně vyčnívá (rozbalovací výběr velikosti na kartě goldexu). Legacy
   zvýraznění po najetí (obdélník se stínem v ::after vnitřku, responsive-stylesheet.css od 1200 px) nahrazuje obrys. */
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in {
    border-radius: calc(var(--ds-radius-card) - 1px);
}
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in::after,
html.ds-desktop .ds-karty .centerBoxContentsProducts-in::after,
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in::after,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in::after {
    display: none;
}
/* Karusely (owl v1): mezera 16 px jako vnitřní okraj položky (8 + 8 px). Karusel je o mezeru širší a posunutý o půl
   mezery doleva — krajní karty pak lícují s nadpisem a se stránkou a karta vyjde stejně široká jako v mřížce s mezerou
   16 px: owl počítá šířku položky z prvku karuselu (`$elem.width() / items`), takže (W + 16) / n − 16 = (W − (n − 1) · 16) / n.
   Rozšířit jen vnitřní obal nestačilo — karta pak byla o 16 / n px užší než v mřížce (změřeno 264 proti 267 px při
   1920 px, ds-d12.spec.ts). */
html.ds-desktop .owl-box.ds-karty {
    width: calc(100% + 16px);
    margin-right: -8px;
    margin-left: -8px;
}
/* nahoře místo pro stín karty po najetí (obal ořezává — legacy odsazení nahoře jen 4 px) */
html.ds-desktop .owl-box.ds-karty .owl-wrapper-outer {
    padding-top: 12px;
}
/* šipky (-6 px od okraje karuselu, sekce D13e výš) o rozšíření zpět na původní místo — jinak by u okna, kde karusel
   sahá k okraji (desktop 600 px), přečnívaly o 6 px a stránka by šla posunout do strany (ds-d11.spec.ts) */
html.ds-desktop .owl-box.ds-karty .owl-buttons .owl-prev {
    left: 2px;
}
html.ds-desktop .owl-box.ds-karty .owl-buttons .owl-next {
    right: 2px;
}
html.ds-desktop .owl-box.ds-karty .owl-item {
    box-sizing: border-box;
    padding: 0 8px;
}
/* Výpis s bannerem přes dva sloupce (D11): s mezerami už nejsou čáry — ořez 1. sloupce i rámeček dlaždice pryč.
   S1: i jednotná karta telefonu a tabletu (jinak by legacy ořez 1 px zleva usekl obrys karet 1. sloupce — 7B S1–S3). */
html.ds-desktop.ds-vypis .productListing:has(> .ds-dlazdice),
html.ds-jednotna-karta .productListing:has(> .ds-dlazdice) {
    clip-path: none;
}
html.ds-desktop.ds-vypis .productListing .ds-dlazdice,
html.ds-jednotna-karta .productListing .ds-dlazdice {
    padding: 0;
    border: 0;
}
/* Štítky přes fotku (vlastník 14. 10., návrh A2 — „staré ikony dopravy zdarma a kroužku se slevou do nového designu
   nepatří"): vlevo bílá pilulka s autíčkem a „zdarma", vpravo červená pilulka se slevou, obě na stejné výšce a co nejvýš
   — horní polovinou v odsazení karty nad fotkou, ať fotku zakrývají co nejméně („o kousek výše"). Dnes: šedá pilulka
   (beneo .ikony > .doprava), modré kolečko 45 px pod slevou (goldex .doprava_big, tenant-shared.css) a červený kroužek
   45 px (.sleva; barvou tenanta — beneo --primary-color, některé tenanty vlastní, např. cx-eshop žlutou). Překrytí fotky
   štítky vůbec je téma na později (vlastník). z-index 3: nad fotkou (odkaz přes celou plochu fotky) i nad ostatním
   obsahem karty, pod přilepenou hlavičkou (11000).
   Obal .ikony má legacy min-height 40/46 px a text-align: center (stylesheet.css, responsive-stylesheet.css) — jako blok
   by svislou polohu pilulky určoval jeho řádek a průhledný zbytek by chytal klik na fotku (7B): flex bez min. výšky. */
html.ds-desktop.ds-vypis .productListing .listing_foto .ikony,
html.ds-desktop .ds-karty .listing_foto .ikony,
html.ds-jednotna-karta .productListing .listing_foto .ikony,
html.ds-jednotna-karta .ds-karty .listing_foto .ikony {
    top: -12px;
    left: 0;
    z-index: 3;
    display: flex;
    min-height: 0;
}
html.ds-desktop.ds-vypis .productListing .listing_foto .ikony > .doprava,
html.ds-desktop.ds-vypis .productListing .listing_foto .doprava_big,
html.ds-desktop .ds-karty .listing_foto .ikony > .doprava,
html.ds-desktop .ds-karty .listing_foto .doprava_big,
html.ds-jednotna-karta .productListing .listing_foto .ikony > .doprava,
html.ds-jednotna-karta .productListing .listing_foto .doprava_big,
html.ds-jednotna-karta .ds-karty .listing_foto .ikony > .doprava,
html.ds-jednotna-karta .ds-karty .listing_foto .doprava_big {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    width: auto;
    height: 26px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--ds-outline-soft);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;   /* goldex „Zdarma", beneo „zdarma" — jednotně */
}
/* goldex: kolečko mimo .ikony, legacy vpravo pod slevou (top 48 px, s modifikátorem --top 0) */
html.ds-desktop.ds-vypis .productListing .listing_foto .doprava_big,
html.ds-desktop .ds-karty .listing_foto .doprava_big,
html.ds-jednotna-karta .productListing .listing_foto .doprava_big,
html.ds-jednotna-karta .ds-karty .listing_foto .doprava_big {
    top: -12px;
    right: auto;
    left: 0;
    z-index: 3;
}
html.ds-desktop.ds-vypis .productListing .listing_foto .ikony > .doprava .fas,
html.ds-desktop.ds-vypis .productListing .listing_foto .doprava_big .fas,
html.ds-desktop .ds-karty .listing_foto .ikony > .doprava .fas,
html.ds-desktop .ds-karty .listing_foto .doprava_big .fas,
html.ds-jednotna-karta .productListing .listing_foto .ikony > .doprava .fas,
html.ds-jednotna-karta .productListing .listing_foto .doprava_big .fas,
html.ds-jednotna-karta .ds-karty .listing_foto .ikony > .doprava .fas,
html.ds-jednotna-karta .ds-karty .listing_foto .doprava_big .fas {
    margin: 0;
    color: var(--ds-chip-ok-fg);
    font-size: 12px;
    line-height: 1;
}
html.ds-desktop.ds-vypis .productListing .listing_foto .sleva,
html.ds-desktop .ds-karty .listing_foto .sleva,
html.ds-jednotna-karta .productListing .listing_foto .sleva,
html.ds-jednotna-karta .ds-karty .listing_foto .sleva {
    top: -12px;
    right: 0;
    left: auto;
    z-index: 3;
    width: auto;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-badge-discount-bg);
    line-height: 26px;
}
html.ds-desktop.ds-vypis .productListing .listing_foto .sleva .sleva-hodnota,
html.ds-desktop .ds-karty .listing_foto .sleva .sleva-hodnota,
html.ds-jednotna-karta .productListing .listing_foto .sleva .sleva-hodnota,
html.ds-jednotna-karta .ds-karty .listing_foto .sleva .sleva-hodnota {
    color: var(--ds-badge-discount-fg);
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
}

/* ============================================================
   S1 — jednotná karta na telefonu a tabletu (vlastník 14. 10. 2026, vyzkum-desktop-tablet.md § 34; přepínač
   designSystem.unifiedCard → html.ds-jednotna-karta jen v mobilním režimu). Obrys, zaoblení, štítky přes fotku, pořadí
   s cenou pod názvem a název na jeden řádek dávají dvojčata desktopových pravidel výš; tady jen hodnoty, které se liší:
   mezera mezi kartami 8 px na telefonu a 16 px na tabletu (místo čar), boční vnitřek 8 px na telefonu — obsah karty
   zůstane skoro jako dnes (165 místo 167 px při 390, 130 místo 132 px při 320 px; cena s tlačítkem se do řádku vejde,
   změřeno na prototypu 14. 10.), a mezery karuselů.
   ============================================================ */
html.ds-jednotna-karta .productListing,
html.ds-jednotna-karta .vsechny-barevne-varianty {
    gap: 8px;
    clip-path: none;            /* tablet a výpis s dlaždicí ořezávaly 1. sloupec kvůli čarám — s mezerami čáry nejsou */
}
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in {
    padding-right: 8px;
    padding-left: 8px;
}
/* dostupnost bez záporného okraje desktopu (−6 px „blíže pod cenu"): karta je tu užší a text „Skladem >50 ks" sahá pod
   tlačítko košíku — s −6 px do něj zajel (změřeno při 320 px). goldex s výběrem velikosti má vlastní 8 px (:has výš). */
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .ds-card__stock,
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .ds-card__stock {
    margin-top: 4px;
}
/* štítky přes fotku menší než na desktopu (26 px / 13 px): při 320 px se „zdarma" a sleva vedle sebe nevešly
   (goldex: dotýkaly se). Tablet níž zpět na velikost desktopu. */
html.ds-jednotna-karta .productListing .listing_foto .ikony > .doprava,
html.ds-jednotna-karta .productListing .listing_foto .doprava_big,
html.ds-jednotna-karta .ds-karty .listing_foto .ikony > .doprava,
html.ds-jednotna-karta .ds-karty .listing_foto .doprava_big {
    gap: 4px;
    height: 22px;
    padding: 0 7px;
    font-size: 11px;
}
html.ds-jednotna-karta .productListing .listing_foto .ikony > .doprava .fas,
html.ds-jednotna-karta .productListing .listing_foto .doprava_big .fas,
html.ds-jednotna-karta .ds-karty .listing_foto .ikony > .doprava .fas,
html.ds-jednotna-karta .ds-karty .listing_foto .doprava_big .fas {
    font-size: 10px;
}
html.ds-jednotna-karta .productListing .listing_foto .sleva,
html.ds-jednotna-karta .ds-karty .listing_foto .sleva {
    height: 22px;
    padding: 0 7px;
    line-height: 22px;
}
html.ds-jednotna-karta .productListing .listing_foto .sleva .sleva-hodnota,
html.ds-jednotna-karta .ds-karty .listing_foto .sleva .sleva-hodnota {
    font-size: 11px;
    line-height: 22px;
}
/* Nejužší telefony (pod 360 px, vnitřek karty 130 px): „zdarma" a sleva se vedle sebe nevejdou, dokud se nenačte písmo
   (záložní písmo je širší — změřeno při 320 px: překryv na 24 z 24 karet goldexu). Štítek dopravy tam nese jen autíčko;
   slovo zůstává v textu pro čtečky (velikost 0, ne display: none). Hranice 359 px jako Phase 85 (výjimka z min-width). */
@media (max-width: 359px) {
    html.ds-jednotna-karta .productListing .listing_foto .ikony > .doprava,
    html.ds-jednotna-karta .productListing .listing_foto .doprava_big,
    html.ds-jednotna-karta .ds-karty .listing_foto .ikony > .doprava,
    html.ds-jednotna-karta .ds-karty .listing_foto .doprava_big {
        gap: 0;
        font-size: 0;
    }
}
/* karusely (owl v1): mezera jako vnitřní okraj položky, karusel o ni širší a posunutý o půl mezery — karty lícují se
   stránkou (jako nový desktop výš, jen 8 px) */
html.ds-jednotna-karta .owl-box.ds-karty {
    width: calc(100% + 8px);
    margin-right: -4px;
    margin-left: -4px;
}
html.ds-jednotna-karta .owl-box.ds-karty .owl-item {
    box-sizing: border-box;
    padding: 0 4px;
}
/* šipky (-6 px od okraje karuselu) o rozšíření zpět na původní místo — jinak by pravá při 390 px přečnívala o 2 px a
   stránka šla posunout do strany (změřeno; tatáž oprava jako nový desktop výš) */
html.ds-jednotna-karta .owl-box.ds-karty .owl-buttons .owl-prev {
    left: -2px;
}
html.ds-jednotna-karta .owl-box.ds-karty .owl-buttons .owl-next {
    right: -2px;
}

/* Nadpis výpisu (vlastník 15. 10. 2026, výzkum H1 — varianta A „sjednotit"): jako nadpis karty produktu nového vzhledu
   (pdp.css h1#productName) — tučně, řádkování 1,25, zarovnaný vlevo k drobečkům; desktop a tablet 28 px, telefon 20 px.
   Byl to jediný nadpis nového vzhledu se starým stylem (stylesheet.css h1: 32 px, normální řez; telefon 22 px na střed).
   Místo prakticky neušetří (změřeno: desktop −2 px, telefon −7 px) — jde o typografii; zbytek prostoru nad výpisem
   berou dlaždice podkategorií, banner a lišta (výzkum: vlastník zvolil jen A). Desktop na převedeném výpisu, telefon
   a tablet s jednotnou kartou (S1) — vrácení přes tytéž přepínače. Tablet 28 px přes html.ds-dily-desktopu
   (designSystem.tabletDesktopParts) jako název karty produktu (pdp.css) — podle serveru, ne podle šířky okna, takže
   i iPad mini 744 px (dřív v bloku od 768 px: 20 px proti 28 px názvu produktu, 2. kolo 7B 15. 10.). Tři id nadpisu: productListHeading (kategorie, značka, skladem, topall),
   specialsListingHeading (novinky), advSearchDefaultHeading (hledání, schránka). Na DESKTOPU jen převedené výpisy
   (ds-vypis); na telefonu a tabletu ds-jednotna-karta na stránce nezávisí, takže totéž dostanou všechny stránky s těmi id
   (i Výprodej, Nakladatelství, ParamAuthor/Brand, Vyhledávání, virtuální a nejvyšší kategorie) — vědomě, telefon
   a tablet mají nový výpis všude (7B 15. 10.). */
html.ds-desktop.ds-vypis h1#productListHeading,
html.ds-desktop.ds-vypis h1#specialsListingHeading,
html.ds-desktop.ds-vypis h1#advSearchDefaultHeading,
html.ds-jednotna-karta h1#productListHeading,
html.ds-jednotna-karta h1#specialsListingHeading,
html.ds-jednotna-karta h1#advSearchDefaultHeading {
    margin: 2px 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
}
html.ds-desktop.ds-vypis h1#productListHeading,
html.ds-desktop.ds-vypis h1#specialsListingHeading,
html.ds-desktop.ds-vypis h1#advSearchDefaultHeading,
html.ds-dily-desktopu.ds-jednotna-karta h1#productListHeading,
html.ds-dily-desktopu.ds-jednotna-karta h1#specialsListingHeading,
html.ds-dily-desktopu.ds-jednotna-karta h1#advSearchDefaultHeading {
    margin: 4px 0 12px;
    font-size: 28px;
}