/* ═══════════════════════════════════════════════════════════════════════════
   STYLE-CHECKOUT.CSS — košík, objednávka, děkovačka, mini-košík v hlavičce
   ───────────────────────────────────────────────────────────────────────────
   Vyčleněno 2026-08-20 ze `sections/style-sections.css`.

   PROČ SAMOSTATNÝ SOUBOR: `style-sections.css` sdílíme s Režimem AI, do kterého
   se sype několikrát denně, a jeho verze se staví jako „stažený LIVE soubor +
   vlastní diff". Rozpracovaný košík z toho pokaždé vypadl — 19. 8. tak z TESTu
   zmizel celý redesign a nikdo si toho nevšiml, dokud si toho nevšiml uživatel.
   Vlastní soubor tohle vylučuje: přestavba cizí větve o něm neví, takže ho
   nemůže zahodit, a košík jde na LIVE ve svém vlastním termínu.

   ⚠ POŘADÍ NAČTENÍ: v hlavičce MUSÍ být hned za `style-sections.css`, jinak se
   mění kaskáda. Ověřeno 20. 8.: žádný jiný pdu-code CSS (global, blog, category,
   pages, products, mobile-menu, head) neobsahuje jediné pravidlo pro checkout,
   takže na téhle pozici se chová přesně jako dřív uvnitř style-sections.

   ⚠ `?v` v hlavičce se bumpuje RUČNĚ, CDN kešuje rok.

   ROZSAH: `body.ordering-process` (/kosik/ i /objednavka/*), `body.in-kosik`,
   `body.in-dekujeme` a `.cart-widget` (mini-košík v hlavičce — jediná část,
   která sahá na všechny stránky webu).

   Čisté CSS nad nativním markupem Shoptetu. Žádný JS tyhle třídy nevyrábí;
   bloky `.pdu-kos-*` na děkovačce přicházejí z polí v adminu
   (`meta/admin-order-confirmed.html`, `meta/admin-kosik-obsah.html`).
   CSS děkovacích STRÁNEK (`.pdu-dek-*`, SEKCE 65) zůstává ve `style-pages.css`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   SEKCE 14. KOŠÍK & CHECKOUT — quick wins Fáze 1 (2026-08-18)
   Rozsah: body.ordering-process (/kosik/, /objednavka/*) + děkovačka.
   Checkout je systémová šablona Shoptetu (HTML needitovatelné), jde jen
   o přestyl nativních tříd + styly pro vkládané bloky.
   a) Nemožná kombinace dopravy a platby: Shoptet značí .radio-wrapper
      .inactive-child (+ label.inactive, input[disabled], viditelné
      em.not-possible-info). Bez ztlumení vypadá řádek klikatelně,
      doložené mrtvé kliky (Clarity 8/2026). Jen tlumíme, NEpřeskládáváme
      pořadí (reorder při přepnutí dopravy by skákal pod rukama).
      Pozn.: em.not-possible-info je v DOM i u možných kombinací (skrytý),
      proto styl jen pod .inactive-child a bez display pravidla.
   b) Dostupnost položek v .cart-table (.p-availability) — zvýraznění.
   c) .pdu-kos-dopinfo — nenárokový odkaz na dopravné; vkládá se admin
      polem „Obsah v košíku" (zdroj meta/admin-kosik-obsah.html).
   d) .pdu-kos-dek-* — děkovačka next-steps; vkládá se template-include
      order-confirmed (zdroj meta/admin-order-confirmed.html).
   e) restyl nativní děkovačky (body.in-dekujeme, 2026-08-19): karty
      z .recapitulation-wrapper, ✓ badge nad nadpisem, výrazné číslo
      objednávky, zelené „Děkujeme!" (nativně červené .summary-thx),
      náhrada rozbitého pseudo-iconu h4.order-icon (prázdný čtverec,
      na TESTu chybí asset) zeleným proužkem.
   f) mini-košík .cart-widget (2026-08-19) — panel po přidání do košíku.
      Nativně ostré rohy, plochý grey border a červené tlačítko bez hoveru;
      sjednoceno s house tvaroslovím (radius, jemný okraj) a hover mechanikou
      CTA (překlop do bílé + tmavý okraj + nadzvednutí). Konverzní červená
      #E74C3C zůstává jako základní barva záměrně — je to průběžná barva
      celého checkoutu (Pokračovat, Objednat), změna na zelenou je
      konverzní rozhodnutí, ne kosmetika. Obsah se plní AJAXem do
      .place-cart-here, takže stylujeme jen skořápku a doručené třídy.
   g) facelift všech tří kroků (2026-08-19) — nativní checkout má všude ostré
      hrany a tlačítka bez stavů; sem patří radius, jemné okraje, karty voleb
      dopravy a platby, focus na polích a žluté hlavní CTA. ⚠ Jen CSS: Shoptet
      kroky překresluje AJAXem, JS by po re-renderu zmizel.
   h) ukazatel kroků (hotové a aktuální krok plné, budoucí šedé), počítadlo
      množství v celém checkoutu (dřív jen v mini-košíku) a box s kontakty
      v pravém sloupci + kupón.
   i) modál výběru odběrného místa (.branch-wrap) — pobočky jako karty,
      tlačítko „Zvolte pobočku" z btn-xs (118x18 px, font 12, váha 400)
      na plnohodnotné house CTA. ⚠ `.pdu-co-vyjimka` uvnitř je náš blok
      z checkout.js SEKCE 6, jen se styluje.
   ═══════════════════════════════════════════════════════════════════════ */

/* a) nemožné kombinace dopravy a platby */
.ordering-process .radio-wrapper.inactive-child { opacity: .45; }
.ordering-process .radio-wrapper.inactive-child label { cursor: not-allowed; }
.ordering-process .radio-wrapper.inactive-child img { filter: grayscale(1); }
.ordering-process .inactive-child .not-possible-info {
  font-style: normal;
  font-size: .8125em;
  color: var(--pdu-barva-text-sedy, #6f6f6f);
}

/* b) dostupnost položek v košíku */
.ordering-process .cart-table .availability-label { font-weight: 500; }

/* c) info řádek k dopravě (krok Doprava a platba) */
.pdu-kos-dopinfo {
  margin: .75em 0 0;
  padding: .625em .875em;
  font-size: .875em;
  background: var(--pdu-barva-sede-svetla, #f5f5f5);
  border-radius: .5em;
  color: var(--pdu-barva-text-sekundarni, #444);
}
.pdu-kos-dopinfo a { color: var(--pdu-barva-zelena-brand, #009046); font-weight: 500; text-decoration: underline; }

/* d) děkovačka objednávky — next-steps karty */
.pdu-kos-dek { margin: 1.5em 0 .5em; }
.pdu-kos-dek-note {
  margin: 0 0 1.25em;
  padding: .75em 1em;
  font-size: .9375em;
  background: var(--pdu-barva-zelena-svetla, #eaf6ef);
  border: 1px solid var(--pdu-barva-okraj-zeleny-jemny, #cde8d8);
  border-radius: .5em;
}
.pdu-kos-dek-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .875em; }
@media (max-width: 47.99em) { .pdu-kos-dek-grid { grid-template-columns: 1fr; } }
.pdu-kos-dek-card {
  display: block;
  padding: 1em 1.125em;
  border: 1px solid var(--pdu-barva-okraj-jemny, #e3e3e3);
  border-radius: .625em;
  background: var(--pdu-barva-bila, #fff);
  text-decoration: none;
  color: var(--pdu-barva-tekst-zakladni, #222);
  transition: border-color .15s, box-shadow .15s;
}
.pdu-kos-dek-card:hover {
  border-color: var(--pdu-barva-zelena-akcent, #009046);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
  text-decoration: none;
  color: inherit;
}
.pdu-kos-dek-card b { display: block; margin-bottom: .25em; color: var(--pdu-barva-zelena-brand, #009046); font-size: 1.0625em; }
.pdu-kos-dek-card span { font-size: .875em; color: var(--pdu-barva-text-sedy, #6f6f6f); line-height: 1.45; }
.pdu-kos-dek-tel { white-space: nowrap; font-weight: 600; }

/* e) restyl nativní děkovačky */
/* Pořadí bloků: include se vkládá na konec .content-inner, ale osa patří nad
   rekapitulaci a žluté CTA pod nativní tlačítko „Zpět do obchodu". Flex + order
   to přeskládá bez JS. `:has()` odlišuje druhý recap wrapper (ten s odkazy) od
   prvního (platba a obsah). <script> sourozenci mají display:none z UA stylu,
   flex je nezviditelní. */
body.in-dekujeme .content-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
body.in-dekujeme .order-summary-heading { order: 1; }
body.in-dekujeme .pdu-kos-osa { order: 2; }
/* základní order bez :has() je záměrný fallback — bez něj by při chybějící
   podpoře :has() spadl recap na výchozí order 0 a předběhl nadpis */
body.in-dekujeme .recapitulation-wrapper { order: 3; }
body.in-dekujeme .pdu-kos-dek { order: 4; }
body.in-dekujeme .recapitulation-wrapper:has(.order-complete-links) { order: 5; }
body.in-dekujeme .pdu-kos-cta { order: 6; }
body.in-dekujeme .order-summary-heading { text-align: center; font-size: 1.75em; margin: .875em 0 .375em; }
body.in-dekujeme .order-summary-heading::before {
  content: "\2714";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  margin: 0 auto .45em;
  border-radius: 50%;
  background: var(--pdu-barva-zelena-akcent, #009046);
  color: var(--pdu-barva-bila, #fff);
  font-size: .82em;
}
body.in-dekujeme .reca-number {
  text-align: center;
  font-size: 1.0625em;
  color: var(--pdu-barva-text-sedy, #6f6f6f);
  margin-bottom: 1.375em;
}
body.in-dekujeme .reca-number strong {
  color: var(--pdu-barva-tekst-zakladni, #222);
  font-size: 1.15em;
  letter-spacing: .02em;
}
body.in-dekujeme .recapitulation-wrapper {
  background: var(--pdu-barva-bila, #fff);
  border: 1px solid var(--pdu-barva-okraj-jemny, #e3e3e3);
  border-radius: .625em;
  padding: 1.5em 1.75em 1.25em;
  margin: 0 0 1.25em;
}
/* druhý wrapper (rekap text + Děkujeme + tlačítko) bez karty, na střed */
body.in-dekujeme .recapitulation-wrapper:has(.order-complete-links) {
  background: transparent;
  border: 0;
  padding: .25em 0 0;
  text-align: center;
}
body.in-dekujeme h4.order-icon {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: 1.125em;
  margin: 0 0 .875em;
  padding-bottom: .625em;
  border-bottom: 1px solid var(--pdu-barva-okraj-jemny, #e3e3e3);
}
body.in-dekujeme h4.order-icon::before {
  content: "";
  display: inline-block;
  width: .375em;
  height: 1.05em;
  flex: 0 0 auto;
  border: 0;
  border-radius: 2px;
  background: var(--pdu-barva-zelena-akcent, #009046);
}
/* jedna levá hrana uvnitř karty — nativní markup drží 80px rezervu po staré
   ikoně boxu (.co-box padding-left) a h4 ji ruší záporným marginem; k tomu
   bootstrapový gutter (.row -15px / .col +15px) u tabulek. Nulujeme obojí,
   ať nadpisy, tabulka i obrázek začínají na jedné svislici. */
body.in-dekujeme .co-box { padding-left: 0; }
body.in-dekujeme h4.order-icon { padding-left: 0; margin-left: 0; }
body.in-dekujeme .recapitulation-wrapper .row { margin-left: 0; margin-right: 0; }
body.in-dekujeme .recapitulation-wrapper [class*="col-"] { padding-left: 0; padding-right: 0; }
body.in-dekujeme .recapitulation-wrapper table { width: 100%; margin-left: 0; }
body.in-dekujeme .recapitulation-wrapper th:first-child,
body.in-dekujeme .recapitulation-wrapper td:first-child { padding-left: 0; }
body.in-dekujeme .order-summary-item.total { color: var(--pdu-barva-text-sekundarni, #444); }
body.in-dekujeme .order-summary-item.summary-thx {
  color: var(--pdu-barva-zelena-brand, #009046);
  font-weight: 600;
  font-size: 1.375em;
  margin: .375em 0 .875em;
}
/* nativní „Zpět do obchodu" na house zelený CTA (nativně bez hoveru) */
body.in-dekujeme .order-complete-links .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  /* nativni .btn vnucuje Exo 2; bez inherit by zelene tlacitko melo jiny font
     nez zlute CTA hned pod nim (to jede na Source Sans 3 jako zbytek webu) */
  font-family: inherit;
  padding: .875em 1.75em;
  font-size: 1.05em;
  font-weight: 600;
  border-radius: var(--pdu-radius-m, .375em);
  background-color: var(--pdu-barva-zelena-akcent, #00B46E);
  background-image: var(--pdu-grad-btn-corner), var(--pdu-grad-btn-glossy);
  color: var(--pdu-barva-bila, #fff);
  border: 1px solid var(--pdu-barva-zelena-akcent, #00B46E);
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny, #E0E0E0);
  text-decoration: none;
  transition: all var(--pdu-prechod-dur-stredni, .25s) ease;
}
body.in-dekujeme .order-complete-links .btn:hover,
body.in-dekujeme .order-complete-links .btn:focus-visible {
  background-color: var(--pdu-barva-bila, #fff);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  color: var(--pdu-barva-tmavomodra, #191932);
  border-color: var(--pdu-barva-tmavomodra, #191932);
  transform: translateY(-1px);
  outline: none;
}
body.in-dekujeme .order-complete-links p { margin: 0; }

/* žluté telefonní CTA z include (pdu-pag-btn-cta je definované ve style-pages.css,
   které děkovačka nemusí mít; barvy proto nastavujeme i tady, ať blok nevisí na
   cizím souboru) */
body.in-dekujeme .pdu-kos-cta { display: flex; justify-content: center; margin: .625em 0 0; }
/* zelené a žluté CTA jsou v různých rodičích (nativní vs. include), takže je
   nelze dát do jednoho flex řádku; stažením spodní mezery recap wrapperu se
   aspoň čtou jako jeden pár tlačítek */
body.in-dekujeme .recapitulation-wrapper:has(.order-complete-links) { margin-bottom: .375em; }
body.in-dekujeme .pdu-kos-cta .pdu-pag-btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .875em 1.75em;
  font-size: 1.05em;
  font-weight: 700;
  border-radius: var(--pdu-radius-m, .375em);
  background-color: var(--pdu-barva-zluta-cta, #F4E732);
  background-image: var(--pdu-grad-btn-corner-light), var(--pdu-grad-btn-glossy-light);
  color: var(--pdu-barva-tmavomodra, #191932);
  border: 1px solid var(--pdu-barva-zluta-cta, #F4E732);
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny, #E0E0E0);
  text-decoration: none;
  transition: all var(--pdu-prechod-dur-stredni, .25s) ease;
}
body.in-dekujeme .pdu-kos-cta .pdu-pag-btn-cta:hover,
body.in-dekujeme .pdu-kos-cta .pdu-pag-btn-cta:focus-visible {
  background-color: var(--pdu-barva-bila, #fff);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  border-color: var(--pdu-barva-tmavomodra, #191932);
  transform: translateY(-1px);
  outline: none;
}

/* osa objednávky (varianta C) — číslování nese skutečný sled, ne dekoraci */
body.in-dekujeme .pdu-kos-osa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 1.5em;
}
body.in-dekujeme .pdu-kos-osa-step { position: relative; padding: 0 .5em; text-align: center; }
body.in-dekujeme .pdu-kos-osa-dot {
  width: 2em; height: 2em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .4em;
  font-weight: 700; font-size: .9em;
  background: var(--pdu-barva-bila, #fff);
  border: 2px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
  color: var(--pdu-barva-text-sedy, #666);
  position: relative; z-index: 2;
}
body.in-dekujeme .pdu-kos-osa-step.is-done .pdu-kos-osa-dot {
  background: var(--pdu-barva-zelena-akcent, #00B46E);
  border-color: var(--pdu-barva-zelena-akcent, #00B46E);
  color: var(--pdu-barva-bila, #fff);
}
body.in-dekujeme .pdu-kos-osa-step::before,
body.in-dekujeme .pdu-kos-osa-step::after {
  content: ""; position: absolute; top: 1em; height: 2px;
  background: var(--pdu-barva-okraj-jemny, #E0E0E0); z-index: 1;
}
body.in-dekujeme .pdu-kos-osa-step::before { left: 0; right: 50%; }
body.in-dekujeme .pdu-kos-osa-step::after { left: 50%; right: 0; }
body.in-dekujeme .pdu-kos-osa-step:first-child::before,
body.in-dekujeme .pdu-kos-osa-step:last-child::after { display: none; }
body.in-dekujeme .pdu-kos-osa-step.is-done::before,
body.in-dekujeme .pdu-kos-osa-step.is-done::after { background: var(--pdu-barva-zelena-akcent, #00B46E); }
body.in-dekujeme .pdu-kos-osa-step b { display: block; font-size: .95em; color: var(--pdu-barva-tmavomodra, #191932); }
body.in-dekujeme .pdu-kos-osa-sub { display: block; font-size: .82em; color: var(--pdu-barva-text-sedy, #666); line-height: 1.35; }
/* mobil: osa na sloupec, spojnice zleva */
@media (max-width: 37.49em) {
  body.in-dekujeme .pdu-kos-osa { grid-template-columns: 1fr; gap: .75em; }
  body.in-dekujeme .pdu-kos-osa-step { display: grid; grid-template-columns: 2em 1fr; gap: 0 .75em; text-align: left; padding: 0; }
  body.in-dekujeme .pdu-kos-osa-dot { grid-row: span 2; margin: 0; }
  body.in-dekujeme .pdu-kos-osa-step::before,
  body.in-dekujeme .pdu-kos-osa-step::after { display: none; }
}
@media (max-width: 47.99em) {
  body.in-dekujeme .recapitulation-wrapper { padding: 1em 1em .875em; }
  body.in-dekujeme .order-summary-heading { font-size: 1.45em; }
}

/* f) mini-košík — panel po přidání do košíku */
.cart-widget {
  border: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0) !important;
  border-radius: .625em !important;
  box-shadow: 0 .5em 1.5em -.5em rgba(25, 25, 50, .22) !important;
  overflow: hidden;
}
/* položky: nativně table-layout nalepený na hranu panelu a s buňkami zarovnanými
   nahoru, takže u víceřádkového názvu obrázek i počet „plavaly" u stropu */
.cart-widget .cart-widget-products-inner { padding: .25em .875em; }
.cart-widget .cart-widget-product {
  align-items: center;
  padding: .5em 0;
  border-bottom: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
}
.cart-widget .cart-widget-product > * { vertical-align: middle; }
.cart-widget .cart-widget-product:last-child { border-bottom: 0; }
.cart-widget .cart-widget-product-name { line-height: 1.3; padding-left: .5em; }
.cart-widget .cart-widget-product-name a { text-decoration: none; }
.cart-widget .cart-widget-product-name a:hover { color: var(--pdu-barva-zelena-akcent, #00B46E); }
/* křížek pro odebrání — nativně bez stavu, doplněn hover */
.cart-widget .cart-widget-product-delete a,
.cart-widget .cart-widget-product-delete button {
  opacity: .55;
  transition: opacity var(--pdu-prechod-dur-stredni, .25s) ease, color var(--pdu-prechod-dur-stredni, .25s) ease;
}
.cart-widget .cart-widget-product-delete a:hover,
.cart-widget .cart-widget-product-delete button:hover {
  opacity: 1;
  color: var(--pdu-barva-cervena-alert, #E63C24);
}
/* počítadlo množství — nativní span.quantity má ostré rohy, číslo zarovnané
   vlevo a plus/minus 18×18 px bez jakéhokoli stavu. Scopováno na mini-košík
   záměrně: stejná .quantity je i na detailu produktu u „Přidat do košíku",
   tam se do hlavní konverzní cesty bez zadání nesahá. */
.cart-widget .quantity {
  border-radius: var(--pdu-radius-m, .375em);
  border-color: var(--pdu-barva-okraj-jemny, #E0E0E0);
  overflow: hidden;
}
.cart-widget .quantity .amount {
  /* <input> nededi font -> vychazel v Arialu; `font: inherit` ho vrati na
     Source Sans 3 jako zbytek webu (resetuje i weight, proto se nastavuje za nim) */
  font: inherit;
  font-size: .9375em;
  font-weight: 600;
  text-align: center;
  color: var(--pdu-barva-tmavomodra, #191932);
}
.cart-widget .quantity .increase,
.cart-widget .quantity .decrease {
  transition: background-color var(--pdu-prechod-dur-stredni, .25s) ease;
}
.cart-widget .quantity .increase:hover,
.cart-widget .quantity .decrease:hover {
  background-color: var(--pdu-barva-sede-svetla, #F5F5F5);
}

/* tlačítko „Pokračovat do košíku" = žlutý house CTA.
   Žlutá dle sémantiky pdu-pag-btn-* (hlavní konverze „objednat"); v panelu je
   jediné tlačítko, takže pravidlo „max 1 žlutá na sekci" platí. Nativně bylo
   konverzní červené, přes celou šířku a s padding 20/15 = přerostlé. */
.cart-widget .cart-widget-button .btn {
  /* nativni .btn vnucuje Exo 2 (fontu nadpisu), house CTA jede na Source Sans 3
     jako zbytek textu; inherit ho srovna s ostatnimi tlacitky webu */
  font-family: inherit;
  padding: .75em 1.5em;
  font-size: 1.05em;
  font-weight: 700;
  border-radius: var(--pdu-radius-m, .375em);
  background-color: var(--pdu-barva-zluta-cta, #F4E732);
  background-image: var(--pdu-grad-btn-corner-light), var(--pdu-grad-btn-glossy-light);
  color: var(--pdu-barva-tmavomodra, #191932);
  border: 1px solid var(--pdu-barva-zluta-cta, #F4E732);
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny, #E0E0E0);
  transition: all var(--pdu-prechod-dur-stredni, .25s) ease;
}
.cart-widget .cart-widget-button { padding: .75em; }
.cart-widget .cart-widget-button .btn:hover,
.cart-widget .cart-widget-button .btn:focus-visible {
  background-color: var(--pdu-barva-bila, #fff);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  color: var(--pdu-barva-tmavomodra, #191932);
  border-color: var(--pdu-barva-tmavomodra, #191932);
  transform: translateY(-1px);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .cart-widget .cart-widget-button .btn:hover { transform: none; }
}
/* ───────────────────────────────────────────────────────────────────────
   g) FACELIFT KROKŮ CHECKOUTU (2026-08-19, Fáze 2)
   Nativní checkout má všude ostré hrany (měřeno: 21 prvků s radius 0 v košíku,
   5 v kroku dopravy), ploché grey okraje a tlačítka bez stavů. Tahle část dává
   všem třem krokům house tvarosloví: radius, jemné okraje, měkký stín, hover.
   Scope `body.ordering-process` pokrývá /kosik/ i /objednavka/*.

   ⚠ HLAVNÍ CTA (Pokračovat, Objednat) JE ŽLUTÉ, nativně bylo konverzní červené.
   Rozhodl uživatel 2026-08-19 spolu s mini-košíkem; žlutá je dle sémantiky
   pdu-pag-btn-* hlavní konverze („objednat"). Cílíme jen `.next-step-forward`
   a `#submit-order` — `.add-to-cart-button` v souvisejícím zboží na /kosik/
   zůstává červené, je to jiná akce (přidat zboží, ne postoupit v objednávce).

   ⚠ Shoptet překresluje kroky AJAXem (změna dopravy/platby), takže tady smí
   být jen CSS. Žádný JS, který by po re-renderu zmizel.
   ─────────────────────────────────────────────────────────────────────── */

/* ── ukazatel kroků (ol.cart-header) ── */
body.ordering-process ol.cart-header {
  /* !important: radius i font drzi vendor theme z cross-origin CDN, ktery ma
     prednost; bez nej se pravidlo aplikuje, ale nic neprebije (mereno) */
  border-radius: var(--pdu-radius-l, .75em) !important;
  border: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
  overflow: hidden;
}

/* ── karty s dopravou a platbou ──
   Nativně jsou to volné řádky bez rámu; jako karty se dá vybraná volba poznat
   na první pohled a klikatelná plocha je zřejmá. */
body.ordering-process .radio-wrapper {
  border: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
  border-radius: var(--pdu-radius-l, .75em);
  padding: .25em .875em;
  margin-bottom: .5em;
  background: var(--pdu-barva-bila, #fff);
  transition: border-color var(--pdu-prechod-dur-stredni, .25s) ease,
              box-shadow var(--pdu-prechod-dur-stredni, .25s) ease;
}
body.ordering-process .radio-wrapper:hover:not(.inactive-child) {
  border-color: var(--pdu-barva-zelena-akcent, #00B46E);
}
/* vybraná volba: zelený rám a jemný zelený podklad.
   ⚠ NErozhoduje nativní .active — ta po AJAX re-renderu zůstane na staré volbě
   (měřeno: po přepnutí na osobní odběr měla `active` pořád doprava do domu,
   ačkoli checked byl jinde), takže by se zvýraznil špatný řádek. `:has(:checked)`
   čte skutečný stav přepínače. .active ponechána jako záloha pro prohlížeče
   bez :has(). */
body.ordering-process .radio-wrapper:has(input:checked) {
  border-color: var(--pdu-barva-zelena-akcent, #00B46E);
  box-shadow: inset 0 0 0 1px var(--pdu-barva-zelena-akcent, #00B46E);
  background: var(--pdu-barva-zelena-svetla-2, #F5FAF5);
}
body.ordering-process .radio-wrapper.active {
  border-color: var(--pdu-barva-zelena-akcent, #00B46E);
  box-shadow: inset 0 0 0 1px var(--pdu-barva-zelena-akcent, #00B46E);
  background: var(--pdu-barva-zelena-svetla-2, #F5FAF5);
}
/* ztlumená nemožná kombinace (viz bod a) rám nezvýrazňuje */
/* v prohlizecich s :has() rozhoduje jen skutecne zaskrtnuti */
body.ordering-process .radio-wrapper.active:not(:has(input:checked)) {
  border-color: var(--pdu-barva-okraj-jemny, #E0E0E0);
  box-shadow: none;
  background: var(--pdu-barva-bila, #fff);
}
body.ordering-process .radio-wrapper.inactive-child {
  border-style: dashed;
  background: var(--pdu-barva-sede-svetla, #F5F5F5);
}

/* ── boxy v pravém sloupci (rekapitulace, pomoc, souhrn) ── */
body.ordering-process .cart-content,
body.ordering-process .checkout-box-wrapper,
body.ordering-process .summary-wrapper {
  border-radius: var(--pdu-radius-l, .75em);
  overflow: hidden;
}
/* tmavý blok „Potřebujete pomoc" je první dítě sidebaru */
body.ordering-process .cart-content > .box:first-child { border-radius: 0; }

/* ── hlavní CTA: Pokračovat / Objednat ──
   Obal .next-step ma od vendora vlastni Exo 2, takze `inherit` na tlacitku
   vracel zase Exo 2. Srovnavame proto i obal; pak uz tlacitko dedi Source Sans 3
   z .cart-content jako zbytek webu. */
body.ordering-process .next-step { font-family: inherit !important; }
body.ordering-process .btn-conversion.next-step-forward,
body.ordering-process #submit-order {
  /* ⚠ Tucnost: `Source Sans 3` NEMA rez 800 (dostupne 300-700 a 900), takze 800
     se dle pravidel skladani fontu resi nejblizsim vyssim = 900. Overeno v chromiu
     i webkitu srovnanim sirky textu (800 a 900 daly identickych 71,02 px), takze
     tlacitko uz na maximalni tucnosti JE a vys to nejde. Opticky ho odlehcovalo
     UPPERCASE plus mensi velikost a padding nez house CTA — proto se tady srovnava
     velikost i padding na hodnoty z .pdu-pag-btn-cta (1.05em / .875em 1.75em). */
  font-size: 1.05em;
  padding: .875em 1.75em;
  background-color: var(--pdu-barva-zluta-cta, #F4E732);
  background-image: var(--pdu-grad-btn-corner-light), var(--pdu-grad-btn-glossy-light);
  color: var(--pdu-barva-tmavomodra, #191932);
  border: 1px solid var(--pdu-barva-zluta-cta, #F4E732);
  border-radius: var(--pdu-radius-m, .375em);
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny, #E0E0E0);
  font-family: inherit !important;
  font-weight: 700;
  transition: all var(--pdu-prechod-dur-stredni, .25s) ease;
}
body.ordering-process .btn-conversion.next-step-forward:hover,
body.ordering-process .btn-conversion.next-step-forward:focus-visible,
body.ordering-process #submit-order:hover,
body.ordering-process #submit-order:focus-visible {
  background-color: var(--pdu-barva-bila, #fff);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  color: var(--pdu-barva-tmavomodra, #191932);
  border-color: var(--pdu-barva-tmavomodra, #191932);
  transform: translateY(-1px);
  outline: none;
}
/* ostatní tlačítka v checkoutu (vč. červeného přidat do košíku u souvisejícího
   zboží) dostanou aspoň house tvar a stav, barvu jim needitujeme */
body.ordering-process .btn {
  border-radius: var(--pdu-radius-m, .375em);
  transition: all var(--pdu-prechod-dur-stredni, .25s) ease;
}

/* ── formulářová pole (krok 2) a kupón ── */
body.ordering-process input.form-control,
body.ordering-process select.form-control,
body.ordering-process textarea.form-control {
  border-radius: var(--pdu-radius-m, .375em);
  transition: border-color var(--pdu-prechod-dur-stredni, .25s) ease,
              box-shadow var(--pdu-prechod-dur-stredni, .25s) ease;
}
body.ordering-process input.form-control:focus,
body.ordering-process select.form-control:focus,
body.ordering-process textarea.form-control:focus {
  border-color: var(--pdu-barva-zelena-akcent, #00B46E);
  box-shadow: 0 0 0 3px rgba(0, 180, 110, .15);
  outline: none;
}
/* input-group u kupónu: zaoblit jen krajní hrany, ať pole a tlačítko drží spolu */
body.ordering-process .discount-coupon .input-group input { border-radius: var(--pdu-radius-m, .375em) 0 0 var(--pdu-radius-m, .375em); }
body.ordering-process .discount-coupon .input-group .btn { border-radius: 0 var(--pdu-radius-m, .375em) var(--pdu-radius-m, .375em) 0; }

/* ── tabulka položek v košíku ── */
body.in-kosik .cart-table { border-radius: var(--pdu-radius-l, .75em); overflow: hidden; }
body.in-kosik .cart-table .cart-p-image img { border-radius: var(--pdu-radius-m, .375em); }

@media (prefers-reduced-motion: reduce) {
  body.ordering-process .btn-conversion.next-step-forward:hover,
  body.ordering-process #submit-order:hover { transform: none; }
}
/* ───────────────────────────────────────────────────────────────────────
   h) UKAZATEL KROKŮ, POČÍTADLO V KOŠÍKU, BOX S KONTAKTY (2026-08-19)
   Tři prvky, na které si uživatel ukázal jako na zbylé ostrovy nativního
   vzhledu v jinak předělaném checkoutu.
   ─────────────────────────────────────────────────────────────────────── */

/* ── ukazatel kroků ──
   Čísla jsou nativně `counter(steps)` v `li.step span::before` a VŠECHNA
   kolečka mají stejný zelený obrys, takže z nich nejde vyčíst, kde zákazník
   je. Nově: hotové a aktuální krok plné zelené s bílým číslem, budoucí jen
   šedý obrys. `:has(~ .active)` označí kroky před aktivním jako hotové. */
body.ordering-process ol.cart-header li.step span::before {
  border-color: var(--pdu-barva-okraj-jemny, #E0E0E0);
  color: var(--pdu-barva-text-sedy, #666);
  transition: background-color var(--pdu-prechod-dur-stredni, .25s) ease,
              border-color var(--pdu-prechod-dur-stredni, .25s) ease,
              color var(--pdu-prechod-dur-stredni, .25s) ease;
}
body.ordering-process ol.cart-header li.step.active span::before,
body.ordering-process ol.cart-header li.step:has(~ .active) span::before {
  background-color: var(--pdu-barva-zelena-akcent, #00B46E);
  border-color: var(--pdu-barva-zelena-akcent, #00B46E);
  color: var(--pdu-barva-bila, #fff);
}
/* hotový krok je odkaz zpět, tak ať je vidět, že se na něj dá kliknout */
body.ordering-process ol.cart-header li.step a { transition: color var(--pdu-prechod-dur-stredni, .25s) ease; }
body.ordering-process ol.cart-header li.step a:hover { color: var(--pdu-barva-zelena-akcent, #00B46E); }
body.ordering-process ol.cart-header li.step a:hover span::before { border-color: var(--pdu-barva-zelena-akcent, #00B46E); }

/* ── počítadlo množství v celém checkoutu ──
   Dřív bylo srovnané jen v mini-košíku (.cart-widget). Stejná .quantity je
   i v tabulce košíku, kde zůstávala nativní: ostré rohy, číslo vlevo,
   plus a minus 18x18 bez jakéhokoli stavu. Scope `body.ordering-process`
   nechává detail produktu nedotčený (tam se do konverzní cesty nesahá). */
body.ordering-process .quantity {
  border-radius: var(--pdu-radius-m, .375em);
  border-color: var(--pdu-barva-okraj-jemny, #E0E0E0);
  overflow: hidden;
}
body.ordering-process .quantity .amount {
  font: inherit;
  font-size: .9375em;
  font-weight: 600;
  text-align: center;
  color: var(--pdu-barva-tmavomodra, #191932);
}
body.ordering-process .quantity .increase,
body.ordering-process .quantity .decrease {
  transition: background-color var(--pdu-prechod-dur-stredni, .25s) ease,
              color var(--pdu-prechod-dur-stredni, .25s) ease;
}
body.ordering-process .quantity .increase:hover,
body.ordering-process .quantity .decrease:hover {
  background-color: var(--pdu-barva-zelena-svetla-2, #F5FAF5);
  color: var(--pdu-barva-zelena-akcent, #00B46E);
}

/* ── box s kontakty v pravém sloupci ──
   Nativně `.box.box-sm` bez rámu, bez rádiusu a s nulovým paddingem, takže
   logo a kontakty se rozsypaly po bílé ploše. Nově karta jako všude jinde. */
body.ordering-process .checkout-box-wrapper .box {
  border: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
  border-radius: var(--pdu-radius-l, .75em);
  background: var(--pdu-barva-zelena-svetla-2, #F5FAF5);
  padding: 1em 1.125em;
}
/* Nativně: logo je `position:absolute; left:10px` o 76 px a `.contact-box` si na něj
   drží `min-height:100px` + `padding-left:96px`. Text zabere jen 75 px, takže pod
   posledním řádkem zbývalo 44 px prázdna a logo se k textu nijak nevázalo.
   Grid to řeší bez rezerv: logo je normální položka v prvním sloupci přes oba
   řádky, výška boxu = výška obsahu. */
body.ordering-process .checkout-box-wrapper .contact-box {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .875em;
  padding-left: 0;
  min-height: 0;
}
body.ordering-process .checkout-box-wrapper .contact-box img {
  position: static;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 3.25em;
  height: auto;
  border-radius: var(--pdu-radius-m, .375em);
}
body.ordering-process .checkout-box-wrapper .contact-box > strong {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
}
body.ordering-process .checkout-box-wrapper .contact-box > ul {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
}
body.ordering-process .checkout-box-wrapper .contact-box li { padding: .125em 0; }
body.ordering-process .checkout-box-wrapper .contact-box a {
  transition: color var(--pdu-prechod-dur-stredni, .25s) ease;
}
body.ordering-process .checkout-box-wrapper .contact-box a:hover {
  color: var(--pdu-barva-zelena-akcent-hover, #009458);
}

/* ── kupón „Dárky a slevy" ──
   Nativní input-group drží pole a tlačítko na sraz; zaoblit smí jen krajní
   hrany, jinak by mezi nimi vznikla mezera. */
body.ordering-process .discount-coupon input.form-control {
  border-radius: var(--pdu-radius-m, .375em) 0 0 var(--pdu-radius-m, .375em);
}
body.ordering-process .discount-coupon .btn {
  border-radius: 0 var(--pdu-radius-m, .375em) var(--pdu-radius-m, .375em) 0;
}
/* ───────────────────────────────────────────────────────────────────────
   i) MODÁL VÝBĚRU ODBĚRNÉHO MÍSTA (2026-08-19)
   Otevírá se z kroku dopravy po zvolení osobního odběru (.branch-wrap
   v Shoptet lightboxu). Nativně je to jeden dlouhý sloupec textu (měřeno
   2142 px) oddělený jen linkami a hlavní akce „Zvolte pobočku" je
   `.btn.btn-primary.btn-xs` o velikosti 118x18 px, font 12 px, váha 400,
   tedy nejmenší prvek na obrazovce. Nově: každá pobočka je karta a tlačítko
   je normální house CTA.

   ⚠ `.pdu-co-vyjimka` je NÁŠ blok — vykresluje ho checkout.js SEKCE 6
   z vyjimky-config.js (provozní výjimky a svátky). Jen ho stylujeme,
   obsah ani třídu neměnit.
   ─────────────────────────────────────────────────────────────────────── */

/* nadpis modálu */
body.ordering-process .branch-wrap > h2 {
  font-size: 1.375em;
  font-weight: 700;
  color: var(--pdu-barva-tmavomodra, #191932);
  margin: 0 0 1em;
  padding-bottom: .5em;
  border-bottom: 2px solid var(--pdu-barva-zelena-akcent, #00B46E);
}

/* každá pobočka jako karta, místo textu odděleného linkou */
body.ordering-process .branch-wrap .personal-collection-point {
  border: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
  border-radius: var(--pdu-radius-l, .75em);
  padding: 1.125em 1.25em;
  margin-bottom: .875em;
  background: var(--pdu-barva-bila, #fff);
  transition: border-color var(--pdu-prechod-dur-stredni, .25s) ease,
              box-shadow var(--pdu-prechod-dur-stredni, .25s) ease;
}
body.ordering-process .branch-wrap .personal-collection-point:hover {
  border-color: var(--pdu-barva-zelena-akcent, #00B46E);
  box-shadow: 0 .25em .75em -.25em rgba(25, 25, 50, .12);
}
/* oddělovací linky jsou po zavedení karet nadbytečné */
body.ordering-process .branch-wrap hr.line { display: none; }

/* název pobočky */
body.ordering-process .branch-wrap .personal-collection-point h3 {
  font-size: 1.125em;
  font-weight: 700;
  color: var(--pdu-barva-tmavomodra, #191932);
  margin: 0 0 .5em;
}
body.ordering-process .branch-wrap .personal-collection-point p {
  color: var(--pdu-barva-text-sekundarni, #5B5B6E);
  line-height: 1.55;
  margin: 0 0 .75em;
}

/* hlavní akce: z btn-xs na plnohodnotné house CTA */
body.ordering-process .branch-wrap .personal-collection-point .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75em 1.5em !important;
  font-family: inherit !important;
  font-size: 1em !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border-radius: var(--pdu-radius-m, .375em);
  background-color: var(--pdu-barva-zelena-akcent, #00B46E);
  background-image: var(--pdu-grad-btn-corner), var(--pdu-grad-btn-glossy);
  color: var(--pdu-barva-bila, #fff) !important;
  border: 1px solid var(--pdu-barva-zelena-akcent, #00B46E);
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny, #E0E0E0);
  text-decoration: none;
  transition: all var(--pdu-prechod-dur-stredni, .25s) ease;
}
body.ordering-process .branch-wrap .personal-collection-point .btn:hover,
body.ordering-process .branch-wrap .personal-collection-point .btn:focus-visible {
  background-color: var(--pdu-barva-bila, #fff);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  color: var(--pdu-barva-tmavomodra, #191932) !important;
  border-color: var(--pdu-barva-tmavomodra, #191932);
  transform: translateY(-1px);
  outline: none;
}

/* náš callout provozních výjimek — jen tvar, obsah řeší checkout.js */
body.ordering-process .branch-wrap .pdu-co-vyjimka {
  border-radius: var(--pdu-radius-m, .375em);
  border-left: .25em solid var(--pdu-barva-cervena-alert, #E63C24);
  padding: .5em .75em;
  margin: 0 0 .875em;
  font-weight: 500;
}

@media (max-width: 37.49em) {
  body.ordering-process .branch-wrap .personal-collection-point { padding: .875em 1em; }
  body.ordering-process .branch-wrap .personal-collection-point .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.ordering-process .branch-wrap .personal-collection-point,
  body.ordering-process .branch-wrap .personal-collection-point .btn { transition: none; }
  body.ordering-process .branch-wrap .personal-collection-point .btn:hover { transform: none; }
}

/* ───────────────────────────────────────────────────────────────────────
   j) PRÁZDNÝ KOŠÍK (2026-08-20)
   Slepá ulička: zákazník sem došel a nemá co koupit. Úkol stránky je jediný —
   dostat ho zpátky do katalogu. Nativně je to nadpis, odrážkový seznam odkazů
   a našedlé tlačítko „Hledat" na 1418 px široké ploše, takže obsah plave vlevo
   a nic nevede oko.

   ⚠ Jen CSS nad nativním markupem, žádný nový obsah. Selektory visí na
   `.cart-inner.cart-empty`, takže plný košík zůstává nedotčený.
   ⚠ Na `li` NESAHAT přes `display` — Shoptet jednu položku („Extra") schovává
   přes `display:none` a plošné přepsání by ji vytáhlo zpátky. Grid je proto
   na `ul` a skryté `li` prostě nezabere buňku.
   ─────────────────────────────────────────────────────────────────────── */

/* 68em, ne 62: pri 62 zbylo v pravem sloupci na e-mail 147 px, ale
   „objednavky@levne-pletivo.cz" potrebuje 172, takze se lamal uprostred
   slova. Nativne mel box 413 px a lamal se az pod nim — zuzeni bylo moje. */
body.ordering-process .cart-inner.cart-empty {
  max-width: 68em;
  margin: 0 auto;
  padding: 2em 0 2.5em;
}
/* Logo v kontaktnim boxu je nativne 76 px a bere misto adrese. Na prazdnem
   kosiku ho zmensujeme na 48, cimz text ziska 28 px a e-mail se vejde na
   radek. Lepsi nez roztahovat celou stranku kvuli jednomu radku. */
body.ordering-process .cart-empty .contact-box img {
  width: 48px;
  height: auto;
}
body.ordering-process .cart-empty .contact-box {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .75em;
  padding-left: 0;
  min-height: 0;
}
body.ordering-process .cart-empty .contact-box img { grid-column: 1; grid-row: 1 / span 2; position: static; }

/* pojistka: kdyby se sloupec presto zuzil, at se adresa lame na zavinaci
   a tecce, ne uprostred domeny */
body.ordering-process .cart-empty .contact-box .mail,
body.ordering-process .cart-empty .contact-box a[href^="mailto"] {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* nadpis: nativně 29 px a splývá s okolím */
body.ordering-process .cart-inner.cart-empty h1.cart-heading {
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pdu-barva-tmavomodra, #191932);
  /* zarovnano k leve hrane karty, ne na stred — nadpis stranky se cte
     zleva jako vsude jinde na webu */
  text-align: left;
  margin: 0 0 1.25em;
}

/* dva sloupce (nabídka + hledání) jako karty, ať mají tvar */
body.ordering-process .cart-empty .empty-cart-boxes > [class*="col-"] {
  margin-bottom: 1.5em;
}
body.ordering-process .cart-empty .empty-cart-boxes > [class*="col-"]:last-child { margin-bottom: 0; }
body.ordering-process .cart-empty .empty-cart-boxes h3,
body.ordering-process .cart-empty .col-md-4 h2 {
  font-size: 1.0625em;
  font-weight: 700;
  color: var(--pdu-barva-tmavomodra, #191932);
  margin: 0 0 .75em;
}

/* seznam kategorií → dlaždice ve stejném jazyce jako karty na děkovačce */
body.ordering-process .cart-empty .empty-cart-boxes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5em;
  width: 100%;
}
body.ordering-process .cart-empty .empty-cart-boxes ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75em;
  padding: .75em 1em;
  border: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
  border-radius: .625em;
  background: var(--pdu-barva-bila, #fff);
  color: var(--pdu-barva-tmavomodra, #191932);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--pdu-prechod-dur-stredni, .25s) ease,
              box-shadow var(--pdu-prechod-dur-stredni, .25s) ease;
}
/* šipka jako u house CTA — čistě dekorace, čtečka ji nepotřebuje */
body.ordering-process .cart-empty .empty-cart-boxes ul a::after {
  content: "\2192";
  flex: 0 0 auto;
  color: var(--pdu-barva-zelena-akcent, #00B46E);
  transition: transform var(--pdu-prechod-dur-stredni, .25s) ease;
}
body.ordering-process .cart-empty .empty-cart-boxes ul a:hover,
body.ordering-process .cart-empty .empty-cart-boxes ul a:focus-visible {
  border-color: var(--pdu-barva-zelena-akcent, #00B46E);
  box-shadow: 0 .125em .625em rgba(0, 0, 0, .07);
  text-decoration: none;
  outline: none;
}
body.ordering-process .cart-empty .empty-cart-boxes ul a:hover::after,
body.ordering-process .cart-empty .empty-cart-boxes ul a:focus-visible::after {
  transform: translateX(.1875em);
}

/* vyhledávání: pole a tlačítko drží spolu, zaoblit smí jen krajní hrany */
body.ordering-process .cart-empty .search .form-control {
  border-radius: var(--pdu-radius-m, .375em) 0 0 var(--pdu-radius-m, .375em);
  border-color: var(--pdu-barva-okraj-jemny, #E0E0E0);
}
/* jediná žlutá na stránce = jediná hlavní akce (house pravidlo max 1 na sekci).
   Dlaždice kategorií zůstávají bílé, aby se s ní neprali. */
body.ordering-process .cart-empty .search .btn {
  border-radius: 0 var(--pdu-radius-m, .375em) var(--pdu-radius-m, .375em) 0;
  background-color: var(--pdu-barva-zluta-cta, #F4E732);
  background-image: var(--pdu-grad-btn-corner-light), var(--pdu-grad-btn-glossy-light);
  color: var(--pdu-barva-tmavomodra, #191932);
  border: 1px solid var(--pdu-barva-zluta-cta, #F4E732);
  font-weight: 700;
  transition: all var(--pdu-prechod-dur-stredni, .25s) ease;
}
body.ordering-process .cart-empty .search .btn:hover,
body.ordering-process .cart-empty .search .btn:focus-visible {
  background-color: var(--pdu-barva-bila, #fff);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  border-color: var(--pdu-barva-tmavomodra, #191932);
  color: var(--pdu-barva-tmavomodra, #191932);
  outline: none;
}

@media (min-width: 48em) {
  /* Nativne jsou boxy vedle sebe: dlazdice vlevo, hledani vpravo. Pole na
     hledani je vysoke 36 px, takze vpravo zbyde ~250 px prazdna plochy vedle
     ctyr dlazdic. Pres sebe to sedne: dlazdice na plnou sirku ve dvou
     sloupcich, hledani pod nimi. */
  body.ordering-process .cart-empty .empty-cart-boxes > [class*="col-"] {
    width: 100%;
    float: none;
  }
  body.ordering-process .cart-empty .empty-cart-boxes ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 37.49em) {
  body.ordering-process .cart-inner.cart-empty h1.cart-heading { font-size: 1.375em; }
  body.ordering-process .cart-empty .empty-cart-boxes ul a { padding: .875em 1em; }
}
@media (prefers-reduced-motion: reduce) {
  body.ordering-process .cart-empty .empty-cart-boxes ul a,
  body.ordering-process .cart-empty .empty-cart-boxes ul a::after,
  body.ordering-process .cart-empty .search .btn { transition: none; }
  body.ordering-process .cart-empty .empty-cart-boxes ul a:hover::after { transform: none; }
}

/* ───────────────────────────────────────────────────────────────────────
   k) MODÁL „PŘIDÁNO DO KOŠÍKU" (2026-08-20)
   Shoptet ho otevírá v colorboxu po vložení zboží do košíku. Je to první
   obrazovka po konverzním kliknutí, přesto z ní nativně nic nevede: hlavní
   akce „Nákupní košík" je červená (#E74C3C, mimo naši paletu), „Zpět do
   obchodu" je holý šedý text bez tvaru, okno má ostré rohy a stínítko za ním
   je BÍLÉ na 65 %, takže se stránka vybledne místo ztmavení a modál se
   opticky neodlepí.

   ⚠ SCOPE MIMO CHECKOUT. Modál se otevírá na kartě produktu i ve výpisu
   kategorie, kde `body.ordering-process` neplatí. Pravidla proto visí na
   `#colorbox` / `#cboxOverlay`. Je to jediné místo v tomhle souboru, které
   působí i mimo košík — schválně přes ID, ať nemůže nic přetéct jinam.

   ⚠ `#cboxOverlay` a `#cboxClose` sdílí colorbox i modál výběru odběrného
   místa (blok i). Ztmavení stínítka a tvar křížku tedy platí pro obojí,
   což je záměr — mají vypadat stejně.

   ⚠ Karty v „Ostatní zákazníci také nakoupili" jsou nativní `.products-block`,
   stejný markup jako ve výpisu kategorie. Držíme se zlehka (rám, rádius,
   stav) a nepřeskládáváme ho, aby se to nerozešlo s výpisem.
   ─────────────────────────────────────────────────────────────────────── */

/* ── stínítko: z bílého výblednutí na tmavé ztmavení ── */
#cboxOverlay {
  background: var(--pdu-barva-tmavomodra, #191932) !important;
  opacity: .55 !important;
}

/* ── okno ── */
#cboxContent {
  border: 0;
  border-radius: var(--pdu-radius-l, .75em);
  box-shadow: 0 1.25em 3em -1em rgba(25, 25, 50, .35);
}
#cboxLoadedContent { border-radius: var(--pdu-radius-l, .75em); }

/* křížek: nativně bílý čtverec 40×40 bez stavu */
#cboxClose {
  border-radius: 50%;
  color: var(--pdu-barva-text-sedy, #666);
  transition: background-color var(--pdu-prechod-dur-stredni, .25s) ease,
              color var(--pdu-prechod-dur-stredni, .25s) ease;
}
#cboxClose:hover,
#cboxClose:focus-visible {
  background-color: var(--pdu-barva-zelena-svetla-2, #F5FAF5);
  color: var(--pdu-barva-zelena-akcent, #00B46E);
  outline: none;
}

/* ── nadpisy ── */
/* Exo 2 je správně (nadpisový řez), ale nativně jede na váze 400, takže
   „Přidáno do košíku" nemá žádnou váhu proti názvu produktu pod ním. */
#colorbox .advanced-order > .h1 {
  font-weight: 700;
  font-size: 1.5em;
  color: var(--pdu-barva-tmavomodra, #191932);
  margin: 0 0 .5em;
}
#colorbox .advanced-order > .h2 {
  font-weight: 500;
  font-size: 1.125em;
  color: var(--pdu-barva-text-sekundarni, #5B5B6E);
  margin: 0 0 1.25em;
}
#colorbox .advanced-order-suggestion {
  font-weight: 700;
  font-size: 1.25em;
  color: var(--pdu-barva-tmavomodra, #191932);
  border-top: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
  margin-top: 1.5em;
}

/* ── akce ── */
#colorbox .advancedOrder__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75em;
}
#colorbox .advancedOrder__buttons .btn {
  border-radius: var(--pdu-radius-m, .375em);
  font-family: inherit !important;
  transition: all var(--pdu-prechod-dur-stredni, .25s) ease;
}

/* hlavní konverze = žlutá, jediná na obrazovce (house pravidlo) */
#colorbox .advancedOrder__buttons .btn-conversion {
  background-color: var(--pdu-barva-zluta-cta, #F4E732);
  background-image: var(--pdu-grad-btn-corner-light), var(--pdu-grad-btn-glossy-light);
  color: var(--pdu-barva-tmavomodra, #191932);
  border: 1px solid var(--pdu-barva-zluta-cta, #F4E732);
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny, #E0E0E0);
  font-size: 1.05em;
  font-weight: 700;
  padding: .875em 1.75em;
}
#colorbox .advancedOrder__buttons .btn-conversion:hover,
#colorbox .advancedOrder__buttons .btn-conversion:focus-visible {
  background-color: var(--pdu-barva-bila, #fff);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  border-color: var(--pdu-barva-tmavomodra, #191932);
  color: var(--pdu-barva-tmavomodra, #191932);
  transform: translateY(-1px);
  outline: none;
}

/* sekundární vedle žluté = bílá s obrysem, ne holý text */
#colorbox .advancedOrder__buttons .next-step-back {
  background-color: var(--pdu-barva-bila, #fff);
  border: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
  color: var(--pdu-barva-tmavomodra, #191932);
  font-weight: 500;
  padding: .875em 1.5em;
}
#colorbox .advancedOrder__buttons .next-step-back:hover,
#colorbox .advancedOrder__buttons .next-step-back:focus-visible {
  border-color: var(--pdu-barva-tmavomodra, #191932);
  color: var(--pdu-barva-tmavomodra, #191932);
  outline: none;
}

/* ── karty doporučeného zboží ── */
#colorbox #products .product {
  border: 1px solid var(--pdu-barva-okraj-jemny, #E0E0E0);
  border-radius: var(--pdu-radius-l, .75em);
  background: var(--pdu-barva-bila, #fff);
  transition: border-color var(--pdu-prechod-dur-stredni, .25s) ease,
              box-shadow var(--pdu-prechod-dur-stredni, .25s) ease;
}
#colorbox #products .product:hover {
  border-color: var(--pdu-barva-zelena-akcent, #00B46E);
  box-shadow: 0 .25em .75em -.25em rgba(25, 25, 50, .12);
}
/* „Detail" zůstává zelené (house: vstup na produkt), jen dostane tvar a stav */
#colorbox #products .product .btn-primary {
  border-radius: var(--pdu-radius-m, .375em);
  font-family: inherit !important;
  font-weight: 600;
  transition: all var(--pdu-prechod-dur-stredni, .25s) ease;
}
#colorbox #products .product .btn-primary:hover,
#colorbox #products .product .btn-primary:focus-visible {
  background-color: var(--pdu-barva-bila, #fff);
  background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy);
  border-color: var(--pdu-barva-tmavomodra, #191932);
  color: var(--pdu-barva-tmavomodra, #191932) !important;
  outline: none;
}

@media (max-width: 37.49em) {
  #colorbox .advanced-order > .h1 { font-size: 1.25em; }
  #colorbox .advancedOrder__buttons .btn { width: 100%; }
  /* na mobilu ať je hlavní akce první pod prstem, ne pod „zpět" */
  #colorbox .advancedOrder__buttons .btn-conversion { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  #cboxClose,
  #colorbox .advancedOrder__buttons .btn,
  #colorbox #products .product,
  #colorbox #products .product .btn-primary { transition: none; }
  #colorbox .advancedOrder__buttons .btn-conversion:hover { transform: none; }
}

/* ───────────────────────────────────────────────────────────────────────
   l) POZNÁMKA „* POVINNÁ POLE" NA KROKU 2 (2026-08-20)
   Nativní `p.form-legend` má `text-align:right` a roztahuje se přes celou
   šířku řádku, kdežto pole sedí v užším sloupci. Naměřeno na TESTu: poznámka
   končí 200 px vpravo od pravé hrany polí (1440 px) a 121 px (660 px), takže
   se opticky odlepí a na užším okně přistane vedle tlačítka přihlášení.

   ⚠ NENÍ to naše CSS — ověřeno měřením se `style-checkout.css` i bez něj,
   hodnoty se na čtyřech šířkách neliší ani o pixel. Nativní stav opravujeme,
   protože checkout je náš.

   Řešení: poznámku zarovnat k levé hraně sloupce POLÍ, ne k pravé hraně řádku.
   Sloupec popisků měří 184 px shodně na 1440 i 660 px, takže stačí odsadit.
   Pod 48em se formulář lomí pod sebe a odsazení se ruší.
   ─────────────────────────────────────────────────────────────────────── */

body.ordering-process p.form-legend {
  text-align: left;
  font-size: .8125em;
  color: var(--pdu-barva-text-sedy, #666);
  margin: 0 0 .375em;
}
/* Zlom NENI 48em: formular drzi dva sloupce uz od 480 px (mereno 480 = dva
   sloupce s odsazenim 184, 420 = pod sebou), takze 30em. */
@media (min-width: 30em) {
  body.ordering-process p.form-legend { padding-left: 184px; }
}

/* ───────────────────────────────────────────────────────────────────────
   m) BUBLINA CHATU NESMÍ LEŽET NA KONVERZNÍM TLAČÍTKU (2026-08-20)
   Smartsupp vykresluje `#smartsupp-widget-container > div` jako `fixed`
   u pravého dolního rohu (bottom 24, right 12, z-index 10000000, vše inline
   ze skriptu — proto `!important`, jinak inline styl vyhraje).

   Naměřeno na LIVE po nasazení faceletu: naše vyšší karty dopravy a platby
   posunou „Pokračovat" o 47 px níž, přímo do pásma bubliny. Na 480 px pak
   bublina (283–453) překryje tlačítko (278–455) prakticky celé a klik na
   střed dopadne na iframe. Postiženo je úzké pásmo zhruba 475–495 px.

   ⚠ Bublinu NESKRÝVÁME — je to podpora, ne dekorace. Jen ji na krocích
   objednávky zvedneme nad výšku tlačítka (64 px + odstup).
   Mimo checkout zůstává, kde byla.
   ─────────────────────────────────────────────────────────────────────── */

body.ordering-process #smartsupp-widget-container > div {
  bottom: 96px !important;
}
@media (min-width: 48em) {
  /* na širokém okně se tlačítko a bublina nepotkávají, stačí menší zdvih */
  body.ordering-process #smartsupp-widget-container > div { bottom: 24px !important; }
}