/* kosik-extra.css — hodiny-online.cz
   Nakupni proces, kroky 1-3 (podklady katalog/5.1-5.3.png).
   Scope: `body.ordering-process` = vsechny kroky, `in-kosik` = 1,
   `in-krok-1` = 2, `in-krok-2` = 3.
   Nic se neskryva - soupis prvku a co s nimi je v PROJEKT.md.
   Nacitat AZ ZA ostatni vlastni CSS. */

:root {
  --ho-ks-ramecek: #e6e1d6;
  --ho-ks-podklad: #f6f4f1;
  --ho-ks-text:    #2b2622;
  --ho-ks-slaba:   #6d6459;
  /* Zelena stavu ZDARMA. Je to odstin, kterym `style.css` barvi ZDARMA
     u nevybranych voleb dopravy a platby - drzi se, aby slovo melo napric
     kroky jednu barvu. Drive mely nas souhrn a pruh dopravy tmavsi
     #129066 a vybrana volba dokonce zlatou. */
  --ho-ks-zelena:  #3A800E;
  --ho-ks-mezera:  24px;
}

/* ===== 0) POZADI CELEHO KOSIKU =====
   Zkouselo se 21. 10. zpruhlednit `.cart-content`, aby pod sekcemi prosvitalo
   pozadi stranky. **Zamitnuto** - v sedem `#f6f6f6` kosik nesedel se zbytkem
   eshopu. Plocha mimo ramecky zustava bila, sekce odlisuje jen ramecek.

   Seda `#f6f6f6` je na `body`, takze zbyvala po stranach obsahu a pod nim
   (vpravo od 1425 px a pod pravym sloupcem). V nakupnim procesu se proto
   prebarvuje na bilou. **Jen tady** - zbytek webu si svou sedou drzi. */

body.ordering-process { background: #fff; }

/* ===== 1) TLACITKA V CELEM PROCESU =====
   Sablona je ma zelena (#32cb00). Zlatou drzi --color-primary. */

body.ordering-process .btn-conversion,
body.ordering-process .next-step-forward,
body.ordering-process .next-step-finish {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--color-primary, #B5A264) !important;
  color: var(--ho-ks-text) !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .2s ease;
}

/* Text tlacitka je ve vnorenem `span` (`.order-button-text`), ktery ma od
   sablony `font-weight: 400` - bez tohohle pravidla tlacitko tucne nebylo. */
body.ordering-process :is(.btn-conversion, .next-step-forward,
                          .next-step-finish) :is(span, strong) {
  font-weight: 700 !important;
}

body.ordering-process .btn-conversion:hover,
body.ordering-process .next-step-forward:hover,
body.ordering-process .next-step-finish:hover {
  background: color-mix(in srgb, var(--color-primary, #B5A264) 88%, #000) !important;
}

/* Odkaz "Zpet" zustava textovy, jen prebarveny z zelene. */
body.ordering-process .next-step-back {
  background: none !important;
  border: 0 !important;
  color: var(--color-primary, #B5A264) !important;
  font-weight: 400;
  text-decoration: underline;
}

body.ordering-process .next-step-back:hover {
  color: var(--ho-ks-text) !important;
}

/* ===== 2) LISTA KROKU ===== */

body.ordering-process .cart-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 var(--ho-ks-mezera);
  padding: 0;
  border: 0;
  list-style: none;
}

body.ordering-process .cart-header > .step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ho-ks-slaba);
  font-size: 14px;
  white-space: nowrap;
}

body.ordering-process .cart-header > .step :is(a, strong) {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

/* Sablona kresli pod aktivnim krokem zlatou linku na `strong`, ktery ma
   vysku cele polozky - linka proto lezela 14 px pod textem a zacinala
   20 px pred koleckem s cislem. Aktivni krok je poznat podle zlateho
   kolecka a tmavsiho tucneho textu, linka se rusi. */
body.ordering-process .cart-header > .step :is(a, strong) {
  border-bottom: 0 !important;
}

/* Kolecko s cislem kresli sablona (`counter(steps)` na `.step span::before`),
   vlastni se nepridava - byla by dve. */
body.ordering-process .cart-header .step span::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border-width: 1px;
  border-color: var(--ho-ks-ramecek);
  background: transparent;
  color: var(--ho-ks-slaba);
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
}

body.ordering-process .cart-header .step.active span::before {
  border-color: var(--color-primary, #B5A264);
  background: var(--color-primary, #B5A264);
  color: #fff;
}

body.ordering-process .cart-header .step.completed span::before {
  border-color: var(--color-primary, #B5A264);
  color: var(--color-primary, #B5A264);
}

body.ordering-process .cart-header > .step.active {
  color: var(--ho-ks-text);
  font-weight: 600;
}

/* ===== 3) BOXY =====
   Sablona kresli kazdou sekci jako .box; sjednotit na bilou kartu. */

/* Ramecek nese VZDY `.box`, at je zanoreny jakkoli hluboko. Ve 3. kroku
   lezi "Fakturacni adresa" uvnitr obalu `.co-billing-address`, ktery ma sam
   vodorovne odsazeni 80 px - box uvnitr nej proto vychazel o 80 px uzsi
   (705 misto 865) a rozmery se mezi sekcemi rozchazely. Obaly `.co-box`
   odsazeni odevzdaji boxu, aby vsechny stale na stejne care. */
body.ordering-process .cart-content .box.box-bg-default {
  margin-bottom: var(--ho-ks-mezera);
  padding: 38px 80px !important;
  border: 1px solid var(--ho-ks-ramecek);
  border-radius: 0;
  background: #fff;
}

body.in-krok-2 .cart-content > .co-box:not(.box),
body.in-krok-2 #shipping-address {
  margin-bottom: var(--ho-ks-mezera);
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

body.in-krok-2 .cart-content > .co-box:not(.box) > .box,
body.in-krok-2 #shipping-address > .box {
  margin-bottom: 0;
}

/* Volby mimo boxy - "Dorucit na jinou adresu", "Zadat poznamku pro prodejce",
   pole poznamky a newslettery. Podle predlohy stoji bez ramecku, jen
   zarovnane s obsahem boxu nad nimi. */
body.in-krok-2 .cart-content > .co-box:not(.box) > :not(.box),
body.in-krok-2 .co-box-additional > * {
  padding-left: 80px !important;
  padding-right: 80px !important;
  border: 0 !important;
  background: none !important;
}

body.in-krok-2 .co-box-additional > *:not(:last-child) {
  margin-bottom: 14px;
}

/* Pole poznamky ma uvnitr vlastni `fieldset.box`, ktery by jinak dostal
   ramecek jako sekce vyse. Podle zadani tam zadne ohraniceni byt nema. */
body.in-krok-2 :is(#note, .co-box-additional) .box.box-bg-default {
  margin-bottom: 0;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

body.ordering-process .cart-content h2,
body.ordering-process .cart-content .h4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin: 0 0 22px;
  padding: 0 !important;
  color: var(--ho-ks-text);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
}

/* Ikonu sekce kresli sablona jako glyf v `::before`; ma vlastni sirku,
   takze nadpis odsouvala doprostred boxu. V predloze stoji tesne u textu. */
body.ordering-process .cart-content h2::before,
body.ordering-process .cart-content .h4::before {
  position: static;
  flex: none;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--color-primary, #B5A264);
  font-size: 30px;
  line-height: 1;
}

/* ===== 5) KROK 1 - POLOZKY ===== */

body.in-kosik .cart-table {
  width: 100%;
  margin: 0 0 16px;
  border: 1px solid var(--ho-ks-ramecek);
  background: #fff;
}

body.in-kosik .cart-table :is(td, th) {
  border: 0;
  border-bottom: 1px solid var(--ho-ks-ramecek);
  vertical-align: middle;
}

body.in-kosik .cart-table .availability,
body.in-kosik .cart-table .availability-label {
  text-align: left;
}

body.in-kosik .cart-table tr:last-child :is(td, th) {
  border-bottom: 0;
}

/* Pod poslednim produktem se na mobilu scitaly **tri cary na 22 px**:
   bunky (332), radek (343) a ramecek tabulky (354). `tr:last-child` to
   neresilo - posledni `tr` je skryty radek se souvisejicimi produkty,
   ne `tr.removeable`. Na mobilu se navic bunky lamou pod sebe, takze
   kazda kreslila vlastni caru pres celou sirku karty.

   Oddelovac mezi produkty proto na mobilu nese cely radek, ne jednotlive
   bunky, a u posledniho produktu se rusi - spodni hranu uz kresli ramecek
   tabulky. Namereno pred -> po: PC 10 -> 5 car, mobil 9 -> 2. */
@media (max-width: 767px) {
  body.in-kosik .cart-table :is(td, th) { border-bottom: 0 !important; }
}

body.in-kosik .cart-table tr.removeable:not(:has(~ tr.removeable)),
body.in-kosik .cart-table tr.removeable:not(:has(~ tr.removeable)) :is(td, th) {
  border-bottom: 0;
}

body.in-kosik .cart-table .p-name,
body.in-kosik .cart-table a.main-link {
  color: var(--ho-ks-text) !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

body.in-kosik .cart-table a.main-link:hover {
  color: var(--color-primary, #B5A264) !important;
}

/* Odkaz na souvisejici produkty zustava - jen zmenseny a utlumeny. */
body.in-kosik .cart-table .related-products-trigger,
body.in-kosik .cart-table a.show-related,
body.in-kosik .cart-table [class*="related"] a {
  color: var(--ho-ks-slaba) !important;
  font-size: 13px;
  font-weight: 400;
}

body.in-kosik .cart-table a.show-related :is(b, strong) {
  color: inherit !important;
  font-weight: 400;
}

body.in-kosik .cart-table .cart-p-image img {
  border: 1px solid var(--ho-ks-ramecek);
  background: #fff;
}

/* ===== 5b) KROK 1 - HLAVICKA TABULKY, MNOZSTVI A KOS =====
   Podle predlohy 5.1. Hlavicku `thead` doplnuje kosik-extra.js - sablona
   v kosiku zadnou nema. */

body.in-kosik .cart-table thead.ho-ks-hlavicka th {
  padding: 15px 12px;
  border-bottom: 1px solid var(--ho-ks-ramecek);
  background: var(--ho-ks-podklad);
  color: var(--ho-ks-text);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

body.in-kosik .cart-table thead.ho-ks-hlavicka th.ho-ks-hlavicka__mnozstvi {
  text-align: center;
}

body.in-kosik .cart-table thead.ho-ks-hlavicka th.ho-ks-hlavicka__cena {
  text-align: right;
}

/* Mnozstvi: sablona kresli sipky nad sebou, predloha ma radku [-] 1 [+]. */
/* Sablona drzi vpravo `padding-right: 23px` jako misto pro sipky, ktere
   mela absolutne umistene. Po prerovnani do radky uz tam jen zbyvalo
   prazdne misto, proto se nuluje. */
body.in-kosik .cart-table .quantity {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--ho-ks-ramecek);
  background: #fff;
}

body.in-kosik .cart-table .quantity label { order: 2; margin: 0; }
body.in-kosik .cart-table .quantity .decrease { order: 1; }
body.in-kosik .cart-table .quantity .increase { order: 3; }

/* Sablona ma obe sipky `position: absolute` nad sebou u praveho okraje -
   bez `static` je flex nepreskladá a maji nulovou vysku. */
body.in-kosik .cart-table .quantity :is(.increase, .decrease) {
  position: static !important;
  width: 34px;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ho-ks-slaba);
  font-size: 17px;
  line-height: 1;
}

body.in-kosik .cart-table .quantity :is(.increase, .decrease) {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sablona sipku kresli glyfem v `::before` a vlastni znak - / + skryva.
   Predloha ma znaky, takze se glyf vypne a znak odkryje. */
body.in-kosik .cart-table .quantity :is(.increase, .decrease)::before,
body.in-kosik .cart-table .quantity :is(.increase, .decrease)::after {
  content: none;
}

body.in-kosik .cart-table .quantity :is(.increase__sign, .decrease__sign) {
  display: block;
  font-size: 17px;
  line-height: 1;
}

body.in-kosik .cart-table .quantity :is(.increase, .decrease):hover {
  color: var(--color-primary, #B5A264);
}

body.in-kosik .cart-table .quantity input.amount {
  width: 44px;
  height: 36px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--ho-ks-ramecek);
  border-right: 1px solid var(--ho-ks-ramecek);
  border-radius: 0;
  background: none;
  color: var(--ho-ks-text) !important;
  font-size: 15px;
  text-align: center;
}

/* Smazani polozky je od sablony odkaz s textem; predloha ma ikonu kose.
   Text zustava v prvku (jen opticky skryty), aby ho precetly ctecky. */
/* `display: flex` tady nejde - bunka by prestala byt `table-cell`, ztratila
   svisle zarovnani a cena by se rozesla s cenou za kus ve vedlejsim sloupci. */
@media (min-width: 768px) {
  body.in-kosik .cart-table td.p-total {
    text-align: right;
    white-space: nowrap;
  }

  body.in-kosik .cart-table td.p-total .price-final,
  body.in-kosik .cart-table td.p-total form.inline {
    display: inline-block;
    vertical-align: middle;
  }

  body.in-kosik .cart-table td.p-total form.inline { margin: 0 0 0 22px; }
}

/* Sablona kos ukazuje az pri najeti na radek (`opacity: 0`), v predloze
   je videt porad. */
body.in-kosik .cart-table .remove-item {
  position: relative;
  opacity: 1 !important;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: transparent;
  font-size: 0;
  overflow: hidden;
}

body.in-kosik .cart-table .remove-item::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--ho-ks-slaba);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"/><path d="M9 7V4.5h6V7"/><path d="M6.5 7l1 13h9l1-13"/><path d="M10 11v6M14 11v6"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"/><path d="M9 7V4.5h6V7"/><path d="M6.5 7l1 13h9l1-13"/><path d="M10 11v6M14 11v6"/></svg>');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

body.in-kosik .cart-table .remove-item:hover::before {
  background: var(--color-primary, #B5A264);
}

/* ===== 5c) KROK 1 - KARTA "DARKY A SLEVY" =====
   Obal doplnuje kosik-extra.js - nadpis a kupon jsou v sablone sourozenci
   ve dvou ruznych urovnich, takze je nejdriv spoji do jednoho prvku.
   Pruh "Dopravu mate zdarma" uvnitr nebude, v predloze je bez ramecku. */

body.in-kosik .ho-ks-kupon {
  margin-bottom: var(--ho-ks-mezera);
  padding: 24px 28px;
  border: 1px solid var(--ho-ks-ramecek);
  background: #fff;
}

body.in-kosik .ho-ks-kupon > h2 { margin-bottom: 16px; }
body.in-kosik .ho-ks-kupon .extras-col { flex: 1 1 auto; margin: 0; }

/* ===== 5d) KROK 1 - PODOBA PRODUKTU PODLE PREDLOHY 5.1 ===== */

/* Sirky sloupcu plati jen na PC - pod 768 px sablona tabulku lame do karet
   a pevna procenta tam prekryvala cenu se stepperem. */
@media (min-width: 768px) {
  body.in-kosik .cart-table td.cart-p-image { width: 130px; }
  body.in-kosik .cart-table td.p-name { width: 52%; }
  body.in-kosik .cart-table td.p-quantity { width: 130px; }
  body.in-kosik .cart-table td.p-price { width: 85px; }
  body.in-kosik .cart-table td.p-total { width: 130px; }

  /* Fotka je v predloze vetsi a bez ramecku. */
  body.in-kosik .cart-table .cart-p-image img {
    width: 120px;
    max-width: none;
    height: auto;
  }
}

body.in-kosik .cart-table .cart-p-image img { border: 0; }

/* Nazev ma od `style.css` velka pismena, predloha ho ma bezne psany. */
body.in-kosik .cart-table a.main-link {
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
}

/* Dostupnost stehuje kosik-extra.js pod nazev (`.ho-ks-dostupnost`),
   aby mel nazev cely sloupec a nelamal se tak brzy. Vyprazdnena bunka
   uz jen zabirala sloupec, proto jde z rozlozeni pryc - obsah v ni zadny
   nezustava, cely se presunul. */
body.in-kosik .cart-table td.p-availability.ho-ks-prazdna {
  display: none;
}

body.in-kosik .cart-table .ho-ks-dostupnost {
  margin-top: 8px;
}

/* Dostupnost: v predloze zeleny puntik a pod nim utlumeny podtitul.
   Zelena zustava, meni se jen zarovnani a velikost. */
body.in-kosik .cart-table :is(.p-availability, .ho-ks-dostupnost) {
  text-align: left;
}

/* `inline-flex` tu byl drive kvuli puntiku, ale flexovy radek ma vlastni
   ucari, takze pocet kusu za nim nesedel na stejne lince. Puntik proto
   jede jako `inline-block` a cely popisek zustava bezny inline text -
   dostupnost i pocet kusu pak stoji na jednom ucari. */
body.in-kosik .cart-table .availability-label {
  display: inline;
  font-size: 14px;
  font-weight: 400;
}

body.in-kosik .cart-table .availability-label::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

/* Pocet kusu jde za text dostupnosti, ne pod nej - a to i na mobilu,
   kde se drive lamal na vlastni radku zbytecne. Kdyz se nevejde,
   zalomi se sam. */
body.in-kosik .cart-table .availability-amount {
  display: inline;
  margin-left: 6px;
  color: var(--ho-ks-slaba) !important;
  font-size: 13px;
}

/* Cena je od `header-extra.css` zlata, predloha ma soucet tmavy a vyrazny
   a cenu za kus utlumenou. */
body.in-kosik .cart-table td.p-total .price-final {
  color: var(--ho-ks-text) !important;
  font-size: 20px;
  font-weight: 700;
}

body.in-kosik .cart-table td.p-price :is(.price-final, .unit-value) {
  color: var(--ho-ks-slaba) !important;
  font-size: 14px;
  font-weight: 400;
}

/* ===== 6) KROK 1 - PRUH "DOPRAVU MATE ZDARMA" =====
   Zelene kolecko s autem pryc, misto nej plocha lista pres sirku. */

body.in-kosik .cart-summary .extras-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

body.in-kosik .cart-summary .extras-col {
  flex: 1 1 280px;
  margin: 0;
}

/* Lista s dopravou zdarma jde podle predlohy pres celou sirku pod kupon. */
body.in-kosik .cart-summary .extras-col:has(.extra.delivery),
body.in-kosik .cart-summary .extras-col:has(.extra.delivery) .extras-wrap {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
}

/* Zelene kolecko je `.extra.delivery::before` (66x66, zelene). Nahrazuje
   ho plocha lista pres sirku se zlatou ikonou auta. */
body.in-kosik .extras-col .extra.delivery {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  background: var(--ho-ks-podklad);
  text-align: left;
}

/* Zelena ikony je zamerna - v predlohe je auto zelene, stejne jako text.
   Meni se jen tvar: z plneho kolecka 66 px na obrys auta.
   Rozmery sablona drzi pres !important, proto ho maji i nase.
   **Kresba varianta E** (21. 10.): korba zkracena na y=14 a kolecka maji pod
   ni vlastni misto, ikona 26 -> 36 px. U starsi kresby kolecka na korbu
   navazovala a pri 30 px vypadala useknute. Zamitnuto: tataz kresba jen
   vetsi (38 px), ikona z horni listy webu a plne vyplnene auto. */
body.in-kosik .extras-col .extra.delivery::before {
  position: static !important;
  flex: none;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--ho-ks-zelena) !important;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6h11v8H2z"/><path d="M13 9h4l3 3v2h-7z"/><circle cx="6.5" cy="17.2" r="2.3"/><circle cx="16.5" cy="17.2" r="2.3"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6h11v8H2z"/><path d="M13 9h4l3 3v2h-7z"/><circle cx="6.5" cy="17.2" r="2.3"/><circle cx="16.5" cy="17.2" r="2.3"/></svg>');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* Text pruhu je v predloze zeleny stejne jako ikona. Pravidlo melo
   drive `--ho-ks-text`, ale nikdy se neprosadilo - sablona vyhravala
   svou tmavsi zelenou, takze slovo "zdarma" tu bylo jinak nez v dalsich
   krocich. Proto `!important` a spolecna promenna. */
body.in-kosik .extras-col .extra.delivery strong {
  color: var(--ho-ks-zelena) !important;
  font-size: 15px;
  font-weight: 600;
}

/* ===== 7) KROK 1 - ODKAZ "POKRACOVAT V NAKUPU" =====
   kosik-extra.js ho stehuje ze sloupce se souhrnem pod polozky. */

body.in-kosik .ho-ks-zpet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

/* ===== 8) PRAVY SLOUPEC ===== */

/* Krok 1: box "Potrebujete pomoc?" patri POD shrnuti objednavky. */
body.in-kosik .sidebar-in-cart {
  display: flex;
  flex-direction: column;
}

body.in-kosik .sidebar-in-cart .summary-wrapper { order: 1; }

/* Souhrn je taky `.cart-content .box` - bez tohohle by dostal bile pozadi
   a 80 px po stranach z pravidla pro formulare v sekci 3 (obsah 251 px). */
body.in-kosik .sidebar-in-cart .summary-wrapper .box.box-bg-default {
  margin-bottom: 0;
  padding: 18px !important;
  border: 1px solid var(--ho-ks-ramecek);
  background: #fff;
}
/* Souhrn nese ramecek az na vnitrnim `.box`, zatimco obal `.summary-wrapper`
   ma po stranach 20 px odsazeni. Box pomoci nese ramecek sam na obalu,
   takze bez tohohle zacinal o 20 px vlevo a byl o 40 px sirsi (969/453
   proti 989/413). */
body.in-kosik .sidebar-in-cart .checkout-box-wrapper {
  order: 2;
  margin-left: 20px;
  margin-right: 20px;
}

body.ordering-process .sidebar-in-cart .box,
body.ordering-process #checkoutSidebar .box,
body.ordering-process #summary-box {
  padding: 18px;
  border: 1px solid var(--ho-ks-ramecek);
  border-radius: 0;
  background: #fff;
}

body.ordering-process .price-wrapper {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: baseline;
}

body.ordering-process .price-label {
  color: var(--ho-ks-slaba);
  font-size: 14px;
  text-align: left;
}

body.ordering-process .price-label.price-primary,
body.ordering-process .price.price-primary {
  color: var(--ho-ks-text) !important;
  font-size: 17px;
  font-weight: 700;
}

body.ordering-process .price.price-secondary,
body.ordering-process .price-label.price-secondary {
  color: var(--ho-ks-slaba);
  font-size: 13px;
  font-weight: 400;
}

body.ordering-process .price { text-align: right; }

/* Radek "Doprava - Zdarma" v kroku 1 (doplnuje kosik-extra.js, jen kdyz je
   na strance pruh s dopravou zdarma - castku dopravy Shoptet v kroku 1 nezna).
   Zelena je zamerna, stejne jako u stavu ZDARMA v dalsich krocich. */
body.in-kosik .price.ho-ks-doprava {
  color: var(--ho-ks-zelena);
  font-size: 14px;
  font-weight: 700;
}

body.in-kosik .price-wrapper:has(.ho-ks-doprava) :is(.price-label.price-primary,
                                                     .price.price-primary) {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--ho-ks-ramecek);
}

body.in-kosik .price.price-primary { font-size: 22px; }

body.ordering-process .next-step {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
}

body.ordering-process .next-step .btn-conversion,
body.ordering-process .next-step .next-step-finish {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
}

body.ordering-process .next-step .next-step-back {
  align-self: center;
  font-size: 14px;
}

/* Radek "Bezpecny nakup" - doplnuje kosik-extra.js pod tlacitko. */
body.ordering-process .ho-ks-bezpecne {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--ho-ks-slaba);
  font-size: 14px;
}

body.ordering-process .ho-ks-bezpecne::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10.5" width="16" height="10" rx="1.5"/><path d="M8 10.5V7a4 4 0 0 1 8 0v3.5"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10.5" width="16" height="10" rx="1.5"/><path d="M8 10.5V7a4 4 0 0 1 8 0v3.5"/></svg>');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Delici cara nad "Celkem k uhrade" je od sablony zelena (#32cb00). */
body.ordering-process .order-summary-item.price {
  border-top-color: var(--color-primary, #B5A264);
}

/* Texty v rekapitulaci jsou od `header-extra.css` zlate (`--brand-color`) -
   nazev polozky, "ks", ceny, "Zpusob dopravy", "Platba" i "Cena bez DPH".
   Predloha je ma tmave, proto `!important`. Barvu stavu ZDARMA nijak
   nevynechavame - v rekapitulaci neni zeleny, zlaty byl jako zbytek. */
body.ordering-process :is(#summary-box, .summary-wrapper .box) :is(a, span,
    strong, div, em, p, td, th) {
  color: var(--ho-ks-text) !important;
}

body.ordering-process :is(#summary-box, .summary-wrapper .box)
    :is(.price-label.price-secondary, .price.price-secondary) {
  color: var(--ho-ks-slaba) !important;
}

/* Radek "Doprava - Zdarma" v kroku 1 si zelenou drzi - je to nas prvek.
   Obecne pravidlo vyse ma v `:is()` ID `#summary-box`, takze vaha celeho
   selektoru je (1,1,2) a prebijelo i tuhle vyjimku. Proto `:is(#summary-box,
   .summary-wrapper)` i tady - vahy se srovnaji a rozhodne poradi. */
body.ordering-process :is(#summary-box, .summary-wrapper) .box
    .price.ho-ks-doprava {
  color: var(--ho-ks-zelena) !important;
  text-transform: uppercase;
}

/* ===== 9b) STAV "ZDARMA" V REKAPITULACI =====
   Ve 2. kroku ho sablona pise sama (`.recapitulation-shipping-billing-info`),
   ve 3. kroku vypisuje "0 Kc" - prepisuje ho kosik-extra.js a znacka tridou.
   Zelena a velka pismena jsou stejne jako v sekci "Doprava a platba". */
body.ordering-process :is(#summary-box, .summary-wrapper)
    :is(.recapitulation-shipping-billing-info > span, .ho-ks-zdarma) {
  color: var(--ho-ks-zelena) !important;
  font-weight: 700;
  text-transform: uppercase;
}

/* ===== 9) BOX "POTREBUJETE POMOC?" =====
   Ve 2. a 3. kroku ma sablona na temze miste zlaty pruh s telefonem, ktery
   teprve po kliknuti rozbali kontakty. Kontakty **uz na strance jsou** -
   jen se odkryvaji a prepinac se schovava, nic se nedoplnuje. Podoba je pak
   ve vsech trech krocich stejna a box stoji pod shrnutim objednavky. */

body:is(.in-krok-1, .in-krok-2) .checkout-box .toggle-contacts {
  display: none !important;
}

/* Sablona kontakty neschovava pres `display`, ale kombinaci
   `visibility: hidden` a `transform: scale(0)` - odkryva je az jeji
   prepinac. Scale je ten duvod, proc po odkryti zustaval box prazdny:
   mel spravnou spoctenou sirku, ale nulovy rect. */
body:is(.in-krok-1, .in-krok-2) .checkout-box :is(.box, .box *) {
  visibility: visible !important;
}

body:is(.in-krok-1, .in-krok-2) .checkout-box .box {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
}

/* Poradi v pravem sloupci: pomoc az pod vsim - pod shrnutim, souhlasy
   i tlacitkem. Pomoc lezi uvnitr `.order-summary`, souhlasy a tlacitko
   az za nim, proto se obal rozpousti do sloupce `.cart-content`. */
body:is(.in-krok-1, .in-krok-2) #checkoutSidebar .cart-content {
  display: flex;
  flex-direction: column;
}

body:is(.in-krok-1, .in-krok-2) #checkoutSidebar .order-summary { display: contents; }
body:is(.in-krok-1, .in-krok-2) #checkoutSidebar .checkout-box { order: 99; }

/* Souhlasy, tlacitko, Zpet a Bezpecny nakup patri do ramecku rekapitulace.
   Jsou to sourozenci `#summary-box`, ne jeho deti - presouvat je nejde,
   Shoptet rekapitulaci po zmene dopravy a platby prekresluje. Ramecek
   se proto kresli souvisle pres vsechny: rekapitulace bez spodni cary,
   dalsi kusy jen s bocnimi a posledni (Bezpecny nakup) se spodni.
   Mezery jsou padding, ne margin - margin by ramecek roztrhl. */
body:is(.in-krok-1, .in-krok-2) #checkoutSidebar #summary-box {
  padding-bottom: 6px;
  border-bottom: 0;
}

body:is(.in-krok-1, .in-krok-2) #checkoutSidebar .cart-content > :is(.consents, .next-step, .ho-ks-bezpecne) {
  margin: 0 !important;
  padding: 6px 18px;
  border: 1px solid var(--ho-ks-ramecek);
  border-width: 0 1px;
  background: #fff;
}

body:is(.in-krok-1, .in-krok-2) #checkoutSidebar .cart-content > .next-step {
  padding-top: 12px;
}

body:is(.in-krok-1, .in-krok-2) #checkoutSidebar .cart-content > .ho-ks-bezpecne {
  padding-top: 4px;
  padding-bottom: 18px;
  border-bottom-width: 1px;
}

body:is(.in-krok-1, .in-krok-2) #checkoutSidebar .next-step :is(.next-step-forward, .next-step-finish) {
  width: 100% !important;
}

/* Ramecek nese obal, aby nadpis a kontakty byly jedna karta, ne dve.
   V 1. kroku je nadpis `h2.h4` nad boxem, ve 2. a 3. ho dosazuje
   kosik-extra.js, aby vsechny tri kroky vypadaly stejne. */
body.ordering-process :is(.checkout-box-wrapper, .checkout-box) {
  margin-top: var(--ho-ks-mezera);
  padding: 18px;
  border: 1px solid var(--ho-ks-ramecek);
  background: #fff;
}

/* `.box-bg-default` je tu kvuli specificite - obecne pravidlo v sekci 3
   ma o jednu tridu vic a jinak by prebilo i tohle. */
body.ordering-process :is(.checkout-box-wrapper, .checkout-box) > .box.box-bg-default {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

body.ordering-process :is(.checkout-box-wrapper, .checkout-box) > :is(h2, .h4) {
  margin: 0 0 14px;
  font-size: 17px;
}

/* Fotka prodejce a jmeno v jedne rade, kontakty pod tim.
   Sablona drzi `.contact-box` na pevne sirce a mrizka se v nem chovala
   nepredvidatelne (jmeno koncilo ve sloupci fotky a orezavalo se na "Hodi...").
   Proto obtekani: fotka plave vlevo, jmeno dostane zbytek radku samo. */
body.ordering-process .contact-box {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Sablona fotku umistuje absolutne - bez tohoto prekryva jmeno. */
body.ordering-process .contact-box > img {
  position: static !important;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  margin: 0;
  border: 1px solid var(--ho-ks-ramecek);
  background: #fff;
  object-fit: contain;
}

body.ordering-process .contact-box > strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ho-ks-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
}

body.ordering-process .contact-box > ul {
  flex: 1 1 100%;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

body.ordering-process .contact-box > ul > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ordering-process .contact-box > ul > li + li {
  margin-top: 7px;
}

body.ordering-process .contact-box > ul > li > span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

body.ordering-process .contact-box a {
  overflow: hidden;
  color: var(--ho-ks-text) !important;
  font-size: 14px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ordering-process .contact-box a:hover {
  color: var(--color-primary, #B5A264) !important;
  text-decoration: underline;
}


/* ===== 9c) KROK 2 - VYBRANA DOPRAVA A PLATBA =====
   Podle predlohy 5.2 se po zakliknuti podbarvi cely radek volby.
   Sablona uz vybranou polozku znaci tridou `active`; `:has(input:checked)`
   je tu jako pojistka, kdyby se trida nestihla pridat.

   Podklad se **pocita ze zlate** (`color-mix` z `--color-primary`), ne
   zapisuje hexem - klientka si barvu v administraci muze zmenit a podbarveni
   se zmeni s ni. Ramecek je `box-shadow: inset`, ne `border` - border by
   radek o 1 px posunul a volby by pri prepinani poskakovaly. */

body.ordering-process .shipping-billing-table .radio-wrapper {
  transition: background-color .15s ease, box-shadow .15s ease;
}

body.ordering-process .shipping-billing-table .radio-wrapper.active,
body.ordering-process .shipping-billing-table .radio-wrapper:has(input:checked) {
  background: color-mix(in srgb, var(--color-primary, #B5A264) 10%, #fff);
  box-shadow: inset 0 0 0 1px var(--color-primary, #B5A264);
}

/* U vybrane volby barvi sablona cely radek zlate, takze i stav ZDARMA -
   napric kroky pak melo slovo tri barvy (zlatou u vybrane, zelenou
   u ostatnich a tmavsi zelenou v rekapitulaci). `.for-free` je jen u ceny
   zdarma, placena doprava a dobirka si svou barvu drzi. */
body.ordering-process .shipping-billing-table
    .payment-shipping-price.for-free {
  color: var(--ho-ks-zelena) !important;
}

/* ===== 10) KROK 3 - FORMULAR =====
   Sablona ma popisek v uzkem sloupci vlevo a pole vedle nej; predloha
   ma popisek nad polem a pole na celou sirku. */

body.in-krok-2 .co-box .form-group:not(:has(input[type="checkbox"])) {
  display: block;
}

body.in-krok-2 .co-box .form-group:not(:has(input[type="checkbox"])) > label:not(.js-location--hidden),
body.in-krok-2 .co-box .control-label:not(:has(input[type="checkbox"])) {
  display: block;
  width: auto;
  margin: 0 0 6px;
  padding: 0;
  color: var(--ho-ks-text) !important;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

/* `style.css` barvi popisky formularu zlate (`.form-group label`), predloha
   je ma tmave a zlata zustava jen na hvezdicce u povinnych poli. */
body.in-krok-2 .co-box :is(label, .label, .control-label) {
  color: var(--ho-ks-text) !important;
}

body.in-krok-2 .co-box .required-asterisk::after,
body.in-krok-2 .co-box .required-asterisk--before::before {
  color: var(--color-primary, #B5A264);
}

/* Radek Zeme: sablona ma dve dvojice - skrytou se selectem a viditelnou
   s textem. `display: block` vyse odkryval i tu skrytou, proto `:not()`
   nahore. Viditelna cast jde podle predlohy na jednu radku. */
body.in-krok-2 .co-box .form-group:has(> .label.js-location) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

body.in-krok-2 .co-box .form-group > .label.js-location {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0;
  padding: 0 !important;
  font-size: 14px;
  font-weight: 500;
}

body.in-krok-2 .co-box .form-group > .label.js-location::after { content: ":"; }

body.in-krok-2 .co-box .form-control-wrapper--with-note.js-location {
  display: flex !important;
  flex: 1 1 auto;
  /* Sablona ma "--with-note" jako sloupec (hodnota a pod ni poznamka),
     predloha ma oboji na jedne radce. */
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  width: auto !important;
  max-width: none !important;
}

/* `strong` i `em` maji od sablony vlastni radku - v predloze stoji vedle sebe. */
body.in-krok-2 .co-box .form-control-wrapper--with-note.js-location > * {
  flex: 0 0 auto;
  width: auto;
  display: inline;
}

body.in-krok-2 .co-box .form-control-wrapper--with-note.js-location strong {
  color: var(--ho-ks-text);
}

body.in-krok-2 .co-box .form-control-wrapper--with-note.js-location .helpNote {
  margin: 0;
  font-size: 14px;
  font-style: normal;
}

/* Poznamka o povinnych polich je od sablony vpravo, predloha ji ma vlevo. */
body.in-krok-2 .co-box .form-legend {
  text-align: left;
}

body.in-krok-2 .co-box .form-control-wrapper {
  width: 100%;
  max-width: none;
}

body.in-krok-2 .co-box :is(input[type="text"], input[type="email"],
                           input[type="tel"], select, textarea) {
  width: 100%;
  max-width: none;
  border: 1px solid var(--ho-ks-ramecek);
  border-radius: 0;
}

/* Adresa ve dvou sloupcich: Ulice / Cislo domu, Mesto / PSC. */
@media (min-width: 768px) {
  body.in-krok-2 .co-billing-address fieldset,
  body.in-krok-2 #shipping-address fieldset {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0 16px;
  }

  /* Pres obe sirky jde vse, co neni Ulice / Cislo domu / Mesto / PSC -
     tedy nadpis, "Nakupuji na firmu", schovane IC a DIC a radek Zeme.
     Ctyri pole `--inline` pak samy vyjdou 2fr/1fr ve dvou radach. */
  body.in-krok-2 .co-billing-address fieldset > *,
  body.in-krok-2 #shipping-address fieldset > * {
    grid-column: 1 / -1;
  }

  body.in-krok-2 .co-billing-address fieldset > .form-group--inline,
  body.in-krok-2 #shipping-address fieldset > .form-group--inline {
    grid-column: auto;
  }
}

/* Zaskrtavatka zustavaji vsechna, jen sjednocena. Popisky souhlasu
   v pravem sloupci 3. kroku ("Nezasilat dotaznik...") jsou od `style.css`
   zlate, proto `!important`. Odkazy uvnitr vety o podminkach zustavaji
   zlate - jsou to odkazy a tak je ma i predloha. */
body.ordering-process .form-group input[type="checkbox"] + label,
body.ordering-process .consents label {
  color: var(--ho-ks-text) !important;
  font-size: 14px;
  line-height: 1.45;
}

/* "Overeno zakazniky" je odkaz uprostred popisku, takze by jinak zustal
   zlaty uvnitr cerne vety. Podtrzeni zustava, aby bylo porad poznat,
   ze je klikaci. Veta o obchodnich podminkach pod souhlasy se nemeni -
   tam jsou odkazy samostatne a zlate je i predloha. */
body.ordering-process :is(#checkoutSidebar, #checkoutContent)
    .consents label a {
  color: inherit !important;
  text-decoration: underline;
}

/* ===== 10b) "NEZAPOMNELI JSTE OBLIBENY PRODUKT?" =====
   Sekci vklada doplnek dkLab Oblibene (`#dkLabFavCartWrapper`) az za behu.
   Karta ma stejny markup jako ve vypisu, takze podoba je prevzata
   z kategorie-extra.css (tam je scopovana na typ stranky, sem nedosahne).
   Tlacitko je od doplnku `.btn-cart`, ne `.add-to-cart-button`. */

#dkLabFavCartWrapper .products.products-block > .product {
  border: 0 !important;
}

#dkLabFavCartWrapper .products.products-block .p {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px;
  border: 1px solid #ecedf1;
  background: #fff;
}

#dkLabFavCartWrapper .products.products-block .p .image {
  position: relative;
  display: block;
  margin-bottom: 14px;
}

#dkLabFavCartWrapper .products.products-block .p a.name {
  display: block;
  overflow: visible;
  height: auto;
  max-height: none;
  margin: 0 0 4px;
  color: var(--rd-ink, #1a1a1a) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

#dkLabFavCartWrapper .products.products-block .p a.name:hover {
  color: var(--color-primary, #B5A264) !important;
}

#dkLabFavCartWrapper .products.products-block .p :is(.p-in-in, .p-bottom, .prices, .price) {
  text-align: left !important;
}

#dkLabFavCartWrapper .products.products-block .p .ratings-wrapper {
  margin-bottom: 12px;
}

#dkLabFavCartWrapper .products.products-block .p .p-in {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

#dkLabFavCartWrapper .products.products-block .p .p-bottom {
  margin-top: auto;
}

#dkLabFavCartWrapper .products.products-block .p .p-bottom > div {
  display: block;
}

#dkLabFavCartWrapper .products.products-block .p .p-bottom .p-desc {
  display: none;
}

#dkLabFavCartWrapper .products.products-block .p .prices {
  margin-bottom: 12px;
}

#dkLabFavCartWrapper .products.products-block .p .price-additional {
  color: var(--ho-ks-slaba);
  font-size: 13px;
}

#dkLabFavCartWrapper .products.products-block .p .price-final strong {
  color: var(--rd-ink, #1a1a1a) !important;
  font-size: 21px;
  font-weight: 700;
}

#dkLabFavCartWrapper .products.products-block .p .p-tools {
  display: flex;
  width: 100%;
}

#dkLabFavCartWrapper .products.products-block .p .btn-cart {
  display: block;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 0;
  background: var(--color-primary, #B5A264) !important;
  color: var(--rd-ink, #1a1a1a) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}

#dkLabFavCartWrapper .products.products-block .p .btn-cart:hover {
  background: color-mix(in srgb, var(--color-primary, #B5A264) 88%, #000) !important;
}

#dkLabFavCartWrapper .products.products-block .p .btn-cart::before {
  content: none;
}

/* ===== 10d) OKNO PO PRIDANI DO KOSIKU =====
   Shoptetí colorbox `#colorbox .advanced-order`, na detailu i ve vypisech
   stejny (proto bez scope na body - soubor se nacita na vsech strankach).
   Lista dopravy jako v kosiku (sekce 6), tlacitka jako v kosiku (sekce 1),
   karty jako ve vypisech (kategorie-extra.css). */

#colorbox,
#colorbox #cboxContent,
#colorbox #cboxLoadedContent {
  border-radius: 0 !important;
}

#colorbox .advanced-order {
  color: var(--ho-ks-text);
  text-align: center;
}

#colorbox .advanced-order > .h1:not(.advanced-order-suggestion) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--ho-ks-text);
  font-size: 24px;
  font-weight: 600;
}

/* Fajfka u nadpisu - zlata, maskou jako ostatni ikony webu. */
#colorbox .advanced-order > .h1:not(.advanced-order-suggestion)::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  background: var(--color-primary, #B5A264);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.2"/><path d="M7.8 12.3l2.8 2.8 5.6-5.8"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.2"/><path d="M7.8 12.3l2.8 2.8 5.6-5.8"/></svg>');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

#colorbox .advanced-order > .h2 {
  margin-bottom: 20px;
  color: var(--ho-ks-slaba);
  font-size: 16px;
  font-weight: 400;
}

#colorbox .advanced-order .extras-wrap {
  max-width: 520px;
  margin: 0 auto 20px;
}

/* Zelene kolecko `.extra.delivery::before` -> obrys auta v plose liste,
   stejne jako v kosiku. Rozmery sablona drzi pres !important. */
#colorbox .advanced-order .extra.delivery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 14px 18px;
  border: 0;
  background: var(--ho-ks-podklad);
  text-align: left;
}

/* Stejna kresba i velikost jako v kosiku (varianta E) - je to tyz pruh,
   jen v okne po pridani do kosiku. */
#colorbox .advanced-order .extra.delivery::before {
  position: static !important;
  flex: none;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--ho-ks-zelena) !important;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6h11v8H2z"/><path d="M13 9h4l3 3v2h-7z"/><circle cx="6.5" cy="17.2" r="2.3"/><circle cx="16.5" cy="17.2" r="2.3"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6h11v8H2z"/><path d="M13 9h4l3 3v2h-7z"/><circle cx="6.5" cy="17.2" r="2.3"/><circle cx="16.5" cy="17.2" r="2.3"/></svg>');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

#colorbox .advanced-order .extra.delivery :is(span, strong) {
  color: var(--ho-ks-text);
  font-size: 15px;
}

#colorbox .advanced-order .extra.delivery strong {
  color: var(--ho-ks-zelena) !important;
  font-weight: 600;
}

#colorbox .advancedOrder__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

#colorbox .advancedOrder__buttons .btn {
  min-width: 200px;
  margin: 0;
  padding: 13px 22px;
  border-radius: 0 !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

#colorbox .advancedOrder__buttons .btn-conversion {
  border: 1px solid var(--color-primary, #B5A264) !important;
  background: var(--color-primary, #B5A264) !important;
  color: #fff !important;
}

#colorbox .advancedOrder__buttons .btn-conversion:hover {
  background: color-mix(in srgb, var(--color-primary, #B5A264) 88%, #000) !important;
}

#colorbox .advancedOrder__buttons .next-step-back {
  border: 1px solid var(--ho-ks-ramecek) !important;
  background: #fff !important;
  color: var(--ho-ks-text) !important;
}

#colorbox .advancedOrder__buttons .next-step-back:hover {
  border-color: var(--color-primary, #B5A264) !important;
}

#colorbox .advanced-order .advanced-order-suggestion {
  margin-top: 28px;
  color: var(--ho-ks-text);
  font-size: 20px;
  font-weight: 600;
}

/* Karty - podoba z kategorie-extra.css, sablonova cara mezi nimi pryc. */
#colorbox .products.products-block > .product {
  border: 0 !important;
}

#colorbox .products.products-block .p {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px;
  border: 1px solid #ecedf1;
  background: #fff;
  text-align: left;
}

#colorbox .products.products-block .p .image {
  position: relative;
  display: block;
  margin-bottom: 14px;
}

#colorbox .products.products-block .p a.name {
  display: block;
  overflow: visible;
  height: auto;
  max-height: none;
  margin: 0 0 4px;
  color: var(--rd-ink, #1a1a1a) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

#colorbox .products.products-block .p a.name span {
  display: block;
  overflow: visible;
  white-space: normal;
}

#colorbox .products.products-block .p a.name:hover {
  color: var(--color-primary, #B5A264) !important;
}

#colorbox .products.products-block .p :is(.p-in-in, .p-bottom, .availability, .prices, .price) {
  text-align: left !important;
}

#colorbox .products.products-block .p :is(.availability, .availability span) {
  font-size: 13px;
  line-height: 1.35;
}

#colorbox .products.products-block .p .ratings-wrapper {
  margin-bottom: 12px;
}

#colorbox .products.products-block .p .p-in {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

#colorbox .products.products-block .p .p-bottom {
  margin-top: auto;
}

#colorbox .products.products-block .p .p-bottom > div {
  display: block;
}

#colorbox .products.products-block .p .prices {
  margin-bottom: 12px;
}

#colorbox .products.products-block .p .price-standard,
#colorbox .products.products-block .p .price-standard span {
  display: block;
  color: color-mix(in srgb, var(--color-primary, #B5A264) 80%, #fff) !important;
  font-size: 14px;
  text-decoration: line-through;
}

#colorbox .products.products-block .p .price-final strong {
  color: var(--rd-ink, #1a1a1a) !important;
  font-size: 21px;
  font-weight: 700;
}

#colorbox .products.products-block .p :is(.p-tools, .pr-action) {
  display: block;
  width: 100%;
  margin: 0;
}

#colorbox .products.products-block .p .add-to-cart-button {
  display: block;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 0;
  background: var(--color-primary, #B5A264) !important;
  color: var(--rd-ink, #1a1a1a) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  cursor: pointer;
  transition: background .2s ease;
}

#colorbox .products.products-block .p .add-to-cart-button:hover {
  background: color-mix(in srgb, var(--color-primary, #B5A264) 88%, #000) !important;
}

#colorbox .products.products-block .p .add-to-cart-button::before {
  content: none;
}

#colorbox .advanced-order .browse-p .btn {
  padding: 11px 22px;
  border: 1px solid var(--ho-ks-ramecek) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--ho-ks-text) !important;
  font-size: 14px;
}

#colorbox .advanced-order .browse-p .btn:hover {
  border-color: var(--color-primary, #B5A264) !important;
}

@media (max-width: 767px) {
  #colorbox .advanced-order > .h1:not(.advanced-order-suggestion) { font-size: 20px; }
  #colorbox .advanced-order > .h2 { font-size: 15px; }
  #colorbox .advancedOrder__buttons .btn { flex: 1 1 100%; min-width: 0; }
  #colorbox .advancedOrder__buttons .btn-conversion { order: -1; }
  #colorbox .advanced-order .advanced-order-suggestion { font-size: 18px; }
  #colorbox .products.products-block .p { padding: 10px; }
  #colorbox .products.products-block .p a.name { font-size: 14px; }
  #colorbox .products.products-block .p .price-final strong { font-size: 18px; }
}

/* ===== 10c) LEPICI LISTA NA MOBILU =====
   Stavi ji kosik-extra.js, ukazuje se jen pod 768 px a jen kdyz puvodni
   tlacitko neni videt. `--ho-ks-lista-posun` dorovnava adresni radek. */

.ho-ks-lista { display: none; }

@media (max-width: 767px) {
  body.ordering-process .ho-ks-lista {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--ho-ks-lista-posun, 0px);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ho-ks-ramecek);
    background: #fff;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .08);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }

  body.ordering-process .ho-ks-lista.je-videt {
    transform: none;
    visibility: visible;
    transition: transform .2s ease;
  }

  body.ordering-process.ho-ks-lista-videt {
    padding-bottom: var(--ho-ks-lista-vyska, 68px);
  }

  .ho-ks-lista__cena {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
  }

  .ho-ks-lista__popis {
    color: var(--ho-ks-slaba);
    font-size: 12px;
  }

  .ho-ks-lista__castka {
    color: var(--ho-ks-text);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
  }

  body.ordering-process .ho-ks-lista .ho-ks-lista__btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 13px 22px;
    font-size: 15px;
  }

  /* Bublina Smartsupp ma inline `bottom: 24px` a lezla pres tlacitko listy.
     Cili se jen na zavrenou bublinu (56 px) - otevrene okno chatu
     na celou obrazovku se posouvat nesmi. */
  body.ho-ks-lista-videt #smartsupp-widget-container > div[style*="height: 56px"] {
    bottom: calc(var(--ho-ks-lista-vyska, 68px) + var(--ho-ks-lista-posun, 0px) + 12px) !important;
  }

  .ho-ks-lista--bez-ceny .ho-ks-lista__cena { display: none; }
  .ho-ks-lista--bez-ceny .ho-ks-lista__btn { flex: 1 1 auto; }
}

/* ===== 12) MINI url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"/><path d="M9 7V4.5h6V7"/><path d="M6.5 7l1 13h9l1-13"/><path d="M10 11v6M14 11v6"/></svg>') V HLAVICCE =====
   `#cart-widget` se otevira najetim na ikonu kosiku vpravo nahore (na mobilu
   klikem) a zustaval ve stare podobe - zelene tlacitko, zlata cena, zlaty
   text o doprave a sipky mnozstvi nad sebou. Prebira podobu z nakupniho
   kosiku. **Neni scopovany na `body`** - widget je v hlavicce na kazde
   strance, ne jen v objednavce. */

#cart-widget {
  border: 1px solid var(--ho-ks-ramecek);
  border-radius: 0;
}

/* Sablona ma poradi obrazek - mnozstvi - "ks" - nazev; v kosiku stoji nazev
   hned za obrazkem a mnozstvi az za nim. Srovnano `order`, nic se nepresouva. */
#cart-widget .cart-widget-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

#cart-widget .cart-widget-product-image { order: 1; }
#cart-widget .cart-widget-product-name { order: 2; flex: 1 1 auto; }
#cart-widget .cart-widget-product-amount { order: 3; }
#cart-widget .cart-widget-product-unit { order: 4; }
#cart-widget .cart-widget-product-delete { order: 5; }

#cart-widget .cart-widget-product-image img {
  border: 1px solid var(--ho-ks-ramecek);
}

/* Nazev i cena jsou od `header-extra.css` zlate, v kosiku jsou tmave.
   Na mobilu ma sablona nazev zlaty jeste pres jine pravidlo, proto
   `color` na vsechny potomky a az za tim velikosti. */
#cart-widget .cart-widget-product-name,
#cart-widget .cart-widget-product-name :is(strong, a, span) {
  color: var(--ho-ks-text) !important;
}

#cart-widget .cart-widget-product-name :is(strong, a) {
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

#cart-widget .cart-widget-product-name span {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
}

/* Mnozstvi: stejny stepper jako v kosiku. Sipky ma sablona absolutne
   nad sebou a vlastni znaky skryte, proto `static` a odkryti znaku. */
#cart-widget .quantity {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--ho-ks-ramecek);
  background: #fff;
}

#cart-widget .quantity label { order: 2; margin: 0; }
#cart-widget .quantity .decrease { order: 1; }
#cart-widget .quantity .increase { order: 3; }

#cart-widget .quantity :is(.increase, .decrease) {
  position: static !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ho-ks-slaba);
  font-size: 16px;
  line-height: 1;
}

#cart-widget .quantity :is(.increase, .decrease)::before,
#cart-widget .quantity :is(.increase, .decrease)::after { content: none; }

#cart-widget .quantity :is(.increase__sign, .decrease__sign) {
  display: block;
  font-size: 16px;
  line-height: 1;
}

#cart-widget .quantity :is(.increase, .decrease):hover {
  color: var(--color-primary, #B5A264);
}

#cart-widget .quantity input {
  width: 38px;
  height: 32px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--ho-ks-ramecek);
  border-right: 1px solid var(--ho-ks-ramecek);
  border-radius: 0;
  background: none;
  color: var(--ho-ks-text) !important;
  font-size: 15px;
  text-align: center;
}

#cart-widget .cart-widget-product-unit {
  color: var(--ho-ks-slaba);
  font-size: 13px;
}

/* Smazani je od sablony text, v kosiku je ikona kose. Text zustava
   v prvku pro ctecky. */
#cart-widget .remove-item {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: transparent;
  font-size: 0;
  overflow: hidden;
  opacity: 1 !important;
}

#cart-widget .remove-item::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--ho-ks-slaba);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"/><path d="M9 7V4.5h6V7"/><path d="M6.5 7l1 13h9l1-13"/><path d="M10 11v6M14 11v6"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"/><path d="M9 7V4.5h6V7"/><path d="M6.5 7l1 13h9l1-13"/><path d="M10 11v6M14 11v6"/></svg>');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

#cart-widget .remove-item:hover::before {
  background: var(--color-primary, #B5A264);
}

/* Pruh "Dopravu mate zdarma" ma stejnou podobu jako v kosiku - bezovy
   podklad, zelene auto a zeleny text. */
/* Sablona pruh **absolutne pozicuje**, takze lezel pres seznam produktu
   a widget se podle nej nenatahl (430x176 pri obsahu 269 px). Musi do toku. */
#cart-widget .cart-free-shipping {
  position: static !important;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 14px 14px;
  padding: 12px 14px;
  background: var(--ho-ks-podklad);
}

#cart-widget .cart-free-shipping::before {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  background: var(--ho-ks-zelena);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6h11v8H2z"/><path d="M13 9h4l3 3v2h-7z"/><circle cx="6.5" cy="17.2" r="2.3"/><circle cx="16.5" cy="17.2" r="2.3"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6h11v8H2z"/><path d="M13 9h4l3 3v2h-7z"/><circle cx="6.5" cy="17.2" r="2.3"/><circle cx="16.5" cy="17.2" r="2.3"/></svg>');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

#cart-widget .cart-free-shipping strong {
  color: var(--ho-ks-zelena) !important;
  font-size: 15px;
  font-weight: 600;
}

/* Tlacitko je od sablony zelene (#32cb00) s bilym textem. */
#cart-widget .cart-widget-button { padding: 0 14px 14px; }

#cart-widget .btn-conversion {
  width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--color-primary, #B5A264) !important;
  color: var(--ho-ks-text) !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .2s ease;
}

#cart-widget .btn-conversion :is(span, strong) {
  color: inherit !important;
  font-weight: 700 !important;
}

#cart-widget .btn-conversion:hover {
  background: color-mix(in srgb, var(--color-primary, #B5A264) 88%, #000) !important;
}

/* ===== 11) MOBIL ===== */

@media (max-width: 767px) {
  body.in-kosik .cart-table thead.ho-ks-hlavicka { display: none; }
}


@media (max-width: 767px) {
  :root { --ho-ks-mezera: 16px; }

  #dkLabFavCartWrapper .products.products-block .p { padding: 10px; }
  #dkLabFavCartWrapper .products.products-block .p a.name { font-size: 14px; }
  #dkLabFavCartWrapper .products.products-block .p .price-final strong { font-size: 18px; }

  body.ordering-process :is(.checkout-box-wrapper, .checkout-box) {
    padding: 14px;
  }

  body.ordering-process .cart-header {
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.ordering-process .cart-header > .step { font-size: 13px; }

  body.ordering-process .cart-content .box.box-bg-default {
    padding: 18px 14px !important;
  }

  body.in-krok-2 .cart-content > .co-box:not(.box) > :not(.box),
  body.in-krok-2 .co-box-additional > * {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.in-kosik .extras-col .extra.delivery {
    padding: 13px 14px;
  }

  body.in-kosik .extras-col .extra.delivery strong { font-size: 14px; }
}