/*  Generated: 2026-10-15 16:45:19 */
/* ============================================================
   Design system — drobečková navigace (Phase 99, vlastník 14. 10. 2026, varianta A): Domů › … › aktuální stránka.
   Šablona components/breadcrumbs/ds.latte (Breadcrumbs::renderDs), načítá se jen s $dsDrobky (@layout.latte) — nový
   desktop vždy, telefon a tablet za designSystem.breadcrumbs. Vlastní jmenný prostor .ds-drobky (ne #navBreadCrumb,
   na který míří legacy pravidla — na telefonu jím skrývají obsah).
   Mobile-first: jeden řádek, při délce posuvný do strany, aktuální stránka zkrácená; na desktopu stejně.
   ============================================================ */

.ds-drobky {
    margin: 12px 0 14px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    color: var(--ds-text-secondary);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}
.ds-drobky::-webkit-scrollbar {
    display: none;
}
/* Seznam a položky přes rodiče (0,2,0): legacy `.columnCenter ol { padding-left: 25px }` a `.columnCenter li
   { padding: 2px 0 }` (0,1,1) jinak přebijí vlastní třídy — text začínal o 25 px vpravo od obsahu na desktopu,
   tabletu i telefonu (vlastník 15. 10., změřeno: text 40 px proti logu, banneru a H1 na 15 px). */
.ds-drobky .ds-drobky__seznam {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}
.ds-drobky .ds-drobky__polozka {
    display: block;
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* oddělovač šipkou — maska, ať má barvu textu (tlumenou) a ostrý tvar v každé velikosti */
.ds-drobky__polozka + .ds-drobky__polozka::before {
    content: "";
    display: inline-block;
    vertical-align: -2px;
    width: 14px;
    height: 14px;
    margin: 0 8px;
    background-color: var(--ds-text-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ds-drobky__odkaz,
.ds-drobky__odkaz:visited {
    color: var(--ds-text-secondary);
    text-decoration: none;
}
.ds-drobky__odkaz:hover {
    color: var(--ds-text-primary);
    text-decoration: underline;
}
/* Aktuální stránka se zkracuje (…), ale nesmrskne se na 0 px: přes rodiče (0,2,0) jako položka výš, jinak její
   `flex: none` vyhraje; min-width 10ch = 100 px včetně šipky (30 px), tedy ~70 px textu (asi 7 znaků) — s `min-width: 0`
   se dlouhý název na telefonu smrskl na 0 px a nebyl vidět vůbec (změřeno 7B 15. 10. na 6 produktech /autosedacky).
   U dlouhé cesty na telefonu leží položka za pravou hranou řady a dá se doposouvat — řada se po načtení na konec
   neposouvá (2. kolo 7B 15. 10.). Krátký název (CYBEX) min-width roztáhne na 100 px. */
.ds-drobky .ds-drobky__polozka--aktualni {
    flex: 0 1 auto;
    min-width: 10ch;
    max-width: 60ch;
    overflow: hidden;
    color: var(--ds-text-primary);
    font-weight: 600;
    text-overflow: ellipsis;
}

/* Nový desktop (vlastník 15. 10.): mezera banner → drobečky byla 43 px — legacy `.ban_top_middle { margin: 15px 0 }`
   + `.columnCenter` padding-top 16 px + horní okraj drobečků 12 px — zatímco pod menu nad bannerem je 15 px. Bez
   spodního okraje banneru a horního okraje drobečků je to 16 px s bannerem i bez něj (změřeno na kategorii i kartě
   produktu). Na novém desktopu se tenhle soubor načítá na KAŽDÉ stránce (rozhodniDsDrobky: $dsDesktop || …), proto
   banner jen přes `:has(.ds-drobky)` — stránky bez drobečků (Všechny kategorie, kroky objednávky…) okraj drží (7B
   15. 10.). Prohlížeč bez :has zůstane na původních 15 px. Tablet a telefon beze změny (27 / 26 px). */
html.ds-desktop:has(.ds-drobky) .ban_top_middle {
    margin-bottom: 0;
}
html.ds-desktop .ds-drobky {
    margin-top: 0;
}