/* Vyclenene ze sablona.css: pravidla scopovana na body.sekce_kosik.
   Sablona tenhle soubor linkuje JEN na sekci "kosik" (_body_all.latte),
   a AZ ZA sablona.css, takze kaskada zustava stejna jako pred delenim. */

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

}
@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;
}
@media (max-width: 370px) {body.sekce_kosik div.kosik_polozka_oddil > div.tpl-cena-stepper-wrap{
        grid-column: 4 !important;
        grid-row: 99 !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;
}
@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;
    }

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

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