/* =====================================================================
   DROBEČKOVÁ NAVIGACE (breadcrumb) – cerano.cz – NÁVRH A
   Úkol TK260914017 (#1074), schváleno: varianta A, 24. 9. 2026
   Verze 2 – oprava useknuté šipky ">" mezi položkami (v odkazu volat ?v=2)

   Co to dělá:
   - Položky lišty (kategorie) se už nelámou uvnitř sebe
     („Sprchové kouty, vaničky, žlaby, / příslušenství“). Každá položka je
     celá na jednom řádku; když se nevejde, přesune se celá na další řádek.
   - Na detailu produktu vyplní poslední položka (název produktu) zbytek
     řádku a když se nevejde, zkrátí se na jeden řádek s „…“.
     Celý název je hned pod lištou v nadpisu H1.

   Proč to bylo rozbité:
   Šablona (blank/style.css) má .breadcrumbs{display:flex} bez flex-wrap,
   takže prohlížeč tlačí všechny položky do jednoho řádku a zužuje je.

   Co se NEmění:
   - HTML ani data pro vyhledávače (schema.org BreadcrumbList).
   - Stránky kategorií: pravidla pro název mají .type-detail (jen detail produktu).
   - Mobil: šablona tam dál ukazuje jen nadřazenou kategorii.
   - Barvy, velikost písma a odsazení – zůstávají ze šablony.

   Pořadí načtení nevadí: pravidla nastavují jen vlastnosti, které šablona
   u těchto prvků nenastavuje (flex-wrap, flex, white-space…).
   ===================================================================== */

/* --- Celá lišta: povolit zalomení na další řádek po celých položkách --- */
.breadcrumbs {
  flex-wrap: wrap;
  align-items: center;
}

/* --- Každá položka: nezužovat (flex-shrink 0), ale nikdy širší než lišta --- */
.breadcrumbs > span {
  flex: 0 0 auto;
  max-width: 100%;
  min-width: 0;
}

/* --- Odkazy na kategorie: jeden řádek --- */
.breadcrumbs > span > a {
  white-space: nowrap;
}

/* --- Extrémně dlouhý název kategorie se zkrátí „…“, aby nevznikl vodorovný posuvník.
       POZOR: ořez (overflow:hidden) je záměrně na vnitřním <span>, NE na <a>.
       Šipka ">" je ::after odkazu <a> a na desktopu přečnívá doprava (right:-7px) –
       ořez na <a> by ji useknul napůl (v1 souboru tuhle chybu měla). --- */
.breadcrumbs > span > a > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Jen detail produktu: poslední položka (název produktu) vyplní zbytek řádku.
       min-width 180px = když zbývá méně, název skočí celý na další řádek,
       místo aby se z něj zobrazila jen 2–3 slova. --- */
.type-detail .breadcrumbs > span[data-testid="breadcrumbsLastLevel"] {
  flex: 1 1 0;
  min-width: 180px;
}

/* --- Jen detail produktu: název produktu na jeden řádek, zbytek „…“ --- */
.type-detail .breadcrumbs > span[data-testid="breadcrumbsLastLevel"] > span[itemprop="name"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}