/**
 * 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 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;
}


/* ================================================================
   A. FONT & RESET
   ================================================================ */

/* Import fontu DM Sans presunut do promenne.css (na prvni radek) — tady byl
   az za CSS pravidly, takze ho prohlizec podle specifikace IGNOROVAL. */

body, div, form, img, input, textarea, select, button, p, span, a, ul, li, h1, h2, h3, h4, h5, h6 {
    font-family: var(--tpl-font);
}

/* ================================================================
   B3: Ikony bez Font Awesome — inline SVG (data-URI) jako CSS maska.
   Pseudo-prvky (::before/::after) níže místo FA glyfu (font-family
   "Font Awesome 5 Free" + content "\fXXX") používají masku z těchto
   proměnných + background-color: currentColor → barva stále dědí z
   `color` (i hover/přechody fungují). Zdroj = FA Free 5.15.4 svgs
   (CC BY 4.0, viz css/awesome/LICENSE.txt). Odblokuje vypnutí FA (A5). */
:root {
    --tpl-ico-search: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z'/%3E%3C/svg%3E");
    --tpl-ico-user: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M224%20256c70.7%200%20128-57.3%20128-128S294.7%200%20224%200%2096%2057.3%2096%20128s57.3%20128%20128%20128zm89.6%2032h-16.7c-22.2%2010.2-46.9%2016-72.9%2016s-50.6-5.8-72.9-16h-16.7C60.2%20288%200%20348.2%200%20422.4V464c0%2026.5%2021.5%2048%2048%2048h352c26.5%200%2048-21.5%2048-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z'/%3E%3C/svg%3E");
    --tpl-ico-signout: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M497%20273L329%20441c-15%2015-41%204.5-41-17v-96H152c-13.3%200-24-10.7-24-24v-96c0-13.3%2010.7-24%2024-24h136V88c0-21.4%2025.9-32%2041-17l168%20168c9.3%209.4%209.3%2024.6%200%2034zM192%20436v-40c0-6.6-5.4-12-12-12H96c-17.7%200-32-14.3-32-32V160c0-17.7%2014.3-32%2032-32h84c6.6%200%2012-5.4%2012-12V76c0-6.6-5.4-12-12-12H96c-53%200-96%2043-96%2096v192c0%2053%2043%2096%2096%2096h84c6.6%200%2012-5.4%2012-12z'/%3E%3C/svg%3E");
    --tpl-ico-bag: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M352%20160v-32C352%2057.42%20294.579%200%20224%200%20153.42%200%2096%2057.42%2096%20128v32H0v272c0%2044.183%2035.817%2080%2080%2080h288c44.183%200%2080-35.817%2080-80V160h-96zm-192-32c0-35.29%2028.71-64%2064-64s64%2028.71%2064%2064v32H160v-32zm160%20120c-13.255%200-24-10.745-24-24s10.745-24%2024-24%2024%2010.745%2024%2024-10.745%2024-24%2024zm-192%200c-13.255%200-24-10.745-24-24s10.745-24%2024-24%2024%2010.745%2024%2024-10.745%2024-24%2024z'/%3E%3C/svg%3E");
    --tpl-ico-angledown: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20512'%3E%3Cpath%20d='M143%20352.3L7%20216.3c-9.4-9.4-9.4-24.6%200-33.9l22.6-22.6c9.4-9.4%2024.6-9.4%2033.9%200l96.4%2096.4%2096.4-96.4c9.4-9.4%2024.6-9.4%2033.9%200l22.6%2022.6c9.4%209.4%209.4%2024.6%200%2033.9l-136%20136c-9.2%209.4-24.4%209.4-33.8%200z'/%3E%3C/svg%3E");
    --tpl-ico-random: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M504.971%20359.029c9.373%209.373%209.373%2024.569%200%2033.941l-80%2079.984c-15.01%2015.01-40.971%204.49-40.971-16.971V416h-58.785a12.004%2012.004%200%200%201-8.773-3.812l-70.556-75.596%2053.333-57.143L352%20336h32v-39.981c0-21.438%2025.943-31.998%2040.971-16.971l80%2079.981zM12%20176h84l52.781%2056.551%2053.333-57.143-70.556-75.596A11.999%2011.999%200%200%200%20122.785%2096H12c-6.627%200-12%205.373-12%2012v56c0%206.627%205.373%2012%2012%2012zm372%200v39.984c0%2021.46%2025.961%2031.98%2040.971%2016.971l80-79.984c9.373-9.373%209.373-24.569%200-33.941l-80-79.981C409.943%2024.021%20384%2034.582%20384%2056.019V96h-58.785a12.004%2012.004%200%200%200-8.773%203.812L96%20336H12c-6.627%200-12%205.373-12%2012v56c0%206.627%205.373%2012%2012%2012h110.785c3.326%200%206.503-1.381%208.773-3.812L352%20176h32z'/%3E%3C/svg%3E");
    --tpl-ico-angleleft: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20512'%3E%3Cpath%20d='M31.7%20239l136-136c9.4-9.4%2024.6-9.4%2033.9%200l22.6%2022.6c9.4%209.4%209.4%2024.6%200%2033.9L127.9%20256l96.4%2096.4c9.4%209.4%209.4%2024.6%200%2033.9L201.7%20409c-9.4%209.4-24.6%209.4-33.9%200l-136-136c-9.5-9.4-9.5-24.6-.1-34z'/%3E%3C/svg%3E");
    --tpl-ico-angleright: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20512'%3E%3Cpath%20d='M224.3%20273l-136%20136c-9.4%209.4-24.6%209.4-33.9%200l-22.6-22.6c-9.4-9.4-9.4-24.6%200-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6%200-33.9L54.3%20103c9.4-9.4%2024.6-9.4%2033.9%200l136%20136c9.5%209.4%209.5%2024.6.1%2034z'/%3E%3C/svg%3E");
    --tpl-ico-home: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M280.37%20148.26L96%20300.11V464a16%2016%200%200%200%2016%2016l112.06-.29a16%2016%200%200%200%2015.92-16V368a16%2016%200%200%201%2016-16h64a16%2016%200%200%201%2016%2016v95.64a16%2016%200%200%200%2016%2016.05L464%20480a16%2016%200%200%200%2016-16V300L295.67%20148.26a12.19%2012.19%200%200%200-15.3%200zM571.6%20251.47L488%20182.56V44.05a12%2012%200%200%200-12-12h-56a12%2012%200%200%200-12%2012v72.61L318.47%2043a48%2048%200%200%200-61%200L4.34%20251.47a12%2012%200%200%200-1.6%2016.9l25.5%2031A12%2012%200%200%200%2045.15%20301l235.22-193.74a12.19%2012.19%200%200%201%2015.3%200L530.9%20301a12%2012%200%200%200%2016.9-1.6l25.5-31a12%2012%200%200%200-1.7-16.93z'/%3E%3C/svg%3E");
}

/* Inline SVG ikony (nahrazují <i class="fas fa-*"> v hlavičce/patičce). Velikost
   = 1em (dědí z font-size prvku), barva = currentColor (jako dřív FA glyf). */
.tpl-ico {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
}

body {
    margin: 0;                 /* reset defaultního 8px marginu prohlížeče
                                  (jinak bílý rámeček okolo celé stránky) */
    padding: 0;
    background: var(--tpl-body-bg);
    color: var(--tpl-text);
    text-align: left;
    line-height: var(--tpl-line-height);
    font-size: var(--tpl-font-size);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--tpl-link);
    text-decoration: none;
    transition: color var(--tpl-transition);
}

a:hover {
    color: var(--tpl-link-hover);
}

* {
    box-sizing: border-box;
}

/* ================================================================
   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;
}

/* ===== Našeptávač vyhledávání (jQuery UI autocomplete) — Latte 2026-001 =====
   Jádro (naseptavac_zbozi) vrací výsledky přes jQuery UI autocomplete a ten je
   renderuje do <ul.ui-autocomplete> připojeného na <body>. BEZ stylů byl seznam
   PRŮHLEDNÝ přes celou stránku a nečitelný. Dáme mu pozadí, stín, čitelné položky
   a strop výšky se scrollem. Počet omezen na 10 v _page.php (response splice,
   guard $useLatte). Selektory bez #hlavicka (ul je na <body>). */
.ui-autocomplete.ui-menu {
    position: absolute;                 /* top/left/width nastaví jQuery UI inline */
    z-index: 100000;                    /* nad hlavičkou i obsahem */
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 6px 0 0;
    padding: 6px;
    list-style: none;
    background: var(--tpl-card-bg);
    border: 1px solid #e6e6e6;
    border-radius: var(--tpl-border-radius);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
    font-family: var(--tpl-font, inherit);
}
.ui-autocomplete .ui-menu-item { list-style: none; margin: 0; }
/* Položka: jQuery UI 1.12/1.13 = .ui-menu-item-wrapper, starší = > a */
.ui-autocomplete .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: none !important;
    border-radius: var(--tpl-border-radius);
    color: #000;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
}
/* Text položky (název i „Kategorie:") vždy černý — přebít případný světlejší
   jQuery UI styl na vnořeném <span>. (.ui-autocomplete je na <body>.) */
.ui-autocomplete .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item-wrapper span,
.ui-autocomplete .ui-menu-item > a span {
    color: #000 !important;
}
/* Mini obrázek (přidá se do renderu) — pevný rozměr, aby text neposkakoval */
.ui-autocomplete .ui-menu-item img {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-surface-2);
}
/* Hover / aktivní (klávesnice) → světlé hover pozadí palety (dřív natvrdo žlutá
   + tmavý text; po přechodu na tmavou --tpl-primary by text zmizel) */
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-menu-item > a.ui-state-focus,
.ui-autocomplete .ui-menu-item > a:hover {
    background: var(--tpl-menu-hover-bg) !important;
    color: var(--tpl-menu-hover-text) !important;
    margin: 0;
}

/* --- 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);
}

/* Fallback pro rozbité obrázky — JS (_body_all.latte) přidá .tpl-img-broken a nastaví
   placeholder (SVG data-URI: šedé pole + jemná ikona). bg-color vyplní případný
   letterbox od object-fit:contain, takže je to bezešvé v jakémkoliv poměru stran. */
/* Skip-link „Přeskočit na obsah" (a11y, WCAG 2.4.1) — schovaný, viditelný na focus. */
.tpl-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100001;
    background: #333;
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 var(--tpl-border-radius) 0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.tpl-skip-link:focus {
    left: 0;
}
/* Mobil: dostatečně velké tap-targety u tlačítek (WCAG 2.5.5, ~44px). */
@media (max-width: 768px) {
    body button,
    body input[type="submit"],
    body input[type="button"],
    body .button {
        min-height: 44px;
    }
    /* Inputy vedle tlačítek musí mít STEJNOU výšku jako tlačítka, jinak tlačítko
       vyčnívá (bylo 44px vs input ~40px). Stejná touch-target výška 44px. */
    body input[type="text"],
    body input[type="email"],
    body input[type="tel"],
    body input[type="password"],
    body input[type="number"],
    body input[type="search"],
    body select {
        min-height: 44px;
    }
}

img.tpl-img-broken {
    background-color: var(--tpl-card-bg) !important;
    /* IKONA jako fixní background (ne škálovaný obsah <img>) — jinak object-fit:contain
       roztáhne SVG ikonu přes celou plochu (velký obrázek detailu = obří ikona).
       min(72px, 50%) = drží rozumnou velikost i ve velkém i v malém boxu. */
    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") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: min(72px, 50%) !important;
    object-fit: contain !important;
}
/* 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;
}
/* Ikony dopravy/plateb — fallback (kamion/karta z JS) BEZ bílého pole, jen glyf
   (ostatní ikony metod taky nemají box, ať to ladí). */
td.dopravy_img img.tpl-img-broken,
td.platby_img img.tpl-img-broken {
    background: transparent !important;
}
/* 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;
}

/* === Upsell „doporučujeme přikoupit" (v „Přidáno do košíku" modalu i na stránce
   košíku) — .zbozi_v_kosiku_doporucit → .polozka_prikoupit. Zboží s variantami má
   i tady v jádru jen odkaz „Varianty" na detail; sjednotíme ho na stejné zelené
   „Koupit" CTA jako ve výpisu (klik otevře modal s výběrem variant — JS v
   _body_all.latte; bez JS odkaz dál vede na detail = fallback). Jednoduché zboží
   už má vlastní submit „Koupit". */
.polozka_prikoupit > a.vice_polozek {
    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);
}
.polozka_prikoupit > a.vice_polozek::after {
    content: "Koupit";
    font-size: 13px;
}
.polozka_prikoupit > a.vice_polozek:hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover) !important;
}

/* === 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;
}

/* === Modal s konfigurací zboží (otevírá se z výpisu pro zboží s modifikací) === */
.tpl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;            /* JS přepíná na flex */
    align-items: flex-start;
    justify-content: center;
    z-index: 10000;
    padding: 40px 16px;
    overflow-y: auto;
}
.tpl-modal {
    background: var(--tpl-card-bg);
    border-radius: var(--tpl-border-radius);
    max-width: 520px;
    width: 100%;
    padding: 24px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    /* margin:auto ve flex overlay = vycentrování SVISLE i vodorovně; když je modal
       vyšší než viewport (dlouhý konfigurátor), auto-marginy = 0 → scrolluje se
       od kraje bez ořezu (align-items:center by horní část oříznul). */
    margin: auto;
}
.tpl-modal-close {
    position: absolute;
    top: 8px;
    right: 14px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #888;
}
.tpl-modal-close:hover {
    color: #000;
}
.tpl-modal-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 30px 16px 0;
    color: var(--tpl-text);
}
.tpl-modal-loading,
.tpl-modal-err {
    padding: 20px 0;
    color: var(--tpl-text-light);
}

/* Uvnitř modalu — schovat bloky detailu, které do rychlé konfigurace nepatří
   (kalkulačky, porovnávač, chci slevu, přílohy, termín doručení, přepočet).
   Necháváme jen: varianty, příplatky, parametry, množství, Přidat do košíku. */
.tpl-modal-body .financni_kalkulacky,
.tpl-modal-body #zbozi_detail_porovnavac,
.tpl-modal-body .porovnavac_zbozi,
.tpl-modal-body .chci_slevu,
.tpl-modal-body .zbozi_prilohy,
.tpl-modal-body .datum_doruceni,
.tpl-modal-body #prepocet {
    display: none;
}

/* Tlačítko „Přidat do košíku" v modalu — zelené CTA jako na detailu.
   Detailové zelené pravidlo je scoped na #detail_zbozi, mimo něj (v modalu)
   nepadne, proto ho zopakujeme scoped na .tpl-modal-body. */
.tpl-modal-body div.tlacitka-pocet input[type="submit"],
.tpl-modal-body input.button_konverzni {
    background: var(--tpl-cta-bg) !important;
    color: var(--tpl-cta-text) !important;
    border: none !important;
    border-radius: var(--tpl-border-radius) !important;
    padding: 0 24px !important;
    height: 48px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer;
    box-shadow: none;
    margin-left: auto;   /* tlačítko „Přidat do košíku" doprava */
}
.tpl-modal-body div.tlacitka-pocet input[type="submit"]:hover,
.tpl-modal-body input.button_konverzni:hover {
    background: var(--tpl-cta-bg-hover) !important;
    color: var(--tpl-cta-text-hover) !important;
}

/* „?" otazníček příplatků v modalu — jemný (aby nelekal), s vysvětlivkou jako
   tooltip při najetí. Text vysvětlivky doplní JS do data-tip z info řádku.
   (Emoji ❓ z bloku „Nejste si jistí" maže JS — uživatel ho nechce.) */
.tpl-modal-body td.nazev_priplatku_info {
    cursor: default;
}
.tpl-modal-body td.nazev_priplatku i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    border: 1px solid #d0d0d0;
    border-radius: 50%;
    color: #9aa0a6 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    font-family: var(--tpl-font) !important;   /* ne FA */
    font-style: normal;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    transition: border-color var(--tpl-transition), color var(--tpl-transition);
}
/* „?" nezávislé na FontAwesome — FA glyph se v modalu nevykresloval (prázdný
   ::before), tak ho dáme přes vlastní content normálním fontem. */
.tpl-modal-body td.nazev_priplatku i::before {
    content: "?" !important;
    font-family: var(--tpl-font) !important;
    font-weight: 600;
}
.tpl-modal-body td.nazev_priplatku i.tpl-help {
    position: relative;
}
.tpl-modal-body td.nazev_priplatku i.tpl-help:hover {
    color: var(--tpl-primary, #46a058) !important;
    border-color: var(--tpl-primary, #46a058);
}
.tpl-modal-body td.nazev_priplatku i.tpl-help:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    top: 150%;
    width: 220px;
    background: #333;
    color: #fff;
    padding: 8px 11px;
    border-radius: var(--tpl-border-radius);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    font-family: var(--tpl-font);
    white-space: normal;
    text-align: left;
    z-index: 20;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
/* Inline info řádky příplatků v modalu skryté natvrdo — vysvětlivku ukazuje
   plovoucí tooltip výše; priplatek_info_prepnout by jinak roztáhl layout. */
.tpl-modal-body tr.info_priplatek {
    display: none !important;
}

/* Comboboxy (selecty) v modalu — zaoblení a custom šipka jako jinde
   (stejně jako select.tpl-lokalita-select v objednávce). Nativní select má
   vpravo systémové tlačítko se čtvercovým rohem a šipku nalepenou v rohu;
   appearance:none to sjednotí (oba rohy zaoblené) a šipku odsadíme od kraje. */
.tpl-modal-body select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    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-right: 36px;
    width: 100%;
    box-sizing: border-box;
}

/* Všechny vstupy příplatků/parametrů v modalu stejně velké (plná šířka).
   Tabulka zafixovaná, sloupec popisků pevný → hodnotové buňky (a tím selecty
   i textarey) mají shodnou šířku. Množstevní stepper (#pocet) se netýká. */
.tpl-modal-body table.zbozi_priplatky,
.tpl-modal-body table.vyber_parametru {
    width: 100%;
    table-layout: fixed;
}
.tpl-modal-body table.zbozi_priplatky td.nazev_priplatku,
.tpl-modal-body table.vyber_parametru td:first-child {
    width: 42%;
}
/* „?" napověda drží na řádku s labelem příplatku (nezalomí se sama na nový řádek);
   jen zbozi_priplatky — text parametr má dlouhý popisek, ten se zalamovat musí. */
.tpl-modal-body table.zbozi_priplatky td.nazev_priplatku {
    white-space: nowrap;
}
/* Tabulky příplatků/parametrů v modalu bez vnitřního rámečku (jádrový grid #eee) —
   ať pole nevypadají „zaškatulkovaná"; čistý vzhled stejně jako u selectu. */
.tpl-modal-body table.zbozi_priplatky,
.tpl-modal-body table.zbozi_priplatky td,
.tpl-modal-body table.zbozi_priplatky th,
.tpl-modal-body table.vyber_parametru,
.tpl-modal-body table.vyber_parametru td,
.tpl-modal-body table.vyber_parametru th {
    border: 0 !important;   /* hranatý #eee box okolo celého bloku pryč (dává ho jádro) */
}
/* Textarea (text příplatek/parametr) přes celou šířku pod popiskem; stejný border
   (#ddd) a zaoblení (10px) jako select. text-align:left = psaný text zůstává vlevo
   (jinak by ho text-align:right z rodičovské buňky táhl doprava). */
.tpl-modal-body table.zbozi_priplatky textarea,
.tpl-modal-body table.vyber_parametru textarea {
    width: 100%;
    display: block;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    color: var(--tpl-text, #333);
    text-align: left;
    margin-top: 6px;
}
/* Popisek nad textareou (název + hodnota parametru — skládá jádro, text z DB):
   stejný font jako label nad ním („Značení klíče") = ponecháme zděděný base
   (16px / --tpl-text), zarovnaný doleva nad full-width textareu. */
.tpl-modal-body table.zbozi_priplatky td:has(> textarea),
.tpl-modal-body table.vyber_parametru td:has(> textarea) {
    text-align: left;
}
/* Zarovnání polí s řádkem tlačítka: buňky <td> příplatků/parametrů měly boční
   padding (10px), takže select/textarea byly užší a NElícovaly s řádkem
   stepper+„Přidat do košíku" (ten je přímo ve formu, přes celou šířku modalu).
   Sundáme boční padding buněk → select, textarea, stepper i tlačítko mají STEJNÉ
   levé i pravé okraje. Svislé odsazení (8px) řádků zůstává. */
.tpl-modal-body table.vyber_parametru td,
.tpl-modal-body table.zbozi_priplatky td {
    padding-left: 0;
    padding-right: 0;
}

/* „V košíku lze nahrát přílohy" — vycentrovat + odsadit od tlačítek (v modalu). */
.tpl-modal-body div.info_nahrat_prilohy {
    text-align: center;
    margin-top: 22px;
}

/* Potvrzovací dialog po přidání do košíku (nahradí obsah modalu) —
   „Pokračovat v nákupu" (sekundární) / „Přejít do košíku" (zelené CTA). */
.tpl-cart-confirm {
    text-align: center;
    padding: 10px 0 6px;
}
.tpl-cart-confirm-icon {
    width: 56px;
    height: 56px;
    line-height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    font-size: 30px;
    font-weight: 700;
}
.tpl-cart-confirm-text {
    font-size: 16px;
    color: var(--tpl-text);
    margin-bottom: 22px;
}
.tpl-cart-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;   /* odsazení od souhrnu/upsellu nad tlačítky — bez toho se
                           při prázdném košíku (bez doporučených) lepí na box nad nimi */
}
.tpl-cart-confirm-actions .tpl-cart-continue,
.tpl-cart-confirm-actions .tpl-cart-goto {
    height: 46px;
    padding: 0 22px;
    border-radius: var(--tpl-border-radius);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-family: var(--tpl-font);
    text-decoration: none;
    box-sizing: border-box;
    transition: background var(--tpl-transition);
    /* Obě tlačítka roztažená přes celou šířku → vnější okraje lícují s obsahem
       modalu (náhled košíku, sloupec „Koupit"). Text drží na JEDNOM řádku
       (nowrap + min-width dle obsahu = tlačítko nikdy nezúží text pod jeden řádek).
       Na úzku (mobil) se zabalí pod sebe — zalomí se TLAČÍTKA, ne text. */
    flex: 1 1 0;
    min-width: max-content;
    white-space: nowrap;
}
.tpl-cart-confirm-actions .tpl-cart-continue {
    background: var(--tpl-surface-3);
    color: var(--tpl-text);
}
.tpl-cart-confirm-actions .tpl-cart-continue:hover {
    background: #e6e6e6;
}
.tpl-cart-confirm-actions .tpl-cart-goto {
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
}
.tpl-cart-confirm-actions .tpl-cart-goto:hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover);
}

/* === Migrace addcart: náhled košíku + upsell „doporučujeme přikoupit" v potvrzovacím
   modalu (sklizeno z jádrového #zbozi_v_kosiku). Levé zarovnání proti centrovanému confirmu. === */
.tpl-cart-preview,
.tpl-cart-upsell {
    text-align: left;
    margin-top: 18px;
}
.tpl-cart-preview ul {
    list-style: none;
    margin: 0;
    padding: 12px 14px;
    background: var(--tpl-surface-2);
    border-radius: var(--tpl-border-radius);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 18px;
    font-size: 14px;
}
.tpl-cart-preview li,
.tpl-cart-preview li span { margin: 0; color: var(--tpl-text); }
.tpl-cart-preview li.vcetne_dph,
.tpl-cart-preview li.vcetne_dph span,
.tpl-cart-preview li.vcetne_dph .kosik_cena_s_dph { font-weight: 700; color: var(--tpl-text); }
.tpl-cart-preview li.jit_do_kosiku { margin-left: auto; }
.tpl-cart-preview li.jit_do_kosiku a { color: var(--tpl-cta-bg); font-weight: 600; text-decoration: none; }
.tpl-cart-preview li.jit_do_kosiku a:hover { text-decoration: underline; }

.tpl-cart-upsell h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--tpl-text);
}
.tpl-cart-upsell .polozka_prikoupit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--tpl-surface-3);
}
.tpl-cart-upsell .polozka_prikoupit_foto { order: -1; flex: 0 0 auto; }
.tpl-cart-upsell .polozka_prikoupit_foto img { width: 44px; height: auto; display: block; border-radius: var(--tpl-radius-sm); }
.tpl-cart-upsell .polozka_prikoupit_nazev { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; }
.tpl-cart-upsell .polozka_prikoupit_nazev a { color: var(--tpl-text); text-decoration: none; }
.tpl-cart-upsell .polozka_prikoupit_nazev a:hover { text-decoration: underline; }
.tpl-cart-upsell .polozka_prikoupit_cena {
    flex: 0 0 auto;
    min-width: 72px;          /* pevný cenový sloupec → ceny (i široké „2 590 Kč") zarovnané
                                 vpravo do sloupce, ne ragged; blok cena+tlačítko = čistá mřížka */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 13px;
    white-space: nowrap;
}
.tpl-cart-upsell .polozka_prikoupit_cena form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.tpl-cart-upsell .polozka_prikoupit_cena input[type=text],
.tpl-cart-upsell .polozka_prikoupit_cena input[type=number] {
    width: 46px; height: 34px; text-align: center; box-sizing: border-box;
    border: 1px solid var(--tpl-surface-3); border-radius: var(--tpl-border-radius);
}
/* Jednotná velikost „Koupit" v upsellu — simple <input submit> i variantní
   <a.vice_polozek> MUSÍ mít stejné rozměry (dřív byl variantní odkaz větší →
   „náhodně jedno tlačítko větší"). Fixní výška + min-width + padding pro OBA typy
   → nikdy se nerozjede. Zarovnané vpravo na jednom řádku s cenou. */
/* Simple form (koupit_zbozi) je přímý potomek .polozka_prikoupit (ne v _cena) — je to
   flex položka řádku; sevřít ji kolem tlačítka. */
.tpl-cart-upsell .polozka_prikoupit > form { margin: 0; display: inline-flex; flex: 0 0 auto; }
.tpl-cart-upsell .polozka_prikoupit > form input[type=submit],
.tpl-cart-upsell .polozka_prikoupit > a.vice_polozek {
    box-sizing: border-box;
    display: inline-block;
    height: 34px;
    min-width: 92px;
    padding: 0 16px;
    line-height: 34px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    border: none;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text) !important;
    cursor: pointer;
    flex: 0 0 auto;
}
/* variantní odkaz: skrýt původní „Varianty" text, ::after (z pravidla výše) doplní „Koupit" */
.tpl-cart-upsell .polozka_prikoupit > a.vice_polozek { font-size: 0; text-decoration: none; }
.tpl-cart-upsell .polozka_prikoupit > form input[type=submit]:hover,
.tpl-cart-upsell .polozka_prikoupit > a.vice_polozek:hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover) !important;
}

/* Zaoblené rohy OTEVŘENÉHO dropdownu selectu — progressive enhancement přes
   CSS Customizable Select (appearance:base-select + ::picker(select)).
   Funguje v Chromium 135+ (Chrome/Edge/Opera/Samsung). Firefox a Safari/iOS
   to neumí → čistý fallback na nativní select (popup je tam OS-rendered a
   zaoblit nejde; nic se nerozbije). Ověřeno: caniuse ~66 % podpora 1/2026. */
@supports (appearance: base-select) {
    .tpl-modal-body select,
    .tpl-modal-body select::picker(select) {
        appearance: base-select;
    }
    /* Zavřený ovladač v base-select režimu: base-select kreslí šipku přes
       ::picker-icon, tak schováme náš SVG arrow (jinak by byly dvě). */
    .tpl-modal-body select {
        background-image: none;
        padding-right: 14px;
    }
    .tpl-modal-body select::picker-icon {
        color: #888;
        transition: rotate 0.2s;
    }
    .tpl-modal-body select:open::picker-icon {
        rotate: 180deg;
    }
    /* Otevřený popup = ::picker(select) → zaoblit (to chtěl uživatel). */
    .tpl-modal-body select::picker(select) {
        border: 1px solid #d9d9d9;
        border-radius: var(--tpl-border-radius);
        padding: 4px;
        background: var(--tpl-card-bg);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        overflow: hidden;
    }
    .tpl-modal-body select option {
        border-radius: var(--tpl-border-radius);
        padding: 8px 10px;
    }
}

/* Stepper množství v modalu — stejný jako na detailu (− [1] +), bez nativních
   šipek number inputu (detailové pravidlo je scoped na #detail_zbozi, v modalu
   nepadne). −/+ se přebindují v JS na vlastní input modalu (kvůli duplicitnímu
   id="pocet" na výpisu). */
.tpl-modal-body div.tlacitka-pocet {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}
/* „Hezký" stepper JAKO V KOŠÍKU: rámeček-wrapper .tpl-stepper-frame (jediný border +
   radius + overflow:hidden), uvnitř PLOCHÁ #fafafa tlačítka BEZ vlastního borderu.
   Přesně jako .pocet_kosik_ramecek v košíku. DŮVOD: segmentové bordery (border-right:none
   na −, border-left:none na +) Firefox renderoval špatně (švy/mezery) — frame je FF-safe,
   protože kreslí jen jeden vnější border a tlačítka žádný. −/input/+ do frameu obaluje
   JS v openModal (viz _body_all.latte). + FF resety: appearance:none, ::-moz-focus-inner. */
.tpl-modal-body div.tlacitka-pocet .tpl-stepper-frame {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    overflow: hidden;
    background: var(--tpl-card-bg);
}
.tpl-modal-body div.tlacitka-pocet .tpl-stepper-frame input.zmenit_pocet {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--tpl-surface-2);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    color: var(--tpl-text);
    font-family: var(--tpl-font);
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: background var(--tpl-transition);
}
.tpl-modal-body div.tlacitka-pocet .tpl-stepper-frame input.zmenit_pocet::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.tpl-modal-body div.tlacitka-pocet .tpl-stepper-frame input.zmenit_pocet:hover {
    background: var(--tpl-surface-3);
}
.tpl-modal-body div.tlacitka-pocet .tpl-stepper-frame input#pocet,
.tpl-modal-body div.tlacitka-pocet .tpl-stepper-frame input[name="pocet"] {
    width: 48px;
    height: 40px;
    text-align: center;
    border: none;
    background: var(--tpl-surface-2);
    font-size: 16px;
    font-weight: 600;
    border-radius: 0;
    -moz-appearance: textfield;
    appearance: textfield;
    font-family: var(--tpl-font);
    box-shadow: none;
    color: var(--tpl-text);
    padding: 0;
}
.tpl-modal-body div.tlacitka-pocet .tpl-stepper-frame input#pocet::-webkit-outer-spin-button,
.tpl-modal-body div.tlacitka-pocet .tpl-stepper-frame input#pocet::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Fallback (kdyby JS wrapper neproběhl) — aspoň základní rámeček na tlačítkách. */
.tpl-modal-body div.tlacitka-pocet > input.zmenit_pocet {
    height: 40px;
    border: 1px solid #ddd;
    background: var(--tpl-surface-2);
    box-shadow: none;
}
.tpl-modal-body div.tlacitka-pocet span.jednotka {
    font-size: 14px;
    color: var(--tpl-text-light);
    margin-left: 12px;
}

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;
}

/* === Filtr jako modal dialog (stejný styl jako Koupit modal) ===
   Jádrové tlačítko .zobrazit_filtraci ("Filtrovat zboží") teď volá
   window.filtrovat_zbozi = openFilterModal (z _body_all.latte).
   Inline #kategorie_filtry skrytý; otevírá se jen přes modal. */

/* Uvnitř modalu — filter dostane víc prostoru + hezčí padding */
.tpl-modal-body #kategorie_filtry {
    background: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: 0;
    text-align: left;
}
.tpl-modal-body #kategorie_filtry * {
    text-align: left;   /* override .center wrapper i inline centering */
}
.tpl-modal-body #kategorie_filtry h2 {
    display: none;   /* nadpis "Filtry" už je v .tpl-modal-title */
}
/* Skrýt prázdné wrapery co by kreslily zbytečnou mezeru mezi sekcemi */
.tpl-modal-body #kategorie_filtry > div:empty,
.tpl-modal-body #kategorie_filtry > br,
.tpl-modal-body #kategorie_filtry > .form_fulltext_kategorie:empty {
    display: none !important;
}
/* Filtr Potvrdit tlačítko — bez glow shadow (přebijí obecný modal styl) */
.tpl-modal-body #kategorie_filtry input.potvrdit_filtr {
    box-shadow: none !important;
}
.tpl-modal-body #kategorie_filtry input.potvrdit_filtr:focus,
.tpl-modal-body #kategorie_filtry input.potvrdit_filtr:focus-visible {
    box-shadow: none !important;
    outline: none;
}
.tpl-modal-body #kategorie_filtry h3,
.tpl-modal-body #kategorie_filtry legend {
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0;
    background: transparent !important;
    border-bottom: 1px solid var(--tpl-card-border);
    /* Šipka indikující open/close state — pouze vizuální */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}
.tpl-modal-body #kategorie_filtry h3::after,
.tpl-modal-body #kategorie_filtry legend::after {
    content: "+";
    font-size: 20px;
    font-weight: 400;
    color: var(--tpl-text-light);
    transition: transform 0.2s;
    line-height: 1;
}
/* Otevřený stav (JS nastavuje data-tpl-open="1") — šipka se změní na − */
.tpl-modal-body #kategorie_filtry h3[data-tpl-open="1"]::after,
.tpl-modal-body #kategorie_filtry legend[data-tpl-open="1"]::after {
    content: "−";
    color: var(--tpl-primary);
}
/* Fieldset uvnitř modalu — resetovat browser default styl */
.tpl-modal-body #kategorie_filtry fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: block;
}
.tpl-modal-body #kategorie_filtry fieldset > div.filtrace_multi_fielset {
    padding: 8px 0 8px 20px;
}
/* Expanded items — indent doprava */
.tpl-modal-body div.filtrace_checkboxes_2 {
    padding: 8px 0 8px 20px;
}
.tpl-modal-body div.filtry_buttons {
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-start;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--tpl-card-border);
}
/* Text tlačítek „Zrušit filtr" / „Potvrdit" vycentrovat — obecné pravidlo je
   tlačí doleva (vyhrálo i nad neš-important center), proto modal-scoped +
   !important, aby spolehlivě přebilo. */
.tpl-modal-body div.filtry_buttons input.zrusit_filtr,
.tpl-modal-body div.filtry_buttons input.potvrdit_filtr {
    text-align: center !important;
}
/* Tlačítka filtru ve stylu lišty řazení/filtru (navy, ne žlutá):
   Zrušit = navy outline (jako „Řazení"/„Filtrovat"), Potvrdit = navy filled (primární akce). */
.tpl-modal-body div.filtry_buttons input.zrusit_filtr {
    background: var(--tpl-card-bg) !important;
    border: 1px solid var(--tpl-primary) !important;
    color: var(--tpl-primary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 11px 18px !important;
    border-radius: var(--tpl-border-radius) !important;
}
.tpl-modal-body div.filtry_buttons input.potvrdit_filtr {
    background: var(--tpl-primary) !important;
    border: 1px solid var(--tpl-primary) !important;
    color: var(--tpl-primary-text) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 11px 18px !important;
    border-radius: var(--tpl-border-radius) !important;
}
.tpl-modal-body div.filtry_buttons input.potvrdit_filtr:hover {
    filter: brightness(1.12);
}

/* Facetové zašednutí filtru (JS: _body_all.latte) — hodnota, jejíž kombinace
   s aktuálním výběrem nemá žádný produkt, zůstává VIDITELNÁ (na přání), jen
   zašedlá a neklikací. */
.tpl-modal-body .tpl-facet-off {
    opacity: .35;
    transition: opacity var(--tpl-transition, .15s ease);
}
.tpl-modal-body .tpl-facet-off,
.tpl-modal-body .tpl-facet-off input,
.tpl-modal-body .tpl-facet-off label {
    cursor: not-allowed;
}
/* Indikace, kdy se probingem dopočítává dostupnost kombinací */
#kategorie_filtry.tpl-facet-loading::before {
    content: "Počítám dostupnost kombinací…";
    display: block;
    font-size: 11px;
    color: var(--tpl-text-light, #777);
    text-align: center;
    padding: 4px 0 8px;
}
/* Skrýt X close v každé sekci — zavírá se klikem na h3 header */
.tpl-modal-body span.filtrace_multi_close {
    display: none !important;
}
/* Range/slider řádek + "pouze skladem" checkbox — taky vlevo */
.tpl-modal-body #kategorie_filtry div.center {
    text-align: left !important;
}
/* Rozšířit modal pro filter (víc obsahu než u Koupit) */
.tpl-modal-overlay:has(#kategorie_filtry) .tpl-modal {
    max-width: 640px;
}

/* === Horní řádek filtru: Pouze skladem (vlevo, samostatně) ===
   Price block je samostatně pod topbar-em (Od + Do + slider). */
.tpl-modal-body div.tpl-filtr-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--tpl-card-border);
    margin-bottom: 4px;
}
.tpl-modal-body div.tpl-pouze-skladem-wrap {
    padding: 0;
}
.tpl-modal-body div.tpl-pouze-skladem-wrap span.filtry_parametr {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: 14px;
    color: var(--tpl-text);
    font-weight: 500;
    cursor: pointer;
}
.tpl-modal-body div.tpl-pouze-skladem-wrap span.filtry_parametr label {
    order: 1;
    cursor: pointer;
}
.tpl-modal-body div.tpl-pouze-skladem-wrap span.filtry_parametr input[type="checkbox"] {
    order: 2;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--tpl-primary);
    cursor: pointer;
    flex-shrink: 0;
}
/* Price blok (samostatný řádek, full width) */
.tpl-modal-body .filtrace-range.filtrace-range-cena {
    padding: 8px 0 4px;
    border-bottom: 1px solid var(--tpl-card-border);
    margin-bottom: 4px;
}
.tpl-modal-body .filtrace-range.filtrace-range-cena .filtry_nazev_parametru {
    display: none;   /* schovat "cena:" textovku */
}

/* Cena panel — bez border-bottom (má vlastní pod ním) */
.tpl-modal-body .filtrace-range.filtrace-range-cena {
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--tpl-card-border);
    margin-bottom: 4px;
}
.tpl-modal-body .filtrace-range.filtrace-range-cena .submit_zrusit_filtry {
    display: none;   /* "Zrušit filtr" tlačítko je dole (filtry_buttons) */
}
.tpl-modal-body .filtrace-range.filtrace-range-cena span.filtry_nazev_parametru {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--tpl-text);
    padding: 8px 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;
}

/* === Tap-cíle: zvětšení pro pohodlné klikání prstem na mobilu === */
/* Košík: tlačítka stepperu −/+ na 40px (bylo 32px), ať se dobře trefí prstem
   a sedí s polem množství (40px). !important kvůli jádrovému CSS. */
body.sekce_kosik div.pocet_kosik_ramecek input.button.zmenit_pocet {
    width: 40px !important;
    height: 40px !important;
}
/* Breadcrumb odkazy: větší klikací plocha (byly ~16×20px). */
#in_body .Breadcrumb a {
    display: inline-block;
    padding: 6px 4px;
}

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;
}

/* ================================================================
   M. NÁKUPNÍ KOŠÍK (body.sekce_kosik)
   ================================================================ */

/* Skrýt nefunkční „Stáhnout PDF cenové nabídky" (a#kv-pdf-offer-link,
   href=javascript:void(0) — shop custom prvek, stejně nefunguje). */
body.sekce_kosik #kv-pdf-offer-link,
body.sekce_kosik .kv-pdf-offer-link {
    display: none !important;
}

/* 1. Vlajka u "Lokalita pro doručení" — v jádru je <img class="lokalita_ikona_modul">
      bez velikosti, takže obrázek z css/flags-400/*.png se vykreslí ve plné
      velikosti (400 px) a zabere celé okno. Zmenšit na ikonu. */
body.sekce_kosik img.lokalita_ikona_modul,
body.sekce_kosik form#frm_lang img.lokalita_ikona,
body.sekce_kosik form#frm_lang img.lokalita_ikona_modul {
    max-height: 22px !important;
    width: auto !important;
    max-width: 36px !important;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--tpl-radius-sm);
    margin: 0 4px;
}

/* 2. Box jazyk/měna v košíku skrytý — překáží a duplikuje funkce, které
   jsou v hlavičce. Lokalitu uživatel volí přes picker pills níže. */
body[class*="sekce_kosik"] div.vyber_jazyka_meny {
    display: none !important;
}

/* 3. Slevový kupon — přesunout DOLŮ. Hlavní obal sekce je #sekce. Uděláme
      z něj flex sloupec a kupon dostane order: 95 → zůstane viset až
      za položkami / souhrnem. */
body.sekce_kosik div#sekce {
    display: flex;
    flex-direction: column;
}

body.sekce_kosik form#frmkupony {
    order: 95;
    background: var(--tpl-surface-2);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    padding: 14px 18px;
    margin: 24px auto 12px;
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
}

body.sekce_kosik form#frmkupony fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

body.sekce_kosik form#frmkupony legend {
    font-size: 14px;
    font-weight: 600;
    color: var(--tpl-text-light);
    padding: 0;
    margin-bottom: 10px;
}

body.sekce_kosik div.kosik_kupon {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

body.sekce_kosik form#frmkupony input[type="text"],
body.sekce_kosik form#frmkupony input.input_text {
    flex: 1 1 200px;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    font-size: 14px;
    box-sizing: border-box;
    background: var(--tpl-card-bg);
}

body.sekce_kosik form#frmkupony input[type="submit"] {
    flex: 0 0 auto;
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    border: none;
    padding: 9px 18px;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}

body.sekce_kosik form#frmkupony input[type="submit"]:hover {
    background: var(--tpl-primary-dark);
}

body.sekce_kosik table.kosik_kupony {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13px;
}

body.sekce_kosik table.kosik_kupony td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--tpl-card-border);
}

/* Drobná úprava nadpisu košíku (yellow accent line) */
body.sekce_kosik h1 {
    margin: 12px 0 8px;
    padding: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    border-bottom: 3px solid var(--tpl-primary);
    /* nadpis vlevo, info dopravy zdarma vpravo nahoře */
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    position: relative;
}
/* ── Doprava zdarma jako HORNÍ LINIE (progress bar pod nadpisem „Nákupní košík")
   Místo žlutého border-bottomu dvoubarevná linie: žlutá = splněno, šedá = zbývá.
   Data z (skryté) .tpl-dz-bar, plní se v tplSyncDzBar(). ── */
body.sekce_kosik h1.tpl-dz-on {
    border-bottom-color: transparent !important;   /* původní žlutou linku schovat */
}
body.sekce_kosik .tpl-dz-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;                    /* přesně na místě 3px border-bottomu */
    height: 3px;
    background: #dcdcdc;             /* nedokončeno = šedá */
    border-radius: var(--tpl-radius-sm);
    overflow: hidden;
    display: block;
}
body.sekce_kosik h1:not(.tpl-dz-on) .tpl-dz-line { display: none; }
body.sekce_kosik .tpl-dz-line-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--tpl-primary);  /* splněno = žlutá */
    border-radius: var(--tpl-radius-sm);
    transition: width .4s ease;
}
/* info vpravo nahoře (na řádku s nadpisem) */
body.sekce_kosik .tpl-dz-info {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--tpl-text);
    align-self: center;
}
body.sekce_kosik .tpl-dz-info-cil { color: #999; font-weight: 400; }
body.sekce_kosik .tpl-dz-info-free { color: var(--tpl-stav-skladem); }
/* MOBIL: info „doprava zdarma" (nowrap) se nevejde vedle nadpisu → uříznuté.
   Nadpis na svůj řádek, info pod něj přes celou šířku, smí zalomit. */
@media (max-width: 768px) {
    body.sekce_kosik h1 {
        flex-wrap: wrap;
        gap: 4px 12px;
        font-size: 20px;
    }
    body.sekce_kosik .tpl-dz-info {
        flex: 1 0 100%;
        white-space: normal;
        font-size: 12px;
        align-self: flex-start;
        text-align: left;
    }
}

/* Krok 1 (nová předloha 2026-06): celý výběr lokality pryč z košíku.
   Lokalita se vybírá až na další stránce (objednávka — doprava závisí na ní).
   Skrývá:
     .kosik_lokalita_info — banner "Lokalita pro doručení: [flag] Změnit"
     .vyber_lokality      — celý KosikVyberLokality picker (vlajky/výběr) */
body.sekce_kosik div.kosik_lokalita_info,
body.sekce_kosik div.vyber_lokality {
    display: none !important;
}

/* Krok 7 (úklid 2026-06): skrýt prvky, které předloha nemá.
   - H2 "Vyberte lokalitu pro doručení" (první child #sekce)
   - .coupon-strip "Uplatnit slevový kód" (text-odkaz + bežová lišta)
   - .vyber_jazyka_meny (bílý div nad košíkem)
   "Zpět k nakupování" se přesouvá JS-em pod horní lištu nad H1 — ne skrytí. */
body.sekce_kosik div#sekce > h2:first-of-type {
    display: none !important;
}
body.sekce_kosik div.coupon-strip {
    display: none !important;
}
body.sekce_kosik div.vyber_jazyka_meny {
    display: none !important;
}

/* Banner "Související produkty a služby (3)" — bežová lišta pod "Uplatnit slevový kód".
   Element je <a class="kosik_doporucujeme_zprava">, ne <div id="...">. */
body.sekce_kosik a.kosik_doporucujeme_zprava,
body.sekce_kosik div#kosik_doporucujeme_zprava,
body.sekce_kosik .kosik_doporucujeme_zprava {
    display: none !important;
}

/* Poznámka k objednávce + textarea — předloha nemá. Skrýt celý kontejner. */
body.sekce_kosik div.poznamka_k_objednavce {
    display: none !important;
}

/* Hmotnost košíku — přilepená nahoře pod žlutou čaru, malý text. */
body.sekce_kosik div.hmotnost_kosiku {
    text-align: center;
    width: auto;
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--tpl-text-light);
}

/* Layout container: VLEVO #frmkupony, UPROSTŘED hmotnost, VPRAVO Celkem.
   Pravá hrana zarovnaná s koncem žluté čáry (= konec karty). Margin-top 20px
   (= 2× větší než 10px mezera mezi inputem kupónu a tabulkou aplikovaných). */
body.sekce_kosik div#tpl-kupon-celkem-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
/* POZOR: po merge masteru je přesouvaný obal kuponu div.kosik_kupony_wrap
   (ne form#frmkupony) — JS ho appenduje přímo do #tpl-kupon-celkem-row.
   Musíme cílit obojí, jinak wrapper nedostane align-self: flex-start a
   spadne na container align-items:center → kupon vertikálně vycentrovaný
   (níž než žlutá čára). Šířka 460px = delší input „Slevový kód". */
body.sekce_kosik div#tpl-kupon-celkem-row > form#frmkupony,
body.sekce_kosik div#tpl-kupon-celkem-row > div.kosik_kupony_wrap {
    flex: 0 0 460px;
    max-width: 460px;
    margin: 0;
    order: 0 !important; /* přebít existující order: 95 z base CSS */
    align-self: flex-start; /* top zarovnaný s hmotností a Celkem (u čáry) */
}
/* Doplňkové služby VEDLE kupónu — samostatný sloupec (400px) za slevovým kódem
   v řádku #tpl-kupon-celkem-row (JS tplMoveSluzby je vloží za kupón; order dle DOM).
   Hmotnost (flex-grow) tím dostane míň místa → posune se víc k pravému kraji. */
body.sekce_kosik div#tpl-kupon-celkem-row > .kosik_objsluzby {
    flex: 0 0 auto;         /* šířka dle obsahu (karta se nafoukne dle textu) */
    max-width: 500px;
    min-width: 0;
    margin: 0;
    align-self: flex-start;
    order: 0;
}
/* Wrapper kolem hmotnosti: 100% výška containeru (align-self: stretch
   přebíjí container align-items: center), vnitřní zarovnání nahoru. */
body.sekce_kosik div#tpl-kupon-celkem-row > div.tpl-hmotnost-cell {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-end;       /* váhu k pravému kraji (k Celkem), ne doprostřed */
    justify-content: flex-start; /* vertikálně nahoru, k čáře */
    margin: 0;
}
body.sekce_kosik div.tpl-hmotnost-cell > div.hmotnost_kosiku {
    margin: 0;
    text-align: right;
    font-size: 11px;
    color: #b3b3b3;
}
/* (Hmotnost + rekapitulace uvnitř #kosik_zbozi jsou skryté ve sloučeném pravidle
   společně s .tpl-dz-bar níže — JS je přesune/aktualizuje ven.)
   Doplňkové služby — čerstvá kopie uvnitř #kosik_zbozi by jinak na ~80 ms
   (než ji tplMoveSluzby přesune) narostla produktovou oblast a všechno pod ní by
   skočilo dolů a zpět. Skrýt; viditelná je až přesunutá vedle kupónu (mimo #kosik_zbozi). */
body.sekce_kosik #kosik_zbozi div.kosik_objsluzby {
    display: none !important;
}
/* Hmotnost přesunuta POD TOTÁLY (JS ji dá do .tpl-celkem-pokracovat za .kosik_rekapitulace)
   — jemná šedá meta, zarovnaná doprava, nad tlačítkem Pokračovat. */
body.sekce_kosik .tpl-celkem-pokracovat > div.hmotnost_kosiku.tpl-hmotnost-pod-totaly {
    width: 100%;
    text-align: right;
    margin: -6px 0 0 0;
    font-size: 11px;
    color: var(--tpl-text-light);
}
body.sekce_kosik div#tpl-kupon-celkem-row > div.kosik_rekapitulace {
    flex: 0 0 auto;
    margin: 0;
    align-self: stretch; /* 100% výška containeru */
}

/* Přepočet košíku BEZ nápadného stmívání: jádrové nacist_zbozi() fadeuje
   #kosik_zbozi na opacity 0.25 a zpět (jQuery.animate → inline style) jako "loading"
   efekt. Přebijeme !important → obsah zůstane plně viditelný a jen se tiše přepíše
   na místě (přepočet běží dál, jen není vidět blikání). */
body.sekce_kosik #kosik_zbozi {
    opacity: 1 !important;
}

/* Wrapper Celkem + Pokračovat (vertical stack: Celkem nahoře, Pokračovat pod).
   gap malý = tlačítko Pokračovat přilepené blízko k ceně Celkem. */
body.sekce_kosik div#tpl-kupon-celkem-row > div.tpl-celkem-pokracovat {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    align-self: flex-start;
}
body.sekce_kosik div.tpl-celkem-pokracovat > div.kosik_rekapitulace {
    flex: 0 0 auto;
    margin: 0;
}
body.sekce_kosik div.tpl-celkem-pokracovat > div#tpl-tlacitka-clone {
    flex: 0 0 auto;
    align-self: flex-end;
    margin: 0;
    padding: 0 !important;
}

/* Label „bez DPH" k hodnotě ceny bez DPH v rekapitulaci košíku — jádro
   (PrehledKosikuBase) renderuje <div class="cena_bez_dph"> jen s číslem, bez popisku. */
body.sekce_kosik div.kosik_rekapitulace div.cena_bez_dph::before {
    content: "bez DPH ";
    color: var(--tpl-text-light);
    font-weight: 400;
    font-size: 0.72em;
    white-space: nowrap;
}

/* Minimální výše nákupu (nastavení "minimalni_cena_nakupu" z adminu). Jádro
   (inc/kosik.php) renderuje <div class="minimalni_vyse_nakupu"> uvnitř #tlacitka1
   MÍSTO tlačítka Pokračovat, když je košík pod minimem. Latte #tlacitka1 skrývá a
   klonuje do #tpl-tlacitka-clone (viditelný sloupec Celkem) — hlášku tam zviditelníme
   a dáme jí varovný styl. */
body.sekce_kosik div.minimalni_vyse_nakupu {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    min-height: 64px;
    background: var(--tpl-primary-tint);
    border: 1px solid var(--tpl-primary);
    border-radius: var(--tpl-border-radius);
    padding: 14px 18px;
    margin-top: 10px;
    color: var(--tpl-text);
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    max-width: 320px;
}

/* (Výška tlačítka Pokračovat v košíku je řešena v pravidle
   `input.submit.button.button_konverzni` níže — má vyšší specificity.) */
body.sekce_kosik div.minimalni_vyse_nakupu strong {
    font-weight: 600;
}

/* Lišta „doprava zdarma" slouží jen jako ZDROJ DAT (data-pct, cíl, hláška) pro
   progress bar v HORNÍ LINII (.tpl-dz-line / .tpl-dz-info u h1) — kartu vždy skrýt
   (GLOBÁLNĚ, nikde se nezobrazuje). Hmotnost a rekapitulaci (Celkem) server renderuje
   UVNITŘ #kosik_zbozi; JS je přesune/aktualizuje VEN → uvnitř #kosik_zbozi je skrýt,
   ať po AJAX přepočtu surová kopie neproblíkne / nepřeskočí layout pod produkty. */
body.sekce_kosik .tpl-dz-bar,
body.sekce_kosik #kosik_zbozi div.hmotnost_kosiku,
body.sekce_kosik #kosik_zbozi div.kosik_rekapitulace {
    display: none !important;
}

/* Počítadlo dopravy zdarma pod hmotností — BEZ rámečku/boxu, jen bar + text okolo.
   Konstantní šířka (nemění se s obsahem ani flexem rodiče). */
body.sekce_kosik .tpl-dz-bar {
    box-sizing: border-box;
    width: 300px;
    max-width: 100%;
    flex-shrink: 0;
    margin: 8px 0 4px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--tpl-text);
}
body.sekce_kosik .tpl-dz-bar-text {
    margin-bottom: 6px;
}
body.sekce_kosik .tpl-dz-bar-text strong {
    color: var(--tpl-stav-skladem);
    font-weight: 700;
}
body.sekce_kosik .tpl-dz-bar-track {
    height: 8px;
    border-radius: var(--tpl-border-radius);
    background: #e6e6e6;
    overflow: hidden;
}
body.sekce_kosik .tpl-dz-bar-fill {
    height: 100%;
    border-radius: var(--tpl-border-radius);
    background: linear-gradient(90deg, color-mix(in srgb, var(--tpl-stav-skladem) 72%, #fff), var(--tpl-stav-skladem));
    transition: width .35s ease;
}
body.sekce_kosik .tpl-dz-bar-amounts {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 12px;
    color: #777;
}
/* Splněno = fajfka (bez boxu). */
body.sekce_kosik .tpl-dz-bar.tpl-dz-free .tpl-dz-bar-text strong::before {
    content: "✓ ";
}

/* ===========================================================================
   Doplňkové služby k objednávce (.kosik_objsluzby) — jádro renderuje tabulku
   s bordery u buněk. Přestylujeme na čisté KLIKACÍ KARTY (bez borderů tabulky):
   [checkbox] [název + popis] .......... [cena]. Vybraná = zvýrazněná.
   (První návrh — dolaďuje se.)
   =========================================================================== */
body.sekce_kosik .kosik_objsluzby {
    margin-top: 18px;
    max-width: 560px;
}
/* Nadpis „Doplňkové služby k objednávce" pryč (na přání). */
body.sekce_kosik .kosik_objsluzby_nadpis {
    display: none;
}
/* Tabulku zploštit na karty, pryč s bordery; šířka DLE OBSAHU (nafoukne se dle textu) */
body.sekce_kosik table.kosik_objsluzby_tabulka,
body.sekce_kosik table.kosik_objsluzby_tabulka > tbody {
    display: block;
    width: max-content;
    max-width: 100%;
    border: 0 !important;
    border-collapse: separate;
    background: none;
}
/* Řádek = klikací karta; ŠÍŘKA DLE TEXTU, o kus NIŽŠÍ */
body.sekce_kosik tr.kosik_objsluzba {
    display: flex;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    padding: 5px 14px;          /* nižší karta */
    margin-bottom: 8px;
    border: 0;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);   /* bez borderu — jen jemný stín */
    transition: box-shadow var(--tpl-transition), background var(--tpl-transition);
}
body.sekce_kosik tr.kosik_objsluzba:hover {
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.11);
}
/* Vybraná služba se NEzabarvuje — stav ukazuje jen zaškrtnutý checkbox. */
/* Buňka výběru = roste, celý label klikací */
body.sekce_kosik td.objsl_vyber {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    padding: 0;
    background: none;
}
body.sekce_kosik td.objsl_vyber > label {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    cursor: pointer;
}
body.sekce_kosik input.objsl_checkbox {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--tpl-primary);
    cursor: pointer;
    margin: 0;
}
body.sekce_kosik .objsl_text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
    min-width: 0;
}
body.sekce_kosik .objsl_nazev {
    font-size: 14px;
    font-weight: 600;
    color: var(--tpl-text);
}
body.sekce_kosik .objsl_popis {
    font-size: 12px;
    color: #777;
}
/* Cena vpravo */
body.sekce_kosik td.objsl_cena {
    flex: 0 0 auto;
    border: 0 !important;
    padding: 0;
    text-align: right !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--tpl-text);
    white-space: nowrap;
    background: none;
}

/* Sentinel pro sticky Pokračovat — základní styl pro VŠECHNY šířky.
   Musí mít nenulovou výšku (1px), jinak ho IntersectionObserver nemusí
   spolehlivě sledovat (proto sticky na desktopu dřív nefungoval — height:1px
   byl jen v mobilním @media). display:none by ho pro IO úplně skryl. */
body.sekce_kosik .tpl-pokracovat-sentinel {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0;
    pointer-events: none;
    opacity: 0;
}

/* === DESKTOP (≥ 769 px): Pokračovat VŽDY in-flow ===
   Dřív (Krok 136) tu byl "sticky-until-natural": u vysokého košíku (4+ položky)
   dělalo .tpl-pokracovat-sticky z Pokračovat position:fixed a tlačítko plavalo
   20 px nad spodní hranou viewportu — osamocené zelené tlačítko ODTRŽENÉ od
   Celkem i žluté čáry, plovoucí přes obsah / patičku. Uživatel chce normální
   tok (jak to bylo předtím): tlačítko sedí pod cenou a je vidět po scrollu na
   spodek košíku.
   → Desktop sticky ZRUŠEN (JS setupPokracovatSticky je no-op, viz _body_all.latte).
   Tlačítko drží in-flow z pravidla `div.tpl-celkem-pokracovat > #tpl-tlacitka-clone`
   výše. Mobil (≤ 768) má vlastní trvalou CSS lištu (níže) — té se to netýká. */

/* Odběratelské číslo obj. (nepovinné) + „Stáhnout PDF" — na přání skryto
   (řádek pod souhrnem, zbytečný clutter; košík je teď kompaktnější). */
body.sekce_kosik div.objednaci_kod {
    display: none !important;
}

/* === DESKTOP (≥ 769 px): scrolluje se JEN seznam produktů — JÁDRO košíku na 1 obrazovku ===
   Uživatel chce, aby se jádro košíku (produkty + žlutá čára + Celkem + Pokračovat)
   vešlo na jednu obrazovku bez scrollování STRÁNKY. DOPORUČENÉ produkty jsou POD
   tím a klidně MIMO obrazovku (dolů se odscrolluje). Řešení: seznam produktů
   `.kosik_polozky` dostane max-height odvozený z výšky viewportu + overflow-y:auto.
   → Při přeplnění jezdí produkty UVNITŘ boxu; žlutá čára (border-bottom
   `.kosik_polozky`) zůstává fixně na spodní hraně scroll-boxu a souhrn
   (Celkem + Pokračovat) sedí in-flow hned pod ním, VŽDY viditelný.
   Krátký košík (obsah < max-height) se nescrolluje — box se smrští na obsah.
   Subtrahend 380px = roztaženo „o kus" dolů (víc místa pro scroll-box produktů).
   `max(...)` drží rozumné minimum i na nízkých viewportech. */
@media (min-width: 769px) {
    body.sekce_kosik .kosik_polozky {
        max-height: max(180px, calc(100vh - 380px));
        overflow-y: auto;
        overflow-x: hidden;
        /* místo pro scrollbar, ať nepřekrývá X / obsah karty */
        padding-right: 6px;
    }
}

/* === MOBIL (≤ 768 px): #tpl-kupon-celkem-row CSS grid ===
   Row 1: Hmotnost vlevo | Celkem vpravo
   Row 2: Slevový kupon (celá šířka)
   Row 3: Pokračovat (95 % šířky vystředěné) */
@media (max-width: 768px) {
    body.sekce_kosik div#tpl-kupon-celkem-row {
        display: grid !important;
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        row-gap: 14px;
        align-items: end;
        margin-top: 14px;
        margin-bottom: 14px;
    }
    /* === Krok 133: Zrušit sticky bar na mobilu ===
       Sticky bottom bar (position:fixed) opakovaně mizel na reálném mobilu
       (JS race, :has() nepodpora ve starších browserech, cascade konflikty
       s Krokem 129). Uživatel chce chování jako na desktopu — Pokračovat
       tlačítko in-flow na konci košíku, viditelné po scrollu na spodek.

       Řešení: .tpl-celkem-pokracovat je normální blok (position: static),
       přes celou šířku, s Celkem cenou nahoře a plnou šířkou Pokračovat
       tlačítka pod ní. Body padding-bottom už není potřeba. */
    body.sekce_kosik div.tpl-celkem-pokracovat,
    body.sekce_kosik div#tpl-kupon-celkem-row > div.tpl-celkem-pokracovat {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 0 !important;
        width: 100% !important;
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    body.sekce_kosik div.tpl-celkem-pokracovat > div.kosik_rekapitulace {
        margin: 0 !important;
        text-align: right !important;
        order: 1 !important;
    }
    body.sekce_kosik div.tpl-celkem-pokracovat > div#tpl-tlacitka-clone,
    body.sekce_kosik #tpl-tlacitka-clone {
        order: 2 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* MOBIL: Pokračovat IN-FLOW na konci košíku. Fixní sticky lišta se ukázala jako
       VRATKÁ („problikne / prostě tam není") — klon Pokračovat vytváří JS a lišta
       bliká/mizí, navíc position:fixed se rozbije, když má některý předek transform
       (→ lišta odsunutá mimo obrazovku). Stabilní řešení jako na desktopu: blok
       normálně v toku (Celkem nahoře + full-width Pokračovat pod ním), viditelné po
       doscrollování na spodek. (Přesně to byl původní záměr Kroku 133.) */
    /* MOBIL: Pokračovat = IN-FLOW karta na konci košíku (Celkem nahoře + full-width
       tlačítko pod ním). ROZHODNUTÍ: position:fixed se ve Firefoxu chová nespolehlivě
       (lišta buď kopírovala patičku = „nedrží", nebo s bottom:0 zmizela mimo obrazovku
       — FF rozbíjí fixed jinak než Chrome). Nemizející viditelná karta v toku je
       spolehlivá ve VŠECH prohlížečích. Sticky-na-spodku vyžaduje dořešit FF vlastnost
       (viz konzole ?tpldbg) nebo jiný mechanismus — necháno na později. */
    body.sekce_kosik div.tpl-celkem-pokracovat,
    body.sekce_kosik div#tpl-kupon-celkem-row > div.tpl-celkem-pokracovat {
        position: static !important;
        z-index: auto !important;
        background: var(--tpl-card-bg) !important;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10) !important;
        border-radius: var(--tpl-border-radius) !important;
        padding: 12px 14px !important;
        margin-top: 10px !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Řádek nesmí přetéct do strany na mobilu. */
    body.sekce_kosik div#tpl-kupon-celkem-row {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    /* Hmotnost NEpatří do sticky lišty (držela ji vysokou) — na mobilu skrýt. */
    body.sekce_kosik div.tpl-celkem-pokracovat > div.hmotnost_kosiku.tpl-hmotnost-pod-totaly {
        display: none !important;
    }
    /* Sentinel — neviditelný 1 px marker za #tpl-kupon-celkem-row v DOM.
       IntersectionObserver ho sleduje. Nesmí mít display:none (jinak IO
       nevidí). aria-hidden=true, žádný layout impact. */
    body.sekce_kosik .tpl-pokracovat-sentinel {
        display: block;
        width: 100%;
        height: 1px;
        pointer-events: none;
        opacity: 0;
    }

    /* Hmotnost = řádek 1, vlevo (Celkem opustil grid → samostatně) */
    body.sekce_kosik div#tpl-kupon-celkem-row > div.tpl-hmotnost-cell {
        grid-column: 1 / -1;
        grid-row: 1;
        align-self: start;
        justify-self: end;
        font-size: 12px;
        text-align: right;
        color: #888;
        margin: 0;
        padding: 0;
    }
    /* Row 2 (spanuje obě cols): Kupon (input + tabulka).
       !important protože base má order: 0 !important. */
    body.sekce_kosik div#tpl-kupon-celkem-row > form#frmkupony,
    body.sekce_kosik div#tpl-kupon-celkem-row > div.kosik_kupony_wrap {
        grid-column: 1 / -1;
        grid-row: 2;
        order: 0 !important;
        flex: none !important;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
    /* Doplňkové služby taky na celou šířku (jinak zůstanou v desktop šířce a přetékají). */
    body.sekce_kosik div#tpl-kupon-celkem-row > .kosik_objsluzby {
        grid-column: 1 / -1 !important;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* („bez DPH" suffix ODEBRÁN — jádro už „bez DPH" před cenou vypisuje, vznikala
       duplicita „bez DPH 1 333,88 Kč bez DPH".) */

    /* === ALZA-STYLE mobilní karta ===
       Row 1: foto | název přes celou šířku (až skoro k X v rohu)
       Row 2: foto | Skladem pill + SKU (drobné meta)
       Row 3: foto | (volný prostor)        | stepper vlevo | cena vpravo
       Grid 4 sloupce: 60px (foto) | 1fr (volné) | auto (stepper) | auto (cena)
       X je position absolute v pravém horním rohu nad gridem. */
    /* Krok 130+131 sloučené: Alza-style karta s reset grid-template-rows,
       auto-flow, row-gap 0 (spacing přes margin-top), sentinel row 100
       pro stepper+cena (viz níže). */
    body.sekce_kosik div.kosik_polozka_oddil {
        position: relative !important;
        grid-template-columns: 60px minmax(0, 1fr) auto auto !important;
        grid-template-rows: none !important;
        grid-auto-flow: row !important;
        grid-auto-rows: min-content !important;
        column-gap: 10px !important;
        row-gap: 0 !important;
        padding: 16px 12px 16px 12px !important;
    }
    /* Foto = col 1, span přes všechny virtual rows (sentinel 100). */
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_fotka {
        grid-column: 1 !important;
        grid-row: 1 / span 100 !important;
        align-self: stretch !important;
        width: 60px !important;
        margin: -4px 0 -4px 0 !important;
    }
    /* Název = row 1, span col 2 až -1 (= téměř až k pravému kraji),
       padding-right 50 px aby text nepřetékal pod X. */
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_zbozi_nazev {
        grid-column: 2 / -1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding-right: 50px !important;
        min-height: 0 !important;
    }
    body.sekce_kosik div.kosik_zbozi_nazev > div.kosik_dostupnost {
        margin: 0 !important;
        flex-shrink: 0;
    }
    body.sekce_kosik div.kosik_zbozi_nazev a {
        font-size: 14px;
        line-height: 1.25;
        font-weight: 500;
    }
    /* SKU = row 2 col 2/-1 (drobný šedý text pod názvem) */
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_kody_zbozi {
        grid-column: 2 / -1 !important;
        grid-row: 2 !important;
        align-self: start !important;
        font-size: 11px !important;
        color: #888 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Schovat sloupec Upravit příplatky + Přílohy na mobile */
    body.sekce_kosik div.kosik_polozka_oddil > div.tpl-akce-wrap {
        display: none !important;
    }
    /* Stepper = poslední řádek (sentinel 100), col 3 vlevo od ceny (total = col 4).
       DEFAULT vedle sebe. Pod ≤370px se stepper + total do řádku nevejdou →
       zalomí se pod sebe (viz @media (max-width: 370px) níže) — uživatel chce
       „pod sebe jen když se to vedle sebe nevejde". Cena/ks na mobilu skrytá. */
    body.sekce_kosik div.kosik_polozka_oddil > div.tpl-cena-stepper-wrap {
        grid-column: 3 !important;
        grid-row: 100 !important;
        align-self: center !important;
        justify-self: end !important;
        padding-top: 4px !important;
        margin-top: 4px !important;
    }
    body.sekce_kosik div.kosik_polozka_oddil div.tpl-cena-stepper-wrap > div.kosik_ceny {
        display: none !important;
    }
    /* Cena (total) = poslední řádek (sentinel 100), col 4 (vpravo) — vedle stepperu
       (col 3). Pod ≤370px stepper skočí do col 4/row 99 → total padne pod něj. */
    body.sekce_kosik div.kosik_polozka_oddil > div.tpl-total-cena {
        grid-column: 4 !important;
        grid-row: 100 !important;
        margin-top: 4px !important;
        align-self: center !important;
        justify-self: end !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--tpl-text) !important;
        padding: 4px 0 0 12px !important;
        min-width: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
    /* X = position absolute, pravý horní roh */
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_remove {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        grid-column: auto !important;
        grid-row: auto !important;
        z-index: 2;
    }
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_remove a,
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_remove input,
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_remove input.button.smazat {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 22px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }
    /* Krok 134: konsolidované styling klon Pokračovat na mobilu — sloučeno
       s Kroku 132 defensive layer (dřív ve dvou blocích, spousta duplicit
       width/max-width). Force-show + full-width + touch target 52 px. */
    body.sekce_kosik input#tpl-clone-pokracovat,
    body.sekce_kosik #tpl-tlacitka-clone input#tpl-clone-pokracovat,
    body.sekce_kosik #tpl-tlacitka-clone input.button_konverzni,
    body.sekce_kosik div#tpl-tlacitka-clone input[type="submit"],
    body.sekce_kosik div#tpl-tlacitka-clone input[type="button"],
    body.sekce_kosik div#tpl-tlacitka-clone input.submit_pokracovat {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        height: auto !important;
        font-size: 16px !important;
        padding: 11px 16px !important;
        line-height: 1.2 !important;
        box-sizing: border-box !important;
    }

    /* Tabulka aplikovaných kupónů — musí být PŘESNĚ 100 % šířky jako input řádek
       „Slevový kód", jinak roste s obsahem (desktop `width:max-content` na ř. 5904
       přebíjí zdejší pravidlo díky pozdějšímu pořadí) a je širší = nekonzistentní
       + přetéká na mobilu. !important přebije pořadí. Grid přemapovaný na 4 sloupce
       [kód (flex, ellipsis) | stav | sleva | Zrušit 140px], aby se vešel do 100 %
       a Zrušit měl stejnou šířku jako „Použít" nahoře. */
    body.sekce_kosik table.kosik_kupony {
        table-layout: fixed;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 12px;
    }
    body.sekce_kosik table.kosik_kupony tr {
        grid-template-columns: minmax(0, 1fr) max-content max-content 92px !important;
    }
    body.sekce_kosik table.kosik_kupony tr > td:nth-child(1) {
        grid-column: 1 !important;
        min-width: 0 !important;
    }
    body.sekce_kosik table.kosik_kupony tr > td:nth-child(2) { grid-column: 2 !important; }
    body.sekce_kosik table.kosik_kupony tr > td:nth-child(3) { grid-column: 3 !important; }
    body.sekce_kosik table.kosik_kupony tr > td:nth-child(5) { grid-column: 4 !important; }
    /* Řádek aplikovaného kupónu — KOMPAKTNÍ + RESPONZIVNÍ i na malých displejích:
       buňky NEZALAMOVAT (nowrap → řádek drží 40px, neroste do výšky), kód s ellipsis,
       malý font a nulový vertikální padding. Výšku drží min-height:40 + align-items:
       center (níže). Dřív `word-break: break-all` zalamoval → řádek rostl / rozbíjel se
       na úzkých zařízeních. */
    body.sekce_kosik table.kosik_kupony td {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
        padding: 0 4px !important;
        font-size: 12px !important;
        min-width: 0 !important;
    }
    /* „Zrušit" buňka bez paddingu → tlačítko vyplní celý sloupec (92px). */
    body.sekce_kosik table.kosik_kupony tr > td:nth-child(5) {
        padding: 0 !important;
    }
    /* Kód: šířku drží grid track minmax(0,1fr) + min-width:0 + overflow/ellipsis
       (výše). ŽÁDNÝ max-width:0 (to scvrklo kód na jedno písmeno). */
    /* MOBIL: žlutá kupónová tlačítka (JEN mobil; PC zůstává 140px/15px). Obě STEJNĚ
       ŠIROKÁ (92px = jako „Zrušit", sloupec výše) i STEJNĚ VYSOKÁ (40px, o kousek nižší
       než původní 44px „Použít"). Input „Slevový kód" taky 40px kvůli páru s tlačítkem. */
    body.sekce_kosik div.kosik_kupon > input[type="submit"] {
        width: 92px !important;
        height: 40px !important;
        min-height: 40px !important;
    }
    body.sekce_kosik div.kosik_kupon > input[type="text"],
    body.sekce_kosik div.kosik_kupon > input#kod_kuponu {
        height: 40px !important;
        min-height: 40px !important;
    }
    /* „Zrušit" (a) NAPEVNO 40px = přesně jako Použít, nezávisle na výšce řádku.
       Dřív měl height:100% → když řádek narostl (obsah/padding), Zrušit byl vyšší. */
    body.sekce_kosik table.kosik_kupony tr {
        min-height: 40px !important;
        align-items: center !important;
    }
    body.sekce_kosik table.kosik_kupony a {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        align-self: center !important;
    }

    /* Objednací kód (Odběratelské číslo + PDF link) — celá šířka pod Pokračovat */
    body.sekce_kosik div.objednaci_kod {
        margin-top: 8px;
        padding: 0 4px;
    }
    body.sekce_kosik div.objednaci_kod input[type="text"] {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Stepper −/+ a qty input na mobilu větší pro pohodlné klikání prstem
       (32 px je málo, doporučený touch target ≥ 40 px). */
    body.sekce_kosik input.button.zmenit_pocet,
    body.sekce_kosik input.zmenit_pocet_minus,
    body.sekce_kosik input.zmenit_pocet_plus {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    body.sekce_kosik input.input_text.kosik_pocet,
    body.sekce_kosik input.kosik_pocet[type="text"] {
        height: 40px !important;
        width: 48px !important;
        font-size: 16px !important;
    }

    /* Krok 130: Přehlednější karty košíku na mobilu.
       Karty s hodně variantami/příplatky (např. Elektronické kování SMART
       TTLock) měly na mobilu 2-sloupcový layout příplatků, tučnou váhu na
       hodnotách a stejný font jako název — vypadalo to nakupené a rozházené.
       Přepneme na jednosloupcový kompaktní vzhled: menší font, tlumená
       barva, tenčí váha hodnot. Text zůstává čitelný, ale karta působí
       organizovaně. Všechny meta-řady spanují sloupec 2 až konec, tj.
       plnou šířku vedle fotky, ne jen půl sloupce.
       Krok 130a: X (kosik_remove) posunuto o něco níž, aby název měl
       nahoře trochu vzduchu a nekolidoval s křížkem. */
    /* Krok 130+131+135a sloučené: meta itemy (parametry, materiál, příplatky,
       poplatek) auto-flow do implicit rows mezi SKU (row 2) a stepper+cena
       (sentinel row 100). grid-column: 2/-1 = přes celou šířku vedle fotky.
       grid-row: auto reset kvůli desktop pravidlu kosik_priplatky_wrap
       { grid-row: 3 } které by způsobovalo překryv se stepperem. */
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_priplatky_wrap,
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_varianty_parametry,
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_material,
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_parametry,
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_poplatek,
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_min_odber {
        grid-column: 2 / -1 !important;
        grid-row: auto !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        color: var(--tpl-text-light, #666) !important;
        margin-top: 4px !important;
    }
    /* Příplatky = jednosloupcový grid uvnitř wrapperu, tlumené názvy,
       tučnější hodnoty (Krok 130). */
    body.sekce_kosik div.kosik_polozka_oddil > div.kosik_priplatky_wrap {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2px 0 !important;
    }
    body.sekce_kosik div.kosik_priplatky_wrap > div.kosik_priplatky {
        padding: 0 !important;
        color: var(--tpl-text-light, #666) !important;
    }
    body.sekce_kosik div.kosik_priplatky_wrap > div.kosik_priplatky span.kosik_priplatky_hodnota {
        font-weight: 500 !important;
        color: var(--tpl-text, #222) !important;
    }
}

/* Chybový oddíl ("Skladem méně kusů. Tel: ...") — schovat úplně.
   Informace o (ne)dostupnosti je teď v pillu vedle názvu (JS detekuje
   přítomnost .kosik_chyba a nastaví "Není skladem" pill). Karta produktu
   zůstává bílá (ne růžová). */
body.sekce_kosik div.kosik_polozka_oddil.kosik_chyba {
    display: none !important;
}

/* Přesunutý "Zpět k nakupování" pod horní lištu, NAD H1 "Nákupní košík" */
/* Menší mezera nahoře v košíku (na přání) — odkaz blíž k liště kategorií */
body.sekce_kosik #in_body { padding-top: 8px !important; }
body.sekce_kosik a.zpet_k_nakupovani.tpl-moved-top {
    display: inline-block;
    margin: 2px 0 4px 0;
    color: var(--tpl-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
body.sekce_kosik a.zpet_k_nakupovani.tpl-moved-top:hover {
    text-decoration: underline;
}

/* === Krok 135b: Prázdný košík — vizuální kotva + CTA button ===
   Jádrové PHP na inc/kosik.php:184 vypíše jen bare
   <div><strong>V košíku nemáte žádné položky</strong></div>. JS v _body_all.latte
   detekuje absenci .kosik_polozka_oddil a přidá třídu tpl-kosik-prazdny na body.
   Tímhle nahradíme "slepou uličku" plnohodnotným empty state:
   - centrovaný wrapper s subtle borderem + paddingem
   - text pod H1 vypadá jako součást layoutu, ne jako chyba
   - "Zpět k nakupování" se překlopí na CTA button (žlutý, plná šířka na mobil). */
body.tpl-kosik-prazdny #sekce > div:has(> strong:only-child),
body.tpl-kosik-prazdny div#sekce > div:has(> strong:only-child) {
    padding: 48px 24px;
    text-align: center;
    background: var(--tpl-surface-2);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    margin: 24px 0 32px 0;
    font-size: 16px;
    color: var(--tpl-text, #333);
}
body.tpl-kosik-prazdny #sekce > div > strong:only-child {
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}
/* #5: „Zpět k nakupování" nemá být nejvýraznější prvek stránky nad H1.
   Sjednoceno s NE-prázdným košíkem (.tpl-moved-top výše) = decentní textový
   odkaz, ne dominantní tlačítko. Vizuální kotvou zůstává empty-state karta
   s hláškou; zpět je jen sekundární navigace. Konzistentní desktop i mobil. */
body.tpl-kosik-prazdny a.zpet_k_nakupovani,
body.tpl-kosik-prazdny a.zpet_k_nakupovani.tpl-moved-top {
    display: inline-block !important;
    padding: 0 !important;
    background: none !important;
    color: var(--tpl-primary) !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    margin: 2px 0 4px 0 !important;
    min-height: 0 !important;
    transition: none !important;
}
body.tpl-kosik-prazdny a.zpet_k_nakupovani:hover,
body.tpl-kosik-prazdny a.zpet_k_nakupovani.tpl-moved-top:hover {
    background: none !important;
    text-decoration: underline !important;
}

/* === Košík karta — úzké telefony (≤370px) ===
   Na malých displejích se stepper (col 3) a řádkový total (col 4) do jednoho
   řádku vedle sebe nevejdou → přesuneme stepper do col 4/row 99, čímž total
   (col 4/row 100) padne pod něj: „ks" nahoře, cena pod tím. Nad 370px zůstávají
   vedle sebe. Řídí se šířkou (CSS-only); breakpoint lze doladit dle nejdelších cen. */
@media (max-width: 370px) {
    body.sekce_kosik div.kosik_polozka_oddil > div.tpl-cena-stepper-wrap {
        grid-column: 4 !important;
        grid-row: 99 !important;
    }
}

@media (max-width: 768px) {
    body.tpl-kosik-prazdny #sekce > div:has(> strong:only-child) {
        padding: 36px 16px;
        font-size: 15px;
    }
    /* #5: i na mobilu decentní inline odkaz (ne full-width tlačítko). */
    body.tpl-kosik-prazdny a.zpet_k_nakupovani,
    body.tpl-kosik-prazdny a.zpet_k_nakupovani.tpl-moved-top {
        display: inline-block !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* Krok 2 (nová předloha 2026-06): Položka košíku jako bílá karta + 4-sloupcový
   grid layout: [foto] [popis + příplatky + Upravit] [cena/ks + qty stepper] [X].
   Funkce zachovány — žádné DOM změny, jen CSS placement.
   Krok 20: kompaktnější padding, sníží výšku karty. */
body.sekce_kosik div.kosik_polozka {
    background: var(--tpl-card-bg);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    padding: 24px 12px;   /* karty o kousek vyšší — bylo 8px → 18px → 24px */
    margin-bottom: 8px;
}

/* Outer oddil = grid kontejner */
body.sekce_kosik div.kosik_polozka_oddil {
    display: grid !important;
    /* Fixed šířky sloupců → všechny karty mají elementy ve stejných pozicích.
       1=foto, 2=popis, 3=Upravit+Přílohy, 4=cena+stepper, 5=total, 6=X */
    grid-template-columns: 120px minmax(0, 1fr) 160px 140px 120px 36px;
    grid-template-rows: auto auto auto;
    column-gap: 20px;
    row-gap: 3px;
    align-items: start;
}

/* Sloupec 1 — foto, span přes 4 explicitní řádky popisu (ne 99 → ne fantom prostor) */
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_fotka {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 120px;
    align-self: stretch; /* sloupec fota = plná výška karty */
    display: flex;
    align-items: flex-start;     /* obrázek k HORNÍMU okraji karty (ne vystředěný) */
    justify-content: flex-start; /* a k LEVÉMU okraji */
    /* Negative margin nahoru/dolů (full výška karty), vlevo malé pozitivní
       odsazení (obrázek není přilepený na hraně karty).
       Musí odpovídat vertikálnímu paddingu .kosik_polozka (18px), ať fotka
       plní kartu edge-to-edge i po jejím zvýšení. */
    margin: -18px 0 -18px 4px;
}
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_fotka img {
    display: block;
    width: 100% !important;
    height: auto !important;         /* přirozená výška (NE 100% karty) → box má velikost obrázku, takže se nemá kde vystředit */
    max-width: 100% !important;
    max-height: 100% !important;     /* strop = výška karty (vysoký obrázek nepřeteče) */
    object-fit: contain;
    /* Obrázek VLEVO NAHOŘE: height:auto = box = velikost obrázku (ne celé karty),
       align-items/align-self:flex-start ho drží u horního-levého rohu karty.
       (Dřív height:100% + object-position:left top spoléhalo na plnou výšku boxu
       a při jiné výšce karty to vypadalo vystředěně.) */
    object-position: left top !important;
    border-radius: var(--tpl-radius-sm);
    background: var(--tpl-card-bg);
    flex: 1 1 auto;
    align-self: flex-start;
}

/* Sloupec 6 — X tlačítko span přes celou výšku karty, vystředěné. */
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_remove {
    grid-column: 6;
    grid-row: 1 / -1;
    justify-self: end;
    align-self: center;
}

/* Sloupec 5 — řádkový total (qty × cena/ks). Span vše, vystředěný.
   Pevná šířka sloupce → všechny totals mají stejnou pravou hranu pod sebou. */
body.sekce_kosik div.kosik_polozka_oddil > div.tpl-total-cena {
    grid-column: 5;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
    font-size: 18px;
    font-weight: 700;
    color: var(--tpl-text);
    white-space: nowrap;
    padding: 0 12px;
    text-align: right;
    min-width: 90px;
}

/* Sloupec 4 — wrapper cena/ks + stepper. Cena nad stepperem horizontálně
   vystředěná vůči stepperu. Wrapper vystředěný vůči karte. */
body.sekce_kosik div.kosik_polozka_oddil > div.tpl-cena-stepper-wrap {
    grid-column: 4;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center; /* cena horizontálně doprostřed vůči stepperu */
    gap: 4px;
}

/* Sloupec 3 — wrapper s cenou nahoře + Upravit + Přílohy. Column stack,
   horizontálně vystředěný, vertikálně vystředěný vůči karte. */
body.sekce_kosik div.kosik_polozka_oddil > div.tpl-akce-wrap {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: stretch;  /* zabrat celou výšku karty */
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;       /* horizontálně doprostřed */
    justify-content: center;   /* vertikálně buttons doprostřed wrapperu */
    gap: 6px;
    min-width: 160px;
}
/* Cena 5 299 Kč/ks nahoře, vystředěná */
body.sekce_kosik div.tpl-akce-wrap > div.kosik_ceny {
    text-align: center;
    margin-bottom: 4px;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto;
}
/* Obě tlačítka stejně široká + vycentrovaný text */
body.sekce_kosik div.tpl-akce-wrap > div.kosik_editace_odkaz,
body.sekce_kosik div.tpl-akce-wrap > div.kosik_editace_odkaz > a,
body.sekce_kosik div.tpl-akce-wrap > input.button_prilohy {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
/* Fallback pro starší DOM bez wrapperu (editace_odkaz přímo v oddil). */
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_editace_odkaz {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
}

/* Tlačítko "Nahrát fotky nebo přílohy" / "Upravit přílohy" — stejný styl
   jako Upravit příplatky (outlined rounded). */
body.sekce_kosik div.tpl-akce-wrap > input.button_prilohy,
body.sekce_kosik input.button.button_prilohy {
    display: inline-block;
    padding: 7px 14px !important;
    border: 1px solid #ddd !important;
    border-radius: var(--tpl-border-radius) !important;
    background: var(--tpl-card-bg) !important;
    background-image: none !important;
    color: var(--tpl-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    opacity: 1;
    transition: background var(--tpl-transition), border-color var(--tpl-transition);
}
body.sekce_kosik div.tpl-akce-wrap > input.button_prilohy:hover,
body.sekce_kosik input.button.button_prilohy:hover {
    background: var(--tpl-primary-tint) !important;
    border-color: var(--tpl-primary) !important;
}

/* Skrýt celý .kosik_polozka_oddil.kosik_prilohy (galerie + tlačítko, tlačítko
   jsme přesunuli do .tpl-akce-wrap, galerie zde nepotřebná).
   Důležité: karta pak = jen hlavní oddíl, tlačítka v akce-wrap jsou
   vertikálně vystředěné vůči viditelné kartě. */
body.sekce_kosik div.kosik_polozka_oddil.kosik_prilohy {
    display: none !important;
}
/* Override default `div.kosik_ceny { flex: 0 0 120px }` v column-flex
   wrapperu (= jinak by mělo výšku 120px). */
body.sekce_kosik div.tpl-cena-stepper-wrap > div.kosik_ceny {
    flex: 0 0 auto;
    width: auto;
}
/* Stepper wrapper shrink na content (= nebýt 100% .tpl-cena-stepper-wrap),
   takže ramecek+ks budou vystředěné vůči ceně nad nimi.
   align-self: center přebíjí default flex column item stretch. */
body.sekce_kosik div.tpl-cena-stepper-wrap > div.kosik_pocet_dostupnost {
    width: auto !important;
    flex: 0 0 auto !important;
    align-self: center !important;
}

/* Sloupec 2 — popis + číslo + příplatky + Upravit + ostatní text-divy.
   Explicitní grid-row pro klíčové prvky aby auto-placement nerozhodil pořadí. */
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_zbozi_nazev {
    grid-column: 2;
    grid-row: 1;
}
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_kody_zbozi {
    grid-column: 2;
    grid-row: 2;
}
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_priplatky_wrap {
    grid-column: 2;
    grid-row: 3;
}
/* (Krok 27) .kosik_editace_odkaz má vlastní sloupec 3 — viz pravidlo výše. */
/* Ostatní volitelné popisy — auto-placed do sloupce 2, řádky 5+ */
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_material,
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_varianty_parametry,
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_parametry,
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_poplatek,
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_min_odber {
    grid-column: 2;
}

/* Sloupec 3 — cena/ks (řádek 1) + qty stepper (řádek 2). Pravé zarovnání. */
/* .kosik_ceny už není direct child oddil (po wrap-u do .tpl-cena-stepper-wrap).
   Layout řídí wrapper, .kosik_ceny zachovává jen text-align: right. */
body.sekce_kosik div.tpl-cena-stepper-wrap > div.kosik_ceny {
    text-align: right;
}
/* Stepper layout řídí wrapper .tpl-cena-stepper-wrap (sloupec 3, span vše).
   Vnitřní layout .kosik_pocet_dostupnost (stepper + "ks" + dostupnost) je
   nastaven v pravidlech níže. */

/* .kosik_pocet_dostupnost (parent stepper) — wrapper width auto pro centering */
body.sekce_kosik div.kosik_pocet_dostupnost {
    justify-content: center !important;
}
/* Uvnitř .kosik_pocet_dostupnost: stepper + "ks" v jednom řádku, dostupnost
   ("3 týdny" / "skladem X ks") pod tím malou šedou.
   width: auto + justify-content: center → ramecek+ks centered horizontálně vůči ceně. */
body.sekce_kosik div.kosik_pocet_dostupnost > div.kosik_pocet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto;
}
body.sekce_kosik div.kosik_pocet_dostupnost > div.kosik_pocet > span.jednotka {
    font-size: 13px;
    color: var(--tpl-text-light);
}
body.sekce_kosik div.kosik_pocet_dostupnost > div.kosik_dostupnost {
    display: block;
    text-align: right;
    margin-top: 6px;
    font-size: 11px;
    color: var(--tpl-text-light);
    line-height: 1.3;
}
body.sekce_kosik div.kosik_pocet_dostupnost > div.cb {
    display: none;
}

/* clearfix divy ze starého layoutu → ven (grid je zařídí sám) */
body.sekce_kosik div.kosik_polozka_oddil > div.cb {
    display: none;
}

/* Popis — flex layout: název odkaz + dostupnost pill vedle sebe */
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_zbozi_nazev {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_zbozi_nazev a {
    font-size: 17px;
    font-weight: 600;
    color: var(--tpl-text);
    text-decoration: none;   /* #4: jinde v šabloně odkazy podtržené nejsou */
}
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_zbozi_nazev a:hover {
    text-decoration: underline;
}
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_zbozi_nazev a:hover {
    color: var(--tpl-primary-dark);
}

/* Dostupnost pill vedle názvu — zelená/červená/oranžová dle data-stav (JS) */
body.sekce_kosik div.kosik_zbozi_nazev > div.kosik_dostupnost {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--tpl-radius-sm);
    line-height: 1.4;
    font-weight: 600;
    text-align: left;
    margin-top: 0;
    text-transform: none;
    color: var(--tpl-text);
    background: var(--tpl-surface-3);
}
body.sekce_kosik div.kosik_zbozi_nazev > div.kosik_dostupnost[data-stav="ok"] {
    background: var(--tpl-stav-skladem-bg);
    color: var(--tpl-stav-skladem);
}
body.sekce_kosik div.kosik_zbozi_nazev > div.kosik_dostupnost[data-stav="warning"] {
    background: #ffeaea;
    color: #c62828;
}
body.sekce_kosik div.kosik_zbozi_nazev > div.kosik_dostupnost[data-stav="neutral"] {
    background: #fff3e0;
    color: #ef6c00;
}
body.sekce_kosik div.kosik_zbozi_nazev > div.kosik_dostupnost span.dostupnost {
    background: transparent !important;
    color: inherit !important;
    padding: 0;
    font-size: inherit;
}
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_kody_zbozi {
    font-size: 12px;
    color: var(--tpl-text-light);
    margin-top: 2px;
}

/* Krok 27: .tpl-priplatky-container už nepoužíváme — priplatky_wrap a
   editace_odkaz mají vlastní grid sloupce. priplatky_wrap zachová default
   auto-placement v sloupci 2 (row 3). */
body.sekce_kosik div.kosik_polozka_oddil > div.kosik_priplatky_wrap {
    grid-column: 2;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 18px;
    font-size: 13px;
    line-height: 1.45;
}
body.sekce_kosik div.kosik_priplatky_wrap > div.kosik_priplatky {
    cursor: pointer;
}
body.sekce_kosik div.kosik_priplatky_wrap > div.kosik_priplatky:hover {
    color: var(--tpl-primary-dark);
}
body.sekce_kosik div.kosik_priplatky_wrap > div.kosik_priplatky span.kosik_priplatky_hodnota {
    font-weight: 700;
}

/* Cena/ks — typografie. .kosik_ceny je teď uvnitř .tpl-cena-stepper-wrap.
   Jádro (Formatuj::cena + mena_zobrazit) už vypisuje měnu do textContent
   ("199 Kč" / "8 €"), takže ::after dodává JEN "/ks" — nezdvojovat měnu.
   (Dřív tu bylo " Kč/ks" → vznikalo "199 Kč Kč/ks" a /ks lezlo na stepper "ks".) */
body.sekce_kosik div.kosik_polozka_oddil div.kosik_ceny > div.cena_s_dph {
    font-size: 18px;
    font-weight: 600;
    color: var(--tpl-text);
    white-space: nowrap;
}
body.sekce_kosik div.kosik_polozka_oddil div.kosik_ceny > div.cena_s_dph::after {
    content: "/ks";
    font-size: 13px;
    font-weight: 400;
    color: var(--tpl-text-light);
    margin-left: 1px;
}
/* DPH info schovat — předloha to nemá */
body.sekce_kosik div.kosik_polozka_oddil div.kosik_ceny > div.cena_bez_dph,
body.sekce_kosik div.kosik_polozka_oddil div.kosik_ceny > div.dph {
    display: none;
}

/* Krok 3 (nová předloha 2026-06): Tlačítko "Upravit příplatky" — outlined rounded.
   PHP vykresluje <a class="button kosik_upravit"> uvnitř <div.kosik_editace_odkaz>.
   Stylujeme to jako sekundární tlačítko.
   Krok 20: selektor bez .kosik_polozka_oddil > prefix — po JS přesunu je
   .kosik_editace_odkaz dítětem .tpl-priplatky-container, ne direct child oddil. */
body.sekce_kosik div.kosik_editace_odkaz > a,
body.sekce_kosik div.kosik_editace_odkaz > a.kosik_upravit,
body.sekce_kosik div.kosik_editace_odkaz > a.button {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    color: var(--tpl-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    opacity: 1;
    cursor: pointer;
    transition: background var(--tpl-transition), border-color var(--tpl-transition), color var(--tpl-transition);
}
body.sekce_kosik div.kosik_editace_odkaz > a:hover,
body.sekce_kosik div.kosik_editace_odkaz > a.kosik_upravit:hover {
    background: var(--tpl-primary-tint);
    border-color: var(--tpl-primary);
    color: var(--tpl-text);
    opacity: 1;
}

/* Krok 4 (nová předloha 2026-06): žlutý horizontální divider mezi seznamem
   položek a "Celkem" rekapitulace. Přebíjí případnou default tenkou linku. */
body.sekce_kosik div.kosik_polozky {
    border-bottom: 3px solid var(--tpl-primary) !important;
    padding-bottom: 10px;
    margin-bottom: 0;
}

/* Krok 5 (nová předloha 2026-06): Slevový kupon — kompaktní formulář
   v levém dolním rohu. Input "Slevový kód" + žluté CTA "Použít".
   HTML: <form id="frmkupony"><fieldset><div class="kosik_kupon">
           [text node "Zadejte kód slevového kupónu:"] [input#kod_kuponu]
           [submit "Přidat kód >>"]
         </div></fieldset></form>
   Funkčnost zachována (form id + input name nezměněn). */

/* Form wrapper — bez border / pozadí, kompaktní (levý dolní roh).
   POZN.: merge masteru změnil obal z form#frmkupony na div.kosik_kupony_wrap
   (uvnitř #kosik_form) → cílíme na obojí (zpětná kompatibilita). */
body.sekce_kosik form#frmkupony,
body.sekce_kosik div.kosik_kupony_wrap {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    max-width: 320px;
    display: block;
}

/* Skrýt <fieldset><legend>Slevové kupóny</legend> + jeho rámeček — visually flatten.
   (nový obal .kosik_kupony_wrap z merge masteru cílíme taky) */
body.sekce_kosik form#frmkupony fieldset,
body.sekce_kosik div.kosik_kupony_wrap fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
body.sekce_kosik form#frmkupony fieldset > legend,
body.sekce_kosik div.kosik_kupony_wrap legend {
    display: none;
}

/* „Celkem" cena o kousek níž — odsazení od žluté čáry / produktů.
   !important kvůli jádrovému margin na .kosik_rekapitulace. */
body.sekce_kosik div.kosik_rekapitulace {
    margin-top: 0 !important;
}

/* Skrýt text node "Zadejte kód slevového kupónu:" trikem font-size: 0 na wrapper,
   reset font-size na child elementech (inputy). */
body.sekce_kosik div.kosik_kupon {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 0;
    line-height: 0;
}

/* Input "Slevový kód" — bílý, rounded vlevo, větší okénko (48 px / 16 px font) */
body.sekce_kosik div.kosik_kupon > input[type="text"],
body.sekce_kosik div.kosik_kupon > input#kod_kuponu {
    flex: 1;
    height: 40px;               /* nižší okénko */
    padding: 0 14px;
    border: 1px solid #e0e0e0;
    border-radius: var(--tpl-border-radius) 0 0 var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    font-size: 15px;
    line-height: 1.4;
    color: var(--tpl-text);
    outline: none;
    box-shadow: none;
    min-width: 0;
}
body.sekce_kosik div.kosik_kupon > input[type="text"]:focus,
body.sekce_kosik div.kosik_kupon > input#kod_kuponu:focus {
    border-color: var(--tpl-primary);
}

/* Žluté CTA "Použít" / "Přidat kód" — !important kvůli přepisování z jiných pravidel */
body.sekce_kosik div.kosik_kupon > input[type="submit"] {
    height: 40px;               /* nižší tlačítko (v páru s inputem) */
    width: 140px;               /* stejná šířka jako "Zrušit kupón" (desktop) */
    flex-shrink: 0;
    padding: 0 16px;
    white-space: nowrap;
    border: 1px solid var(--tpl-primary) !important;
    border-left: none !important;
    border-radius: 0 var(--tpl-border-radius) var(--tpl-border-radius) 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    background: var(--tpl-primary) !important;
    background-image: none !important;
    color: var(--tpl-primary-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    transition: background var(--tpl-transition);
    flex-shrink: 0;
}
body.sekce_kosik div.kosik_kupon > input[type="submit"]:hover {
    background: var(--tpl-primary-dark, #ffc107) !important;
}

/* Tabulka aplikovaných kupónů — zploštit do jednoho řádku:
   [zelený kód] [platný/neplatný stav] [sleva] [Zrušit].
   Hlavička i sloupec "využitá sleva" skryty. */
body.sekce_kosik table.kosik_kupony {
    display: block;
    width: max-content;       /* roste podle obsahu (dlouhý kód) */
    min-width: 100%;          /* nikdy užší než form */
    max-width: none;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--tpl-card-bg);
    border: 1px solid #e0e0e0;
    border-radius: var(--tpl-border-radius);
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}
body.sekce_kosik table.kosik_kupony tbody {
    display: block;
}
/* Hlavička "KÓD KUPÓNU | STAV ..." pryč */
body.sekce_kosik table.kosik_kupony tr.top {
    display: none;
}
/* Pomocný řádek s nazev kuponu / poznámka / max_ks — má colspan="4". Skrýt. */
body.sekce_kosik table.kosik_kupony tr:has(td[colspan]) {
    display: none;
}
/* Datový řádek = grid s virtuální 1fr mezerou (min 20px) mezi kódem a ostatními.
   Sloupce: max-content (kód) | minmax(20px, 1fr) (mezera) | max-content (stav)
            | max-content (sleva) | 80px (Zrušit).
   td:nth-child(4) je display:none, ostatní mají explicit grid-column placement. */
body.sekce_kosik table.kosik_kupony tr {
    display: grid;
    grid-template-columns: max-content minmax(20px, 1fr) max-content max-content 140px;
    align-items: stretch;
    min-height: 38px;           /* 38 + 1px/1px rámeček tabulky = 40px celkem = jako input */
}
body.sekce_kosik table.kosik_kupony tr > td:nth-child(2) {
    grid-column: 3;
}
body.sekce_kosik table.kosik_kupony tr > td:nth-child(3) {
    grid-column: 4;
}
body.sekce_kosik table.kosik_kupony tr > td:nth-child(5) {
    grid-column: 5;
}
body.sekce_kosik table.kosik_kupony tr + tr {
    box-shadow: 0 -1px 0 #f0f0f0; /* tenký separator mezi řádky */
}
body.sekce_kosik table.kosik_kupony td {
    padding: 0 14px;
    border: none;
    background: none;
    font-size: 13px;
    line-height: 1.4;
    text-align: left !important;
    display: flex;
    align-items: center;
}
/* 1. td = kód kupónu (zelený, tučný) — col 1 (auto-placed). */
body.sekce_kosik table.kosik_kupony tr > td:nth-child(1) {
    color: var(--tpl-stav-skladem);
    font-weight: 600;
    min-width: 80px;
}
/* Kód ČERVENĚ, když kupón nedá žádnou slevu (neplatný / využitá sleva 0).
   Třídu přidá JS (setupKuponKodBarva) — CSS nedokáže číst text sousedních buněk. */
body.sekce_kosik table.kosik_kupony tr > td:nth-child(1).tpl-kupon-bez-slevy {
    color: var(--tpl-stav-chyba);
}
/* 2. td = stav (Neplatný kupón / ok) */
body.sekce_kosik table.kosik_kupony tr > td:nth-child(2) {
    color: var(--tpl-text);
    font-weight: 500;
}
/* 3. td = výše slevy */
body.sekce_kosik table.kosik_kupony tr > td:nth-child(3) {
    color: var(--tpl-text-light);
}
/* 4. td = využitá sleva — skrýt, pro stručnost */
body.sekce_kosik table.kosik_kupony tr > td:nth-child(4) {
    display: none;
}
/* 5. td = Zrušit — pevná šířka 80px (= stejné jako "Použít" nahoře). */
body.sekce_kosik table.kosik_kupony tr > td:nth-child(5) {
    padding: 0;
}
body.sekce_kosik table.kosik_kupony a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0; /* outer table má border-radius + overflow:hidden = ostré uvnitř */
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--tpl-transition);
    box-sizing: border-box;
}
body.sekce_kosik table.kosik_kupony a:hover {
    background: var(--tpl-primary-dark, #f0c800);
    text-decoration: none;
}

/* Krok 134 (aktualizováno): na přání uživatele je „Zrušit" 40px (ne 48px touch-target)
   = stejně vysoké jako „Použít" a input. Tento blok je AŽ ZA ostatními mobilními
   pravidly, takže musí mít taky 40px, jinak by je přebil (source order). */
@media (max-width: 768px) {
    body.sekce_kosik table.kosik_kupony tr {
        min-height: 40px !important;
    }
    body.sekce_kosik table.kosik_kupony tr > td:nth-child(5) {
        min-height: 40px !important;
        padding: 0 !important;
    }
    body.sekce_kosik table.kosik_kupony a {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
        align-self: center !important;
    }
}

/* #tpl-kosik-footer-flex — JEN klony Pokračovat + Přepočítat. Kupon je nyní
   v #tpl-kupon-celkem-row pod žlutou čarou. Tlačítka vpravo dole. */
body.tpl-kosik-footer-moved.sekce_kosik div#tpl-kosik-footer-flex {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
}
body.tpl-kosik-footer-moved.sekce_kosik div#tpl-kosik-footer-flex > div#tpl-tlacitka-clone {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* "Celkem:" rekapitulace — pravé zarovnání, větší font */
body.sekce_kosik div.kosik_rekapitulace {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start; /* "Celkem:" label na úrovni částky 21 196,00 Kč (top), ne uprostřed cena_s_dph + cena_bez_dph */
    gap: 16px;
    padding: 0;
    margin: 0 0 16px 0;
    text-align: right;
    background: none;
    border: none;
}
body.sekce_kosik div.kosik_rekapitulace > div.rekapitulace_celkem {
    font-size: 18px;
    font-weight: 400;
    color: var(--tpl-text);
}
body.sekce_kosik div.kosik_rekapitulace > div.kosik_ceny {
    display: block;
    text-align: right;
}
body.sekce_kosik div.kosik_rekapitulace > div.kosik_ceny > div.cena_s_dph {
    font-size: 26px;
    font-weight: 700;
    color: var(--tpl-text);
    line-height: 1.1;
}
body.sekce_kosik div.kosik_rekapitulace > div.kosik_ceny > div.cena_bez_dph {
    font-size: 13px;
    color: var(--tpl-text-light);
    margin-top: 2px;
}

/* "Pokračovat" — velké zelené CTA (konverzní) */
body.sekce_kosik div#tlacitka1 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
body.sekce_kosik input#pokracovat,
body.sekce_kosik input#tpl-clone-pokracovat,
body.sekce_kosik input.submit.button.button_konverzni {
    height: 46px;
    min-width: 200px;
    padding: 0 28px !important;
    border: none !important;
    border-radius: var(--tpl-border-radius) !important;
    text-align: center !important;
    background: var(--tpl-cta-bg) !important;
    background-image: none !important;
    color: var(--tpl-cta-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    transition: background var(--tpl-transition);
}
body.sekce_kosik input#pokracovat:hover,
body.sekce_kosik input#tpl-clone-pokracovat:hover,
body.sekce_kosik input.submit.button.button_konverzni:hover {
    background: var(--tpl-cta-bg-hover) !important;
    color: var(--tpl-cta-text-hover) !important;
}

/* "Přepočítat / Uložit" (input#sb) — kompletně skryto (Krok 129).
   Přepočet už běží automaticky přes debounced auto-recalc při změně
   qty/kupónu (Krok 8b + Krok 8e), takže tlačítko nemá žádnou funkci pro
   uživatele a jen zabírá vertikální prostor v kartě i sticky liště. */
body.sekce_kosik input#sb,
body.sekce_kosik input#tpl-clone-sb {
    display: none !important;
}

/* Krok 3: +/− qty rámeček a "X" smazat. Čistá kosmetika, žádné restruct. */

/* Rámeček kolem [−][input][+] — rounded pill */
body.sekce_kosik div.pocet_kosik_ramecek {
    display: inline-flex !important;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    overflow: hidden;
    background: var(--tpl-card-bg);
}

/* Tlačítka −/+ uvnitř rámečku */
body.sekce_kosik input.button.zmenit_pocet,
body.sekce_kosik input.zmenit_pocet_minus,
body.sekce_kosik input.zmenit_pocet_plus {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: var(--tpl-surface-2) !important;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--tpl-text);
    padding: 0 !important;
    border-radius: 0 !important;
    transition: background var(--tpl-transition);
}

body.sekce_kosik input.button.zmenit_pocet:hover,
body.sekce_kosik input.zmenit_pocet_minus:hover,
body.sekce_kosik input.zmenit_pocet_plus:hover {
    background: var(--tpl-surface-3) !important;
}

/* Input s číslem mezi tlačítky — borderless, vycentrovaný */
body.sekce_kosik input.input_text.kosik_pocet,
body.sekce_kosik input.kosik_pocet[type="text"] {
    width: 40px !important;
    height: 32px;
    border: none !important;
    background: transparent;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 0 4px;
    box-shadow: none;
    outline: none;
}

/* Skrýt spin arrows v number inputu */
body.sekce_kosik input.input_text.kosik_pocet::-webkit-inner-spin-button,
body.sekce_kosik input.input_text.kosik_pocet::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* "X" smazat tlačítko — stejná šedá #fafafa jako +/- stepper, X černé,
   zaoblené hrany (ne kruh). */
body.sekce_kosik div.kosik_remove input.button.smazat,
body.sekce_kosik input.button.smazat[type="button"] {
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    border: none !important;
    border-radius: var(--tpl-border-radius) !important;
    background: var(--tpl-surface-2) !important;
    background-image: none !important;
    color: var(--tpl-text-light, #6a6a6a) !important;
    cursor: pointer !important;
    font-size: 20px !important;      /* #4: čistý křížek „×" (JS mění „X"→„×") */
    font-weight: 400 !important;
    line-height: 1 !important;
    padding: 0 0 2px 0 !important;   /* optické vycentrování × glyfu */
    text-align: center !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: background var(--tpl-transition), color var(--tpl-transition);
}

body.sekce_kosik div.kosik_remove input.button.smazat:hover,
body.sekce_kosik input.button.smazat[type="button"]:hover {
    background: var(--tpl-surface-3) !important;
    color: var(--tpl-text, #1a1a1a) !important;
}

/* 5. Výběr lokality (?sekce=kosik bez nastavené lokality / ?sekce=kosik_lokalita)
      — místo obřích dlaždic s vlajkami v plné velikosti udělat seznam řádků
      s malou vlajkou + čitelným názvem. */

body[class*="sekce_kosik"] div.vyber_lokality {
    margin: 6px 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: stretch;
}

/* H2 "EU" / region label — break flex flow on full row */
body[class*="sekce_kosik"] div.vyber_lokality h2 {
    flex: 1 0 100%;
    margin: 14px 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tpl-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Každá země = kompaktní inline pill (více se jich zalomí dle počtu) */
body[class*="sekce_kosik"] div.vybrat_lokalitu {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

body[class*="sekce_kosik"] div.vybrat_lokalitu > span {
    display: inline-block;
}

/* Vnitřní <table> jako kompaktní klikatelný pill */
body[class*="sekce_kosik"] div.vybrat_lokalitu table {
    width: auto;
    border-collapse: collapse;
    border: 1px solid #e6e8eb;
    border-radius: 999px;
    background: var(--tpl-card-bg);
    cursor: pointer;
    transition: background var(--tpl-transition), border-color var(--tpl-transition), box-shadow var(--tpl-transition);
    overflow: hidden;
}

body[class*="sekce_kosik"] div.vybrat_lokalitu table:hover {
    background: #f8f9fa;
    border-color: var(--tpl-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

body[class*="sekce_kosik"] div.vybrat_lokalitu td {
    padding: 6px 10px;
    vertical-align: middle;
    border: none;
    white-space: nowrap;
}

body[class*="sekce_kosik"] div.vybrat_lokalitu td:first-child {
    width: auto;
    padding-right: 4px;
    padding-left: 8px;
}

body[class*="sekce_kosik"] div.vybrat_lokalitu td:last-child {
    padding-right: 12px;
}

/* Vlajka — malá, rozeznatelná, s decentním okrajem */
body[class*="sekce_kosik"] div.vybrat_lokalitu img.lokalita_ikona,
body[class*="sekce_kosik"] div.vybrat_lokalitu img.lokalita_ikona_nic {
    width: 28px;
    height: 20px;
    max-width: 28px;
    max-height: 20px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--tpl-radius-sm);
}

body[class*="sekce_kosik"] div.vybrat_lokalitu img.lokalita_ikona_nic {
    object-fit: contain;
    padding: 2px;
    background: var(--tpl-surface-2);
}

/* Název země — čitelný, plně klikatelný řádek */
body[class*="sekce_kosik"] div.vybrat_lokalitu a {
    display: block;
    font-size: 15px;
    color: var(--tpl-text);
    text-decoration: none;
    font-weight: 500;
    line-height: 1.4;
}

body[class*="sekce_kosik"] div.vybrat_lokalitu table:hover a {
    color: var(--tpl-primary-dark);
}

/* Nadpis "Vyberte lokalitu pro doručení" / "Lokalita pro doručení" —
   zarovnaný vlevo. Selektor cílí na obě sekce (kosik i kosik_lokalita). */
body[class*="sekce_kosik"] #sekce > h2:first-child,
body[class*="sekce_kosik"] #sekce > h1:first-child {
    text-align: left;
    margin: 12px 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--tpl-text);
}

/* Když je už vybraná lokalita, picker page má banner "<h1>Lokalita pro
   doručení</h1><h2>NÁZEV <br><img.lokalita_ikona_velka></h2>". Obraz je
   defaultně full-size (400 px) → zmenšit na velikost ostatních pills.
   Zarovnat na řádek a zmenšit i h2. */
body[class*="sekce_kosik"] #sekce > h2:nth-of-type(1):not(:first-child),
body[class*="sekce_kosik"] #sekce > h1 + h2 {
    text-align: left;
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 500;
    color: var(--tpl-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Skrýt <br> uvnitř h2 (zlomí řádek za názvem a tlačí vlajku pod text) */
body[class*="sekce_kosik"] #sekce > h2 > br {
    display: none;
}

/* Vlajka vybrané lokality — stejně malá jako pills */
body[class*="sekce_kosik"] img.lokalita_ikona_velka {
    width: 28px !important;
    height: 20px !important;
    max-width: 28px !important;
    max-height: 20px !important;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--tpl-radius-sm);
}

/* === 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);
}

/* ================================================================
   H. KOSIK & OBJEDNAVKA
   ================================================================ */

/* Cart table */
table.kosik,
div#kosik table {
    width: 100%;
    border: none;
}

table.kosik td,
div#kosik table td {
    border: none;
    border-bottom: 1px solid var(--tpl-card-border);
    padding: 12px 10px;
    vertical-align: middle;
}

table.kosik th,
div#kosik table th {
    border: none;
    border-bottom: 2px solid var(--tpl-primary);
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--tpl-text);
    background: none;
}

/* Cart images */
table.kosik img,
div#kosik table img {
    max-width: 60px;
    height: auto;
    border-radius: var(--tpl-radius-sm);
}

/* --- Cart page (div-based layout) --- */

/* "zpět k nakupování" link */
a.zpet_k_nakupovani {
    font-size: 13px;
    color: var(--tpl-primary-dark);
    text-decoration: none;
}

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

/* Locality info bar */
div.kosik_lokalita_info {
    background: var(--tpl-surface-2);
    padding: 10px 15px;
    border-radius: var(--tpl-border-radius);
    font-size: 13px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* "Nyní nejste přihlášen" */
p.kosik_nejste_prihlasen {
    font-size: 13px;
    color: var(--tpl-text-light);
    margin: 0 0 15px;
}

/* Recommended products banner */
a.kosik_doporucujeme_zprava {
    display: block;
    background: var(--tpl-primary-tint-soft);
    padding: 10px 15px;
    border-radius: var(--tpl-border-radius);
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    color: var(--tpl-text);
    margin-bottom: 15px;
}

/* Cart item container */
div.kosik_polozky {
    margin-bottom: 15px;
}

div.kosik_polozka {
    border-bottom: 1px solid var(--tpl-card-border);
    padding: 10px 0;
}

div.kosik_polozka_oddil {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 10px 0;
}

/* Remove button (X) */
div.kosik_remove {
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 10;
}

div.kosik_remove a,
div.kosik_remove input {
    background: none;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all var(--tpl-transition);
    padding: 0;
}

div.kosik_remove a:hover,
div.kosik_remove input:hover {
    border-color: var(--tpl-stav-chyba);
    color: var(--tpl-stav-chyba);
}

/* Product image */
div.kosik_fotka {
    flex: 0 0 80px;
    width: 80px !important;
    height: auto !important;
    float: none !important;
}

div.kosik_fotka img {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain;
    border-radius: var(--tpl-border-radius);
    border: none !important;
}

/* Product name */
div.kosik_zbozi_nazev {
    flex: 1;
    min-width: 0;
    float: none !important;
    width: auto !important;
}

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

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

/* Product codes */
div.kosik_kody_zbozi {
    font-size: 11px;
    color: #aaa;
    float: none !important;
    width: auto !important;
    clear: none !important;
}

/* Quantity + availability */
div.kosik_pocet_dostupnost {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    float: none !important;
    width: auto !important;
}

div.kosik_pocet_dostupnost input[type="text"],
div.kosik_pocet_dostupnost input[type="number"] {
    width: 50px !important;
    height: 34px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    font-size: 14px;
    padding: 4px;
}

div.kosik_pocet_dostupnost .kosik_zmenit_pocet {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tpl-text);
}

div.kosik_pocet_dostupnost .kosik_zmenit_pocet:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary);
}

/* Price column */
div.kosik_ceny {
    flex: 0 0 120px;
    text-align: right;
    float: none !important;
    width: auto !important;
}

div.kosik_ceny .cena_s_dph {
    font-size: 16px;
    font-weight: 700;
    color: var(--tpl-text);
}

div.kosik_ceny .dph {
    font-size: 11px;
    color: #aaa;
}

/* Rekapitulace (total) */
div.kosik_rekapitulace {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-top: 2px solid var(--tpl-text);
}

div.rekapitulace_celkem {
    font-size: 16px;
    font-weight: 600;
    color: var(--tpl-text);
}

div.kosik_rekapitulace .kosik_ceny {
    flex: 0 0 auto;
}

div.kosik_rekapitulace .kosik_ceny .cena_s_dph {
    font-size: 20px;
}

/* Note textarea */
div.poznamka_k_objednavce {
    margin: 10px 0;
}

div.poznamka_k_objednavce textarea {
    width: 100%;
    max-width: 500px;
    min-height: 60px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    padding: 10px;
    font-size: 13px;
    font-family: var(--tpl-font);
    resize: vertical;
}

/* Cart buttons */
div.kosik_tlacitka {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    gap: 10px;
}

div.kosik_tlacitka input.button_konverzni {
    background: var(--tpl-cta-bg) !important;
    color: var(--tpl-cta-text) !important;
    border: none !important;
    padding: 14px 30px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: var(--tpl-border-radius) !important;
    cursor: pointer;
    font-family: var(--tpl-font) !important;
    transition: background var(--tpl-transition);
}

div.kosik_tlacitka input.button_konverzni:hover {
    background: var(--tpl-cta-bg-hover) !important;
    color: var(--tpl-cta-text-hover) !important;
}

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

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

/* Recommended products section */
div#kosik_doporucujeme {
    margin-top: 30px;
}

div#kosik_doporucujeme h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 15px;
    color: var(--tpl-text);
}

div#kosik_doporucujeme div.polozky,
div#kosik_doporucujeme div.zbozi_oblibene_wrap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

/* Wrapper kolem každé doporučené položky — grid items se rozloží
   rovnoměrně do 4 sloupců, všechny stejně široké */
div#kosik_doporucujeme div.kosik_doporucujeme {
    width: 100%;
    min-width: 0;
    display: flex;
}

div#kosik_doporucujeme div.polozka {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    div#kosik_doporucujeme div.polozky,
    div#kosik_doporucujeme div.zbozi_oblibene_wrap {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    div#kosik_doporucujeme div.polozky,
    div#kosik_doporucujeme div.zbozi_oblibene_wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    div#kosik_doporucujeme div.polozky,
    div#kosik_doporucujeme div.zbozi_oblibene_wrap {
        grid-template-columns: 1fr;
    }
    /* Krok 134: při 1-col šířce (340-400 px) zrušit max-height fotky,
       aby aspect-ratio 1/1 udržel čtverec (jinak jádrová max-height cropovala). */
    div#kosik_doporucujeme div.polozka_foto {
        max-height: none;
    }
}

/* Krok 134: mobil tuning doporučených produktů pod košíkem — menší margin
   nad blokem, tenčí gap mezi kartami, kompaktnější H2. */
@media (max-width: 768px) {
    div#kosik_doporucujeme {
        margin-top: 20px;
    }
    div#kosik_doporucujeme div.polozky,
    div#kosik_doporucujeme div.zbozi_oblibene_wrap {
        gap: 10px;
    }
    div#kosik_doporucujeme h2 {
        font-size: 16px;
        margin: 0 0 10px;
    }
}

/* Cart alert (item added popup) */
div.kosik_alert,
div#kosik_vlozeno {
    background: var(--tpl-content-bg);
    border-radius: var(--tpl-border-radius);
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Order steps */
.objednavka_kroky,
div.objednavka_postup {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 20px 0;
    margin-bottom: 20px;
}

.objednavka_kroky span,
.objednavka_kroky a {
    padding: 10px 20px;
    background: var(--tpl-surface-3);
    border-radius: var(--tpl-border-radius);
    font-weight: 600;
    font-size: 13px;
    color: var(--tpl-text-light);
    text-decoration: none;
}

.objednavka_kroky span.aktivni,
.objednavka_kroky a.aktivni {
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
}

/* ================================================================
   PŘIHLÁŠENÍ + REGISTRACE (body.sekce_login / body.sekce_registrace) —
   sjednotit se zbytkem webu: formulář jako centrovaná karta s taby nahoře
   (Registrace | Přihlášení), zaoblené inputy, žlutá CTA, čisté odkazy.
   Taby + „Zapomenuté heslo" pod submit přidává JS v _body_all.latte.
   ================================================================ */

/* === Anti-FOUC (#1/#2): skrýt syrový auth formulář, dokud ho JS nepřestaví ===
   Bez tohohle probleskne syrová jádrová tabulka (login: malé odkazy + oddělený
   nadpis; registrace: dlouhý formulář se spoustou polí a starými rámečky) a
   teprve pak „skočí" do .tpl-auth-card / minimalizované podoby. Reveal = přidání
   .tpl-auth-card (login) resp. [data-tpl-reg-min] (registrace) enhancementem
   v _body_all.latte, který teď běží HNED (ne až na DOMContentLoaded).
   Nouzové odkrytí po 4 s (animace) = kdyby JS selhal/byl vypnutý, formulář se
   přesto zobrazí (nikdy trvale skrytý). Prohlížeč bez :has pravidlo přeskočí →
   chová se jako dřív. */
@keyframes tpl-auth-failsafe { to { visibility: visible; } }
body.sekce_login form:has(table.login):not(.tpl-auth-card),
body.sekce_registrace form:has(input[type="password"]):not([data-tpl-reg-min]) {
    visibility: hidden;
    animation: tpl-auth-failsafe 0s linear 4s forwards;
}

body.sekce_login h1,
body.sekce_registrace h1 {
    text-align: center;
}

/* Skrýt jádrový DEV nástroj "TEST - předvyplnit formulář" na Registrace
   (inc/registrace_form.php:17). V jádru guardnut přes superadmin_povolene_ip
   → normálním uživatelům se nezobrazí, ale developer/superadmin ho vidí.
   V Latte shopu ho nechceme ani pro dev — dev může použít admin nástroje.
   Skrývá se celý žlutý wrapper (má inline styl bg #fff3cd + border #ffc107). */
body.sekce_registrace input[type="button"][onclick*="shop5_test_registrace"] {
    display: none !important;
}
body.sekce_registrace div:has(> input[onclick*="shop5_test_registrace"]) {
    display: none !important;
}

/* Obsah do centrované kolony. Login úzká (malý formulář), registrace širší
   (velký formulář s mnoha poli). */
body.sekce_login div#levy_prostredni {
    max-width: 480px;
    margin: 20px auto 40px;
}
body.sekce_registrace div#levy_prostredni {
    max-width: 520px;
    margin: 20px auto 40px;
}

/* Auth formulář = karta na střed (login i registrace). display:block + width:100%
   = vyplní kolonu (jádro má form jako inline-block → smrskával se na obsah);
   šířku řídí #levy_prostredni výše. */
body.sekce_login form:has(table.login),
body.sekce_registrace form.tpl-auth-card {
    display: block;
    width: 100%;
    margin: 0 auto 20px;
    background: var(--tpl-content-bg, #fff);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    box-shadow: var(--tpl-shadow);
    padding: 26px 26px 22px;
    box-sizing: border-box;
}

/* Registrace — zrušit tenké hranaté rámečky jádrové tabulky a buněk (mřížka);
   inputy si svůj border ponechají (na ně nesaháme). */
body.sekce_registrace form.tpl-auth-card table,
body.sekce_registrace form.tpl-auth-card tr,
body.sekce_registrace form.tpl-auth-card td,
body.sekce_registrace form.tpl-auth-card th {
    border: none !important;
}

/* Registrace — TOP-ALIGNED labely (výzkum: top-aligned = ~2× rychlejší vyplnění,
   eye-tracking Penzo/UXmatters, Wroblewski; + konzistence s loginem = styl eshopu).
   Jádrová tabulka → vertikální single-column stack: label NAD inputem, full-width. */
body.sekce_registrace form.tpl-auth-card td,
body.sekce_registrace form.tpl-auth-card th {
    display: block;
    width: 100% !important;
    text-align: left;
    padding: 0 !important;
    line-height: 1.3;
}
body.sekce_registrace form.tpl-auth-card td:empty {
    display: none !important;
}
body.sekce_registrace form.tpl-auth-card tr > td:first-child {
    font-weight: 600;
    font-size: 13px;
    color: var(--tpl-text);
    margin: 10px 0 3px;
}
/* Povinná pole (tr.povinne) — červená hvězdička za labelem. Tučně NErozlišuje
   (všechny labely jsou 600), proto marker = *. Text nahoře na to odkazuje
   („…označené hvězdičkou…", přepis v _body_all.latte). */
body.sekce_registrace form.tpl-auth-card tr.povinne > td:first-child::after {
    content: " *";
    color: var(--tpl-stav-chyba);
    font-weight: 700;
}
body.sekce_registrace form.tpl-auth-card input.input_text,
body.sekce_registrace form.tpl-auth-card input[type="text"],
body.sekce_registrace form.tpl-auth-card input[type="password"],
body.sekce_registrace form.tpl-auth-card input[type="email"],
body.sekce_registrace form.tpl-auth-card input[type="tel"] {
    height: 38px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 6px 12px !important;
    font-size: 14px;
    box-sizing: border-box;
}
body.sekce_registrace form.tpl-auth-card select {
    height: 38px !important;
    padding: 4px 8px !important;
}

/* Show/hide heslo (místo „Heslo pro kontrolu") */
.tpl-pw-wrap {
    position: relative;
    display: block;
}
.tpl-pw-wrap input {
    padding-right: 64px !important;
}
.tpl-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--tpl-text-light);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
}
.tpl-pw-toggle:hover {
    color: var(--tpl-text);
    text-decoration: underline;
}

/* Segmentový přepínač (osoba/firma, stejná/jiná adresa) ve stylu objednávky:
   2 karty, vybraná žlutě. Sdílený registrací i Moje údaje. */
.tpl-reg-seg-row td {
    padding: 0 !important;
}
.tpl-reg-seg {
    display: flex;
    gap: 10px;
    margin: 12px 0 4px;
}
.tpl-reg-seg-opt {
    flex: 1 1 0;
    padding: 8px 12px;
    min-height: 40px;
    border: 2px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--tpl-text);
    text-align: center;
    font-family: var(--tpl-font);
    transition: border-color 0.15s, background 0.15s;
}
.tpl-reg-seg-opt:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint-soft);
}
.tpl-reg-seg-opt.tpl-active {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint);
    box-shadow: 0 0 0 1px var(--tpl-primary) inset;
}

/* Registrace — captcha: kód (obrázek) VEDLE inputu, ne nad ním (flex řádek) */
body.sekce_registrace form.tpl-auth-card span.antispam {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.sekce_registrace form.tpl-auth-card span.antispam img {
    flex: 0 0 auto;
}
body.sekce_registrace form.tpl-auth-card span.antispam input[type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
}

/* Registrace — ARES: IČ input + tlačítko „Načíst z Aresu" na jednom řádku
   (input.input_text width:100% jinak tlačítko shodí pod). */
body.sekce_registrace form.tpl-auth-card div.ares {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
body.sekce_registrace form.tpl-auth-card div.ares input#ares_ic {
    flex: 1 1 auto;
    width: auto !important;
}
body.sekce_registrace form.tpl-auth-card div.ares input[type="button"] {
    flex: 0 0 auto;
    width: auto !important;
    height: 38px;
    padding: 0 14px;
    white-space: nowrap;
    cursor: pointer;
}

/* Registrace — prominentní full-width CTA „Vytvořit účet" (konverze) */
body.sekce_registrace form.tpl-auth-card input[type="submit"] {
    width: 100% !important;
    max-width: none !important;
    height: 48px !important;
    margin-top: 18px;
    font-size: 16px !important;
    font-weight: 700;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
}

/* #5: legenda hvězdiček (JS ji přesune ke submitu) — odbarvená (ne červená
   nahoře), drobná, tlumená, ať tolik neruší. */
body.sekce_registrace .tpl-reg-hint-row td { padding: 0 !important; }
body.sekce_registrace .tpl-reg-hint {
    font-size: 12px;
    color: var(--tpl-text-light);
    text-align: left;
    margin: 6px 0 0;
}

/* #4: privacy vysvětlivka („Vaše osobní údaje zpracováváme…") — JS ji přesune
   POD submit jako drobný centrovaný fine-print. */
body.sekce_registrace .tpl-reg-fineprint-row td { padding: 0 !important; }
body.sekce_registrace .tpl-reg-fineprint {
    font-size: 12px;
    color: var(--tpl-text-light);
    line-height: 1.45;
    text-align: center;
    margin: 12px 0 0;
}

/* ================================================================
   #6: ÚČET „Moje údaje" (body.sekce_moje_udaje) — jádrová table.adresa byla
   rozhozená (úzký levý sloupec, nekonzistentní labely). Sjednotit s registrací:
   centrovaná karta, top-aligned labely, full-width inputy, sekční nadpisy.
   ================================================================ */
body.sekce_moje_udaje h1 { text-align: center; }
body.sekce_moje_udaje div#levy_prostredni { max-width: 620px; margin: 20px auto 40px; }
body.sekce_moje_udaje div#levy_prostredni form {
    background: var(--tpl-content-bg, #fff);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    box-shadow: var(--tpl-shadow);
    padding: 26px 26px 22px;
    box-sizing: border-box;
}
/* Jádrová mřížka → vertikální single-column stack (label NAD inputem). */
body.sekce_moje_udaje table.adresa,
body.sekce_moje_udaje table.adresa tbody,
body.sekce_moje_udaje table.adresa tr,
body.sekce_moje_udaje table.adresa td,
body.sekce_moje_udaje table.adresa th {
    display: block;
    width: 100% !important;
    border: none !important;
    text-align: left;
    padding: 0 !important;
    box-sizing: border-box;
}
body.sekce_moje_udaje table.adresa td:empty { display: none !important; }
/* Label = 1. buňka řádku (druhá buňka = input). */
body.sekce_moje_udaje table.adresa tr > td:first-child {
    font-weight: 600;
    font-size: 13px;
    color: var(--tpl-text);
    margin: 5px 0 2px;
    line-height: 1.25;
}
body.sekce_moje_udaje table.adresa input[type="text"],
body.sekce_moje_udaje table.adresa input[type="email"],
body.sekce_moje_udaje table.adresa input[type="tel"],
body.sekce_moje_udaje table.adresa input[type="password"] {
    height: 34px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 4px 11px !important;
    font-size: 14px;
    box-sizing: border-box;
}
body.sekce_moje_udaje table.adresa select {
    height: 34px !important;
    width: 100% !important;
    padding: 3px 8px !important;
}
/* Sekční nadpisy (Kontaktní údaje / Fakturační / Doručovací) = řádky bez inputu;
   text je v pravé buňce, levá je prázdná (skrytá výše). */
body.sekce_moje_udaje table.adresa tr:not(:has(input)):not(:has(select)):not(:has(textarea)) > td:not(:empty) {
    font-weight: 700;
    font-size: 14px;
    color: var(--tpl-text);
    margin: 13px 0 5px;
    padding-bottom: 5px !important;
    border-bottom: 1px solid var(--tpl-card-border) !important;
}
/* Pomocná tlačítka ve formu (např. načíst z ARESu). */
body.sekce_moje_udaje table.adresa input[type="button"] {
    height: 38px;
    padding: 0 14px;
    margin-top: 4px;
    cursor: pointer;
    white-space: nowrap;
}
/* Prominentní CTA „Uložit". */
body.sekce_moje_udaje table.adresa input[type="submit"] {
    width: 100% !important;
    max-width: none !important;
    height: 46px !important;
    margin-top: 22px;
    font-size: 15px !important;
    font-weight: 700;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
}

/* ================================================================
   #6: OSTATNÍ ÚČTOVÉ STRÁNKY — přehled účtu, změna hesla, objednávky,
   reklamace. Sjednotit: centrovaný obsah, karty, čitelné tabulky.
   ================================================================ */
body.sekce_uzivatel h1,
body.sekce_moje_heslo h1,
body.sekce_moje_objednavky h1,
body.sekce_moje_reklamace h1 { text-align: center; }

/* Odhlášení = čistá vycentrovaná hláška. Skrýt redundantní nadpis „Odhlášení"
   a jádrový seznam odkazů (přihlásit/registrace) → zůstane jen samotná zpráva
   (vlastní text po odhlášení). */
body.sekce_logout div#levy_prostredni { max-width: 680px; margin: 30px auto 50px; }
body.sekce_logout div#sekce { text-align: center; }
body.sekce_logout div#sekce > h1 { display: none; }
body.sekce_logout div#sekce > ul { display: none; }

body.sekce_uzivatel div#levy_prostredni,
body.sekce_moje_heslo div#levy_prostredni { max-width: 640px; margin: 20px auto 40px; }
body.sekce_moje_objednavky div#levy_prostredni,
body.sekce_moje_reklamace div#levy_prostredni { max-width: 860px; margin: 20px auto 40px; }

/* --- Přehled účtu (rozcestník) = jádrový <ul> odkazů (Moje údaje, objednávky,
   reklamace, změna hesla, odhlásit) → dlaždice. První <li> = e-mail (bez odkazu)
   jako záhlaví. --- */
body.sekce_uzivatel div#levy_prostredni ul:has(a[href*="moje_udaje"]) {
    list-style: none !important;
    margin: 22px 0 !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
body.sekce_uzivatel div#levy_prostredni ul:has(a[href*="moje_udaje"]) > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.sekce_uzivatel div#levy_prostredni ul:has(a[href*="moje_udaje"]) > li:not(:has(a)) {
    grid-column: 1 / -1;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    color: var(--tpl-text);
    margin-bottom: 4px !important;
}
body.sekce_uzivatel div#levy_prostredni ul:has(a[href*="moje_udaje"]) > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 16px;
    text-align: center;
    background: var(--tpl-content-bg, #fff);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    color: var(--tpl-text) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 15px;
    transition: border-color 0.15s, background 0.15s;
}
body.sekce_uzivatel div#levy_prostredni ul:has(a[href*="moje_udaje"]) > li > a:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint-soft);
}
body.sekce_uzivatel div#levy_prostredni ul:has(a[href*="moje_udaje"]) > li > a[href*="logout"] {
    color: var(--tpl-stav-chyba) !important;
}

/* --- Změna hesla = form (3 pole) → karta, top-aligned labely, full-width. --- */
body.sekce_moje_heslo div#levy_prostredni form {
    background: var(--tpl-content-bg, #fff);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    box-shadow: var(--tpl-shadow);
    padding: 26px;
    box-sizing: border-box;
}
body.sekce_moje_heslo div#levy_prostredni form table,
body.sekce_moje_heslo div#levy_prostredni form tbody,
body.sekce_moje_heslo div#levy_prostredni form tr,
body.sekce_moje_heslo div#levy_prostredni form td,
body.sekce_moje_heslo div#levy_prostredni form th {
    display: block;
    width: 100% !important;
    border: none !important;
    text-align: left;
    padding: 0 !important;
    box-sizing: border-box;
}
body.sekce_moje_heslo div#levy_prostredni form td:empty { display: none !important; }
body.sekce_moje_heslo div#levy_prostredni form tr > td:first-child {
    font-weight: 600;
    font-size: 13px;
    color: var(--tpl-text);
    margin: 10px 0 3px;
}
body.sekce_moje_heslo div#levy_prostredni form input[type="password"] {
    height: 38px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 6px 12px !important;
    font-size: 14px;
    box-sizing: border-box;
}
body.sekce_moje_heslo div#levy_prostredni form input[type="submit"] {
    width: 100% !important;
    max-width: none !important;
    height: 46px !important;
    margin-top: 18px;
    font-size: 15px !important;
    font-weight: 700;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
}

/* --- Objednávky = responzivní karty (.uo_seznam/.uo_karta/.uo_btn; redesign
   7/2026). POZOR: layout těchto karet je JEN v jádrovém css/default.css, které
   latte theme NENAČÍTÁ → bez tohohle jsou karty úplně nestylované (block, slitý
   text). Portujeme sem layout z default.css + mapujeme barvy na theme paletu
   (funguje i na tmavé). Konverzní .submit („Zaplatit/Opakovat") = CTA (v jádru
   jen zelený fallback). --- */
div.uo_seznam { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
div.uo_karta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--tpl-content-bg, #fff);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    box-shadow: var(--tpl-shadow, 0 1px 2px rgba(40, 50, 60, 0.05));
    box-sizing: border-box;
}
div.uo_info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 16px;
    align-items: baseline;
    flex: 1 1 260px;
    min-width: 220px;
}
span.uo_popisek {
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--tpl-text-light); white-space: nowrap;
}
span.uo_hodnota { font-size: 14px; color: var(--tpl-text); }
span.uo_cislo { font-size: 15px; font-weight: 700; color: var(--tpl-text); }
span.uo_cas { font-size: 12px; color: var(--tpl-text-light); }
span.uo_pilly { display: flex; flex-wrap: wrap; gap: 4px; }
span.uo_pill {
    display: inline-flex; align-items: center; padding: 3px 9px;
    border-radius: 999px; background: var(--tpl-surface-2);
    border: 1px solid var(--tpl-card-border);
    font-size: 12px; font-weight: 700; color: var(--tpl-text); white-space: nowrap;
}
span.uo_cena_bez { font-size: 13px; color: var(--tpl-text-light); white-space: nowrap; }
span.uo_cena { font-size: 16px; font-weight: 700; color: var(--tpl-text); white-space: nowrap; }
span.uo_polozky {
    font-size: 13px; color: var(--tpl-text-light); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%;
}
div.uo_akce_zona {
    display: flex; flex-direction: column; gap: 8px;
    align-items: stretch; flex: 0 0 300px; width: 300px;   /* pevná šířka → všechna tlačítka stejně dlouhá napříč kartami */
}
a.uo_btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: calc(var(--tpl-border-radius) - 3px);
    border: 1px solid var(--tpl-card-border); background: var(--tpl-content-bg, #fff);
    color: var(--tpl-text); font-size: 13px; font-weight: 700;
    text-decoration: none; line-height: 1.2; white-space: nowrap;
    box-sizing: border-box; cursor: pointer;
    box-shadow: none !important;   /* bez stínu — plochá tlačítka */
}
a.uo_btn:hover { background: var(--tpl-surface-2); color: var(--tpl-text); text-decoration: none; }
a.uo_btn svg { flex: 0 0 auto; }
/* konverzní tlačítka — CTA barvy + zopakovaná velikost (jinak by je obecné
   .submit styly theme zvětšily oproti ostatním). */
a.uo_btn.submit {
    background: var(--tpl-cta-bg); border-color: var(--tpl-cta-bg); color: var(--tpl-cta-text);
    padding: 8px 12px; font-size: 13px; font-weight: 700;
    line-height: 1.2; text-transform: none; letter-spacing: normal; margin: 0;
}
a.uo_btn.submit:hover { filter: brightness(0.95); color: var(--tpl-cta-text); }
a.uo_btn_primarni { background: var(--tpl-primary); border-color: var(--tpl-primary); color: var(--tpl-primary-text); }
a.uo_btn_tlumene { color: var(--tpl-text-light); }

/* Vyhledávání v objednávkách (form.uo_hledani) — input + „Hledat" jako JEDEN
   celek: input zaoblený jen vlevo, tlačítko jen vpravo → uprostřed rovné
   napojení. Input roztažený, aby byl celý placeholder vidět. */
form.uo_hledani {
    display: flex; align-items: stretch;
    width: 100%; max-width: 520px; margin: 0 0 16px;
}
form.uo_hledani input[type="text"] {
    flex: 1 1 auto; min-width: 0; height: 42px; box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid var(--tpl-card-border); border-right: none;
    border-radius: var(--tpl-border-radius) 0 0 var(--tpl-border-radius);
    background: var(--tpl-content-bg, #fff); color: var(--tpl-text);
    font-size: 14px; font-family: var(--tpl-font); outline: none; box-shadow: none;
}
form.uo_hledani input[type="text"]:focus { border-color: var(--tpl-primary); }
form.uo_hledani input.submit {
    flex: 0 0 auto; height: 42px; box-sizing: border-box; padding: 0 22px;
    border: none; border-radius: 0 var(--tpl-border-radius) var(--tpl-border-radius) 0;
    background: var(--tpl-cta-bg); color: var(--tpl-cta-text);
    font-size: 14px; font-weight: 700; cursor: pointer; margin: 0;
    text-transform: none; letter-spacing: normal;
    box-shadow: none !important; transition: filter var(--tpl-transition);
}
form.uo_hledani input.submit:hover { filter: brightness(0.95); }
a.uo_hledani_zrusit {
    align-self: center; margin-left: 12px; white-space: nowrap;
    color: var(--tpl-text-light); font-size: 13px;
}
a.uo_hledani_zrusit:hover { color: var(--tpl-text); }

@media (max-width: 700px) {
    div.uo_karta { padding: 10px 12px; gap: 10px 14px; }
    div.uo_info { gap: 4px 12px; }
    div.uo_akce_zona { flex: 0 0 auto; width: 100%; min-width: 0; }   /* mobil = plná šířka (zruší pevných 300px) */
    a.uo_btn, a.uo_btn.submit { padding: 8px 10px; font-size: 12px; }
}

/* ================================================================
   REKLAMACE (RMA) — univerzální design pro všechny eshopy.
   Sekce: moje_reklamace (seznam v účtovém shellu), reklamace_nova
   (formulář), reklamace_detail2 + moje_reklamace_detail (detail),
   moje_reklamace_nova (výběr zboží). Unikátní třídy .reklamace_* stylujeme
   bez prefixu (jinde se nevyskytují); obecné prvky přes body[class*=reklamace].
   ================================================================ */
/* Standalone reklamační stránky = vycentrovaná bílá karta, bez postranních sloupců. */
body.sekce_reklamace_nova div#levy_prostredni,
body.sekce_reklamace_detail2 div#levy_prostredni,
body.sekce_moje_reklamace_detail div#levy_prostredni,
body.sekce_moje_reklamace_nova div#levy_prostredni { max-width: 860px; margin: 20px auto 40px; }
body.sekce_reklamace_nova div#levy_prostredni > #levy_sloupec,
body.sekce_reklamace_detail2 div#levy_prostredni > #levy_sloupec,
body.sekce_moje_reklamace_detail div#levy_prostredni > #levy_sloupec,
body.sekce_moje_reklamace_nova div#levy_prostredni > #levy_sloupec { display: none; }
body.sekce_reklamace_nova div#prostredek,
body.sekce_reklamace_detail2 div#prostredek,
body.sekce_moje_reklamace_detail div#prostredek,
body.sekce_moje_reklamace_nova div#prostredek {
    background: var(--tpl-content-bg, #fff); border-radius: var(--tpl-border-radius);
    padding: 32px 36px; box-sizing: border-box;
}

/* Nápověda k reklamaci = schovaná pod rozklikávacím tlačítkem (JS ji zabalí). */
.tpl-rek-help-btn {
    display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 4px;
    padding: 9px 16px; background: var(--tpl-surface-2); border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius); color: var(--tpl-text); font-weight: 600;
    font-size: 13px; cursor: pointer; font-family: var(--tpl-font);
}
.tpl-rek-help-btn:hover { background: var(--tpl-primary-tint-soft); }
.tpl-rek-help { display: none; margin: 10px 0 4px; padding: 16px 18px; background: var(--tpl-surface-2); border-radius: var(--tpl-border-radius); font-size: 14px; line-height: 1.65; color: var(--tpl-text-light); }
.tpl-rek-help.open { display: block; }

/* Nadpisy: první = titulek stránky, další = sekční hlavičky */
body[class*="reklamace"] div#prostredek h1,
body[class*="reklamace"] div#prostredek > h2:first-child {
    font-size: 22px; font-weight: 600; margin: 0 0 10px; padding: 0; border: none; text-align: left;
}
body[class*="reklamace"] div#prostredek h2 {
    font-size: 16px; font-weight: 700; margin: 32px 0 15px;
}
body[class*="reklamace"] div#prostredek p { line-height: 1.6; }

/* „Přidat reklamaci" odkaz → CTA tlačítko (seznam) */
body.sekce_moje_reklamace div#prostredek a[href*="moje_reklamace_nova"] {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px;
    background: var(--tpl-cta-bg); color: var(--tpl-cta-text) !important; border-radius: var(--tpl-border-radius);
    text-decoration: none !important; font-weight: 700; font-size: 14px; margin: 6px 0 18px;
}
body.sekce_moje_reklamace div#prostredek a[href*="moje_reklamace_nova"]:hover { filter: brightness(0.95); }

/* Seznam: table.katalog → řádky-karty */
body[class*="reklamace"] table.katalog { width: 100%; border-collapse: collapse; margin-top: 8px; }
body[class*="reklamace"] table.katalog td { padding: 13px 10px; font-size: 14px; vertical-align: middle; border-bottom: 1px solid var(--tpl-card-border); background: transparent; }
body[class*="reklamace"] table.katalog tr td:first-child { padding-left: 0; }
body[class*="reklamace"] table.katalog tr td:last-child { text-align: right; padding-right: 0; }
body[class*="reklamace"] table.katalog a { color: var(--tpl-primary); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Seznam: .reklamace_prehled → plochý řádek s vlasovým oddělovačem (kontakt skryt) */
.reklamace_prehled { border-bottom: 1px solid var(--tpl-card-border); padding: 16px 0; }
.reklamace_prehled:last-child { border-bottom: none; }
.reklamace_prehled h1, .reklamace_prehled h2 { font-size: 15px !important; font-weight: 700; margin: 0 0 6px !important; padding: 0 !important; border: none !important; }
.reklamace_prehled > div { font-size: 13px; color: var(--tpl-text-light); margin: 2px 0; }
.reklamace_prehled > div b { color: var(--tpl-text); }
.reklamace_prehled ul, .reklamace_prehled h2:has(+ ul) { display: none; }
.reklamace_prehled > a { display: inline-block; margin-top: 8px; color: var(--tpl-primary) !important; font-weight: 700; font-size: 13px; text-decoration: none !important; }

/* Formulář nové reklamace: položky + akce */
.reklamace_polozka { border-bottom: 1px solid var(--tpl-card-border); padding: 20px 0; }
.reklamace_polozka:last-of-type { border-bottom: none; }
.reklamace_polozka_label { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; }
.reklamace_polozka_label input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--tpl-primary); flex: 0 0 auto; }
.reklamace_akce { margin: 16px 0 0 31px; }
.reklamace_akce > div { margin: 10px 0; }
.reklamace_akce label { margin-left: 8px; font-size: 14px; }
.reklamace_akce input.radio { accent-color: var(--tpl-primary); }
/* Blok voleb (akce + důvod) je sbalený, dokud zákazník položku nezaškrtne.
   Jádrový reklamace_vybrat() řeší required atributy; tohle jen vizuální sbalení
   (funguje i pro výchozí stav, kdy jádro blok nechává viditelný). */
.reklamace_polozka .reklamace_akce { display: none; }
.reklamace_polozka:has(input[type="checkbox"]:checked) .reklamace_akce { display: block; }
[class^="nadpis_duvod"] h2, [class*=" nadpis_duvod"] h2 { font-size: 12px !important; text-transform: uppercase; letter-spacing: .05em; color: var(--tpl-text-light); font-weight: 700; margin: 18px 0 8px !important; padding: 0 !important; border: none !important; }

/* Formulář: údaje = 2 sloupce (vzdušné) */
.reklamace_udaje { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.reklamace_udaje > div { display: flex; flex-direction: column; }
.reklamace_udaje label { font-size: 13px; color: var(--tpl-text-light); margin-bottom: 6px; }
.reklamace_udaje .povinne label::after { content: " *"; color: var(--tpl-stav-chyba); }

/* Formulář: pole (přebít inline width:300px) */
body.sekce_reklamace_nova div#prostredek input.input_text,
body.sekce_reklamace_nova div#prostredek input[type="text"],
body.sekce_reklamace_nova div#prostredek input[type="email"],
body.sekce_reklamace_nova div#prostredek textarea,
body.sekce_reklamace_nova div#prostredek select,
body.sekce_moje_reklamace_nova div#prostredek input.input_text,
body.sekce_moje_reklamace_nova div#prostredek select {
    width: 100% !important; max-width: 480px; box-sizing: border-box; height: auto;
    padding: 11px 14px; border: 1px solid #ddd; border-radius: var(--tpl-border-radius);
    background: #fff; font-size: 14px; font-family: var(--tpl-font); color: var(--tpl-text);
    outline: none; margin: 0;
}
body.sekce_reklamace_nova div#prostredek textarea { max-width: none; min-height: 110px; resize: vertical; }
body.sekce_reklamace_nova div#prostredek .reklamace_udaje input { max-width: none; }
body.sekce_reklamace_nova div#prostredek input:focus,
body.sekce_reklamace_nova div#prostredek textarea:focus,
body.sekce_reklamace_nova div#prostredek select:focus { border-color: var(--tpl-primary); }

/* fieldset (fotky) */
body[class*="reklamace"] fieldset { border: none; padding: 0; margin: 26px 0 0; }
body[class*="reklamace"] fieldset legend { font-size: 16px; font-weight: 700; padding: 0; }

/* GDPR + submit */
.reklamace_ou { margin: 22px 0 0; font-size: 13px; color: var(--tpl-text-light); }
.reklamace_submit { margin-top: 24px; }
.reklamace_submit input.submit, .reklamace_submit input[type="submit"] {
    padding: 13px 30px; background: var(--tpl-cta-bg); color: var(--tpl-cta-text);
    border: none; border-radius: var(--tpl-border-radius); font-size: 15px; font-weight: 700;
    cursor: pointer; box-shadow: none !important;
}
.reklamace_submit input.submit:hover { filter: brightness(0.95); }

/* Detail (reklamace_detail2 přes prehled_do_mailu) */
body[class*="reklamace"] div#prostredek ul { padding-left: 18px; }
.reklamace_zbozi { border-bottom: 1px solid var(--tpl-card-border); padding: 14px 0; }
.reklamace_zbozi:last-of-type { border-bottom: none; }
.reklamace_zbozi h2 { font-size: 15px !important; margin: 0 0 6px !important; padding: 0 !important; border: none !important; }
.reklamace_akce_prehled { font-size: 14px; margin: 4px 0; }
.reklamace_duvod { font-size: 14px; font-style: italic; color: var(--tpl-text-light); background: transparent; border-left: 3px solid var(--tpl-card-border); border-radius: 0; padding: 2px 0 2px 12px; margin-top: 8px; }
.reklamace_poznamka { padding: 4px 0 4px 14px !important; background: transparent !important; color: var(--tpl-text) !important; border-left: 3px solid var(--tpl-primary) !important; border-radius: 0 !important; margin: 12px 0 !important; }
.reklamace_poznamka_datum { font-size: 12px; color: var(--tpl-text-light); margin-bottom: 4px; }
.reklamace_fotky span { display: inline-block; margin: 0 8px 8px 0; }
.reklamace_fotky img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--tpl-card-border); }

/* Legacy detail (moje_reklamace_detail) = holá tabulka → čitelný rozpis */
body.sekce_moje_reklamace_detail div#prostredek table td { padding: 6px 12px 6px 0; font-size: 14px; vertical-align: top; }
body.sekce_moje_reklamace_detail div#prostredek table td:first-child { color: var(--tpl-text-light); white-space: nowrap; }

/* Výběr zboží k reklamaci (moje_reklamace_nova) — čistý kompaktní krok:
   zpět odkaz decentní, select sladěný, „>>" → CTA „Pokračovat" (text mění JS). */
body.sekce_moje_reklamace_nova div#prostredek form { max-width: 460px; color: var(--tpl-text); font-size: 14px; line-height: 1.9; }
body.sekce_moje_reklamace_nova div#prostredek select { margin: 10px 0 18px; }
body.sekce_moje_reklamace_nova div#prostredek input.submit {
    display: inline-flex; align-items: center; gap: 7px; padding: 12px 28px;
    background: var(--tpl-cta-bg); color: var(--tpl-cta-text); border: none;
    border-radius: var(--tpl-border-radius); font-size: 15px; font-weight: 700;
    cursor: pointer; box-shadow: none !important;
}
body.sekce_moje_reklamace_nova div#prostredek input.submit:hover { filter: brightness(0.95); }
body.sekce_moje_reklamace_nova div#prostredek a[href$="=moje_reklamace"] {
    display: inline-block; margin: 2px 0 18px; color: var(--tpl-text-light);
    text-decoration: none; font-size: 13px; font-weight: 600;
}
body.sekce_moje_reklamace_nova div#prostredek a[href$="=moje_reklamace"]:hover { color: var(--tpl-text); }

/* Seznam reklamací (moje_reklamace) — jen aktuální reklamace. Nová reklamace se
   podává u konkrétní objednávky, ne samostatně → skryjeme starý samostatný odkaz
   „Přidat reklamaci" i legacy tabulku (stará verze) a přidáme decentní poznámku
   (vkládá JS jako .tpl-rek-note). Třídní selektor .sekce_moje_reklamace cílí
   přesně na výpis, ne na _nova / _detail. */
body.sekce_moje_reklamace div#prostredek a[href$="=moje_reklamace_nova"],
body.sekce_moje_reklamace div#prostredek table.katalog { display: none; }
body.sekce_moje_reklamace .tpl-rek-note {
    margin: 2px 0 24px; padding: 4px 0 4px 14px;
    border-left: 3px solid var(--tpl-cta-bg, #FFC000);
    color: var(--tpl-text-light); font-size: 13px; line-height: 1.55;
}
body.sekce_moje_reklamace .tpl-rek-note a { color: var(--tpl-text); font-weight: 600; text-decoration: none; }
body.sekce_moje_reklamace .tpl-rek-note a:hover { text-decoration: underline; }

/* ================================================================
   #6b: ÚČTOVÝ LAYOUT — levé záložky + obsah jako panel vpravo. Aktivní
   záložka se „napojí" na panel (splyne s jeho levým okrajem = přechod).
   Nadpis spanuje nad shell. JS (_body_all.latte) staví .tpl-acc-shell,
   přesune h1 nad shell a přidá .tpl-acc-built (anti-FOUC reveal).
   ================================================================ */
body.sekce_moje_udaje div#levy_prostredni,
body.sekce_moje_objednavky div#levy_prostredni,
body.sekce_moje_reklamace div#levy_prostredni,
body.sekce_moje_heslo div#levy_prostredni { max-width: 1040px; margin: 20px auto 40px; }

/* kategorie-nav v obsahovém sloupci na účtu nechceme (sidebar ho nahrazuje) */
body.sekce_moje_udaje div#levy_prostredni > #levy_sloupec,
body.sekce_moje_objednavky div#levy_prostredni > #levy_sloupec,
body.sekce_moje_reklamace div#levy_prostredni > #levy_sloupec,
body.sekce_moje_heslo div#levy_prostredni > #levy_sloupec { display: none; }

/* Anti-FOUC: než JS přeskládá layout, skrýt (jinak problikne původní stránka). */
@keyframes tpl-acc-reveal { to { visibility: visible; } }
body.sekce_moje_udaje div#levy_prostredni:not(.tpl-acc-built),
body.sekce_moje_objednavky div#levy_prostredni:not(.tpl-acc-built),
body.sekce_moje_reklamace div#levy_prostredni:not(.tpl-acc-built),
body.sekce_moje_heslo div#levy_prostredni:not(.tpl-acc-built) {
    visibility: hidden;
    animation: tpl-acc-reveal 0s linear 3s forwards;
}

/* Nadpis nad shell (spanuje), vlevo. */
div#levy_prostredni.tpl-acc-built > h1 {
    text-align: left !important;
    margin: 0 0 10px !important;
}

/* Celý účet = JEDNA karta: vlevo sloupec záložek (šedý podklad), vpravo obsah
   (bílý). Aktivní záložka je bílá jako obsah → plynule „přechází" do panelu
   (žádný šev), levý akcent v primary. */
.tpl-acc-shell { display: flex; align-items: flex-start; gap: 0; width: 100%; }

/* obsah = KARTA (tělo). Napojí se na ni jen vybraná záložka. Bez borderu i stínu
   — jen bílá plocha na béžovém pozadí. Levá hrana rovná (levé rohy bez zaoblení),
   ať se na ni záložka napojuje čistě bez kolize se zaoblením karty. */
.tpl-acc-shell > #prostredek {
    flex: 1 1 auto; min-width: 0;
    background: var(--tpl-content-bg, #fff);
    border-radius: var(--tpl-border-radius);   /* všechny rohy zaoblené; napojení záložky řeší vykrojené fillety */
    padding: 20px 24px;
    position: relative;
}

.tpl-acc-nav {
    flex: 0 0 222px;
    display: flex; flex-direction: column; gap: 10px;
    position: relative; z-index: 2;
}
/* NEvybrané = odpojené plovoucí bílé dlaždice, zaoblené, bez borderu i stínu. */
.tpl-acc-navlink {
    display: block;
    margin-right: 16px;                       /* mezera = odpojeno od obsahu */
    padding: 11px 16px;
    background: var(--tpl-content-bg, #fff);
    border-radius: var(--tpl-border-radius);  /* všechny rohy zaoblené */
    color: var(--tpl-text) !important; text-decoration: none !important;
    font-weight: 600; font-size: 14px; line-height: 1.3;
    transition: background 0.15s, margin 0.18s;
}
.tpl-acc-navlink:hover { background: var(--tpl-primary-tint-soft); }
/* VYBRANÁ = splyne s obsahem (bílá do bílé). Zaoblená jen vlevo, přesahuje do
   karty (margin -24, padding-right kryje přesah), sedí na stejné bílé ploše →
   švy nevidět. --tpl-acc-r = poloměr zaoblení / vykrojení, --tpl-acc-ov = přesah. */
.tpl-acc-navlink.tpl-active {
    --tpl-acc-r: 16px;
    --tpl-acc-ov: 24px;
    background: var(--tpl-content-bg, #fff);
    border-radius: var(--tpl-acc-r) 0 0 var(--tpl-acc-r);
    margin-right: calc(-1 * var(--tpl-acc-ov));
    padding-right: calc(16px + var(--tpl-acc-ov));   /* text mimo přesah (základní 16 + přesah) */
    font-weight: 700;
    position: relative; z-index: 3;
}
/* Vnitřní (konkávní) rohy nad a pod položkou, přesně na levé hraně karty: box
   R×R plněný bílou (jako karta), do kterého radial-gradient vykrojí krémovou
   čtvrtkružnici. Kotva right:přesah → box leží přesně na hraně karty. */
.tpl-acc-navlink.tpl-active::before,
.tpl-acc-navlink.tpl-active::after {
    content: "";
    position: absolute;
    right: var(--tpl-acc-ov);
    width: var(--tpl-acc-r); height: var(--tpl-acc-r);
    pointer-events: none;
}
.tpl-acc-navlink.tpl-active::before {          /* horní roh */
    top: calc(-1 * var(--tpl-acc-r));
    background: radial-gradient(var(--tpl-acc-r) var(--tpl-acc-r) at 0 0,
        var(--tpl-body-bg) 0 var(--tpl-acc-r), var(--tpl-content-bg, #fff) var(--tpl-acc-r));
}
.tpl-acc-navlink.tpl-active::after {           /* dolní roh */
    bottom: calc(-1 * var(--tpl-acc-r));
    background: radial-gradient(var(--tpl-acc-r) var(--tpl-acc-r) at 0 100%,
        var(--tpl-body-bg) 0 var(--tpl-acc-r), var(--tpl-content-bg, #fff) var(--tpl-acc-r));
}
/* První (horní) záložka je zarovnaná do roviny s horní hranou karty → nahoře
   rovná, bez horního vykrojení (jinak by vznikl bílý „zub" nad kartou). */
.tpl-acc-navlink.tpl-active:first-child::before { content: none; }
.tpl-acc-navlink-logout { color: var(--tpl-stav-chyba) !important; margin-top: 6px; }

/* Formuláře uvnitř panelu = ploché (nemají vlastní kartu). */
body.sekce_moje_udaje .tpl-acc-shell > #prostredek form,
body.sekce_moje_heslo .tpl-acc-shell > #prostredek form {
    background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 0 !important;
}
body.sekce_moje_udaje .tpl-acc-shell > #prostredek form { max-width: 780px; }
body.sekce_moje_heslo .tpl-acc-shell > #prostredek form { max-width: 460px; }

/* Moje údaje = 2 sloupce (šetří výšku, ať to není tak dlouhé). Sekční nadpisy
   a tlačítka přes celou šířku. */
body.sekce_moje_udaje .tpl-acc-shell > #prostredek table.adresa {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    align-items: start;
}
body.sekce_moje_udaje .tpl-acc-shell > #prostredek table.adresa tbody { display: contents !important; }
body.sekce_moje_udaje .tpl-acc-shell > #prostredek table.adresa tr {
    grid-column: auto;
    align-self: start;
}
body.sekce_moje_udaje .tpl-acc-shell > #prostredek table.adresa tr:not(:has(input)):not(:has(select)):not(:has(textarea)),
body.sekce_moje_udaje .tpl-acc-shell > #prostredek table.adresa tr:has(input[type="submit"]),
body.sekce_moje_udaje .tpl-acc-shell > #prostredek table.adresa tr:has(input[type="button"]),
body.sekce_moje_udaje .tpl-acc-shell > #prostredek table.adresa tr.tpl-uda-more-row,
body.sekce_moje_udaje .tpl-acc-shell > #prostredek table.adresa tr.tpl-reg-seg-row {
    grid-column: 1 / -1;
}

/* Telefon (fakturační i doručovací) = jeden input (prefix | číslo) s dělicí
   čárou — dva jádrové inputy za sebou, wrapper vypadá jako jedno pole. */
body.sekce_moje_udaje .tpl-acc-shell > #prostredek td:has(input[name$="telefon_stat]"]) {
    display: flex; align-items: stretch; height: 34px;
    border: 1px solid rgb(221, 221, 221) !important;   /* = border inputů; přebít starší border:none */
    border-radius: var(--tpl-border-radius) !important;
    background: var(--tpl-content-bg, #fff);
    overflow: hidden; box-sizing: border-box;
}
body.sekce_moje_udaje .tpl-acc-shell > #prostredek td:has(input[name$="telefon_stat]"]) input {
    border: none !important; border-radius: 0 !important;
    height: 100% !important; background: transparent !important; margin: 0 !important;
}
body.sekce_moje_udaje .tpl-acc-shell > #prostredek td:has(input[name$="telefon_stat]"]) input[name$="telefon_stat]"] {
    flex: 0 0 62px !important; width: 62px !important; min-width: 0 !important;
    text-align: center; padding: 6px 6px !important;
    border-right: 1px solid rgb(221, 221, 221) !important;   /* dělicí čára = jako border inputů */
}
body.sekce_moje_udaje .tpl-acc-shell > #prostredek td:has(input[name$="telefon_stat]"]) input:not([name$="_stat]"]) {
    flex: 1 1 auto !important; width: auto !important;
}

/* „Další údaje" — rozbalovací tlačítko pro nepoužívaná pole (www, číslo účtu). */
body.sekce_moje_udaje .tpl-acc-shell > #prostredek .tpl-uda-more-row { margin-top: 4px; }
body.sekce_moje_udaje .tpl-acc-shell > #prostredek .tpl-uda-more-btn {
    background: transparent; border: none; padding: 6px 0;
    color: var(--tpl-text-light); font-weight: 600; font-size: 13px;
    cursor: pointer; font-family: var(--tpl-font);
}
body.sekce_moje_udaje .tpl-acc-shell > #prostredek .tpl-uda-more-btn:hover { color: var(--tpl-text); text-decoration: underline; }

@media (max-width: 760px) {
    body.sekce_moje_udaje div#levy_prostredni,
    body.sekce_moje_objednavky div#levy_prostredni,
    body.sekce_moje_reklamace div#levy_prostredni,
    body.sekce_moje_heslo div#levy_prostredni { max-width: none; }
    .tpl-acc-shell { flex-direction: column; }
    .tpl-acc-nav {
        flex: none; width: 100%;
        flex-direction: row; flex-wrap: wrap; gap: 0;
        padding: 4px;
        border-bottom: 1px solid var(--tpl-card-border);
    }
    .tpl-acc-navlink { flex: 1 1 auto; text-align: center; border-left: none; border-bottom: 3px solid transparent; }
    .tpl-acc-navlink.tpl-active { border-left: none; border-bottom-color: var(--tpl-primary); }
    .tpl-acc-navlink-logout { margin-top: 0; }
}

/* Registrace — tlačítko sekce „Moje údaje" (progresivní odhalení; úvod = jen
   email + heslo, zbytek pod tlačítkem → méně zastrašující). */
body.sekce_registrace .tpl-reg-section-row td {
    padding: 0 !important;
}
body.sekce_registrace .tpl-reg-section-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--tpl-card-bg);
    border: 2px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    padding: 10px 16px;
    min-height: 44px;
    margin: 12px 0 4px;
    font-weight: 600;
    font-size: 14px;
    color: var(--tpl-text);
    cursor: pointer;
    font-family: var(--tpl-font);
    transition: border-color 0.15s, background 0.15s;
}
body.sekce_registrace .tpl-reg-section-btn:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint-soft);
}
body.sekce_registrace .tpl-reg-section-btn.tpl-open {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint);
    box-shadow: 0 0 0 1px var(--tpl-primary) inset;
}

/* Tabulka loginu — bez rámečku, labely nad inputy, plná šířka */
body.sekce_login table.login,
body.sekce_login table.login tbody,
body.sekce_login table.login tr,
body.sekce_login table.login td,
body.sekce_login table.login th {
    display: block;
    width: 100% !important;
    border: none !important;
    padding: 0;
    text-align: left;
}
body.sekce_login table.login td:empty {
    display: none !important;
}
body.sekce_login table.login td:first-child,
body.sekce_login table.login th {
    font-weight: 600;
    font-size: 14px;
    color: var(--tpl-text);
    margin: 14px 0 5px;
}

/* Inputy — zaoblené, plná šířka, focus stav */
body.sekce_login input.input_text {
    width: 100% !important;
    box-sizing: border-box;
    height: 46px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    padding: 0 14px;
    font-size: 15px;
    font-family: var(--tpl-font);
    color: var(--tpl-text);
}
body.sekce_login input.input_text:focus {
    border-color: var(--tpl-primary);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tpl-cta-bg) 22%, transparent);
}

/* Tlačítko „Přihlásit se" — žlutá CTA přes celou šířku */
body.sekce_login input.submit.button {
    width: 100%;
    margin-top: 22px;
    height: 48px;
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    border: none;
    border-radius: var(--tpl-border-radius);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    font-family: var(--tpl-font);
    transition: background var(--tpl-transition);
}
body.sekce_login input.submit.button:hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover);
}

/* ===========================================================================
 * Odstoupení od smlouvy (inc/odstoupeni.php, třídy .odst-*).
 * default.css je pod Latte šablonou vypnutý (ThemeManager nuluje css_default),
 * takže .odst-* nemají žádné styly → formulář/tabulky/tlačítka byly syrové.
 * Přenášíme je sem s --tpl-* proměnnými (vzhled sladěný s login/registrací).
 * =========================================================================*/
body.sekce_odstoupeni .odst-form { max-width: 560px; }
body.sekce_odstoupeni .odst-form--wide { max-width: 720px; }
body.sekce_odstoupeni .odst-form__field { margin: 12px 0; }
body.sekce_odstoupeni .odst-form__field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--tpl-text);
}
body.sekce_odstoupeni .odst-form__input,
body.sekce_odstoupeni .odst-form__textarea {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    padding: 0 14px;
    font-size: 15px;
    font-family: var(--tpl-font);
    color: var(--tpl-text);
    background: #fff;
}
body.sekce_odstoupeni .odst-form__textarea {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}
body.sekce_odstoupeni .odst-form__input:focus,
body.sekce_odstoupeni .odst-form__textarea:focus {
    border-color: var(--tpl-primary);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tpl-cta-bg) 22%, transparent);
}
body.sekce_odstoupeni .odst-form__actions { margin: 18px 0; }
body.sekce_odstoupeni .odst-fineprint {
    font-size: 12px;
    color: #888;
    max-width: 720px;
    line-height: 1.5;
}

/* Tlačítka: primární = tmavá (vyhledání), potvrzovací = žlutá CTA */
body.sekce_odstoupeni .odst-btn {
    display: inline-block;
    padding: 0 26px;
    height: 46px;
    line-height: 46px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    text-decoration: none;
    font-family: var(--tpl-font);
    transition: background var(--tpl-transition);
}
body.sekce_odstoupeni .odst-btn--primary {
    background: var(--tpl-primary);
    color: #fff;
}
body.sekce_odstoupeni .odst-btn--primary:hover { filter: brightness(1.12); }
body.sekce_odstoupeni .odst-btn--confirm {
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    height: 50px;
    line-height: 50px;
    padding: 0 32px;
    font-size: 16px;
}
body.sekce_odstoupeni .odst-btn--confirm:hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover);
}

/* Hlášky (chyba / info / úspěch) */
body.sekce_odstoupeni .odst-msg {
    padding: 12px 16px;
    margin: 12px 0;
    max-width: 900px;
    border-left: 4px solid #999;
    border-radius: var(--tpl-border-radius);
}
body.sekce_odstoupeni .odst-msg--error,
body.sekce_odstoupeni .odst-msg--warn { background: #fdecea; border-left-color: #c0392b; }
body.sekce_odstoupeni .odst-msg--info { background: #e3f2fd; border-left-color: #2196f3; }
body.sekce_odstoupeni .odst-msg--success { background: #e8f5e9; border-left-color: #2e7d32; padding: 14px 18px; }
body.sekce_odstoupeni .odst-msg__title { margin-top: 0; }

/* Karta s objednávkou */
body.sekce_odstoupeni .odst-order {
    border: 1px solid #e6e6e6;
    padding: 16px 20px;
    max-width: 900px;
    margin: 14px 0;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg, #fff);
}
body.sekce_odstoupeni .odst-order h3 { margin-top: 16px; }
body.sekce_odstoupeni .odst-order__summary { width: auto; }
body.sekce_odstoupeni .odst-order__summary td { padding: 3px 12px 3px 0; }
body.sekce_odstoupeni .odst-order__label { color: #777; }

/* Tabulka položek objednávky */
body.sekce_odstoupeni .odst-items { width: 100%; border-collapse: collapse; }
body.sekce_odstoupeni .odst-items thead tr { background: var(--tpl-surface-2, #f4f6f8); }
body.sekce_odstoupeni .odst-items th,
body.sekce_odstoupeni .odst-items td { padding: 8px; text-align: left; }
body.sekce_odstoupeni .odst-items th.odst-items__col-qty,
body.sekce_odstoupeni .odst-items td.odst-items__col-qty { text-align: right; width: 80px; }
body.sekce_odstoupeni .odst-items th.odst-items__col-price,
body.sekce_odstoupeni .odst-items td.odst-items__col-price { text-align: right; width: 140px; }
body.sekce_odstoupeni .odst-items tbody tr { border-bottom: 1px solid #eee; }

/* ===========================================================================
 * 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;
}

/* Stará jádrová cookie lišta (#info_cookies, „Při poskytování služeb nám pomáhají
   soubory cookie…") — šablona 2026 jede moderní CookieConsent banner, takže tahle
   je duplicitní/legacy. Skrýt. (Vyplé natrvalo by šlo i nastavením informace_o_cookies=ne.) */
#info_cookies { display: none !important; }

/* #1 CLS: checkout (#obj_form) skládá 3 sloupce JavaScriptem až po načtení →
   layout několikrát přeskočí. Dokud JS layout nedostaví, držíme form skrytý
   (třídu tpl-obj-building přidá/odebere JS v _body_all.latte; bez JS se nepřidá →
   form je normálně vidět). Reveal s jemným fade-in. */
body.sekce_objednavka #obj_form { transition: opacity 0.2s ease; }
body.sekce_objednavka.tpl-obj-building #obj_form { opacity: 0 !important; }

/* Odkazy pod formulářem (Registrace uživatele, Zapomenuté heslo) */
body.sekce_login form ul {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
body.sekce_login form ul li {
    margin: 0;
    padding: 0;
}
body.sekce_login form ul li:before {
    display: none !important;
}
body.sekce_login form ul li a {
    color: var(--tpl-text-light);
    text-decoration: none;
    font-size: 14px;
}
body.sekce_login form ul li a:hover {
    color: var(--tpl-text);
    text-decoration: underline;
}

/* Auth taby (Registrace | Přihlášení) nahoře v kartě — underline styl, aktivní
   záložka zvýrazněná žlutým spodním proužkem (--tpl-primary). Přidává JS. */
.tpl-auth-tabs {
    display: flex;
    margin: 0 0 22px;
    border-bottom: 2px solid var(--tpl-card-border);
}
.tpl-auth-tab {
    flex: 1;
    text-align: center;
    padding: 12px 10px 14px;
    font-weight: 700;
    font-size: 16px;
    color: var(--tpl-text-light);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color var(--tpl-transition), border-color var(--tpl-transition);
}
.tpl-auth-tab:hover {
    color: var(--tpl-text);
}
.tpl-auth-tab--active {
    color: var(--tpl-text);
    border-bottom-color: var(--tpl-primary);
}

/* „Zapomenuté heslo" pod submit tlačítkem (přihlásí/zaregistruje) */
.tpl-auth-forgot {
    text-align: center;
    margin-top: 14px;
}
.tpl-auth-forgot a {
    color: var(--tpl-text-light);
    text-decoration: none;
    font-size: 14px;
}
.tpl-auth-forgot a:hover {
    color: var(--tpl-text);
    text-decoration: underline;
}

/* ================================================================
   Změna hesla (sekce moje_heslo) — karta na střed, stejný styl jako login.
   Jádro (inc/moje_heslo.php): <h1>Změna hesla</h1> + <form><table> se 3 řádky
   (Staré / Nové / Nové pro kontrolu heslo) + submit „Změnit heslo".
   ================================================================ */
body.sekce_moje_heslo div#levy_prostredni {
    max-width: 440px;
    margin: 20px auto 40px;
}
body.sekce_moje_heslo #sekce h1 {
    text-align: center;
    font-size: 24px;
    margin: 0 0 18px;
}
/* Formulář = karta */
body.sekce_moje_heslo #sekce form {
    display: block;
    width: 100%;
    background: var(--tpl-content-bg, #fff);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    box-shadow: var(--tpl-shadow);
    padding: 24px 24px 20px;
    box-sizing: border-box;
}
/* Tabulka → jednosloupcový stack (label nad inputem, full width) */
body.sekce_moje_heslo #sekce form table,
body.sekce_moje_heslo #sekce form tbody,
body.sekce_moje_heslo #sekce form tr,
body.sekce_moje_heslo #sekce form td {
    display: block;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    text-align: left;
}
body.sekce_moje_heslo #sekce form tr > td:first-child {
    font-weight: 600;
    font-size: 13px;
    color: var(--tpl-text);
    margin: 12px 0 4px;
}
body.sekce_moje_heslo #sekce form tr:first-child > td:first-child { margin-top: 0; }
body.sekce_moje_heslo #sekce form input[type="password"] {
    height: 40px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 8px 12px !important;
    font-size: 14px;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    box-sizing: border-box;
    font-family: var(--tpl-font);
    background: var(--tpl-card-bg, #fff);
    color: var(--tpl-text);
}
body.sekce_moje_heslo #sekce form input[type="password"]:focus {
    border-color: var(--tpl-primary);
    outline: none;
}
/* Submit = akční tlačítko na plnou šířku */
body.sekce_moje_heslo #sekce form input[type="submit"] {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 12px 18px;
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    border: none;
    border-radius: var(--tpl-border-radius);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--tpl-font);
    cursor: pointer;
    transition: background var(--tpl-transition);
}
body.sekce_moje_heslo #sekce form input[type="submit"]:hover {
    background: var(--tpl-cta-bg-hover);
}
/* Hláška „musíte být přihlášen" (nepřihlášený stav) — čitelně na střed */
body.sekce_moje_heslo #sekce h1 + * {
    text-align: center;
    color: var(--tpl-text-light);
}

/* ================================================================
   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;
}


/* ================================================================
   J. FORMULARE & UI PRVKY
   ================================================================ */

/* Univerzální formulářová pole. Záměrně EXPLICITNÍ výčet (nízká specificita 0,1,1),
   ne exclude-`:not()` selektor — ten by měl (0,9,1) a přebil by scoped pravidla
   (footer newsletter, checkout) = inverze kaskády. Textové typy + bare <input>. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input:not([type]),
textarea,
select {
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    padding: 10px 14px;
    font-size: 13px;
    font-family: var(--tpl-font);
    color: var(--tpl-text);
    transition: border-color var(--tpl-transition);
    background: var(--tpl-card-bg);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
    border-color: var(--tpl-primary);
    outline: none;
}

input[type="submit"],
button[type="submit"],
.btn,
.tlacitko {
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    border: none;
    padding: 10px 24px;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    font-family: var(--tpl-font);
    transition: background var(--tpl-transition);
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.btn:hover,
.tlacitko:hover {
    background: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover);
}

/* Default table reset — vyjma karet dopravy/platby v objednávce, ty
   maji vlastni border na <tr> a vnejsi table border kresli rusivou
   sedou linku okolo bloku. */
table:not(.dopravy):not(.platby) {
    border: 1px solid var(--tpl-card-border);
}

td {
    border: 1px solid var(--tpl-card-border);
    padding: 8px 10px;
}

th {
    border: 1px solid var(--tpl-card-border);
    padding: 8px 10px;
    background: var(--tpl-surface-2);
    font-weight: 600;
}

/* 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;
}
/* Editace položky košíku (?sekce=kosik_editace): jádro renderuje stejné
   td.nazev_priplatku i.fas.fa-question, ale BEZ #detail_zbozi scope → zůstal holý
   FontAwesome tučný „?". Sladit vzhled s detailem = jemné šedé kolečko s „?". */
body.sekce_kosik_editace td.nazev_priplatku_info { cursor: default; }
body.sekce_kosik_editace 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;
}
body.sekce_kosik_editace 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;
    }
}

/* Vycentrované okno nápovědy k příplatku — otevírá JS jen na mobilu (tap na „?").
   Název příplatku + popis + křížek + ztmavené pozadí. */
.tpl-help-modal {
    display: none;
    position: fixed; inset: 0; z-index: 10000;
    align-items: center; justify-content: center;
    padding: 24px;
}
.tpl-help-modal.is-open { display: flex; }
.tpl-help-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.tpl-help-modal-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 340px;
    background: var(--tpl-card-bg);
    border-radius: var(--tpl-border-radius); padding: 20px 20px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    font-family: var(--tpl-font);
    animation: tplHelpPop .16s ease-out;
}
@keyframes tplHelpPop {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
.tpl-help-modal-title {
    font-size: 16px; font-weight: 700; line-height: 1.3;
    color: var(--tpl-text);
    margin: 0 36px 8px 0;   /* místo vpravo pro křížek */
}
.tpl-help-modal-text {
    font-size: 14px; line-height: 1.55; color: #444;
}
.tpl-help-modal-close {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: var(--tpl-surface-3); color: var(--tpl-text);
    font-size: 22px; line-height: 1; cursor: pointer;
    font-family: var(--tpl-font);
    transition: background .15s;
}
.tpl-help-modal-close:hover { background: #e2e2e2; }

/* === 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);
}

/* Alerts */
.alert, .upozorneni, .chyba {
    padding: 14px 18px;
    border-radius: var(--tpl-border-radius);
    margin-bottom: 15px;
    font-size: 13px;
}

/* Inline chybová hláška — náhrada jádrového jQuery UI modalu #alert_box.
   JS (v _body_all.latte) přepíše zapnout_alerty() tak, že .alert zprávy vloží
   sem (červený text u formuláře) místo rozsypaného modalu. */
.tpl-inline-alert {
    margin: 0 0 16px; padding: 12px 16px;
    background: #fdecec;
    border-left: 3px solid var(--tpl-stav-chyba, #b03636);
    border-radius: var(--tpl-border-radius);
    color: var(--tpl-stav-chyba, #b03636);
    font-size: 14px; font-weight: 600; line-height: 1.5;
}
.tpl-inline-alert b { color: inherit; font-weight: 700; }

/* 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;
}

/* Cart table improvements */
div#kosik table td img,
table.kosik td img {
    border-radius: var(--tpl-border-radius);
}

/* ================================================================
   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; }

    /* Objednávka: menší boční okraje na malých displejích. Desktop má #in_body
       padding 30px po stranách (ř. ~8434), což na úzkém telefonu ukusovalo moc
       šířky (uživatel: „u takto malých nedávej tolik margin od krajů obrazovky").
       !important kvůli pozdějšímu base pravidlu na ř. ~8434. */
    body.sekce_objednavka div#in_body {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* --- 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; }

/* Cart alert popup */
div.kosik_alert,
div#kosik_vlozeno {
    background: var(--tpl-content-bg);
    border-radius: var(--tpl-border-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    border: 2px solid var(--tpl-primary);
}

/* 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);
}

/* Cookie bar */
div#cookie_bar {
    background: rgba(45,45,45,0.95);
    color: #fff;
    border-radius: 0;
}

div#cookie_bar a {
    color: var(--tpl-primary);
}

/* jQuery UI overrides */
.ui-widget {
    font-family: var(--tpl-font);
}

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


/* =========================================================================
   I. OBJEDNÁVKA — 3-sloupcový single-page layout (Latte 2026-001)
   ========================================================================= */

/* Šířka kontejneru objednávky stejně široká jako košík */
body.sekce_objednavka div#sekce,
body.sekce_objednavka section,
body.sekce_objednavka div#prostredek,
body.sekce_objednavka div#levy_prostredni,
body.sekce_objednavka div#in_body {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

body.sekce_objednavka div#in_body {
    max-width: 1400px;
    margin: 0 auto;
    padding: 4px 30px 120px;  /* malý top padding, 120px bottom pro fixed Zaplatit */
}

/* Skrýt staré objednávkové tlačítka top — top "Zpět" + image navigaci */
body.sekce_objednavka div.objednavka_tlacitka_top,
body.sekce_objednavka div.navigace {
    display: none;
}

/* Skrýt log_button (debug) */
body.sekce_objednavka div#log_button {
    display: none !important;
}

/* Hlavní form jako 3-sloupcový flex layout.
   Levý: doprava + platba. Střední: fakturační adresa. Pravý: shrnutí + Zaplatit.
   Když step zobrazí jen jednu sekci (např. step 1 = doprava), prázdné sloupce
   nezůstanou — JS skryje prázdné wrappery. */
body.sekce_objednavka form#obj_form {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: stretch;  /* aby col3 měl výšku form → sticky uvnitř col3 funguje až k bottom form */
}

/* ==== Inline validace objednávky: chybné pole = červený rámeček + drobný text ==== */
/* Border checkout inputů drží `border …!important` a nešel spolehlivě přebít, proto
   červený „rámeček" kreslíme přes OUTLINE (offset -2px → sedí na okraji pole, vypadá
   jako rámeček) — outline kaskádu borderu neřeší. */
form#obj_form .tpl-invalid,
form#obj_form input.tpl-invalid,
form#obj_form select.tpl-invalid,
form#obj_form textarea.tpl-invalid {
    outline: 2px solid var(--tpl-stav-chyba) !important;
    outline-offset: -2px !important;
    border-color: var(--tpl-stav-chyba) !important; /* pro jistotu i border, kdyby prošel */
}
.tpl-field-error {
    color: var(--tpl-stav-chyba);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 4px;
}
.tpl-field-error.tpl-section-error {
    margin: 8px 0 4px;
}

body.sekce_objednavka form#obj_form > div.tpl-obj-col {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Skryté inputs ponechat mimo flex layout (nemají vizuální výšku) */
body.sekce_objednavka form#obj_form > input[type=hidden] {
    display: none;
}

/* Sekce label uvnitř sloupce: H1/H2/H3 + žlutá čára pod nadpisem, jednotná velikost */
body.sekce_objednavka form#obj_form h1,
body.sekce_objednavka form#obj_form h2,
body.sekce_objednavka form#obj_form h3.tpl-section-heading {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    padding: 0 0 6px !important;
    border-bottom: 3px solid var(--tpl-primary) !important;
    color: var(--tpl-text);
}

/* "Doručovací adresa" je toggle karta s checkbox — bez podtržení */
body.sekce_objednavka form#obj_form tr.adresa_je_jina h2 {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Container dopravy = blok ve sloupci, ne float */
body.sekce_objednavka div.vyber_dopravy_cont {
    display: block;
    width: 100%;
}

/* table.dopravy / table.platby → vertikální seznam karet */
body.sekce_objednavka table.dopravy,
body.sekce_objednavka table.platby {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
body.sekce_objednavka table.dopravy > tbody,
body.sekce_objednavka table.platby > tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Přebít INLINE style="display:none" které core PHP renderuje na řady
   platba_povolena (= filtrované podle vybrané dopravy). Tím dosáhneme
   konzistentního 4+dropdown layoutu pro VŠECHNY platby. Pokud user
   vybere nedostupnou kombinaci platba/doprava, server po submitu
   vyhodí validační chybu.
   POZN: tr.tpl-extra (= naše třída pro řady přesunuté do dropdown panelu)
   ZACHOVAT display:none — to je naše logika, ne server. */
body.sekce_objednavka table.platby tbody > tr:not(.tpl-extra):not(.doprava_seskupena),
body.sekce_objednavka table.platby tr.platba_povolena {
    display: grid !important;
}

/* Platby se při změně dopravy překreslují (JS tplRerenderPlatby / setupPlatbyFiltr)
   podle platby_dopravy. Když má admin zobrazeni_plateb="vsechny", jádro vykreslí
   i nevhodné platby jako .platba_neaktivni (bez radia = nevybratelné) — ztlumíme je
   a zakážeme klik, ať je jasné, že pro zvolenou dopravu nejsou dostupné. (Když
   zobrazeni_plateb != "vsechny", nevhodné se vůbec nevykreslí → toto pravidlo je
   no-op.) */
body.sekce_objednavka table.platby tr.platba_neaktivni {
    opacity: 0.45;
    pointer-events: none;
}

/* Dopravy: po výběru NEsbalovat seznam na jednu — zákazník má vidět všechny
   dopravy, ať může volbu přehodit (bez „Změnit dopravu"). Jádro (doprava_onclick /
   doprava_vybrat_pobocku) skrývá nevybrané řady inline display:none — přebijeme to
   a necháme celý (4+dropdown) seznam viditelný. Vybraná = zvýrazněná přes
   :has(:checked)/.aktivni_doprava. Vyjmuti: seskupení členové
   (.doprava_seskupena_clen, schovaní pod „Výdejní místa a boxy" — řídí je
   setupSeskupenaSelected) a řady přesunuté do dropdown panelu (.tpl-extra). */
body.sekce_objednavka table.dopravy tbody > tr:not(.doprava_seskupena_clen):not(.tpl-extra) {
    display: grid !important;
}
/* „Změnit dopravu" je pak zbytečné (celý seznam je vidět) → skrýt. */
body.sekce_objednavka #dopravy_zmenit_button {
    display: none !important;
}

/* Žádná doprava pro zvolenou lokalitu → hláška + kontakt na eshop. */
body.sekce_objednavka .tpl-doprava-prazdna {
    border: 1px solid #e3b3b3;
    background: #fff5f5;
    border-radius: var(--tpl-border-radius);
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--tpl-text);
}
body.sekce_objednavka .tpl-doprava-prazdna strong {
    display: block;
    color: var(--tpl-stav-chyba);
    font-size: 14px;
    margin-bottom: 6px;
}
body.sekce_objednavka .tpl-doprava-prazdna-kontakt {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 10px;
}
body.sekce_objednavka .tpl-doprava-prazdna-kontakt a {
    font-weight: 700;
    color: var(--tpl-link);
    text-decoration: none;
}
body.sekce_objednavka .tpl-doprava-prazdna-kontakt a:hover {
    text-decoration: underline;
}

/* Chyba výdejního místa (vložená za vybranou kartu dopravy do flex tbody) —
   přitáhnout TĚSNĚ pod kartu (kompenzovat flex gap 10px) a lehčí červená, ať je
   jasně vidět, ke které kartě patří. */
body.sekce_objednavka table.dopravy .tpl-section-error[data-k="pobocka"] {
    margin: -8px 0 2px 6px;
    color: var(--tpl-stav-chyba);
}

/* Každá řada = karta s rámečkem, klikací na celou plochu — kompaktní (46px) */
body.sekce_objednavka table.dopravy tr,
body.sekce_objednavka table.platby tr {
    display: grid;
    grid-template-columns: 32px 1fr auto 22px;
    align-items: center;
    column-gap: 10px;
    padding: 6px 12px;
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-height: 46px;
}
body.sekce_objednavka table.dopravy tr:hover,
body.sekce_objednavka table.platby tr:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint-soft);
}
body.sekce_objednavka table.dopravy tr:has(input[type=radio]:checked),
body.sekce_objednavka table.platby tr:has(input[type=radio]:checked),
body.sekce_objednavka table.dopravy tr.aktivni_doprava,
body.sekce_objednavka table.platby tr.aktivni_doprava {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint);
    box-shadow: 0 0 0 1px var(--tpl-primary) inset;
}

/* Buňky uvnitř karty = bez border / padding */
body.sekce_objednavka table.dopravy td,
body.sekce_objednavka table.platby td {
    border: 0;
    padding: 0;
    background: transparent;
    vertical-align: middle;
}

/* Obrázek dopravy/platby — kompaktní 32×22 */
body.sekce_objednavka table.dopravy td.dopravy_img,
body.sekce_objednavka table.platby td.platby_img {
    grid-column: 1;
    width: 32px;
    min-width: 32px;
    text-align: center;
}
body.sekce_objednavka table.dopravy td.dopravy_img img,
body.sekce_objednavka table.platby td.platby_img img {
    width: 100%;
    max-width: 32px;
    height: auto;
    max-height: 22px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Cena dopravy/platby — JS přepisuje na jen "X Kč" (s DPH). Drobnější písmo
   aby cena (ZDARMA / 95 Kč) byla normální, ne dominantní. */
body.sekce_objednavka div.dopravy_cena,
body.sekce_objednavka div.platby_cena {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--tpl-text);
}
body.sekce_objednavka div.dopravy_cena strong,
body.sekce_objednavka div.platby_cena strong {
    font-size: 12px !important;
    font-weight: 600 !important;
}
body.sekce_objednavka div.dopravy_cena .bez_dph,
body.sekce_objednavka div.platby_cena .bez_dph,
body.sekce_objednavka div.dopravy_cena br,
body.sekce_objednavka div.platby_cena br {
    display: none !important;
}

/* Skrýt tlačítko "Změnit dopravu" / "Změnit platbu" / "Změnit pobočku" — placeholder
   ze starého readonly UI, v single-page layoutu nepotřeba. */
body.sekce_objednavka input[value*="Změnit dopravu"],
body.sekce_objednavka input[value*="Změnit platbu"],
body.sekce_objednavka input[value*="Změnit pobočku"],
body.sekce_objednavka input[value*="Změnit" i],
body.sekce_objednavka input[value*="zmenit" i] {
    display: none !important;
}

body.sekce_objednavka div.tpl-hide {
    display: none !important;
}

/* ===========================================================================
   Detail vybrané pobočky (název, adresa, otevírací doba, foto) → modal.
   Core JS (inc/objednavka-1-js.php: doprava_vybrat_pobocku) vykresluje tenhle
   obsah AJAXem přímo do #dopravy_vyber_pobocky, nestylovaný — v single-page
   layoutu to rozhazelo layout (plná šířka tabulka + foto uprostřed sloupce
   dopravy). JS (_body_all.latte: setupPobockaModal) přesouvá
   div.detail_pobocky do #tpl-pobocka-modal (reuse .tpl-modal-overlay
   systému, stejný jako „Koupit"/filtry modal) a na jeho místo vloží
   kompaktní shrnutí (div.tpl-pobocka-souhrn).
   =========================================================================== */
body.sekce_objednavka div#dopravy_vyber_pobocky {
    margin: 8px 0 0;
}
body.sekce_objednavka div.tpl-pobocka-souhrn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--tpl-primary);
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-primary-tint);
    font-size: 13px;
}
body.sekce_objednavka span.tpl-pobocka-souhrn-text {
    color: var(--tpl-text);
}
body.sekce_objednavka span.tpl-pobocka-souhrn-text strong {
    font-weight: 700;
}
body.sekce_objednavka button.tpl-pobocka-souhrn-btn {
    flex: 0 0 auto;
    padding: 6px 14px;
    border: 1px solid var(--tpl-primary);
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--tpl-transition);
}
body.sekce_objednavka button.tpl-pobocka-souhrn-btn:hover {
    background: var(--tpl-primary-dark);
}

/* Souhrn vybrané pobočky přesunutý do SHRNUTÍ KOŠÍKU (pravý sloupec) — kompaktnější,
   ať se vejde do užšího sloupce a hlavně NEzvyšuje hlavní sloupec objednávky.
   Popisek „Výdejní místo:" nad názvem, ať je jasné, co to je. */
body.sekce_objednavka .tpl-shrnuti-kosiku .tpl-pobocka-souhrn-shrnuti {
    margin-top: 14px;
    padding: 8px 10px;
    font-size: 12px;
}
body.sekce_objednavka .tpl-shrnuti-kosiku .tpl-pobocka-souhrn-shrnuti .tpl-pobocka-souhrn-text::before {
    content: "Výdejní místo:";
    display: block;
    color: #888;
    font-weight: 600;
    font-size: 11px;
    margin-bottom: 2px;
}

/* Obsah přesunutý dovnitř modalu */
#tpl-pobocka-modal .tpl-modal {
    max-width: 460px;
}
#tpl-pobocka-modal div.detail_pobocky {
    font-size: 14px;
    color: var(--tpl-text);
    line-height: 1.5;
}
#tpl-pobocka-modal div.detail_pobocky > div:first-child {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}
#tpl-pobocka-modal div.pobocka_adresa {
    color: var(--tpl-text-light);
    margin-bottom: 4px;
}
#tpl-pobocka-modal div.detail_pobocky_img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--tpl-border-radius);
    margin: 14px 0;
}
#tpl-pobocka-modal div.detail_pobocky_otv_doba {
    margin: 14px 0 4px;
    padding: 12px 14px;
    background: var(--tpl-surface-2);
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
}
#tpl-pobocka-modal div.detail_pobocky_otv_doba::before {
    content: "Otevírací doba";
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--tpl-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
/* Admin obsah (raw HTML z DB) může mít vlastní cellpadding/width atributy
   nebo vnořené obaly u dne/času, kvůli kterým nejde nativním table-layoutem
   spolehlivě vynutit stejnou mezeru zleva (den) a zprava (čas) od okraje
   karty — auto-layout dopočítává šířky sloupců podle obsahu, takže zbytková
   mezera se nerozloží symetricky. Řešení: úplně obejít table-layout a
   każdý řádek vykreslit jako flex řádek (den na začátku, čas na konci,
   space-between) — pak je mezera na obou stranách vždy dána výhradně
   paddingem karty, bez ohledu na to, co je uvnitř. */
#tpl-pobocka-modal div.detail_pobocky_otv_doba table,
#tpl-pobocka-modal div.detail_pobocky_otv_doba table * {
    border: 0 !important;
    outline: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
}
#tpl-pobocka-modal div.detail_pobocky_otv_doba table {
    display: block !important;
    width: 100% !important;
    font-size: 13px;
}
#tpl-pobocka-modal div.detail_pobocky_otv_doba tbody,
#tpl-pobocka-modal div.detail_pobocky_otv_doba thead {
    display: block !important;
    width: 100% !important;
}
#tpl-pobocka-modal div.detail_pobocky_otv_doba tr {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px;
    width: 100% !important;
    padding: 5px 0 !important;
}
#tpl-pobocka-modal div.detail_pobocky_otv_doba td,
#tpl-pobocka-modal div.detail_pobocky_otv_doba th {
    display: block !important;
    flex: 0 0 auto !important;
    text-align: left !important;
}
#tpl-pobocka-modal div.detail_pobocky_otv_doba td:first-child,
#tpl-pobocka-modal div.detail_pobocky_otv_doba th:first-child {
    font-weight: 600;
    color: var(--tpl-text);
}
#tpl-pobocka-modal div.detail_pobocky_otv_doba td:last-child,
#tpl-pobocka-modal div.detail_pobocky_otv_doba th:last-child {
    text-align: right !important;
    color: var(--tpl-text-light);
    font-variant-numeric: tabular-nums;
}
#tpl-pobocka-modal div.detail_pobocky_hmtl_info {
    margin: 10px 0;
    font-size: 13px;
    color: var(--tpl-text-light);
}

/* Akce na dně modalu — Potvrdit (primární) + Změnit pobočku (sekundární)
   vedle sebe. "Změnit pobočku" input core globálně schovává mimo modal
   (viz pravidlo výše), zde je součástí .tpl-pobocka-modal-actions. */
#tpl-pobocka-modal div.tpl-pobocka-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--tpl-card-border);
}
#tpl-pobocka-modal div.tpl-pobocka-modal-actions > * {
    flex: 1;
}
#tpl-pobocka-modal button.tpl-pobocka-potvrdit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    border: 1px solid var(--tpl-primary);
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--tpl-font);
    cursor: pointer;
    transition: background var(--tpl-transition);
}
#tpl-pobocka-modal button.tpl-pobocka-potvrdit-btn:hover {
    background: var(--tpl-primary-dark);
}
#tpl-pobocka-modal div#pobocky_zmenit_button input[value*="Změnit" i] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    color: var(--tpl-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--tpl-transition), background var(--tpl-transition);
}
#tpl-pobocka-modal div#pobocky_zmenit_button input[value*="Změnit" i]:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint);
}

/* ===========================================================================
   Výběr pobočky na mapě (otevritMapuModalAjax v basic.js, obsah AJAXem z
   js_connector/dopravy_pobocky[_vsechny].php → MapaVsechnyDopravy::renderMap()).
   POZOR: renderMap() vypisuje VLASTNÍ <style> se stejnými třídami
   (.mapa-modal-overlay/.mapa-modal-content/...), ale full-screen / bez
   zaoblení / bez stínu — a protože se vkládá AJAXem AŽ PO načtení
   sablona.css, ve stejné specificitě by vyhrál on. Proto zde všude
   !important, aby si šablona podržela jednotný vizuální styl (zaoblená
   karta, žluté akcenty) bez ohledu na pořadí načtení. */
/* Zámek scrollu pozadí, když je otevřená mapa výdejních míst (JS přidá/odebere
   třídu). Bez něj se (1) stránka pod modalem posouvá a (2) Leaflet mapě přestane
   sedět geometrie → klik na pobočku dopadne jinam. position:fixed pin + JS uloží
   a po zavření vrátí scroll pozici. */
body.tpl-mapa-open {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}
.mapa-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    z-index: 10000 !important;
    padding: 40px 16px !important;
    overflow-y: auto !important;
}
.mapa-modal-content {
    background: var(--tpl-card-bg) !important;
    border-radius: var(--tpl-border-radius) !important;
    max-width: 720px !important;
    width: 100% !important;
    height: auto !important;
    padding: 24px !important;
    position: relative !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box !important;
}
.mapa-modal-close {
    position: absolute !important;
    top: 8px !important;
    right: 14px !important;
    font-size: 28px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: #888 !important;
    z-index: 2 !important;
    transition: color var(--tpl-transition);
}
.mapa-modal-close:hover {
    color: #000 !important;
}
.mapa-modal-body {
    margin-top: 8px;
    max-height: 78vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Nadpis "Kde objednávku vyzvednete?" — stejný formát jako ostatní H2
   nadpisy v šabloně (18px + žlutý underline). */
.mapa-modal-body h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--tpl-text) !important;
    margin: 0 0 14px !important;
    padding: 0 0 6px !important;
    border-bottom: 3px solid var(--tpl-primary) !important;
}

/* Legenda dopravců (Balíkovna / Zásilkovna / PPL / ...) → žluté pilulky */
.mapa-modal-body div.mapa-legenda {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.mapa-modal-body span.mapa-legenda-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 999px !important;
    background: var(--tpl-surface-2) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tpl-text) !important;
}
.mapa-modal-body span.mapa-legenda-barva {
    width: 10px !important;
    height: 10px !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Vyhledávání obce/PSČ + tlačítka Hledat / Filtr */
.mapa-modal-body span.hledat_obec_span {
    margin-bottom: 12px;
}
.mapa-modal-body input.hledat_obec {
    box-sizing: border-box;
    height: 40px;
    padding: 8px 14px;
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    font-size: 14px;
    font-family: var(--tpl-font);
}
.mapa-modal-body input.hledat_obec:focus {
    outline: none;
    border-color: var(--tpl-primary);
}
.mapa-modal-body .hledat_obec_span input.button,
.mapa-modal-body .hledat_obec_span button.button {
    height: 40px;
    box-sizing: border-box;
    padding: 0 18px;
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    color: var(--tpl-text);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--tpl-font);
    cursor: pointer;
    transition: border-color var(--tpl-transition), background var(--tpl-transition);
}
.mapa-modal-body input[id^="hledat_obec_button_"] {
    background: var(--tpl-primary);
    border-color: var(--tpl-primary);
    color: var(--tpl-primary-text);
}
.mapa-modal-body input[id^="hledat_obec_button_"]:hover {
    background: var(--tpl-primary-dark);
}
.mapa-modal-body button.mapa-filtr-button:hover,
.mapa-modal-body .hledat_obec_span input.button:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint);
}

/* Panel filtru dopravců */
.mapa-modal-body div.mapa-filtr-panel {
    border-radius: var(--tpl-border-radius) !important;
    border-color: #e3e3e3 !important;
}
.mapa-modal-body div.mapa-filtr-dopravce {
    border-radius: var(--tpl-border-radius) !important;
}
.mapa-modal-body div.mapa-filtr-buttons input.button {
    height: 36px;
    box-sizing: border-box;
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.mapa-modal-body div.mapa-filtr-buttons input.button.submit {
    background: var(--tpl-primary);
    border-color: var(--tpl-primary);
    color: var(--tpl-primary-text);
}
.mapa-modal-body div.mapa-filtr-buttons input.button:not(.submit) {
    background: var(--tpl-card-bg);
    color: var(--tpl-text);
}

/* Mapa samotná — zaoblit roh pod rovnou hranou karty */
.mapa-modal-body div.open_street_mapa,
.mapa-modal-body div.open_street_mapa > div {
    border-radius: var(--tpl-border-radius);
    overflow: hidden;
}

/* Popup na markeru pobočky (název dopravce, adresa, cena, tlačítko "Zvolit")
   — core ho vykresluje jako holý input.button.submit, dosud výchozí
   prohlížečový vzhled. */
.mapa-modal-body .leaflet-popup-content-wrapper {
    border-radius: var(--tpl-border-radius);
}
.mapa-modal-body div.pobocka-dopravce {
    border-radius: 999px;
}
.mapa-modal-body div.pobocka-cena {
    color: var(--tpl-text);
}
.mapa-modal-body div.pobocka-cena-zdarma {
    color: var(--tpl-cta-bg);
    background: var(--tpl-stav-skladem-bg);
}
.mapa-modal-body .leaflet-popup-content input.button.submit {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 8px 14px;
    border: 1px solid var(--tpl-primary);
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--tpl-font);
    cursor: pointer;
    transition: background var(--tpl-transition);
}
.mapa-modal-body .leaflet-popup-content input.button.submit:hover {
    background: var(--tpl-primary-dark);
}

.mapa-modal-footer {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--tpl-card-border) !important;
    text-align: right !important;
}
.mapa-modal-footer input.button {
    padding: 10px 20px !important;
    border: 1px solid #ddd !important;
    border-radius: var(--tpl-border-radius) !important;
    background: var(--tpl-card-bg) !important;
    color: var(--tpl-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.mapa-modal-footer input.button:hover {
    border-color: var(--tpl-primary) !important;
    background: var(--tpl-primary-tint) !important;
}

/* =========================================================================
   MOBIL (≤768px): mapa výdejních míst = FULL-SCREEN přehledný picker.
   Default (Latte centrovaná karta max-width 720px + jádrová fixní výška mapy)
   je na mobilu stísněný — malá šedá mapa ve scrollující kartě. Na mobilu:
   modal přes CELOU obrazovku, flex sloupec — kompaktní hlavička + ovládání
   nahoře (hledání, legenda, filtr), VELKÁ mapa (56vh), zavřít plná šířka dole.
   Touch-friendly (44px). Vykreslení mapy řeší invalidateSize hook v _body_all. */
@media (max-width: 768px) {
    body .mapa-modal-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }
    body .mapa-modal-content {
        max-width: none !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    /* × zavřít = velký kruhový tap-target vpravo nahoře, glyf přesně na střed */
    body .mapa-modal-close {
        top: 8px !important;
        right: 8px !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.06) !important;
        font-size: 26px !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        z-index: 5 !important;
    }
    /* tělo = flex sloupec, vyplní obrazovku, ovládání scrollovatelné nad mapou */
    body .mapa-modal-body {
        max-height: none !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        /* overflow-x MUSÍ být explicitně hidden: když je jedna osa `auto`, druhá
           (nezadaná `visible`) se dle CSS spec taky přepne na `auto` → pod ~340px
           vzniklo vodorovné posouvání a obsah „utíkal". */
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 !important;
        padding: 14px 14px 0 !important;
    }
    /* Pojistka proti vodorovnému přetečení kdekoli v modalu (velmi úzké displeje
       pod 340px). max-width + min-width:0 (aby flex/obsah mohl zmenšit) +
       box-sizing (padding se nepřičítá k šířce) → nic „nevyteče ven". */
    body .mapa-modal-overlay,
    body .mapa-modal-content,
    body .mapa-modal-body,
    body .mapa-modal-body div.mapa-wrapper,
    body .mapa-modal-body div.mapa-wrapper-left,
    body .mapa-modal-body div.mapa-wrapper-right,
    body .mapa-modal-body div.open_street_mapa,
    body .mapa-modal-body div.open_street_mapa > div {
        max-width: 100vw !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    /* Filtr panel + výsledky pobočky se taky musí vejít (mají vlastní padding). */
    body .mapa-modal-body div.mapa-filtr-panel,
    body .mapa-modal-body div.detail_pobocky,
    body .mapa-modal-body div.hledat_obec_vysledky {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    body .mapa-modal-body h2 {
        flex: 0 0 auto !important;
        font-size: 16px !important;
        margin: 0 44px 10px 0 !important;
        padding-bottom: 6px !important;
    }
    /* legenda dopravců → ZALOMENÍ do řádků (nic se neuřízne; dřív vodorovný scroll
       uřízl PPL). Kompaktní pilulky, menší mezera. */
    body .mapa-modal-body div.mapa-legenda {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        gap: 6px !important;
        margin: 0 0 10px !important;
    }
    body .mapa-modal-body span.mapa-legenda-item {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }
    /* hledání — input plná šířka, tlačítka touch (44px), iOS bez zoomu (16px) */
    body .mapa-modal-body div.mapa_ovladani { margin-bottom: 10px !important; }
    body .mapa-modal-body .hledat_obec_span { gap: 8px !important; }
    body .mapa-modal-body input.hledat_obec {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
    body .mapa-modal-body .hledat_obec_span input.button,
    body .mapa-modal-body .hledat_obec_span button.button,
    body .mapa-modal-body input[id^="hledat_obec_button_"],
    body .mapa-modal-body button.mapa-filtr-button {
        min-height: 44px !important;
        flex: 1 1 auto !important;
    }
    /* mapa = velká, plná šířka; přebít inline height:XXXpx z jádra */
    /* Mapa VYPLNÍ zbytek výšky (flex-fill), ať se celý modal vejde na obrazovku a
       nic „neutíká dolů". Dřív fixní 56vh + scroll → na úzkém/nízkém displeji byl
       obsah vyšší než obrazovka a přetékal. Ovládání (hledání/filtr/výsledky)
       nahoře s vlastním scrollem (max 40vh), patička (Zavřít) připnutá dole. */
    body .mapa-modal-body div.mapa-wrapper {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
    }
    body .mapa-modal-body div.mapa-wrapper-left {
        flex: 0 0 auto !important;
        max-height: 40vh !important;
        overflow-y: auto !important;
        height: auto !important;
    }
    body .mapa-modal-body div.mapa-wrapper-right {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    body .mapa-modal-body div.open_street_mapa,
    body .mapa-modal-body div.open_street_mapa > div {
        height: 100% !important;
        min-height: 200px !important;
        width: 100% !important;
    }
    /* zavřít = plná šířka dole, mimo scroll (sticky patka) */
    body .mapa-modal-footer {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid var(--tpl-card-border) !important;
    }
    body .mapa-modal-footer input.button {
        width: 100% !important;
        min-height: 46px !important;
    }
}

/* ===========================================================================
   Fakturační adresa: modernizovat tabulkový layout (td.popisek | td input)
   na sloupcový vzhled jako v předloze:
   - Label nahoře, menší + světlejší
   - Input pod ním, full-width, border, border-radius, padding
   =========================================================================== */
body.sekce_objednavka div.tpl-obj-col-2 table {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Placeholder v prostředním sloupci, když pro zemi není adresní krok (žádná
   dostupná doprava → adresa se nevyrenderuje). Drží 3-sloupcový layout, ať
   prostřední sloupec nezmizí (viz hideEmptyCols v _body_all.latte). */
body.sekce_objednavka div.tpl-obj-col-2 .tpl-obj-adresa-placeholder {
    padding: 16px 18px;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-surface-2);
    color: var(--tpl-text-light);
    font-size: 14px;
    line-height: 1.5;
}
body.sekce_objednavka div.tpl-obj-col-2 table > tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.sekce_objednavka div.tpl-obj-col-2 table tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    width: 100%;
    background: transparent;
}

/* Label (td.popisek) — nahoře, menší + světlejší */
body.sekce_objednavka div.tpl-obj-col-2 table td.popisek {
    grid-column: 1;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    background: transparent;
    border: 0;
    line-height: 1.2;
}

/* Input cell — pod labelem */
body.sekce_objednavka div.tpl-obj-col-2 table tr > td:not(.popisek) {
    grid-column: 1;
    padding: 0;
    background: transparent;
    border: 0;
}

/* Vlastní inputy — moderní border + padding + radius, fixní výška 32px */
body.sekce_objednavka div.tpl-obj-col-2 input[type="text"],
body.sekce_objednavka div.tpl-obj-col-2 input[type="email"],
body.sekce_objednavka div.tpl-obj-col-2 input[type="tel"],
body.sekce_objednavka div.tpl-obj-col-2 input[type="number"],
body.sekce_objednavka div.tpl-obj-col-2 select {
    width: 100% !important;
    box-sizing: border-box;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    font-family: var(--tpl-font);
    border: 1px solid #e3e3e3 !important;
    border-radius: var(--tpl-border-radius) !important;
    background: var(--tpl-card-bg) !important;
    color: var(--tpl-text);
    line-height: 1.3;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Textarea — výška podle obsahu (= min-height 100px, ne fixní 40) */
body.sekce_objednavka div.tpl-obj-col-2 textarea {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px 14px !important;
    font-size: 14px !important;
    font-family: var(--tpl-font);
    border: 1px solid #e3e3e3 !important;
    border-radius: var(--tpl-border-radius) !important;
    background: var(--tpl-card-bg) !important;
    color: var(--tpl-text);
    line-height: 1.4;
    outline: none;
    box-shadow: none;
    min-height: 100px;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.sekce_objednavka div.tpl-obj-col-2 input[type="text"]:focus,
body.sekce_objednavka div.tpl-obj-col-2 input[type="email"]:focus,
body.sekce_objednavka div.tpl-obj-col-2 input[type="tel"]:focus,
body.sekce_objednavka div.tpl-obj-col-2 input[type="number"]:focus,
body.sekce_objednavka div.tpl-obj-col-2 select:focus,
body.sekce_objednavka div.tpl-obj-col-2 textarea:focus {
    border-color: var(--tpl-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.15) !important;
}

/* Telefon: telefon_stat ("+420") + telefon do jednoho boxu, +420 jako prefix.
   DOM: <tr.povinne><td><span.tel_stat><input stat></span><span.tel_cislo><input tel></span></td>
   Wrapper = td (flex), span.tel_stat = úzký šedý prefix s +420,
   span.tel_cislo = širší container, vlastní inputy bez border. */
body.sekce_objednavka div.tpl-obj-col-2 tr.povinne:has(span.tel_stat) > td:not(.popisek),
body.sekce_objednavka div.tpl-obj-col-2 tr:has(span.tel_stat) > td:not(.popisek) {
    display: flex !important;
    gap: 0 !important;
    align-items: stretch;
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    overflow: hidden;
    background: var(--tpl-card-bg);
    padding: 0 !important;
}
body.sekce_objednavka div.tpl-obj-col-2 span.tel_stat,
body.sekce_objednavka div.tpl-obj-col-2 span.dtel_stat {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    border-right: 1px solid #e3e3e3;
    background: var(--tpl-surface-2);
}
body.sekce_objednavka div.tpl-obj-col-2 span.tel_cislo,
body.sekce_objednavka div.tpl-obj-col-2 span.dtel_cislo {
    flex: 1 1 0;
    display: flex;
    align-items: stretch;
    min-width: 0;
}
body.sekce_objednavka div.tpl-obj-col-2 span.tel_cislo > input,
body.sekce_objednavka div.tpl-obj-col-2 span.dtel_cislo > input {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}
/* Prefix +420 — šedé pozadí, malý box, žádný border zvlášť */
body.sekce_objednavka div.tpl-obj-col-2 input[name="obj[telefon_stat]"] {
    width: 60px !important;
    flex: 0 0 60px;
    height: 30px !important;
    min-height: 30px !important;
    border: 0 !important;
    border-right: 1px solid #e3e3e3 !important;
    border-radius: 0 !important;
    background: var(--tpl-surface-2) !important;
    text-align: center;
    color: #555;
    font-weight: 600;
    font-size: 13px !important;
    padding: 4px !important;
}
/* Telefon input = širší část, flex grow s base 0 (zabere zbytek šířky) */
body.sekce_objednavka div.tpl-obj-col-2 input[name="obj[telefon]"] {
    flex: 1 1 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
}
body.sekce_objednavka div.tpl-obj-col-2 input[name="obj[telefon_stat]"]:focus,
body.sekce_objednavka div.tpl-obj-col-2 input[name="obj[telefon]"]:focus {
    box-shadow: none !important;
}
/* Focus wrapper celé buňky telefonu */
body.sekce_objednavka div.tpl-obj-col-2 span.tel_stat:focus-within {
    border-color: var(--tpl-primary);
    box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.15);
}

/* Stejné chování pro dodací telefon */
body.sekce_objednavka div.tpl-obj-col-2 input[name="obj[dtelefon_stat]"] {
    width: 60px !important;
    flex: 0 0 60px;
    height: 30px !important;
    min-height: 30px !important;
    border: 0 !important;
    border-right: 1px solid #e3e3e3 !important;
    border-radius: 0 !important;
    background: var(--tpl-surface-2) !important;
    text-align: center;
    color: #555;
    font-weight: 600;
    font-size: 13px !important;
    padding: 4px !important;
}
body.sekce_objednavka div.tpl-obj-col-2 input[name="obj[dtelefon]"] {
    flex: 1 1 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
}

/* Smazat šedou linku okolo celé tabulky formuláře (table.adresa border #eee) */
body.sekce_objednavka div.tpl-obj-col-2 table.adresa,
body.sekce_objednavka div.tpl-obj-col-2 table {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Test tlačítko vedle inputu (validace jména) — skrýt, není potřeba */
body.sekce_objednavka div.tpl-obj-col-2 input[type="button"][value*="Test" i],
body.sekce_objednavka div.tpl-obj-col-2 input[type="button"][value*="Ověřit" i] {
    display: none !important;
}

/* Nadpisy (Adresa, Fakturační / dodací údaje, Doručovací adresa) — větší margin */
body.sekce_objednavka div.tpl-obj-col-2 tr.nadpis_fakturacni_udaje,
body.sekce_objednavka div.tpl-obj-col-2 tr.nadpis_dodaci_udaje,
body.sekce_objednavka div.tpl-obj-col-2 tr[class*="nadpis"] {
    margin-top: 16px;
}
body.sekce_objednavka div.tpl-obj-col-2 tr[class*="nadpis"] td {
    padding: 0;
    grid-column: 1;
}
body.sekce_objednavka div.tpl-obj-col-2 tr[class*="nadpis"] h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--tpl-text);
    padding: 0 0 6px;
    border-bottom: 3px solid var(--tpl-primary);
}

/* Skrýt prázdné řady (např. řady jen s hidden input nebo tr.obj_prazdne
   = separator mezi sekcemi adresy a telefonu — vytváří moc velkou mezeru). */
body.sekce_objednavka div.tpl-obj-col-2 table tr:empty,
body.sekce_objednavka div.tpl-obj-col-2 table tr:has(> td:only-child:empty),
body.sekce_objednavka div.tpl-obj-col-2 tr.obj_prazdne,
body.sekce_objednavka div.tpl-obj-col-2 tr[class*="prazdne"] {
    display: none !important;
}

/* Řádek ARES („Vaše IČ:" + „Načíst z Aresu") — POVOLIT dle admina.
   Jádro (inc/objednavka-3.php) ho renderuje jen když nastaveni('ares')=='ano'
   (guest + cz); jádrový JS ho ukáže ve Firma módu. Dřív byl vždy schovaný, jenže
   `obj[ic]` je taky skryté → ve Firma módu pak nebylo IČ pole VŮBEC. Teď necháme
   ARES řádek zobrazit; „Načíst z Aresu" pak vyplní obj[ic]/DIČ/název/adresu.
   Skrýt jen prázdný separátor <tr> za ním. */
body.sekce_objednavka div.tpl-obj-col-2 tr.ares + tr {
    display: none !important;
}
/* IČ input + „Načíst z Aresu" = jedna spojená pilulka (stejný designový jazyk
   jako kupon „Použít" na košíku): input zaoblený vlevo, žluté CTA vpravo, sdílí
   hranu bez mezery. Výška 32px = ostatní fakturační pole.
   Pilulka na CELOU šířku sloupce: flex je na wrapperu `div.ares` (ne na td, kde
   je jádrový input až vnořený), input roste, tlačítko pevné. Výsledky ARESu
   („Nastaveno …") se přes flex-wrap zalomí na celou šířku pod pilulku. */
body.sekce_objednavka div.tpl-obj-col-2 tr.ares > td:not(.popisek) {
    display: block;
}
/* ARES label „Vaše IČ" má jádrovou třídu `right` (ne `popisek`) → nedědil jednotný
   styl labelu (byl velký 16px/#333, zarovnaný vpravo, vyčníval). Srovnat s ostatními
   labely (malý šedý 12px/600, vlevo nad polem). Dvojtečku „:" ubere JS (setupAresSync). */
body.sekce_objednavka div.tpl-obj-col-2 tr.ares > td.right {
    padding: 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    line-height: 1.2;
    text-align: left;
}
body.sekce_objednavka div.tpl-obj-col-2 tr.ares div.ares {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
body.sekce_objednavka div.tpl-obj-col-2 tr.ares input#ares_ic {
    /* flex-basis 0 (ne auto): flex při zalamování počítá s hypotetickou velikostí =
       flex-basis. `auto` = OBSAHOVÁ šířka inputu (~200px); ta + tlačítko (~123px)
       přeteče úzký mobil (<~340px) → tlačítko se zalomí pod input. Basis 0 → input
       startuje od 0 a doroste, tlačítko zůstane VŽDY v řádku vedle. */
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* Výsledek ARESu — BEZ barevných výplní, jen barevné RÁMEČKY (dle přání).
   Úspěch = prostý text „Nastaveno …" (bez wrapperu) → zelený rámeček + zelený text
   + zelené ✓. Chyba = jádro vloží div.alert s červeným pozadím → zrušit výplň,
   nechat červený rámeček + červený text. Rozlišení přes :has(.alert). */
body.sekce_objednavka div.tpl-obj-col-2 tr.ares div.ares_vysledky {
    flex: 1 0 100%;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    background: transparent;
    font-size: 13px;
    line-height: 1.35;
}
body.sekce_objednavka div.tpl-obj-col-2 tr.ares div.ares_vysledky:empty {
    display: none;
}
/* ÚSPĚCH (bez div.alert uvnitř) — zelený rámeček + text + ✓, bez výplně */
body.sekce_objednavka div.tpl-obj-col-2 tr.ares div.ares_vysledky:not(:empty):not(:has(.alert)) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #bfe0c4;   /* barevný (zelený) rámeček */
    border-radius: var(--tpl-border-radius);
    color: #222;                 /* text VŽDY černý */
    font-weight: 500;
}
body.sekce_objednavka div.tpl-obj-col-2 tr.ares div.ares_vysledky:not(:empty):not(:has(.alert))::before {
    content: "\2713";               /* ✓ glyf (bez výplně), jen zelený */
    flex: 0 0 auto;
    color: #46a058;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
/* CHYBA (div.alert uvnitř) — zrušit červené POZADÍ, nechat červený rámeček + červenou
   ✕ ikonku, text VŽDY černý. */
body.sekce_objednavka div.tpl-obj-col-2 tr.ares div.ares_vysledky div.alert {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: 1px solid #e6a2a2 !important;   /* barevný (červený) rámeček */
    border-radius: var(--tpl-border-radius) !important;
    color: #222 !important;                  /* text VŽDY černý */
    padding: 9px 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
}
body.sekce_objednavka div.tpl-obj-col-2 tr.ares div.ares_vysledky div.alert::before {
    content: "\2715";               /* ✕ */
    flex: 0 0 auto;
    color: var(--tpl-stav-chyba);                 /* barevná (červená) ikonka */
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
body.sekce_objednavka div.tpl-obj-col-2 tr.ares input[type="button"] {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--tpl-primary);
    border-left: none;
    border-radius: 0 var(--tpl-border-radius) var(--tpl-border-radius) 0;
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--tpl-font);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    transition: background var(--tpl-transition);
}
body.sekce_objednavka div.tpl-obj-col-2 tr.ares input[type="button"]:hover {
    background: var(--tpl-primary-dark, #ffc107);
}
/* „IČ" (obj[ic]) duplikuje ARES „Vaše IČ" výše → skrýt; IČ se zadává nahoře
   přes ARES řádek („Načíst z Aresu" / JS sync ho doplní do obj[ic]).
   POZOR: skrýt JEN když ARES řádek existuje (admin má ares=ano → tr.ares se
   vykreslí). Když admin ARES vypne, tr.ares chybí a obj[ic] je JEDINÉ IČ pole
   → nesmí se schovat. Proto sourozenecký kombinátor „tr.ares ~". */
body.sekce_objednavka div.tpl-obj-col-2 tr.ares ~ tr:has(input#obj_ic) {
    display: none !important;
}

/* Skrýt druhý řádek adresy (fadresa2/dadresa2) — vypadalo to jako 2x adresa,
   uživatel typicky vyplní jen jeden řádek. Pokud někdo potřebuje 2 řádky,
   musí to být jen pro firma a v jiné podobě. */
body.sekce_objednavka div.tpl-obj-col-2 tr.fadresa2,
body.sekce_objednavka div.tpl-obj-col-2 tr[class*="fadresa2"],
body.sekce_objednavka div.tpl-obj-col-2 tr#da3,
body.sekce_objednavka div.tpl-obj-col-2 tr:has(input[name="obj[fadresa2]"]),
body.sekce_objednavka div.tpl-obj-col-2 tr:has(input[name="obj[dadresa2]"]) {
    display: none !important;
}

/* Skrýt dodací "Jméno / firma" (djmeno) když je fakturační "Vaše firma"
   schované (= typ=osoba). Důvod: jádro vždy renderuje djmeno v dodací,
   ale fjmeno jen pro typ=firma. V 2-sloupcovém layoutu by to rozhodilo
   alignment (Adresa fakt vs Jméno/firma dod na stejném řádku).

   jQuery .hide() nastaví inline style="display: none;" na .typ_firma.
   :has(tr.obj_vase_firma[style*="none"]) tedy matchuje jen osoba mód. */
body.sekce_objednavka div.tpl-obj-col-2:has(tr.obj_vase_firma[style*="none"]) tr:has(input[name="obj[djmeno]"]) {
    display: none !important;
}

/* Stát readonly text (Česká republika) — stylovat jako disabled input.
   POZN.: pravidlo se aplikuje JEN když td neobsahuje skutečný input/select
   (= jádro v některých případech renderuje stat jako plain text + hidden
   input; tehdy potřebujeme td vystylovat jako pseudo-input). Pokud td
   obsahuje vlastní <input type="text"> nebo <select>, td styling se
   neaplikuje, jinak vznikají vnořené rámečky (visible v Firefoxu, v Chromu
   visually splynou). */
body.sekce_objednavka div.tpl-obj-col-2 tr.fstat > td:not(.popisek):not(:has(input:not([type="hidden"]))):not(:has(select)),
body.sekce_objednavka div.tpl-obj-col-2 tr[class*="fstat"] > td:not(.popisek):not(:has(input:not([type="hidden"]))):not(:has(select)),
body.sekce_objednavka div.tpl-obj-col-2 tr.dorucovaci:has(input[name="obj[dstat]"]) > td:not(.popisek):not(:has(input:not([type="hidden"]))):not(:has(select)) {
    padding: 4px 12px;
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-surface-2);
    color: #777;
    font-size: 13px;
    height: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    line-height: 1.3;
    box-sizing: border-box;
}

/* Soukromá osoba / Firma — zaoblené čtverce vedle sebe. */
body.sekce_objednavka div.obj_vyber_zakaznika_hodnoty {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

body.sekce_objednavka div.obj_vyber_zakaznika_hodnoty input[type="radio"][name="obj[typ_zakaznika]"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

body.sekce_objednavka div.obj_vyber_zakaznika_hodnoty label {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 2px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--tpl-text);
    text-align: center;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    min-height: 36px;
    user-select: none;
}

/* Skrýt H1 "Zvolte typ zákazníka" — místo něj použít ::before pseudo-element
   s nadpisem "Fakturační / dodací údaje" (= konsolidace přímo v layoutu). */
body.sekce_objednavka div.tpl-obj-col-2 div.obj_vyber_zakaznika > h1,
body.sekce_objednavka div.tpl-obj-col-2 div.obj_vyber_zakaznika > h2 {
    display: none;
}

/* Skrýt duplicitní H2 "Fakturační / dodací údaje" v tabulce adresy
   (= dole pod kartami Soukromá/Firma — nahradíme ::before nahoře). */
body.sekce_objednavka div.tpl-obj-col-2 tr.nadpis_fakturacni_udaje {
    display: none;
}

/* Nadpis "Fakturační / dodací údaje" jako pseudo-element nad kartami
   Soukromá osoba / Firma — žádný JS, čistě CSS. */
body.sekce_objednavka div.tpl-obj-col-2 div.obj_vyber_zakaznika {
    margin-bottom: 6px;
}
body.sekce_objednavka div.tpl-obj-col-2 div.obj_vyber_zakaznika::before {
    content: "Fakturační / dodací údaje";
    display: block;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    padding: 0 0 6px !important;
    border-bottom: 3px solid var(--tpl-primary) !important;
    color: var(--tpl-text);
}

body.sekce_objednavka div.obj_vyber_zakaznika_hodnoty label:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint-soft);
}

body.sekce_objednavka div.obj_vyber_zakaznika_hodnoty label:has(input:checked),
body.sekce_objednavka div.obj_vyber_zakaznika_hodnoty input:checked + label {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint);
    box-shadow: 0 0 0 1px var(--tpl-primary) inset;
}

/* Pokud DOM má strukturu <input><label> (label NEUVNITŘ inputu),
   nahradíme :has selektor na obecnější fallback: připojení :checked + sibling */
body.sekce_objednavka div.obj_vyber_zakaznika_hodnoty input:checked ~ label[for] {
    /* fallback pro starší browsery — pokud :has nepodporuje */
}

/* Textarea (Poznámka k objednávce) — větší výška */
body.sekce_objednavka div.tpl-obj-col-2 textarea {
    min-height: 100px;
    resize: vertical;
}

/* Skrýt nápovědu "Údaje označené tučně je nutné vyplnit" (nic není tučně)
   a sub-nadpis "Adresa" + duplicitní "Fakturační / dodací údaje" — globálně
   v celé sekci objednávky (nejen v col2), pro případ rekapitulace / print. */
body.sekce_objednavka div.adresa.center.red,
body.sekce_objednavka div.napoveda_povinne_polozky,
body.sekce_objednavka p.napoveda_povinne_polozky,
body.sekce_objednavka h2.adresa,
body.sekce_objednavka h3.adresa,
body.sekce_objednavka tr.nadpis_fakturacni_udaje,
body.sekce_objednavka h2.fakturacni_udaje,
body.sekce_objednavka div.obj_div_adresa > h2:first-child,
body.sekce_objednavka div.obj_div_adresa > h3:first-child {
    display: none !important;
}

/* Doručovací adresa — slide-down animace.
   Default: max-height 0 + overflow hidden + 0 padding/border.
   Po .show-doruceni: max-height auto a normální render. */
body.sekce_objednavka div.tpl-obj-col-2 tr.dorucovaci {
    display: grid;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease, padding 0.35s ease;
    pointer-events: none;
}
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni tr.dorucovaci {
    max-height: 100px;
    opacity: 1;
    margin: 0 0 12px !important;
    padding: 0 !important;
    pointer-events: auto;
}
/* Po otevření = každá řada má normální vlastní padding/inputy.
   Vystačí to s gap 12px na flex tbody (top-level CSS pravidlo). */
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni tr.dorucovaci td:not(.popisek) {
    padding-top: 0;
    padding-bottom: 0;
}

/* Stagger animace — každá řada doručovací sekce zpožděna o 30ms */
body.sekce_objednavka div.tpl-obj-col-2 tr.dorucovaci:nth-of-type(n) { transition-delay: 0ms; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni tr.dorucovaci:nth-of-type(1) { transition-delay: 0ms; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni tr.dorucovaci:nth-of-type(2) { transition-delay: 30ms; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni tr.dorucovaci:nth-of-type(3) { transition-delay: 60ms; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni tr.dorucovaci:nth-of-type(4) { transition-delay: 90ms; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni tr.dorucovaci:nth-of-type(n+5) { transition-delay: 120ms; }

/* Nadpis "Doručovací adresa" — vždy viditelný, obsahuje checkbox toggle.
   Vlastní obsah řádky předěláme přes JS na flex layout. */
body.sekce_objednavka div.tpl-obj-col-2 tr.adresa_je_jina {
    margin-top: 8px;
}
body.sekce_objednavka div.tpl-obj-col-2 tr.adresa_je_jina td {
    grid-column: 1;
    padding: 12px 16px;
    background: var(--tpl-card-bg);
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
body.sekce_objednavka div.tpl-obj-col-2 tr.adresa_je_jina:hover td {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint-soft);
}
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni tr.adresa_je_jina td {
    background: var(--tpl-primary-tint);
    border-color: var(--tpl-primary);
}
body.sekce_objednavka div.tpl-obj-col-2 tr.adresa_je_jina h2 {
    margin: 0;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tpl-text);
}
body.sekce_objednavka div.tpl-obj-col-2 tr.adresa_je_jina h2::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: var(--tpl-radius-sm);
    background: var(--tpl-card-bg);
    flex: 0 0 auto;
    transition: all 0.15s;
}
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni tr.adresa_je_jina h2::before {
    background: var(--tpl-primary);
    border-color: var(--tpl-primary);
    box-shadow: inset 0 0 0 3px #fff;
}

/* === Latte 2026-001 — KROK 91: 2-tlačítkový doručovací switch ===
   Nahradí původní 1-checkbox toggle za 2 radio karty A/B vedle sebe
   (pattern reuse z Soukromá osoba / Firma).
   Původní H2 + ::before pseudo-checkbox jsou v DOM ale schované. */

/* Vypnout starý styling tr.adresa_je_jina (= klikací karta) */
body.sekce_objednavka div.tpl-obj-col-2 tr.adresa_je_jina td {
    background: transparent !important;
    border: 0 !important;
    padding: 8px 0 4px !important;
    cursor: default !important;
}
body.sekce_objednavka div.tpl-obj-col-2 tr.adresa_je_jina:hover td {
    background: transparent !important;
    border-color: transparent !important;
}
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni tr.adresa_je_jina td {
    background: transparent !important;
    border-color: transparent !important;
}
body.sekce_objednavka div.tpl-obj-col-2 tr.adresa_je_jina h2 {
    display: none !important;
}
body.sekce_objednavka div.tpl-obj-col-2 tr.adresa_je_jina h2::before {
    content: none !important;
}

/* Switch wrapper (flex 2 karet) */
body.sekce_objednavka div.tpl-dorucovaci-switch {
    display: flex;
    gap: 10px;
    margin: 0 0 12px;
    width: 100%;
}
/* Radio inputy skryté ale klikatelné přes <label for=""> */
body.sekce_objednavka div.tpl-dorucovaci-switch input[type="radio"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Karty (label) — kopie patternu obj_vyber_zakaznika_hodnoty label */
body.sekce_objednavka div.tpl-dorucovaci-switch label.tpl-doruc-card {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 12px;
    border: 2px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    cursor: pointer;
    font-size: 13px;
    color: var(--tpl-text);
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    min-height: 44px;
    user-select: none;
    text-align: left;
}
body.sekce_objednavka div.tpl-dorucovaci-switch label.tpl-doruc-card .tpl-doruc-card__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
body.sekce_objednavka div.tpl-dorucovaci-switch label.tpl-doruc-card .tpl-doruc-card__text strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--tpl-text);
}
body.sekce_objednavka div.tpl-dorucovaci-switch label.tpl-doruc-card .tpl-doruc-card__text small {
    font-size: 11px;
    font-weight: 400;
    color: #888;
    margin-top: 2px;
}
body.sekce_objednavka div.tpl-dorucovaci-switch label.tpl-doruc-card:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint-soft);
}
body.sekce_objednavka div.tpl-dorucovaci-switch input:checked + label.tpl-doruc-card {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint);
    box-shadow: 0 0 0 1px var(--tpl-primary) inset;
}
body.sekce_objednavka div.tpl-dorucovaci-switch input:focus-visible + label.tpl-doruc-card {
    outline: 2px solid var(--tpl-primary);
    outline-offset: 2px;
}

/* Vybrané výdejní místo → „Jiná adresa doručení" zakázaná (doručení jde na pobočku,
   jiná adresa by dělala bordel). Karta ztlumená + neklikatelná (JS navíc nastaví
   radio disabled a vynutí „Stejná jako fakturační"). */
body.sekce_objednavka div.tpl-dorucovaci-switch.tpl-doruc-vydejni-lock label.tpl-doruc-jina {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* "no-anim" pomocná třída pro inicializaci bez slide-down záblesku */
body.sekce_objednavka div.tpl-obj-col-2.tpl-no-anim tr.dorucovaci {
    transition: none !important;
}

/* === 2-sloupcový layout v "Jiná adresa" módu ===
   col2.show-doruceni → table.adresa display:grid 2 sloupce.
   Fakturační řady vlevo (col 1), dodací řady vpravo (col 2) — stejná
   horní hrana (= row 1).
   Switch tlačítek (Stejná/Jiná) přesunut DOLŮ pod oběma sloupci
   přes grid-row: 100 (= za všechny ostatní řady).
   grid-auto-flow: dense packuje dodací na první volné místo vpravo. */
/* Firefox parity: tbody je grid container (ne display:contents na tbody +
   grid na table). FF má bugy s display:contents na <tbody>, kde tr nedostanou
   grid placement = dodací sloupec se nezobrazil. tbody jako grid container
   funguje v obou prohlížečích. */
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa {
    display: block;
}
/* tbody grid container. Žádné !important — jQuery .hide() nastavuje inline
   style="display: none" na typ_firma/typ_osoba rows, a ty MUSÍ vyhrát.
   Default tbody display table-row-group v non-table contextu se ovlivní
   normální cascade z naší class-based pravidla. */
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa > tbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    column-gap: 16px;
    row-gap: 8px;
}
/* Default = col 1 (fakturační). */
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa > tbody > tr {
    grid-column: 1;
}
/* Dodací řady = col 2 (= grid auto-flow dense vyplní mezery zhora).
   Override slide-down CSS (max-height: 0 / opacity: 0) z base pravidla
   tr.dorucovaci — bez tohoto override by zůstaly schované (=0 výška). */
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr.dorucovaci {
    grid-column: 2;
    max-height: none !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    transition: none !important;
    height: auto !important;
}
/* Typ zákazníka header → span obě columns (= zůstává nahoře) */
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr.obj_vyber_zakaznika,
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr.nadpis_typ_zakaznika,
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr.typ_zakaznika {
    grid-column: 1 / -1;
}
/* Switch (Stejná/Jiná) → spanuje obě columns, auto-place na další volný
   řádek. Díky grid-auto-flow: dense se dodací backfilluje na col 2 rows
   1-N, takže switch přistane na row N+1 = pod oběma sloupci.
   POZN: `grid-row: 100` (původní pokus) tvořil 99 prázdných řádků s
   row-gap: 8px = ~792px prázdné mezery, kvůli které switch zmizel z
   viewportu. */
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr.adresa_je_jina {
    grid-column: 1 / -1;
    order: 999;
}

/* === Explicitní order pro dodací řády — alignment 1:1 s fakturační ===
   Jádro renderuje dodací v pořadí: dujmeno, duprijmeni, dutelefon, djmeno,
   dadresa1, dadresa2, dmesto, dpsc, dstat. To NEodpovídá fakturační
   (jméno, příjmení, [firma], adresa1, adresa2, město, PSČ, stát, telefon).

   JS reorder přes appendChild může v některých FF stavech selhat, takže
   ZÁROVEŇ použít CSS `order` který funguje vždy. Kombinace = robustní. */
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr.dorucovaci.obj_dujmeno { order: 1; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr.dorucovaci.obj_duprijmeni { order: 2; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr#da1.dorucovaci { order: 3; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr#da2.dorucovaci { order: 4; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr#da3.dorucovaci { order: 5; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr#da4.dorucovaci { order: 6; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr#da5.dorucovaci { order: 7; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr#da6.dorucovaci { order: 8; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr.dorucovaci.obj_dutelefon { order: 9; }
body.sekce_objednavka div.tpl-obj-col-2.show-doruceni table.adresa tr.dorucovaci.obj_duosloveni { order: 0; }

/* === Ghost prefill — předvyplněné inputy mají placeholder-like vzhled,
       po focus se obsah smaže (= efektivně placeholder s reálnou hodnotou). === */
body.sekce_objednavka input.tpl-prefilled {
    color: #aaa !important;
    font-style: italic;
}
body.sekce_objednavka input.tpl-prefilled:focus {
    color: var(--tpl-text) !important;
    font-style: normal;
}

/* === 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%;
    }
}

@media (max-width: 380px) {
    body.sekce_objednavka div.tpl-dorucovaci-switch {
        gap: 6px;
    }
    body.sekce_objednavka div.tpl-dorucovaci-switch label.tpl-doruc-card {
        padding: 6px 8px;
        min-height: 40px;
    }
    body.sekce_objednavka div.tpl-dorucovaci-switch label.tpl-doruc-card .tpl-doruc-card__text strong {
        font-size: 12px;
    }
    body.sekce_objednavka div.tpl-dorucovaci-switch label.tpl-doruc-card .tpl-doruc-card__text small {
        font-size: 10px;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.sekce_objednavka div.tpl-dorucovaci-switch label.tpl-doruc-card {
        transition: none;
    }
}

/* "Zvolte typ zákazníka" — sjednotit jako H2 */
body.sekce_objednavka div.tpl-obj-col-2 tr.nadpis_typ_zakaznika td,
body.sekce_objednavka div.tpl-obj-col-2 tr.typ_zakaznika td {
    padding: 0;
}
body.sekce_objednavka div.tpl-obj-col-2 tr.nadpis_typ_zakaznika h2,
body.sekce_objednavka div.tpl-obj-col-2 tr.typ_zakaznika h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    padding: 0 0 6px;
    border-bottom: 3px solid var(--tpl-primary);
    color: var(--tpl-text);
}

/* Checkbox/radio sloupec = vlevo, ale grafický radio bude v posledním sloupci.
   Skryjeme defaultní radio a stylujeme přes :has + ::after. */
body.sekce_objednavka table.dopravy td.checkboxes,
body.sekce_objednavka table.platby td.checkboxes {
    grid-column: 4;
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
body.sekce_objednavka table.dopravy td.checkboxes input[type=radio],
body.sekce_objednavka table.platby td.checkboxes input[type=radio] {
    width: 20px;
    height: 20px;
    accent-color: var(--tpl-primary);
    cursor: pointer;
}

/* Text uprostřed: název + popis + cena.
   Default tabulkový sloupec 3 obsahuje vše dohromady — pomocí flex
   odsadíme cenu napravo. */
body.sekce_objednavka table.dopravy tr > td:not(.checkboxes):not(.dopravy_img),
body.sekce_objednavka table.platby tr > td:not(.checkboxes):not(.platby_img) {
    grid-column: 2 / span 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    font-size: 13px;
}

/* Název + popis dopravy/platby — INLINE (vedle sebe na 1 řádku),
   "Balíkovna · Výdejní místa" stejnou výškou textu, popis šedý jemný. */
body.sekce_objednavka table.dopravy tr label,
body.sekce_objednavka table.platby tr label {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}
body.sekce_objednavka table.dopravy tr label > strong,
body.sekce_objednavka table.platby tr label > strong {
    flex: 0 0 auto;
}
body.sekce_objednavka table.dopravy tr label > div.doprava_popis,
body.sekce_objednavka table.platby tr label > div.platba_popis {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.sekce_objednavka table.dopravy tr label > strong,
body.sekce_objednavka table.platby tr label > strong {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
body.sekce_objednavka table.dopravy tr label > div.doprava_popis,
body.sekce_objednavka table.platby tr label > div.platba_popis {
    font-size: 12px;
    color: #888;
    font-weight: 400;
    line-height: 1.3;
}

/* MOBIL (≤768px): název + popis se na jeden řádek nevejdou → popis (adresa
   pobočky, text dopravy) se ořezával ellipsisem a byl skoro k ničemu.
   Pod 768px dáme popis na VLASTNÍ řádek pod název a necháme ho celý zalomit.
   Cena zůstává vpravo, zarovnaná k hornímu řádku (názvu). */
@media (max-width: 768px) {
    body.sekce_objednavka table.dopravy tr > td:not(.checkboxes):not(.dopravy_img),
    body.sekce_objednavka table.platby tr > td:not(.checkboxes):not(.platby_img) {
        align-items: flex-start;
    }
    body.sekce_objednavka table.dopravy tr label,
    body.sekce_objednavka table.platby tr label {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        white-space: normal;
        overflow: visible;
    }
    body.sekce_objednavka table.dopravy tr label > div.doprava_popis,
    body.sekce_objednavka table.platby tr label > div.platba_popis {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }
}

/* Seskupení výdejních míst (admin: dopravy_vsechny_pobocky = ano).
   Jádro vykreslí JEDEN řádek „Výdejní místa a boxy" (parent) a jednotlivé
   dopravce s pobočkami (Balíkovna/Zásilkovna/PPL…) schová jako členy
   (inline display:none). RESPEKTUJEME to: parent ukážeme jako jednu kartu,
   členy necháme schované na jádru → místo mnoha dopravců jedna záložka s mapou.
   Po výběru konkrétní pobočky jádro přes jQuery .show() odkryje vybraného člena
   (a parent .hide()-ne). Proto tu NEpoužíváme !important — ať jádrové přepínání
   viditelnosti (inline styl) vždy vyhraje. Členy záměrně neforsíme viditelné:
   ve výchozím stavu je schová jádrový inline display:none, po výběru je základní
   pravidlo `table.dopravy tr { display:grid }` zobrazí jako kartu.
   Když je nastavení vypnuté, tyto třídy vůbec nevznikají → chování beze změny. */
body.sekce_objednavka table.dopravy tr.doprava_seskupena {
    display: grid;
}

/* Dropdown "Lokalita pro doručení" — placeholder nad kartami */
body.sekce_objednavka div.tpl-lokalita-picker {
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--tpl-card-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

/* Combobox výběru lokality NAD dopravou v col1 (single-page checkout).
   Po změně JS nastaví obj[fstat] a obj[telefon_stat]. */
body.sekce_objednavka div.tpl-fragment-lokalita {
    margin-bottom: 0;
}
body.sekce_objednavka div.tpl-lokalita-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* "Lokalita pro doručení" label = stejný formát jako ostatní H2 nadpisy
   (18px + žlutý underline pod ním) */
body.sekce_objednavka label.tpl-lokalita-label {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--tpl-text);
    margin: 0;
    padding: 0 0 6px;
    border-bottom: 3px solid var(--tpl-primary);
}
body.sekce_objednavka select.tpl-lokalita-select {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 8px 14px;
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    font-family: var(--tpl-font);
    font-size: 14px;
    color: var(--tpl-text);
    cursor: pointer;
    appearance: none;
    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 16px center;
    background-size: 10px 6px;
    padding-right: 38px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.sekce_objednavka select.tpl-lokalita-select:focus {
    outline: none;
    border-color: var(--tpl-primary);
    box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.15);
}

/* === Custom lokalita dropdown s PNG vlajkami (flagcdn.com) ===
   Nahrazuje native <select> protože ten neumí <img> v option.
   Hidden native select zůstává v DOMu (form submission + .value reads). */
body.sekce_objednavka div.tpl-lokalita-custom {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.sekce_objednavka button.tpl-lokalita-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    font-family: var(--tpl-font);
    font-size: 14px;
    color: var(--tpl-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.sekce_objednavka button.tpl-lokalita-trigger:hover {
    border-color: var(--tpl-primary);
}
body.sekce_objednavka button.tpl-lokalita-trigger:focus {
    outline: none;
    border-color: var(--tpl-primary);
    box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.15);
}
body.sekce_objednavka button.tpl-lokalita-trigger img.tpl-flag,
body.sekce_objednavka button.tpl-lokalita-option img.tpl-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: var(--tpl-radius-sm);
    border: 1px solid #d0d0d0;
    flex-shrink: 0;
}
body.sekce_objednavka span.tpl-flag-empty {
    display: inline-block;
    width: 22px;
    height: 16px;
    flex-shrink: 0;
}
body.sekce_objednavka button.tpl-lokalita-trigger > span.tpl-lokalita-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 14px;
    font-weight: 400;
}
body.sekce_objednavka button.tpl-lokalita-trigger > span.tpl-lokalita-arrow {
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tpl-border-radius);
    font-size: 11px;
    transition: transform 0.2s;
    flex-shrink: 0;
}
body.sekce_objednavka div.tpl-lokalita-custom div.tpl-lokalita-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--tpl-card-bg);
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
}
body.sekce_objednavka div.tpl-lokalita-custom div.tpl-lokalita-panel.open {
    display: block;
}
body.sekce_objednavka button.tpl-lokalita-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: var(--tpl-border-radius);
    font-family: var(--tpl-font);
    font-size: 14px;
    color: var(--tpl-text);
    cursor: pointer;
    text-align: left;
}
body.sekce_objednavka button.tpl-lokalita-option:hover {
    background: var(--tpl-primary-tint);
}
body.sekce_objednavka button.tpl-lokalita-option > span.tpl-lokalita-label {
    flex: 1;
    padding: 0;
    margin: 0;
    border: 0;
    font-weight: 400;
    font-size: 14px;
}

/* === Lokalita jako 2 viditelné karty (Česko / Slovensko) ===
   Obě možnosti vidět rovnou vedle sebe, bez rozklikávání dropdownu.
   Vybraná karta = žlutý rámeček + jemné žluté pozadí (stejný jazyk jako
   karty dopravy/platby a switch osoba/firma). */
body.sekce_objednavka div.tpl-lokalita-cards {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
body.sekce_objednavka button.tpl-lokalita-card {
    flex: 1 1 0;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    font-family: var(--tpl-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--tpl-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
body.sekce_objednavka button.tpl-lokalita-card:hover {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint-soft);
}
body.sekce_objednavka button.tpl-lokalita-card.is-active {
    border-color: var(--tpl-primary);
    background: var(--tpl-primary-tint);
    box-shadow: 0 0 0 1px var(--tpl-primary) inset;
}
body.sekce_objednavka button.tpl-lokalita-card img.tpl-flag {
    width: 24px;
    height: 17px;
    object-fit: cover;
    border-radius: var(--tpl-radius-sm);
    border: 1px solid #d0d0d0;
    flex-shrink: 0;
}
body.sekce_objednavka button.tpl-lokalita-card span.tpl-lokalita-card-name {
    flex: 1;
}

/* === Progresivní zašednutí sekcí (co uživatel ještě nemá vyplněno) ===
   Doprava zamčená dokud není zvolená lokalita, platba dokud není zvolená
   doprava, fakturační + dodací údaje dokud není zvolená platba. Zamčená
   sekce = ztlumená + neklikací, aby bylo jasné, co ještě zbývá. JS
   (setupLockStates) přepíná třídu .tpl-locked. */
body.sekce_objednavka div.tpl-obj-col .tpl-locked,
body.sekce_objednavka div.tpl-obj-col.tpl-locked {
    opacity: 0.45;
    filter: grayscale(0.5);
    pointer-events: none;
    user-select: none;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/* "Další způsoby dopravy/platby" jako DROPDOWN — 5. karta s šipkou dolů,
   po kliknutí otevře absolutně positioned panel se seznamem ostatních možností.
   .tpl-more-wrap je relative kontejner s trigger + panel. */
body.sekce_objednavka div.tpl-more-wrap {
    position: relative;
    width: 100%;
}

body.sekce_objednavka button.tpl-more-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--tpl-text);
    text-align: left;
    min-height: 46px;
}
body.sekce_objednavka button.tpl-more-trigger:hover {
    border-color: var(--tpl-primary);
}
body.sekce_objednavka button.tpl-more-trigger::after {
    content: "▾";
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tpl-border-radius);
    transition: transform 0.2s;
    font-size: 11px;
}
body.sekce_objednavka div.tpl-more-wrap.open button.tpl-more-trigger::after {
    transform: rotate(180deg);
}

/* Dropdown panel — absolutně positioned overlay nad zbytkem stránky,
   default skrytý, .open třída ho zobrazí */
body.sekce_objednavka div.tpl-more-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--tpl-card-bg);
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
}
body.sekce_objednavka div.tpl-more-wrap.open div.tpl-more-panel {
    display: block;
}

/* Platby — panel se otevírá NAHORU (bottom-up), protože pod selectem
   už je jen tlačítko Zaplatit a další způsoby by lezly mimo viewport.
   Šipka v zavřeném stavu = ▴ (signál "panel je nahoře"), při otevření
   se otočí na ▾ (= "klik = zavřít") přes existující rotate(180deg). */
body.sekce_objednavka div.tpl-more-wrap-platby div.tpl-more-panel {
    top: auto;
    bottom: calc(100% + 6px);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
}
body.sekce_objednavka div.tpl-more-wrap-platby button.tpl-more-trigger::after {
    content: "▴";
}

/* Sub-tabulka uvnitř panelu — stejný styl řad jako vně, jen kompaktnější
   (žádné velké gap mezi položkami, viditelnější jako menu items) */
body.sekce_objednavka table.tpl-more-subtable {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
body.sekce_objednavka table.tpl-more-subtable > tbody {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.sekce_objednavka table.tpl-more-subtable tr {
    border: 1px solid transparent;
    border-radius: var(--tpl-border-radius);
    padding: 10px 12px;
}
body.sekce_objednavka table.tpl-more-subtable tr:hover {
    background: var(--tpl-primary-tint);
    border-color: var(--tpl-primary);
}

/* Tlačítko Zaplatit (na pravém sloupci) — zelené, velké (konverzní) */
body.sekce_objednavka input.submit_pokracovat.button_konverzni {
    background: var(--tpl-cta-bg) !important;
    background-image: none !important;
    color: var(--tpl-cta-text) !important;
    border: 0 !important;
    padding: 18px 32px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: var(--tpl-border-radius) !important;
    width: 100%;
    cursor: pointer;
    box-shadow: none !important;
}
body.sekce_objednavka input.submit_pokracovat.button_konverzni:hover {
    filter: brightness(0.95);
}

/* Tlačítko Zaplatit FIXED vpravo dole — vždy viditelné při scrollu.
   Pravý kraj alignovaný s krajem in_body kontejneru (max-width 1400px,
   center), ne s krajem viewportu. Plus Celkem cena přilepená NAD tlačítko.

   Strategy: objednavka_tlacitka wrapper = fixed bottom, right uses
   calc(max(30px, ((100vw - 1400px) / 2 + 30px))) → na širokém viewportu
   se posune dovnitř, na úzkém zůstane na 30px od kraje viewportu. */
/* Zaplatit blok — fixed bottom-right, transparent pozadí.
   JS scroll handler upravuje bottom: hodnotu když footer leze do viewport
   (= block zůstane nad footerem). Defaultně bottom: 20px (= 20px od dna). */
body.sekce_objednavka div.objednavka_tlacitka {
    position: fixed;
    bottom: 20px;
    right: max(30px, calc((100vw - 1400px) / 2 + 30px));
    z-index: 50;
    width: auto;
    max-width: 360px;
    min-width: 280px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: var(--tpl-border-radius);
    box-shadow: none;
    border: 0;
    padding: 14px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Celkem řádek klonovaný JS nad tlačítko v objednavka_tlacitka */
body.sekce_objednavka div.objednavka_tlacitka > div.tpl-celkem-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 4px;
}
body.sekce_objednavka div.objednavka_tlacitka > div.tpl-celkem-row > span.tpl-celkem-label {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}
body.sekce_objednavka div.objednavka_tlacitka > div.tpl-celkem-row > span.tpl-celkem-castka {
    font-size: 22px;
    font-weight: 700;
    color: var(--tpl-text);
    white-space: nowrap;
}

body.sekce_objednavka div.objednavka_tlacitka input.submit_pokracovat.button_konverzni {
    padding: 14px 28px !important;
    font-size: 17px !important;
    border-radius: var(--tpl-border-radius) !important;
    margin: 0 !important;
}

/* Tlačítko Zaplatit VŽDY viditelné (i když ho core přes .hide() schová) —
   přebít inline display:none. Když objednávka ještě není připravená, JS
   (setupZaplatitAlwaysVisible) přidá .tpl-btn-locked → zašedlé + neklikací,
   ale pořád vidět. Platí i pro sticky lištu na mobilu. */
body.sekce_objednavka div.objednavka_tlacitka {
    display: flex !important;
}
body.sekce_objednavka div.objednavka_tlacitka input.submit_pokracovat.button_konverzni {
    display: inline-block !important;
}
body.sekce_objednavka input.submit_pokracovat.tpl-btn-locked {
    opacity: 0.5;
    filter: grayscale(0.45);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none !important;
}

/* Zaplatit LEHCE vybledlé, dokud není objednávka správně vyplněná (povinná
   pole + doprava + platba). Na rozdíl od .tpl-btn-locked ZŮSTÁVÁ klikací —
   klik ukáže modal „co ještě chybí", takže nemůže zákazníka zablokovat, i
   kdyby kontrola byla přísnější než skutečná serverová validace. */
body.sekce_objednavka input.submit_pokracovat.tpl-zaplatit-ceka:not(.tpl-btn-locked) {
    opacity: 0.6;
}

/* Souhlas s OP přesunout vedle Zaplatit (.tpl-souhlas-op) — taky fixed,
   ale na pravém sloupci pod normálním tokem. */
body.sekce_objednavka div.tpl-souhlas-op {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    text-align: center;
    color: #888;
    line-height: 1.4;
}
body.sekce_objednavka div.tpl-souhlas-op a {
    color: #555;
    text-decoration: underline;
}

/* Přidat padding bottom na body aby fixed tlačítko nezacrávalo poslední obsah */
body.sekce_objednavka div#in_body {
    padding-bottom: 120px;
}

/* Mobil — sticky bottom bar konzistentní s košíkem (bílé pozadí, shadow,
   plná šířka, safe-area-inset pro iPhone notch). */
@media (max-width: 900px) {
    body.sekce_objednavka div.objednavka_tlacitka {
        left: 0 !important;
        right: 0 !important;
        /* bottom je řízen JS (setupZaplatitStopAtFooter) — defaultně 0, pri
           scrollu k footeru se zvedne aby ho nepřekryl. NEDÁVAT !important. */
        bottom: 0;
        max-width: none !important;
        min-width: 0 !important;
        width: auto !important;
        background: var(--tpl-card-bg) !important;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08) !important;
        border-radius: var(--tpl-border-radius) var(--tpl-border-radius) 0 0 !important;
        gap: 6px !important;
    }
    /* Celkem řádek nad Zaplatit — label vlevo, cena vpravo */
    body.sekce_objednavka div.objednavka_tlacitka > div.tpl-celkem-row {
        justify-content: space-between;
        gap: 8px;
        padding: 0 4px;
    }
    /* Zaplatit tlačítko full width */
    body.sekce_objednavka div.objednavka_tlacitka input.submit_pokracovat.button_konverzni {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }
    /* Padding-bottom na body aby content nelezl pod sticky */
    body.sekce_objednavka {
        padding-bottom: 140px !important;
    }
    body.sekce_objednavka div#in_body {
        padding-bottom: 20px;
    }

    /* Form inputy fakturační/dodací adresy — větší pro pohodlné klikání
       prstem. Font-size 16px = nutné aby iOS nezoomoval pri focusu. */
    body.sekce_objednavka div.tpl-obj-col-2 input[type="text"],
    body.sekce_objednavka div.tpl-obj-col-2 input[type="email"],
    body.sekce_objednavka div.tpl-obj-col-2 input[type="tel"],
    body.sekce_objednavka div.tpl-obj-col-2 input[type="number"],
    body.sekce_objednavka div.tpl-obj-col-2 select {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 8px 14px !important;
        border-radius: var(--tpl-border-radius) !important;
    }
    /* Telefon: prefix +420 wrapper + číslo — sjednotit výšku boxu */
    body.sekce_objednavka div.tpl-obj-col-2 input[name="obj[telefon_stat]"],
    body.sekce_objednavka div.tpl-obj-col-2 input[name="obj[telefon]"],
    body.sekce_objednavka div.tpl-obj-col-2 input[name="obj[dtelefon_stat]"],
    body.sekce_objednavka div.tpl-obj-col-2 input[name="obj[dtelefon]"] {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }
    /* FIX: prefix +420 se ořezával. Generické pravidlo výše dává inputům
       padding 8px 14px; na úzkém 60px prefix boxu zbývalo jen 32px na obsah,
       ale "+420" ve fontu 16px potřebuje ~42px → oříznuté. Zmenšíme
       horizontální padding jen u prefixu (číslo zůstává 14px). */
    body.sekce_objednavka div.tpl-obj-col-2 input[name="obj[telefon_stat]"],
    body.sekce_objednavka div.tpl-obj-col-2 input[name="obj[dtelefon_stat]"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
        text-align: center !important;
    }
    /* Lokalita combobox / vlastní trigger — taky 44px */
    body.sekce_objednavka select.tpl-lokalita-select,
    body.sekce_objednavka button.tpl-lokalita-trigger {
        height: 44px !important;
        font-size: 15px !important;
    }
    /* Textarea (poznámka) — větší padding na mobilu */
    body.sekce_objednavka div.tpl-obj-col-2 textarea {
        font-size: 16px !important;
        padding: 14px 16px !important;
    }
    /* "Další způsoby" dropdown trigger */
    body.sekce_objednavka button.tpl-more-trigger {
        min-height: 50px !important;
        font-size: 14px !important;
    }
}

/* Skrýt "Zpět" tlačítko v defaultní liště */
body.sekce_objednavka div.objednavka_tlacitka > input[value*="zpet"],
body.sekce_objednavka div.objednavka_tlacitka > input[value^="<<"] {
    display: none;
}

/* Objednávka tlačítka = jen pokračovat, full-width vlevo (uvnitř pravého sloupce) */
body.sekce_objednavka div.objednavka_tlacitka {
    display: flex;
    width: 100%;
}

/* Pravý sloupec sidebar — shrnutí košíku.
   Sticky top: 0 (= sjednotí horní hranu s lokalita label / fakturační nadpis
   v ostatních sloupcích). Vlastní max-height + scroll pro mnoho produktů. */
body.sekce_objednavka div.tpl-shrnuti-kosiku {
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
}
body.sekce_objednavka div.tpl-shrnuti-kosiku::-webkit-scrollbar {
    width: 6px;
}
body.sekce_objednavka div.tpl-shrnuti-kosiku::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: var(--tpl-radius-sm);
}
body.sekce_objednavka div.tpl-shrnuti-kosiku::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}
body.sekce_objednavka div.tpl-shrnuti-kosiku h2 {
    margin-bottom: 12px;
    position: sticky;
    top: 0;
    background: var(--tpl-body-bg);
    z-index: 1;
    padding-top: 2px;
}

/* MOBIL (≤900px): sloupce jsou stacknuté do JEDNOHO sloupce. Desktopové
   `position:sticky; top:0; max-height:calc(100vh-220px); overflow-y:auto` na
   shrnutí pak není žádoucí — shrnutí se sbalí do malého scroll-boxu (uživatel
   viděl „jen kousek nad blokem s cenou"). Na mobilu nechat plynout v toku a
   zobrazit celé. */
@media (max-width: 900px) {
    body.sekce_objednavka div.tpl-shrnuti-kosiku {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        top: auto !important;
        padding-right: 0 !important;
    }
    body.sekce_objednavka div.tpl-shrnuti-kosiku h2 {
        position: static !important;
    }
}

/* Karty produktů ve shrnutí — kompaktní */
body.sekce_objednavka div.tpl-shrnuti-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
}
body.sekce_objednavka div.tpl-shrnuti-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
body.sekce_objednavka div.tpl-shrnuti-item a,
body.sekce_objednavka div.tpl-shrnuti-item span.tpl-shrnuti-nazev {
    font-size: 13px;
    color: var(--tpl-text);
    text-decoration: underline;
    line-height: 1.3;
}
body.sekce_objednavka div.tpl-shrnuti-item span.tpl-shrnuti-cena {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* #1: Vybraná doprava + cena ve shrnutí (řádek nad Celkem) */
body.sekce_objednavka div.tpl-shrnuti-doprava {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 4px 2px;
    font-size: 13px;
    color: var(--tpl-text);
    border-top: 1px solid #ececec;
    margin-top: 4px;
}
body.sekce_objednavka div.tpl-shrnuti-doprava > span.tpl-shrnuti-doprava-nazev {
    color: #555;
}
body.sekce_objednavka div.tpl-shrnuti-doprava > span.tpl-shrnuti-doprava-cena {
    font-weight: 700;
    white-space: nowrap;
}

/* Celkem řádek */
body.sekce_objednavka div.tpl-shrnuti-celkem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 4px 8px;
    font-size: 18px;
}
body.sekce_objednavka div.tpl-shrnuti-celkem > span.tpl-celkem-label {
    color: #555;
}
body.sekce_objednavka div.tpl-shrnuti-celkem > span.tpl-celkem-castka {
    font-weight: 700;
    font-size: 22px;
}

/* Drobný text souhlas s OP pod Zaplatit */
body.sekce_objednavka div.tpl-souhlas-op {
    margin-top: 10px;
    font-size: 11px;
    color: #888;
    line-height: 1.4;
    text-align: center;
}
body.sekce_objednavka div.tpl-souhlas-op a {
    color: #555;
    text-decoration: underline;
}

/* Žlutá horizontální linka úplně dole (jako separator) */
body.sekce_objednavka div#bottom::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--tpl-primary);
    margin: 30px 0;
}

/* === Modal okno (tplModal) — krásný popup pro validační hlášky ===
   Použití: window.tplModal({icon, title, message, items, primaryLabel,
   primaryAction}). Vytvoří backdrop + modal s jednim primary tlačítkem.
   Zavře se klikem na backdrop, Esc, nebo primary tlačítko. */
div.tpl-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: tpl-modal-fade-in 0.18s ease;
}
@keyframes tpl-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
div.tpl-modal-backdrop.tpl-modal-closing {
    animation: tpl-modal-fade-out 0.15s ease forwards;
}
@keyframes tpl-modal-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

div.tpl-modal {
    background: var(--tpl-card-bg);
    border-radius: var(--tpl-border-radius);
    padding: 32px 28px 24px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    text-align: center;
    animation: tpl-modal-pop-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
}
@keyframes tpl-modal-pop-in {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
div.tpl-modal-closing div.tpl-modal {
    animation: tpl-modal-pop-out 0.15s ease forwards;
}
@keyframes tpl-modal-pop-out {
    from { transform: scale(1);    opacity: 1; }
    to   { transform: scale(0.95); opacity: 0; }
}

div.tpl-modal__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    background: var(--tpl-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(255, 209, 0, 0.4);
}

h3.tpl-modal__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--tpl-text);
    margin: 0 0 10px;
    line-height: 1.3;
    padding: 0;
    border: 0;
}

p.tpl-modal__message {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin: 0 0 20px;
}

ul.tpl-modal__items {
    text-align: left;
    list-style: none;
    padding: 14px 18px;
    margin: 0 0 22px;
    border: 1px solid var(--tpl-primary-tint-border);
    background: var(--tpl-primary-tint);
    border-radius: var(--tpl-border-radius);
    max-height: 240px;
    overflow-y: auto;
}
ul.tpl-modal__items li {
    padding: 6px 0;
    font-size: 14px;
    color: var(--tpl-text);
    line-height: 1.4;
    position: relative;
    padding-left: 22px;
}
ul.tpl-modal__items li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--tpl-primary);
    font-weight: 800;
    font-size: 15px;
}
ul.tpl-modal__items li + li {
    border-top: 1px solid var(--tpl-primary-tint-border);
}

div.tpl-modal__buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}
button.tpl-modal__btn {
    padding: 12px 28px;
    border-radius: var(--tpl-border-radius);
    font-weight: 700;
    font-size: 15px;
    font-family: var(--tpl-font);
    cursor: pointer;
    border: 0;
    transition: transform 0.1s, filter 0.15s, box-shadow 0.15s;
    min-width: 140px;
}
button.tpl-modal__btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
button.tpl-modal__btn:active {
    transform: translateY(0);
}
button.tpl-modal__btn--primary {
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    box-shadow: none;
}
button.tpl-modal__btn--primary:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* =========================================================
   Příplatkové služby v košíku (kosik_priplatky_zbozi)
   ---------------------------------------------------------
   Kolegova funkce z 6/2026. Jádrový css/default.css je u Latte VYPNUTÝ,
   takže .kpz_* stylujeme tady, v duchu šablony (bílé karty, žlutý podtržený
   nadpis, zelené akcenty výběru, DM Sans).

   Blok od jádra nese i třídu .kosik_polozka_oddil, takže by zdědil
   product-card grid (6 sloupců) a skupiny by se roztáhly do sloupců.
   Proto grid přenastavíme na vlastní responzivní grid karet skupin.
   Vyšší specificita (…oddil.kosik_priplatky_zbozi) přebije jádrový
   grid i mobilní override.
   ========================================================= */

/* Panel s nabídkou (editovatelný režim v košíku i pokladně) */
body.sekce_kosik div.kosik_polozka_oddil.kosik_priplatky_zbozi,
body.sekce_objednavka div.kosik_polozka_oddil.kosik_priplatky_zbozi {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-rows: min-content !important;
    gap: 2px 10px !important;
    align-items: start !important;
    position: relative !important;
    margin: 12px 0 6px !important;
    padding: 2px 10px 4px !important;
    background: var(--tpl-card-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    font-size: 12px;
    line-height: 1.2;
    color: var(--tpl-text, #333);
    font-family: var(--tpl-font);
}

/* Nadpis panelu „Doplňkové služby k produktu" odstraněn na přání (šetří místo). */

/* Karta jedné skupiny */
.kosik_priplatky_zbozi .kpz_skupina {
    margin: 0 !important;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 1px 3px;
}

/* Název skupiny (ikona + text + ⓘ) */
.kosik_priplatky_zbozi .kpz_skupina_nazev {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 12px;
    color: #222;
    margin: 0 0 2px;
    padding-bottom: 0;
    border-bottom: 0;
}
.kosik_priplatky_zbozi .kpz_ikona {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 auto;
}
.kosik_priplatky_zbozi .kpz_ma_popis { cursor: pointer; }
.kosik_priplatky_zbozi .kpz_ma_popis .kpz_nazev_text {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
/* ⓘ info bublina (klik → dialog s popisem) */
.kosik_priplatky_zbozi .kpz_info_ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #555;
    color: #fff;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
    margin-left: 2px;
}

/* Tabulka voleb — na celou šířku karty, cena vpravo */
.kosik_priplatky_zbozi .kpz_tabulka {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    border: 0 !important;
}
.kosik_priplatky_zbozi .kpz_tabulka tr,
.kosik_priplatky_zbozi .kpz_tabulka td { border: 0 !important; }
.kosik_priplatky_zbozi .kpz_tabulka td {
    padding: 1px 3px;
    border: 0;
    background: none;
    vertical-align: middle;
}
.kosik_priplatky_zbozi td.kpz_vyber { width: 100%; }
.kosik_priplatky_zbozi .kpz_vyber label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0;
}
.kosik_priplatky_zbozi .kpz_checkbox {
    width: 13px;
    height: 13px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--tpl-cta-bg, #46a058);
}
.kosik_priplatky_zbozi .kpz_cena {
    white-space: nowrap;
    text-align: right;
    padding-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tpl-text);
}
/* řádek volby: hover ano; zaškrtnuto = BEZ pozadí (na přání), jen zelená cena */
.kosik_priplatky_zbozi .kpz_hodnota td { border-radius: var(--tpl-radius-sm); }
.kosik_priplatky_zbozi .kpz_hodnota:hover td { background: #f3f3f3; }
.kosik_priplatky_zbozi .kpz_tabulka tr.kpz_vybrano .kpz_cena,
.kosik_priplatky_zbozi .kpz_tabulka tr:has(.kpz_checkbox:checked) .kpz_cena {
    color: var(--tpl-cta-bg, #46a058);
    font-weight: 700;
}

/* Doplňkové služby na mobilu — checkboxy i řádky jsou na desktopu záměrně
   kompaktní (myš + šetření místa), ale na dotyk moc malé. Zvětšíme checkbox
   na 20px a řádek na ~40px tap-plochu; text o kousek čitelnější. */
@media (max-width: 768px) {
    body.sekce_kosik div.kosik_priplatky_zbozi .kpz_checkbox {
        width: 20px;
        height: 20px;
    }
    body.sekce_kosik div.kosik_priplatky_zbozi .kpz_tabulka td {
        padding: 10px 4px;
    }
    body.sekce_kosik div.kosik_priplatky_zbozi .kpz_vyber label {
        gap: 10px;
        font-size: 13px;
    }
    body.sekce_kosik div.kosik_priplatky_zbozi .kpz_cena {
        font-size: 13px;
    }
    body.sekce_kosik div.kosik_priplatky_zbozi .kpz_skupina_nazev {
        font-size: 13px;
    }
}

/* --- Read-only režim (rekapitulace v pokladně): kompaktní blok, ne panel --- */
body.sekce_kosik div.kosik_polozka_oddil.kosik_priplatky_zbozi_ro,
body.sekce_objednavka div.kosik_polozka_oddil.kosik_priplatky_zbozi_ro,
div.kosik_priplatky_zbozi.kosik_priplatky_zbozi_ro {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 6px 8px !important;
    margin: 2px 0 6px !important;
    background: transparent;
    border: 0;
}
.kosik_priplatky_zbozi.kosik_priplatky_zbozi_ro::before { content: none !important; }

/* Ikony (štít/dárek) u názvu skupiny pryč — na přání („umaž emoji") */
.kosik_priplatky_zbozi .kpz_ikona,
.detail_priplatky_zbozi .kpzd_ikona { display: none !important; }

/* =========================================================
   jQuery UI dialogy — Latte NEMÁ jádrovou jQuery UI dialog CSS
   (.ui-dialog { position: absolute }), takže jQuery UI je pozicoval jako
   position:relative + top:-3912px = MIMO OBRAZOVKU. Projev: přidání do košíku
   se „neptalo" na přechod do košíku, jen probliknul text dialogu off-screen.
   Fix: vynutit fixed + vycentrovat → řádný modal uprostřed obrazovky (i na mobilu).
   Platí na všechny (přidání do košíku, popis příplatků, lokalita, validace).
   ========================================================= */
body div.ui-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: auto !important;
    max-width: min(480px, 92vw) !important;
    max-height: 88vh !important;
    overflow: auto !important;
    z-index: 100000 !important;
    /* VZHLED — Latte nemá jQuery UI dialog CSS, takže dialog byl bez pozadí (obsah
       se mísil se stránkou = nečitelné). Bílá karta s rámečkem + stínem. */
    background: var(--tpl-card-bg) !important;
    border: 1px solid #e4e6ea !important;
    border-radius: var(--tpl-border-radius) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.30) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
body div.ui-dialog .ui-dialog-titlebar {
    background: var(--tpl-primary, #ffd400) !important;
    color: var(--tpl-primary-text) !important;
    border: 0 !important;
    border-radius: var(--tpl-border-radius) var(--tpl-border-radius) 0 0 !important;
    padding: 12px 46px 12px 16px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    position: relative !important;
}
body div.ui-dialog .ui-dialog-content {
    padding: 14px 16px !important;
    background: var(--tpl-card-bg) !important;
    color: var(--tpl-text, #222) !important;
}
/* Obsah potvrzení „přidáno do košíku" — jádro dělá neostylovaný <ul> s odrážkami
   (tečky) = ošklivé/nepřehledné. Přepsat na čistou kartu: název = nadpis s linkou,
   pak počet (nenápadně) a cena (výrazně). Platí na desktop i mobil. */
body div.ui-dialog #zbozi_v_kosiku {
    font-size: 14px !important;
    line-height: 1.4 !important;
}
body div.ui-dialog #zbozi_v_kosiku .zbozi_koupene_nazev {
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    color: #222 !important;
    margin: 0 0 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #ececec !important;
}
body div.ui-dialog #zbozi_v_kosiku .prehled_kosiku ul,
body div.ui-dialog #zbozi_v_kosiku .prehled_kosiku {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body div.ui-dialog #zbozi_v_kosiku .prehled_kosiku li {
    list-style: none !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}
body div.ui-dialog #zbozi_v_kosiku li.pocet_polozek {
    color: #666 !important;
}
body div.ui-dialog #zbozi_v_kosiku li.bez_dph {
    font-weight: 700 !important;
    font-size: 17px !important;
    color: #222 !important;
    margin-top: 8px !important;
}
body div.ui-dialog .ui-dialog-buttonpane {
    padding: 4px 16px 16px !important;
    border: 0 !important;
    background: var(--tpl-card-bg) !important;
    text-align: right !important;
    border-radius: 0 0 var(--tpl-border-radius) var(--tpl-border-radius) !important;
}
body div.ui-dialog .ui-dialog-buttonpane button {
    background: var(--tpl-primary, #ffd400) !important;
    color: var(--tpl-primary-text) !important;
    border: 0 !important;
    border-radius: var(--tpl-border-radius) !important;
    padding: 10px 16px !important;
    margin-left: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}
/* „Přejít do košíku" = primární ZELENÉ tlačítko (jako „Přidat do košíku"). */
body div.ui-dialog .ui-dialog-buttonpane button:not(.button_pokracovat_v_nakupu) {
    background: var(--tpl-cta-bg) !important;
    color: var(--tpl-cta-text) !important;
}
/* „Pokračovat v nákupu" = nenápadné sekundární (šedý outline, ne žluté tlačítko). */
body div.ui-dialog .ui-dialog-buttonpane button.button_pokracovat_v_nakupu {
    background: transparent !important;
    color: #555 !important;
    border: 1px solid #d5d5d5 !important;
    font-weight: 500 !important;
}
body div.ui-dialog .ui-dialog-titlebar-close {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    border-radius: var(--tpl-border-radius) !important;
    border: 0 !important;
    background: rgba(0, 0, 0, 0.12) !important;
    cursor: pointer !important;
    color: inherit !important;
    font-size: 0 !important;
    padding: 0 !important;
}
body div.ui-dialog .ui-dialog-titlebar-close::before {
    content: "\00d7" !important;
    font-size: 22px !important;
    line-height: 30px !important;
    display: block !important;
    text-align: center !important;
}
body .ui-widget-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: rgba(0, 0, 0, 0.45) !important;
}
/* MOBIL: adaptace jQuery UI dialogu — širší (text tolik nezalamuje), bez zbytečného
   placeholder obrázku produktu, kompaktní, tlačítka full-width pod sebou (pohodlný tap). */
@media (max-width: 768px) {
    body div.ui-dialog {
        width: 94vw !important;        /* PEVNÁ šířka (ne auto → scvrklo se na obsah = úzké) */
        max-width: 94vw !important;
        max-height: 86vh !important;
    }
    /* prázdná „Cena celkem s DPH:" (bez hodnoty) je matoucí → skrýt na mobilu */
    body div.ui-dialog #zbozi_v_kosiku li.vcetne_dph {
        display: none !important;
    }
    body div.ui-dialog .ui-dialog-titlebar {
        padding: 10px 42px 10px 14px !important;
        font-size: 14px !important;
    }
    body div.ui-dialog .ui-dialog-content {
        padding: 12px 14px !important;
    }
    /* placeholder/broken obrázek produktu v potvrzení pryč (zbytečně zabírá) */
    body div.ui-dialog #zbozi_v_kosiku img,
    body div.ui-dialog .ui-dialog-content img.tpl-img-broken {
        display: none !important;
    }
    body div.ui-dialog #zbozi_v_kosiku ul {
        padding-left: 0 !important;   /* bez odrážek → žádné odsazení */
        margin: 6px 0 !important;
    }
    /* „bordel okolo" — doporučené produkty (upsell) v potvrzovacím dialogu na mobilu pryč */
    body div.ui-dialog .zbozi_v_kosiku_doporucit {
        display: none !important;
    }
    /* tlačítka pod sebou; „Přejít do košíku" (primární zelené) NAHOŘE, „Pokračovat" pod ním.
       Tlačítka jsou uvnitř .ui-dialog-buttonset → flex dát TAM (ne na buttonpane). */
    body div.ui-dialog .ui-dialog-buttonpane {
        padding: 6px 14px 14px !important;
    }
    body div.ui-dialog .ui-dialog-buttonset {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
        width: 100% !important;
    }
    body div.ui-dialog .ui-dialog-buttonpane button {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
}

/* =========================================================
   Info dialog příplatku (ⓘ → popis) — sladit s Latte šablonou.
   Jádrová funkce dělá klasický jQuery UI dialog (šedý default);
   scope přes :has() jen na popis dialogy (kpz_ / kpzd_), ostatní
   jQuery UI dialogy (lokalita, validace) nechává být.
   ========================================================= */
.ui-dialog:has(> #kpz_popis_dialog),
.ui-dialog:has(> #kpzd_popis_dialog) {
    border: 0 !important;
    border-radius: var(--tpl-border-radius, 4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--tpl-card-bg) !important;
    font-family: var(--tpl-font) !important;
}
.ui-dialog:has(> #kpz_popis_dialog) .ui-dialog-titlebar,
.ui-dialog:has(> #kpzd_popis_dialog) .ui-dialog-titlebar {
    background: var(--tpl-primary) !important;
    color: var(--tpl-primary-text) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    font-family: var(--tpl-font) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}
.ui-dialog:has(> #kpz_popis_dialog) .ui-dialog-titlebar-close,
.ui-dialog:has(> #kpzd_popis_dialog) .ui-dialog-titlebar-close {
    color: var(--tpl-primary-text) !important;
    border: 0 !important;
    background: transparent !important;
}
.ui-dialog:has(> #kpz_popis_dialog) #kpz_popis_dialog,
.ui-dialog:has(> #kpzd_popis_dialog) #kpzd_popis_dialog {
    padding: 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--tpl-text, #333) !important;
    background: var(--tpl-card-bg) !important;
}
.ui-dialog:has(> #kpz_popis_dialog) .ui-dialog-buttonpane,
.ui-dialog:has(> #kpzd_popis_dialog) .ui-dialog-buttonpane {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 14px 14px !important;
    background: var(--tpl-card-bg) !important;
}
.ui-dialog:has(> #kpz_popis_dialog) .ui-dialog-buttonpane button,
.ui-dialog:has(> #kpzd_popis_dialog) .ui-dialog-buttonpane button {
    background: var(--tpl-primary) !important;
    color: var(--tpl-primary-text) !important;
    border: 0 !important;
    border-radius: var(--tpl-border-radius, 4px) !important;
    font-family: var(--tpl-font) !important;
    font-weight: 700 !important;
    padding: 7px 20px !important;
    cursor: pointer !important;
}
.kosik_priplatky_zbozi .kpz_readonly {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 12px;
}
.kosik_priplatky_zbozi .kpz_skupina_nazev_ro { font-weight: 700; }
.kosik_priplatky_zbozi .kpz_readonly .kpz_cena {
    font-weight: 700;
    color: var(--tpl-cta-bg, #46a058);
    padding-left: 6px;
}

/* =========================================================
   EXPERIMENT — Košík: obsah plyne dolů + plovoucí ostrůvek
   Produkty se scrollují se stránkou (ne ve vnitřním boxu).
   Celkem + hmotnost + Pokračovat = fixní plovoucí ostrůvek
   vpravo dole. Jen desktop (mobil má sticky bar zvlášť).
   ========================================================= */
@media (min-width: 769px) {
    /* 1) Produkty plynou normálně dolů — zrušit vnitřní scroll-box */
    body.sekce_kosik .kosik_polozky {
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    /* 2) Plovoucí ostrůvek vpravo dole (Celkem + hmotnost + Pokračovat) */
    body.sekce_kosik div#tpl-kupon-celkem-row > div.tpl-celkem-pokracovat {
        position: fixed !important;
        bottom: 24px;
        right: 24px;
        z-index: 1000;
        width: auto;
        align-self: auto !important;
        align-items: flex-end !important;
        background: var(--tpl-card-bg);
        border: 1px solid #e4e6ea;
        border-radius: var(--tpl-border-radius);
        box-shadow: 0 10px 34px rgba(0, 0, 0, 0.20);
        padding: 14px 18px;
        margin: 0 !important;
        gap: 6px !important;
    }

    /* 3) prostor dole, ať poslední obsah nezmizí pod ostrůvkem */
    body.sekce_kosik #in_body { padding-bottom: 150px !important; }
}

/* =========================================================
   EXPERIMENT — Doplňkové služby: ROZKLIKÁVACÍ řádek.
   Panel je defaultně sbalený; klik na „▸ Doplňkové služby" ho rozbalí.
   Toggle řádek vkládá JS (_body_all.latte). Platí desktop i mobil.
   ========================================================= */
body.sekce_kosik .tpl-kpz-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--tpl-cta-bg, #46a058);
    margin: 8px 0 2px;
    user-select: none;
}
body.sekce_kosik .tpl-kpz-toggle:hover .tpl-kpz-label { text-decoration: underline; }
body.sekce_kosik .tpl-kpz-toggle .tpl-kpz-arrow {
    display: inline-block;
    font-size: 11px;
    transition: transform 0.18s ease;
}
body.sekce_kosik .tpl-kpz-toggle.tpl-kpz-open .tpl-kpz-arrow { transform: rotate(90deg); }
/* sbaleno = skrýt panel; rozbaleno (.tpl-kpz-open) = zobrazit */
body.sekce_kosik div.kosik_priplatky_zbozi.tpl-kpz-collapsed { display: none !important; }
body.sekce_kosik div.kosik_priplatky_zbozi.tpl-kpz-collapsed.tpl-kpz-open { display: grid !important; }

/* ============================================================================
   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);
}
/* ============================================================================
   Mapa výdejních míst: zpřehlednit legendu + filtr (#4, theme, BEZ jádra).
   Legenda (Balíkovna/Zásilkovna/PPL/Packeta) je STATICKÝ klíč (cursor:auto, bez
   onclick), ale pilulkový vzhled sváděl ke kliknutí — vedle skutečného tlačítka
   „Filtr dopravců" = matoucí. Řešení: popisek „Na mapě:" (jasně = klíč) + ploché
   dot+label chipy, a skutečný filtr zvýrazníme. !important přebíjí jádrem
   injektované modal styly (modal má vlastní inline <style>). Ověřeno živě.
   ============================================================================ */
.mapa-modal-overlay .mapa-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.mapa-modal-overlay .mapa-legenda::before { content: "Na mapě:"; font-weight: 700; font-size: 13px; color: #333; margin-right: 2px; }
.mapa-modal-overlay .mapa-legenda-item { background: transparent !important; border: none !important; box-shadow: none !important; padding: 1px 2px !important; cursor: default; font-size: 13px; color: #333; }
.mapa-modal-overlay .mapa-filtr-button { background: var(--tpl-primary, #ffd400) !important; color: var(--tpl-primary-text) !important; font-weight: 700 !important; border: none !important; }


/* ============================================================================
   Formulář „Potřebujete poradit?" (AjaxForms\VasDotaz) KDEKOLI mimo #tabs
   (modul_kontaktni_formular na textových stránkách / článcích, detail bez
   záložek). Stejný vzhled jako verze v záložkách výše: karta, labely vlevo,
   pole na 100 %, CTA tlačítko. Přílohy jsou v jádru sbalené za tlačítkem
   „+ Přidat přílohu" (.vas_dotaz_prilohy_toggle → .vas_dotaz_prilohy_wrap).
   ============================================================================ */
div.modul_kontaktni_formular form[id^="vas_dotaz_"],
div#prostredek > section > div#sekce > form[id^="vas_dotaz_"],
div.zbozi_form_dotazy form[id^="vas_dotaz_"] {
    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;
}
form[id^="vas_dotaz_"] h2.vas_dotaz {
    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;
    letter-spacing: var(--tpl-head-tracking, 0);
    color: var(--tpl-text);
    background: none;
    border: 0;
    text-align: left;
}
form[id^="vas_dotaz_"] h2.vas_dotaz span.podnadpis {
    display: block;
    margin-top: 4px;
    font-family: var(--tpl-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tpl-text-light);
}
form[id^="vas_dotaz_"] div.povinne { margin: 0; }
form[id^="vas_dotaz_"] div.povinne > br,
form[id^="vas_dotaz_"] > br { display: none; }

form[id^="vas_dotaz_"] div.form_row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 14px;
    align-items: flex-start;
}
form[id^="vas_dotaz_"] div.form_label {
    flex: 0 0 150px;
    padding-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tpl-text);
}
form[id^="vas_dotaz_"] div.form_input {
    flex: 1 1 220px;
    min-width: 0;
}
/* Vstupy: inline width:300px z jádra → 100 % sloupce */
form[id^="vas_dotaz_"] div.form_input input.input_text:not(.tel_stat):not(.tel_cislo),
form[id^="vas_dotaz_"] div.form_input textarea {
    width: 100% !important;
    padding: 10px 12px;
    border: 1px solid #d6d5d0;
    border-radius: var(--tpl-border-radius);
    font-size: 14px;
    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);
}
form[id^="vas_dotaz_"] div.form_input input.input_text:focus,
form[id^="vas_dotaz_"] div.form_input textarea:focus {
    outline: none;
    border-color: var(--tpl-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tpl-primary) 14%, transparent);
}
form[id^="vas_dotaz_"] div.form_input textarea {
    min-height: 120px;
    resize: vertical;
}
/* Telefon: předvolba + číslo jako jeden spojený prvek */
form[id^="vas_dotaz_"] div.form_input:has(span.tel_cislo) { display: flex; }
form[id^="vas_dotaz_"] div.form_input span.tel_stat { flex: 0 0 72px; }
form[id^="vas_dotaz_"] div.form_input span.tel_cislo { flex: 1 1 auto; min-width: 0; }
form[id^="vas_dotaz_"] div.form_input input.tel_stat {
    width: 100% !important;
    padding: 10px 8px !important;
    border: 1px solid #d6d5d0 !important;
    border-right: none !important;
    border-radius: var(--tpl-border-radius) 0 0 var(--tpl-border-radius) !important;
    font-size: 14px !important;
    font-family: var(--tpl-font) !important;
    text-align: center;
    box-sizing: border-box;
    background: var(--tpl-surface-2, #f1f0ed);
}
form[id^="vas_dotaz_"] div.form_input input.tel_cislo {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #d6d5d0 !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);
}
/* Přílohy: tlačítko „+ Přidat přílohu" jako sekundární (outline) tlačítko */
form[id^="vas_dotaz_"] button.vas_dotaz_prilohy_toggle {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    margin: 0;
    background: var(--tpl-card-bg);
    color: var(--tpl-primary);
    border: 1px solid var(--tpl-primary);
    border-radius: var(--tpl-border-radius);
    font-family: var(--tpl-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tpl-transition), color var(--tpl-transition);
}
form[id^="vas_dotaz_"] button.vas_dotaz_prilohy_toggle:hover {
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
}
form[id^="vas_dotaz_"] div.form_row_prilohy div.form_label { padding-top: 10px; }
form[id^="vas_dotaz_"] div.vas_dotaz_dropzone {
    border: 2px dashed #cfcec9 !important;
    border-radius: var(--tpl-border-radius) !important;
    background: var(--tpl-surface-2, #f8f8f6) !important;
    color: var(--tpl-text-light) !important;
    padding: 22px 18px !important;
    font-family: var(--tpl-font);
}
form[id^="vas_dotaz_"] div.vas_dotaz_dropzone strong { color: var(--tpl-text); font-weight: 600; }
form[id^="vas_dotaz_"] small.vas_dotaz_dropzone_hint { color: var(--tpl-text-light) !important; font-size: 12px; margin-top: 6px !important; }
form[id^="vas_dotaz_"] div.vas_dotaz_dropzone_preview a { color: var(--tpl-stav-chyba) !important; text-decoration: none; }

/* GDPR souhlas */
form[id^="vas_dotaz_"] div.form_row:has(input[type="checkbox"]) { margin-top: 4px; }
form[id^="vas_dotaz_"] div.form_row:has(input[type="checkbox"]) div.form_input {
    flex: 1 1 100%;
    font-size: 13.5px;
    color: var(--tpl-text-light);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
form[id^="vas_dotaz_"] div.form_row:has(input[type="checkbox"]) input[type="checkbox"] {
    width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--tpl-primary);
}
/* Odeslat dotaz — CTA, zarovnané pod sloupec polí; na mobilu na plnou šířku */
form[id^="vas_dotaz_"] input.button.submit,
form[id^="vas_dotaz_"] input.submit[type="button"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    background: var(--tpl-cta-bg) !important;
    color: var(--tpl-cta-text) !important;
    border: none !important;
    border-radius: var(--tpl-border-radius) !important;
    padding: 0 32px !important;
    height: 46px;
    line-height: 46px;
    margin: 6px 0 0 164px;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--tpl-font) !important;
    width: auto !important;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--tpl-transition), transform var(--tpl-transition);
}
form[id^="vas_dotaz_"] input.button.submit:hover {
    background: var(--tpl-cta-bg-hover) !important;
    color: var(--tpl-cta-text-hover) !important;
    transform: translateY(-1px);
}
@media (max-width: 600px) {
    div.modul_kontaktni_formular form[id^="vas_dotaz_"] { padding: 18px 16px; margin: 20px 0; }
    form[id^="vas_dotaz_"] div.form_row { flex-direction: column; gap: 4px; margin-bottom: 12px; }
    form[id^="vas_dotaz_"] div.form_label { flex: 1 1 auto; padding-top: 0; }
    form[id^="vas_dotaz_"] div.form_input { width: 100%; flex: 1 1 100%; }
    form[id^="vas_dotaz_"] input.button.submit { margin-left: 0; width: 100% !important; }
}

/* ============================================================================
   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; }
}