/**
 * Template 2026-001 — Professional
 * Hlavni stylesheet — prepisuje default.css
 *
 * Sekce:
 *   A. Font & Reset
 *   B. Layout
 *   C. Hlavicka (header)
 *   D. Hlavni menu / Kategorie
 *   E. Obsah (content area)
 *   F. Produktove polozky
 *   G. Detail produktu
 *   H. Kosik & Objednavka
 *   I. Paticka (footer)
 *   J. Formulare & UI prvky
 *   K. Drobeckova navigace
 *   L. Sidebar moduly
 *   M. Responzivita
 */

/* Krok 1.1 (11/2026): systemove casti (reset, kosik, objednavka, ucet, formulare, modaly,
   naseptavac, alerty...) jsou v templates/_core/css/core.css, ktery se linkuje PRED timto
   souborem. Tady zustava jen vizual sablony 2026-001. Mapa puvodnich radku:
   templates/_core/README.md. */

/* Krok 141: Dřívější Krok 22 skrýval tpl-v2-topbar úplně, čímž se v2 stala
   téměř identickou s default variantou. Nyní topbar zpět zobrazený (žlutý,
   kompaktní, obsahuje Doprava zdarma + Kč/EUR + kontakt) — viz hlavicka--v2.css. */

/* Krok 142: skrýt jádrový #banner_top (bílý pruh nahoře nad hlavičkou
   s telefonem a "napište nám"). Duplikuje kontakt info z topbarů (v2 žlutý
   / v3 tmavý) i footeru. U default se dá zvážit ponechání, ale user chtěl
   univerzální skrytí ("smaz úplně"). */
body div#banner_top {
    display: none !important;
}

/* ================================================================
   B. LAYOUT
   ================================================================ */

div#all {
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
    padding: 0;
}

/* Full-width wrappers */
.tpl-header-wrap {
    width: 100%;
    background: var(--tpl-primary);
}

.tpl-menu-wrap {
    width: 100%;
    background: var(--tpl-menu-bg);
}

.tpl-footer-wrap {
    width: 100%;
    background: var(--tpl-footer-bg);
    color: var(--tpl-footer-text);
}

.tpl-content-inner {
    max-width: var(--tpl-max-width);
    margin: 0 auto;
    padding: 0 15px;
}

/* ================================================================
   B2. SLIDER (homepage carousel)
   ================================================================ */

.tpl-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--tpl-border-radius);
    margin-bottom: 25px;
    background: #000;
}

.tpl-slider-track {
    position: relative;
    width: 100%;
}

.tpl-slider-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
}

.tpl-slider-slide.active {
    position: relative;
    opacity: 1;
    z-index: 1;
}

.tpl-slider-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.tpl-slider-slide a {
    display: block;
}

/* --- Arrow navigation --- */
.tpl-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(0,0,0,0.35);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--tpl-transition), background var(--tpl-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tpl-slider:hover .tpl-slider-arrow {
    opacity: 1;
}

.tpl-slider-arrow:hover {
    background: rgba(0,0,0,0.6);
}

.tpl-slider-prev { left: 12px; }
.tpl-slider-next { right: 12px; }

/* --- Dot navigation --- */
.tpl-slider-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
}

.tpl-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--tpl-transition), transform var(--tpl-transition);
}

.tpl-slider-dot:hover {
    background: rgba(255,255,255,0.8);
}

.tpl-slider-dot.active {
    background: var(--tpl-primary);
    transform: scale(1.3);
}

/* --- Text menu navigation (slider4 style) --- */
.tpl-slider-menu {
    display: none;
}

/* When data-nav="menu" — show text menu, hide dots */
.tpl-slider[data-nav="menu"] .tpl-slider-dots { display: none; }
.tpl-slider[data-nav="menu"] .tpl-slider-arrow { display: none; }
.tpl-slider[data-nav="menu"] .tpl-slider-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 220px;
    z-index: 3;
    background: rgba(0,0,0,0.5);
}

.tpl-slider[data-nav="menu"] .tpl-slider-menu-item {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: all var(--tpl-transition);
    font-family: var(--tpl-font);
}

.tpl-slider[data-nav="menu"] .tpl-slider-menu-item:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.tpl-slider[data-nav="menu"] .tpl-slider-menu-item.active {
    color: #fff;
    background: rgba(255,255,255,0.15);
    border-left: 3px solid var(--tpl-primary);
}

/* When data-nav="dots" — dots only, no arrows */
.tpl-slider[data-nav="dots"] .tpl-slider-arrow { display: none; }
.tpl-slider[data-nav="dots"] .tpl-slider-menu { display: none; }

/* When data-nav="arrows" — arrows only, no dots */
.tpl-slider[data-nav="arrows"] .tpl-slider-dots { display: none; }
.tpl-slider[data-nav="arrows"] .tpl-slider-menu { display: none; }

/* When data-nav="dots-arrows" — dots + arrows (default) */
.tpl-slider[data-nav="dots-arrows"] .tpl-slider-menu { display: none; }

/* ================================================================
   C. HLAVICKA (HEADER)
   ================================================================ */

div#hlavicka {
    width: 100%;
    max-width: 100%;
    height: auto;
    background: var(--tpl-header-bg);
    margin: 0;
    padding: 0;
}

div#hlavicka_obsah {
    max-width: var(--tpl-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 30px;
    min-height: 70px;
    height: 70px;
}

/* --- Logo --- */
.tpl-header-logo {
    flex: 0 0 auto;
    max-width: 250px;
}

.tpl-header-logo img,
div.hlavicka_modul_logo img,
div.hlavicka_modul_odkaz img {
    max-height: 50px;
    width: auto;
    display: block;
}

/* Text logo (fallback bez obrázku): název + podnadpis/claim pod sebou
   (klasika = div.hlavicka_nadpis + div.hlavicka_popis) */
.tpl-header-text-logo {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
    text-decoration: none;
}
.tpl-header-shop-subtitle {
    font-size: .8rem;
    font-weight: 400;
    opacity: .75;
    color: var(--tpl-text);
    margin-top: 2px;
}

div.hlavicka_modul_logo {
    flex: 0 0 auto;
}

div.hlavicka_modul_logo a {
    display: block;
}

div.hlavicka_modul_odkaz {
    flex: 0 0 auto;
}

div.hlavicka_modul_odkaz a,
a#hlavicka_odkaz_logo {
    display: block;
    position: static;
    width: auto;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-width: 150px;
    min-height: 40px;
}

/* --- Search --- */
.tpl-header-search {
    flex: 1 1 auto;
    max-width: 560px;
    margin: 0 20px 0 40px;
}

div.hlavicka_modul_fulltextove_vyhledavani {
    position: static;
    width: 100%;
    height: auto;
    background: none;
    border: none;
    right: auto;
    bottom: auto;
}

#hlavicka_fulltext_form {
    display: flex;
    align-items: center;
    position: relative;
    background: var(--tpl-card-bg);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--tpl-pill);
    overflow: hidden;
    height: 46px;
    box-shadow: none;
    transition: border-color var(--tpl-transition), box-shadow var(--tpl-transition);
}

/* Jemné zvýraznění při psaní */
#hlavicka_fulltext_form:focus-within {
    border-color: var(--tpl-primary);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

#fulltext_text {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 6px 0 22px;
    font-size: 15px;
    color: var(--tpl-text);
    outline: none;
    width: auto;
    height: 100%;
    font-family: var(--tpl-font);
}

#fulltext_text::placeholder,
#fulltext_text.defaultTextActive {
    color: #9aa0a6;
}

#hlavicka_fulltext_form .submit,
#hlavicka_fulltext_form input[type="submit"] {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    background: transparent !important;
    border: none;
    cursor: pointer;
    font-size: 0;
    position: relative;
    border-radius: 0;
    transition: opacity var(--tpl-transition);
    color: transparent;
    overflow: hidden;
}

#hlavicka_fulltext_form .submit:hover,
#hlavicka_fulltext_form input[type="submit"]:hover {
    background: transparent !important;
    opacity: 0.6;
}

/* Magnifying glass icon overlay on search button */
#hlavicka_fulltext_form {
    position: relative;
}

#hlavicka_fulltext_form:after {
    content: "";
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--tpl-ico-search) center / contain no-repeat;
    mask: var(--tpl-ico-search) center / contain no-repeat;
    font-size: 16px;
    color: #5f6368;
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* --- Vyhledávání V KATEGORII (renderFulltextForm) ---
   Stejně elegantní pill jako horní hledání, ale záměrně odlišené:
   viditelný popisek „vyhledat:" + barevné odeslací tlačítko (horní hledání
   je bez popisku, jen s ikonou lupy) → uživatel pozná, že hledá v kategorii. */
form#frm_fulltext_kategorie {
    margin: 8px 0 16px;
}

div.form_fulltext_kategorie {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 46px;
    padding-left: 6px;
    background: var(--tpl-card-bg);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: var(--tpl-pill);
    overflow: hidden;
    color: #777;
    /* font-size:0 skryje holý textový uzel "vyhledat:" — popisek nahrazuje
       placeholder "Hledat v kategorii…" (nastaven JS v _body_all.latte) */
    font-size: 0;
    font-family: var(--tpl-font);
    transition: border-color var(--tpl-transition), box-shadow var(--tpl-transition);
}

div.form_fulltext_kategorie:focus-within {
    border-color: var(--tpl-primary);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

div.form_fulltext_kategorie input.input_text,
div.form_fulltext_kategorie input[type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    height: 100%;
    padding: 0 14px;
    font-size: 15px;
    color: var(--tpl-text);
    font-family: var(--tpl-font);
}

div.form_fulltext_kategorie input::placeholder {
    color: #9aa0a6;
}

div.form_fulltext_kategorie input[type="submit"],
div.form_fulltext_kategorie .submit {
    flex: 0 0 auto;
    width: 52px;
    height: 100%;
    border: none;
    background: var(--tpl-primary);
    /* text ">>" skrytý — místo něj ikona lupy (::after kontejneru) */
    color: transparent;
    font-size: 0;
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    transition: background var(--tpl-transition);
}

div.form_fulltext_kategorie input[type="submit"]:hover,
div.form_fulltext_kategorie .submit:hover {
    background: var(--tpl-primary-dark);
}

/* Ikona lupy přes odeslací tlačítko (input nemůže mít ::after) */
div.form_fulltext_kategorie:after {
    content: "";
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--tpl-ico-search) center / contain no-repeat;
    mask: var(--tpl-ico-search) center / contain no-repeat;
    font-size: 16px;
    color: var(--tpl-primary-text);
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* --- Header Right (user, cart, burger) --- */
.tpl-header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* --- Phone & email contact (header) --- */
.tpl-header-contact {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tpl-header-contact a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--tpl-header-text);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--tpl-transition);
}

.tpl-header-contact a:hover {
    color: var(--tpl-header-text);
}

.tpl-header-contact a i {
    font-size: 15px;
    /* ikona = solid barva textu (byla #555 solid; color-mix s transparent by ji
       nad žlutou ztónoval do olivova — proto solid var, ať zůstane neutrální a themeable) */
    color: var(--tpl-header-text);
}

/* === Zobrazit/skrýt prvky hlavičky (customizer → Hlavička → Prvky) ===
   Přepínač v customizeru = select s cssVar --tpl-el-* (hodnota = display | none),
   fallback = původní desktop display. !important, ať toggle spolehlivě přebije
   základní pravidla nezávisle na pořadí. Prvky s responzivním skrytím (email, měny)
   mají mobilní #hlavicka-scoped display:none !important (vyšší specificita) → na mobilu
   zůstanou skryté bez ohledu na tuto desktop hodnotu. Logo/košík se schválně skrývat
   nedají (nutné prvky). */
.tpl-header-search     { display: var(--tpl-el-search, block) !important; }
.tpl-header-phone      { display: var(--tpl-el-phone, flex) !important; }
.tpl-header-email      { display: var(--tpl-el-email, flex) !important; }
.tpl-currency-switcher { display: var(--tpl-el-currency, flex) !important; }
.hlavicka_modul_vlajky { display: var(--tpl-el-vlajky, block) !important; }
/* Prvky karty produktu (výpis kategorie / homepage carousel) — zobrazit/skrýt
   z customizeru (záložka Kategorie). Prázdná hodnota = zobrazit (var se neemituje),
   „none" = skrýt. Dostupnost (.dostupnost) záměrně vynechána — tu nechceme skrývat. */
.polozka tr.cena_bez_dph     { display: var(--tpl-el-cena-bez-dph, table-row) !important; }
.polozka .polozka_popis_text { display: var(--tpl-el-popis, flow-root) !important; }

/* === Zobrazit/skrýt bloky patičky (customizer → Patička → Prvky) ===
   Stejný princip jako hlavička (--tpl-fel-* = footer element). V sablona.css (ne v
   paticka*.css), ať to platí pro všechny varianty patičky (default/světlá/kompaktní).
   Fallback = původní display; tyto bloky nemají responzivní skrytí, tak stačí !important. */
.tpl-foot-head    { display: var(--tpl-fel-head, flex) !important; }
.tpl-foot-contact { display: var(--tpl-fel-contact, flex) !important; }
.tpl-foot-news    { display: var(--tpl-fel-news, block) !important; }
.tpl-foot-pay     { display: var(--tpl-fel-pay, flex) !important; }
.tpl-foot-del     { display: var(--tpl-fel-del, flex) !important; }

/* === Zobrazit/skrýt sekce homepage (customizer → Homepage → Sekce) ===
   Jediná theme-level sekce homepage je Hero (--tpl-hel-* = homepage element).
   Ostatní obsah = moduly obchodu (spravují se v adminu homepage modulů, mají tam
   vlastní skrýt/pořadí; mají stejné třídy → přes CSS jednotlivě necílitelné).
   Base pravidla jsou scoped `body.sekce_uvod .tpl-hero*` → !important je přebije. */
.tpl-hero      { display: var(--tpl-hel-hero, grid) !important; }
.tpl-hero-side { display: var(--tpl-hel-hero-side, grid) !important; }

/* --- Currency switcher (pill toggle) --- */
.tpl-currency-switcher {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--tpl-header-text) 12%, transparent);
    border-radius: var(--tpl-pill);
    padding: 3px 4px;
    gap: 2px;
}

.tpl-currency-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: color-mix(in srgb, var(--tpl-header-text) 50%, transparent);
    text-decoration: none;
    border-radius: var(--tpl-pill);
    transition: all var(--tpl-transition);
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}

a.tpl-currency-item:hover {
    color: color-mix(in srgb, var(--tpl-header-text) 80%, transparent);
}

.tpl-currency-active {
    background: #fff;
    color: #000;
    cursor: default;
    font-weight: 600;
}

/* --- User module --- */
div.hlavicka_modul_uzivatel2 {
    position: static;
    overflow: visible;
    padding: 0;
    bottom: auto;
    right: auto;
}

div.hlavicka_modul_uzivatel2 ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

div.hlavicka_modul_uzivatel2 ul li {
    display: inline-block;
    padding: 0;
    margin: 0;
}

div.hlavicka_modul_uzivatel2 a {
    color: var(--tpl-header-text);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--tpl-pill);
    border: 1px solid color-mix(in srgb, var(--tpl-header-text) 25%, transparent);
    transition: background var(--tpl-transition), border-color var(--tpl-transition);
    white-space: nowrap;
    gap: 8px;
    height: 40px;
}

div.hlavicka_modul_uzivatel2 a:before {
    content: "";
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--tpl-ico-user) center / contain no-repeat;
    mask: var(--tpl-ico-user) center / contain no-repeat;
    font-size: 16px;
    color: var(--tpl-header-text);
}

div.hlavicka_modul_uzivatel2 a:hover {
    background: color-mix(in srgb, var(--tpl-header-text) 6%, transparent);
    border-color: color-mix(in srgb, var(--tpl-header-text) 40%, transparent);
}

/* --- Admin tlačítko v hlavičce ---
   #admin_ikona vykresluje JÁDRO (_page.php) jen přihlášenému adminovi (podmínka
   $Shop->adminPrihlaseno() — VIDITELNOST ZACHOVÁNA). JS (_body_all.latte) mu sundá
   plovoucí inline styl, přidá .tpl-admin-btn a přesune ho do .tpl-header-right.
   Vzhled = normální obrysová pilulka laděná k „Přihlásit se", s ozubeným kolem. */
#admin_ikona:not(.tpl-admin-btn) {
    display: none !important;   /* dokud JS nepřesune do hlavičky — žádný plovoucí flash */
}
.tpl-header-right #admin_ikona.tpl-admin-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 8px 16px;
    border-radius: var(--tpl-border-radius);
    border: 1px solid color-mix(in srgb, var(--tpl-header-text) 40%, transparent);
    background: transparent;
    color: var(--tpl-header-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-transform: capitalize;   /* „admin" -> „Admin" */
    white-space: nowrap;
    opacity: 1;
    position: static;
    box-shadow: none;
    transition: background var(--tpl-transition), border-color var(--tpl-transition);
}
.tpl-header-right #admin_ikona.tpl-admin-btn:hover {
    background: color-mix(in srgb, var(--tpl-header-text) 8%, transparent);
    border-color: color-mix(in srgb, var(--tpl-header-text) 55%, transparent);
}
/* Obrázky vložené v textu popisu / tabů produktu (detail) — omezit šířku, ať se
   neroztahují přes celou obrazovku (např. „Příklad bezpečnostní karty FAB" v popisu).
   Drží poměr (height:auto); malé ikonky < 420px zůstávají beze změny. */
body.sekce_detail .ui-tabs-panel img {
    max-width: min(420px, 100%);
    height: auto;
}
/* Produktová fota jsou lazy (loading="lazy") a bez načteného obrázku mají 0×0; navíc
   dev server vrací 404 pomalu → placeholder na obrázku by se objevoval postupně/až po
   scrollu. Proto placeholder dáme na KONTEJNER .polozka_foto (šedé pole + ikona) — je
   tam OKAMŽITĚ (i u lazy, bez čekání). Když se reálný obrázek úspěšně načte, JS přidá
   .tpl-foto-loaded → pravidlo se vypne, letterbox object-fit:contain je bílý (jádrové
   bílé pozadí), žádná šedá kolem obrázku. Rozbitý img uvnitř schováme (prosvítá
   placeholder kontejneru, bez dvojité ikony). */
.polozka_foto:not(.tpl-foto-loaded) {
    background-color: var(--tpl-card-bg);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cg%20fill='none'%20stroke='%23c9c9c9'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='28'%20y='32'%20width='44'%20height='36'%20rx='4'/%3E%3Ccircle%20cx='40'%20cy='44'%20r='4'/%3E%3Cpath%20d='M64%2058l-9-9-11%2011-4-4-8%208'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 46px 46px;
}
.polozka_foto img {
    width: 100% !important;
    height: 100% !important;
    opacity: 0;                 /* SKRYTÝ dokud se reálný obrázek úspěšně nenačte —
                                   jinak prohlížeč v rezervovaném boxu vykreslí broken-image
                                   ikonu (u lazy/nenačtených) přes placeholder kontejneru. */
    transition: opacity .2s ease;
}
.polozka_foto.tpl-foto-loaded img {
    opacity: 1;                 /* načtený → ukázat obrázek (JS přidá .tpl-foto-loaded) */
}

/* Logged-in state: second link (logout) is subtle */
div.hlavicka_modul_uzivatel2 ul li:nth-child(2) a {
    border: none;
    padding: 4px 8px;
    font-size: 11px;
    height: auto;
    color: #555;
    gap: 0;
}

div.hlavicka_modul_uzivatel2 ul li:nth-child(2) a:before {
    content: "";
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--tpl-ico-signout) center / contain no-repeat;
    mask: var(--tpl-ico-signout) center / contain no-repeat;
    font-size: 12px;
    color: #555;
}

/* --- Cart module --- */
div.hlavicka_modul_obsah_kosiku3 {
    position: static;
    min-width: auto;
    bottom: auto;
    right: auto;
}

div.hlavicka_modul_obsah_kosiku3 a {
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    padding: 8px 16px;
    border-radius: var(--tpl-pill);
    background: var(--tpl-header-cart-bg);
    transition: background var(--tpl-transition);
    height: 40px;
    white-space: nowrap;
}

div.hlavicka_modul_obsah_kosiku3 a:before {
    content: "";
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--tpl-ico-bag) center / contain no-repeat;
    mask: var(--tpl-ico-bag) center / contain no-repeat;
    font-size: 16px;
    color: #fff;
}

div.hlavicka_modul_obsah_kosiku3 a:after {
    display: none;
}

div.hlavicka_modul_obsah_kosiku3 a:hover {
    background: var(--tpl-header-cart-bg-hover);
    color: #fff;
}

span.pocet_polozek_v_kosiku {
    display: none;
}

span.kosik_cena_s_dph {
    display: inline;
    padding: 0;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    color: #fff;
}

/* --- Infolinka in header --- hide it, show in top bar or footer only */
div#hlavicka div.hlavicka_modul_infolinka {
    display: none;
}

/* --- Burger menu icon (CSS-only, hidden on desktop) --- */
.tpl-burger-icon {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: var(--tpl-primary-text);
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--tpl-border-radius);
    transition: background var(--tpl-transition);
    user-select: none;
}

.tpl-burger-icon:hover {
    background: rgba(0,0,0,0.1);
}

.tpl-menu-toggle-input {
    display: none;
}

/* --- Responsive menu (hidden on desktop, shown on mobile via checkbox) --- */
div.hlavicka_modul_responzivni_menu {
    display: none;
}

/* --- Infolinka above header (phone/email) --- */
div.hlavicka_modul_infolinka {
    display: none; /* hidden on Latte template - contact is in header right section */
}

/* --- Banner top (above header — phone/email strip) --- */
div#banner_top {
    /* Uzky pruh telefon/e-mail NAD hlavickou. Zamerne pruhledny (splyva s body-bg);
       drive tu byl `var(--tpl-header-bg)` bez definice -> resolvovalo na nic = transparent.
       Ted je --tpl-header-bg definovana (customizer), takze explicitne transparent,
       aby se vzhled tohoto pruhu nezmenil. */
    background: transparent;
    max-width: var(--tpl-max-width);
    margin: 0 auto;
    padding: 4px 15px;
    font-size: 12px;
}

div#banner_top ul {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
}

div#banner_top ul li {
    display: inline;
}

div#banner_top ul li a {
    color: var(--tpl-text-light);
    text-decoration: none;
    font-size: 12px;
}

div#banner_top ul li a:hover {
    color: var(--tpl-text);
}

/* --- Banner hlavicka --- */
div#banner_hlavicka {
    max-width: var(--tpl-max-width);
    margin: 0 auto;
}


/* ================================================================
   D. HLAVNI MENU / KATEGORIE
   ================================================================ */

/* Krok 140: skrýt jádrovou bílou lištu #hlavni_menu (renderNavigace() v jádru
   vypíše sekundární seznam odkazů Jak nakupovat/Poradna/Blog...). U variant
   v2 (žlutá topbar) i v3 (šedá topbar) jsou tyto odkazy už integrované do
   topbaru → duplikace. U default varianty by lišta možná dávala smysl, ale
   uživatel chce jednotný vzhled napříč variantami. !important overrides
   případný jádrový visible reset. */
body div#hlavni_menu {
    display: none !important;
}

div#hlavni_menu nav {
    max-width: var(--tpl-max-width);
    margin: 0 auto;
    display: block;
}

div#hlavni_menu_odsazeni {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Standard menu items (not category mega-menu) */
div.hlavni_menu {
    display: inline-block;
    padding: 0;
    margin: 0;
}

div.hlavni_menu a {
    display: block;
    padding: 10px 18px;
    color: var(--tpl-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--tpl-transition);
}

div.hlavni_menu a:hover {
    color: var(--tpl-primary);
}

/* Category menu module */
div.hlavicka_modul_menu_kategorie2_foto {
    width: 100%;
    max-width: 100%;
    position: static;
}

div#slide_menu_kategorie {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    background: transparent;
    max-width: var(--tpl-max-width);
    margin: 0 auto;
    flex-wrap: nowrap;
    height: 50px;
    padding: 0 30px;
}

div.slide_menu {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    position: relative;
}

div.slide_menu a.slide_menu {
    display: inline-flex;
    align-items: center;
    padding: 0 24px 0 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    color: var(--tpl-menu-text);
    text-transform: none;
    letter-spacing: normal;
    line-height: 50px;
    height: 50px;
    transition: background var(--tpl-transition), color var(--tpl-transition);
    white-space: nowrap;
    text-align: center;
}

/* First category item — align with left edge */
div#slide_menu_kategorie div.slide_menu:first-child a.slide_menu {
    padding-left: 0;
}

/* Dropdown arrow indicator for categories with submenus */
div.slide_menu a.slide_menu:after {
    content: "";
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--tpl-ico-angledown) center / contain no-repeat;
    mask: var(--tpl-ico-angledown) center / contain no-repeat;
    font-size: 10px;
    margin-left: 6px;
    color: #666;
    transition: color var(--tpl-transition);
}

div.slide_menu a.slide_menu:hover,
div.slide_menu a.slide_menu_aktivni {
    background: var(--tpl-menu-hover-bg);
    color: var(--tpl-menu-hover-text);
}

/* Submenu dropdown */
div.slide_podmenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 600px;
    max-width: 900px;
    width: auto;
    background: var(--tpl-card-bg);
    border: none;
    border-radius: 0 0 var(--tpl-border-radius) var(--tpl-border-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 20px;
    z-index: 1000;
    margin-left: 0;
    display: none;
}

div.slide_podmenu ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px;
}

div.slide_podmenu ul li {
    width: calc(50% - 5px);
    height: auto;
    min-height: 60px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

div.slide_podmenu ul li a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--tpl-text);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    border-radius: var(--tpl-border-radius);
    border: 1px solid var(--tpl-card-border);
    transition: all var(--tpl-transition);
    height: 100%;
    background: var(--tpl-surface-2);
}

div.slide_podmenu ul li a:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-card-bg);
    color: var(--tpl-primary-dark);
    box-shadow: var(--tpl-shadow);
}

div.slide_podmenu ul li a img {
    max-width: 50px;
    max-height: 50px;
    width: auto;
    height: auto;
    margin-right: 12px;
    border-radius: var(--tpl-radius-sm);
    object-fit: contain;
}

/* Category menu bar (rendered from header module) */
.tpl-category-menu {
    background: var(--tpl-menu-bg);
    width: 100%;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.tpl-category-menu div#slide_menu_kategorie {
    background: var(--tpl-menu-bg);
}

/* Category menu (menu_kategorie module — classic version) */
.tpl-category-menu div#menu_kategorie {
    max-width: var(--tpl-max-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.tpl-category-menu div#menu_kategorie div#menu_kategorie_hlavni {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
}

.tpl-category-menu div.menu_kategorie_hlavni {
    position: relative;
}

.tpl-category-menu div.menu_kategorie_hlavni > a {
    display: block;
    padding: 12px 16px;
    color: var(--tpl-menu-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--tpl-transition), color var(--tpl-transition);
}

.tpl-category-menu div.menu_kategorie_hlavni > a:hover {
    background: var(--tpl-menu-hover-bg);
    color: var(--tpl-menu-hover-text);
}

/* Subcategory dropdown */
.tpl-category-menu div.menu_kategorie_podkategorie {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: var(--tpl-card-bg);
    border: 1px solid #e5e5e5;
    border-top: 2px solid var(--tpl-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 0 0 var(--tpl-border-radius) var(--tpl-border-radius);
    min-width: 200px;
    padding: 8px 0;
}

.tpl-category-menu div.menu_kategorie_hlavni:hover > div.menu_kategorie_podkategorie,
.tpl-category-menu div.menu_kategorie_podkategorie_zobrazit {
    display: block;
}

.tpl-category-menu div.menu_kategorie_podkategorie a {
    display: block;
    padding: 8px 20px;
    color: var(--tpl-text);
    text-decoration: none;
    font-size: 13px;
    transition: background var(--tpl-transition);
}

.tpl-category-menu div.menu_kategorie_podkategorie a:hover {
    background: var(--tpl-surface-2);
    color: var(--tpl-primary-dark);
}

/* Subcategory bar styles are in css/podkategorie.css or css/podkategorie--foto.css (component variant) */

/* Banner menu */
div#banner_menu {
    max-width: var(--tpl-max-width);
    margin: 0 auto;
}


/* ================================================================
   E. OBSAH (CONTENT AREA)
   ================================================================ */

div#in_body {
    max-width: var(--tpl-max-width);
    margin: 0 auto;
    padding: 20px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* === HOMEPAGE HERO (spoke-style) — velká dlaždice + 2 malé ===
   HTML injektuje JS v _body_all.latte (jen na body.sekce_uvod). */
body.sekce_uvod .tpl-hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    margin: 0 0 34px;
    width: 100%;
}
/* Skryté postranní dlaždice → velká dlaždice přes celou šířku (obrázek se ořízne, cover) */
body.sekce_uvod .tpl-hero.tpl-hero--full { grid-template-columns: 1fr; }
body.sekce_uvod .tpl-hero-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    min-width: 0;
}
body.sekce_uvod .tpl-hero-main,
body.sekce_uvod .tpl-hero-tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: var(--tpl-border-radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--tpl-primary); /* fallback, když obrázek chybí */
    text-decoration: none;
    transition: transform var(--tpl-transition), box-shadow var(--tpl-transition);
}
body.sekce_uvod .tpl-hero-main { min-height: 440px; }
body.sekce_uvod .tpl-hero-tile { min-height: 213px; }

/* Pozadí hero jde přes custom property, ne přes inline background-image — inline styl
   by přebil media query níž a na mobilu by se stahovala plná varianta obrázku.
   Hodnoty nastavuje renderHero() v _body_all.latte: --tpl-hero-bg vždy,
   --tpl-hero-bg-sm jen když vedle obrázku leží zmenšená verze (soubor -sm.webp).
   POZOR: bez tohohle pravidla nemá hero pozadí vůbec, protože JS už background-image
   inline nenastavuje. Když se sablona.css přepisuje, tenhle blok musí zůstat. */
body.sekce_uvod .tpl-hero-main,
body.sekce_uvod .tpl-hero-tile { background-image: var(--tpl-hero-bg); }
@media (max-width: 767px) {
    body.sekce_uvod .tpl-hero-main,
    body.sekce_uvod .tpl-hero-tile { background-image: var(--tpl-hero-bg-sm, var(--tpl-hero-bg)); }
}
body.sekce_uvod .tpl-hero-main:hover,
body.sekce_uvod .tpl-hero-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--tpl-shadow-hover);
}
/* Tmavý gradient dole kvůli čitelnosti textu na obrázku i na žluté */
body.sekce_uvod .tpl-hero-main::before,
body.sekce_uvod .tpl-hero-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.05) 68%, transparent 100%);
}
body.sekce_uvod .tpl-hero-content {
    position: relative;
    padding: 28px;
    color: #fff;
    max-width: 100%;
}
body.sekce_uvod .tpl-hero-main .tpl-hero-content h2 {
    font-size: var(--tpl-hero-title-size);
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 8px;
    color: #fff;
}
body.sekce_uvod .tpl-hero-tile .tpl-hero-content h3 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 10px;
    color: #fff;
}
body.sekce_uvod .tpl-hero-content p {
    font-size: 16px;
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.92);
}
/* Bílý text v hero — přebít homepage pravidla pro nadpisy (#sekce h2 apod.). */
body.sekce_uvod .tpl-hero-content h2,
body.sekce_uvod .tpl-hero-content h3,
body.sekce_uvod .tpl-hero-content p {
    color: #fff !important;
}
body.sekce_uvod .tpl-hero-btn {
    display: inline-block;
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    padding: 11px 24px;
    border-radius: var(--tpl-border-radius);
    font-weight: 700;
    font-size: 15px;
}
body.sekce_uvod .tpl-hero-main:hover .tpl-hero-btn,
body.sekce_uvod .tpl-hero-tile:hover .tpl-hero-btn {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover);
}
@media (max-width: 768px) {
    body.sekce_uvod .tpl-hero { grid-template-columns: 1fr; }
    body.sekce_uvod .tpl-hero-main { min-height: 300px; }
    body.sekce_uvod .tpl-hero-tile { min-height: 150px; }
}

/* Homepage (na přání): skrýt úvodní FAB banner (#banner_staticky) a modul
   dlaždic kategorií. USP pruh (Doprava zdarma…) zůstává. */
body.sekce_uvod #banner_staticky {
    display: none !important;
}
body.sekce_uvod .modul_HlavniKategorie_bg {
    display: none !important;
}
/* (ODSTRANĚNO kvůli univerzálnosti šablony) Dřívější klíčovýservis hacky skrývaly na
   homepage konkrétní modulová ID (#34 carousel značek, #35 nadpis značek, #50 text
   „Poradna/Proč u nás") a VŠECHNY .modul_basic textové bloky. To rozbíjelo šablonu na
   jiných shopech: ta ID mapují na jiné/žádné moduly a skrytí .modul_basic bralo
   legitimní homepage texty. Viditelnost homepage modulů patří do admin správy modulů
   daného shopu, ne natvrdo do CSS šablony. */

div#levy_prostredni {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    float: none;
    width: auto !important;
    overflow: hidden;
}

div#prostredek {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 100%;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    float: none;
    width: auto !important;
    order: 2;
    margin-top: 0;
    background-image: none !important;
    padding-top: 0;
    overflow: hidden;
}

div#levy_sloupec {
    display: none;
}

div#pravy_sloupec {
    flex: 0 0 240px;
    width: 240px;
    float: none;
    order: 3;
    display: none; /* hide by default for modern look */
}

.cl, .cr, .cb {
    display: none; /* hide float clearers — using flexbox now */
}

/* ================================================================
   F. PRODUKTOVE POLOZKY
   ================================================================ */

div.polozka {
    background: var(--tpl-content-bg);
    border-radius: var(--tpl-border-radius);
    box-shadow: var(--tpl-shadow);
    transition: box-shadow var(--tpl-transition), transform var(--tpl-transition);
    overflow: hidden;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

div.polozka:hover {
    box-shadow: var(--tpl-shadow-hover);
    transform: translateY(-2px);
}

div.polozka table {
    border: none;
    width: 100%;
}

div.polozka td {
    border: none;
    padding: 8px 12px;
}

div.polozka img {
    max-width: 100%;
    height: auto;
    display: block;
}

div.polozka a {
    text-decoration: none;
    color: var(--tpl-text);
}

div.polozka a:hover {
    color: var(--tpl-primary-dark);
}

/* Price in product list */
.polozka .cena,
.polozka .cena_s_dph,
.polozka span.cena_s_dph {
    color: var(--tpl-primary-dark);
    font-weight: 700;
    font-size: 16px;
}

/* Sjednotit dvojtečku u labelů ceny na kartě: jádro (class/_class.shop5.php) dává
   „Cena bez DPH:" (s dvojtečkou), ale „Cena s DPH" bez ní. Doplníme dvojtečku i
   k „Cena s DPH" přes ::after (jen Latte, jádro netknuté). */
.polozka_cena table.ceny tr.cena_s_dph > td:first-child:not(:empty)::after {
    content: ":";
}

/* Old price (strikethrough) */
.polozka .cena_puvodni,
.polozka span.cena_puvodni {
    color: #999;
    text-decoration: line-through;
    font-size: 13px;
}

/* Buy button in product list — same green CTA as detail page */
/* „Koupit" na výpisu konverzní zelenou (--tpl-cta-bg), stejně jako na detailu
   a v celé nákupní cestě — bílý text kvůli kontrastu na zelené.
   Hover = tmavší zelená (--tpl-cta-bg-hover). */
.polozka input[type="submit"].button_konverzni,
.polozka .tlacitko_nakup,
.polozka .btn_do_kosiku,
table.polozky input[type="submit"].button_konverzni {
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    border: none;
    padding: 8px 16px;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: background var(--tpl-transition);
    font-family: var(--tpl-font);
}

.polozka input[type="submit"].button_konverzni:hover,
.polozka .tlacitko_nakup:hover,
.polozka .btn_do_kosiku:hover,
table.polozky input[type="submit"].button_konverzni:hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover);
}

/* Non-conversion buttons in product list (keep neutral) */
.polozka input[type="submit"]:not(.button_konverzni) {
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    border: none;
    padding: 8px 16px;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: background var(--tpl-transition);
    font-family: var(--tpl-font);
}

.polozka input[type="submit"]:not(.button_konverzni):hover {
    background: var(--tpl-primary-dark);
}

/* Product grid (from category) */
div.polozky_div {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

div.polozky_div div.polozka {
    flex: 0 0 calc(25% - 12px);
}

/* Homepage — produktový výpis „Nejprodávanější" (modul CarouselSeoFraze) je z jádra
   flex výpis 4 karet (.slickerSeoFraze > .multiple > .polozka). S reálným obsahem
   (různě dlouhé názvy/popisy, jiná výška fotky) se řádky rozhází a karty jsou
   nestejně vysoké. Přebíjíme na pevnou RESPONZIVNÍ MŘÍŽKU 4 → 2 → 1: karty v řádku
   se stretchnou na stejnou výšku (grid align-items: stretch je default), takže obsah
   řádek NIKDY nerozhodí. Scope jen homepage (body.sekce_uvod). */
body.sekce_uvod .slickerSeoFraze {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}
body.sekce_uvod .slickerSeoFraze > .multiple {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;   /* natáhne vnořenou .polozka na výšku buňky */
}
body.sekce_uvod .slickerSeoFraze > .multiple > .polozka {
    width: 100% !important;
    max-width: none !important;
}
@media (max-width: 1024px) {
    body.sekce_uvod .slickerSeoFraze {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
/* Homepage carousel: 2 v řadě až do ≤408px, pod tím (≤408) 1 v řadě.
   Práh posunut z 480 na 408 na přání — 2 v řadě mají platit od 409px. */
@media (max-width: 408px) {
    body.sekce_uvod .slickerSeoFraze {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
/* Kompaktní karta pro 2 v řadě na úzkém mobilu (409–768px): dlouhé popisy a
   parametrové ikonky v popisu (lazy <img> → velké prázdné placeholdery) dělaly
   karty vysoké a rozházené. Skryjeme obrázky v popisu, název i popis zkrátíme
   na pár řádků a cenu+tlačítko zarovnáme dolů, aby karty vedle sebe lícovaly. */
@media (min-width: 409px) and (max-width: 768px) {
    body.sekce_uvod .slickerSeoFraze .polozka { display: flex; flex-direction: column; }
    body.sekce_uvod .slickerSeoFraze .polozka_popis img { display: none !important; }
    body.sekce_uvod .slickerSeoFraze .polozka_nazev {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    body.sekce_uvod .slickerSeoFraze .polozka_popis_text {
        display: var(--tpl-el-popis, -webkit-box) !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    body.sekce_uvod .slickerSeoFraze .polozka_odkaz { margin-top: auto; }
}

/* --- Product card layout --- */
div.polozka {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tpl-card-border);
    box-shadow: none;
    position: relative;
    border-radius: var(--tpl-border-radius);   /* zaoblení karty produktu */
}

div.polozka:hover {
    box-shadow: var(--tpl-shadow);
    border-color: #ddd;
}

/* For old PHP output: make polozka_body transparent to flex layout
   so all inner elements participate in polozka's flex column ordering */
div.polozka_body {
    display: contents;
}

div.polozka_foto {
    order: 1;
    /* Padding škálovaný customizerem: --tpl-card-foto-pad-on = 1 (rámeček, default)
       nebo 0 (foto přes celou dlaždici — padding zmizí, foto sahá k okrajům a rohy
       zaoblí border-radius). Násobení přes calc drží per-breakpoint hodnoty. */
    padding: calc(12px * var(--tpl-card-foto-pad-on, 1));
    text-align: center;
    background: var(--tpl-card-bg);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Žádný max-height: dřívější `max-height: 280px` kapal výšku boxu, takže na
       kartách širších než 280px (full-width mobil, široký desktop) box přestal být
       čtverec (aspect-ratio 1/1) a stal se širším → čtvercové produktové foto se
       horizontálně letterboxovalo a boky byly větší než vršek. Bez capu drží
       aspect-ratio 1/1 pravý čtverec = stejná mezera nahoře, vlevo i vpravo. */
    /* min-height:0 zruší automatické flex-minimum dané obsahem, takže obrázek
       (nebo alt text u chybějícího obrázku) nezvětší čtverec a všechny karty
       v řádku jsou stejně vysoké → obsah pod fotkou je zarovnaný. */
    min-height: 0;
    position: relative;
}

div.polozka_foto img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    /* object-fit řízený customizerem: contain (default, celé foto) nebo cover
       (vyplnit dlaždici a oříznout přebytek). --tpl-card-foto-fit. */
    object-fit: var(--tpl-card-foto-fit, contain);
    /* Zarovnat foto NAHORU (ne na střed). Kontejner je čtverec s padding 12px;
       u fota na šířku (landscape) by centrování dělalo velkou mezeru nahoře i dole
       a jen 12px po stranách → nestejné odsazení. object-position:center top přisadí
       obrázek k horní hraně → top = levý = pravý okraj = 12px (padding), případný
       letterbox zbyde dole. Svislé/čtvercové foto zůstává vodorovně na střed. */
    object-position: center top;
    cursor: pointer;
}

div.polozka_nazev {
    order: 2;
    padding: 10px 12px 4px;
}

div.polozka_nazev a {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tpl-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

div.polozka_popis {
    order: 3;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--tpl-text-light);
}
/* Obrázky vložené v popisu karty (parametrové ikonky .polozka_parametr_ikona) —
   skrýt na VŠECH šířkách. V dev/preview vrací 404 → šedý placeholder uprostřed
   karty (uživatel to hlásil na homepage); i na ostrém webu jsou v krátkém teaseru
   karty rušivé. Detail produktu má popis jinde (.ui-tabs-panel), nedotčeno. */
div.polozka_popis img { display: none !important; }

div.polozka_popis span.dostupnost {
    font-size: 12px;
    display: block;
}

div.polozka_popis span.sklad {
    font-size: 12px;
    display: block;
}

div.polozka_popis span.kod {
    display: block;
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

div.polozka_popis span[class^="parametr_"] {
    display: block;
    font-size: 12px;
}

div.polozka_odkaz {
    order: 4;
    padding: 8px 12px;
    margin-top: auto;
}

/* Karty bez Koupit CTA (= "Není skladem" / nedostupné / zakazat_nakup).
   POZN: jádro vždy renderuje <form.form_polozka> obal, jen uvnitř chybí
   input[type=submit] (jednoduché out-of-stock) nebo <a> "Varianty/Detail".
   Vložíme "Není skladem" placeholder PŘÍMO do polozka_odkaz (přes ::before),
   takže je na úplně stejném místě jako Koupit (= polozka_odkaz má order:4
   + margin-top:auto = posunut na spodek karty). */
div.polozka_odkaz:not(:has(span.polozka_koupit)):not(:has(a:not(.zobrazit_detail)))::before {
    content: "Není skladem";
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 16px;
    background: var(--tpl-surface-3);
    color: #999;
    border-radius: var(--tpl-border-radius);
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    cursor: not-allowed;
    user-select: none;
}

div.polozka_odkaz span.polozka_koupit {
    display: flex;
    align-items: center;
    gap: 6px;
}

div.polozka_odkaz input.input_text {
    width: 45px !important;
    height: 32px;
    padding: 4px;
    text-align: center;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
}

div.polozka_odkaz span.jednotka {
    font-size: 12px;
    color: var(--tpl-text-light);
}

div.polozka_odkaz input[type="submit"] {
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
}

div.polozka_odkaz a {
    font-size: 13px;
    color: var(--tpl-primary-dark);
    font-weight: 500;
}

/* === Výpis: jednotné CTA „Koupit" i na kartách se zbožím s modifikací ===
   Zboží s variantami/příplatky/parametry má v jádru místo tlačítka jen odkaz
   „Zobrazit detail"/„Varianty". Přestylujeme ho na stejné zelené CTA jako
   jednoduché zboží a přejmenujeme na „Koupit" (font-size:0 schová původní text,
   ::after dodá jednotný popisek). Klik otevře modal s konfigurací (JS v
   _body_all.latte); bez JS odkaz dál vede na detail = graceful fallback.
   .zobrazit_detail (jiné nastavení jádra) necháváme být. */
div.polozka_odkaz form.form_polozka > a:not(.zobrazit_detail) {
    display: block;
    text-align: center;
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text) !important;
    border: none;
    padding: 8px 16px;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 0;
    line-height: 1.4;
    text-decoration: none;
    transition: background var(--tpl-transition);
}
div.polozka_odkaz form.form_polozka > a:not(.zobrazit_detail):hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover);
    color: var(--tpl-cta-text) !important;
}
div.polozka_odkaz form.form_polozka > a:not(.zobrazit_detail)::after {
    content: "Koupit";
    font-size: 13px;
}
div.polozka_odkaz form.form_polozka > a:not(.zobrazit_detail) + .seznam_variant {
    margin-top: 6px;
    font-size: 12px;
    color: var(--tpl-text-light);
    text-align: center;
}

/* === Výpis: sjednotit „Koupit" i u jednoduchého zboží na full-width CTA ===
   Jednoduché zboží (koupit_z_nahledu=true) má v jádru množstevní stepper
   (input.input_text) + „ks" + menší tlačítko; zboží s modifikací má full-width
   CTA „Koupit" (viz výše, otevírá modal). Pro vizuální jednotu skryjeme stepper
   i jednotku a tlačítko roztáhneme přes celou šířku — množství zákazník nastaví
   v košíku. Zelené CTA + padding/font už dává .button_konverzni (ř. ~1175);
   tady jen přebijeme zmenšení z `div.polozka_odkaz input[type=submit]`. */
div.polozka_odkaz span.polozka_koupit input.input_text,
div.polozka_odkaz span.polozka_koupit span.jednotka {
    display: none;
}
div.polozka_odkaz span.polozka_koupit {
    display: block;
}
div.polozka_odkaz span.polozka_koupit input[type="submit"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    padding: 8px 16px;
    font-size: 13px;
}

div.polozka_cena {
    order: 5;
    padding: 4px 12px 12px;
    /* Fixed height (NE min-height) aby cena/empty mely PRESNE stejnou
       vysku → polozka_odkaz tlacitko nahore je na stejne Y pozici napric
       vsemi kartami. 84px = padding 16 + dva radky cen ~68. Vyssi prepis
       (napr. sleva radek) se necha mimo viewport (skoro nikdy se neji).
       overflow:hidden brani vyzakam nizko polozenym elementum. */
    height: 84px;
    box-sizing: border-box;
    overflow: hidden;
}

div.polozka_cena table.ceny {
    border: none;
    width: 100%;
}

div.polozka_cena table.ceny td {
    border: none;
    padding: 2px 0;
    font-size: 13px;
}

div.polozka_cena table.ceny tr.cena_s_dph td {
    font-size: 15px;
    font-weight: 700;
    color: var(--tpl-text);
}

div.polozka_cena table.ceny tr.cena_sleva td {
    color: var(--tpl-sleva);
    font-weight: 600;
}

div.polozka_cena table.ceny tr.cena_puvodni td {
    color: #999;
    text-decoration: line-through;
    font-size: 12px;
}

/* --- Icons (favorites + compare) --- */
div.polozka_icons,
div.polozka span.zbozi_oblibene_wrap:only-child {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

/* Latte template: icons inside div.polozka_icons */
div.polozka_icons {
    order: 0;
}

div.polozka_icons span.zbozi_oblibene_wrap,
div.polozka_icons span.zbozi_porovnani_wrap {
    position: static;
}

/* Old PHP output: zbozi_oblibene_wrap as direct child of polozka */
div.polozka > span.zbozi_oblibene_wrap {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
}

div.polozka span.zbozi_oblibene {
    font-size: 16px;
    color: #ccc;
    cursor: pointer;
    transition: color var(--tpl-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: color-mix(in srgb, var(--tpl-card-bg) 85%, transparent);
    border-radius: 50%;
}

div.polozka span.zbozi_oblibene:hover {
    color: var(--tpl-oblibene);
    background: var(--tpl-card-bg);
}

/* Compare icon in product card */
div.polozka span.zbozi_porovnani_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: color-mix(in srgb, var(--tpl-card-bg) 85%, transparent);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--tpl-transition);
    position: relative;
}

div.polozka span.zbozi_porovnani_wrap:hover {
    background: var(--tpl-card-bg);
}

/* The div#porovnani_info_* container shows the FA icon via ::before */
div.polozka span.zbozi_porovnani_wrap div[id^="porovnani_info_"] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

div.polozka span.zbozi_porovnani_wrap div[id^="porovnani_info_"]::before {
    content: "";
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--tpl-ico-random) center / contain no-repeat;
    mask: var(--tpl-ico-random) center / contain no-repeat;
    font-size: 13px;
    color: #bbb;
    transition: color var(--tpl-transition);
}

div.polozka span.zbozi_porovnani_wrap:hover div[id^="porovnani_info_"]::before {
    color: var(--tpl-primary-dark);
}

/* Hide the actual button text, keep it clickable overlaid */
div.polozka span.zbozi_porovnani_wrap input.button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    padding: 0 !important;
    margin: 0;
    border: none !important;
}

/* When product is already in compare list, highlight the icon */
div.polozka span.zbozi_porovnani_wrap .porovnani_odebrat ~ .porovnani_zobrazit {
    display: none !important;
}

/* Hide "Porovnat vybrané" button in card context */
div.polozka span.zbozi_porovnani_wrap .porovnani_zobrazit {
    display: none !important;
}

/* Clearfix and polozka_bottom — hide */
div.polozka_bottom {
    display: none;
}

div.polozka > .cl,
div.polozka > .cr,
div.polozka > .cb {
    display: none;
}

/* akcni_cena_do countdown */
div.polozka .akcni_cena_do {
    order: 3;
    padding: 2px 12px;
    font-size: 11px;
    color: var(--tpl-sleva);
}

/* --- Table view (tabulka / tabulka_foto) --- */
table.polozky {
    width: 100%;
    border-collapse: collapse;
    border: none;
    font-size: 13px;
}

table.polozky tr {
    border-bottom: 1px solid var(--tpl-card-border);
    transition: background var(--tpl-transition);
}

table.polozky tr:hover {
    background: var(--tpl-surface-2);
}

table.polozky td {
    padding: 10px 12px;
    vertical-align: middle;
    border: none;
}

table.polozky .polozka_foto_tabulkou {
    width: 80px;
    padding: 8px;
}

table.polozky .polozka_foto_tabulkou img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    cursor: pointer;
    border-radius: var(--tpl-border-radius);
}

table.polozky .polozka_nazev_tabulkou a {
    font-weight: 600;
    color: var(--tpl-text);
    text-decoration: none;
}

table.polozky .polozka_nazev_tabulkou a:hover {
    color: var(--tpl-primary-dark);
}

table.polozky .polozka_kod_tabulkou {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

table.polozky .dostupnost_tabulkou {
    font-size: 12px;
    color: var(--tpl-text-light);
    white-space: nowrap;
}

table.polozky .cena_tabulkou {
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

table.polozky .cena_tabulkou_dph {
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
}

table.polozky .tabulka_cena_bez_dph {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #aaa;
}

table.polozky .polozka_odkaz_tabulkou {
    white-space: nowrap;
}

table.polozky .polozka_odkaz_tabulkou input[name="pocet"] {
    width: 45px !important;
    height: 32px;
    padding: 4px 6px;
    text-align: center;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    box-sizing: border-box;
}

table.polozky .polozka_odkaz_tabulkou input[type="submit"] {
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    border: none;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    font-weight: 600;
    font-family: var(--tpl-font);
}

table.polozky .polozka_odkaz_tabulkou input[type="submit"]:hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover);
}

table.polozky .polozka_odkaz_tabulkou a {
    color: var(--tpl-primary-dark);
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
}

table.polozky .polozka_nazev_tabulkou a {
    font-size: 14px;
}

table.polozky .polozka_odkaz_tabulkou .nowrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

table.polozky td .hromadny_nakup {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* "Vložit označené zboží do košíku" — form wrapper */
#frm_hromadny_nakup {
    text-align: right;
    padding: 10px 0 0;
    clear: both;
}

/* "Vložit označené zboží do košíku" button */
input.button.hromadny_nakup {
    background: var(--tpl-card-bg) !important;
    color: var(--tpl-text) !important;
    border: 2px solid #ddd !important;
    padding: 12px 40px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: var(--tpl-border-radius) !important;
    cursor: pointer;
    transition: all var(--tpl-transition);
    font-family: var(--tpl-font) !important;
    float: none;
}

input.button.hromadny_nakup:hover {
    border-color: var(--tpl-primary) !important;
    background: var(--tpl-primary) !important;
    color: var(--tpl-primary-text) !important;
}

/* ================================================================
   F2. KATEGORIE STRANKA
   ================================================================ */

/* Category h1 heading */
div#kategorie_obsah h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

/* "O kategorii výše" back link — full width so it doesn't join the flex grid */
div.kategorie_zpet {
    flex: 0 0 100%;
    margin-bottom: 5px;
    border: none;
    background: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
}

div.kategorie_zpet a {
    font-size: 13px;
    color: var(--tpl-text-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

div.kategorie_zpet a:before {
    content: "";
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--tpl-ico-angleleft) center / contain no-repeat;
    mask: var(--tpl-ico-angleleft) center / contain no-repeat;
    font-size: 11px;
}

div.kategorie_zpet a:hover {
    color: var(--tpl-text);
}

/* Subcategory cards (kategorie_uvod) */
div#kategorie {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px;
}

div.kategorie_uvod {
    flex: 0 0 calc(25% - 9px);
    background: var(--tpl-content-bg);
    /* Krok 154: viditelný default border pořád (dřív #eee = téměř neviditelné). */
    border: 2px solid #d0d0d0;
    border-radius: var(--tpl-border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--tpl-transition), box-shadow var(--tpl-transition), background var(--tpl-transition);
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
}

/* Krok 154: hover — celý rámeček zežloutne (všechny 4 strany), lehký žlutý glow. */
div.kategorie_uvod:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint);
    box-shadow: 0 2px 6px rgba(255, 212, 0, 0.15);
}

div.kategorie_uvod_ikona {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px !important;
}

div.kategorie_uvod_ikona img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover;
    display: block;
    border-radius: var(--tpl-border-radius);
    border: none !important;
}

div.kategorie_uvod_nazev {
    padding: 10px 14px;
    text-align: left;
    flex: 1;
    min-width: 0;
    /* Dlouhé názvy zalomit (i uvnitř slova), ať se NEOŘÍZNOU o úzkou dlaždici. */
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

div.kategorie_uvod_nazev a {
    font-size: 14px;
    font-weight: 600;
    color: var(--tpl-text);
    text-decoration: none;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* === Mobil (≤600px): kategorie vždy 2 na řádek + spodní vyhledávání na plnou
   šířku. 4 dlaždice na úzkém displeji přetékaly (text uřezaný, horiz. scroll);
   2 na řádek se vejdou a odstraní overflow. */
@media (max-width: 600px) {
    div.kategorie_uvod {
        flex: 0 0 calc(50% - 6px);   /* gap kontejneru je 12px → 2 sloupce */
    }
    /* Menší ikona na mobilu → víc místa pro název (zalomí po slovech, ne uprostřed). */
    div.kategorie_uvod_ikona { margin: 8px !important; }
    div.kategorie_uvod_ikona img { width: 52px !important; height: 52px !important; }
    div.kategorie_uvod_nazev { padding: 8px 10px; }
    div.form_fulltext_kategorie {
        max-width: none;             /* zrušit 440px cap → přes celou šířku */
        display: flex;
    }
}

/* Hodně úzké telefony → podkategorie jen 1 v řadě (2-v-řadě je tam těsné).
   Full-width dlaždice = celý název i obrázek mají dost místa. */
@media (max-width: 400px) {
    div.kategorie_uvod {
        flex: 0 0 100%;
    }
    div.kategorie_uvod_ikona img { width: 64px !important; height: 64px !important; }
}

/* "nejprodávanější" section */
div.kategorie_nejprodavanejsi {
    margin-bottom: 25px;
    padding: 15px;
    background: var(--tpl-surface-2);
    border-radius: var(--tpl-border-radius);
    border: 1px solid var(--tpl-card-border);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

div.kategorie_nejprodavanejsi h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 0 0;
    color: var(--tpl-text);
    flex: 0 0 100%;
}

div.nejprodavanejsi_polozka {
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    float: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--tpl-card-border) !important;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    flex: 0 0 calc(25% - 12px);
    min-width: 180px;
}

div.nejprodavanejsi_foto {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    float: none;
    padding: 0;
}

div.nejprodavanejsi_foto img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: var(--tpl-border-radius);
}

div.nejprodavanejsi_texty {
    flex: 1;
    min-width: 0;
}

div.nejprodavanejsi_nazev a {
    font-size: 14px;
    font-weight: 500;
    color: var(--tpl-text);
    text-decoration: none;
}

div.nejprodavanejsi_nazev a:hover {
    color: var(--tpl-primary-dark);
}

div.nejprodavanejsi_dostupnost {
    font-size: 12px;
    color: var(--tpl-text-light);
}

div.nejprodavanejsi_cena span.cena_s_dph {
    font-size: 15px;
    font-weight: 700;
    color: var(--tpl-text);
}

/* "filtrovat zboží" button */
div.zobrazit_filtraci {
    margin-top: 20px;
    margin-bottom: 15px;
}

div.zobrazit_filtraci input.button {
    background: var(--tpl-card-bg);
    border: none;
    border-bottom: 3px solid var(--tpl-card-border);   /* šedé podtržení jako sort taby */
    color: var(--tpl-text);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    transition: color var(--tpl-transition), border-color var(--tpl-transition);
    font-family: var(--tpl-font);
}

div.zobrazit_filtraci input.button:hover {
    color: var(--tpl-primary);
    border-bottom-color: var(--tpl-primary);   /* navy při hoveru */
}

/* Sorting bar (ul.order) */
ul.order {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 15px 0;
    padding: 0 0 3px 0;
    gap: 0;
    border: none !important;
    background: linear-gradient(to top, #ddd 3px, #fff 3px);
    height: auto !important;
    box-sizing: content-box !important;
}

ul.order li {
    padding: 10px 18px 10px;
    font-size: 13px;
    color: var(--tpl-text-light);
    cursor: pointer;
    transition: color var(--tpl-transition), border-color var(--tpl-transition);
    border: none !important;
    border-bottom: 3px solid #ddd !important;
    border-radius: 0 !important;
    margin: 0 0 -3px 0 !important;
    white-space: nowrap;
    background: transparent;
}

ul.order li:hover {
    color: var(--tpl-text);
    border-bottom-color: #bbb !important;
}

ul.order li.order_aktivni {
    color: var(--tpl-text);
    font-weight: 600;
    border-bottom-color: var(--tpl-primary) !important;
}

/* Řadicí lišta: řazení (ul.order) + tlačítko „Filtrovat zboží" (div.zobrazit_filtraci)
   v jedné liště vedle sebe. Přesun do .tpl-razeni-bar dělá JS (_body_all.latte →
   tplRazeniBar); dřív byly oba bloky nad sebou. Filtr je vpravo, zarovnaný spodkem
   na dolní linku řazení. Na úzké obrazovce se zalomí. */
.tpl-razeni-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 20px 0 15px;
}
.tpl-razeni-bar > ul.order {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.tpl-razeni-bar > div.zobrazit_filtraci {
    margin: 0;
    flex: 0 0 auto;
}
/* Přepínač „Řazení" — na desktopu skrytý (sort taby jsou vidět inline). */
.tpl-sort-toggle { display: none; }

/* Mobil: řazení + filtr jako dvě tlačítka napůl. Jednotlivé sort volby se schovají
   pod tlačítko „Řazení" a rozbalí se jako dropdown pod tlačítky (klik na volbu seřadí). */
@media (max-width: 768px) {
    /* column-gap:0 → obě tlačítka na sraz = jedna souvislá lišta (podtržení bez mezery);
       row-gap:0 → dropdown se přilepí přímo pod tlačítka (bez mezery). */
    .tpl-razeni-bar { align-items: stretch; column-gap: 0; row-gap: 0; }

    .tpl-sort-toggle {
        display: flex; align-items: center; justify-content: center;
        order: 1; flex: 0 0 50%; min-width: 0; box-sizing: border-box;
        background: var(--tpl-card-bg);
        border: none;
        border-bottom: 3px solid var(--tpl-card-border);   /* šedé podtržení */
        color: var(--tpl-text);
        font-weight: 600; font-size: 13px; font-family: var(--tpl-font);
        padding: 10px 16px;
        border-radius: 0;
        cursor: pointer;
        transition: color var(--tpl-transition), border-color var(--tpl-transition);
    }
    .tpl-sort-toggle:hover { color: var(--tpl-primary); border-bottom-color: var(--tpl-primary); }

    .tpl-razeni-bar > div.zobrazit_filtraci { order: 2; flex: 0 0 50%; min-width: 0; box-sizing: border-box; padding-bottom: 0; }
    .tpl-razeni-bar > div.zobrazit_filtraci input.button { width: 100%; padding: 10px 16px; box-sizing: border-box; }

    /* Sort volby = dropdown pod tlačítky (skrytý; rozbalí „Řazení"). */
    .tpl-razeni-bar > ul.order {
        order: 3; flex: 1 1 100%;
        display: none;
        margin: 0; padding: 0;
        background: var(--tpl-card-bg) !important;
        border: 1px solid var(--tpl-card-border);
        border-top: none;
        border-radius: 0 0 var(--tpl-border-radius) var(--tpl-border-radius);
        overflow: hidden;
    }
    .tpl-razeni-bar.tpl-sort-open > ul.order { display: block; }
    .tpl-razeni-bar > ul.order > li {
        margin: 0 !important;
        padding: 12px 16px !important;
        border: none !important;
        border-bottom: 1px solid var(--tpl-card-border) !important;
        border-radius: 0 !important;
        white-space: normal;
    }
    .tpl-razeni-bar > ul.order > li:last-child { border-bottom: none !important; }
    .tpl-razeni-bar > ul.order > li.order_aktivni {
        color: var(--tpl-primary); font-weight: 600;
        background: var(--tpl-surface-2);
        border-bottom-color: var(--tpl-card-border) !important;
    }

    /* „Počet na stránku" na mobilu → samostatný řádek pod tlačítky (order 4, plná šířka),
       vpravo zarovnaný a decentní. Zobrazí se jen když ho jádro vyrenderuje (víc produktů). */
    .tpl-razeni-bar > .polozek_na_stranu {
        order: 4; flex: 1 1 100%;
        display: flex; align-items: center; justify-content: flex-end; gap: 8px;
        margin: 0; padding: 10px 2px 0; box-sizing: border-box;
        font-size: 13px; color: var(--tpl-text-light);
    }
    .tpl-razeni-bar > .polozek_na_stranu select {
        border: 1px solid var(--tpl-card-border); background: var(--tpl-card-bg);
        color: var(--tpl-text); font: inherit; padding: 6px 8px; border-radius: 8px; cursor: pointer;
    }
}

/* Filtr jako rozbalovací panel v liště (místo modalu) — otevírá tlačítko „Filtrovat".
   Panel má i class .tpl-modal-body → platí všechny stávající filtr styly (accordion,
   slider, navy tlačítka, facety). Styl panelu = jako dropdown řazení. */
.tpl-razeni-bar > .tpl-filtr-dropdown {
    order: 4;
    flex: 1 1 100%;
    display: none;
    margin: 0;                  /* přilepeno přímo k tlačítkům */
    padding: 0;                 /* bez bočního paddingu → linky sekcí jdou přes celou šířku */
    background: var(--tpl-card-bg);
    border: 1px solid var(--tpl-card-border);
    border-top: none;           /* napojí se na podtržení tlačítek */
    border-radius: 0 0 var(--tpl-border-radius) var(--tpl-border-radius);   /* hranaté nahoře, zaoblené dole */
    overflow: hidden;
    box-sizing: border-box;
}
.tpl-razeni-bar.tpl-filtr-open > .tpl-filtr-dropdown { display: block; }
/* Obsah filtru ve stylu seznamu řazení: každá sekce = řádek s obsahem odsazeným 16px
   a spodní linkou od kraje ke kraji (jako položky v dropdownu řazení). */
.tpl-razeni-bar .tpl-filtr-dropdown div.tpl-filtr-topbar {
    padding: 13px 16px;
    margin-bottom: 0;
}
.tpl-razeni-bar .tpl-filtr-dropdown .filtrace-range.filtrace-range-cena {
    padding: 12px 16px;
    margin-bottom: 0;
}
.tpl-razeni-bar .tpl-filtr-dropdown div.filtry_buttons {
    padding: 14px 16px;
    border-top: none;
    margin-top: 0;
}
/* Menší karta: stáhnout velké mezery v ceně + skrýt prázdný popisek. */
.tpl-razeni-bar .tpl-filtr-dropdown .tpl-price-slider { padding: 2px 0; }
.tpl-razeni-bar .tpl-filtr-dropdown .tpl-price-inputs { margin-bottom: 10px; }
.tpl-razeni-bar .tpl-filtr-dropdown .tpl-price-range { margin: 2px 8px; }
.tpl-razeni-bar .tpl-filtr-dropdown .filtry_nazev_parametru { padding: 2px 0; }
.tpl-razeni-bar .tpl-filtr-dropdown .filtry_nazev_parametru:empty { display: none; }
/* Cena Od/Do vedle sebe (na jednom řádku, ať se nezalomí). */
.tpl-razeni-bar .tpl-filtr-dropdown .tpl-price-inputs {
    flex-wrap: nowrap;
    gap: 10px;
}
.tpl-razeni-bar .tpl-filtr-dropdown .tpl-price-inputs input[type="number"] {
    width: 84px;
    min-width: 0;
}
/* Parametry (Výrobce, Typ zámku, …) odsazené od kraje jako ostatní sekce;
   rozbalené hodnoty o kus víc (hierarchie). Linky sekcí zůstávají přes celou šířku. */
.tpl-razeni-bar .tpl-filtr-dropdown #kategorie_filtry h3,
.tpl-razeni-bar .tpl-filtr-dropdown #kategorie_filtry legend {
    padding-left: 16px;
    padding-right: 16px;
}
.tpl-razeni-bar .tpl-filtr-dropdown #kategorie_filtry .filtrace_checkboxes_2,
.tpl-razeni-bar .tpl-filtr-dropdown #kategorie_filtry .filtrace_multi_fielset {
    padding-left: 24px;
    padding-right: 16px;
}
/* Desktop: stejné dvě tlačítka jako na mobilu — „Řazení" + „Filtrovat" vedle sebe vlevo
   (přirozená šířka), sort volby jako rozbalovací dropdown pod „Řazení". Zbytek lišty vpravo
   = pokračování šedého podtržení (prázdný filler ::after). Dřív se sort taby (ul.order)
   roztahovaly inline přes celou šířku. JS přepínač funguje v každé šířce (beze změny). */
@media (min-width: 769px) {
    /* column-gap:0 → tlačítka na sraz = souvislá lišta. position:relative = kotva pro
       absolutně poziciované dropdowny (viz níže) — ty tak nezasahují do flexu lišty
       (jinak by flex-wrap tlačil panely doprava) a spadnou vlevo pod tlačítka. */
    .tpl-razeni-bar { column-gap: 0; row-gap: 0; position: relative; }

    /* „Řazení" přepínač — na desktopu zobrazit (stejný vzhled jako tlačítko „Filtrovat"). */
    .tpl-sort-toggle {
        display: flex; align-items: center; justify-content: center;
        order: 1; flex: 0 0 auto; box-sizing: border-box;
        background: var(--tpl-card-bg);
        border: none;
        border-bottom: 3px solid var(--tpl-card-border);
        color: var(--tpl-text);
        font-weight: 600; font-size: 13px; font-family: var(--tpl-font);
        padding: 10px 18px;
        border-radius: 0;
        cursor: pointer;
        transition: color var(--tpl-transition), border-color var(--tpl-transition);
    }
    .tpl-sort-toggle:hover { color: var(--tpl-primary); border-bottom-color: var(--tpl-primary); }

    /* „Filtrovat" tlačítko hned vedle „Řazení" (přirozená šířka, vlevo). */
    .tpl-razeni-bar > div.zobrazit_filtraci { order: 2; flex: 0 0 auto; margin: 0; padding-bottom: 0; }

    /* Prázdný zbytek lišty = pokračování šedého podtržení přes celou šířku (na řádku tlačítek). */
    .tpl-razeni-bar::after {
        content: ""; order: 3; flex: 1 1 auto; align-self: stretch;
        /* Bílá (jako tlačítka) nad šedou čárou → lišta je bílá přes celou šířku, ne jen pod tlačítky. */
        background: linear-gradient(to top, var(--tpl-card-border) 3px, var(--tpl-card-bg) 3px);
        background-repeat: no-repeat;
    }

    /* „Počet položek na stránku" — vpravo v liště (za fillerem, order 4), stejný styl:
       bílá + šedé podtržení, aby splynul s lištou. Přesun sem dělá JS (tplRazeniBar). */
    .tpl-razeni-bar > .polozek_na_stranu {
        order: 4; flex: 0 0 auto; align-self: stretch;
        display: flex; align-items: center; gap: 6px;
        margin: 0; padding: 0 8px 0 16px;
        background: var(--tpl-card-bg);
        border-bottom: 3px solid var(--tpl-card-border);
        font-size: 13px; font-family: var(--tpl-font);
        white-space: nowrap; box-sizing: border-box;
    }
    .tpl-razeni-bar > .polozek_na_stranu .filtry_nazev_parametru { color: var(--tpl-text-light); font-weight: 400; }
    .tpl-razeni-bar > .polozek_na_stranu select {
        border: none; background: transparent; color: var(--tpl-text);
        font: inherit; font-weight: 600; cursor: pointer; padding: 4px 2px; outline: none;
    }

    /* Sort volby = dropdown pod „Řazení" (skrytý; rozbalí přepínač) — jako na mobilu,
       jen užší a zarovnaný vlevo pod tlačítko (ne přes celou šířku). */
    .tpl-razeni-bar > ul.order {
        position: absolute; top: 100%; left: 0; z-index: 60;
        display: none;
        margin: 0; padding: 0;
        width: 340px; max-width: calc(100vw - 40px);
        background: var(--tpl-card-bg) !important;
        border: 1px solid var(--tpl-card-border);
        border-top: none;
        border-radius: 0 0 var(--tpl-border-radius) var(--tpl-border-radius);
        overflow: hidden;
        box-shadow: var(--tpl-shadow, 0 8px 24px rgba(0,0,0,.12));
    }
    .tpl-razeni-bar.tpl-sort-open > ul.order { display: block; }
    .tpl-razeni-bar > ul.order > li {
        margin: 0 !important;
        padding: 12px 16px !important;
        border: none !important;
        border-bottom: 1px solid var(--tpl-card-border) !important;
        border-radius: 0 !important;
        white-space: normal;
    }
    .tpl-razeni-bar > ul.order > li:last-child { border-bottom: none !important; }
    .tpl-razeni-bar > ul.order > li:hover { color: var(--tpl-primary); background: var(--tpl-surface-2); }
    .tpl-razeni-bar > ul.order > li.order_aktivni {
        color: var(--tpl-primary); font-weight: 600;
        background: var(--tpl-surface-2);
        border-bottom-color: var(--tpl-card-border) !important;
    }

    /* Filtr dropdown = absolutní panel vlevo pod tlačítky (dřív in-flow vpravo). */
    .tpl-razeni-bar > .tpl-filtr-dropdown {
        position: absolute; top: 100%; left: 0; z-index: 60;
        width: 440px; max-width: calc(100vw - 40px); margin: 0;
        box-shadow: var(--tpl-shadow, 0 8px 24px rgba(0,0,0,.12));
    }
}

/* --- Pagination --- */
div.strankovani {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 15px 0;
    font-size: 14px;
}

div.strankovani a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    color: var(--tpl-text);
    text-decoration: none;
    font-size: 13px;
    transition: all var(--tpl-transition);
    background: var(--tpl-card-bg);
}

div.strankovani a:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
}

div.strankovani strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    border-radius: var(--tpl-border-radius);
    font-weight: 700;
    font-size: 13px;
    border: 1px solid var(--tpl-primary);
}

/* Hide top pagination (strankovani_1), keep bottom only */
div.strankovani_1 {
    display: none;
}

/* Když je k dispozici tlačítko "Načíst další" (katalogové zobrazení),
   skryjeme číslované stránkování hned za ním — uživatel nahrává přes tlačítko.
   V tabulkovém zobrazení tlačítko není, takže stránkování zůstane viditelné. */
div.nacist_dalsi + nav {
    display: none;
}

/* "Zobrazit položky" button (vloženo JS za H1) — sjednotit se vzhledem tlačítek */
div.zobrazit_polozky {
    text-align: center;
    margin: 10px 0 18px;
}

/* Stejný vzhled jako tlačítko "Filtrovat zboží" (.zobrazit_filtraci) */
input.button.zobrazit_polozky,
div.zobrazit_polozky input.button {
    display: inline-block;
    background: none;
    border: 1px solid #ddd;
    color: var(--tpl-text);
    padding: 8px 18px;
    font-size: 13px;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    font-family: var(--tpl-font);
    transition: all var(--tpl-transition);
}

input.button.zobrazit_polozky:hover,
div.zobrazit_polozky input.button:hover {
    border-color: var(--tpl-text);
}

/* Celá dlaždice produktu je klikací odkaz na produkt (obsluha v JS v _body_all.latte) */
div.polozka {
    cursor: pointer;
}

/* "Load more" button */
div.nacist_dalsi {
    text-align: center;
    padding: 20px 0;
}

div.nacist_dalsi input.button {
    background: var(--tpl-content-bg);
    color: var(--tpl-text);
    border: 2px solid #ddd;
    padding: 12px 40px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    transition: all var(--tpl-transition);
    font-family: var(--tpl-font);
}

div.nacist_dalsi input.button:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
}

div.nacist_dalsi div.vice_uz_neni {
    display: none;
    padding: 15px;
    color: var(--tpl-text-light);
    font-size: 13px;
}

/* "Load more" button and container */
div.nacist_dalsi {
    text-align: center;
    padding: 15px 0 5px;
    clear: both;
}

div.nacist_dalsi .nacist_dalsi_btn,
div.nacist_dalsi input.button {
    background: var(--tpl-card-bg) !important;
    color: var(--tpl-text) !important;
    border: 2px solid #ddd !important;
    padding: 12px 40px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: var(--tpl-border-radius) !important;
    cursor: pointer;
    transition: all var(--tpl-transition);
    font-family: var(--tpl-font) !important;
}

div.nacist_dalsi .nacist_dalsi_btn:hover,
div.nacist_dalsi input.button:hover {
    border-color: var(--tpl-primary) !important;
    background: var(--tpl-primary) !important;
    color: var(--tpl-primary-text) !important;
}

div.nacist_dalsi .nacist_dalsi_btn:disabled,
div.nacist_dalsi input.button:disabled {
    opacity: 0.6;
    cursor: wait;
}

div.nacist_dalsi div.vice_uz_neni {
    padding: 15px;
    color: var(--tpl-text-light);
    font-size: 13px;
    text-align: center;
}

/* Product listing wrapper (div.polozky) */
div.polozky {
    display: flex;
    flex-wrap: wrap;
    /* Grid MUSÍ být row: karty mají flex-basis = ŠÍŘKA (25% / na mobilu 100%).
       Jádrové homepage moduly (např. .uvod_zbozi_doporucujeme) ale nastavují
       .polozky na flex-direction:column → tam flex-basis:100% znamená 100% VÝŠKY
       → každá karta naroste přes celou výšku sloupce = obří prázdné karty (mobil
       i desktop). !important přebije jádrový kontextový column. */
    flex-direction: row !important;
    gap: 15px;
}

/* Product items inside category grid — 4 per row (matches polozky_div) */
div.polozky > div.polozka {
    flex: 0 0 calc(25% - 12px);
    min-width: 200px;
}

div.polozky_div div.polozka,
div.polozky > div.polozka {
    flex: 0 0 calc(25% - 12px);
    min-width: 200px;
}

/* ================================================================
   F2b. CarouselSeoFraze ("Nejprodávanější produkty" apod.)
   ----------------------------------------------------------------
   Latte šablona nenačítá default.css a slick carousel se zobrazoval
   rozbitě (1 obří položka — slick spočítá slidesToShow=1, protože
   položky nemají šířku). Zobrazíme produkty jako responzivní mřížku
   (4 / 3 / 2 sloupce). Funguje, ať už slick naběhne, nebo ne.
   ================================================================ */

/* a) Fallback bez slicku */
div.slickerSeoFraze {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

div.slickerSeoFraze > div.multiple {
    flex: 0 0 calc(25% - 12px);
    max-width: calc(25% - 12px);
    min-width: 0;
}

/* b) Když slick naběhne — zneškodnit posuvník a udělat z něj mřížku */
div.slickerSeoFraze.slick-slider { display: block; }

div.slickerSeoFraze .slick-list { overflow: visible !important; height: auto !important; }

div.slickerSeoFraze .slick-track {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px;
    width: auto !important;
    transform: none !important;
}

div.slickerSeoFraze .slick-track > .slick-slide {
    width: calc(25% - 12px) !important;
    float: none !important;
    height: auto !important;
}

/* Klony (infinite mode) a šipky/puntíky v mřížce nechceme */
div.slickerSeoFraze .slick-cloned { display: none !important; }
div.slickerSeoFraze .slick-arrow,
div.slickerSeoFraze .slick-dots { display: none !important; }

/* Zrušit inline width, kterou na .polozka nastavuje slick init JS */
div.slickerSeoFraze div.polozka {
    width: auto !important;
    height: 100%;
}

@media (max-width: 1024px) {
    div.slickerSeoFraze > div.multiple,
    div.slickerSeoFraze .slick-track > .slick-slide {
        flex-basis: calc(33.33% - 11px);
        width: calc(33.33% - 11px) !important;
        max-width: calc(33.33% - 11px);
    }
}

@media (max-width: 768px) {
    div.slickerSeoFraze > div.multiple,
    div.slickerSeoFraze .slick-track > .slick-slide {
        flex-basis: calc(50% - 8px);
        width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px);
    }
}

/* ================================================================
   F3. SIDEBAR FILTER MODULE
   ================================================================ */

/* Filter module heading */
div#kategorie_filtry h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px 0;
    padding: 0 18px;
    color: var(--tpl-text);
}

/* Filter group heading (e.g. "Dostupnost") */
div#kategorie_filtry h3 {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    padding: 8px 18px;
    cursor: pointer;
    color: var(--tpl-text);
    transition: background var(--tpl-transition);
    border-radius: 0;
}

div#kategorie_filtry h3:hover {
    background: var(--tpl-surface-2);
}

/* Filter checkboxes */
div.filtrace_checkboxes_2 {
    padding: 8px 18px;
}

div.filtrace_checkboxes_2 span {
    display: block;
    padding: 4px 0;
}

div.filtrace_checkboxes_2 label {
    font-size: 13px;
    margin-left: 6px;
    cursor: pointer;
    color: var(--tpl-text);
}

div.filtrace_checkboxes_2 input[type="checkbox"] {
    accent-color: var(--tpl-primary);
}

span.filtrace_multi_close {
    display: inline-block;
    padding: 4px 18px;
    font-size: 12px;
    color: var(--tpl-text-light);
    cursor: pointer;
}

/* Filter buttons */
div.filtry_buttons {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    flex-wrap: wrap;
}

div.filtry_buttons input.zrusit_filtr {
    background: none;
    border: 1px solid #ddd;
    color: var(--tpl-text-light);
    padding: 6px 14px;
    font-size: 12px;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    font-family: var(--tpl-font);
    flex: 1;
}

div.filtry_buttons input.potvrdit_filtr {
    padding: 6px 14px;
    font-size: 12px;
    flex: 1;
}

/* Fieldset in filter */
div.fieldset {
    margin-bottom: 0;
    border: none;
    padding: 0;
}

/* === Max cena input (jen horní limit, kompaktní inline) === */
.tpl-price-max {
    display: inline-flex;
    align-items: center;
}
.tpl-price-max label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--tpl-text);
    cursor: pointer;
}
.tpl-price-max input[type="number"] {
    width: 100px;
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    font-size: 14px;
    font-family: var(--tpl-font);
    color: var(--tpl-text);
    outline: none;
    -moz-appearance: textfield;
}
.tpl-price-max input[type="number"]::-webkit-outer-spin-button,
.tpl-price-max input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tpl-price-max input[type="number"]:focus {
    border-color: var(--tpl-primary);
    box-shadow: 0 0 0 3px rgba(255,209,0,0.15);
}
.tpl-price-max .tpl-price-mena {
    font-size: 13px;
    color: var(--tpl-text-light);
}

/* === Price slider — Od (vlevo) + Do (vpravo) + dual-thumb range slider === */
.tpl-price-slider {
    padding: 8px 0;
}
.tpl-price-slider .tpl-price-inputs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}
.tpl-price-slider .tpl-price-inputs label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--tpl-text-light);
    font-weight: 500;
}
.tpl-price-slider .tpl-price-inputs .tpl-price-inp-do {
    margin-left: auto;   /* Do napravo */
}
.tpl-price-slider .tpl-price-inputs input[type="number"] {
    width: 90px;
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    font-size: 14px;
    font-family: var(--tpl-font);
    color: var(--tpl-text);
    outline: none;
    -moz-appearance: textfield;
}
.tpl-price-slider .tpl-price-inputs {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tpl-price-slider .tpl-price-inputs label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--tpl-text-light);
    font-weight: 500;
}
.tpl-price-slider .tpl-price-inputs input[type="number"] {
    width: 90px;
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    font-size: 14px;
    font-family: var(--tpl-font);
    color: var(--tpl-text);
    outline: none;
    -moz-appearance: textfield;
}
.tpl-price-slider .tpl-price-inputs input[type="number"]::-webkit-outer-spin-button,
.tpl-price-slider .tpl-price-inputs input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tpl-price-slider .tpl-price-inputs input[type="number"]:focus {
    border-color: var(--tpl-primary);
    box-shadow: 0 0 0 3px rgba(255,209,0,0.15);
}
.tpl-price-slider .tpl-price-mena {
    font-size: 13px;
    color: var(--tpl-text-light);
}
.tpl-price-slider .tpl-price-range {
    position: relative;
    height: 32px;
    margin: 8px 8px 8px;
}
.tpl-price-slider .tpl-price-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 4px;
    background: var(--tpl-surface-3);
    border-radius: var(--tpl-radius-sm);
    z-index: 1;
}
.tpl-price-slider .tpl-price-range-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: var(--tpl-primary);
    border-radius: var(--tpl-radius-sm);
    z-index: 2;
    pointer-events: none;
}
.tpl-price-slider .tpl-price-range input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    z-index: 3;
    margin: 0;
    padding: 0;
}
/* Thumby — jen ony chytají pointer events */
.tpl-price-slider .tpl-price-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--tpl-card-bg);
    border: 2px solid var(--tpl-primary);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.tpl-price-slider .tpl-price-range input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tpl-card-bg);
    border: 2px solid var(--tpl-primary);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.tpl-price-slider .tpl-price-range input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
}
.tpl-price-slider .tpl-price-range input[type="range"]::-moz-range-track {
    background: transparent;
}

/* ================================================================
   G. DETAIL PRODUKTU
   ================================================================ */

/* --- Detail wrapper: CSS Grid for fotoskoda-style layout --- */
div#detail_zbozi {
    display: grid;
    grid-template-columns: 58% 1fr;
    gap: 0 40px;
    padding: 0;
}

/* Make .detail_flex children participate in the grid */
div.detail_flex {
    display: contents;
}

/* H1 in the RIGHT column, row 1 */
div#detail_zbozi h1 {
    grid-column: 2;
    grid-row: 1;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 5px 0;
    line-height: 1.3;
    color: var(--tpl-text);
}

/* Skrýt badge "Doprava zdarma" (echo z inc/detail_zbozi.php ř. 515 pro produkty
   s nastavením doprava_zdarma=y). V Latte šabloně ho nechceme u obrázku. */
#detail_zbozi div.doprava_zdarma_detail {
    display: none;
}

/* Skrýt sekci "Související produkty" na detailu (admin texty / produktové karty
   s nadpisem "Související produkty - <název>"). */
div.zbozi_souvisejici {
    display: none !important;
}

/* Trust/USP boxy nad sekcí související (Podpora / Nevíte si rady / Firma /
   Ověřený eshop) — 2 vedle sebe na desktopu, na mobilu (≤768px) všechny 4 pod
   sebe (viz @media níže). Třída .hide-mobile v adminu psaná na boxy přepíše
   inline styly, ale display flex je explicitní. Margin-top na .zbozi_text_univ
   dává jasnou mezeru od krátkého popisu / předchozího obsahu. */
div.zbozi_text_univ {
    margin-top: 28px;
}

div.zbozi_text_univ div.flex-bloky {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: stretch;
}

div.zbozi_text_univ div.flex-bloky > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 16px 20px !important;     /* větší prostorné krabičky */
    min-height: 60px;                  /* dvouřádkový text se vejde pohodlně */
    font-size: 18px !important;        /* o trochu větší než tělo textu */
    line-height: 1.4 !important;
    border-radius: var(--tpl-border-radius) !important;
    background: var(--tpl-card-bg) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Inline <span> uvnitř (s textem boxu) zarovnat na velikost rodiče */
div.zbozi_text_univ div.flex-bloky > * span {
    font-size: inherit !important;
}

/* Skrýt blok "Související odkazy" (div.seo_fraze_zbozi) — H2 + linky pod
   zbožím (vykresluje se v inc/detail.php). */
div.seo_fraze_zbozi {
    display: none !important;
}

/* .hide-mobile v adminu nemá vlastní CSS pravidlo, ale pro jistotu trust boxy
   nechat viditelné i na mobilu */
div.zbozi_text_univ .hide-mobile {
    display: flex !important;
}
div.zbozi_text_univ hr.hide-mobile {
    display: block !important;
}

/* MOBIL: všechny 4 trust dlaždice pod sebe (1 sloupec) — 2 vedle sebe se na
   úzkém displeji nevejdou čitelně. Řádky .flex-bloky zlomíme do sloupce,
   oddělovací <hr> skryjeme a mezeru mezi řádky srovnáme na 8px (= gap dlaždic),
   ať je stack rovnoměrný. */
@media (max-width: 768px) {
    div.zbozi_text_univ div.flex-bloky {
        flex-direction: column !important;
    }
    div.zbozi_text_univ hr.hide-mobile {
        display: none !important;
    }
    div.zbozi_text_univ div.flex-bloky ~ div.flex-bloky {
        margin-top: 8px;
    }
}

/* Krátký popis je v DOM přímý potomek #detail_zbozi (před fotkou). JS ho
   přesune dovnitř .zbozi_prilohy_2, takže text přijde hned pod obrázek
   v levém sloupci — žádná velká mezera. Fallback bez JS: pravidlo grid-column/
   grid-row drží popisek v levém sloupci pod fotkou (ne až na spodku). */
#detail_zbozi > p.kratky_popis {
    grid-column: 1;
    grid-row: 20;
    font-size: 14px;
    color: var(--tpl-text-light);
    line-height: 1.5;
    margin: 15px 0 0 0;
    padding: 0;
}

/* Krátký popis po JS přesunu do .zbozi_prilohy_2 — obalený v designové kartě
   .tpl-popis-card (JS v _body_all.latte). Karta přes oba sloupce vnitřního
   gridu fotky (thumbs + main), těsně pod obrázkem: jemný gradient, levý akcent
   v primární barvě, zaoblení, decentní stín. */
div.zbozi_prilohy_2 > div.tpl-popis-card {
    grid-column: 1 / -1;
    grid-row: auto;
    margin: 16px 0 0 0;
    padding: 16px 20px 16px 22px;
    background: linear-gradient(180deg, #fbfcfd 0%, #f4f6f8 100%);
    border: 1px solid #edf0f2;
    border-left: 4px solid var(--tpl-primary);
    border-radius: var(--tpl-border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
}
div.tpl-popis-card > p.kratky_popis {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--tpl-text);
}
/* Fallback bez JS (popis ještě neobalený, přímo v .zbozi_prilohy_2) */
div.zbozi_prilohy_2 > p.kratky_popis {
    grid-column: 1 / -1;
    margin: 12px 0 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tpl-text-light);
}

/* Detail — záložka „Ke stažení" — vycentrovat seznam souborů.
   POZOR: jádrový tab_add() (basic.js) přesune obsah z #zbozi_prilohy_ke_stazeni
   do jQuery UI tab panelu (#tabs-N, proměnný index) a původní #zbozi_prilohy_ke_stazeni
   vyprázdní → cílit přímo soubory (div.zbozi_prilohy_soubor) + jejich panel přes
   :has(). Soubor = inline-block na střed (float:none kdyby byly plovoucí), obsah
   (ikona + název) taky na střed. Stavba z jádra (inc/detail_zbozi_prilohy_2.php). */
.ui-tabs-panel:has(> div.zbozi_prilohy_soubor),
#zbozi_prilohy_ke_stazeni {
    text-align: center;
}
div.zbozi_prilohy_soubor {
    display: inline-block;
    float: none;
    vertical-align: top;
    text-align: center;
    margin: 14px 22px;
}

/* --- LEFT: Product photos (spans all rows) --- */
div.zbozi_prilohy_2 {
    grid-column: 1;
    grid-row: 1 / 20;
    width: 100%;
    float: none;
    position: sticky;
    top: 20px;
    align-self: start;
    /* Inner grid: thumbnails left, main image right */
    display: grid;
    grid-template-columns: 82px 1fr;
    grid-template-rows: 1fr;
    gap: 12px;
}

div.zbozi_prilohy_2 div {
    margin-bottom: 0;
}

div.zbozi_prilohy_popisek_2 {
    display: none;
}

/* Main image — right side of inner grid */
div.zbozi_prilohy_jpg_2 {
    grid-column: 2;
    grid-row: 1;
    background: var(--tpl-card-bg);
    border-radius: var(--tpl-border-radius);
    overflow: hidden;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.zbozi_prilohy_jpg_2 img,
div.zbozi_prilohy_jpg_2 img#img_velky {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    object-fit: contain;
}

div.zbozi_prilohy_jpg_2 img:hover {
    transform: scale(1.02);
}

/* Thumbnails — vertical column on LEFT side */
div.zbozi_prilohy_nahledy {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

div.zbozi_prilohy_nahledy img.img_zbozi {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain;
    border-radius: var(--tpl-border-radius);
    border: 2px solid #e8e8e8;
    cursor: pointer;
    transition: border-color var(--tpl-transition), box-shadow var(--tpl-transition);
    background: var(--tpl-card-bg);
    padding: 4px;
}

div.zbozi_prilohy_nahledy img.img_zbozi:hover {
    border-color: var(--tpl-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

div.zbozi_prilohy_bottom {
    display: none;
}

/* --- RIGHT column: purchase info --- */
div.detail_right {
    grid-column: 2;
    /* Roztažený přes stejné řádky jako obrázek (1/20) — díky tomu může uvnitř
       flex sloupce poslat ceníkovou tabulku na dno a zarovnat ji se spodkem
       obrázku. */
    grid-row: 3 / 20;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Reorder elements inside detail_right:
   1) form_polozka  — varianty + množství + tlačítko Koupit (jako celek)
   2) zbozi_tabulka — souhrnná tabulka (kód, dostupnost, ceny)
   3) datum_doruceni
   4) porovnávač
   5) přepočet ceny */
div.detail_right form.form_polozka { order: 1; }
div.detail_right .datum_doruceni { order: 3; }
div.detail_right #zbozi_detail_porovnavac { order: 4; }
div.detail_right #prepocet { order: 5; }
/* Ceníková tabulka — úplně dolů, aby spodek seděl na spodku obrázku.
   `margin-top: auto` ve flex sloupci sežere zbývající volný prostor a
   posune tabulku až na dno .detail_right (ten je grid-row 3/20 = roztažený
   přes všechny řádky obrázku). */
div.detail_right table.zbozi_tabulka {
    order: 99;
    margin-top: auto;
    margin-bottom: 0;
}

/* === Pořadí řádků uvnitř zbozi_tabulka (NIKOLI mnozstevnislevy) ===
   Implementováno přes flex na tbody + grid na tr — robustní vůči AJAX
   překreslení (např. po změně varianty). JS by se po AJAXu nezavolal a
   pořadí by se vrátilo zpět. */
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) {
    display: block;
    width: 100%;
}
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tbody {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr {
    display: grid;
    /* Jednotný 2-sloupcový grid pro VŠECHNY řádky: popisek vlevo,
       hodnota vpravo. nowrap na popisku brání zalomení dlouhých
       názvů („Cena bez DPH"). */
    grid-template-columns: minmax(140px, auto) 1fr;
    column-gap: 16px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    order: 40; /* default — neidentifikované řádky na konec */
}

/* Sjednocení sloupců: popisek = jemný šedý 13px nowrap,
   hodnota = vpravo zarovnaná čitelná. Konzistentně přes všechny řádky. */
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) td.zt_popisek {
    font-weight: 500;
    font-size: 13px;
    color: var(--tpl-text-light);
    white-space: nowrap;
    padding: 0;
    border: 0;
}
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) td:not(.zt_popisek) {
    text-align: right;
    font-size: 14px;
    color: var(--tpl-text);
    padding: 0;
    border: 0;
}

/* Cena s DPH — prominentně vpravo, label normální velikosti vlevo
   (žádný 36px hero, který rozhazoval alignment ostatních řádků). */
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.cena_s_dph td:not(.zt_popisek) {
    font-size: var(--tpl-detail-price-size) !important;
    font-weight: 700 !important;
    padding: 12px 0 !important;
}
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.cena_s_dph td.zt_popisek {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 12px 0 !important;
}

/* DPH řádek skrýt (dříve nestačila specificita kvůli :not()-grid rule). */
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.cena_dph,
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.popisek_info {
    display: none !important;
}
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr > td {
    display: block;
}
/* Plnořádkové buňky (colspan=2) zaberou obě sloupce */
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr td[colspan="2"],
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.popisek_info td {
    grid-column: 1 / -1;
}

/* Pořadí podle skupin (čím nižší order, tím výš v tabulce) */
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr[class*="cena_"],
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.puvodni_cena_skupiny,
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.ostatni_meny,
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.skupina_vyhodne,
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.cena_v_aukci {
    order: 10;
}
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.zbozi_dostupnost { order: 20; }
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.popisek_info { order: 21; }
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.zbozi_sklad { order: 22; }
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.zbozi_kod { order: 30; }
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.zbozi_vyrobce { order: 31; }

/* Souhrnná tabulka — všechny řádky odkryté (uživatel chce vidět celou). */

/* --- Parameters table (zbozi_tabulka) — show key info first --- */
table.zbozi_tabulka {
    width: 100%;
    border-collapse: collapse;
    border: none;
    margin-bottom: 20px;
}

table.zbozi_tabulka td {
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
}

table.zbozi_tabulka td.zt_popisek {
    width: 45%;
    color: var(--tpl-text-light);
    font-weight: 500;
    text-align: left;
}

table.zbozi_tabulka td.right {
    text-align: right;
}

table.zbozi_tabulka tr:hover {
    background: transparent;
}

/* Code row — small, subtle */
table.zbozi_tabulka tr.zbozi_kod td {
    font-size: 12px;
    color: #999;
    padding: 6px 0;
    border-bottom: none;
}
table.zbozi_tabulka tr.zbozi_kod td.zt_popisek {
    color: #999;
    font-size: 12px;
}

/* Manufacturer row */
table.zbozi_tabulka tr.zbozi_vyrobce td {
    font-size: 13px;
    padding: 6px 0;
    border-bottom: none;
}

/* DPH row — hide */
table.zbozi_tabulka tr.cena_dph {
    display: none;
}

/* Info row — hide */
table.zbozi_tabulka tr.popisek_info {
    display: none;
}

/* Price row — prominent, standalone look */
table.zbozi_tabulka tr.cena_s_dph td {
    font-weight: 700;
    font-size: 36px;
    color: var(--tpl-text);
    padding: 25px 0 15px 0;
    border-bottom: none;
    letter-spacing: -0.5px;
}

table.zbozi_tabulka tr.cena_s_dph td.zt_popisek {
    font-size: 13px;
    font-weight: 400;
    color: var(--tpl-text-light);
    vertical-align: bottom;
    padding-bottom: 20px;
}

/* Availability — green */
table.zbozi_tabulka tr.zbozi_dostupnost td {
    padding: 8px 0 15px 0;
    border-bottom: 1px solid var(--tpl-card-border);
}

table.zbozi_tabulka tr.zbozi_dostupnost span.dostupnost {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--tpl-stav-skladem);
}

/* Volume discounts table */
table.zbozi_tabulka.mnozstevnislevy {
    margin-top: 15px;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    overflow: hidden;
}

table.zbozi_tabulka.mnozstevnislevy thead td {
    background: var(--tpl-surface-2);
    font-weight: 700;
    font-size: 14px;
    color: var(--tpl-text);
    text-align: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--tpl-card-border);
}

table.zbozi_tabulka.mnozstevnislevy tbody td {
    text-align: right;
    font-size: 13px;
    padding: 8px 12px;
}

table.zbozi_tabulka.mnozstevnislevy tbody tr:nth-child(even) {
    background: var(--tpl-surface-2);
}

/* Product code / SKU */
span.zbozi_kod_detail {
    font-family: monospace;
    font-size: 12px;
    color: #999;
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Parameters in table — hide from main view (visible in tabs) */
table.zbozi_tabulka tr.detail_parametry {
    display: none;
}

/* Show parameters only inside tabs */
div#tabs table.zbozi_tabulka tr.detail_parametry {
    display: table-row;
}

/* --- Delivery date (fotoskoda-style clean rows) --- */
div.datum_doruceni {
    margin-bottom: 20px;
    padding-top: 5px;
}

div.datum_doruceni_odkaz {
    font-size: 14px;
    color: var(--tpl-text);
    cursor: pointer;
    padding: 12px 0;
    background: none;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--tpl-card-border);
    transition: color var(--tpl-transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

div.datum_doruceni_odkaz:hover {
    color: var(--tpl-stav-skladem);
}

div.datum_doruceni_odkaz span {
    font-weight: 700;
    color: var(--tpl-stav-skladem);
    margin-left: auto;
}

div.datum_doruceni_odkaz i {
    margin-left: 4px;
    font-size: 11px;
    color: var(--tpl-stav-skladem);
}

/* Tabulka dopravy skrytá defaultně — rozbalí se POD toggle „Další info o
   dopravě / osobní odběr" až po kliknutí (jádro: onclick
   $('div.zbozi_dopravy_doruceni').toggle()). „zítra" + ⓘ v toggle zůstává vidět. */
div.datum_doruceni div.zbozi_dopravy_doruceni {
    display: none;
}

table.zbozi_dopravy_doruceni {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border: none;
}

table.zbozi_dopravy_doruceni td {
    padding: 8px 0;
    font-size: 13px;
    border: none;   /* bez šedých linek mezi řádky */
}

table.zbozi_dopravy_doruceni td.center {
    text-align: right;
    font-weight: 600;
    color: var(--tpl-stav-skladem);
}

/* === Diskuse (záložka) — formulář „Vložit komentář" (#komentar_zbozi) ===
   Sjednoceno s moderním vzhledem šablony: zarovnaný formulář, plnošířkové
   zaoblené inputy, zelené CTA, ztlumený souhlas. Scoped na #komentar_zbozi
   (ne #tabs-N — index tabu se mění dle počtu záložek u produktu). */
#komentar_zbozi {
    max-width: 620px;
    margin: 8px 0 0 !important;
    padding: 0;
}
#komentar_zbozi h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--tpl-text) !important;
    text-align: left !important;
    margin: 0 0 16px !important;
}
/* Nadpis je odkaz uvnitř h3 (zlatý) — sjednotit na tmavý text bez podtržení. */
#komentar_zbozi h3 a {
    color: var(--tpl-text) !important;
    text-decoration: none !important;
    cursor: default;
}
#komentar_zbozi div.komentar_vlozit_label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tpl-text);
    margin: 14px 0 5px;
}
#komentar_zbozi input.input_text,
#komentar_zbozi textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    font-size: 14px;
    font-family: var(--tpl-font);
    color: var(--tpl-text);
    background: var(--tpl-card-bg);
    transition: border-color var(--tpl-transition);
}
#komentar_zbozi input.input_text:focus,
#komentar_zbozi textarea:focus {
    border-color: var(--tpl-primary);
    outline: none;
}
#komentar_zbozi textarea {
    min-height: 110px;
    resize: vertical;
}
/* CAPTCHA — obrázek + input vedle sebe (input se ID je užší než ostatní) */
#komentar_zbozi img.antispam {
    vertical-align: middle;
    border-radius: var(--tpl-border-radius);
    margin-right: 10px;
}
#komentar_zbozi input#antispam_image {
    width: 180px !important;
    display: inline-block;
    vertical-align: middle;
}
/* Souhlas se zpracováním OÚ — kompaktní, ztlumený infobox místo oranžové */
#komentar_zbozi div.souhlasy {
    margin: 16px 0 4px;
    font-size: 13px;
    line-height: 1.5;
}
#komentar_zbozi div.ou_infobox {
    font-size: 12px !important;
    color: var(--tpl-text-light) !important;
    line-height: 1.5;
    margin-top: 6px;
}
/* Odeslat — zelené CTA jako jinde v šabloně */
#komentar_zbozi input.submit.button {
    background: var(--tpl-cta-bg) !important;
    color: var(--tpl-cta-text) !important;
    border: none !important;
    border-radius: var(--tpl-border-radius) !important;
    padding: 12px 30px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
    margin-top: 18px !important;
    transition: background var(--tpl-transition);
    box-shadow: none;
}
#komentar_zbozi input.submit.button:hover {
    background: var(--tpl-cta-bg-hover) !important;
    color: var(--tpl-cta-text-hover) !important;
}

/* === Zeptat se (formulář dotazu) — input telefonního čísla širší ===
   Telefon = span.tel_stat (předvolba 70px) + span.tel_cislo (číslo). Číslo bylo
   úzké (~103px vs 386px jméno/email), protože existující pravidlo
   `div#tabs div.form_input input.tel_cislo { width: calc(100%-70px) }` (níže
   v souboru) ho zužuje. Form_input uděláme flex BEZ mezery (předvolba + číslo
   zůstanou spojené jako jeden box), číslo vyplní zbytek na 100 %.
   Prefix `div#tabs` → vyšší specificita než to konfliktní pravidlo. */
div#tabs form[id^="vas_dotaz_"] div.form_input:has(span.tel_cislo) {
    display: flex;
    align-items: stretch;
    gap: 0;
}
div#tabs form[id^="vas_dotaz_"] div.form_input span.tel_stat {
    flex: 0 0 auto;
}
div#tabs form[id^="vas_dotaz_"] div.form_input span.tel_cislo {
    flex: 1 1 auto;
    width: auto;
}
div#tabs form[id^="vas_dotaz_"] div.form_input span.tel_cislo input,
div#tabs form[id^="vas_dotaz_"] div.form_input input.tel_cislo {
    width: 100% !important;
    box-sizing: border-box;
}

/* === Detail: souhrnná tabulka (zbozi_tabulka) — úklid ===
   1) skrýt SEO řádek „Sklad eshop:" (tr.zbozi_sklad). Dostupnost zůstává.
   2) smazat všechny bordery v hlavní tabulce (řádkové oddělovače pryč).
   Množstevní slevy (.mnozstevnislevy) ponecháváme. Přesun tabulky pod
   stepper/Koupit řeší JS v _body_all.latte (sekce_detail). */
/* Skrýt SEO/parametrové řádky prosáklé do souhrnu: „Sklad eshop:"
   (zbozi_sklad) + parametry (detail_parametry — SEO_Prefix, Kód výrobce…),
   které patří do parametrů, ne do cenového souhrnu. Prosakovaly, protože
   `#detail_zbozi … tr { display:grid }` přebíjelo původní display:none. */
#detail_zbozi table.zbozi_tabulka tr.zbozi_sklad,
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) tr.detail_parametry {
    display: none !important;
}
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy),
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) td,
#detail_zbozi table.zbozi_tabulka:not(.mnozstevnislevy) th {
    border: none !important;
}

/* --- Skrýt admin HTML text "Konfigurace a příplatky" (priplatky_popis) ---
   Obsah pochází z DB (Shop->html_text("detail_zbozi_priplatky_info"))
   a vykresluje ho FormKoupit\Priplatky.php. Jádro neměníme — staré šablony
   ho dál zobrazují normálně. */
div.zbozi_priplatky div.priplatky_popis {
    display: none;
}

/* --- Příplatky / parametry (Značení klíče, Doplňte…) — bez šedých oddělovacích linek ---
   table.zbozi_priplatky a její buňky měly border 1px solid #eee (zdroj je mimo
   template CSS — generuje se jinde), což vytvářelo šedé linky mezi řádky parametrů.
   Border samotného <select> (priplatek_select) ponecháváme — to je box dropdownu. */
table.zbozi_priplatky,
table.zbozi_priplatky td,
table.zbozi_priplatky th {
    border: none;
}

/* --- Add to cart section --- */
div.detail_right form.form_polozka {
    margin-top: 5px;
    margin-bottom: 10px;
}

div#detail_zbozi div.tlacitka-pocet {
    display: flex;
    align-items: center;
    gap: 0;
    /* mezera k poslednímu inputu nad tlačítkem — o kus větší než mezi inputy
       (mezi inputy ~12px → sem ~19–20px; interní spodní padding bloku +6px) */
    margin-top: 14px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

/* Quantity controls */
div#detail_zbozi div.tlacitka-pocet input.zmenit_pocet {
    width: 44px;
    height: 52px;
    border: 2px solid #e0e0e0;
    background: var(--tpl-surface-2);
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tpl-transition), border-color var(--tpl-transition);
    font-family: var(--tpl-font);
    color: var(--tpl-text);
}

div#detail_zbozi div.tlacitka-pocet input.zmenit_pocet:hover {
    background: var(--tpl-surface-3);
    border-color: #ccc;
}

div#detail_zbozi div.tlacitka-pocet input.zmenit_pocet_minus {
    border-radius: var(--tpl-border-radius) 0 0 var(--tpl-border-radius);
    border-right: none;
}

div#detail_zbozi div.tlacitka-pocet input.zmenit_pocet_plus {
    border-radius: 0 var(--tpl-border-radius) var(--tpl-border-radius) 0;
    border-left: none;
}

div#detail_zbozi div.tlacitka-pocet input#pocet,
div#detail_zbozi div.tlacitka-pocet input[name="pocet"] {
    width: 60px !important;
    height: 52px;
    text-align: center;
    border: 2px solid #e0e0e0;
    border-left: none;
    border-right: none;
    font-size: 17px;
    font-weight: 600;
    font-family: var(--tpl-font);
    border-radius: 0;
    -moz-appearance: textfield;
}

div#detail_zbozi div.tlacitka-pocet input#pocet::-webkit-outer-spin-button,
div#detail_zbozi div.tlacitka-pocet input#pocet::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

div#detail_zbozi div.tlacitka-pocet span.jednotka {
    font-size: 14px;
    color: var(--tpl-text-light);
    margin-left: 12px;
    margin-right: 0;
}

/* Add to cart button — vedle množstevních kontrolek (+/−/qty/ks).
   Pokud se nevejde, flex-wrap na .tlacitka-pocet ho zalomí pod ně. */
div#detail_zbozi div.tlacitka-pocet input.button_konverzni,
div.detail_right input[type="submit"].button_konverzni,
div#detail_do_kosiku input[type="submit"],
.detail_tlacitko_nakup {
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    border: none;
    padding: 0 24px;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    font-weight: 700;
    font-size: 17px;
    transition: all var(--tpl-transition);
    font-family: var(--tpl-font);
    text-transform: none;
    letter-spacing: 0;
    max-width: none;
    height: 52px;
    line-height: 52px;
    white-space: nowrap;
    flex: 1 1 auto;
    margin-left: 12px;
    margin-top: 0;
    box-shadow: none;
}

div#detail_zbozi div.tlacitka-pocet input.button_konverzni:hover,
div.detail_right input[type="submit"].button_konverzni:hover,
div#detail_do_kosiku input[type="submit"]:hover,
.detail_tlacitko_nakup:hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover);
    box-shadow: none;
    transform: translateY(-1px);
}

/* Total price recalculation — schovat (delal zbytecnou mezeru nad
   "Dalsi info o doprave"). */
div#prepocet {
    display: none !important;
}

/* --- Favorites & Compare --- */
div#zbozi_detail_porovnavac {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 0;
    margin-bottom: 15px;
    flex-wrap: wrap;
    border-top: none;
    border-bottom: none;
}

div#zbozi_detail_porovnavac span.zbozi_oblibene,
div#zbozi_detail_porovnavac input.button {
    font-size: 13px;
    color: var(--tpl-text-light);
    cursor: pointer;
    transition: color var(--tpl-transition);
    background: none;
    border: none;
    font-family: var(--tpl-font);
    padding: 0;
}

div#zbozi_detail_porovnavac span.zbozi_oblibene:hover,
div#zbozi_detail_porovnavac input.button:hover {
    color: var(--tpl-text);
}

div#zbozi_detail_porovnavac span.zbozi_oblibene i {
    margin-right: 4px;
    color: #ccc;
    transition: color var(--tpl-transition);
}

div#zbozi_detail_porovnavac span.zbozi_oblibene:hover i {
    color: var(--tpl-oblibene);
}

/* --- Parameters table (general) --- */
table.parametry,
table.detail_parametry {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

table.parametry td,
table.detail_parametry td {
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid var(--tpl-card-border);
    font-size: 14px;
}

table.parametry tr:nth-child(even),
table.detail_parametry tr:nth-child(even) {
    background: var(--tpl-surface-2);
}

/* --- Detail tabs (jQuery UI) --- */
div#tabs {
    margin-top: 40px;
    border: none;
    padding: 0;
    background: none;
}

div#tabs .ui-tabs-nav {
    background: none;
    border: none;
    border-bottom: 2px solid var(--tpl-card-border);
    border-radius: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;          /* odstranit odrážky (ui-helper-reset z jQuery UI tu není načten) */
}

/* Pro jistotu odrážky odstranit i mimo div#tabs, kdyby ten ul měl jen helpery
   bez parent containeru. */
ul.ui-tabs-nav,
ol.ui-tabs-nav {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

/* === Vycentrovat obsah VŠECH tab panelů (Popis, Hodnocení, Zeptat se,
       Diskuse, GPSR, …). Po tab_add se původní wrappery odstraní a obsah
       přejde do div#tabs > div[id^="tabs-"] — cílíme tam max-width + auto
       horizontální margin. */
div#tabs > div[id^="tabs-"],
div#tabs > .ui-tabs-panel {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* === Formuláře v tabech (Zeptat se / Diskuse) ===
   Pozn.: tab_add() v js/basic.js udělá $(sel).html() + $(sel).remove(), takže
   původní wrapper div.zbozi_form_dotazy / div.zbozi_diskuze v DOM neexistuje —
   obsah skončí v div#tabs > div#tabs-N. Cílíme přímo na form a jeho prvky. */

/* Vycentrovaný form (Zeptat se i Diskuse) v tab panelu */
div#tabs form.ajax_form,
div#tabs form[id^="vas_dotaz_"],
div#tabs form#komentar_zbozi {
    max-width: 560px;
    margin: 18px auto;
    text-align: left;
}

/* Zeptat se — tlačítko „Odeslat dotaz" naladěno na zelené CTA (bylo defaultní
   šedé s outset borderem). appearance:none zruší nativní vzhled. Zarovnané pod
   sloupec inputů (label 160px + 14px gap = 174px); na mobilu reset. */
div#tabs form[id^="vas_dotaz_"] input.button.submit,
div#tabs form[id^="vas_dotaz_"] input.submit[type="button"] {
    -webkit-appearance: none;
    appearance: none;
    background: var(--tpl-cta-bg) !important;
    color: var(--tpl-cta-text) !important;
    border: none !important;
    border-radius: var(--tpl-border-radius) !important;
    padding: 12px 32px !important;
    margin: 8px 0 0 174px;
    font-size: 15px !important;
    font-weight: 700 !important;
    width: auto !important;
    height: auto !important;
    cursor: pointer;
    font-family: var(--tpl-font) !important;
    transition: background var(--tpl-transition);
    box-shadow: none;
}
div#tabs form[id^="vas_dotaz_"] input.button.submit:hover {
    background: var(--tpl-cta-bg-hover) !important;
    color: var(--tpl-cta-text-hover) !important;
}
@media (max-width: 600px) {
    div#tabs form[id^="vas_dotaz_"] input.button.submit {
        margin-left: 0;
        width: 100% !important;
    }
}

/* Nadpis "Nebo využijte kontaktní formulář…" před formem — centrovaný */
div#tabs h3 {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 16px;
    font-size: 17px;
    font-weight: 600;
}

/* .povinne (obal polí v formuláři Zeptat se) — taky centrovaný */
div#tabs div.povinne {
    max-width: 560px;
    margin: 0 auto;
}

div#tabs div.form_row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 14px;
    align-items: flex-start;
}

div#tabs div.form_label {
    flex: 0 0 160px;
    padding-top: 10px;
    color: var(--tpl-text-light);
    font-size: 14px;
    font-weight: 500;
}

div#tabs div.form_input {
    flex: 1 1 220px;
    min-width: 0;
}

/* Vstupy přepsat na 100% v rámci form_input (inline width:300px → ven). */
div#tabs div.form_input input.input_text:not(.tel_stat):not(.tel_cislo),
div#tabs div.form_input textarea {
    width: 100% !important;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    font-size: 14px;
    font-family: var(--tpl-font);
    box-sizing: border-box;
    background: var(--tpl-card-bg);
    transition: border-color var(--tpl-transition), box-shadow var(--tpl-transition);
}

div#tabs div.form_input input.input_text:focus,
div#tabs div.form_input textarea:focus {
    outline: none;
    border-color: var(--tpl-primary);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}

div#tabs div.form_input textarea {
    min-height: 120px;
    resize: vertical;
}

/* Telefon: prefix + číslo na řádku */
div#tabs div.form_input span.tel_stat,
div#tabs div.form_input span.tel_cislo {
    display: inline-block;
    vertical-align: top;
}
div#tabs div.form_input input.tel_stat {
    width: 70px !important;
    padding: 10px 8px !important;
    border: 1px solid #ddd !important;
    border-radius: var(--tpl-border-radius) 0 0 var(--tpl-border-radius) !important;
    border-right: none !important;
    font-size: 14px !important;
    font-family: var(--tpl-font) !important;
    box-sizing: border-box;
    background: var(--tpl-card-bg);
}
div#tabs div.form_input input.tel_cislo {
    width: calc(100% - 70px) !important;
    padding: 10px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 0 var(--tpl-border-radius) var(--tpl-border-radius) 0 !important;
    font-size: 14px !important;
    font-family: var(--tpl-font) !important;
    box-sizing: border-box;
    background: var(--tpl-card-bg);
}

/* Odesílací tlačítko — primární CTA, vycentrované */
div#tabs input[type="submit"],
div#tabs button[type="submit"] {
    display: block;
    margin: 18px auto 0;
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    border: none;
    padding: 12px 32px;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    font-family: var(--tpl-font);
    transition: background var(--tpl-transition);
}

div#tabs input[type="submit"]:hover,
div#tabs button[type="submit"]:hover {
    background: var(--tpl-primary-dark);
}

/* Mobil: labely nad pole, vše na plnou šířku */
@media (max-width: 600px) {
    div#tabs {
        padding: 16px 10px;
    }
    div#tabs div.form_row {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 12px;
    }
    div#tabs div.form_label {
        flex: 1 1 auto;
        padding-top: 0;
    }
    div#tabs div.form_input {
        width: 100%;
        flex: 1 1 100%;
    }
}

div#tabs .ui-tabs-nav li {
    border: none;
    background: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    float: none;
}

div#tabs .ui-tabs-nav li a {
    display: block;
    padding: 14px 24px;
    color: var(--tpl-text-light);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color var(--tpl-transition), border-color var(--tpl-transition);
    background: none;
    float: none;
    font-family: var(--tpl-font);
}

div#tabs .ui-tabs-nav li a:hover {
    color: var(--tpl-text);
    border-bottom-color: #ccc;
}

div#tabs .ui-tabs-nav li.ui-tabs-active a {
    color: var(--tpl-text);
    border-bottom-color: var(--tpl-primary);
    font-weight: 700;
}

div#tabs .ui-tabs-panel {
    padding: 25px 0;
    border: none;
    background: none;
    font-size: 15px;
    line-height: 1.7;
    color: var(--tpl-text);
}

div#tabs .ui-tabs-panel h2 {
    font-size: 20px;
    margin: 0 0 15px 0;
}

div#tabs .ui-tabs-panel h3 {
    font-size: 17px;
    margin: 20px 0 10px 0;
}

div#tabs .ui-tabs-panel ul {
    padding-left: 20px;
    margin: 10px 0;
}

div#tabs .ui-tabs-panel ul li {
    margin-bottom: 6px;
    line-height: 1.6;
}

/* Legacy detail tabs (non-jQuery UI) */
.detail_zalozky a,
.detail_tabs a {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: var(--tpl-border-radius) var(--tpl-border-radius) 0 0;
    background: var(--tpl-surface-2);
    color: var(--tpl-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}

.detail_zalozky a.aktivni,
.detail_tabs a.aktivni,
.detail_zalozky a:hover,
.detail_tabs a:hover {
    background: var(--tpl-content-bg);
    color: var(--tpl-primary-dark);
    border-color: #ddd;
}

/* --- #sekce flex container for reordering --- */
div#sekce {
    display: flex;
    flex-direction: column;
}

/* --- "Zpět do kategorie" back link (from cesta_kategorie) --- */
/* Krok 191: skrýt úplně — Breadcrumb komponenta v hlavičce už vede stejný
   navigační řetězec (Home / Kategorie / Podkategorie / Produkt), takže
   `.cesta_kategorie` odkazy „< Rozteč 72mm", „< Smart TTLock" jsou duplicita.
   Platí pro obě varianty detailu (default i v2). */
div.cesta_kategorie {
    display: none !important;
}

/* --- Related products below detail --- */
div.zbozi_souvisejici {
    margin-top: 30px;
}

/* Old detail layout overrides */
div#detail_nahled,
div#detail_foto {
    text-align: center;
}

div#detail_nahled img,
div#detail_foto img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tpl-border-radius);
}

div#detail_cena {
    font-size: 28px;
    font-weight: 700;
    color: var(--tpl-primary-dark);
    padding: 15px 0;
}

div#detail_popis {
    line-height: 1.7;
    font-size: 15px;
    color: var(--tpl-text);
}

/* ===========================================================================
 * 404 — moderní šablonová stránka „nenalezeno". JS (_body_all.latte,
 * fix404Titulek) vloží .tpl-404 do #sekce na body.sekce_404. Nezávislé na
 * obsahu/datech shopu — čistý blok: velké 404, hláška, tlačítko na úvod.
 * =========================================================================*/
body.sekce_404 #sekce { min-height: 42vh; }
.tpl-404 {
    max-width: 560px;
    margin: 48px auto;
    padding: 24px;
    text-align: center;
}
.tpl-404-code {
    font-size: clamp(84px, 16vw, 150px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--tpl-primary);
    opacity: 0.92;
}
.tpl-404-title {
    margin: 6px 0 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--tpl-text);
}
.tpl-404-text {
    margin: 0 auto 28px;
    max-width: 420px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--tpl-text-light, #666);
}
.tpl-404-btn {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text) !important;
    border-radius: var(--tpl-border-radius);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: background var(--tpl-transition);
}
.tpl-404-btn:hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover) !important;
}

/* ================================================================
   I. PATICKA (FOOTER)
   ================================================================ */

div#bottom {
    background: var(--tpl-footer-bg);
    width: 100%;
    max-width: none;
    clear: both;
    margin-top: 30px;
}

div#bottom footer {
    max-width: var(--tpl-max-width);
    margin: 0 auto;
    padding: 0;
}

div#in_bottom {
    padding: 40px 15px 20px;
    color: var(--tpl-footer-text);
}

/* Footer modules grid */
div#paticka_moduly {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

div.paticka_modul {
    float: none;
    width: auto !important;
    padding: 0;
}

/* Obrázky ve footer modulech (např. Heureka odznak, ~165px) nikdy širší než
   sloupec — jinak na úzkých displejích (2 sloupce ~134px) přetékají přes okraj. */
div.paticka_modul img {
    max-width: 100%;
    height: auto;
}

/* Footer module headings */
div.paticka_modul .ramec_top,
div.paticka_modul .paticka_nadpis {
    color: var(--tpl-footer-heading);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    padding: 0;
    background: none;
    border: none;
}

/* Footer module body */
div.paticka_modul .ramec_body {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* Footer links */
div.paticka_modul a,
div#in_bottom a {
    color: var(--tpl-footer-link);
    text-decoration: none !important;   /* přebít inline text-decoration:underline z vlastních modulů */
    transition: color var(--tpl-transition);
}

div.paticka_modul a:hover,
div#in_bottom a:hover {
    color: var(--tpl-footer-link-hover);
}

div.paticka_modul ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.paticka_modul ul li {
    padding: 4px 0;
    border: none;
}

div.paticka_modul ul li a:before {
    content: "";
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--tpl-ico-angleright) center / contain no-repeat;
    mask: var(--tpl-ico-angleright) center / contain no-repeat;
    margin-right: 8px;
    font-size: 11px;
    color: var(--tpl-primary);
}

/* Newsletter module in footer */
div.paticka_modul_novinky_mailem input[type="text"],
div.paticka_modul_novinky_mailem input[type="email"] {
    /* Pozn.: skutečně vykreslovaný newsletter input řídí paticka.css (komponenta B),
       která tohle pravidlo přebíjí — dark-mode je řešen tam (card_bg/--tpl-text).
       Tady ponecháno původní (stejně override) — needitovat, ať nevzniknou 2 zdroje. */
    background: #3a3a3a;
    border: 1px solid var(--tpl-footer-border);
    color: #fff;
    padding: 10px 14px;
    border-radius: var(--tpl-border-radius);
    font-size: 13px;
    width: 100%;
    margin-bottom: 8px;
    font-family: var(--tpl-font);
}

div.paticka_modul_novinky_mailem input[type="text"]::placeholder,
div.paticka_modul_novinky_mailem input[type="email"]::placeholder {
    color: #888;
}

div.paticka_modul_novinky_mailem input[type="submit"] {
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    border: none;
    padding: 10px 20px;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    width: 100%;
    transition: background var(--tpl-transition);
    font-family: var(--tpl-font);
}

div.paticka_modul_novinky_mailem input[type="submit"]:hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover);
}

/* Social media icons in footer */
.tpl-social {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    justify-content: center;
}

.tpl-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #3a3a3a;
    border-radius: 50%;
    color: var(--tpl-footer-text);
    font-size: 16px;
    transition: background var(--tpl-transition), color var(--tpl-transition);
}

.tpl-social a:hover {
    background: var(--tpl-primary);
    color: #fff;
}

/* Payment logos — ComGate kompozit (1 PNG se všemi platebními logy).
   default.css mu nasazoval max-width:70% + height:auto, co s naším
   max-height:30px schovalo obrázek na ~100×13 px (zachovaný aspect,
   ale moc malý → vypadalo to deformovaně). Override: žádný max-width
   limit, height 40px (čitelné), aspect-ratio přes width:auto. Také
   bez filtru, ať jsou loga ve své přirozené barvě. */
div.paticka_modul_comgate_loga {
    text-align: center;
}

div.paticka_modul_comgate_loga img,
div.paticka_modul_comgate_loga a img {
    /* Aspect-preserving sizing: oba rozměry MAX (ne fixed height) —
       browser scale-down podle úžeji limitujícího rozměru, druhý
       proporčně. object-fit: contain jako pojistka proti deformaci. */
    max-width: 100% !important;
    max-height: 64px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin: 6px auto !important;
    display: block;
    opacity: 0.95;
    filter: none !important;
    transition: opacity var(--tpl-transition);
}

div.paticka_modul_comgate_loga img:hover,
div.paticka_modul_comgate_loga a img:hover {
    opacity: 1;
}

/* Copyright */
span.copyright_podpis {
    display: block;
    text-align: center;
    padding: 12px 0;
    margin-top: 4px;
    border-top: 1px solid var(--tpl-footer-border);
    color: var(--tpl-footer-text);
    font-size: 12px;
}

span.copyright_podpis a {
    color: var(--tpl-footer-link);
}

span.copyright_podpis a:hover {
    color: var(--tpl-footer-link-hover);
}

/* Banner copyright — obsah z admin "banner_copyright" nastavení (často
   ComGate platební banner comgate-pas.webp 165×40). Bez intervence
   se ukáže v defaultní velikosti 165 px = velmi úzký. Roztáhneme img
   uvnitř banner_copyright na čitelnější rozměr a override inline
   width/height atributů. */
div#banner_copyright {
    background: var(--tpl-footer-bg);
    text-align: center;
    padding: 14px 16px;
}

div#banner_copyright img {
    /* Oba rozměry MAX (ne fixed height) — pri zúžení viewportu se obrázek
       zmenšuje proporčně místo aby se deformoval. object-fit: contain
       jako belt+suspenders pojistka. */
    max-width: 100% !important;
    max-height: 64px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 auto !important;
    display: inline-block;
    vertical-align: middle;
}

/* Detail produktu — tabulka volitelných možností (příplatky) BEZ rámečku.
   Jádrový „table reset" výše dává border VŠEM tabulkám (+ td/th), takže tabulka
   možností v detailu má rámeček okolo celého bloku. Detail-v2 to ruší (Krok 187),
   ale jen na desktop breakpointu (~≥1000px) — při užší šířce (např. otevřené
   DevTools) rámeček prosvítá. Proto ho tady zrušíme natvrdo pro #detail_zbozi na
   VŠECH šířkách (vnější rámeček tabulky i buňky). */
#detail_zbozi table.zbozi_priplatky,
#detail_zbozi table.zbozi_priplatky > tbody,
#detail_zbozi table.zbozi_priplatky td,
#detail_zbozi table.zbozi_priplatky th {
    border: 0 !important;
}

/* Detail — inputy voleb (příplatky) VŠECHNY na stejnou šířku = nejširší.
   Selecty/inputy voleb jsou v tabulce zbozi_priplatky ve společném sloupci;
   auto-layout tabulky nastaví šířku sloupce dle NEJŠIRŠÍ volby a width:100 %
   roztáhne každý input na tuhle šířku → všechny stejně široké jako nejširší. */
#detail_zbozi table.zbozi_priplatky select,
#detail_zbozi table.zbozi_priplatky input[type="text"],
#detail_zbozi table.zbozi_priplatky input[type="number"] {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 15px !important;   /* trochu větší písmo v inputech voleb */
    padding: 7px 10px;
}

/* Detail — po výběru volby NEvypisovat zvolenou hodnotu pod select.
   Jádro renderuje pod každý `select.priplatek_select` blok `div.priplatek_foto`
   (náhled + text zvolené volby „… [ +XXX ]"). Uživatel chce volbu jen ve select
   inputu → tenhle výpis skryjeme (na všech šířkách). */
#detail_zbozi div.priplatek_foto,
#detail_zbozi div[id^="priplatek_foto_"] {
    display: none !important;
}

/* === Detail: styly výběru volitelných možností (příplatky) — dlaždice / radio ===
   JS (_body_all.latte) skryje jádrový `select.priplatek_select` a vloží za něj
   `.tpl-volby` s klikacími `.tpl-volba` (dlaždice, resp. radio řádky). Přepínatelné
   konstantou STYL v _body_all.latte ('dlazdice' | 'radio' | 'nativni'). */
#detail_zbozi select.priplatek_select.tpl-select-skryty { display: none !important; }

#detail_zbozi .tpl-volby { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#detail_zbozi .tpl-volba {
    border: 1px solid #e0e0e0; border-radius: var(--tpl-border-radius); padding: 7px 12px;
    background: var(--tpl-card-bg); cursor: pointer; font: inherit; text-align: left; color: inherit;
    display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25;
    transition: border-color .12s, background .12s;
}
#detail_zbozi .tpl-volba:hover { border-color: var(--tpl-primary); }
#detail_zbozi .tpl-volba.on { border: 2px solid var(--tpl-primary); background: var(--tpl-primary-tint); padding: 6px 11px; }
#detail_zbozi .tpl-volba .n { font-size: 14px; }
#detail_zbozi .tpl-volba .c { font-size: 12px; color: #6b6b6b; margin-top: 1px; }

/* radio varianta = svislý seznam s kolečkem */
#detail_zbozi .tpl-volby-radio { flex-direction: column; gap: 2px; }
#detail_zbozi .tpl-volby-radio .tpl-volba {
    flex-direction: row; align-items: center; gap: 9px; width: 100%;
    border: 1px solid transparent; border-radius: var(--tpl-border-radius); padding: 7px 8px; background: transparent;
}
#detail_zbozi .tpl-volby-radio .tpl-volba:hover { background: var(--tpl-surface-2); border-color: transparent; }
#detail_zbozi .tpl-volby-radio .tpl-volba.on { background: transparent; padding: 7px 8px; }
#detail_zbozi .tpl-volby-radio .tpl-radio-dot {
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid #bbb; flex: 0 0 auto; position: relative;
}
#detail_zbozi .tpl-volby-radio .tpl-volba.on .tpl-radio-dot { border-color: var(--tpl-primary); }
#detail_zbozi .tpl-volby-radio .tpl-volba.on .tpl-radio-dot::after {
    content: ""; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; border-radius: 50%; background: var(--tpl-primary);
}
#detail_zbozi .tpl-volby-radio .tpl-volba .c { margin-left: auto; margin-top: 0; }

/* === Detail: příplatky — rovnoměrné zarovnání řádků + elegantní „?" tooltip ===
   Řádky měly nestejné rozestupy (border-spacing tabulky + různá vert. zarovnání).
   Fix: collapse (žádné border-spacing), buňky svisle na střed, jednotný padding →
   rovný rytmus. „?" = jemné kolečko s plovoucí vysvětlivkou (jako v modalu); text
   plní JS do data-tip (viz _body_all.latte), inline info řádek se skryje. */
#detail_zbozi table.zbozi_priplatky { border-collapse: collapse; width: 100%; table-layout: fixed; }
#detail_zbozi table.zbozi_priplatky td { vertical-align: middle; padding: 6px 0; }
#detail_zbozi table.zbozi_priplatky td.nazev_priplatku { width: 38%; padding-right: 14px; line-height: 1.3; white-space: nowrap; }

/* Select voleb — zaoblený s vlastní šipkou, jednotná výška (jako v modalu). */
#detail_zbozi table.zbozi_priplatky select.priplatek_select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    border: 1px solid #ddd; border-radius: var(--tpl-border-radius);
    background-color: var(--tpl-card-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23555' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 6px;
    padding: 9px 36px 9px 12px;
}

/* „?" ikona — jemné šedé kolečko; hover = zelené + plovoucí vysvětlivka. */
#detail_zbozi td.nazev_priplatku_info { cursor: default; }
#detail_zbozi td.nazev_priplatku i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 6px;
    border: 1px solid #d0d0d0; border-radius: 50%;
    color: #9aa0a6 !important; font-size: 10px !important; font-weight: 700 !important;
    font-family: var(--tpl-font) !important; font-style: normal; line-height: 1;
    cursor: help; vertical-align: middle;
    transition: border-color .2s, color .2s, background .2s;
}
#detail_zbozi td.nazev_priplatku i::before {
    content: "?" !important; font-family: var(--tpl-font) !important; font-weight: 700;
}
/* === SJEDNOCENÍ ikon nápovědy — VŠUDE stejné „?" kolečko jako u příplatků v
   detailu (td.nazev_priplatku i). Doplňkové služby renderuje jádro s textovým
   „i": detail = span.kpzd_info (inline styl, šedé kolečko), košík =
   span.kpz_info_ikona (plné tmavé kolečko). Skrýt „i" (font-size:0) a „?" dát
   přes ::before + jemné šedé kolečko. !important kvůli inline stylu na kpzd_info. */
span.kpzd_info,
.kosik_priplatky_zbozi .kpz_info_ikona {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #9aa0a6 !important;
    font-size: 0 !important;               /* skrýt textové „i" */
    line-height: 1 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    cursor: help !important;
}
span.kpzd_info::before,
.kosik_priplatky_zbozi .kpz_info_ikona::before {
    content: "?" !important;
    font-family: var(--tpl-font) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    color: #9aa0a6 !important;
}
@media (max-width: 767px) {
    span.kpzd_info,
    .kosik_priplatky_zbozi .kpz_info_ikona { width: 18px !important; height: 18px !important; }
    span.kpzd_info::before,
    .kosik_priplatky_zbozi .kpz_info_ikona::before { font-size: 11px !important; }
}
#detail_zbozi td.nazev_priplatku i.tpl-help { position: relative; }
/* zobrazení: desktop = hover, mobil/tap = .tpl-help-open (přidá JS na klik/tap) */
#detail_zbozi td.nazev_priplatku i.tpl-help:hover,
#detail_zbozi td.nazev_priplatku i.tpl-help.tpl-help-open {
    color: var(--tpl-cta-text) !important; background: var(--tpl-cta-bg); border-color: var(--tpl-cta-bg);
}
#detail_zbozi td.nazev_priplatku i.tpl-help:hover::after,
#detail_zbozi td.nazev_priplatku i.tpl-help.tpl-help-open::after {
    content: attr(data-tip);
    position: absolute; left: 0; top: 160%;
    width: 260px; max-width: 60vw;
    background: #2d2d2d; color: #fff;
    padding: 10px 13px; border-radius: var(--tpl-border-radius);
    font-size: 12px; font-weight: 400; font-style: normal; line-height: 1.5;
    font-family: var(--tpl-font); letter-spacing: 0;
    white-space: normal; text-align: left;
    z-index: 40; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); pointer-events: none;
}
/* Mobil — nápověda přes tap (touch nemá hover): místo bubliny otevře JS
   vycentrované okno (#tpl-help-modal, viz níže). Hover/tap bublinu na mobilu
   úplně vypnout, aby se při tapu neukázala „nalepená" na ikoně. */
@media (max-width: 767px) {
    /* „?" kolečko jen mírně větší, ať se vejde do řádku labelu a NEpřečuhává pod
       něj; pohodlný tap prstem řeší velký NEVIDITELNÝ ::after (klik = klik na <i>). */
    #detail_zbozi td.nazev_priplatku i {
        width: 18px; height: 18px;
        margin-left: 8px;
        font-size: 11px !important;
        position: relative;
    }
    /* neviditelný ~40px tap-cíl kolem kolečka; zároveň přebíjí desktopovou bublinu */
    #detail_zbozi td.nazev_priplatku i.tpl-help::after,
    #detail_zbozi td.nazev_priplatku i.tpl-help:hover::after,
    #detail_zbozi td.nazev_priplatku i.tpl-help.tpl-help-open::after {
        content: "" !important;
        position: absolute; top: 50%; left: 50%;
        width: 40px; height: 40px;
        transform: translate(-50%, -50%);
        background: transparent !important;
        border: 0 !important; box-shadow: none !important;
        padding: 0 !important; border-radius: 0 !important;
        max-width: none;
    }
}

/* === Detail: text parametr („Doplňte …") — formát jako ostatní inputy ===
   Popis VLEVO, textarea VPRAVO na jeden řádek (roztažitelná dolů). JS
   (_body_all.latte) přesune tabulku nad tlačítko a rozdělí buňku
   `<td colspan=2>popis<br>textarea` na `<span.tpl-tp-label>` + `<textarea>`. */
#detail_zbozi table.vyber_parametru {
    width: 100%;
    border-collapse: collapse;
    border: 0 !important;   /* přebít jádrový table{border:1px solid #eee} */
    /* nahoru 6 (mezera od příplatku ~12); mezeru DOLŮ k tlačítku řeší
       margin-top na .tlacitka-pocet (jednotně pro text param i příplatky) */
    margin: 6px 0 0;
}
#detail_zbozi table.vyber_parametru td {
    border: 0 !important;
    padding: 5px 0;
    vertical-align: middle;
}
/* textová buňka: popis vlevo (38% jako příplatky) + input vpravo, jeden řádek */
#detail_zbozi table.vyber_parametru td.tpl-tp-cell {
    display: flex;
    align-items: center;
}
#detail_zbozi table.vyber_parametru .tpl-tp-label {
    flex: 0 0 38%;
    box-sizing: border-box;
    padding-right: 14px;
    color: var(--tpl-text);
    font-size: 15px;
    line-height: 1.3;
}
#detail_zbozi table.vyber_parametru textarea {
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;          /* jeden řádek; resize:vertical = roztažitelné */
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    padding: 8px 12px;
    font-family: var(--tpl-font);
    font-size: 15px;
    line-height: 1.4;
    color: var(--tpl-text);
    background: var(--tpl-card-bg);
    resize: vertical;
    transition: border-color .2s, box-shadow .2s;
}
#detail_zbozi table.vyber_parametru textarea:focus {
    outline: none;
    border-color: var(--tpl-cta-bg);
    box-shadow: 0 0 0 3px rgba(70, 160, 88, 0.12);
}

/* Pagination */
.strankovani,
.pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 20px 0;
}

.strankovani a,
.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    color: var(--tpl-text);
    text-decoration: none;
    font-size: 13px;
    transition: all var(--tpl-transition);
}

.strankovani a:hover,
.pagination a:hover {
    border-color: var(--tpl-primary);
    color: var(--tpl-primary);
}

.strankovani a.aktivni,
.strankovani span.aktivni,
.pagination a.active {
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    border-color: var(--tpl-primary);
}

/* ================================================================
   K. DROBECKOVA NAVIGACE
   ================================================================ */

/* Breadcrumb (ol.Breadcrumb) — fotoskoda style */
ol.Breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0 0 25px 0;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

ol.Breadcrumb li {
    display: inline-flex;
    align-items: center;
}

/* Remove default.css » separator */
li.Breadcrumb::after {
    content: none !important;
    display: none !important;
}

ol.Breadcrumb li + li:before {
    content: "/";
    font-family: var(--tpl-font);
    font-weight: 400;
    font-size: 11px;
    margin: 0 8px;
    color: #ccc;
}

ol.Breadcrumb li a {
    color: #999;
    text-decoration: none;
    transition: color var(--tpl-transition);
}

ol.Breadcrumb li a:hover {
    color: var(--tpl-text);
}

ol.Breadcrumb li.last {
    color: #666;
    font-weight: 500;
}

/* Home icon instead of "HOME" text */
ol.Breadcrumb li.Breadcrumb_1 a span {
    font-size: 0;
    line-height: 0;
}

ol.Breadcrumb li.Breadcrumb_1 a:before {
    content: "";
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--tpl-ico-home) center / contain no-repeat;
    mask: var(--tpl-ico-home) center / contain no-repeat;
    font-size: 13px;
    color: #999;
}

ol.Breadcrumb li.Breadcrumb_1 a:hover:before {
    color: var(--tpl-text);
}

/* Legacy breadcrumb (div.drobeckova_navigace) */
.drobeckova_navigace,
div.drobeckova_navigace {
    padding: 10px 15px;
    margin: 0 0 20px 0;
    border-bottom: none;
    font-size: 12px;
    color: var(--tpl-text-light);
    background: var(--tpl-surface-2);
    border-radius: var(--tpl-border-radius);
}

.drobeckova_navigace a {
    color: var(--tpl-text-light);
    text-decoration: none;
}

.drobeckova_navigace a:hover {
    color: var(--tpl-text);
}

/* ================================================================
   L. SIDEBAR MODULY
   ================================================================ */

div.ramec {
    background: var(--tpl-content-bg);
    border-radius: var(--tpl-border-radius);
    box-shadow: none;
    border: 1px solid #e8e8e8;
    margin-bottom: 0;
    overflow: hidden;
}

div.ramec_top {
    background: var(--tpl-surface-2);
    padding: 14px 18px;
    font-weight: 700;
    font-size: 12px;
    color: var(--tpl-text);
    border-bottom: 1px solid #e8e8e8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

div.ramec_body {
    padding: 8px 0;
    font-size: 13px;
}

div.ramec_body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.ramec_body ul li {
    padding: 0;
    border-bottom: none;
}

div.ramec_body ul li:last-child {
    border-bottom: none;
}

div.ramec_body ul li a {
    color: var(--tpl-text);
    text-decoration: none;
    display: block;
    padding: 7px 18px;
    transition: background var(--tpl-transition), color var(--tpl-transition);
    border-left: 3px solid transparent;
}

div.ramec_body ul li a:hover {
    background: var(--tpl-surface-2);
    color: var(--tpl-text);
    border-left-color: var(--tpl-primary);
}

div.ramec_body ul li a.aktivni {
    background: var(--tpl-primary-tint);
    color: var(--tpl-text);
    border-left-color: var(--tpl-primary);
    font-weight: 600;
}

/* Category tree in sidebar */
div.strom1 a { padding-left: 18px !important; }
div.strom2 a { padding-left: 30px !important; }
div.strom3 a { padding-left: 42px !important; }
div.strom4 a { padding-left: 54px !important; }
div.strom5 a { padding-left: 66px !important; }
div.strom6 a { padding-left: 78px !important; }

div.strom1, div.strom2, div.strom3,
div.strom4, div.strom5, div.strom6 {
    padding-left: 0;
}

/* Filter module */
div.filtr_skupina {
    margin-bottom: 12px;
    padding: 0 18px;
}

div.filtr_nadpis {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
}

/* Sidebar product images */
div.ramec_body img {
    border-radius: var(--tpl-radius-sm);
}

/* Sidebar Akce module */
div.akce_foto {
    padding: 8px 18px;
    border-bottom: 1px solid #f0f0f0;
}

div.akce_foto:last-child {
    border-bottom: none;
}

div.akce_foto a {
    font-size: 13px;
    font-weight: 500;
    color: var(--tpl-text);
    text-decoration: none;
}

div.akce_foto a:hover {
    color: var(--tpl-primary-dark);
}

div.akce_foto_img {
    margin: 6px 0;
}

div.akce_foto_img img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tpl-border-radius);
}

div.akce_cena {
    font-size: 14px;
    font-weight: 700;
    color: var(--tpl-text);
}

/* Sidebar ramec_body general content padding */
div.ramec_body nav h3 {
    padding: 8px 18px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--tpl-text);
}


/* Content headings */
div#prostredek h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--tpl-text);
    margin: 0 0 15px 0;
    line-height: 1.3;
}

div#prostredek h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--tpl-text);
    margin: 20px 0 10px 0;
}

div#prostredek h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--tpl-text);
    margin: 15px 0 8px 0;
}

/* Category description text */
div#prostredek .popis_kategorie,
div#prostredek .kategorie_popis {
    font-size: 13px;
    line-height: 1.6;
    color: var(--tpl-text-light);
    margin-bottom: 20px;
}

/* Product sorting/filter bar */
div.razeni,
div.filtr_bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    margin-bottom: 15px;
    font-size: 13px;
    border-bottom: 1px solid var(--tpl-card-border);
}

div.razeni a {
    color: var(--tpl-text-light);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--tpl-radius-sm);
}

div.razeni a:hover,
div.razeni a.aktivni {
    color: var(--tpl-text);
    background: var(--tpl-surface-2);
}

/* Product card improvements */
div.polozka .nazev,
div.polozka .nazev a {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--tpl-text);
}

div.polozka .nazev a:hover {
    color: var(--tpl-primary-dark);
}

/* Availability label */
div.polozka .dostupnost,
.detail_dostupnost {
    font-size: 12px;
    color: var(--tpl-stav-skladem);
    font-weight: 500;
}

/* Rating stars */
.hodnoceni_hvezdicky i,
.rating i {
    color: var(--tpl-primary);
    font-size: 12px;
}

/* Contact page form */
div#prostredek table.kontakt {
    border: none;
}

div#prostredek table.kontakt td {
    border: none;
    padding: 5px 10px 5px 0;
}

/* Article page improvements */
div#prostredek .clanek_obsah {
    line-height: 1.8;
    font-size: 14px;
}

/* Comment form */
div.komentar_form {
    background: var(--tpl-surface-2);
    border-radius: var(--tpl-border-radius);
    padding: 20px;
    margin-top: 20px;
}

/* "nahoru | tisk" links at bottom */
/* "nahoru | Tisk stránky" ovládání — skrýt (na přání). div.nahoru je wrapper
   obou odkazů (a.nahoru href=#top + a.tisk). */
div.nahoru {
    display: none;
}

/* Sidebar product modules (Akce, etc.) */
div.ramec_body .polozka {
    box-shadow: none;
    border: none;
    margin-bottom: 10px;
}

div.ramec_body .polozka:hover {
    transform: none;
    box-shadow: none;
}

/* ================================================================
   F3. HOMEPAGE — PRODUCT SECTIONS (Doporučujeme, Nové produkty)
   ================================================================ */

/* Shared container for homepage product sections */
div.uvod_zbozi_doporucujeme,
div.uvod_zbozi_nejnovejsi,
div.uvod_zbozi_nejnovejsi > div.polozky {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
    margin-bottom: 10px;
    /* hide scrollbar but keep scroll functionality */
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

div.uvod_zbozi_doporucujeme::-webkit-scrollbar,
div.uvod_zbozi_nejnovejsi::-webkit-scrollbar,
div.uvod_zbozi_nejnovejsi > div.polozky::-webkit-scrollbar {
    height: 4px;
}

div.uvod_zbozi_doporucujeme::-webkit-scrollbar-thumb,
div.uvod_zbozi_nejnovejsi::-webkit-scrollbar-thumb,
div.uvod_zbozi_nejnovejsi > div.polozky::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: var(--tpl-radius-sm);
}

/* Product items inside homepage sections (direct children or nested in .polozky) */
div.uvod_zbozi_doporucujeme > .polozka,
div.uvod_zbozi_nejnovejsi > .polozka,
div.uvod_zbozi_nejnovejsi > div.polozky > .polozka {
    flex: 0 0 calc(20% - 12px);
    min-width: 200px;
    max-width: 280px;
}

/* Hide clearfix divs inside product sections */
div.uvod_zbozi_doporucujeme > .cb,
div.uvod_zbozi_doporucujeme > .cr,
div.uvod_zbozi_doporucujeme > .cl,
div.uvod_zbozi_nejnovejsi > .cb,
div.uvod_zbozi_nejnovejsi > .cr,
div.uvod_zbozi_nejnovejsi > .cl,
div.uvod_zbozi_nejnovejsi > div.polozky > .cb,
div.uvod_zbozi_nejnovejsi > div.polozky > .cr,
div.uvod_zbozi_nejnovejsi > div.polozky > .cl {
    display: none;
}

/* Section headings on homepage */
#sekce > h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--tpl-text);
    margin: 30px 0 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tpl-primary);
    display: inline-block;
}

#sekce > h2:first-of-type {
    margin-top: 10px;
}

/* Homepage H1 (shop name) */
#sekce > h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 5px 0;
    color: var(--tpl-text);
}

/* Homepage welcome text */
#sekce > p {
    font-size: 13px;
    color: var(--tpl-text-light);
    margin: 0 0 8px 0;
    line-height: 1.6;
}

/* ================================================================
   F4. HOMEPAGE — CATEGORIES WITH PHOTO
   ================================================================ */

/* #6: Prázdný stav výpisu/hledání. Jádro vypíše jen holý
   <div class="center kategorie_zadne_zbozi"><strong>Výběru neodpovídá žádná
   položka</strong> … <a>Zašlete si vlastní poptávku ZDE</a></div> = vypadá jako
   chyba. Uděláme z toho čitelný empty-state (karta) a schováme lištu filtrace
   /řazení (nemá co řadit; vyhledávací pole #frm_fulltext_kategorie nad ní
   zůstává, takže uživatel může hledat znovu). :has() = jen když je výpis prázdný. */
#kategorie_obsah:has(.kategorie_zadne_zbozi) .zobrazit_filtraci {
    display: none;
}
.kategorie_zadne_zbozi {
    margin: 20px 0 32px;
    padding: 40px 24px;
    text-align: center;
    background: var(--tpl-surface-2);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    font-size: 15px;
    color: var(--tpl-text);
    line-height: 1.6;
}
.kategorie_zadne_zbozi strong {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}
.kategorie_zadne_zbozi a {
    color: var(--tpl-primary);
    font-weight: 600;
    text-decoration: none;
}
.kategorie_zadne_zbozi a:hover { text-decoration: underline; }

div#kategorie_uvod {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px;
}

div#kategorie_uvod div.kategorie_s_fotkou {
    flex: 0 0 calc(33.33% - 8px);
    background: var(--tpl-content-bg);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--tpl-transition), box-shadow var(--tpl-transition);
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

div#kategorie_uvod div.kategorie_s_fotkou:hover {
    border-color: var(--tpl-primary);
    box-shadow: var(--tpl-shadow);
}

div#kategorie_uvod div.kategorie_s_fotkou img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

div#kategorie_uvod div.kategorie_s_fotkou a {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tpl-text);
    text-decoration: none;
}

/* ================================================================
   F5. HOMEPAGE — ARTICLES (Poslední články)
   ================================================================ */

div#uvod_clanky {
    margin-bottom: 30px;
}

div#uvod_clanky h2.posledni_clanky {
    font-size: 20px;
    font-weight: 700;
    color: var(--tpl-text);
    margin: 30px 0 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tpl-primary);
    display: inline-block;
}

div.uvod_clanky_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

div.clanky_vypis {
    flex: 1 1 calc(33.33% - 14px);
    min-width: 280px;
    background: var(--tpl-content-bg);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    padding: 20px 24px;
    cursor: pointer;
    transition: border-color var(--tpl-transition), box-shadow var(--tpl-transition);
}

div.clanky_vypis:hover {
    border-color: var(--tpl-primary);
    box-shadow: var(--tpl-shadow);
}

div.clanky_vypis_nadpis h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--tpl-text);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

div.clanky_vypis_uvod {
    font-size: 13px;
    color: var(--tpl-text-light);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}

div.clanky_odkaz a {
    font-size: 13px;
    font-weight: 600;
    color: var(--tpl-primary-dark);
    text-decoration: none;
}

div.clanky_odkaz a:hover {
    color: var(--tpl-text);
}

/* ================================================================
   F5b. HOMEPAGE — VÝHODY / USP řada (#bannery-vyhody)
   Legacy custom-HTML modul (admin blok): 4 sloupce <ul><li><a> s SVG
   ikonou (Doprava zdarma / Rychlé doručení / Podpora / Bezpečné platby).
   Starý default.css je v Latte vypnutý, kontejner má display:block → 4
   sloupce spadly pod sebe. Stylujeme jako vodorovnou řadu karet.
   Struktura: #bannery-vyhody > ul > li > a > (span.svg-ikona + h2 + text).
   ================================================================ */
div#bannery-vyhody {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 18px 0 8px;
    padding: 0;
    list-style: none;
}
div#bannery-vyhody > ul {
    flex: 1 1 calc(25% - 11px);
    min-width: 210px;
    margin: 0;
    padding: 0;
    list-style: none;
}
div#bannery-vyhody > ul > li {
    list-style: none;
    height: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-content-bg);
    box-sizing: border-box;
    transition: border-color var(--tpl-transition), box-shadow var(--tpl-transition);
}
div#bannery-vyhody > ul > li:hover {
    border-color: var(--tpl-primary);
    box-shadow: var(--tpl-shadow);
}
/* Odkaz = ikona vlevo (absolutně), titulek + podtitulek v odsazeném textu.
   Text je z části anonymní (h2 + textové uzly + <br>), proto ikonu řešíme
   absolutním pozicováním místo flex/grid — s <br> by se grid items rozpadly. */
div#bannery-vyhody > ul > li > a {
    display: block;
    position: relative;
    min-height: 34px;
    padding-left: 46px;
    text-decoration: none;
    color: var(--tpl-text-light);
    font-size: 12px;
    line-height: 1.35;
}
div#bannery-vyhody > ul > li > a > span.svg-ikona {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tpl-primary-dark);
}
div#bannery-vyhody > ul > li > a > span.svg-ikona svg {
    width: 30px;
    height: 30px;
}
div#bannery-vyhody > ul > li > a h2 {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tpl-text);
    line-height: 1.2;
}
@media (max-width: 700px) {
    div#bannery-vyhody > ul {
        flex: 1 1 100%;
    }
}

/* ================================================================
   F5c. HOMEPAGE — USP grid (.hp-usp) — HtmlEditor bloky (moduly #54, #62)
   BEM markup .hp-usp / .hp-usp__grid / .hp-usp__card (ikona emoji + head +
   text). V Latte nikde nestylované (default.css off) → grid byl display:block
   a 4 karty spadly pod sebe. Stylujeme jako mřížku karet (4→2→1).
   ================================================================ */
.hp-usp {
    margin: 28px 0;
}
.hp-usp__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--tpl-text);
    text-align: center;
    margin: 0 0 6px;
    line-height: 1.25;
}
.hp-usp__subtitle {
    font-size: 14px;
    color: var(--tpl-text-light);
    text-align: center;
    max-width: 760px;
    margin: 0 auto 20px;
    line-height: 1.5;
}
.hp-usp__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.hp-usp__card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-content-bg);
    text-decoration: none;
    color: var(--tpl-text);
    transition: border-color var(--tpl-transition), box-shadow var(--tpl-transition);
}
.hp-usp__card:hover {
    border-color: var(--tpl-primary);
    box-shadow: var(--tpl-shadow);
}
.hp-usp__icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}
.hp-usp__head {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--tpl-text);
    margin-bottom: 4px;
}
.hp-usp__text {
    font-size: 12px;
    color: var(--tpl-text-light);
    line-height: 1.45;
}
@media (max-width: 900px) {
    .hp-usp__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 520px) {
    .hp-usp__grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   F5d. HOMEPAGE — kategorie dlaždice (modul HlavniKategorie, #24)
   Markup: div.modul_kategorie_dlazdice > div.kategorie_dlazdice >
           (div.kategorie_dlazdice_ikona > img) + (div.kategorie_dlazdice_nazev > a).
   V Latte nestylované (default.css off) → kontejner display:block, dlaždice
   full-width pod sebou a obrázky 1024×1024 v plné velikosti (stránka přes
   20 000px). Stylujeme jako mřížku čtvercových kategorií (ikona + název).
   ================================================================ */
div.modul_kategorie_dlazdice {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin: 20px 0;
}
div.kategorie_dlazdice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-content-bg);
    transition: border-color var(--tpl-transition), box-shadow var(--tpl-transition);
}
div.kategorie_dlazdice:hover {
    border-color: var(--tpl-primary);
    box-shadow: var(--tpl-shadow);
}
div.kategorie_dlazdice_ikona {
    width: 100%;
    margin-bottom: 10px;
    line-height: 0;
}
div.kategorie_dlazdice_ikona img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--tpl-border-radius);
}
div.kategorie_dlazdice_ikona a {
    display: block;
    line-height: 0;
}
div.kategorie_dlazdice_nazev {
    width: 100%;
}
div.kategorie_dlazdice_nazev a {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tpl-text);
    text-decoration: none;
}
div.kategorie_dlazdice_nazev a:hover {
    color: var(--tpl-primary-dark);
}
@media (max-width: 520px) {
    div.modul_kategorie_dlazdice {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ================================================================
   F6. PRODUCT BADGES (polozka_priznaky)
   ================================================================ */

/* Badge container - positioned on product photo */
span.polozka_priznaky {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
}

/*
 * Individual badge base style
 * The spans contain &nbsp; — we hide it with text-indent and show
 * a readable label via ::after pseudo-element.
 * Needs !important to override old sprite-based styles in styles.css
 */
span.polozka_priznaky span.polozka_novinka_cz,
span.polozka_priznaky span.polozka_akce_cz,
span.polozka_priznaky span.polozka_nejprodavanejsi_cz,
span.polozka_priznaky span.polozka_doprava_zdarma_cz,
span.polozka_priznaky span.polozka_gift_cz,
span.polozka_priznaky span.polozka_novinka_en,
span.polozka_priznaky span.polozka_akce_en,
span.polozka_priznaky span.polozka_nejprodavanejsi_en,
span.polozka_priznaky span.polozka_doprava_zdarma_en,
span.polozka_priznaky span.polozka_gift_en,
span.polozka_priznaky span.polozka_novinka_sk,
span.polozka_priznaky span.polozka_akce_sk,
span.polozka_priznaky span.polozka_nejprodavanejsi_sk,
span.polozka_priznaky span.polozka_doprava_zdarma_sk,
span.polozka_priznaky span.polozka_gift_sk {
    display: block !important;
    padding: 3px 10px !important;
    font-size: 0 !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--tpl-radius-sm);
    line-height: 1.3 !important;
    background: #888 !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: #fff;
    white-space: nowrap;
}

/* ::after pseudo-element shows the badge label */
span.polozka_priznaky span.polozka_novinka_cz::after,
span.polozka_priznaky span.polozka_akce_cz::after,
span.polozka_priznaky span.polozka_nejprodavanejsi_cz::after,
span.polozka_priznaky span.polozka_doprava_zdarma_cz::after,
span.polozka_priznaky span.polozka_gift_cz::after,
span.polozka_priznaky span.polozka_novinka_en::after,
span.polozka_priznaky span.polozka_akce_en::after,
span.polozka_priznaky span.polozka_nejprodavanejsi_en::after,
span.polozka_priznaky span.polozka_doprava_zdarma_en::after,
span.polozka_priznaky span.polozka_gift_en::after,
span.polozka_priznaky span.polozka_novinka_sk::after,
span.polozka_priznaky span.polozka_akce_sk::after,
span.polozka_priznaky span.polozka_nejprodavanejsi_sk::after,
span.polozka_priznaky span.polozka_doprava_zdarma_sk::after,
span.polozka_priznaky span.polozka_gift_sk::after {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
}

/* NEW badge (Novinka) */
span.polozka_priznaky span.polozka_novinka_cz,
span.polozka_priznaky span.polozka_novinka_en,
span.polozka_priznaky span.polozka_novinka_sk {
    background: var(--tpl-badge-new) !important;
}
span.polozka_priznaky span.polozka_novinka_cz::after { content: "Novinka"; }
span.polozka_priznaky span.polozka_novinka_en::after { content: "New"; }
span.polozka_priznaky span.polozka_novinka_sk::after { content: "Novinka"; }

/* SALE/ACTION badge (Akce) */
span.polozka_priznaky span.polozka_akce_cz,
span.polozka_priznaky span.polozka_akce_en,
span.polozka_priznaky span.polozka_akce_sk {
    background: var(--tpl-stav-chyba) !important;
}
span.polozka_priznaky span.polozka_akce_cz::after { content: "Akce"; }
span.polozka_priznaky span.polozka_akce_en::after { content: "Sale"; }
span.polozka_priznaky span.polozka_akce_sk::after { content: "Akcia"; }

/* BESTSELLER badge (Nejprodávanější) */
span.polozka_priznaky span.polozka_nejprodavanejsi_cz,
span.polozka_priznaky span.polozka_nejprodavanejsi_en,
span.polozka_priznaky span.polozka_nejprodavanejsi_sk {
    background: var(--tpl-badge-hit) !important;
}
span.polozka_priznaky span.polozka_nejprodavanejsi_cz::after { content: "Hit"; }
span.polozka_priznaky span.polozka_nejprodavanejsi_en::after { content: "Top"; }
span.polozka_priznaky span.polozka_nejprodavanejsi_sk::after { content: "Hit"; }

/* FREE SHIPPING badge */
span.polozka_priznaky span.polozka_doprava_zdarma_cz,
span.polozka_priznaky span.polozka_doprava_zdarma_en,
span.polozka_priznaky span.polozka_doprava_zdarma_sk {
    background: var(--tpl-stav-skladem) !important;
}
span.polozka_priznaky span.polozka_doprava_zdarma_cz::after { content: "Doprava zdarma"; }
span.polozka_priznaky span.polozka_doprava_zdarma_en::after { content: "Free shipping"; }
span.polozka_priznaky span.polozka_doprava_zdarma_sk::after { content: "Doprava zadarmo"; }

/* GIFT badge */
span.polozka_priznaky span.polozka_gift_cz,
span.polozka_priznaky span.polozka_gift_en,
span.polozka_priznaky span.polozka_gift_sk {
    background: var(--tpl-badge-gift) !important;
}
span.polozka_priznaky span.polozka_gift_cz::after { content: "D\00e1rek"; }
span.polozka_priznaky span.polozka_gift_en::after { content: "Gift"; }
span.polozka_priznaky span.polozka_gift_sk::after { content: "Dar\010dek"; }

/* Wrapper divs for badges (wrap entire product content) — make them transparent layout containers */
div.polozka > div[class*="polozka_novinka"],
div.polozka > div[class*="polozka_akce"],
div.polozka > div[class*="polozka_nejprodavanejsi"],
div.polozka > div[class*="polozka_doprava_zdarma"],
div.polozka > div[class*="polozka_gift"] {
    display: contents !important;
}

/* Badge in product detail page */
div#zbozi_detail span.polozka_priznaky {
    position: static;
    flex-direction: row;
    margin-bottom: 12px;
}

/* ================================================================
   M. RESPONZIVITA
   ================================================================ */

/* --- Wide tablet (max 1400px) --- */
@media (max-width: 1400px) {

    div#hlavicka_obsah {
        padding: 10px 20px;
        height: auto;
        min-height: 60px;
    }

    .tpl-header-search {
        max-width: 350px;
        margin: 0 15px;
    }

    /* Hide contact text, show only icons */
    .tpl-header-contact .tpl-contact-text {
        display: none;
    }

    /* Hide email */
    #hlavicka .tpl-header-email {
        display: none !important;   /* přebít customizer toggle (--tpl-el-email) na mobilu */
    }

    /* User module: icon only */
    div.hlavicka_modul_uzivatel2 a {
        font-size: 0;
        padding: 8px;
        gap: 0;
        width: 40px;
        height: 40px;
        justify-content: center;
    }
    div.hlavicka_modul_uzivatel2 a:before {
        font-size: 18px;
    }
    div.hlavicka_modul_uzivatel2 ul li:nth-child(2) a {
        width: auto;
        height: auto;
    }

    /* Cart module: hide price text */
    span.kosik_cena_s_dph {
        display: none;
    }
}

/* --- Tablet (max 1024px) --- */
@media (max-width: 1024px) {

    div#hlavicka_obsah {
        padding: 10px;
    }

    .tpl-header-search {
        max-width: 300px;
        margin: 0 10px;
    }

    /* User module: icon only, hide text */
    div.hlavicka_modul_uzivatel2 a {
        font-size: 0;
        padding: 8px;
        gap: 0;
        width: 40px;
        height: 40px;
        justify-content: center;
    }
    div.hlavicka_modul_uzivatel2 a:before {
        font-size: 18px;
    }
    div.hlavicka_modul_uzivatel2 ul li:nth-child(2) a {
        width: auto;
        height: auto;
    }

    /* Cart module: icon only, hide text/price */
    div.hlavicka_modul_obsah_kosiku3 a {
        font-size: 0;
        padding: 8px;
        gap: 0;
        width: 40px;
        height: 40px;
        justify-content: center;
    }
    div.hlavicka_modul_obsah_kosiku3 a:before {
        font-size: 18px;
    }
    span.kosik_cena_s_dph {
        display: none;
    }

    div.polozky_div div.polozka,
    div.polozky > div.polozka {
        flex: 0 0 calc(33.33% - 10px);
    }

    /* Homepage product sections — 4 items visible */
    div.uvod_zbozi_doporucujeme > .polozka,
    div.uvod_zbozi_nejnovejsi > .polozka,
    div.uvod_zbozi_nejnovejsi > div.polozky > .polozka {
        flex: 0 0 calc(25% - 12px);
        min-width: 180px;
    }

    /* Homepage categories — 2 per row */
    div#kategorie_uvod div.kategorie_s_fotkou {
        flex: 0 0 calc(50% - 6px);
    }

    div.slide_menu a.slide_menu {
        padding: 0 12px;
        font-size: 13px;
    }

    div.slide_podmenu {
        min-width: 400px;
    }

    div#paticka_moduly {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Detail: reduce gap */
    div#detail_zbozi {
        grid-template-columns: 50% 1fr;
        gap: 0 25px;
    }

    table.zbozi_tabulka tr.cena_s_dph td {
        font-size: 26px;
    }
}

/* Override responsive menu module inline styles that hide header */
@media only screen and (max-width: 1000px) {
    div#hlavicka {
        display: block !important;
    }
    div#all {
        padding-top: 0 !important;
    }
}

/* --- Tablet small (max 768px) --- */
@media (max-width: 768px) {

    /* Header: stack search below */
    div#hlavicka_obsah {
        flex-wrap: wrap;
        gap: 10px;
    }

    .tpl-header-logo {
        order: 1;
    }

    .tpl-header-right {
        order: 2;
        margin-left: auto;
    }

    /* Show responsive menu on mobile */
    div.hlavicka_modul_responzivni_menu {
        display: block;
    }

    /* Hide contact and currency on mobile */
    .tpl-header-contact {
        display: none;
    }
    #hlavicka .tpl-currency-switcher {
        display: none !important;   /* přebít customizer toggle (--tpl-el-currency) na mobilu */
    }

    .tpl-header-search {
        order: 3;
        max-width: 100%;
        width: 100%;
        margin: 0 0 14px 0;
    }

    /* Show burger menu */
    .tpl-burger-icon {
        display: flex;
    }

    /* Hide category menu in header on mobile */
    .tpl-category-menu {
        display: none;
    }

    /* Show category menu via burger toggle (hamburger dropdown panel) */
    .tpl-menu-toggle-input:checked ~ div#hlavicka .tpl-category-menu {
        display: block;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Classic category menu (menu_kategorie) — stack as vertical list */
    .tpl-category-menu div#menu_kategorie {
        display: block;
    }

    .tpl-category-menu div#menu_kategorie div#menu_kategorie_hlavni {
        flex-direction: column;
        flex-wrap: wrap;
        overflow: visible;
        width: 100%;
    }

    .tpl-category-menu div.menu_kategorie_hlavni {
        width: 100%;
        position: static;
    }

    .tpl-category-menu div.menu_kategorie_hlavni > a {
        display: block;
        width: 100%;
        padding: 14px 20px;
        font-size: 14px;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    /* Hide hover sub-dropdowns on mobile — tapping a category navigates to it */
    .tpl-category-menu div.menu_kategorie_podkategorie {
        display: none !important;
    }

    /* "Dalsi" overflow chip is desktop-only */
    .tpl-cat-dalsi {
        display: none !important;
    }

    /* Slide-menu variant (slide_menu_kategorie) — stack as vertical list */
    div#slide_menu_kategorie {
        flex-direction: column;
        height: auto;
        padding: 0;
    }

    div.slide_menu a.slide_menu {
        text-align: left;
        padding: 14px 20px;
        font-size: 14px;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    /* Hide desktop submenu on mobile */
    div.slide_podmenu {
        position: static;
        transform: none;
        width: 100%;
        min-width: auto;
        max-width: none;
        box-shadow: none;
        padding: 10px 20px;
        background: #3a3a3a;
    }

    div.slide_podmenu ul li {
        width: 100%;
    }

    div.slide_podmenu ul li a {
        background: #444;
        color: #fff;
        border-color: #555;
    }

    div.slide_podmenu ul li a:hover {
        background: var(--tpl-primary);
        color: #fff;
    }

    /* Content: single column */
    div#in_body {
        flex-direction: column;
        padding: 15px 10px;
    }

    div#prostredek {
        order: 1;
        padding: 0;
    }

    div#levy_prostredni {
        flex-direction: column;
    }

    /* Products: 2 per row (override desktop min-width:200px so they actually fit) */
    div.polozky_div div.polozka,
    div.polozky > div.polozka {
        flex: 0 0 calc(50% - 8px);
        min-width: 0;
        max-width: calc(50% - 8px);
    }

    /* Homepage product sections — 2.5 items visible, scroll */
    div.uvod_zbozi_doporucujeme > .polozka,
    div.uvod_zbozi_nejnovejsi > .polozka,
    div.uvod_zbozi_nejnovejsi > div.polozky > .polozka {
        flex: 0 0 calc(50% - 8px);
        min-width: 160px;
    }

    /* Homepage categories — single column */
    div#kategorie_uvod div.kategorie_s_fotkou {
        flex: 0 0 100%;
    }

    /* Articles — single column */
    div.uvod_clanky_wrap {
        flex-direction: column;
    }

    div.clanky_vypis {
        min-width: auto;
    }

    /* Detail: stack to single column (grid override) */
    div#detail_zbozi {
        grid-template-columns: 1fr;
        gap: 15px 0;
    }

    div#detail_zbozi h1 {
        grid-column: 1;
        grid-row: auto;
        font-size: 24px;
    }

    p.kratky_popis {
        grid-column: 1;
        grid-row: auto;
    }

    div.zbozi_prilohy_2 {
        grid-column: 1;
        grid-row: auto;
        position: static;
        /* Revert to single column: image above, thumbnails below */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    div.zbozi_prilohy_jpg_2 {
        grid-column: 1;
        grid-row: 1;
    }

    div.zbozi_prilohy_nahledy {
        grid-column: 1;
        grid-row: 2;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    div.zbozi_prilohy_jpg_2 img {
        max-width: 450px;
    }

    div.detail_right {
        grid-column: 1;
        grid-row: auto;
    }

    table.zbozi_tabulka tr.cena_s_dph td {
        font-size: 28px;
    }

    div#tabs .ui-tabs-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    div#tabs .ui-tabs-nav li a {
        padding: 10px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Footer: 2 sloupce (na přání — „vždy dvě na řádek" i na mobilu; dříve 1 sloupec).
       minmax(0,1fr) místo 1fr: bez nuly ve spodní hranici roztáhl široký obsah
       (dlouhý odkaz/slovo) track nad rovný díl a druhý sloupec přetékal přes pravý
       okraj (na displejích <340px se patička ořezávala). min-width:0 + overflow-wrap
       na modulech zajistí, že se obsah zalomí místo přetečení. */
    div#paticka_moduly {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 18px 16px;
    }
    div.paticka_modul {
        min-width: 0;
    }
    div.paticka_modul .ramec_body,
    div.paticka_modul a {
        overflow-wrap: anywhere;
    }

    div#in_bottom {
        padding: 25px 10px 15px;
    }
}

/* --- Mobile small (max 480px) --- */
@media (max-width: 480px) {

    div#hlavicka_obsah {
        padding: 8px;
    }

    .tpl-header-right {
        gap: 10px;
    }

    span.kosik_cena_s_dph {
        display: none;
    }

    .tpl-header-logo img,
    div.hlavicka_modul_logo img {
        max-height: 35px;
    }

    /* Products: keep 2 per row also on small phones (not 1) */
    div.polozky_div div.polozka,
    div.polozky > div.polozka {
        flex: 0 0 calc(50% - 8px);
        min-width: 0;
        max-width: calc(50% - 8px);
    }

    div#prostredek {
        padding: 0;
    }

    div#detail_cena {
        font-size: 22px;
    }

    /* Detail mobile adjustments */
    div#detail_zbozi h1 {
        font-size: 20px;
    }

    div.zbozi_prilohy_nahledy img.img_zbozi {
        width: 55px !important;
        height: 55px !important;
    }

    table.zbozi_tabulka tr.cena_s_dph td {
        font-size: 24px;
        padding: 15px 0;
    }

    div#zbozi_detail_porovnavac {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    div#detail_zbozi div.tlacitka-pocet input.button_konverzni,
    div.detail_right input[type="submit"].button_konverzni {
        font-size: 16px;
        height: 52px;
        line-height: 52px;
    }

    /* Smaller headings */
    h1 { font-size: 20px; }
    h2 { font-size: 18px; }
    h3 { font-size: 16px; }
}

/* --- Hlavička: logo zalomené NAD tlačítka (~370px a méně) ---
   V momentě, kdy se logo (150px) + tlačítka (~180px) přestanou vejít vedle sebe
   a logo se octne nad řádkem tlačítek, roztáhneme OBOJÍ skoro přes celou šířku
   a vycentrujeme. Dřív bylo logo vlevo a tlačítka vpravo (margin-left:auto),
   takže na úzku působila hlavička nevyváženě. */
@media (max-width: 370px) {
    div#hlavicka_obsah {
        justify-content: center;
        min-width: 0;
    }
    /* FF parity: flex položky hlavičky musí jít zmenšit pod svůj obsah, jinak FF
       drží celou hlavičku na ~344px (Chrome zmenší, FF ne kvůli min-width:auto).
       min-width:0 to povolí → hlavička jde až na ~300px. */
    .tpl-header-logo, .tpl-header-search, .tpl-header-right { min-width: 0; }
    /* Logo = vlastní řádek přes celou šířku, vycentrované */
    .tpl-header-logo {
        flex: 1 1 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
        margin: 0;
    }
    /* Logo se reálně roztáhne (odkaz i obrázek), ne jen vycentruje na 150px.
       background-size: contain → obrázek se vejde na šířku, vycentrovaný,
       max-height ho drží v rozumné výšce. */
    .tpl-header-logo .hlavicka_modul_odkaz,
    .tpl-header-logo div.hlavicka_modul_logo {
        width: 100%;
    }
    .tpl-header-logo a#hlavicka_odkaz_logo {
        width: 100%;
        min-height: 50px;
        background-size: contain;
        background-position: center;
    }
    .tpl-header-logo img,
    div.hlavicka_modul_logo img {
        max-height: 50px;
        max-width: 100%;
    }
    /* Tlačítka = vlastní řádek roztažený skoro přes celou šířku, vycentrovaný
       (space-around = rovnoměrné mezery vč. okrajů → „skoro plná šířka") */
    .tpl-header-right {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
        justify-content: space-around;
        flex-wrap: wrap;   /* účet/košík/burger/vlajky se zalomí, když se nevejdou → žádný tvrdý strop ~344px, ale přetečení */
        gap: 6px;          /* těsnější mezery = víc místa pro obsah na úzkém displeji */
    }
    /* Košík = výrazné tlačítko S CENOU (hlavní CTA v úzké hlavičce, kde je logo
       nad tlačítky). Přebíjí icon-only styl z ≤1024px. Pevná výška 40px = STEJNĚ
       vysoké jako pilulky Admin / Přihlásit se (na přání uživatele); výšku řídí
       height (ne padding), obsah (ikona + cena) svisle vycentrovaný. */
    div.hlavicka_modul_obsah_kosiku3 a {
        width: auto;
        height: 40px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        padding: 0 18px;
        gap: 10px;
    }
    div.hlavicka_modul_obsah_kosiku3 a:before {
        font-size: 19px;
    }
    span.kosik_cena_s_dph {
        display: inline;
        font-size: 15px;
        font-weight: 600;
    }
    /* jazyková vlajka úplně doleva (na začátek řádku tlačítek) */
    .hlavicka_modul_vlajky {
        order: -1;
    }
}

/* ================================================================
   MISC & OVERRIDES
   ================================================================ */

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--tpl-font);
    color: var(--tpl-text);
    line-height: 1.3;
}

h1 { font-size: 24px; font-weight: 700; margin: 0 0 15px 0; }
h2 { font-size: 20px; font-weight: 700; margin: 0 0 12px 0; }
h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px 0; }

/* SEO hidden heading */
div#seo {
    overflow: hidden;
    height: 0;
}

/* Banner areas */
div#banner1 {
    max-width: var(--tpl-max-width);
    margin: 0 auto;
}

/* Slick carousel overrides */
.slick-prev:before,
.slick-next:before {
    color: var(--tpl-primary);
}

.slick-dots li.slick-active button:before {
    color: var(--tpl-primary);
}

/* Remove old floats from default.css */
div#hlavicka,
div#uzivatel,
div#hlavni_menu,
div#in_body,
div#bottom {
    float: none;
}

/* === Mobil ≤420px: produktové karty 1 na řádek ===
   Při 2 sloupcích je karta jen ~200px → název se láme na 3 řádky, popis na 4+
   a cenové řádky („Cena bez DPH: 546 Kč") se tísní na sebe. Full-width karta dá
   obsahu prostor. Nad 420px zůstávají 2 sloupce (viz @media ≤480). */
@media (max-width: 420px) {
    div.polozky_div div.polozka,
    div.polozky > div.polozka {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================================================
   Detail: potlačit "skok" scrollu k popisku při výběru varianty/příplatku.
   Příčina: po výběru možnosti jádro re-renderuje panel příplatků → layout shift
   NAD/kolem aktuální pozice → Chrome/FF přepočítají scroll-anchor a viewport
   skočí (projeví se JEN když je hlavní foto ZČÁSTI viditelné = přesně chování
   scroll-anchoringu; když je foto celé vidět nebo vůbec, anchor se nemění → bez
   skoku; Edge kotví méně agresivně → skok tam není). overflow-anchor:none scroll-
   anchoring vypne, takže po re-renderu zůstane viewport na místě. Scope na detail.
   POZOR: ověřit naživo na produktu s variantami/příplatky (foto zčásti odscrollované).
   ============================================================================ */
body:has(#detail_zbozi) { overflow-anchor: none; }

/* === Typografie (sada A/B/C): nadpisy = head font / řez / tracking === */
h1, h2, h3, h4, h5, h6,
.tpl-header-shop-name, #detail_zbozi h1, .nadpis, .nadpis_stranky,
div.polozka a.nazev, div.polozka .nazev, .kategorie_nazev, .sekce_nadpis, h2.ramec_top {
    font-family: var(--tpl-font-head, var(--tpl-font));
    font-weight: var(--tpl-head-weight, 700);
    letter-spacing: var(--tpl-head-tracking, 0);
}

/* ============================================================================
   Textové stránky a články (sekce dalsi_informace / clanek): úzký čitelný
   sloupec podle návrhu (nadpis na střed, 17px/1.7 text, lead odstavec,
   fotogalerie příloh v mřížce se zaoblením). Jen typografie/rozvržení,
   obsah se nemění.
   ============================================================================ */
body.sekce_dalsi_informace div#prostredek div.modul_basic,
body.sekce_dalsi_informace div#prostredek div.modul_kontaktni_formular,
body.sekce_clanek div#prostredek div.clanek,
body.sekce_clanek div#prostredek div.modul_kontaktni_formular {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
body.sekce_dalsi_informace div#prostredek div.modul_kontaktni_formular form[id^="vas_dotaz_"],
body.sekce_clanek div#prostredek div.modul_kontaktni_formular form[id^="vas_dotaz_"] {
    max-width: none;
    margin: 36px 0 20px;
}
body.sekce_dalsi_informace div#prostredek div.modul_basic div.modul_cont > h1,
body.sekce_clanek div#prostredek h1 {
    font-family: var(--tpl-font-head);
    font-weight: var(--tpl-head-weight, 700);
    font-size: 40px;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: var(--tpl-head-tracking, 0);
    text-align: center;
    margin: 22px 0 24px;
    color: var(--tpl-text);
}
body.sekce_dalsi_informace div#prostredek div.modul_basic div.modul_cont p,
body.sekce_dalsi_informace div#prostredek div.modul_basic div.modul_cont li,
body.sekce_clanek div#prostredek div.clanek_obsah p,
body.sekce_clanek div#prostredek div.clanek_obsah li {
    font-size: 17px;
    line-height: 1.7;
    color: #2b2b29;
}
body.sekce_dalsi_informace div#prostredek div.modul_basic div.modul_cont p { margin: 0 0 16px; }
body.sekce_dalsi_informace div#prostredek div.modul_basic div.modul_cont > h1 + p,
body.sekce_clanek div#prostredek div.clanek_obsah > p:first-child {
    font-size: 20px;
    color: var(--tpl-text);
}
body.sekce_dalsi_informace div#prostredek div.modul_basic div.modul_cont h2,
body.sekce_clanek div#prostredek div.clanek_obsah h2 {
    font-family: var(--tpl-font-head);
    font-size: 28px;
    text-transform: uppercase;
    margin: 32px 0 10px;
}
body.sekce_dalsi_informace div#prostredek div.modul_basic div.modul_cont p img,
body.sekce_clanek div#prostredek div.clanek_obsah img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    vertical-align: middle;
}
/* obrázek vložený na konec odstavce (typicky logo) — na vlastní řádek, bez „&nbsp;" odsazování */
body.sekce_dalsi_informace div#prostredek div.modul_basic div.modul_cont p > img[width] {
    display: block;
    margin: 12px 0 4px;
}
/* Přílohy článku = fotogalerie v mřížce (jádro: div.clanek_prilohy > div.clanek_priloha > img onclick=fotoenc) */
div#prostredek div.clanek_prilohy {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin: 26px 0 10px;
}
div#prostredek div.clanek_prilohy div.clanek_priloha {
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
}
div#prostredek div.clanek_prilohy div.clanek_priloha img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--tpl-card-border);
    cursor: zoom-in;
    transition: transform var(--tpl-transition), box-shadow var(--tpl-transition);
}
div#prostredek div.clanek_prilohy div.clanek_priloha img:hover {
    transform: translateY(-2px);
    box-shadow: var(--tpl-shadow);
}
/* „nahoru | Tisk stránky" pod obsahem — decentně, na střed */
body.sekce_dalsi_informace div#prostredek div.nahoru,
body.sekce_clanek div#prostredek div.nahoru {
    max-width: 780px;
    margin: 10px auto 0;
    text-align: center;
    font-size: 12px;
    color: var(--tpl-text-light);
}
body.sekce_dalsi_informace div#prostredek div.nahoru a,
body.sekce_dalsi_informace div#prostredek div.nahoru button.tisk {
    color: var(--tpl-text-light);
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}
@media (max-width: 600px) {
    body.sekce_dalsi_informace div#prostredek div.modul_basic div.modul_cont > h1,
    body.sekce_clanek div#prostredek h1 { font-size: 28px; }
    body.sekce_dalsi_informace div#prostredek div.modul_basic div.modul_cont p,
    body.sekce_clanek div#prostredek div.clanek_obsah p { font-size: 16px; }
    div#prostredek div.clanek_prilohy { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    div#prostredek div.clanek_prilohy div.clanek_priloha img { height: 150px; }
}
/* moduly na textove strance jsou flex polozky #sekce (sirka podle obsahu) -> roztahnout na sloupec 780px */
body.sekce_dalsi_informace div#prostredek div.modul_basic, body.sekce_dalsi_informace div#prostredek div.modul_kontaktni_formular, body.sekce_clanek div#prostredek div.clanek, body.sekce_clanek div#prostredek div.modul_kontaktni_formular { width: 100%; box-sizing: border-box; }

/* ============================================================================
   „Pošlete odkaz svému známému" (detail produktu, jádro: div.poslat_znamemu >
   form > table.poslat_znamemu) — sladěno s kartou formuláře „Potřebujete
   poradit?" výše: tabulka → mřížka 2 sloupce, pole na 100 %, CTA tlačítko.
   ============================================================================ */
div.poslat_znamemu form {
    max-width: 680px;
    margin: 28px 0;
    padding: 26px 28px 24px;
    background: var(--tpl-card-bg);
    border: 1px solid var(--tpl-card-border);
    border-radius: calc(var(--tpl-border-radius) + 4px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    box-sizing: border-box;
}
div.poslat_znamemu form h2 {
    margin: 0 0 18px;
    padding: 0;
    font-family: var(--tpl-font-head);
    font-weight: var(--tpl-head-weight, 700);
    font-size: 24px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--tpl-text);
    background: none;
    border: 0;
    text-align: left;
}
div.poslat_znamemu table.poslat_znamemu,
div.poslat_znamemu table.poslat_znamemu tbody { display: block; width: 100%; border: 0; }
div.poslat_znamemu table.poslat_znamemu tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 0 14px;
}
div.poslat_znamemu table.poslat_znamemu td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--tpl-text);
    line-height: 1.4;
}
div.poslat_znamemu table.poslat_znamemu td[colspan] { grid-column: 1 / -1; }
div.poslat_znamemu table.poslat_znamemu td br { display: block; content: ""; margin-top: 6px; }
div.poslat_znamemu table.poslat_znamemu input.input_text,
div.poslat_znamemu table.poslat_znamemu textarea {
    width: 100% !important;
    padding: 10px 12px;
    border: 1px solid #d6d5d0;
    border-radius: var(--tpl-border-radius);
    font-size: 14px;
    font-weight: 400;
    font-family: var(--tpl-font);
    color: var(--tpl-text);
    box-sizing: border-box;
    background: var(--tpl-card-bg);
    transition: border-color var(--tpl-transition), box-shadow var(--tpl-transition);
}
div.poslat_znamemu table.poslat_znamemu input.input_text:focus,
div.poslat_znamemu table.poslat_znamemu textarea:focus {
    outline: none;
    border-color: var(--tpl-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tpl-primary) 14%, transparent);
}
div.poslat_znamemu table.poslat_znamemu textarea { min-height: 96px; resize: vertical; }
/* řádek s captchou: popisek | obrázek | pole | tlačítko */
div.poslat_znamemu table.poslat_znamemu td:has(span.antispam) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}
div.poslat_znamemu table.poslat_znamemu td:has(span.antispam) span.antispam {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
}
div.poslat_znamemu table.poslat_znamemu td:has(span.antispam) img { border-radius: var(--tpl-border-radius); }
div.poslat_znamemu table.poslat_znamemu td:has(span.antispam) input.input_text { width: 140px !important; flex: 0 1 140px; }
div.poslat_znamemu table.poslat_znamemu input.submit,
div.poslat_znamemu table.poslat_znamemu input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    background: var(--tpl-cta-bg) !important;
    color: var(--tpl-cta-text) !important;
    border: none !important;
    border-radius: var(--tpl-border-radius) !important;
    padding: 0 28px !important;
    height: 46px;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--tpl-font) !important;
    cursor: pointer;
    margin-left: auto;
    transition: background var(--tpl-transition);
}
div.poslat_znamemu table.poslat_znamemu input.submit:hover { background: var(--tpl-cta-bg-hover) !important; }
@media (max-width: 600px) {
    div.poslat_znamemu form { padding: 18px 16px; }
    div.poslat_znamemu table.poslat_znamemu tr { grid-template-columns: 1fr; gap: 10px; }
    div.poslat_znamemu table.poslat_znamemu input.submit { width: 100%; margin-left: 0; }
}


/* ============================================================================
   Detail článku (blog) — sekce/clanek.latte (šablona 2026-001)
   Návrh: hlavička článku na střed, HERO banner 16:6, mřížka 1fr | 720px | 1fr
   (obsah/TOC | text | boční lišta), text 17px/1.7, lead 20px, H2 condensed 28px.
   HERO banner = jádrová funkce (příloha clanek_hero + hero_nadpis_pozice nad/v/pod,
   hero_barva_textu → --tpl-clanek-hero-text).
   ============================================================================ */
.tpl-clanek { max-width: var(--tpl-max-width); margin: 0 auto; }

/* --- hlavička: drobeček · H1 · meta -------------------------------------- */
.tpl-clanek-head {
    max-width: 820px;
    margin: 14px auto 0;
    padding: 0 16px;
    text-align: center;
}
.tpl-clanek-crumb { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tpl-text-light); }
.tpl-clanek-crumb a { color: inherit; text-decoration: none; }
.tpl-clanek-crumb a:hover { color: var(--tpl-primary); }
.tpl-clanek-head h1 {
    font-family: var(--tpl-font-head);
    font-weight: var(--tpl-head-weight, 700);
    font-size: 46px;
    line-height: 1.02;
    letter-spacing: var(--tpl-head-tracking, 0);
    text-transform: uppercase;
    margin: 12px 0 12px;
    color: var(--tpl-clanek-hero-text, var(--tpl-text));
}
.tpl-clanek-meta { font-size: 14px; color: var(--tpl-clanek-hero-text, var(--tpl-text-light)); opacity: .9; }
.tpl-clanek-meta-sep { margin: 0 6px; }
.tpl-clanek-bez-hero .tpl-clanek-head { margin-top: 24px; }

/* --- HERO banner ----------------------------------------------------------- */
.tpl-clanek-hero {
    position: relative;
    margin: 26px 0 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--tpl-surface-2, #f1f0ed);
    aspect-ratio: 16 / 6;
}
.tpl-clanek-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tpl-clanek-hero-pod .tpl-clanek-hero { margin-top: 10px; }
.tpl-clanek-hero-pod .tpl-clanek-head { margin-top: 26px; }
/* nadpis v banneru: tmavý přechod zespodu, text výchozí bílý (přepíše hero_barva_textu) */
.tpl-clanek-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 36px 24px;
    background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%);
}
.tpl-clanek-hero-overlay .tpl-clanek-head { margin: 0; }
.tpl-clanek-hero-overlay .tpl-clanek-head h1,
.tpl-clanek-hero-overlay .tpl-clanek-meta,
.tpl-clanek-hero-overlay .tpl-clanek-crumb,
.tpl-clanek-hero-overlay .tpl-clanek-crumb a { color: var(--tpl-clanek-hero-text, #fff); text-shadow: 0 1px 12px rgba(0,0,0,.35); }

/* --- mřížka: TOC | text | boční lišta -------------------------------------- */
.tpl-clanek-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr);
    gap: 32px;
    padding: 36px 0 48px;
    align-items: start;
}
.tpl-clanek-toc { position: sticky; top: 20px; font-size: 13px; line-height: 1.8; color: var(--tpl-text-light); padding-top: 6px; }
.tpl-clanek-toc[hidden] { display: none; }
.tpl-clanek-toc-h { font-weight: 700; color: var(--tpl-text); margin-bottom: 4px; }
.tpl-clanek-toc-nav a { display: block; color: inherit; text-decoration: none; padding-left: 10px; margin-left: -12px; border-left: 2px solid transparent; }
.tpl-clanek-toc-nav a:hover { color: var(--tpl-text); }
.tpl-clanek-toc-nav a.aktivni { color: var(--tpl-text); font-weight: 600; border-left-color: var(--tpl-primary); }

/* --- text ------------------------------------------------------------------ */
.tpl-clanek-body { font-size: 17px; line-height: 1.7; color: #2b2b29; min-width: 0; }
.tpl-clanek-body p { margin: 0 0 18px; }
.tpl-clanek-body p.tpl-clanek-lead { font-size: 20px; color: var(--tpl-text); margin-bottom: 20px; }
.tpl-clanek-body h2 { font-family: var(--tpl-font-head); font-size: 28px; text-transform: uppercase; margin: 32px 0 10px; line-height: 1.1; scroll-margin-top: 24px; }
.tpl-clanek-body h3 { font-family: var(--tpl-font-head); font-size: 22px; text-transform: uppercase; margin: 24px 0 8px; }
.tpl-clanek-body ul, .tpl-clanek-body ol { margin: 0 0 18px; padding-left: 22px; }
.tpl-clanek-body img { max-width: 100%; height: auto; border-radius: 10px; }
.tpl-clanek-body .clanek_obsah > img, .tpl-clanek-body .clanek_obsah p > img:only-child { display: block; margin: 8px 0 24px; }
.tpl-clanek-body div.clanek_prilohy { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 24px 0 10px; }
.tpl-clanek-body div.clanek_priloha { margin: 0; padding: 0; float: none; width: auto; }
.tpl-clanek-body div.clanek_priloha img { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 10px; border: 1px solid var(--tpl-card-border); cursor: zoom-in; }
.tpl-clanek-body div.clanek_priloha p { font-size: 13px; color: var(--tpl-text-light); margin: 6px 0 0; }
.tpl-clanek-video { margin: 24px 0; }
.tpl-clanek-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 10px; }
.tpl-clanek-autori { margin: 32px 0 0; padding: 18px 20px; border: 1px solid var(--tpl-card-border); border-radius: 10px; font-size: 14px; display: grid; gap: 12px; }
.tpl-clanek-autor-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tpl-text-light); }
.tpl-clanek-autor-jmeno { font-weight: 700; text-decoration: none; color: var(--tpl-text); }
.tpl-clanek-autor-jobtitle { color: var(--tpl-text-light); margin-left: 6px; }
.tpl-clanek-autor-bio { color: #3a3a38; margin-top: 4px; }
.tpl-clanek-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 0; font-size: 14px; }
.tpl-clanek-nav > * { float: none !important; width: auto !important; min-width: 0 !important; background: none !important; }
.tpl-clanek-komentare { margin-top: 32px; }

/* --- boční lišta ----------------------------------------------------------- */
.tpl-clanek-side { position: sticky; top: 20px; display: grid; gap: 20px; }
.tpl-clanek-dily { background: #eef2fa; border-radius: 12px; padding: 18px; }
.tpl-clanek-dily-h { font-family: var(--tpl-font-head); font-size: 20px; line-height: 1.1; text-transform: uppercase; }
.tpl-clanek-dily-p { font-size: 13px; color: #5a5955; margin: 8px 0 12px; }
.tpl-clanek-dily-sel { width: 100%; height: 40px; border: 1px solid #cfcec9; border-radius: 6px; padding: 0 10px; font-size: 13px; font-family: var(--tpl-font); background: #fff; margin-bottom: 8px; }
.tpl-clanek-dily-sel:disabled { opacity: .55; }
.tpl-clanek-dily-btn { width: 100%; height: 40px; border: none; border-radius: 6px; background: var(--tpl-primary); color: var(--tpl-primary-text, #fff); font-weight: 700; font-size: 13px; font-family: var(--tpl-font); cursor: pointer; }
.tpl-clanek-dily-btn:disabled { opacity: .5; cursor: not-allowed; }
.tpl-clanek-dalsi-h { font-size: 11px; font-weight: 700; color: var(--tpl-text-light); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.tpl-clanek-dalsi-item { display: block; padding: 8px 0; border-top: 1px solid var(--tpl-card-border); text-decoration: none; color: var(--tpl-text); }
.tpl-clanek-dalsi-item:first-of-type { border-top: 0; padding-top: 0; }
.tpl-clanek-dalsi-nazev { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.tpl-clanek-dalsi-item:hover .tpl-clanek-dalsi-nazev { color: var(--tpl-primary); }
.tpl-clanek-dalsi-datum { display: block; font-size: 12px; color: var(--tpl-text-light); margin-top: 2px; }

/* --- responzivita ----------------------------------------------------------- */
@media (max-width: 1100px) {
    .tpl-clanek-grid { grid-template-columns: minmax(0, 1fr) 300px; }
    .tpl-clanek-toc { display: none !important; }
}
@media (max-width: 768px) {
    .tpl-clanek-head h1 { font-size: 28px; }
    .tpl-clanek-meta { font-size: 12px; }
    .tpl-clanek-hero { aspect-ratio: 16 / 9; border-radius: 10px; margin-top: 16px; }
    .tpl-clanek-hero-overlay { padding: 18px 14px; }
    .tpl-clanek-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px 0 32px; }
    .tpl-clanek-body { font-size: 15.5px; line-height: 1.65; }
    .tpl-clanek-body p.tpl-clanek-lead { font-size: 17px; }
    .tpl-clanek-body h2 { font-size: 22px; margin: 22px 0 6px; }
    .tpl-clanek-body div.clanek_prilohy { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tpl-clanek-body div.clanek_priloha img { height: 150px; }
    .tpl-clanek-side { position: static; }
    .tpl-clanek-nav { grid-template-columns: 1fr; }
}

/* --- HERO článku: nadpis v banneru na podložce (čitelnost nad fotkou) ------------
   Samotný přechod + text-shadow nestačil nad členitou fotkou. Nadpis, drobeček a meta
   jsou v průsvitném obdélníku: .tpl-clanek-hero-panel-light (výchozí, bílá podložka,
   tmavý text) / .tpl-clanek-hero-panel-dark (když admin zvolil světlou barvu textu
   hero_barva_textu → ClanekModel::heroPanel). Třídu dává sekce/clanek.latte. */
.tpl-clanek-hero-overlay { background: linear-gradient(to top, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 60%); }
.tpl-clanek-hero-overlay .tpl-clanek-head {
    max-width: 760px;
    padding: 20px 28px 22px;
    border-radius: 12px;
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.tpl-clanek-hero-panel-light .tpl-clanek-head h1,
.tpl-clanek-hero-panel-light .tpl-clanek-meta,
.tpl-clanek-hero-panel-light .tpl-clanek-crumb,
.tpl-clanek-hero-panel-light .tpl-clanek-crumb a { color: var(--tpl-clanek-hero-text, var(--tpl-text, #151515)); text-shadow: none; }
.tpl-clanek-hero-panel-light .tpl-clanek-meta { opacity: .75; }
.tpl-clanek-hero-panel-dark .tpl-clanek-head { background: rgba(20,20,20,.72); box-shadow: none; }
.tpl-clanek-hero-panel-dark .tpl-clanek-head h1,
.tpl-clanek-hero-panel-dark .tpl-clanek-meta,
.tpl-clanek-hero-panel-dark .tpl-clanek-crumb,
.tpl-clanek-hero-panel-dark .tpl-clanek-crumb a { color: var(--tpl-clanek-hero-text, #fff); text-shadow: none; }
.tpl-clanek-hero-overlay .tpl-clanek-head h1 { font-size: 38px; margin: 8px 0 8px; }
@media (max-width: 768px) {
    .tpl-clanek-hero-overlay { align-items: flex-end; padding: 10px; }
    .tpl-clanek-hero-overlay .tpl-clanek-head { padding: 12px 14px; border-radius: 10px; }
    .tpl-clanek-hero-overlay .tpl-clanek-head h1 { font-size: 22px; }
}

/* --- Popis kategorie s fotkou (jadro inc/kategorie.php: div.htmlpopis > span.kategorie_htmlpopis_foto + text) --
   Sablona 2026-001 pro to nemela zadne pravidlo -> fotka kategorie se roztahla na celou sirku a text
   byl az pod ni. Klasicky layout: fotka vlevo (max 320px / 38 %), popis obteka vpravo; na mobilu pod sebou. */
div#kategorie_obsah div.htmlpopis { display: flow-root; font-size: 15px; line-height: 1.65; margin: 0 0 20px; }
div#kategorie_obsah div.htmlpopis p:first-of-type { margin-top: 0; }
div#kategorie_obsah .kategorie_htmlpopis_foto { float: left; width: 320px; max-width: 38%; margin: 4px 26px 10px 0; border-radius: var(--tpl-radius, 8px); overflow: hidden; background: var(--tpl-card-bg, #fff); border: 1px solid var(--tpl-card-border, #e6e5e1); }
div#kategorie_obsah .kategorie_htmlpopis_foto img { display: block; width: 100% !important; height: auto !important; max-width: 100%; }
div#kategorie_obsah div.htmlpopis2 .kategorie_htmlpopis_foto { float: none; }
@media (max-width: 640px) {
    div#kategorie_obsah .kategorie_htmlpopis_foto { float: none; width: 100%; max-width: 100%; margin: 0 0 12px; }
}

/* --- Mobil: tabulky v popisu produktu/clanku (vlozene z Wordu/Excelu s pevnou sirkou, napr.
   <table style="width:656px">) pretekaly pres okraj obrazovky. Tabulka max. na sirku kontejneru,
   a kdyz se obsah nevejde, panel zalozky / popis se da vodorovne posouvat misto rozbiti stranky. */
div#tabs .ui-tabs-panel, div.popisek, div.detail_popis, .tpl-clanek-body, div#kategorie_obsah div.htmlpopis { overflow-x: auto; -webkit-overflow-scrolling: touch; }
div#tabs .ui-tabs-panel table, div.popisek table, div.detail_popis table, .tpl-clanek-body table { max-width: 100% !important; height: auto !important; }
div#tabs .ui-tabs-panel table td, div#tabs .ui-tabs-panel table th { overflow-wrap: anywhere; }
div#tabs .ui-tabs-panel img, div.popisek img, .tpl-clanek-body img { max-width: 100%; height: auto; }

/* --- Zastupna ikona "bez fotky" (img.no_foto z jadra) --------------------------------------
   Jadro vklada 100x100 bitmapu css/img/no_foto99.png; ve vypisu se roztahuje na sirku karty a je
   rozmazana. V sablone ji nahradime vektorem (css/img/no_foto.svg, seda ikona obrazku na svetle
   dlazdici) a zobrazime ji mensi uprostred fotky. Bitmapa zustava jako fallback. */
img.no_foto { content: var(--shop5-no-foto, url("../../../css/img/no_foto.svg")); }
.polozka_foto img.no_foto,
div#detail_zbozi img.no_foto,
div.detail_fotky img.no_foto,
td.kosik_fotka img.no_foto { object-fit: contain !important; padding: 22% !important; box-sizing: border-box; background: var(--tpl-card-bg, #fff); }
.polozka_foto:has(img.no_foto) { background-image: none; }

/* --- Detail BEZ fotky: jadro galerii nevypise, formular by spadl do leveho sloupce ------------
   Zastupna dlazdice v 1. sloupci drzi mrizku (H1 + karta s cenou vpravo). */
div#detail_zbozi:not(:has(div.zbozi_prilohy_2))::before {
    content: "";
    display: block;
    grid-column: 1;
    grid-row: 1 / 20;
    align-self: start;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--tpl-border-radius, 12px);
    background: var(--tpl-surface-2, #f1f0ed) var(--shop5-no-foto, url("../../../css/img/no_foto.svg")) center / 42% no-repeat;
}
@media only screen and (max-width: 768px) {
    div#detail_zbozi:not(:has(div.zbozi_prilohy_2))::before { display: none; }
}

/* --- Detail: "Poptat se na cenu zbozi" + "Hlidaci pes" (jadro vypisuje holy <input>) ----------
   Poptavka = konverzni tlacitko (produkt bez ceny nema "Do kosiku"), hlidaci pes = sekundarni. */
div#detail_zbozi div.button_poptavkovy_formular { grid-column: 2; margin: 10px 0 0; }
div#detail_zbozi div.button_poptavkovy_formular input.button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    padding: 0 20px;
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    border: none;
    border-radius: var(--tpl-border-radius);
    font-family: var(--tpl-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tpl-transition);
}
div#detail_zbozi div.button_poptavkovy_formular input.button:hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover);
}
div#detail_zbozi div.hlidaci_pes_button { margin: 8px 0 12px; }
div#detail_zbozi div.hlidaci_pes_button input[type="button"] {
    padding: 9px 16px;
    background: transparent;
    color: var(--tpl-primary);
    border: 1.5px solid var(--tpl-primary);
    border-radius: var(--tpl-border-radius);
    font-family: var(--tpl-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tpl-transition), color var(--tpl-transition);
}
div#detail_zbozi div.hlidaci_pes_button input[type="button"]:hover {
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
}
@media only screen and (max-width: 768px) {
    div#detail_zbozi div.button_poptavkovy_formular { grid-column: 1; }
}

/* --- Vypis: "Poptat se na cenu zbozi" u produktu bez ceny (jadro vypisuje holy <input class="button">) */
.polozka div.button_poptavkovy_formular { margin-top: 6px; }
.polozka div.button_poptavkovy_formular input.button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    border: none;
    border-radius: var(--tpl-border-radius);
    font-family: var(--tpl-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tpl-transition);
}
.polozka div.button_poptavkovy_formular input.button:hover { background: var(--tpl-cta-bg-hover); color: var(--tpl-cta-text-hover); }

/* --- Stav dostupnosti (jadro pridava tridu dostupnost-stav-* vedle dostupnost_<md5>) -----------
   Dosud byla dostupnost v detailu vzdy zelena, i "Neni skladem" / "Na objednavku". Barvy podle stavu
   + tecka pred textem. Plati pro vypis, detail i skupinu zbozi. */
.dostupnost-stav-ok, table.zbozi_tabulka tr.zbozi_dostupnost span.dostupnost.dostupnost-stav-ok { color: var(--tpl-stav-skladem); }
.dostupnost-stav-warning, table.zbozi_tabulka tr.zbozi_dostupnost span.dostupnost.dostupnost-stav-warning { color: var(--tpl-stav-chyba, #C33B2E); }
.dostupnost-stav-neutral, table.zbozi_tabulka tr.zbozi_dostupnost span.dostupnost.dostupnost-stav-neutral { color: var(--tpl-stav-objednavka, #B26A00); }
span.dostupnost[class*="dostupnost-stav-"]::before, div.dostupnost[class*="dostupnost-stav-"]::before {
    content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px;
}