/**
 * Jadro sablon 2026 (_core) - systemove styly sdilene vsemi sablonami 2026-xxx
 *
 * Linkuje _page.php, kdyz je _core v retezu sablony (ThemePaths::chain), poradi:
 *   promenne.css -> core.css (tento soubor) -> sablona.css -> varianty komponent
 *   -> vlastni.css -> DB CSS -> :root customizeru -> css2
 *
 * Vznikl rozdelenim templates/2026-001/css/sablona.css (krok 1.1, 11/2026).
 * Poradi pravidel je zachovane, tabulka puvodnich radku je v templates/_core/README.md.
 * Obsah: reset, ikony bez Font Awesome, naseptavac, skip-link, tap-targety, rozbite
 * obrazky, modaly (Koupit, Filtr, napoveda, tplModal, jQuery UI dialogy, pobocky, mapa),
 * potvrzeni po pridani do kosiku, kosik, objednavka, prihlaseni, registrace, ucet,
 * reklamace, odstoupeni, formulare, alerty, cookie lista.
 *
 * Barvy a rozmery jen pres tokeny --tpl-* (promenne.css). Vizual konkretni sablony
 * (hlavicka, menu, hero, karty, vypis, detail, paticka) sem nepatri.
 */

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

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

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

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

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

/* === AJAX košík z náhledu položky (krok 1.9b): rychlý výběr, toast, bottom sheet ===
   Chování je v _body_all.latte (jádro), šablona jen přebíjí vzhled tříd .tpl-rychly-vyber*,
   .tpl-toast*, #tpl-koupit-modal. */
.tpl-rychly-vyber-cena {
    font-size: 20px;
    font-weight: 700;
    color: var(--tpl-text);
    margin: 0 0 14px;
}
.tpl-modal-body {
    transition: opacity var(--tpl-transition);
}
.tpl-modal-err.tpl-rychly-vyber-chyba {
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-surface-2);
    color: var(--tpl-text);
}
.tpl-toast {
    position: fixed;
    left: 50%;
    /* --tpl-cookie-h = vyska pevne cookie listy dole (meri JS v _core) -> toast nad ni */
    bottom: calc(24px + var(--tpl-cookie-h, 0px));
    z-index: 10001;               /* nad .tpl-modal-overlay (10000) */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    width: max-content;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 12px 44px 12px 16px;
    background: var(--tpl-text);
    color: var(--tpl-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.18);   /* odliseni i na tmave paticce */
    border-radius: var(--tpl-border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    font-family: var(--tpl-font);
    font-size: 15px;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 16px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.tpl-toast.tpl-toast--viditelny {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.tpl-toast--chyba {
    background: #b3261e;
    color: #fff;
}
.tpl-toast-text {
    flex: 1 1 auto;
    min-width: 0;
}
.tpl-toast-akce {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.tpl-toast-btn {
    height: 36px;
    padding: 0 14px;
    border: 1px solid currentColor;
    border-radius: var(--tpl-border-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
}
.tpl-toast-btn.tpl-toast-btn--hlavni {
    background: var(--tpl-cta-bg);
    border-color: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
}
.tpl-toast-btn:hover {
    opacity: 0.9;
}
.tpl-toast-close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    background: none;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
}
@media (max-width: 600px) {
    .tpl-toast {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--tpl-cookie-h, 0px));
        width: calc(100vw - 24px);
    }
    /* Rychlý výběr a potvrzení jako bottom sheet: přilepené ke spodnímu okraji,
       plná šířka, zaoblené jen nahoře, scroll uvnitř. */
    #tpl-koupit-modal.tpl-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    #tpl-koupit-modal .tpl-modal {
        margin: auto 0 0;
        max-width: none;
        max-height: 92vh;
        overflow-y: auto;
        border-radius: var(--tpl-border-radius) var(--tpl-border-radius) 0 0;
        /* rezerva dole: home indikator (safe area) + pripadna cookie lista (z-index ~999999
           je nad sheetem) -> tlacitko Pridat do kosiku jde odscrollovat nad ni */
        padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px) + var(--tpl-cookie-h, 0px));
        animation: tpl-sheet-in 0.22s ease-out;
    }
}
@keyframes tpl-sheet-in {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .tpl-toast,
    .tpl-toast.tpl-toast--viditelny {
        transition: none;
    }
    #tpl-koupit-modal .tpl-modal {
        animation: none;
    }
}

/* === 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); }
/* span.kosik_cena_s_dph je i modul "Košík" v hlavičce — ten ho na mobilu/zúžených
   šířkách schovává (viz media queries výš). V náhledu košíku v potvrzovacím modalu
   (#472) musí zůstat vidět vždy — proto display přebité zde (vyšší specificita). */
.tpl-cart-preview li.vcetne_dph .kosik_cena_s_dph { display: inline; }
.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-item {
    font-weight: 700;
    font-size: 15px;
    color: var(--tpl-text);
    margin-top: 4px;
}

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

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

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

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

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

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


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

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

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

/* Cart table improvements */
div#kosik table td img,
table.kosik td img {
    border-radius: var(--tpl-border-radius);
}
@media (max-width: 480px) {

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

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

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


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

/* Mobilní (<= 900 px) i desktopové okno výběru výdejního místa: viz css/sekce/objednavka.css
   (blok „OKNO VÝBĚRU VÝDEJNÍHO MÍSTA"); dřívější mobilní blok (<= 768 px) odtud odstraněn. */

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

/* ARES tlačítko "Ověřit" vedle IČ — skryté, nahrazuje ho vlastní ares input (viz výš) */
body.sekce_objednavka div.tpl-obj-col-2 input[type="button"][value*="Ověřit" i] {
    display: none !important;
}

/* #474: tlačítko "Test" (jen superadmin/dev IP, inc/objednavka-3.php) — dřív bylo
   omylem schované stejně jako "Ověřit". Necháme viditelné, jen nenápadně stylované
   vedle inputu jména, ať nepůsobí jako běžné tlačítko objednávky. */
body.sekce_objednavka div.tpl-obj-col-2 input.tpl-test-udaje {
    margin-left: 8px;
    padding: 3px 10px !important;
    font-size: 11px !important;
    border-radius: var(--tpl-border-radius) !important;
    background: #eee !important;
    color: #888 !important;
    border: 1px dashed #bbb !important;
    vertical-align: middle;
}

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

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

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

/* #474: Zboží celkem (subtotal bez dopravy/platby) */
body.sekce_objednavka div.tpl-shrnuti-zbozi-celkem {
    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-zbozi-celkem > span.tpl-shrnuti-zbozi-celkem-label {
    color: #555;
}
body.sekce_objednavka div.tpl-shrnuti-zbozi-celkem > span.tpl-shrnuti-zbozi-celkem-cena {
    font-weight: 700;
    white-space: nowrap;
}

/* #474: Platba — stejný vzhled jako řádek dopravy */
body.sekce_objednavka div.tpl-shrnuti-platba {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 2px 4px;
    font-size: 13px;
    color: var(--tpl-text);
}
body.sekce_objednavka div.tpl-shrnuti-platba > span.tpl-shrnuti-platba-nazev {
    color: #555;
}
body.sekce_objednavka div.tpl-shrnuti-platba > span.tpl-shrnuti-platba-cena {
    font-weight: 700;
    white-space: nowrap;
}

/* #474: Souhlasy (OP, Heureka, novinky, vlastní z adminu) — skutečné funkční
   checkboxy z jádra (Shop::checkbox_objednavka_krok_4), ne jen informační text. */
body.sekce_objednavka div.tpl-fragment-souhlasy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #e3e3e3;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    font-size: 12px;
    color: var(--tpl-text);
    line-height: 1.45;
}
body.sekce_objednavka div.tpl-fragment-souhlasy div.souhlasy {
    display: flex;
}
body.sekce_objednavka div.tpl-fragment-souhlasy span.zpracovani_ou {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 4px;
}
body.sekce_objednavka div.tpl-fragment-souhlasy input[type="checkbox"] {
    margin: 2px 6px 0 0;
    flex: none;
}
body.sekce_objednavka div.tpl-fragment-souhlasy a {
    color: var(--tpl-text);
    text-decoration: underline;
}
body.sekce_objednavka div.tpl-fragment-souhlasy a.souhlas_vice_informaci {
    font-size: 11px;
    color: #888;
}
body.sekce_objednavka div.tpl-fragment-souhlasy div.souhlasy.tpl-invalid {
    outline: 1px solid #c0392b;
    border-radius: var(--tpl-border-radius);
    padding: 4px;
    margin: -4px -4px 0;
}

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

/* === Kosik na mobilu jako karty (zpetna vazba klienta MujPitbike 10/2026: „kosik je mimo
   obrazovku telefonu") =====================================================================
   Jadro renderuje kosik jako tabulku s 5 sloupci (nazev/pocet/cena/DPH/sleva). Pod ~760 px
   se sloupce stlaci na par znaku, nazev se lame a tlacitka -/+/x jsou pod sebou. Tabulku
   proto preklapime do karet: nazev + kod, pod nim cena a ovladani mnozstvi v jednom radku. */
@media (max-width: 760px) {
    body[class*="sekce_kosik"] div#kosik_zbozi table,
    body[class*="sekce_kosik"] div#kosik_zbozi tbody,
    body[class*="sekce_kosik"] div#kosik_zbozi tr,
    body[class*="sekce_kosik"] div#kosik_zbozi td { display: block; width: auto !important; }
    body[class*="sekce_kosik"] div#kosik_zbozi table { border-collapse: separate; }
    body[class*="sekce_kosik"] div#kosik_zbozi tr.top,
    body[class*="sekce_kosik"] div#kosik_zbozi tr.kosik_oddelovac { display: none; }

    body[class*="sekce_kosik"] div#kosik_zbozi tr.kosik_zbozi_top {
        border: 1px solid var(--tpl-card-border, #e6e5e1);
        border-radius: 10px;
        padding: 12px 14px;
        margin: 0 0 10px;
        background: var(--tpl-card-bg, #fff);
    }
    body[class*="sekce_kosik"] div#kosik_zbozi tr.kosik_zbozi_top > td { border: none; padding: 0; }
    body[class*="sekce_kosik"] div#kosik_zbozi td.kosik_zbozi_nazev { font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
    body[class*="sekce_kosik"] div#kosik_zbozi td.kosik_zbozi_nazev .kosik_kody_zbozi { font-size: 12px; font-weight: 400; color: var(--tpl-text-light, #7a7975); margin-top: 2px; }
    body[class*="sekce_kosik"] div#kosik_zbozi tr.kosik_zbozi_top > td.right { font-size: 18px; font-weight: 700; margin: 0 0 8px; text-align: left !important; }
    body[class*="sekce_kosik"] div#kosik_zbozi tr.kosik_zbozi_top > td.dph { font-size: 12px; color: var(--tpl-text-light, #7a7975); text-align: left !important; }
    body[class*="sekce_kosik"] div#kosik_zbozi td.kosik_pocet { display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
    body[class*="sekce_kosik"] div#kosik_zbozi td.kosik_pocet .tlacitka-pocet { display: inline-flex; align-items: center; gap: 6px; }
    body[class*="sekce_kosik"] div#kosik_zbozi td.kosik_pocet input.input_text { width: 64px !important; height: 40px; text-align: center; }
    body[class*="sekce_kosik"] div#kosik_zbozi td.kosik_pocet input.button { width: 40px; height: 40px; }
    body[class*="sekce_kosik"] div#kosik_zbozi td.kosik_pocet input.smazat { margin-left: auto; }

    body[class*="sekce_kosik"] div#kosik_zbozi tr.kosik_rekapitulace {
        display: flex !important; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px;
        border-top: 2px solid var(--tpl-primary, #1E4FA3); padding: 12px 2px 0; margin-top: 6px; font-size: 16px;
    }
    body[class*="sekce_kosik"] div#kosik_zbozi tr.kosik_rekapitulace > td:empty { display: none; }
    body[class*="sekce_kosik"] div#kosik_zbozi tr.kosik_rekapitulace .kosik_cena_s_dph { font-size: 20px; font-weight: 700; }
    /* mena u ceny v karte (v tabulce byla v zahlavi sloupce) */
    body[class*="sekce_kosik"].tpl-mena-czk div#kosik_zbozi tr.kosik_zbozi_top > td.right:after { content: " CZK"; font-size: 13px; font-weight: 400; color: var(--tpl-text-light, #7a7975); }
    body[class*="sekce_kosik"].tpl-mena-eur div#kosik_zbozi tr.kosik_zbozi_top > td.right:after { content: " EUR"; font-size: 13px; font-weight: 400; color: var(--tpl-text-light, #7a7975); }
}

/* --- Vybrane vydejni misto primo v radku dopravy (JS tplPobockaDoRadku v _body_all.latte) ------ */
body.sekce_objednavka table.dopravy tr.tpl-doprava-pobocka label { white-space: normal; overflow: visible; }
body.sekce_objednavka table.dopravy tr.tpl-doprava-pobocka label > div.doprava_popis { overflow: visible; text-overflow: clip; white-space: normal; display: flex; flex-direction: column; gap: 1px; }
body.sekce_objednavka table.dopravy tr.tpl-doprava-pobocka .tpl-doprava-pobocka-nazev { color: var(--tpl-text); font-weight: 600; font-size: 13px; }
body.sekce_objednavka table.dopravy tr.tpl-doprava-pobocka .tpl-doprava-pobocka-adresa { color: #666; font-size: 12px; }
/* ==========================================================================
   SABLONY 2026 – HLAVICKA JAKO SLOTY (krok 1.7) a PATICKY B–D (krok 1.8)
   Jen zakladni rozvrzeni a chovani; barvy z tokenu --tpl-*. Vzhled si sablona
   doladi v sablona.css (nacita se az za core.css, staci stejna specificita).
   Vychozi rozvrzeni 2026-001 z nich pouziva jen .tpl-oznameni (slot_oznameni - vykresli se,
   az kdyz je vyplnene oznameni_text); ostatni tridy az sablona / nastaveni, ktere je zapne.
   ========================================================================== */

/* --- Oznamovaci lista (slot_oznameni) --- */
.tpl-oznameni {
    background: var(--tpl-accent, var(--tpl-cta-bg));
    color: var(--tpl-accent-text, var(--tpl-cta-text));
    font-size: 14px;
    line-height: 1.35;
}
.tpl-oznameni-in {
    max-width: var(--tpl-max-width);
    margin: 0 auto;
    padding: 8px 44px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 12px;
    position: relative;
    text-align: center;
}
.tpl-oznameni a.tpl-oznameni-text,
.tpl-oznameni a.tpl-oznameni-text:hover { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tpl-oznameni-odpocet { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tpl-oznameni-odpocet:empty { display: none; }
.tpl-oznameni-zavrit {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.tpl-oznameni-zavrit:hover { background: rgba(0, 0, 0, 0.12); }
.tpl-oznameni-zavrit svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
    .tpl-oznameni { font-size: 13px; }
    .tpl-oznameni-in { padding: 7px 40px 7px 12px; }
}

/* --- Sloty: jazyky / meny vzdy v DOM, pri jedne volbe skryte --- */
.tpl-jazyky.tpl-jazyky--jeden,
.tpl-currency-switcher.tpl-currency-switcher--jedna { display: none; }
.tpl-jazyky-select {
    font: inherit;
    font-size: 13px;
    padding: 4px 6px;
    border: 1px solid currentColor;
    border-radius: var(--tpl-radius-sm);
    background: transparent;
    color: inherit;
}

/* --- Sloty: hledani jako ikona (slot_search rezim 'ikona') --- */
.tpl-header-search--ikona { position: relative; display: inline-flex; align-items: center; }
.tpl-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.tpl-search-toggle svg { width: 20px; height: 20px; }
.tpl-header-search--ikona .tpl-search-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
    width: min(520px, 92vw);
    padding: 10px;
    background: var(--tpl-card-bg);
    color: var(--tpl-text);
    border-radius: var(--tpl-border-radius);
    box-shadow: var(--tpl-shadow-hover);
}
.tpl-header-search--ikona.tpl-search-otevreno .tpl-search-panel { display: block; }

/* --- Sloty: horni lista (slot_topbar) --- */
.tpl-topbar-odkazy { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.tpl-topbar-odkazy a { color: inherit; text-decoration: none; }
.tpl-topbar-odkazy a:hover { text-decoration: underline; }

/* --- Sloty: menu s tlacitkem "Vsechny kategorie" (slot_menu styl 'tlacitko_vsechny') --- */
.tpl-menu--tlacitko_vsechny {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px 20px;
    flex-wrap: wrap;
}
.tpl-menu-vsechny {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.tpl-menu-vsechny svg { width: 18px; height: 18px; }
.tpl-menu-vsechny-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--tpl-card-bg);
    color: var(--tpl-text);
    border-radius: var(--tpl-border-radius);
    box-shadow: var(--tpl-shadow-hover);
    padding: 12px;
}
.tpl-menu-otevreno > .tpl-menu-vsechny-panel { display: block; }
.tpl-menu-rychle { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tpl-menu-rychle a { color: var(--tpl-menu-text); text-decoration: none; font-weight: 600; padding: 8px 0; }
.tpl-menu-rychle a:hover,
.tpl-menu-rychle a.tpl-menu-rychle-aktivni { color: var(--tpl-menu-hover-text); text-decoration: underline; }
.tpl-menu--centrovane #menu_kategorie_hlavni,
.tpl-menu--centrovane .tpl-mega-l1 { justify-content: center; }

/* --- Mega menu s fotkami (komponenty/mega-menu.latte) --- */
.tpl-mega { position: relative; }
.tpl-mega ul { list-style: none; margin: 0; padding: 0; }
.tpl-mega-l1 { display: flex; flex-wrap: wrap; }
.tpl-mega-odkaz {
    display: block;
    padding: 12px 16px;
    color: var(--tpl-menu-text);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.tpl-mega-polozka:hover > .tpl-mega-odkaz,
.tpl-mega-polozka.tpl-mega-aktivni > .tpl-mega-odkaz { background: var(--tpl-menu-hover-bg); color: var(--tpl-menu-hover-text); }
.tpl-mega-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
    padding: 20px;
    background: var(--tpl-card-bg);
    color: var(--tpl-text);
    border-radius: 0 0 var(--tpl-border-radius) var(--tpl-border-radius);
    box-shadow: var(--tpl-shadow-hover);
}
.tpl-mega-polozka:hover > .tpl-mega-panel,
.tpl-mega-polozka:focus-within > .tpl-mega-panel { display: block; }
.tpl-mega-l2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px 20px;
}
.tpl-mega-dlazdice-odkaz {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--tpl-text);
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}
.tpl-mega-dlazdice-odkaz:hover .tpl-mega-nazev { color: var(--tpl-link-hover); }
.tpl-mega-foto {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--tpl-radius-sm);
    background: var(--tpl-surface-2, #F1F1F1);
}
.tpl-mega-dlazdice .tpl-mega-l3 { margin-top: 6px; text-align: center; font-size: 13px; }
.tpl-mega-l3 a { color: var(--tpl-text-light); text-decoration: none; line-height: 1.8; }
.tpl-mega-l3 a:hover { color: var(--tpl-link-hover); }
.tpl-mega-vse { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--tpl-link); }
@media (max-width: 768px) {
    .tpl-mega-l1 { flex-direction: column; }
    .tpl-mega-panel { position: static; display: block; padding: 0 0 8px 16px; box-shadow: none; background: transparent; }
    .tpl-mega-l2 { display: block; }
    .tpl-mega-dlazdice-odkaz { flex-direction: row; text-align: left; padding: 6px 0; }
    .tpl-mega-foto { width: 40px; height: 40px; }
    .tpl-mega-l3, .tpl-mega-vse { display: none; }
}

/* --- Kompaktni hlavicka pokladny (hlavicka--checkout.latte) --- */
#hlavicka.tpl-hd-checkout .tpl-hd-checkout-obsah {
    display: flex;
    align-items: center;
    gap: 12px 28px;
    flex-wrap: wrap;
}
.tpl-hd-checkout .tpl-header-logo img { max-height: 48px; width: auto; }
.tpl-hd-checkout-bezpecne {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tpl-header-text);
    opacity: 0.85;
}
.tpl-hd-checkout-bezpecne svg { width: 16px; height: 16px; }
.tpl-hd-checkout-kroky {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.tpl-hd-checkout-krok {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tpl-header-text);
    opacity: 0.6;
    font-size: 14px;
}
.tpl-hd-checkout-krok + .tpl-hd-checkout-krok::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    margin-right: 2px;
    background: currentColor;
    opacity: 0.4;
}
.tpl-hd-checkout-krok a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.tpl-hd-checkout-krok--aktivni,
.tpl-hd-checkout-krok--hotovo { opacity: 1; }
.tpl-hd-checkout-krok--aktivni { font-weight: 700; }
.tpl-hd-checkout-cislo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-size: 13px;
    font-weight: 700;
}
.tpl-hd-checkout-krok--aktivni .tpl-hd-checkout-cislo {
    background: var(--tpl-header-cart-bg, var(--tpl-cta-bg));
    border-color: var(--tpl-header-cart-bg, var(--tpl-cta-bg));
    color: var(--tpl-cta-text);
}
.tpl-hd-checkout-nazev { display: inline-block; }
.tpl-hd-checkout-nazev::first-letter { text-transform: uppercase; }
.tpl-hd-checkout-pravy { margin-left: auto; }
@media (max-width: 768px) {
    #hlavicka.tpl-hd-checkout #hlavicka_obsah { height: auto; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
    .tpl-hd-checkout .tpl-header-logo { order: 1; }
    .tpl-hd-checkout-bezpecne { order: 2; margin-left: auto; }
    .tpl-hd-checkout-kroky { order: 3; width: 100%; justify-content: center; }
    .tpl-hd-checkout-nazev { display: none; }
    .tpl-hd-checkout-krok--aktivni .tpl-hd-checkout-nazev { display: inline-block; }
    .tpl-hd-checkout-pravy { display: none; }
}

/* --- Paticky B–D (komponenty/paticka-{b,c,d}.latte): jen rozvrzeni --- */
.tpl-foot--b .tpl-foot-social,
.tpl-foot--c .tpl-foot-social { width: auto; }
.tpl-foot--b .tpl-foot-contact,
.tpl-foot--c .tpl-foot-c-kontakt { display: flex; flex-wrap: wrap; gap: 8px 16px; flex-direction: row; align-items: center; }
.tpl-foot--b .tpl-foot-head { margin-bottom: 14px; padding-bottom: 0; }

/* B – Kompaktni */
.tpl-foot-b-horni {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
    gap: 24px 40px;
    padding-bottom: 24px;
}
#paticka_moduly.tpl-foot-b-sloupce {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px 28px;
    margin: 0;
}
.tpl-foot-b-sloupec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tpl-foot-b-sloupec .tpl-foot-b-odkazy { display: flex; flex-direction: column; gap: 8px; }
.tpl-foot-b-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    padding: 18px 0;
    border-top: 1px solid var(--tpl-footer-border);
    border-bottom: 1px solid var(--tpl-footer-border);
}
.tpl-foot-b-overeni { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.tpl-foot-b-overeni-odkaz {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--tpl-footer-border);
    border-radius: var(--tpl-border-radius);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.tpl-foot-b-overeni-odkaz svg { width: 18px; height: 18px; }
@media (max-width: 768px) {
    .tpl-foot-b-horni { grid-template-columns: 1fr; }
    #paticka_moduly.tpl-foot-b-sloupce { grid-template-columns: 1fr; gap: 0; }
    .tpl-foot-b-sloupec { gap: 0; border-bottom: 1px solid var(--tpl-footer-border); }
    .tpl-foot-b-sloupec > .tpl-foot-h,
    .tpl-foot-b-sloupec > .ramec_top,
    .tpl-foot-b-sloupec > .paticka_nadpis {
        position: relative;
        margin: 0;
        padding: 14px 28px 14px 0;
        cursor: pointer;
    }
    .tpl-foot-b-sloupec > .tpl-foot-h::after,
    .tpl-foot-b-sloupec > .ramec_top::after,
    .tpl-foot-b-sloupec > .paticka_nadpis::after {
        content: "+";
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        font-weight: 400;
        line-height: 1;
    }
    .tpl-foot-b-otevreno > .tpl-foot-h::after,
    .tpl-foot-b-otevreno > .ramec_top::after,
    .tpl-foot-b-otevreno > .paticka_nadpis::after { content: "\2212"; }
    .tpl-foot-b-sloupec:not(.tpl-foot-b-otevreno) > :not(.tpl-foot-h):not(.ramec_top):not(.paticka_nadpis) { display: none; }
    .tpl-foot-b-sloupec.tpl-foot-b-otevreno { padding-bottom: 14px; }
    .tpl-foot-b-trust { justify-content: flex-start; }
}

/* C – Newsletter pas */
.tpl-foot--c .tpl-foot-c-news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
    align-items: center;
    gap: 16px 40px;
    margin-bottom: 32px;
    padding: 28px 32px;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-secondary, var(--tpl-primary));
    color: var(--tpl-primary-text);
}
.tpl-foot-c-news-h { font-size: 20px; font-weight: 700; line-height: 1.25; margin-bottom: 4px; }
.tpl-foot-c-news-p { font-size: 14px; opacity: 0.85; }
.tpl-foot--c .tpl-foot-news-note { color: inherit; opacity: 0.7; }
.tpl-foot-c-odkazy {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
    gap: 24px 40px;
    padding-bottom: 24px;
}
.tpl-foot-c-firma { display: flex; flex-direction: column; gap: 6px; }
.tpl-foot-c-firma .tpl-foot-brand { font-size: 18px; }
#paticka_moduly.tpl-foot-c-sloupce {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px 28px;
    margin: 0;
}
.tpl-foot-c-sloupec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tpl-foot-c-loga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    padding: 18px 0;
    border-top: 1px solid var(--tpl-footer-border);
}
.tpl-foot--c .tpl-foot-c-spodek {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-top: 18px;
    border-top: 1px solid var(--tpl-footer-border);
    text-align: left;
}
@media (max-width: 768px) {
    .tpl-foot--c .tpl-foot-c-news { grid-template-columns: 1fr; padding: 22px 18px; }
    .tpl-foot-c-odkazy { grid-template-columns: 1fr; }
    .tpl-foot--c .tpl-foot-c-spodek { flex-direction: column; justify-content: center; text-align: center; }
}

/* D – Minimalni */
.tpl-foot--d {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
    padding: 6px 0;
}
#paticka_moduly.tpl-foot-d-odkazy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 0; font-size: 14px; }
.tpl-foot-d-odkazy .paticka_modul,
.tpl-foot-d-odkazy .ramec_body,
.tpl-foot-d-odkazy .ramec_body p,
.tpl-foot-d-odkazy .ramec_body ul { display: contents; }
.tpl-foot-d-odkazy .ramec_top,
.tpl-foot-d-odkazy .paticka_nadpis,
.tpl-foot-d-odkazy .tpl-foot-h { display: none; }
.tpl-foot-d-odkazy li { list-style: none; display: inline; }
.tpl-foot-d-volby { display: flex; align-items: center; gap: 12px 18px; }
.tpl-foot--d .tpl-foot-d-copy { padding-top: 0; flex-basis: 100%; }
.tpl-foot-d-meny { display: inline-flex; gap: 2px; }
@media (max-width: 768px) {
    .tpl-foot--d { flex-direction: column; text-align: center; }
    #paticka_moduly.tpl-foot-d-odkazy { justify-content: center; }
}