/* =========================================================================
   redesign-extra.css — hodiny-online.cz
   -------------------------------------------------------------------------
   OSTRÝ SOUBOR. Nasazuje se beze změny jediného znaku.

   PRAVIDLO: v tomto souboru se NESMÍ objevit testovací prefix (třída, kterou
   zapíná testmode). Selektory jsou tu už teď přesně takové, jaké pojedou
   naostro — díky tomu se při nasazení nemění ani specificita, ani nic jiného.

   Kontrola před nasazením — musí vrátit 0:
       grep -c "ho\-test" redesign-extra.css

   Načítá se jako POSLEDNÍ z vlastních CSS (za katalog-extra.css), takže
   nad šablonou i nad ostatními vlastními soubory vyhrává pořadím načtení.
   !important je tu jen tam, kde ho někdo použil první — u každého výskytu
   je poznámka proč.

   Soubor se jmenuje "redesign", ne "homepage", protože hlavička je
   společná pro celý web, ne jen pro úvodní stránku.
   ========================================================================= */

:root {
  --rd-ink:        #1a1a1a;   /* černá pro ikony i popisky v hlavičce */
  --rd-ink-hover:  #B5A264;   /* zlatá webu (shodná s --color-primary) */
  --rd-hdr-icon:     24px;    /* velikost glyfu ikony */
  --rd-hdr-icon-box: 28px;    /* pevná šířka rámečku ikony, viz sekce 1 */
  --rd-hdr-label:  15px;      /* velikost popisku */
  --rd-hdr-gap:    30px;      /* mezera mezi trojicí */
}


/* =========================================================================
   1) HLAVIČKA — Přihlášení / Oblíbené / Košík
   -------------------------------------------------------------------------
   Cíl podle návrhu: tři položky vedle sebe vpravo v hlavním řádku
   hlavičky, černá ikona + černý popisek, na mobilu jen ikony.

   Výchozí stav webu:
     • Přihlášení  sedělo v horní liště (.top-navigation-bar), šedé #767676,
                   a NEMĚLO ikonu
     • Oblíbené    #oblibeneBtn z doplňku DKLAB, růžovočervené #fd6864
     • Košík       .cart-count, zelený #32cb00, text "Prázdný košík"

   Přesun Přihlášení do .navigation-buttons dělá redesign-extra.js.
   Obsluha kliknutí je u Shoptetu delegovaná na documentu, takže přesun
   prvku v DOM ji nerozbije (ověřeno — vyskakovací přihlášení funguje).
   ========================================================================= */

@media (min-width: 768px) {

  #header .navigation-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rd-hdr-gap);
  }

  /* Společný vzhled všech tří položek. Reset je široký schválně —
     jde o tlačítko (<button>) i dva odkazy (<a>), každý si nese jinou
     výchozí sadu vlastností ze šablony i z doplňku. */
  #header .navigation-buttons .rd-hdr-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    /* !important: style.css má #header .oblibeneBtn { color: #fd6864 !important } */
    color: var(--rd-ink) !important;
    font-family: "Source Sans 3", sans-serif;
    font-size: var(--rd-hdr-label);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    /* Šablona pozicuje košík a doplněk srdce absolutně — ve flexu to vadí.
       POZOR: musí to být `relative`, ne `static`. Počítadlo kusů v košíku
       je <i> s position:absolute uvnitř tohohle odkazu. Se `static` ztratí
       vztažný bod, vyskočí si nejbližší pozicovaný předek a číslo přistane
       vlevo nahoře u loga. S `relative` zůstává prvek v toku úplně stejně,
       jen počítadlu vrátí, čeho se má držet. */
    position: relative;
    width: auto;
    height: auto;
  }

  /* Ikony. Glyfy zůstávají původní (fonty "shoptet" a "oblibene"),
     mění se jen barva a velikost — nic se nenahrazuje obrázkem. */
  #header .navigation-buttons .rd-hdr-item::before {
    color: inherit !important;   /* stejný důvod jako výše */
    font-size: var(--rd-hdr-icon);
    line-height: 1;
    margin: 0 !important;        /* šablona dává košíku margin-right: 20px */
    position: static !important; /* a doplněk srdci absolutní pozici */
    /* Pevná šířka ikony. Bez ní se popisky neseřadí: glyf srdce z doplňku
       je široký 29,3 px, kdežto přihlášení i košík mají 24 px, takže se
       popisek u Oblíbených lepil blíž než u zbylých dvou. Tohle všem třem
       vnutí stejně široký rámeček a text pak začíná ve stejné vzdálenosti. */
    flex: 0 0 var(--rd-hdr-icon-box);
    width: var(--rd-hdr-icon-box);
    text-align: center;
    height: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }

  /* SRDCE NESMÍ MÍT PŘECHOD BARVY.
     -----------------------------------------------------------------------
     Doplněk mu dává transition: color .35s. Když přepočítá počet oblíbených
     (po přidání položky), spustí se přechod z jeho růžové #fd6864 na naši
     černou — jenže ten přechod nikdy nedoběhne a prvek zůstane viset na
     výchozí, tedy růžové, barvě. Projeví se to tak, že srdce po přidání
     do oblíbených zčervená a už zůstane.

     Ověřeno: naše pravidlo na barvu vyhrávalo celou dobu (vlastnosti gap
     i font-size ze stejného bloku se uplatnily), zasekla se jen animace.
     Po vypnutí přechodu je barva okamžitě správná.

     TÝKÁ SE TO VŠECH TŘÍ, NEJEN SRDCE. Při kontrole na tabletu se ukázalo,
     že stejně se zasekne i košík: šablona mu dává `transition: all .3s`
     a barva zůstane viset na zelené #32cb00, přestože naše pravidlo má
     vyšší specificitu (1,2,0 proti 0,2,1) i !important. Důkaz je stejný
     jako u srdce — po `el.style.transition = 'none'` je barva okamžitě
     rgb(26,26,26). Je to navíc náhodné: na jednom načtení košík černý je,
     na jiném ne, podle toho, jak se trefí s překreslením košíkového
     doplňku. Proto přechod vypínáme plošně.

     Cena je zanedbatelná: barva se při najetí myší mění skokem místo
     plynule. Hover sám funguje dál, jen se neanimuje. */
  #header .navigation-buttons .rd-hdr-item,
  #header .navigation-buttons .rd-hdr-item::before,
  #header .navigation-buttons #oblibeneBtn,
  #header .navigation-buttons #oblibeneBtn::before,
  #header .navigation-buttons .cart-count,
  #header .navigation-buttons .cart-count::before {
    transition: none !important;
  }

  /* Srdce z doplňku se samo nestane flexem — doplněk mu přes ID vnucuje
     display: block, což pravidlo na třídu .rd-hdr-item přebije. Bez tohohle
     řádku se u Oblíbených neuplatní `gap`, takže popisek začíná o 9 px dřív
     než u Přihlášení a Košíku (naměřeno 28 px proti 37 px). */
  #header .navigation-buttons #oblibeneBtn {
    display: inline-flex;
  }

  /* POČÍTADLA U KOŠÍKU A OBLÍBENÝCH.
     -----------------------------------------------------------------------
     Obě čísla musí sedět v pravém horním rohu SVÉ IKONY. Původní pozice
     počítala s tím, že tlačítko je jen ikona — jenže my jsme vedle ikony
     přidali popisek, takže se tlačítko rozšířilo a číslo odletělo:
       • Oblíbené: doplněk dává `right: 6px` k pravému okraji tlačítka,
         číslo tedy přistálo přes konec slova „Oblíbené“ (naměřeno 1520 px,
         popisek 1483–1540 px).
       • Košík: `left: 15px` bylo ještě z doby 24px ikony, teď je rámeček
         ikony 28 px, takže číslo viselo moc vlevo a nízko.
     Proto obojí pozicujeme od LEVÉHO okraje tlačítka, tedy od ikony, a
     `right` shodíme na auto, aby se doplněk neměl čeho chytit.

     Hodnoty: rámeček ikony je 28 px, glyf košíku je v něm 24 px široký
     (vycentrovaný, tedy 2–26 px), glyf srdce 29,3 px (přetéká, 0–28,6 px).
     Aby obě čísla seděla ke svému glyfu stejně, má srdce o 2 px větší
     odsazení. Popisek začíná na 37 px (28 + gap 9), číslo končí na 32–34 px,
     takže se nepřekrývají.

     Barva: zlatá webu s tmavým textem. Šablona má košík zeleně (#32cb00)
     s bílým textem, což je při 11 px kontrast 2,17 : 1. Zlatá s tmavým
     textem dává 6,89 : 1, takže je to i čitelnější, nejen sladěné.
     Oblíbené měl doplněk černé — sjednoceno na stejný vzhled. */
  #header .navigation-buttons .cart-count > i,
  #header .navigation-buttons #oblibeneBtn > em {
    position: absolute !important;
    top: -5px !important;
    left: 24px !important;              /* STŘED kolečka, ne jeho levý okraj */
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    /* Šířka je pružná, ať se vejde i dvojciferné číslo. Roste na obě strany
       (díky posunu o polovinu), takže při „12“ nenaroste do popisku:
       naměřeno 21,2…38,8 px od kraje tlačítka, popisek začíná na 37 px —
       ale zleva, kde je jen prázdná část ikony. Bez posunu by číslo
       rostlo jen doprava a na popisek by najelo. */
    width: auto !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    font-style: normal !important;   /* <em> je kurzíva */
    text-align: center !important;
    background: var(--rd-ink-hover) !important;
    color: var(--rd-ink) !important;
  }

  /* Srdce je o 1,3 px širší než rámeček ikony, číslo tedy o 2 px doprava. */
  #header .navigation-buttons #oblibeneBtn > em {
    left: 26px !important;
  }

  /* Přihlášení ikonu nemá — doplňujeme ji stejným glyfem, jaký má
     přihlášení v mobilní liště (.responsive-tools), font "shoptet". */
  #header .navigation-buttons .rd-hdr-login::before {
    content: "\e922";
    font-family: shoptet;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    display: inline-block;
    speak: never;
  }

  /* Popisky. Vlastní pravidlo je nutné — vnitřní <span> si nesou
     barvu i verzálky z vlastních pravidel šablony. */
  #header .navigation-buttons .rd-hdr-item .rd-hdr-label {
    color: var(--rd-ink) !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: var(--rd-hdr-label) !important;
    font-weight: 400 !important;
    text-transform: none !important;   /* košík se jinak vykresluje jako KOŠÍK */
    letter-spacing: normal !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Najetí myší — zlatá. */
  #header .navigation-buttons .rd-hdr-item:hover,
  #header .navigation-buttons .rd-hdr-item:hover::before,
  #header .navigation-buttons .rd-hdr-item:hover .rd-hdr-label,
  #header .navigation-buttons .rd-hdr-item:focus-visible,
  #header .navigation-buttons .rd-hdr-item:focus-visible::before,
  #header .navigation-buttons .rd-hdr-item:focus-visible .rd-hdr-label {
    color: var(--rd-ink-hover) !important;
  }

  /* Fokus vrácený skriptem po zavření okénka košíku, když uživatel
     jede myší — bez modrého rámečku a bez zlaté (třídu přidává
     obrysJenZKlavesnice v redesign-extra.js). Z klávesnice zůstává
     obojí, jak má. */
  #header .navigation-buttons .ho-bez-obrysu:focus,
  #header .navigation-buttons .ho-bez-obrysu:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  #header .navigation-buttons .rd-hdr-item.ho-bez-obrysu:focus-visible:not(:hover),
  #header .navigation-buttons .rd-hdr-item.ho-bez-obrysu:focus-visible:not(:hover)::before,
  #header .navigation-buttons .rd-hdr-item.ho-bez-obrysu:focus-visible:not(:hover) .rd-hdr-label {
    color: var(--rd-ink) !important;
  }

  /* Původní cenovka košíku ("Prázdný košík" / částka). Návrh na jejím
     místě chce popisek "Košík", proto se skrývá.
     ---------------------------------------------------------------
     ROZHODNUTÍ K POTVRZENÍ: tímhle z hlavičky mizí částka v košíku.
     Kdyby ji klient chtěl zpět, stačí smazat tohle jedno pravidlo —
     cenovka se pak zobrazí za popiskem.
     --------------------------------------------------------------- */
  #header .navigation-buttons .cart-price {
    display: none !important;
  }
}


/* -------------------------------------------------------------------------
   Mobil (do 767 px) — záměrně se nemění NIC.
   Mobilní hlavička je v header-extra.css pečlivě vyladěná a soubor u ní
   výslovně varuje, že .navigation-buttons je containing blockem pro srdce.
   Proto se sem přesunuté Přihlášení jen schová: .navigation-buttons má
   tím pádem stejné dva viditelné prvky jako dnes a rozvržení se nehne.
   Přihlášení zůstává na mobilu dostupné ikonou v .responsive-tools.
   ------------------------------------------------------------------------- */
/* LIŠTA KATEGORIÍ — PŘES CELOU ŠÍŘKU (podle návrhu).
   -------------------------------------------------------------------------
   Šablona řadí položky od levého kraje a vpravo zůstávalo prázdné zlaté
   místo (na 1920 px zhruba 280 px). Položky se teď roztáhnou, aby lištu
   vyplnily; každá si drží šířku podle svého textu a přidá si stejný díl
   volného místa, takže „INTERIÉROVÉ DOPLŇKY" zůstává nejširší — tak to
   má i návrh. Text je v položce na střed.

   Jen od 992 px. Pod tím šablona lištu schválně dělá obrovskou (ul má
   přes 189 000 px) a přebytečné položky schovává do tlačítka „Více" —
   roztažení by tam položky nafouklo na desítky tisíc pixelů.

   Kulaté rohy BEZ overflow: hidden — rozbalovací menu je absolutně
   umístěné přes celou šířku pod lištou a overflow by ho ořízlo.

   „Značky" jsou v menu jediné malými písmeny (vkládá je Shoptet jako
   výrobce, ne jako kategorii), v návrhu jsou verzálkami jako ostatní. */
@media (min-width: 992px) {
  #navigation .navigation-in {
    border-radius: 4px;
  }

  /* JEN AŽ SI ŠABLONA LIŠTU DOPOČÍTÁ (třída .fitted).
     Shoptet nejdřív vykreslí lištu obrovskou (ul má přes 189 000 px),
     změří, co se vejde, přebytek schová do tlačítka „Více" a teprve pak
     přidá třídu .fitted. Kdyby roztažení platilo už během měření, každá
     položka by vyšla na ~31 600 px, skript by usoudil, že se nevejde nic,
     a schoval by do „Více" úplně všechny — lišta zůstala zlatá a prázdná.
     Přesně to se stalo na ostrém webu. */
  #navigation.fitted .navigation-in > .menu-level-1 > li {
    flex: 1 1 auto;
  }

  #navigation .navigation-in > .menu-level-1 > li > a {
    text-align: center;
  }

  #navigation .navigation-in > .menu-level-1 > li.nav-manufacturers > a {
    text-transform: uppercase;
  }
}


/* ÚZKÉ DESKTOPY A TABLETY — HLAVIČKA SE ZALAMOVALA.
   -------------------------------------------------------------------------
   Hlavička má tři stejně široké sloupce (logo | hledání | trojice tlačítek).
   Šířka toho třetího je daná šablonou a s popisky se do ní trojice nevejde:

     šířka okna   sloupec   potřeba (bez mezer)   výsledek
       768–991     236 px        265 px          zalomí VŽDY
      992–1199     311 px        265 px          zalomí při mezeře 30 px
      1200+        379 px        265 px          v pořádku

   Projevovalo se to tak, že Košík spadl pod Přihlášení a Oblíbené, takže
   hlavička byla o řádek vyšší a tlačítka rozházená. Týkalo se to všech
   tabletů i notebooků s oknem do 1199 px, ne jen „nějakého okrajového“
   rozlišení.

   Řešení podle toho, kolik místa zbývá:
     • 992–1199 px — místa je dost, stačí zúžit mezeru mezi tlačítky
       z 30 na 14 px (265 + 2 × 14 = 293 px do 311 px, rezerva 18 px).
     • 768–991 px — popisky se tam nevejdou ani při nulové mezeře, takže
       zůstanou jen ikony, stejně jako na mobilu. Tři ikony po 28 px
       s mezerou 18 px zaberou 120 px z 236 px.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  :root { --rd-hdr-gap: 14px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  :root { --rd-hdr-gap: 18px; }

  #header .navigation-buttons .rd-hdr-label {
    display: none !important;
  }
}


@media (max-width: 767px) {

  #header .navigation-buttons .rd-hdr-login {
    display: none !important;
  }

  /* Popisky jsou jen pro desktop — na mobilu zůstávají samotné ikony. */
  .rd-hdr-label {
    display: none !important;
  }

  /* ČERNÉ IKONY I NA MOBILU.
     -----------------------------------------------------------------------
     Zadání chce přihlášení, oblíbené i košík černé. Na desktopu to řeší
     pravidla nahoře, na mobilu ale platit nemohla — mobilní lišta je jiná:
     přihlášení se sem nebere z .navigation-buttons (to je na mobilu skryté),
     ale z .responsive-tools v .top-navigation-bar, tedy MIMO #header.

     Bez tohohle bloku byly v jedné řádce tři různé barvy: zlatá postavička
     (#b5a264 ze šablony), růžové srdce (#fd6864 z doplňku) a zelený košík
     (#32cb00 ze šablony).

     Pozor na ::before. Na desktopu stačilo obarvit prvek a glyf barvu
     zdědil; na mobilu má doplněk vlastní pravidlo přímo na ::before, takže
     se musí uvést zvlášť — jinak zůstane srdce růžové, i když je rodič
     černý (ověřeno: color prvku rgb(26,26,26), ::before rgb(253,104,100)).

     Hamburger „Menu“ necháváme, jak je — má vlastní šedý podklad a je to
     samostatné tlačítko, ne součást té trojice. */
  #header .navigation-buttons #oblibeneBtn,
  #header .navigation-buttons #oblibeneBtn::before,
  #header .navigation-buttons .cart-count,
  #header .navigation-buttons .cart-count::before,
  .top-navigation-tools .responsive-tools a:not([data-target="navigation"]),
  .top-navigation-tools .responsive-tools a:not([data-target="navigation"])::before {
    color: var(--rd-ink) !important;
    transition: none !important;   /* viz poznámka u srdce na desktopu */
  }

  /* Počítadla — stejný princip jako na desktopu, jen menší.
     Tlačítko je 34 px, glyf košíku 19 px (tedy 7,5…26,5), glyf srdce
     23,2 px (5,4…28,6). Střed kolečka je proto 28 px, u srdce 30 px.
     Kontrola odstupů při dvojciferném čísle: srdce končí na 38,8 px,
     košík začíná o 40 px dál; košík končí na 36,6 px, hamburger o 40 px
     dál. Nikde se to nedotýká. */
  #header .navigation-buttons .cart-count > i,
  #header .navigation-buttons #oblibeneBtn > em {
    position: absolute !important;
    top: 2px !important;
    left: 28px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 15px !important;
    height: 15px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 15px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    text-align: center !important;
    background: var(--rd-ink-hover) !important;
    color: var(--rd-ink) !important;
  }

  #header .navigation-buttons #oblibeneBtn > em {
    left: 30px !important;
  }
}


/* =========================================================================
   2) KATEGORIÁLNÍ DLAŽDICE
   -------------------------------------------------------------------------
   Zadání, sekce 2: pod hlavní navigací hlavní obrazová část homepage,
   8 kategorií. Fotka je jen podklad — nadpis, doprovodný text i CTA jsou
   v HTML, aby šly měnit bez nového obrázku.

   PŘEKRYV NENÍ KOSMETIKA. Změřeno na dodaných osmi fotkách: bez ztmavení
   má bílý text vůči podkladu kontrast 1,3 : 1 až 3,8 : 1. Nejhorší jsou
   nalepovaci.webp (1,3 : 1), budiky.webp (1,5 : 1) a stolni-hodiny.webp
   (1,6 : 1) — všechny tři jsou velmi světlé.

   SÍLA PŘEKRYVU JE ZMĚŘENÁ, NE ODHADNUTÁ. Fotka i přechod se vykreslily
   do plátna a kontrast se odečetl přímo pod skutečnými rámečky nadpisu
   a podtitulu při šířce okna 1920 px (nejtěsnější případ — širší nadpis
   zasahuje nejdál do světlé části).

   Norma WCAG AA má dva prahy a využívají se oba:
     • nadpis ≥ 24 px = velký text  -> stačí 3 : 1
     • podtitul 15 px = běžný text  -> potřebuje 4,5 : 1

   Naměřeno při použité síle 0,70 (rezerva 15 % nad prahem):
     nejhorší nadpis   nalepovaci.webp     prah 3,0
     nejhorší podtitul stolni-hodiny.webp  prah 4,5

   POZOR NA DVĚ VĚCI, KTERÉ TENHLE VÝPOČET DRŽÍ:
     1) Nadpis nesmí klesnout pod 24 px (viz poznámka u .ho-dlazdice__nadpis).
     2) Fotky. Kdyby se měnily, je potřeba přeměřit. Svazující nejsou
        jedna ani dvě — nalepovaci, stolni-hodiny, rizene-radiovym-signalem
        i budiky jsou všechny světlé. Tmavší sada by dovolila překryv
        mnohem lehčí (kyvadlove.webp by si vystačilo skoro s ničím).
   ========================================================================= */

:root {
  --ho-dl-mezera: 16px;
  --ho-dl-padding: clamp(16px, 2.1vw, 28px);
  /* Barvy odečtené přímo z předlohy v zadání, ne odhadnuté:
     modrá hvězdiček #0099d5, zelená u doporučení a odkazu #007700,
     krémový panel bloku pomoci #f7f0e8. */
  --ho-heureka-modra:  #0099d5;
  --ho-heureka-zelena: #007700;
  --ho-pomoc-panel:    #f7f0e8;
  --ho-dl-cta:    #B5A264;   /* zlatá webu */
  --ho-dl-cta-h:  #ffffff;   /* CTA při najetí */
}

.ho-dlazdice {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ho-dl-mezera);
  /* Horní mezera pod lištou kategorií. V testmode ji dělal ještě obal
     doplňku Bannery+; po jeho vypnutí naostro se dlaždice lepily přímo
     na lištu (naměřeno 0 px). */
  margin: 24px 0 42px;
}

/* LÍCOVÁNÍ SE ZLATOU LIŠTOU KATEGORIÍ
   -------------------------------------------------------------------------
   Rodič <main id="content"> má vnitřní odsazení 20 px, ale navigace z něj
   vystupuje — proto mřížka končila o 20 px dřív než zlatá lišta na obou
   stranách (změřeno: lišta 50…1228, mřížka 70…1208).

   Záporný okraj to odsazení ruší, takže dlaždice lícují s lištou a jsou
   o 40 px širší.

   Jen od 768 px: na mobilu žádná zlatá lišta není (je tam hamburger),
   takže není s čím lícovat — a vytažení by tam znamenalo riziko
   vodorovného přetečení. Číslo odpovídá odsazení .container (20 px na
   desktopu, 10 px pod 767 px).
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .ho-dlazdice {
    margin-left: -20px;
    margin-right: -20px;
  }
}

.ho-dlazdice__karta {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  color: #fff;
  background: #1a1a1a;            /* než se načte fotka */
  text-decoration: none !important;  /* šablona podtrhává odkazy v obsahu */
}

.ho-dlazdice__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* drží poměr i u budiky.webp, které má jiný */
  object-position: center;
  display: block;
  transition: transform .5s ease;
}

/* ZTMAVENÍ JEN DO LEVÉHO HORNÍHO ROHU.
   -------------------------------------------------------------------------
   Klient chce co nejvíc zachovat původní barevnost fotek. Ztmavení je
   proto kruhové, se středem v levém horním rohu, tedy přesně tam, kde
   leží nadpis a podtitul; do 86 % poloměru vyhasne úplně. Zbytek fotky —
   celá pravá část i spodek — zůstává nedotčený.

   Čitelnost drží hlavně stín pod písmem (viz .ho-dlazdice__nadpis),
   ten barvy fotky nemění vůbec, protože je vidět jen kolem písmen. */
.ho-dlazdice__karta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 125% at 0% 0%,
      rgba(0, 0, 0, .74)  0%,
      rgba(0, 0, 0, .56) 34%,
      rgba(0, 0, 0, .24) 62%,
      rgba(0, 0, 0, 0)   86%);
}


.ho-dlazdice__obsah {
  position: relative;
  z-index: 1;                     /* nad překryvem */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--ho-dl-padding);
  /* dole je místo vyhrazené pro ukotvené CTA, aby do něj text nenarazil */
  padding-bottom: calc(var(--ho-dl-padding) + 46px);
}

.ho-dlazdice__nadpis {
  display: block;
  color: #fff;
  /* !! SPODNÍ MEZ 24px NENÍ ESTETIKA, DRŽÍ ČITELNOST !!
     Od 24 px je nadpis podle WCAG „velký text" a stačí mu kontrast 3 : 1
     místo 4,5 : 1. Právě o tuhle úlevu se opírá síla překryvu (0,70).
     Kdyby nadpis spadl pod 24 px, práh by skočil na 4,5 : 1 a překryv
     by přestal stačit — dřív tu bylo clamp(19px, …) a pod ~1550 px okna
     by to bylo podlimitní. */
  font-size: clamp(24px, 1.55vw, 26px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  /* Šířka řídí zalomení nadpisu. 13ch drží většinu názvů na dvou řádcích;
     při 11ch se „Hodiny řízené signálem" lámaly na tři a ujídaly výšku,
     kvůli čemuž se doprovodný text lepil na tlačítko. */
  max-width: 13ch;
  text-wrap: balance;
  /* Čtyři vrstvy stínu: tvrdá u písmen kvůli hranám, tři čím dál měkčí
     a širší kvůli světlým plochám fotky za textem. Barvy fotky nemění. */
  text-shadow:
      0 1px  2px rgba(0, 0, 0, .90),
      0 0    8px rgba(0, 0, 0, .90),
      0 0   18px rgba(0, 0, 0, .85),
      0 0   34px rgba(0, 0, 0, .60);
}

/* Popis se ořezává na dva řádky. Bez toho by delší text roztlačil
   dlaždici a narazil do ukotveného tlačítka. */
.ho-dlazdice__popis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(13px, .92vw, 15px);
  line-height: 1.35;
  /* ŠÍŘKA JE ZMĚŘENÁ PODLE NEJDELŠÍHO TEXTU, NE ODHADNUTÁ.
     Při 17ch (126,7 px) se dva popisy nevešly na dva řádky a končily
     třemi tečkami — „Přehledné a moderní na každé…" a „Jednoduchá
     instalace, efekt v…". Změřeno, kolik místa potřebuje každý z osmi
     popisů na dva řádky: nejnáročnější je „Jednoduchá instalace, efekt
     v interiéru" se 142 px. 20ch dává 149 px, takže se vejdou všechny
     s rezervou.

     Širší text ale zasahuje dál do světlejší části fotky, proto se
     musel zesílit i překryv (viz ::after výše, střední zastávka
     0,48 -> 0,56). Přeměřeno na všech osmi fotkách:
       nejhorší nadpis   4,98 (práh 3,0)   dřív 3,87
       nejhorší podtitul 5,30 (práh 4,5)   dřív 4,51
     Rezerva je tedy větší než předtím, ne menší. */
  max-width: 20ch;
  /* Zalomení na dva vyrovnané řádky místo „dlouhý řádek + jedno slovo".
     Prohlížeče, které to neumějí (Safari do 17.4), zalomí normálně —
     text se pořád vejde, jen nebude vyvážený. */
  text-wrap: balance;
  /* ZARUČENÁ MEZERA NAD TLAČÍTKEM.
     CTA má margin-top: auto, které roztáhne zbylé volné místo — jenže
     u delších textů žádné volné místo nezbude a text se tlačítka dotkne.
     Tenhle spodní okraj platí vždycky, protože se v flexu nesluč. */
  margin-bottom: 16px;
  /* Čtyři vrstvy stínu: tvrdá u písmen kvůli hranám, tři čím dál měkčí
     a širší kvůli světlým plochám fotky za textem. Barvy fotky nemění. */
  text-shadow:
      0 1px  2px rgba(0, 0, 0, .90),
      0 0    8px rgba(0, 0, 0, .90),
      0 0   18px rgba(0, 0, 0, .85),
      0 0   34px rgba(0, 0, 0, .60);
}

/* CTA „Zobrazit kolekci →". Šipka je v CSS, ne v textu — aby ji čtečky
   obrazovky nečetly jako slovo a text šel měnit bez ohledu na ni.

   TLAČÍTKO JE UKOTVENÉ KE SPODNÍ HRANĚ, ne odsazené automatickým okrajem.
   S `margin-top: auto` sedělo sedm dlaždic na stejné výšce a osmá
   („Nalepovací hodiny") o 6 px níž — má nadpis na dva řádky a popis na tři,
   takže obsah spotřeboval celou volnou výšku a auto okraj neměl co roztáhnout.
   Ukotvení drží CTA na jedné lince vždy, bez ohledu na délku textů.
   Místo pro něj rezervuje spodní odsazení v .ho-dlazdice__obsah. */
.ho-dlazdice__cta {
  position: absolute;
  left: var(--ho-dl-padding);
  bottom: var(--ho-dl-padding);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--ho-dl-cta);
  color: #1a1a1a;
  font-size: clamp(13px, .92vw, 15px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s ease;
}

.ho-dlazdice__cta::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
}

.ho-dlazdice__karta:hover  .ho-dlazdice__foto,
.ho-dlazdice__karta:focus-visible .ho-dlazdice__foto { transform: scale(1.045); }

.ho-dlazdice__karta:hover  .ho-dlazdice__cta,
.ho-dlazdice__karta:focus-visible .ho-dlazdice__cta { background: var(--ho-dl-cta-h); }

.ho-dlazdice__karta:focus-visible {
  outline: 3px solid var(--ho-dl-cta);
  outline-offset: 2px;
}

/* Kdo si v systému přeje omezený pohyb, nedostane zoom fotky. */
@media (prefers-reduced-motion: reduce) {
  .ho-dlazdice__foto { transition: none; }
  .ho-dlazdice__karta:hover .ho-dlazdice__foto { transform: none; }
}

/* ÚZKÉ DESKTOPY 1200–1439 px — DLAŽDICE JSOU TU O 40 px NIŽŠÍ.
   -------------------------------------------------------------------------
   Obsahový kontejner šablony skáče z 1170 px rovnou na 1410 px, takže
   dlaždice měří 283 × 188 px místo 343 × 228 px. Do té nižší karty se
   obsah nevešel a popis se svisle uřízl — projevilo se to u čtyř
   dlaždic, které mají nadpis na dva řádky (Nástěnné, Kyvadlové, Hodiny
   řízené signálem, Nalepovací). Není to nic nového, chovalo se to tak
   od začátku; jen si toho šlo snadno nevšimnout, protože na 1440 px
   a víc je všechno v pořádku.

   Propočet na kartě 283 × 188:
     k dispozici na výšku  188 − 25 (horní odsazení) − 71 (dolní
                           odsazení včetně místa pro tlačítko) = 92 px
     potřeba               nadpis 2 × 27,6 + popis 2 × 17,6 + mezery = 114 px
     schází                22 px

   Ušetří se na odsazení a mezerách, ne na velikosti písma — nadpis musí
   zůstat na 24 px, jinak by podle WCAG přestal být „velký text" a práh
   by skočil z 3 : 1 na 4,5 : 1, což by dnešní překryv neutáhl.
     odsazení dlaždice 25 -> 20 px          ušetří 10 px
     místo pro tlačítko 46 -> 40 px         ušetří  6 px
     proklad nadpisu 1,15 -> 1,08           ušetří  5 px
     mezery kolem popisu 8/16 -> 6/10       ušetří  8 px
   Celkem 29 px, tedy o 7 px víc, než je potřeba.

   Ověřeno na 1200, 1280, 1366 i 1439 px: nic se neuřízne a mezera mezi
   textem a tlačítkem zůstává nejméně 24 px.
   ------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1439px) {
  :root { --ho-dl-padding: 20px; }

  .ho-dlazdice__obsah {
    padding-bottom: calc(var(--ho-dl-padding) + 40px);
  }

  .ho-dlazdice__nadpis { line-height: 1.08; }

  .ho-dlazdice__popis {
    margin-top: 6px;
    margin-bottom: 10px;
  }
}

/* Tablet — dva sloupce. */
@media (max-width: 1199px) {
  .ho-dlazdice { grid-template-columns: repeat(2, 1fr); }
}

/* Mobil — dvě čtvercové dlaždice vedle sebe.
   -------------------------------------------------------------------------
   PROČ NE JEDEN SLOUPEC: osm dlaždic v poměru 3:2 přes celou šířku dělá
   na telefonu 2 185 px, tedy přes dvě a půl obrazovky samých bannerů, než
   se návštěvník dostane k čemukoli dalšímu. Dva čtvercové sloupce to
   srazí na 798 px (−63 %) a sedí do rytmu webu — e-shop má v <body>
   třídu columns-mobile-2, produkty se na mobilu taky zobrazují po dvou.

   Čitelnost se tím nezhorší, naopak: čtvercový ořez odřízne světlé okraje
   fotek, které byly nejhorší.

   Středový ořez ověřen: u žádné z osmi fotek neuseknou hodiny.

   Vodorovný přechod z desktopu tu nestačí (spadl by na 1,32 : 1), protože
   text zabírá skoro celou šířku dlaždice. Proto plošnější varianta.

   POZOR — MOBIL POTŘEBUJE SILNĚJŠÍ PŘEKRYV NEŽ DESKTOP. Nadpis je tu
   16 px, což už podle WCAG není „velký text", takže mu nestačí 3 : 1 jako
   na desktopu, ale musí na 4,5 : 1 jako zbytek. Proto 0,80 místo 0,85.
   Zvětšit nadpis na 24 px, aby se vešel do lehčího prahu, na dlaždici
   187 × 187 px nejde.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

  .ho-dlazdice {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
  }

  .ho-dlazdice__karta {
    aspect-ratio: 1 / 1;
  }

  /* Na mobilu je dlaždice čtvercová a text v ní zabírá větší díl, takže
     kruh musí být o kousek širší a hustší. */
  .ho-dlazdice__karta::after {
    background: radial-gradient(95% 135% at 0% 0%,
        rgba(0, 0, 0, .76)  0%,
        rgba(0, 0, 0, .58) 38%,
        rgba(0, 0, 0, .26) 64%,
        rgba(0, 0, 0, 0)   88%);
  }


  .ho-dlazdice__obsah {
    padding: 14px;
  }

  .ho-dlazdice__nadpis {
    font-size: 16px;
    line-height: 1.2;
    max-width: none;
  }

  /* Doprovodný text zůstává i na mobilu. Spočítáno pro dlaždici 187 × 187
     při okně 414 px: nejnáročnější kombinace (nadpis na dva řádky
     + text na dva) potřebuje 115 px ze 159 dostupných, takže je místa dost. */
  .ho-dlazdice__popis {
    margin-top: 6px;
    margin-bottom: 12px;      /* zaručená mezera nad tlačítkem, viz výše */
    font-size: 12px;
    line-height: 1.35;
    max-width: none;
  }

  .ho-dlazdice__cta {
    gap: 6px;
    padding: 7px 13px;
    font-size: 12px;
  }
}

/* Velmi úzké telefony. Pod 360 px by dvě dlaždice vyšly na ~140 px
   a delší názvy („Hodiny řízené signálem") by se do nich nevešly.
   Tady se tedy vrací jeden sloupec, ale v nízkém pruhu, ne 3:2. */
@media (max-width: 359px) {
  .ho-dlazdice {
    grid-template-columns: 1fr;
  }
  .ho-dlazdice__karta {
    aspect-ratio: 2 / 1;
  }
  .ho-dlazdice__popis {
    max-width: 30ch;
  }
}


/* =========================================================================
   3) DŮVĚRA — Heureka + pomoc s výběrem (zadání, sekce 4)
   -------------------------------------------------------------------------
   Umístění: pod benefitním pásem (.benefitBanner.position--benefitHomepage).
   Dva sloupce: vlevo hodnocení z Heureky, vpravo blok „Nevíte si rady".

   TEXT NENÍ NA FOTCE. Blok pomoci je rozdělený — text sedí na světlém
   panelu, fotka vyplňuje pravou část. Důvod je měřitelný: heureka_banner
   .webp má bílý ciferník i tmavé dřevo, takže tmavý i bílý text na něm
   propadá stejně (1,1 : 1 v nejhorším místě). Žádná barva textu by na té
   fotce neprošla bez těžkého překryvu, který by ji zabil. Rozdělení
   problém odstraňuje úplně a odpovídá návrhu.

   BLOK MUSÍ VYPADAT HOTOVĚ I BEZ ČÍSEL. Když se hodnocení nepodaří
   načíst, JS přidá .ho-heureka--bezdat a čísla se schovají — zůstane
   oficiální odznak a odkaz na recenze. Proto jsou čísla ve vlastní
   skupině, kterou jde vyjmout, aniž by se rozpadl zbytek.
   ========================================================================= */

.ho-duvera {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ho-dl-mezera);
  margin: 0 0 42px;
}

/* ---- levý sloupec: Heureka ---------------------------------------------- */

.ho-heureka {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 26px 30px;
  border: 1px solid #e5e5e5;
  background: #fff;
}

/* Logo a pod ním hvězdičky — jeden sloupec. */
.ho-heureka__znacka {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ho-heureka__odznak {
  flex: 0 0 auto;
  line-height: 0;
}

/* Logo Heureky — klient chtěl výrazně větší (dřív 60 px).
   Od klienta je nahrané jako SVG (upload/Ikony/site-logo_heureka.svg),
   takže je při každé velikosti ostré. */
.ho-heureka__odznak img {
  width: 132px;
  height: 132px;
  display: block;
}

/* Skupina s čísly. Když data nedorazí, mizí celá najednou. */
.ho-heureka__skore {
  flex: 0 0 auto;
  /* Hodnocení a pod ním počet recenzí. Hvězdičky sem nepatří — ty jsou
     od 22. 9. pod logem, viz .ho-heureka__znacka. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.ho-heureka--bezdat .ho-heureka__skore {
  display: none;
}

/* Hvězdičky: dvě vrstvy nad sebou, barevná se ořízne podle hodnocení.
   Přesnější než půlhvězdičky a nepotřebuje to zvláštní znaky.
   Modrá #0099d5 je odečtená z předlohy i z Heurečina odznaku.
   Řada je jen jedna a zabírá oba řádky mřížky. */
.ho-heureka__hvezdy {
  position: relative;
  display: inline-block;
  /* Větší, aby řada seděla pod logo (115 px proti 132 px loga). */
  font-size: 24px;
  line-height: 1;
  letter-spacing: 3px;
  white-space: nowrap;
}

/* Pojistka: kdyby v HTML zůstala druhá řada hvězdiček (starší verze
   redesign-test.js nebo dřív vložené HTML), skryje se. Bez toho by se
   v mřížce postavila vedle první a bylo by jich 10 za sebou. */
.ho-heureka__hvezdy ~ .ho-heureka__hvezdy {
  display: none;
}

.ho-heureka__hvezdy::before {
  content: "★★★★★";
  color: #d8dde0;
}

.ho-heureka__hvezdy-plne {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 0;                       /* nastaví JS podle hodnocení */
  color: var(--ho-heureka-modra);
  white-space: nowrap;
}

.ho-heureka__hvezdy-plne::before {
  content: "★★★★★";
}

/* „4,9 / 5" — v předloze je celé stejně velké, tučné a černé,
   ne s menším a šedým lomítkem. */
.ho-heureka__cislo {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--rd-ink);
  white-space: nowrap;
}

.ho-heureka__pocet {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.ho-heureka__text {
  border-left: 1px solid #e5e5e5;
  padding-left: 26px;
  min-width: 0;
}

/* Bez čísel zmizí i dělicí čára, jinak by visela ve vzduchu. */
.ho-heureka--bezdat .ho-heureka__text {
  border-left: 0;
  padding-left: 0;
}

/* Popisek, který nese stav bez čísel. Není to údaj, který zastará —
   certifikát obchod buď má, nebo nemá. Díky němu nevypadá karta bez
   hodnocení poloprázdně. S čísly se skrývá, aby se nehromadil text. */
.ho-heureka__certifikat {
  display: none;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--rd-ink);
}

.ho-heureka--bezdat .ho-heureka__certifikat {
  display: block;
}

/* Bez čísel se obsah vystředí, aby nevisel u levého okraje. */
.ho-heureka--bezdat {
  justify-content: center;
  gap: 20px;
}

/* V předloze je zelená CELÁ věta, ne jen procento. */
.ho-heureka__doporuceni {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ho-heureka-zelena);
}

.ho-heureka__doporuceni strong {
  font-weight: 700;
}

.ho-heureka__odkaz {
  display: inline-block;
  color: var(--ho-heureka-zelena);
  font-size: 15px;
  font-weight: 400;
  text-decoration: underline;
}

.ho-heureka__odkaz::after {
  content: " →";
  text-decoration: none;
}

.ho-heureka__odkaz:hover {
  text-decoration: none;
}

/* ---- pravý sloupec: pomoc s výběrem ------------------------------------- */

.ho-pomoc {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  overflow: hidden;
  background: var(--ho-pomoc-panel);   /* světlý panel pod textem */
  color: var(--rd-ink);
  text-decoration: none !important;
}

.ho-pomoc__text {
  padding: 26px 8px 26px 30px;
}

.ho-pomoc__nadpis {
  display: block;
  font-size: clamp(19px, 1.35vw, 23px);
  font-weight: 700;
  line-height: 1.2;
}

.ho-pomoc__popis {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: #4a4a4a;
}

.ho-pomoc__cta {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 20px;
  border: 1px solid var(--ho-dl-cta);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-ink);
  transition: background .2s ease, color .2s ease;
}

.ho-pomoc:hover .ho-pomoc__cta {
  background: var(--ho-dl-cta);
  color: #fff;
}

.ho-pomoc__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- tablet a mobil ------------------------------------------------------ */

@media (max-width: 991px) {
  .ho-duvera {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ho-duvera { gap: 10px; }

  /* Heureka: odznak a čísla vedle sebe, text pod nimi. */
  .ho-heureka {
    flex-wrap: wrap;
    gap: 18px;
    padding: 20px;
  }

  .ho-heureka__text {
    flex: 1 0 100%;
    border-left: 0;
    padding-left: 0;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
  }

  .ho-heureka--bezdat .ho-heureka__text {
    border-top: 0;
    padding-top: 0;
  }

  /* Pomoc: text nad fotkou, fotka v pevném pruhu. */
  .ho-pomoc {
    grid-template-columns: 1fr;
  }

  .ho-pomoc__text {
    padding: 22px 20px;
  }

  .ho-pomoc__foto {
    aspect-ratio: 2 / 1;
    height: auto;
  }
}


/* =========================================================================
   4) PRODUKTOVÁ SEKCE (zadání, sekce 5)
   -------------------------------------------------------------------------
   Přestylování nativního produktového boxu podle předlohy. Vše je pod
   .ho-produkty, což je obal, který kolem skupiny přidá JS — díky tomu se
   výpisy v kategoriích ani jinde nezmění. Karta má na obou místech
   stejné třídy (.product > .p), takže bez toho obalu by se změny rozlezly
   po celém webu.

   BARVY — měřeno, ne odhadnuto:
     • tlačítko: zlatá webu #B5A264 s TMAVÝM textem (6,89 : 1).
       Bílý text na téhle zlaté dává 2,52 : 1, což je nečitelné —
       proto tmavý, stejně jako u dlaždic „Zobrazit kolekci".
     • dostupnost: #008000 (5,14 : 1). Předloha měla #005600, ale ta je
       tak tmavá, že při 13 px čte jako černá. Původní webová #009901 je
       zase proti bílé jen 3,78 : 1, tedy podlimitní. #008000 je zelená
       na první pohled a normou projde.
     • původní cena: #b39a61 z předlohy.
   ========================================================================= */

:root {
  --ho-p-mezera:     16px;
  --ho-p-ramecek:    #ecedf1;   /* odečteno z předlohy */
  --ho-p-zelena:     #008000;   /* dostupnost — viz poznámka u sekce 4 */
  --ho-p-stara-cena: #b39a61;
}


/* ---- hlavička sekce ------------------------------------------------------ */

.ho-produkty {
  margin: 0 0 42px;
}


/* Nadpis skupiny je nativní (.homepage-group-title) a šablona ho centruje.
   V předloze je vlevo. */







/* ---- posuvná řada --------------------------------------------------------
   POZOR NA SPECIFICITU: selektory jsou schválně psané přes `.products`,
   tedy `.ho-produkty .products .product` (0,3,0) místo kratšího
   `.ho-produkty .product` (0,2,0). Šablona má na kartu pravidlo o síle
   0,3,0, které by kratší zápis přebilo — ověřeno: s (0,2,0) se
   neprosadila ani šířka, ani odsazení. Nezkracovat.
   ------------------------------------------------------------------------- */

/* Jeden vodorovný řádek. Posouvá se přetečení, nic se neklonuje —
   viz poznámka u přehrávačů zvuku v redesign-extra.js. */
/* NA DESKTOPU ŽÁDNÝ POSUVNÍK.
   Skupina má šest produktů a ty se na desktopu vejdou do jedné řady,
   takže není co posouvat. Kdyby jich v administraci někdo přidal víc,
   přelijí se do dalšího řádku — nic se neschová.
   Posouvání prstem zůstává jen na mobilu, viz pravidlo u 767 px. */
.ho-produkty .products {
  display: flex !important;   /* šablona dává mřížku s zalamováním */
  flex-wrap: wrap !important;
  gap: var(--ho-p-mezera);
  padding-bottom: 2px;
}

.ho-produkty .products::-webkit-scrollbar { display: none; }

/* POZOR: šířka se NEDÁ spočítat z proměnné.
   calc(… / var(--n)) je podle specifikace neplatný — dělitel musí být
   číslo známé při parsování, takže prohlížeč celé pravidlo zahodí
   a karty si nechají svou původní šířku. Ověřeno: flex se spočítal
   na „0 0 auto". Proto jsou hodnoty rozepsané po breakpointech níže. */
.ho-produkty .products .product {
  flex: 0 0 calc((100% - 5 * var(--ho-p-mezera)) / 6);   /* 6 sloupců */
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}


/* ---- karta --------------------------------------------------------------- */

.ho-produkty .products .p {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--ho-p-ramecek);
  background: #fff;
}

.ho-produkty .products .p .image {
  position: relative;
  display: block;
  margin-bottom: 14px;
}

/* Štítky se na homepage nezobrazují — klient je v kartě nechce.
   Omezení na dva podle priority zůstává v JS pro případ, že by se
   někdy zapnuly zpátky; stačí smazat tohle pravidlo. */
.ho-produkty .products .p .flags-default {
  display: none;
}

.ho-produkty .products .p .flag.ho-stitek-skryty {
  display: none !important;
}

/* Odznak se slevou („−25 %") předloha nemá — původní cena je místo něj
   přeškrtnutá u ceny. */
/* !important je nutné: šablona má .desktop .products .product .flags-extra
   (specificita 0,4,0), což tenhle selektor přebíjí. */
.ho-produkty .products .p .flags-extra {
  display: none !important;
}

/* Název — v předloze tmavý, web ho má zlatý. */
.ho-produkty .products .p a.name {
  display: block;
  margin: 0 0 4px;
  color: var(--rd-ink) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.ho-produkty .products .p a.name:hover { color: var(--ho-dl-cta) !important; }

/* Název nesmí být oříznutý. Šablona mu dává overflow:hidden a pevnou
   výšku, takže delší názvy končí uprostřed slova (naměřeno: výška 45 px,
   obsah potřebuje 78). Zadání přitom výslovně chce „celý název produktu
   – možnost zalomení alespoň na dva řádky". */
.ho-produkty .products .p a.name {
  overflow: visible;
  height: auto;
  max-height: none;
}

/* Šablona zarovnává dostupnost a ceny doprava, předloha má vše vlevo. */
.ho-produkty .products .p .p-in-in,
.ho-produkty .products .p .p-bottom,
.ho-produkty .products .p .availability,
.ho-produkty .products .p .prices {
  text-align: left;
}

/* Podtitulek s kategorií — doplňuje JS, nativní karta ho nemá. */
.ho-produkty .products .p .ho-kategorie {
  display: block;
  margin-bottom: 10px;
  color: #777;
  font-size: 14px;
  line-height: 1.3;
}

/* Oblíbené z doplňku DKLAB.
   -------------------------------------------------------------------------
   Do .p-tools vedle tlačítka KOUPIT ho přesouvá JS. Text „Přidat
   k oblíbeným" se skrývá zmenšením písma na nulu, NE odstraněním uzlu —
   doplněk si ten text po kliknutí přepisuje na „Odebrat z oblíbených"
   a nad smazaným uzlem by mu to spadlo. Ikona žije v ::before, takže jí
   velikost vrátíme zpátky. */
.ho-produkty .products .p .dkLabFavouriteProductDiv {
  flex: 0 0 auto;
  margin: 0;
  line-height: 0;
}

.ho-produkty .products .p .dkLabFavProductSpan {
  display: inline-block;
  font-size: 0 !important;      /* schová text, ikonu ne */
  line-height: 0;
  color: var(--rd-ink) !important;
  cursor: pointer;
}

.ho-produkty .products .p .dkLabFavProductSpan::before {
  font-size: 23px !important;
  line-height: 1;
  /* doplněk barví srdce růžově (#e91b7d), návrh ho chce černé */
  color: var(--rd-ink) !important;
}

.ho-produkty .products .p .dkLabFavProductSpan:hover::before {
  color: var(--ho-dl-cta) !important;
}

.ho-produkty .products .p .availability,
.ho-produkty .products .p .availability span {
  color: var(--ho-p-zelena) !important;   /* style.css barví zeleně natvrdo */
  font-size: 13px;
  line-height: 1.35;
}

.ho-produkty .products .p .ratings-wrapper {
  margin-bottom: 12px;
}

/* Spodek karty se přisaje dolů, aby tlačítka byla v řadě zarovnaná
   i při různě dlouhých názvech.
   -------------------------------------------------------------------------
   Samotné margin-top: auto na .p-bottom nestačí — .p-bottom není přímý
   potomek flexového .p, ale sedí uvnitř .p-in. Automatický okraj se proto
   nemá o co opřít a tlačítka zůstanou v řadě rozházená podle délky názvu.
   Do sloupcového flexu se tedy musí převést i .p-in. */
.ho-produkty .products .p .p-in {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.ho-produkty .products .p .p-bottom {
  margin-top: auto;
}

.ho-produkty .products .p .prices {
  margin-bottom: 12px;
}

.ho-produkty .products .p .price-standard {
  display: block;
  color: var(--ho-p-stara-cena);
  font-size: 14px;
  text-decoration: line-through;
}

.ho-produkty .products .p .price-final strong {
  font-size: 21px;
  font-weight: 700;
  color: var(--rd-ink);
}

/* Řádek s tlačítkem: KOUPIT roztažené, srdíčko vpravo vedle něj. */
.ho-produkty .products .p .p-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ho-produkty .products .p .pr-action {
  flex: 1 1 auto;
  margin: 0;
}

.ho-produkty .products .p .add-to-cart-button {
  display: block;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 0;
  /* zlatá webu s tmavým textem — viz poznámka v hlavičce sekce */
  background: var(--ho-dl-cta) !important;
  color: var(--rd-ink) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  cursor: pointer;
  transition: background .2s ease;
}

/* Šablona dává tlačítku ikonu šipky přes ::before. Předloha má čistý
   text „KOUPIT". */
.ho-produkty .products .p .add-to-cart-button::before {
  content: none;
}

/* Tlačítko na celou šířku karty.
   -------------------------------------------------------------------------
   Šablona staví spodek karty jako dva sloupce vedle sebe: obalový <div>
   je flex a .p-tools v něm má flex: 0 1 calc(50% - 5px). Tlačítko se proto
   nikdy nedostane přes polovinu šířky — a `width: 100%` s tím nic nenadělá,
   protože u flex položky rozhoduje flex-basis, ne width (ověřeno: ani
   s !important se nehnulo z 88 px).

   Předloha má ceny NAD tlačítkem, ne vedle. Stačí tedy obalový div vrátit
   do bloku; tím přestanou flex pravidla platit a oba řádky se poskládají
   pod sebe. */
.ho-produkty .products .p .p-bottom > div {
  display: block;
}

.ho-produkty .products .p .p-tools {
  width: 100%;
}

/* Formulář s tlačítkem bere zbytek šířky, srdíčko si nechá své místo. */
.ho-produkty .products .p .pr-action {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.ho-produkty .products .p .add-to-cart-button:hover {
  background: #a08d52 !important;
}

/* Krátký popis je v předloze pod tlačítkem zbytečný — skrývá se.
   POZOR: [AUDIO:…] se nechává na pokoji, značku maže skript
   prehravani_zvuku_v_kategorii.js a ten potřebuje, aby prvek existoval. */
.ho-produkty .products .p .p-bottom .p-desc {
  display: none;
}


/* ---- tablet a mobil ------------------------------------------------------ */

@media (max-width: 1199px) {
  .ho-produkty .products .product { flex: 0 0 calc((100% - 3 * var(--ho-p-mezera)) / 4); }
}

@media (max-width: 991px) {
  .ho-produkty .products .product { flex: 0 0 calc((100% - 2 * var(--ho-p-mezera)) / 3); }
}

@media (max-width: 767px) {
  :root { --ho-p-mezera: 10px; }

  /* Na mobilu se dvě karty vejdou vedle sebe a zbytek se posouvá prstem.
     Posuvník se schovává, aby pod řadou nevisel šedý pruh. */
  .ho-produkty .products {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .ho-produkty .products .product { flex: 0 0 calc((100% - 1 * var(--ho-p-mezera)) / 2); }

  .ho-produkty .products .p { padding: 10px; }
  .ho-produkty .products .p a.name { font-size: 14px; }
  .ho-produkty .products .p .ho-kategorie { font-size: 13px; }
  .ho-produkty .products .p .price-final strong { font-size: 18px; }
}


/* =========================================================================
   5) VYBRANÉ ZNAČKY (zadání, sekce 6)
   -------------------------------------------------------------------------
   Podle předlohy: karta je JEDNA CELÁ FOTOGRAFIE, text leží přímo na ní
   vlevo. Žádné rozdělení na panel a snímek — fotka jde od kraje ke kraji
   a text se drží na jejím světlém konci.

   JAK JE TO POSTAVENÉ: fotka sedí v pravé části karty a její levý okraj
   se měkkou maskou rozplývá do světlého podkladu. Text leží na tom
   podkladu, ne na fotce. Žádný závoj přes snímek, žádná cedulka pod
   textem — přesně jak to má předloha.

   GEOMETRIE JE DOPOČÍTANÁ, ať se text a fotka nepřekrývají:
     • text končí na 42 % šířky karty
     • fotka začíná na 42 % a plně kryje od 64 %
   Text tím pádem leží na jednolitém podkladu a kontrast je přesně známý:
   nadpis 15,33 : 1, podtitulek 9,57 : 1, odkaz 5,01 : 1 (práh 4,5).
   Výjimka je nadpis KARLSSON, který kousek přesahuje na fotku — i tam
   je nejhůř 10,5 : 1.

   Poměr karty 1672 : 941 odpovídá souborům, takže se fotka nikde
   nedeformuje.

   PROČ NE TEXT PŘÍMO NA FOTCE: levá polovina každého snímku sahá od
   skoro černé po skoro bílou (karlsson: 0,001 až 0,916), takže žádná
   jednolitá barva textu na holé fotce neprojde — tmavá zmizí na světlých
   místech, světlá na tmavých. Změřeno: tmavý text 1,0–2,1 : 1, bílý
   1,0–1,1 : 1. Hledal jsem i místo, kam text posunout: nejlepší pozice
   v celém snímku dává 2,29 : 1, společná pro všechny čtyři 1,00 : 1.
   ========================================================================= */

:root {
  --ho-zn-odkaz: #7d6329;   /* ztmavená zlatá, viz poznámka výše */
}

.ho-znacky {
  margin: 0 0 42px;
}

.ho-znacky__nadpis {
  margin: 0 0 16px;
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rd-ink);
}

.ho-znacky__mrizka {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Poměr karty odpovídá dodaným fotkám (1672 x 941), takže se nic
   neořezává a hodiny jsou pořádně vidět. Při 2,75 : 1 z nich zbýval
   jen úzký pruh. */
.ho-znacky__karta {
  position: relative;
  display: block;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  border-radius: 3px;
  /* Podklad, do kterého se fotka rozplývá. Dřív #fbfaf8 (skoro bílá),
     klient chtěl levou část méně světlou — teplejší a tmavší odstín.
     Tmavší už ne: zlatý odkaz by na #efe9e1 spadl na 4,72 : 1, na hranu. */
  background: #f4f0ea;
  color: var(--rd-ink);
  text-decoration: none !important;
  transition: box-shadow .2s ease;
}

.ho-znacky__karta:hover {
  box-shadow: 0 3px 16px rgba(0, 0, 0, .12);
}

/* Fotka drží pravou část karty a doleva se rozplývá. Maska je na
   obrázku, ne přes něj — tam, kde je vidět, je nedotčený.
   Maska začíná na 15 % krytí, ne na nule — levý okraj fotky tak není
   vybledlý do bíla a snímek je vidět dřív (dřív 0 / 0,45 / plné od 41 %). */
.ho-znacky__foto {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  -webkit-mask-image: linear-gradient(to right,
      rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .60) 22%, #000 38%);
          mask-image: linear-gradient(to right,
      rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .60) 22%, #000 38%);
}

/* CALLEADESIGN — fotka posunutá doprava.
   Nejdelší název ze čtyř přetéká z textového sloupce a končí na 63 %
   šířky karty. Hodinová skříň na fotce přitom začínala na 59 %, takže
   ji nadpis kousek překrýval — a přes tmavý rám skříně měl kontrast
   jen 3,9 : 1. Při 40 % začíná skříň na 63 %, nadpis se jí nedotkne
   a kontrast je 8,3 : 1.
   Dál posouvat nejde: střed ručiček je teď na 98 % šířky karty, při
   32 % by vypadl z obrázku úplně.
   Selektor podle souboru, ne podle třídy — funguje beze změny HTML,
   v testmodu i po vložení do administrace. */
.ho-znacky__foto[src*="znacka-calleadesign"] {
  object-position: 40% center;
}

/* Text leží na podkladu karty. Hranice 42 % je z výpočtu výše —
   za ní začíná fotka a text by se s ní začal potkávat. */
.ho-znacky__text {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  max-width: 42%;
  padding: 0 8px 0 clamp(16px, 1.6vw, 22px);
}

/* Pevné výšky názvu i popisu drží všechny tři řádky na stejné lince
   napříč kartami. Bez nich se u delšího názvu („CALLEADESIGN") posune
   popis i odkaz níž než u ostatních. */
.ho-znacky__nazev {
  display: block;
  min-height: 1.05em;
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rd-ink);
}

.ho-znacky__popis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;              /* dva řádky, i když je text na jeden */
  margin-top: 7px;
  color: #3d3d3d;
  font-size: clamp(12px, .95vw, 15px);
  line-height: 1.3;
}

/* Na jeden řádek i se šipkou — v předloze se nikde nezalamuje. */
.ho-znacky__cta {
  display: inline-block;
  white-space: nowrap;
  margin-top: 12px;
  color: var(--ho-zn-odkaz);
  font-size: clamp(12px, .95vw, 15px);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Šipka je odsazená, jak ji má předloha — ne nalepená na textu. */
.ho-znacky__cta::after {
  content: " →";
  margin-left: 8px;
  text-decoration: none;
  display: inline-block;
}

.ho-znacky__karta:hover .ho-znacky__cta {
  color: var(--rd-ink);
}


/* ---- tablet a mobil ------------------------------------------------------ */

@media (max-width: 1199px) {
  .ho-znacky__mrizka { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .ho-znacky__mrizka {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Na celou šířku je karta nižší, aby jich na displej padlo víc. */
  .ho-znacky__karta { aspect-ratio: 1672 / 941; }
  .ho-znacky__nazev { font-size: 22px; }
  .ho-znacky__text  { max-width: 42%; }
}