/*  Generated: 2026-10-15 13:25:06 */
/* ============================================================
   Phase 99 / D13 — homepage na novém desktopu (R29 varianta B, vlastník 12. 10. 2026; docs/phase-99-mobilni-redesign/
   vyzkum-desktop-tablet.md § 23). Načítá se pro $dsDesktop && $dsHomepage (@layout.latte) a od S2 i pro homepage
   telefonu a tabletu s jednotnými sekcemi ($dsJednotnaHp); desktopová pravidla pod html.ds-desktop.ds-homepage — <html>
   má ds-homepage jen na novém desktopu (telefon má $dsHomepage = dsMobile na každé stránce).
   S2 (vlastník 14. 10. 2026, vyzkum-desktop-tablet.md § 34): homepage telefonu a tabletu jako nový desktop za přepínačem
   designSystem.unifiedHomepage — každé pravidlo má v témž pravidle dvojče html.ds-mobile.ds-jednotna-hp (stejná
   specificita; výjimky: rotátor banneru a pás značek — telefon je nemá); vlastní hodnoty telefonu a tabletu na konci.
   Karta z výpisu (E18) v karuselech: pravidla v listing.css (druhý selektor `.ds-karty …` — obal karuselu dostane
   značku podle BasePresenter::dsKarty, D13e).
   ============================================================ */

/* ---------- D13a — šipky karuselů: od D13e v listing.css pro všechny karusely s novou kartou (obal .ds-karty) na všech
   zařízeních, včetně z-indexu nad bočními odkazy goldexu na desktopu. ---------- */

/* ---------- Výzkum UI/UX desktopu B2 (vlastník 13. 10. 2026, vyzkum-ux-desktop.md § 5 P1-4) — tečky rotátoru POD
   obrázkem. Uvnitř (legacy `top: 390px`) ležely přes obsah banneru — texty, loga a odkazy jsou v obrázku až k dolnímu
   okraji. Kontejner proto tečky pustí ven (overflow), ořez a zaoblení slidů přechází o úroveň níž na .slides_container
   (maska kvůli WebKitu jako u legacy #slider1_container — overflow sám zaoblení u transformovaných slidů neořízne).
   Tečky jsou v Jssor kontejneru škálovaném podle šířky; pod obrázkem leží v mezeře 32 px před dlaždicemi kategorií. ---------- */
html.ds-desktop.ds-homepage #slider1_container {
    overflow: visible;
    -webkit-mask-image: none;
}
html.ds-desktop.ds-homepage #slider1_container .slides_container {
    border-radius: 10px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}
html.ds-desktop.ds-homepage #slider1_container .jssorb21 {
    top: auto;
    bottom: -8px;    /* výška navigátoru je 0, tečka leží 3 px pod ním → 11 px pod obrázkem, uprostřed mezery 32 px */
}

/* ---------- D13b — dlaždice kategorií pod bannery (Navigace::renderDsDlazdice, navigace/dsDlazdice.latte) ----------
   Prvních 8 kategorií hlavního menu, fotka hlavního druhu kategorie na bílém čtverci v béžové dlaždici (náhled R29 B).
   Od 1200 px jeden řádek po 8, užší okno 2 řádky po 4 (8 sloupců by při 1025 px mělo ~115 px). Sloupců je tolik, kolik
   je dlaždic (proměnné z šablony), a každá má šířku jako v plném řádku — e-shop se 4 kategoriemi má 4 stejně velké
   dlaždice uprostřed, ne půl řádku prázdného (7B D13b). */
html.ds-desktop.ds-homepage .ds-hp-kategorie,
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie {
    margin: 32px 0 8px;
}
html.ds-desktop.ds-homepage .ds-hp-nadpis,
html.ds-mobile.ds-jednotna-hp .ds-hp-nadpis {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-text-primary);
    font-size: 28px;
    font-weight: 800;
    line-height: 34px;
    text-align: left;
    text-transform: none;
}
html.ds-desktop.ds-homepage .ds-hp-kategorie__mrizka,
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__mrizka {
    display: grid;
    grid-template-columns: repeat(var(--ds-hp-kat-sloupcu-uzke, 4), minmax(0, calc((100% - 3 * 12px) / 4)));
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 1200px) {
    html.ds-desktop.ds-homepage .ds-hp-kategorie__mrizka,
    html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__mrizka {
        grid-template-columns: repeat(var(--ds-hp-kat-sloupcu, 8), minmax(0, calc((100% - 7 * 12px) / 8)));
    }
}
html.ds-desktop.ds-homepage .ds-hp-kategorie__mrizka > li,
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__mrizka > li {
    margin: 0;
    padding: 0;
}
/* barva i při najetí — legacy a:hover (0,1,1) přebarvuje na --primary-color tenanta */
html.ds-desktop.ds-homepage .ds-hp-kategorie__odkaz,
html.ds-desktop.ds-homepage .ds-hp-kategorie__odkaz:hover,
html.ds-desktop.ds-homepage .ds-hp-kategorie__odkaz:focus-visible,
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__odkaz,
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__odkaz:hover,
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__odkaz:focus-visible {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 14px 10px 16px;
    box-sizing: border-box;
    border-radius: var(--ds-radius-card);
    background: var(--ds-surface-muted);
    color: var(--ds-text-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}
/* najetí: obrys v barvě akcentu (jako podtržení aktivní položky menu) — dlaždice se nehýbe ani nemění rozměr */
html.ds-desktop.ds-homepage .ds-hp-kategorie__odkaz:hover {
    box-shadow: inset 0 0 0 2px var(--ds-accent);
}
/* fokus z klávesnice jako ostatní komponenty (button.css) — outline přežije i režim vynucených barev, box-shadow ne (7B) */
html.ds-desktop.ds-homepage .ds-hp-kategorie__odkaz:focus-visible,
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__odkaz:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 2px;
}
html.ds-desktop.ds-homepage .ds-hp-kategorie__foto,
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__foto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
}
html.ds-desktop.ds-homepage .ds-hp-kategorie__foto img,
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__foto img {
    width: auto;
    height: auto;
    max-width: 86%;
    max-height: 86%;
    object-fit: contain;
}
html.ds-desktop.ds-homepage .ds-hp-kategorie__nazev,
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__nazev {
    overflow-wrap: anywhere;
}

/* ---------- D13c — pruh výhod = blok „Proč si vybrat" (helper/proc.latte, texty per tenant; vlastník 13. 10.) ----------
   Náhled R29 B: pod dlaždicemi řada 4 kompaktních rámečků — ikona vlevo, tučný nadpis, šedý text; legacy blok jsou
   béžové dlaždice s ikonou nad textem (stylesheet.css „10. SERVICES"), na bibiku 242–306 px vysoké (1440 / 1100 px;
   rozpětí podle toho, zda se při měření odebere jen tento soubor, nebo celý nový desktop); nový pruh 106 / 144 px, bibik.hu s nejdelšími
   texty 106 / 162 px (změřeno 13. 10.). Šablona je u všech 47 tenantů stejná (nadpis + 4× ikona, h3, p), takže stačí
   CSS; na homepage nového desktopu ho Homepage/default.latte ukazuje i s personalizací. Nadpis bloku zůstává jen pro
   čtečky (vlastník 13. 10.: pruh bez nadpisu, jako v náhledu). */
html.ds-desktop.ds-homepage .proc-block__h2,
html.ds-mobile.ds-jednotna-hp .proc-block__h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
html.ds-desktop.ds-homepage .proc-block,
html.ds-mobile.ds-jednotna-hp .proc-block {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 24px;
}
html.ds-desktop.ds-homepage .proc-block__in,
html.ds-mobile.ds-jednotna-hp .proc-block__in {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ikona nadpis" "ikona text";
    align-content: start;
    align-items: start;         /* legacy .proc-block__in má align-items a justify-content center — ikona by byla uprostřed
                                   výšky nadpisu s textem, ne v řádku nadpisu (7B D13c) */
    justify-content: start;
    column-gap: 12px;
    row-gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--ds-outline-soft);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text-secondary);
    text-align: left;
    overflow-wrap: anywhere;    /* dlouhé slovo v úzkém okně nepřeteče rámeček (jako název dlaždice) */
}
html.ds-desktop.ds-homepage .proc-block__in i,
html.ds-mobile.ds-jednotna-hp .proc-block__in i {
    grid-area: ikona;
    width: 28px;
    margin-top: 1px;
    color: var(--ds-accent);
    font-size: 22px;
    line-height: 1;
    text-align: center;
}
html.ds-desktop.ds-homepage .proc-block__in h3,
html.ds-mobile.ds-jednotna-hp .proc-block__in h3 {
    grid-area: nadpis;
    margin: 0;
    color: var(--ds-text-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}
html.ds-desktop.ds-homepage .proc-block__in p,
html.ds-mobile.ds-jednotna-hp .proc-block__in p {
    grid-area: text;
    margin: 0;
    color: var(--ds-text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

/* ---------- D13d — obnova stylu podle náhledu R29 A (vlastník 12. 10.): nadpisy, blog, SEO text ----------
   Nadpisy sekcí (karusely, Navštívené, blog, loga značek) vlevo jako „Nakupujte podle kategorie" — legacy je mají
   uprostřed, 32 px, normální řez (stylesheet.css h2.centerBoxHeading, .index …, .owl-box-head, .hp-visited …).
   Specificita: id pravidla legacy (#blog-header …, #snippet-tabProductListSecond-tabList …) přebíjí jen selektor s id,
   proto je tu u nich id taky; blog.css se načítá v těle stránky (blok css šablony) PO tomhle souboru. */
html.ds-desktop.ds-homepage h2.centerBoxHeading,
html.ds-desktop.ds-homepage h2.owl-box-head,
html.ds-desktop.ds-homepage #blog-header h2.centerBoxHeading,
html.ds-desktop.ds-homepage #snippet-tabProductListSecond-tabList h2.centerBoxHeading,
html.ds-mobile.ds-jednotna-hp h2.centerBoxHeading,
html.ds-mobile.ds-jednotna-hp h2.owl-box-head,
html.ds-mobile.ds-jednotna-hp #blog-header h2.centerBoxHeading,
html.ds-mobile.ds-jednotna-hp #snippet-tabProductListSecond-tabList h2.centerBoxHeading {
    margin: 32px 0 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-text-primary);
    font-size: 28px;
    font-weight: 800;
    line-height: 34px;
    text-align: left;
    text-transform: none;
}
/* nadpis blogu je odkaz na blog — barva nadpisu, ne odkazu tenanta */
html.ds-desktop.ds-homepage #blog-header h2.centerBoxHeading a,
html.ds-desktop.ds-homepage #blog-header h2.centerBoxHeading a:hover,
html.ds-mobile.ds-jednotna-hp #blog-header h2.centerBoxHeading a,
html.ds-mobile.ds-jednotna-hp #blog-header h2.centerBoxHeading a:hover {
    color: inherit;
    text-decoration: none;
}
html.ds-desktop.ds-homepage #blog-header h2.centerBoxHeading a:focus-visible,
html.ds-mobile.ds-jednotna-hp #blog-header h2.centerBoxHeading a:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 2px;
}

/* Blog: bez šedého boxu (blog.css #blog-top), úvod vlevo, kategorie jako béžové pilulky místo černých tlačítek 52 px
   (vzor pilulek podkategorií výpisu E16 a „Zkuste hledat" D3). Karusel článků beze změny. */
html.ds-desktop.ds-homepage #blog-top,
html.ds-mobile.ds-jednotna-hp #blog-top {
    padding: 0;
    border-radius: 0;
    background: none;
}
html.ds-desktop.ds-homepage #blog-header,
html.ds-desktop.ds-homepage #blog-header *,
html.ds-mobile.ds-jednotna-hp #blog-header,
html.ds-mobile.ds-jednotna-hp #blog-header * {
    text-align: left;
}
/* úvod přes celou šířku obsahu (vlastník 13. 10.: zúžení na 900 px působilo useknutě) */
html.ds-desktop.ds-homepage #blog-header p,
html.ds-mobile.ds-jednotna-hp #blog-header p {
    max-width: none;
    margin: 0;
    color: var(--ds-text-secondary);
    font-size: 15px;
    line-height: 1.5;
}
html.ds-desktop.ds-homepage #blog-categories,
html.ds-mobile.ds-jednotna-hp #blog-categories {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 16px;
}
html.ds-desktop.ds-homepage .blog-category,
html.ds-mobile.ds-jednotna-hp .blog-category {
    width: auto;
}
html.ds-desktop.ds-homepage .blog-category a,
html.ds-desktop.ds-homepage .blog-category a:hover,
html.ds-desktop.ds-homepage .blog-category a:focus-visible,
html.ds-mobile.ds-jednotna-hp .blog-category a,
html.ds-mobile.ds-jednotna-hp .blog-category a:hover,
html.ds-mobile.ds-jednotna-hp .blog-category a:focus-visible {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 10px 18px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface-muted);
    color: var(--ds-text-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}
/* najetí jako dlaždice kategorií (D13b): obrys v barvě akcentu, pilulka se nehýbe */
html.ds-desktop.ds-homepage .blog-category a:hover {
    box-shadow: inset 0 0 0 2px var(--ds-accent);
}
html.ds-desktop.ds-homepage .blog-category a:focus-visible,
html.ds-mobile.ds-jednotna-hp .blog-category a:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 2px;
}

/* Pruh poradny pod články blogu (vlastník 13. 10.; Homepage/default.latte, v patičce se na homepage nevykreslí).
   Vzhled pruhu je z footer.css (třídy .ds-paticka__*, ne vnořené pod patičku). Mimo <footer class="ds-paticka">
   chybí jen to, co nastavuje `.ds-paticka` samotná: písmo 15 px / 1,5 (jinak 14 px těla stránky — úvod blogu nad ním
   má 15 px) a obrys fokusu odkazu. box-sizing pruh nepotřebuje (stylesheet.css dává border-box všem prvkům, 7B).
   Obal .ds-paticka__uvod tu nemá vlastní plochu ani okraje — pruh lícuje s nadpisy a články.
   Blízko pod články (vlastník 13. 10.): legacy rezerva 44 px pod každým karuselem (responsive-stylesheet.css
   `.owl-carousel .owl-wrapper-outer`, místo na stránkování, které karusel blogu nemá — main.js) + okraj 30 px bloku
   článků dávaly 74 px. Dole zůstávají 4 px — obal karuselu ořezává (overflow: hidden) a bez rezervy by ořízl obrys
   fokusu karty článku; pruh 20 px pod články → 24 px. */
html.ds-desktop.ds-homepage #blog-articles,
html.ds-mobile.ds-jednotna-hp #blog-articles {
    margin-bottom: 0;
}
html.ds-desktop.ds-homepage #blog-articles .owl-wrapper-outer,
html.ds-mobile.ds-jednotna-hp #blog-articles .owl-wrapper-outer {
    padding-bottom: 4px;
}
html.ds-desktop.ds-homepage .ds-hp-poradna .ds-paticka__uvod,
html.ds-mobile.ds-jednotna-hp .ds-hp-poradna .ds-paticka__uvod {
    margin: 20px 0 8px;
    padding: 0;
    background: none;
}
html.ds-desktop.ds-homepage .ds-hp-poradna .ds-paticka__poradna,
html.ds-mobile.ds-jednotna-hp .ds-hp-poradna .ds-paticka__poradna {
    font-size: 15px;
    line-height: 1.5;
}
html.ds-desktop.ds-homepage .ds-hp-poradna .ds-paticka__sipka-odkaz:focus-visible,
html.ds-mobile.ds-jednotna-hp .ds-hp-poradna .ds-paticka__sipka-odkaz:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 3px;
}

/* Šipky karuselu článků jako u produktových karuselů (listing.css `.ds-karty .owl-buttons`; vlastník 13. 10.: „jiné
   šipky"): kulaté 44 px, vždy vidět (blog.css je ukazuje jen při najetí myší), přesah −6 px, nad bočními odkazy goldexu.
   Svisle na středu karty — fotka článku vyplňuje celou kartu. */
html.ds-desktop.ds-homepage #blog-articles .owl-buttons .owl-prev,
html.ds-desktop.ds-homepage #blog-articles .owl-buttons .owl-next,
html.ds-mobile.ds-jednotna-hp #blog-articles .owl-buttons .owl-prev,
html.ds-mobile.ds-jednotna-hp #blog-articles .owl-buttons .owl-next {
    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);
    color: var(--ds-text-primary);
    line-height: normal;
    opacity: 1;
}
/* nad boční odkazy goldexu jen na desktopu (jako produktové šipky, listing.css) — na telefonu a tabletu ne: šipka by
   při posouvání překryla spodní navigaci (1001) a ťuknutí na „Účet" by posunulo karusel (7B S1–S3) */
html.ds-desktop.ds-homepage #blog-articles .owl-buttons .owl-prev,
html.ds-desktop.ds-homepage #blog-articles .owl-buttons .owl-next {
    z-index: 10000;
}
html.ds-desktop.ds-homepage #blog-articles .owl-buttons .owl-prev,
html.ds-mobile.ds-jednotna-hp #blog-articles .owl-buttons .owl-prev {
    left: -6px;
}
html.ds-desktop.ds-homepage #blog-articles .owl-buttons .owl-next,
html.ds-mobile.ds-jednotna-hp #blog-articles .owl-buttons .owl-next {
    right: -6px;
}
/* ikona: legacy `.owl-buttons .fas` (stylesheet.css) je šedá — produktové šipky ji přebarvují stejně (listing.css) */
html.ds-desktop.ds-homepage #blog-articles .owl-buttons .fas,
html.ds-mobile.ds-jednotna-hp #blog-articles .owl-buttons .fas {
    padding: 0;
    color: var(--ds-text-primary);
    font-size: 18px;
}

/* Pás značek (helper/znacky.latte tenanta): šipky nic neposouvají — jsou to odkazy na /znacky — proto schované
   a vedle nadpisu odkaz „Všechny značky" (Homepage/default.latte, vlastník 13. 10.). Mezera pod pásem: legacy
   `#top_znacky` měl odsazení 30 px, čáru a okraj 50 px, pak 16 px legacy sloupce (.columnCenter) a 32 px okraj řádku
   „O nás" — od log k „O nás" 128 px a dvě čáry nad sebou. Nově pás bez odsazení, čáry i okraje a obal 16 px okraj
   → s odsazením sloupce 32 px k dalšímu bloku: k řádku „O nás" (bibik-cz) i k patičce (e-shopy bez SEO textu,
   většina tenantů s pásem — 7B). */
html.ds-desktop.ds-homepage .ds-hp-znacky {
    position: relative;
    margin-bottom: 16px;
}
html.ds-desktop.ds-homepage .ds-hp-znacky #top_znacky {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
html.ds-desktop.ds-homepage .ds-hp-znacky #top_znacky a.arrow {
    display: none;
}
/* v řádku nadpisu: horní okraj h2 (32 px) se přenese ven z obalu, takže nadpis začíná u horní hrany obalu; výška
   řádku nadpisu 34 px */
html.ds-desktop.ds-homepage .ds-hp-znacky__vse {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    color: var(--ds-link-accent);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}
html.ds-desktop.ds-homepage .ds-hp-znacky__vse:hover {
    color: var(--ds-link-accent);
    text-decoration: underline;
}
html.ds-desktop.ds-homepage .ds-hp-znacky__vse svg {
    width: 18px;
    height: 18px;
}
html.ds-desktop.ds-homepage .ds-hp-znacky__vse:hover svg {
    transform: translateX(3px);
}
html.ds-desktop.ds-homepage .ds-hp-znacky__vse:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 3px;
}

/* SEO text úvodní stránky: řádek „O nás" (textLoader/dsAbout.latte, vzhled .ds-category-about z listing.css). Legacy
   .content kontejner dává textu okraje — řádek sahá přes celou šířku obsahu jako ostatní sekce. Mezeru nad řádkem
   dává blok nad ním (pás značek 16 px) a odsazení legacy sloupce (.columnCenter, 16 px) — vlastní horní okraj 0. */
html.ds-desktop.ds-homepage #indexDefaultMainContent .ds-hp-o-nas,
html.ds-mobile.ds-jednotna-hp #indexDefaultMainContent .ds-hp-o-nas {
    margin: 0 0 8px;
}

/* ---------- S2 (vlastník 14. 10. 2026, vyzkum-desktop-tablet.md § 34) — vlastní hodnoty homepage telefonu a tabletu ----------
   Nad dvojčaty výš (html.ds-mobile.ds-jednotna-hp). Nadpisy sekcí 22 px (tablet 26 px) místo 28 px.
   Telefon (rozhodnutí vlastníka 14. 10. podle koláže variant): dlaždice kategorií v JEDNÉ POSOUVACÍ ŘADĚ (104 px, vidět
   3½) — nabídka začne o ~280 px výš než při mřížce 4 × 2 a názvy se při 320–360 px nelámou uprostřed slova
   („Autoseda|čky"); pruh výhod 2 × 2 JEN S NADPISY (text odstavce na telefonu schovaný, ~110 px místo 280–380 px).
   Tablet (od 768 px, html.ds-tablet): dlaždice v mřížce jako desktop (na výšku 4, na šířku 8 v řadě), výhody s textem. */
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie {
    margin: 24px 0 8px;
}
html.ds-mobile.ds-jednotna-hp .ds-hp-nadpis,
html.ds-mobile.ds-jednotna-hp h2.centerBoxHeading,
html.ds-mobile.ds-jednotna-hp h2.owl-box-head,
html.ds-mobile.ds-jednotna-hp #blog-header h2.centerBoxHeading,
html.ds-mobile.ds-jednotna-hp #snippet-tabProductListSecond-tabList h2.centerBoxHeading {
    font-size: 22px;
    line-height: 28px;
}
html.ds-mobile.ds-jednotna-hp .ds-hp-nadpis {
    margin-bottom: 12px;
}
html.ds-mobile.ds-jednotna-hp h2.centerBoxHeading,
html.ds-mobile.ds-jednotna-hp h2.owl-box-head,
html.ds-mobile.ds-jednotna-hp #blog-header h2.centerBoxHeading,
html.ds-mobile.ds-jednotna-hp #snippet-tabProductListSecond-tabList h2.centerBoxHeading {
    margin: 24px 0 12px;
}
/* řada: zarovnaná vlevo — středění (justify-content z mřížky desktopu) by u přetékající řady schovalo začátek za levý
   okraj, kam se nedá posunout (změřeno na prototypu: řada začínala třetí kategorií). Rezerva 4 px dokola pro obrys
   fokusu (overflow řadu ořezává), vyrovnaná záporným okrajem — dlaždice lícují s nadpisem. */
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__mrizka {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin: -4px -4px 0;
    padding: 4px 4px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
}
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__mrizka > li {
    flex: 0 0 104px;
    scroll-snap-align: start;
}
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__odkaz,
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__odkaz:hover,
html.ds-mobile.ds-jednotna-hp .ds-hp-kategorie__odkaz:focus-visible {
    gap: 6px;
    padding: 6px 4px 8px;
    border-radius: var(--ds-radius-sm);
    font-size: 13px;
    line-height: 1.2;
}
html.ds-mobile.ds-jednotna-hp .proc-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 8px;
}
html.ds-mobile.ds-jednotna-hp .proc-block__in {
    grid-template-areas: "ikona nadpis";
    align-items: center;
    column-gap: 8px;
    padding: 10px;
}
html.ds-mobile.ds-jednotna-hp .proc-block__in i {
    width: 20px;
    margin-top: 0;
    font-size: 18px;
}
html.ds-mobile.ds-jednotna-hp .proc-block__in h3 {
    font-size: 14px;
}
html.ds-mobile.ds-jednotna-hp .proc-block__in p {
    display: none;
}
/* šipky karuselu článků: na telefonu u okraje obrazovky jako produktové karusely (S1 −2 px) */
html.ds-mobile.ds-jednotna-hp #blog-articles .owl-buttons .owl-prev {
    left: -2px;
}
html.ds-mobile.ds-jednotna-hp #blog-articles .owl-buttons .owl-next {
    right: -2px;
}
@media (min-width: 768px) {
    html.ds-tablet.ds-jednotna-hp .ds-hp-nadpis,
    html.ds-tablet.ds-jednotna-hp h2.centerBoxHeading,
    html.ds-tablet.ds-jednotna-hp h2.owl-box-head,
    html.ds-tablet.ds-jednotna-hp #blog-header h2.centerBoxHeading,
    html.ds-tablet.ds-jednotna-hp #snippet-tabProductListSecond-tabList h2.centerBoxHeading {
        font-size: 26px;
        line-height: 32px;
    }
    /* tablet: mřížka jako desktop (sloupce níž podle šířky) — zrušit řadu telefonu */
    html.ds-tablet.ds-jednotna-hp .ds-hp-kategorie__mrizka {
        display: grid;
        justify-content: center;
        gap: 12px;
        margin: 0;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }
    html.ds-tablet.ds-jednotna-hp .ds-hp-kategorie__odkaz,
    html.ds-tablet.ds-jednotna-hp .ds-hp-kategorie__odkaz:hover,
    html.ds-tablet.ds-jednotna-hp .ds-hp-kategorie__odkaz:focus-visible {
        gap: 10px;
        padding: 12px 10px 14px;
        border-radius: var(--ds-radius-card);
        font-size: 15px;
        line-height: 1.25;
    }
    html.ds-tablet.ds-jednotna-hp .proc-block {
        gap: 12px;
    }
    html.ds-tablet.ds-jednotna-hp .proc-block__in {
        grid-template-areas: "ikona nadpis" "ikona text";
        align-items: start;
        column-gap: 12px;
        padding: 14px 16px;
    }
    html.ds-tablet.ds-jednotna-hp .proc-block__in i {
        width: 28px;
        margin-top: 1px;
        font-size: 22px;
    }
    html.ds-tablet.ds-jednotna-hp .proc-block__in h3 {
        font-size: 15px;
    }
    html.ds-tablet.ds-jednotna-hp .proc-block__in p {
        display: block;
        font-size: 13px;
    }
}
/* tablet na výšku 4 dlaždice v řadě (2 řady); na šířku od 1025 px 8 v řadě jako desktop od 1200 px (4 v řadě by
   při 1180 px dalo dlaždice 279 × 313 px, změřeno 14. 10.) — název 14 px, ať se „Diamantové šperky" vejdou */
@media (min-width: 768px) and (max-width: 1024px) {
    html.ds-tablet.ds-jednotna-hp .ds-hp-kategorie__mrizka {
        grid-template-columns: repeat(var(--ds-hp-kat-sloupcu-uzke, 4), minmax(0, calc((100% - 3 * 12px) / 4)));
    }
}
@media (min-width: 1025px) {
    html.ds-tablet.ds-jednotna-hp .ds-hp-kategorie__mrizka {
        grid-template-columns: repeat(var(--ds-hp-kat-sloupcu, 8), minmax(0, calc((100% - 7 * 12px) / 8)));
    }
    html.ds-tablet.ds-jednotna-hp .ds-hp-kategorie__odkaz,
    html.ds-tablet.ds-jednotna-hp .ds-hp-kategorie__odkaz:hover,
    html.ds-tablet.ds-jednotna-hp .ds-hp-kategorie__odkaz:focus-visible {
        font-size: 14px;
    }
    html.ds-tablet.ds-jednotna-hp .proc-block {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}