/* ============================================================================
   JKPRINT.CZ — CUSTOM STYLES
   ============================================================================
   Šablona Shoptet 12 "Step", tmavá varianta s neon-zelenými akcenty.

   Verze:    1.27
   Aktualizováno: 2026-05-24

   Co je nové ve verzi 1.27:
     - v1.27: zvětšen text odstavců v hero (.jkp-hero--text p) a v kartách služeb (.jkp-block p / .jkp-info-card p) — byl příliš malý oproti nadpisům

   Co je nové ve verzi 1.26:
     - v1.26: revert úprav kroků košíku z v1.25 — kroky zpět bílé (Shoptet default), pouze zarovnané do řady

   Co bylo ve verzi 1.24:
     - v1.24: skryt blok Nejprodávanější (.products-top-wrapper) na výpisu e-shopu — duplikoval produkty v hlavní mřížce a na mobilu se mačkal
     - v1.24: kroky košíku (ol.cart-header) — tmavé/zelené styly (v 1.26 zredukováno jen na layout)

   Co je nové ve verzi 1.23:
     - v1.23: hamburger menu používá nativní Shoptet nav (navigation-window-visible) místo vlastního jkp-nav-open draweru; zvětšeny zelené akcenty v nadpisech; oprava skákajícího popisu produktu

   Co je nové ve verzi 1.22:
     - v1.22: mobil — skrytí hero obrázku, oprava produktové stránky (Kód světlejší + záložka Popis), oprava hamburger menu drawer

   Co je nové ve verzi 1.21:
     - v1.21: oprava centrování hlášek (text + box vystředěné)

   Co je nové ve verzi 1.20:
     - v1.20: hlášky (úspěšné odeslání formuláře, přidání do košíku) — kompaktní zarovnaný panel místo full-width pruhu

   Co je nové ve verzi 1.19:
     - Sekce 21: galerie referencí přitažena těsně pod nadpis (zmenšen margin-top z clamp(32px, 5vw, 56px) na clamp(8px, 1.5vw, 16px)) — uživatel smazal úvodní odstavec a vznikla velká prázdná mezera

   Co je nové ve verzi 1.18:
     - KRITICKÁ OPRAVA: body class na stránce Reference a realizace je 'in-reference', NE 'in-reference-a-realizace'. Sekce 18 (.jkp-hero--text) a sekce 21 (.jkp-gallery) měly špatný selektor a vůbec se neaplikovaly. Přidán fallback selektor 'body.in-reference' všude vedle původního 'body.in-reference-a-realizace'.
     - Sekce 18: stejně přidat 'body.in-reference' k existujícímu 'body.in-reference-a-realizace'
     - Sekce 21: stejně přidat 'body.in-reference' k existujícímu 'body.in-reference-a-realizace'

   Co je nové ve verzi 1.17:
     - Sekce 21: galerie referencí — kurzor zůstane default (žádný klik), object-fit: contain (nezořezávat technické díly), tmavé pozadí mezi obrázky a borderem, lehčí hover lift bez scale

   Co bylo ve verzi 1.16:
     - Sekce 17.7: 'POKRAČOVAT' a 'ZPĚT' v košíku přesně sjednoceny do 44px (padding sladěn)
     - Sekce 17.7: 'OBJEDNAT s povinností platby' tlačítko (step 3 checkoutu) zmenšeno, 'ZPĚT' zvětšeno na stejnou velikost
     - Sekce 15: produktový detail — odstraněn bílý box za záložkou 'Popis', sladěn metadata blok (Kategorie / Tisk / Zeptat se / Sdílet) do tmavého panelu
     - Sekce 4: telefonní intl-tel-input widget — tmavé pozadí, světlý text
     - Sekce 10: checkbox labely v checkoutu ('Chci se registrovat', 'Zadat poznámku') — světlý text místo šedého

   Co bylo ve verzi 1.15:
     - Sekce 19: kicker .jkp-kicker uvnitř .jkp-block / .jkp-info-card › forcovaně zelený var(--g)
     - Sekce 19: kicker uvnitř hero .jkp-hero--text › forcovaně zelený
     - Sekce 8: tmavé pozadí pro 'Značky' filter box a 'Rozbalit filtr' tlačítko v e-shopu (Shoptet je přebíjel bílým)
     - Sekce 8 / Sekce 10: 'Kroky košíku' (1. Nákupní košík / 2. Doprava & platba / 3. Informace o vás) — tmavé pozadí na aktivním kroku místo bílého
     - Sekce 17.7: tlačítko 'Pokračovat ›' v košíku zmenšeno na stejnou velikost jako 'Zpět do obchodu' a sladěno barevně (zelená místo bílé)

   Co bylo ve verzi 1.14:
     - Sekce 4: globální tlačítka .jkp-btn (fungují všude, nejen na homepage)
     - Sekce 19: oprava — .jkp-info-grid přidána jako alias pro .jkp-grid--3, .jkp-info-card jako alias pro .jkp-block
     - Sekce 20: logo ticker zvětšen (~40 % vyšší řádek, 20 % širší loga), menší vertikální margins
     - Sekce 23: NOVÁ — výchozí stylování Shoptetových .pageArticleDetail stránek (Služby/Reference/Kontakty/jakákoli nová stránka)
                   › automatický kicker přes ::before, velký H1, čitelná typografie odstavců, lead-paragraph styling
                   › admin nemusí psát žádné HTML, default Shoptet struktura vypadá dobře

   Co bylo ve verzi 1.13 (sekce 18–22 — nové stránky):
     - Sekce 18: .jkp-hero--text (hero bez obrázku, použito na Služby/Reference/Kontakty)
     - Sekce 19: .jkp-grid--2 / .jkp-grid--3 modifikátory + .jkp-block komponenta
     - Sekce 20: .jkp-logo-ticker (auto-rotující galerie log na Titulce)
     - Sekce 21: .jkp-gallery (mřížka fotek na Reference)
     - Sekce 22: .jkp-cta (closing call-to-action strip) + .jkp-form + .jkp-footnote (Kontakty)

   Co bylo ve verzi 1.12 (sekce 24 — Mobile polish; dříve číslo 18):
     - Globální mobilní typografie (clamp + min font-size 14 px)
     - Hero na mobilu: kompaktní padding, menší blur (perf), neořezává
     - Header: logo + ikony zarovnané, vyšší tap targets
     - Produkty na výpisu: 2 sloupce do 575 px, 1 sloupec na velmi malých
     - Košík: tabulka se zalomí na karty (label + hodnota)
     - Řazení produktů: vodorovný scroll s snap (žádné kostrbaté wrapování)
     - „Zpět do obchodu“ + „Pokračovat“: full-width vedle sebe v jedné řadě
     - Tap targets ? 44 px (přístupnost / palec)

   Co bylo ve v1.11 (sekce 17):
     - Tlačítka „Zpět do obchodu“ v košíku (nahoře v aside i dole vedle
       Pokračovat) sjednocena — stejná velikost, jeden řádek, čistý vzhled
     - E-shop výpis: tlačítko „Otevřít/Zavřít filtr“ a řazení produktů
       (Nejlevnější / Nejdražší / Nejprodávanější / Abecedně) přestaly být
       bílé — tmavý panel se zeleným aktivním stavem (sekce 17.10)

   Co bylo ve v1.10:
     - Patička v1.9 ODSTRANĚNA (vrátíme se k ní později; necháváme jen
       sekci 11 = původní styl patičky)
     - Košík /kosik/ + checkout: tlačítko „Zpět do obchodu“ přitaženo
       k obsahu (úzký aside sidebar-left)
     - Bonusy box (.box.box-bg-default) a prázdný košík sjednoceny — žádný
       černo-šedý mix, jeden tmavý panel s jemným borderem

   Co bylo ve v1.9 (zachováno):
     - Hero mřížka „edge-to-edge“ (přes celou šířku obrazovky)
     - Větší hero h1 + odstavec + ještě větší CTA tlačítka
     - Silnější skrytí bloku „Top 10 produktů“ (vč. sidebar variant)

   Co bylo ve verzi 1.8:
     - Skrytí výchozího bloku "Top 10 produktů" na homepage (sekce 12)
     - Větší a výraznější hero tlačítka (více vizuální váhy) (sekce 12)
     - Add-to-cart hláška: odstraněn tmavý pruh za textem (sekce 9)

   Struktura:
     1. Proměnné a reset
     2. Globální typografie a layout
     3. Hlavička — barvy (layout necháváme na Shoptetu — flex/order rozbíjel „Více“)
     4. Formuláře a tlačítka
     5. Dialogy, popupy
     6. Sidebar a kategorie
     7. Cart count badge
     8. Filtry v kategoriích (+ kategorie boxy)
     9. Hlášky / notifikace
     10. Košík / checkout
     11. Patička
     12. Homepage — úpravy + JKPRINT hero (.jkp-hero)
     13. Mobilní úpravy (obsah)
     14. Mobilní menu — nativní Shoptet (body.navigation-window-visible)
     15. Produktový detail
     16. Plovoucí vrstvy (z-index)
     17. Homepage JKPRINT — hero edge, typografie, košík, e-shop (podsekce 17.x v souboru)
     18. .jkp-hero--text — hero bez obrázku (Služby / Reference / Kontakty)
     19. .jkp-block / .jkp-info-card + mřížky (--2 / --3 / .jkp-info-grid) + legacy .jkp-services-grid
     20. .jkp-logo-ticker — pás log (Titulka)
     21. .jkp-gallery — fotomřížka (Reference)
     22. .jkp-cta + .jkp-form + .jkp-footnote (Kontakty)
     23. Default article (.pageArticleDetail) — stránky z Shoptet adminu
     24. Mobilní polish (globální)

   Mobilní menu: Shoptet přidává body.navigation-window-visible při otevření #navigation.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700;800&family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --bg:    #131313;
  --p:     #101010;
  --b:     #1c1b1b;
  --b2:    #201f1f;
  --g:     #00ff41;
  --g2:    #00e639;
  --gr:    linear-gradient(135deg, #00e639, #00ff41);
  --dg:    #003907;
  --t:     #e5e2e1;
  --m:     #b9ccb2;
  --ln:    rgba(59, 75, 55, .35);
  --fd:    'Space Grotesk', sans-serif;
  --fb:    'Inter', sans-serif;
  --fm:    'JetBrains Mono', monospace;
  /* Mobilní drawer: overlay < panel < header (klikatelný hamburger). Desktop header nízký z-index. */
  --jkp-z-overlay:  10040;
  --jkp-z-navpanel: 10045;
  --jkp-z-messages: 100050;
}

/* box-sizing + hranatý vzhled; box-shadow NEglobálně — nebojuje s panely / focus */
*, *:before, *:after {
  box-sizing: border-box !important;
  border-radius: 0 !important;
}


/* ============================================================================
   2. GLOBÁLNÍ TYPOGRAFIE A LAYOUT
   ============================================================================ */

html, body,
.overall-wrapper, .content-wrapper, .content-wrapper-in,
.index-content-wrapper, .container, .container_resetted,
main, #content, #content-wrapper {
  background: var(--bg) !important;
  color: var(--t) !important;
  font-family: var(--fb) !important;
}

body {
  background-image:
    linear-gradient(to right,  rgba(59, 75, 55, .1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 75, 55, .1) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}

/* Proti horizontálnímu „posunu“ a ořezu kvůli 100vw / širokým řádkům */
html,
body {
  overflow-x: visible !important;
  max-width: 100% !important;
}

.overall-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

h1, h2, h3, h4, h5, .category-title, .h1 {
  font-family: var(--fd) !important;
  color: var(--t) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}

p, li, label, td, th {
  color: var(--t) !important;
}

a {
  color: var(--g2) !important;
  text-decoration: none !important;
}
a:hover {
  color: var(--g) !important;
}

small, .motto, .breadcrumbs, .availability, .flag {
  font-family: var(--fm) !important;
  color: var(--m) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}


/* ============================================================================
   3. HLAVIČKA — barvy (layout řeší Shoptet)
   ============================================================================ */

#header,
#header .navigation-wrapper {
  background: var(--bg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ln) !important;
  position: relative !important;
  /* Desktop: žádné „orbitální“ z-index — rozbíjelo dropdown „Více“ a stacking */
  z-index: 30 !important;
}

@media (max-width: 991px) {
  #header {
    z-index: 10050 !important;
  }
}

.site-name a,
.site-name .header__title {
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  color: var(--g) !important;
}

.site-name img {
  max-width: 210px !important;
  height: auto !important;
  object-fit: contain !important;
}

#header .menu-level-1 b {
  color: var(--t) !important;
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
#header .menu-level-1 .active > a b,
#header .menu-level-1 > li:hover > a b {
  color: var(--g) !important;
}

/* Dropdown / „Více“ — ať nestojí pod obsahem kvůli stacking context */
#header .menu-level-1 ul,
#header .submenu,
#header .navigation .menu-level-2,
#header #navigation .menu-level-2 {
  z-index: 50 !important;
}

/* Ikony vpravo: žádné „dlaždice“, stejné pozadí jako lišta (+ nezeleně z globálního pravidla a { … }) */
#header .navigation-buttons {
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px 10px !important;
}

#header .navigation-buttons > a.toggle-window,
#header .navigation-buttons > button.top-nav-button,
#header .navigation-buttons > a.cart-count {
  background: transparent !important;
  border-color: transparent !important;
  border-width: 0 !important;
  box-shadow: none !important;
}

#header .navigation-buttons a.toggle-window,
#header .navigation-buttons button.top-nav-button {
  color: var(--t) !important;
}

@media (hover: hover) {
  #header .navigation-buttons a.toggle-window:hover,
  #header .navigation-buttons button.top-nav-button:hover {
    color: var(--g) !important;
  }
}

#header .menu-helper {
  background: transparent !important;
  border-width: 0 !important;
  box-shadow: none !important;
  color: var(--t) !important;
}

@media (max-width: 991px) {
  /* Mobilní horní lišta (mobile-header-version-1 apod.) — ne bílá šablona */
  body[class*="mobile-header"] #header,
  body[class*="mobile-header"] #header .navigation-wrapper.container,
  body[class*="mobile-header"] #header .navigation-wrapper {
    background: var(--bg) !important;
    background-image: none !important;
  }

  body[class*="mobile-header"] #header .menu-helper {
    color: var(--t) !important;
  }
}


/* ============================================================================
   4. FORMULÁŘE A TLAČÍTKA
   ============================================================================ */

input, textarea, select, .form-control {
  background: var(--p) !important;
  color: var(--t) !important;
  border: 1px solid var(--ln) !important;
}
input::placeholder, textarea::placeholder {
  color: #74806f !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--g2) !important;
  outline: 0 !important;
}

.btn, a.btn, button, input[type=submit] {
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
}

.btn, a.btn {
  background: var(--b) !important;
  color: var(--t) !important;
  border: 1px solid var(--ln) !important;
}

button[type=submit], input[type=submit],
.btn-conversion, .btn-action,
.add-to-cart-button, .btn-login {
  background: var(--gr) !important;
  color: var(--dg) !important;
  border: 0 !important;
}

/* Globální JKPRINT CTA — <a> i <button> (nejen homepage) */
a.jkp-btn,
button.jkp-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 64px !important;
  padding: 0 36px !important;
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: clamp(0.85rem, 0.4vw + 0.78rem, 1rem) !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: filter 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

a.jkp-btn.jkp-btn-primary,
button.jkp-btn.jkp-btn-primary {
  background: var(--gr) !important;
  color: var(--dg) !important;
  border: 0 !important;
}

a.jkp-btn.jkp-btn-secondary,
button.jkp-btn.jkp-btn-secondary {
  border: 1px solid rgba(229, 226, 225, 0.45) !important;
  background: transparent !important;
  color: var(--t) !important;
}

@media (hover: hover) {
  a.jkp-btn.jkp-btn-primary:hover,
  button.jkp-btn.jkp-btn-primary:hover {
    filter: brightness(1.05) !important;
    color: var(--dg) !important;
  }

  a.jkp-btn.jkp-btn-secondary:hover,
  button.jkp-btn.jkp-btn-secondary:hover {
    border-color: var(--g) !important;
    color: var(--g) !important;
  }
}

@media (max-width: 991px) {
  a.jkp-btn.jkp-btn-primary,
  a.jkp-btn.jkp-btn-secondary,
  button.jkp-btn {
    min-height: 60px !important;
    padding: 0 28px !important;
  }
}

/* intl-tel-input — vlastní barvy pluginu mimo globální input {} */
.iti,
.iti__country-list,
.iti__selected-flag,
.iti__flag-container,
.iti__country,
.intl-tel-input,
.intl-tel-input .selected-flag,
.intl-tel-input .country-list {
  background: var(--p) !important;
  background-color: var(--p) !important;
  color: var(--t) !important;
  border-color: var(--ln) !important;
}

.iti__selected-flag,
.intl-tel-input .selected-flag {
  background: var(--b) !important;
}

.iti__selected-dial-code,
.intl-tel-input .selected-dial-code {
  color: var(--t) !important;
}

.iti__country-list,
.intl-tel-input .country-list {
  background: var(--p) !important;
  border: 1px solid var(--ln) !important;
  max-height: 220px !important;
}

.iti__country:hover,
.intl-tel-input .country:hover,
.iti__country.iti__highlight,
.intl-tel-input .country.highlight {
  background: var(--b2) !important;
}

.iti__country-name,
.intl-tel-input .country-name {
  color: var(--t) !important;
}

.iti__dial-code,
.intl-tel-input .dial-code {
  color: var(--m) !important;
}


/* ============================================================================
   5. DIALOGY, POPUPY
   ============================================================================ */

.dialog, .dialog__close, .dialog__wrapper, .dialog__content,
.dialog__header, .dialog__body,
#login, #customerLogin,
.content-window, .content-window-in, .content-window .container,
.search-window, .cart-window,
.search, .place-cart-here {
  background: var(--p) !important;
  color: var(--t) !important;
}

.dialog__heading,
.content-window h2, .content-window h3,
.search h2, .search h3 {
  color: var(--t) !important;
  opacity: 1 !important;
}

.toggle-window-arr,
.dialog__close button {
  background: var(--b) !important;
  color: var(--t) !important;
  border: 1px solid var(--ln) !important;
}

/* „Zpět“ v košíku / checkoutu — šířka podle textu, ne celá řádka (mobil) */
@media (max-width: 991px) {
  .cart-window .toggle-window-arr,
  .cart-window-in > .toggle-window-arr,
  .content-window.cart-window > .content-window-in > .toggle-window-arr,
  .shopping-cart a.toggle-window-arr,
  .shopping-cart button.toggle-window-arr,
  .ordering-process a.toggle-window-arr,
  .ordering-process button.toggle-window-arr,
  .ordering-process__inner a.toggle-window-arr,
  .ordering-process__inner button.toggle-window-arr,
  .cart-navigation a.toggle-window-arr,
  .cart-navigation button.toggle-window-arr {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
  }

  .backward,
  .backward-buttons,
  .cart-navigation,
  .ordering-process__backward,
  div[class*="backward"]:not(.no-backward) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Odkazové „Zpět“ zůstane v akcentové zelené (ne unifikace na --t) */
  .cart-window a.toggle-window-arr,
  .shopping-cart a.toggle-window-arr,
  .ordering-process a.toggle-window-arr {
    color: var(--g2) !important;
  }
}


/* ============================================================================
   6. SIDEBAR A KATEGORIE
   ============================================================================ */

.sidebar, .box, .box-content,
.box-categories, .navigation-categories, .navigation-tree,
.products-block, .product, .product-inner,
.user-block, .signpost {
  background: var(--b) !important;
  color: var(--t) !important;
  border-color: var(--ln) !important;
}

.sidebar a, .box a, .navigation-categories a {
  color: var(--g) !important;
  background: transparent !important;
}


/* ============================================================================
   7. CART COUNT BADGE
   ============================================================================ */

.cart-count {
  background: transparent !important;
  position: relative !important;
}

.cart-count i,
[data-testid=headerCartCount] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  background: var(--g) !important;
  color: var(--dg) !important;
  font: 700 11px/1 var(--fm) !important;
  font-style: normal !important;
  border: 0 !important;
}


/* ============================================================================
   8. FILTRY A KATEGORIE (boxy)
   ============================================================================ */

[class*=parameter],
.priceSliderRange, .price-slider,
.tag-cloud, .tagCloud,
.filter-by-name, .selectedParameters,
.advanced-filter {
  background: var(--b) !important;
  color: var(--t) !important;
  border-color: var(--ln) !important;
}

#category-detail .filters,
#category-detail .filters .box,
[class*="filters"] .box-content,
.filter-parameters,
.parameter-box {
  background: var(--b) !important;
  color: var(--t) !important;
  border-color: var(--ln) !important;
}

#category-detail .filters a,
[class*="advanced-filter"] a,
.parameter-box a:not(.btn) {
  color: var(--g2) !important;
}
#category-detail .filters a:hover,
[class*="advanced-filter"] a:hover,
.parameter-box a:hover:not(.btn) {
  color: var(--g) !important;
}

/* Boční panel kategorie (Step / jiné obaly) + popisky */
#category-left,
#sidebar,
aside.sidebar,
.advanced-filters-holder,
.sidebar-wrapper,
.sidebar-in,
.filters-advanced,
.category-bg {
  background: var(--b) !important;
  color: var(--t) !important;
}

#category-left .box-title,
#sidebar .box-title,
.filters h2,
.filters h3,
.sidebar h2,
.sidebar h3 {
  color: var(--t) !important;
  background: transparent !important;
}

body:not(.in-index) .sidebar .btn,
body:not(.in-index) #category-left .btn,
body:not(.in-index) .filters .btn,
body:not(.in-index) .advanced-filters .btn,
body:not(.in-index) button[class*="Filter"],
body:not(.in-index) button[class*="filter"] {
  background: var(--b2) !important;
  color: var(--g) !important;
  border: 1px solid var(--ln) !important;
}

/* Rozbalit filtr / výchozí bílá tlačítka Shoptetu v levém sloupci */
body:not(.in-index) #category-left .btn-default,
body:not(.in-index) #category-left button.btn-default,
body:not(.in-index) .sidebar .btn-default,
body:not(.in-index) .sidebar button.btn-default,
body:not(.in-index) .filters .btn-default,
body:not(.in-index) .filters-holder .btn-default,
body:not(.in-index) .advanced-filters .btn-default,
body:not(.in-index) .advanced-filters-holder .btn-default,
body:not(.in-index) .sidebar .btn-secondary,
body:not(.in-index) #category-left .btn-secondary {
  background: var(--b2) !important;
  background-image: none !important;
  color: var(--g) !important;
  border: 1px solid var(--ln) !important;
}

@media (hover: hover) {
  body:not(.in-index) #category-left .btn-default:hover,
  body:not(.in-index) .sidebar .btn-default:hover,
  body:not(.in-index) .filters .btn-default:hover {
    color: var(--t) !important;
    border-color: var(--g2) !important;
  }
}

/* v1.15: panel „Značky“, rozbalení filtru, obsah boxu — proti bílé výchozí šabloně */
body:not(.in-index) .filter-block,
body:not(.in-index) .filter-content,
body:not(.in-index) .filters .filter-block,
body:not(.in-index) [class*="filter"] .filter-block,
body:not(.in-index) .filters-holder .filter-block,
body:not(.in-index) #category-left .filter-block,
body:not(.in-index) #category-left .filters-content,
body:not(.in-index) #category-left [class*="filterPanel"],
body:not(.in-index) .advanced-filters-holder .filter-block,
body:not(.in-index) .box.box-filters .filter-content {
  background: var(--b) !important;
  background-color: var(--b) !important;
  background-image: none !important;
  color: var(--t) !important;
  border-color: var(--ln) !important;
}

body:not(.in-index) .filter-name,
body:not(.in-index) .filter-block .filter-name,
body:not(.in-index) .parameter-box .filter-name,
body:not(.in-index) .filter-block h3,
body:not(.in-index) .filter-block .h4 {
  background: transparent !important;
  color: var(--t) !important;
}

body:not(.in-index) .filter-block label,
body:not(.in-index) .filter-block .filter-row,
body:not(.in-index) .filter-block li {
  background: transparent !important;
  color: var(--t) !important;
}

body:not(.in-index) .filter-block input[type="checkbox"] + label,
body:not(.in-index) .filter-block input[type="radio"] + label {
  background: transparent !important;
  color: var(--t) !important;
}

body:not(.in-index) .filter-block .filter-count,
body:not(.in-index) .filter-block .items-count,
body:not(.in-index) .selectedParameters,
body:not(.in-index) .filter-display-count {
  background: transparent !important;
  color: var(--m) !important;
}

/* Řazení — Shoptet 12 používá .shp-tabs / .shp-tab-link i mimo products-header-navigation */
body:not(.in-index) .products-header-navigation .responsive-nav .shp-tabs .shp-tab-link,
body:not(.in-index) .products-header-navigation .responsive-nav .shp-tabs a,
body:not(.in-index) .products-header-navigation .responsive-nav li a,
body:not(.in-index) .products .products-header-navigation .shp-tab-link,
body:not(.in-index) #category-detail .responsive-nav .shp-tab-link,
body:not(.in-index) [class*="products-header"] .responsive-nav a,
body:not(.in-index) ul.shp-tabs .shp-tab-link,
body:not(.in-index) ul.shp-tabs a,
body:not(.in-index) .shp-tabs-row .shp-tab-link,
body:not(.in-index) .shp-tabs-row a,
body:not(.in-index) .shp-tabs-holder .shp-tab-link,
body:not(.in-index) .shp-tabs-wrapper .shp-tab-link,
body:not(.in-index) #content .shp-tabs .shp-tab-link,
body:not(.in-index) #content .shp-tabs a {
  background: var(--b) !important;
  background-color: var(--b) !important;
  background-image: none !important;
  color: var(--t) !important;
  border: 1px solid var(--ln) !important;
}

body:not(.in-index) .products-header-navigation .responsive-nav .shp-tab.active .shp-tab-link,
body:not(.in-index) .products-header-navigation .responsive-nav .shp-tab.active a,
body:not(.in-index) #category-detail .responsive-nav .shp-tab.active .shp-tab-link,
body:not(.in-index) ul.shp-tabs li.active .shp-tab-link,
body:not(.in-index) ul.shp-tabs li.active a,
body:not(.in-index) .shp-tabs li.active .shp-tab-link {
  background: var(--g) !important;
  background-color: var(--g) !important;
  background-image: none !important;
  color: var(--dg) !important;
  border-color: transparent !important;
}

/* Příznaky / štítky u produktů v výpisu */
body:not(.in-index) .products .flag,
body:not(.in-index) .product .flags .flag,
body:not(.in-index) .product .flags span,
body:not(.in-index) .smart-label,
body:not(.in-index) .product-labels .label,
body:not(.in-index) [class*="productLabel"] {
  background: var(--b2) !important;
  color: var(--t) !important;
  border: 1px solid var(--ln) !important;
}

/* Zelenkavé „záře“ za náhledy místo ostrého bílého čtverce */
body:not(.in-index) .products .products .product .image,
body:not(.in-index) .products .products .product .image-wrapper,
body:not(.in-index) .products .products .product .thumbnail,
body:not(.in-index) .products .products .product a.image,
body:not(.in-index) .products-block .product .image,
body:not(.in-index) .products-block .product .image-wrapper,
body:not(.in-index) .products-block .product .thumbnail,
body:not(.in-index) #products .product .image-wrapper,
body:not(.in-index) #products .product .image {
  background-color: #121814 !important;
  background-image:
    radial-gradient(ellipse 120% 110% at 50% 45%, rgba(0, 255, 65, 0.16) 0%, rgba(0, 255, 65, 0.06) 45%, transparent 74%),
    radial-gradient(ellipse 90% 80% at 50% 52%, rgba(0, 255, 65, 0.12) 0%, transparent 65%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

/* Mřížka / karty produktů (spodní řádek často zůstal bílý z šablony) */
body:not(.in-index) #productsListing .products .product,
body:not(.in-index) #products .products .product,
body:not(.in-index) #category-detail .products .product,
body:not(.in-index) main .products.products .product,
body:not(.in-index) #content .products .product,
body:not(.in-index) .products-list .product-item,
body:not(.in-index) .products-listings .products .product,
body:not(.in-index) #content article.product {
  background: var(--b) !important;
  background-color: var(--b) !important;
  background-image: none !important;
  color: var(--t) !important;
}

body:not(.in-index) .products .products .product a,
body:not(.in-index) #productsListing .products .product a:not(.jkp-btn) {
  background: transparent !important;
}

body:not(.in-index) #category-detail .products .product-inner,
body:not(.in-index) #productsListing .products .product-inner,
body:not(.in-index) .products .products .product-inner {
  background: transparent !important;
}

body:not(.in-index) .products .products .product .descr,
body:not(.in-index) .products .products .product .description-part,
body:not(.in-index) .products .products .product .p-in {
  background: transparent !important;
  color: var(--t) !important;
}

body:not(.in-index) .products .products .product .availability,
body:not(.in-index) .products .products .product .price-final {
  color: var(--t) !important;
}

body:not(.in-index) .products .products .product .products__code,
body:not(.in-index) .products .products .product span[class*="code"] {
  color: var(--m) !important;
}

.ui-slider, .ui-slider-horizontal {
  background: var(--p) !important;
  border: 0 !important;
  height: 4px !important;
}
.ui-slider .ui-slider-range {
  background: var(--g2) !important;
}
.ui-slider .ui-slider-handle {
  background: var(--g) !important;
  border: 0 !important;
  width: 14px !important;
  height: 14px !important;
  top: -5px !important;
}

/* v1.24: skrýt „Nejprodávanější“ — duplikuje hlavní mřížku na výpisu */
body:not(.in-index) .products-top-wrapper,
body:not(.in-index) #productsTop.products-top,
body:not(.in-index) .products-top-header,
body:not(.in-index) #productsTopHeading {
  display: none !important;
}


/* ============================================================================
   9. HLÁŠKY / NOTIFIKACE
   ============================================================================ */

/* Kontejner — vycentrování bloku hlášky */
.messages {
  background: transparent !important;
  padding: 12px 16px !important;
  text-align: center !important;
  display: block !important;
}

.message,
.messages > div,
.shoptet-message,
.shoptet-message-success,
.success-message,
.notification-window,
.toast,
.flash,
.alert,
.messages .notification,
.ajax-message-inner {
  /* Jednotné panelové šedé (#1c1b1b), ne mix s --p / --b2 */
  background: var(--b) !important;
  background-color: var(--b) !important;
  background-image: none !important;
  color: var(--t) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ln) !important;
  font-family: var(--fm) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: 14px 28px !important;
  position: relative !important;
  z-index: var(--jkp-z-messages) !important;
  width: auto !important;
  max-width: min(720px, 92vw) !important;
  margin: 12px auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  text-align: center !important;
  box-shadow: none !important;
}

.message strong, .shoptet-message strong,
.messages strong {
  color: var(--g) !important;
}

/* v1.8: Sjednotit pozadí — vnitřní prvky nesmí mít vlastní bg (tmavý pruh za textem) */
.message > *,
.shoptet-message > *,
.notification-window > *,
.ajax-message-inner > *,
.messages > div > *,
.message p, .message span, .message div,
.shoptet-message p, .shoptet-message span, .shoptet-message div {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.message a,
.shoptet-message a,
.notification-window a {
  color: var(--g) !important;
  text-decoration: underline !important;
  background: transparent !important;
}


/* ============================================================================
   10. KOŠÍK / CHECKOUT
   ============================================================================ */

[class*=shipping], [class*=payment],
[class*=cart-step], [class*=cart-progress], [class*=cart-process],
[class*=cart-summary], [class*=cart-table], [class*=cart-item], [class*=cart-row],
[class*=order-progress], [class*=option-list], [class*=process-step],
[class*=shopping-cart], [class*=checkout-step], [class*=recapitulation],
.shoppingCart-process, .steps, .steps li {
  background: var(--b) !important;
  color: var(--t) !important;
  border-color: var(--ln) !important;
}

[class*=cart-table] td,
[class*=shipping] *,
[class*=payment] *,
[class*=cart-step] * {
  background: transparent !important;
}

[class*=cart-step].active,
[class*=cart-step].selected,
.steps li.active,
.process-step.active,
.cart-progress .active,
.shopping-cart-process .active,
.order-progress li.active {
  background: var(--gr) !important;
  color: var(--dg) !important;
}

[class*=shipping-list__item].active,
[class*=payment-list__item].active,
[class*=shipping-billing-list__item].active {
  background: var(--b2) !important;
  color: var(--g) !important;
}

.cart-table .product-name a,
[class*=cart-item] .product-name a,
[class*=cart-row]  .product-name a {
  color: var(--g) !important;
  background: transparent !important;
}

.amount, .product-amount, .product-amount button,
.amount-input, .quantity-input,
.amount-button, .amount-decrease, .amount-increase,
.increase, .decrease,
button.minus, button.plus,
.cart-item__amount-button {
  background: var(--b) !important;
  color: var(--g) !important;
  border: 1px solid var(--ln) !important;
}

.amount input, .product-amount input, .quantity-input input {
  background: var(--p) !important;
  color: var(--t) !important;
  border-color: var(--ln) !important;
  font-weight: 700 !important;
}

.ordering-process,
.shopping-cart,
.shopping-cart-in,
.cart-content,
.cart-wrapper,
#cart-wrapper,
.ordering-process__content,
.ordering-process__inner {
  background: var(--bg) !important;
  color: var(--t) !important;
}

.cart-table,
.cart-table th,
.cart-table td,
.ordering-process .box,
.ordering-process .box-content,
.ordering-process fieldset,
.ordering-process .radiolist,
.ordering-process .radiolist label,
.ordering-process .checkbox,
.ordering-process .checkbox label {
  background: var(--b) !important;
  color: var(--t) !important;
  border-color: var(--ln) !important;
}

.cart-navigation .btn,
.ordering-process .btn,
.shopping-cart .btn,
.ordering-process a.btn,
.ordering-process button.btn {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 18px !important;
  line-height: 1.15 !important;
  box-sizing: border-box !important;
}

/* Kroky checkoutu (Šablona často přidělává bílý blok) */
.ordering-process-steps,
.ordering-process-steps li,
.ordering-process .ordering-process-steps ul,
.ordering-process .ordering-process-steps li,
.ordering-process ul.steps:not(.homepage-tabs):not(#homepage-tabs),
.ordering-process ul.steps:not(.homepage-tabs):not(#homepage-tabs) li,
.order-progress__steps li,
.steps-horizontal li,
.steps-row li,
.cart-progress-steps li {
  background: var(--b) !important;
  background-color: var(--b) !important;
  background-image: none !important;
  color: var(--t) !important;
  border-color: var(--ln) !important;
}

.ordering-process ul.steps:not(.homepage-tabs):not(#homepage-tabs) li:not(.active):not(.current),
.order-progress__steps li:not(.active):not(.current):not(.is-active) {
  color: var(--m) !important;
}

/* v1.15: horní řada kroků košíku (Shoptet často nechá aktivní krok bílý) */
body.in-kosik .ordering-process-steps li,
body.ordering-process .ordering-process-steps li,
body.in-kosik ul.steps li,
body.ordering-process ul.steps li,
body.in-kosik .steps-horizontal li,
body.ordering-process .steps-horizontal li,
body.in-kosik .order-progress li,
body.ordering-process .order-progress li {
  background: var(--b) !important;
  background-color: var(--b) !important;
  background-image: none !important;
  color: var(--t) !important;
  border-color: var(--ln) !important;
}

body.in-kosik .ordering-process-steps li.active,
body.in-kosik .ordering-process-steps li.current,
body.in-kosik .ordering-process-steps li.is-active,
body.ordering-process .ordering-process-steps li.active,
body.in-kosik ul.steps li.active,
body.ordering-process ul.steps li.active,
body.in-kosik .order-progress li.active,
body.in-kosik .order-progress li.current {
  background: var(--gr) !important;
  background-image: linear-gradient(135deg, #00e639, #00ff41) !important;
  color: var(--dg) !important;
  border-color: transparent !important;
}

/* v1.26: ol.cart-header — jen layout řady, barvy nechává Shoptet */
ol.cart-header {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
}

ol.cart-header > li.step {
  flex: 1 1 0 !important;
  margin: 0 !important;
}

@media (max-width: 575px) {
  ol.cart-header {
    gap: 5px !important;
  }
}

/* v1.16: checkout — labely u checkboxů (registrace, poznámka) čitelnější */
body.ordering-process .checkbox,
body.ordering-process .checkbox label,
body.ordering-process .form-group.consents,
body.ordering-process .form-group.consents label,
body.ordering-process label[for*="register"],
body.ordering-process label[for*="note"],
body.ordering-process label.checkbox-label,
body.ordering-process .extension-notice label {
  color: var(--t) !important;
  font-family: var(--fb) !important;
}

body.ordering-process .checkbox label a,
body.ordering-process .form-group label a {
  color: var(--g2) !important;
}


/* ============================================================================
   11. PATIČKA
   ============================================================================ */

#footer, .footer, .footer-bottom,
.copyright, #signature {
  background: var(--p) !important;
  color: var(--m) !important;
  border-top: 1px solid var(--ln) !important;
  font-family: var(--fm) !important;
  font-size: .68rem !important;
  text-transform: uppercase !important;
}


/* ============================================================================
   12. HOMEPAGE — skrýt default Shoptet + JKPRINT hero (2 sloupce / referenční vzhled)
   ============================================================================ */

body.in-index .banners-row,
body.in-index .container--bannersBenefit,
body.in-index .homepage-tabs-wrapper,
body.in-index .welcome .h1 {
  display: none !important;
}

/* v1.8: Skrýt default "Top 10 produktů" / Bestseller blok na homepage.
   Pozn: lepší je vypnout to v Shoptet adminu (Vzhled a obsah › Prvky),
   ale CSS hide tu je jako pojistka. Pokud po nasazení zůstane, F12 › Inspect
   "Top 10 produktů" › doplnit přesný selektor. */
body.in-index #topProducts,
body.in-index .topProducts,
body.in-index .top-products,
body.in-index .top10,
body.in-index #top10,
body.in-index [id*="top10"],
body.in-index [class*="top-10"],
body.in-index [class*="topProducts"],
body.in-index .bestsellers,
body.in-index .products-block.bestsellers,
body.in-index .products-block.top,
body.in-index aside .products-block,
body.in-index .right-sidebar,
body.in-index .col-sidebar {
  display: none !important;
}

body.in-index #content-wrapper,
body.in-index .content-wrapper-in,
body.in-index .index-content-wrapper,
body.in-index .welcome-wrapper,
body.in-index .welcome {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  background: transparent !important;
  overflow-x: visible !important;
}

/* --- Hero: text vlevo, obrázek vpravo (.jkp-hero-copy + .jkp-visual v HTML šabloně) --- */
body.in-index .homepage-texts-wrapper,
body.in-index .welcome-wrapper {
  max-width: min(1560px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: max(16px, env(safe-area-inset-left)) !important;
  padding-right: max(16px, env(safe-area-inset-right)) !important;
}

body.in-index .jkp-hero {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: clamp(16px, 2.8vw, 36px) 0 clamp(28px, 4vw, 56px) !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.28fr) !important;
  align-items: center !important;
  column-gap: clamp(28px, 5vw, 80px) !important;
  row-gap: clamp(20px, 3vw, 36px) !important;
  padding: clamp(22px, 3.5vw, 52px) !important;
  isolation: isolate !important;
  border: 1px solid rgba(59, 75, 55, 0.22) !important;
  min-height: min(72vh, 720px) !important;
  /* Mřížka přes celou hero */
  background-color: rgba(19, 19, 19, 0.45) !important;
  background-image:
    linear-gradient(to right, rgba(59, 75, 55, 0.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 75, 55, 0.13) 1px, transparent 1px) !important;
  background-size: 26px 26px !important;
}

body.in-index .jkp-hero > .jkp-hero-copy,
body.in-index .jkp-hero > div:first-of-type:not(.jkp-visual) {
  min-width: 0 !important;
}

body.in-index .jkp-visual {
  min-width: 0 !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  position: relative !important;
  padding: clamp(12px, 2.5vw, 36px) !important;
  overflow: visible !important;
  /* Jemná mřížka v pravém panelu — hlavní „mlha“ je níže přes ::before + blur */
  background-image:
    linear-gradient(to right, rgba(59, 75, 55, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 75, 55, 0.1) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  background-repeat: repeat, repeat !important;
}

body.in-index .jkp-visual::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: auto !important;
  left: -12% !important;
  right: -18% !important;
  top: -22% !important;
  bottom: -28% !important;
  pointer-events: none !important;
  background: radial-gradient(
    ellipse 100% 90% at 52% 50%,
    rgba(0, 255, 65, 0.55) 0%,
    rgba(0, 255, 65, 0.22) 28%,
    rgba(0, 255, 65, 0.07) 50%,
    rgba(0, 255, 65, 0.02) 65%,
    transparent 76%
  ) !important;
  filter: blur(52px) !important;
  opacity: 0.88 !important;
  transform: translateZ(0) !important;
}

body.in-index .jkp-visual img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 2 !important;
  transform: scale(1.04) !important;
  transform-origin: center center !important;
}

body.in-index .jkp-hero .jkp-kicker {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  margin: 0 0 18px !important;
  font-family: var(--fm) !important;
  font-size: clamp(10px, 0.85vw + 8px, 12px) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: var(--g) !important;
  color: var(--dg) !important;
}

body.in-index .jkp-hero h1 {
  margin: 0 0 18px !important;
  font-size: clamp(2rem, 3.8vw + 1.05rem, 3.85rem) !important;
  line-height: 1.04 !important;
  font-family: var(--fd) !important;
  letter-spacing: -0.038em !important;
}

body.in-index .jkp-hero h1 span {
  color: var(--g) !important;
}

body.in-index .jkp-hero h1 span.jkp-plain {
  color: var(--t) !important;
}

body.in-index .jkp-hero h1 span.jkp-accent {
  color: var(--g) !important;
}

body.in-index .jkp-hero > .jkp-hero-copy > p,
body.in-index .jkp-hero > div:first-of-type:not(.jkp-visual) > p {
  margin: 0 0 26px !important;
  font-size: clamp(1.05rem, 0.85vw + 0.92rem, 1.28rem) !important;
  line-height: 1.58 !important;
  max-width: 38em !important;
  color: var(--m) !important;
}

body.in-index .jkp-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px 18px !important;                                        /* v1.8: bylo 12px 14px */
  margin-top: clamp(18px, 2vw, 28px) !important;                    /* v1.8: explicitní margin nad tlačítky */
}

@media (max-width: 991px) {
  body.in-index .jkp-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: 16px !important;
    min-height: 0 !important;
  }

  body.in-index .jkp-visual {
    justify-self: stretch !important;
    max-width: none !important;
    order: 2 !important;
  }

  body.in-index .jkp-visual::before {
    filter: blur(36px) !important;
    opacity: 0.72 !important;
    left: -8% !important;
    right: -12% !important;
    top: -15% !important;
    bottom: -18% !important;
  }

  body.in-index .jkp-visual img {
    transform: none !important;
  }

  body.in-index .jkp-hero > .jkp-hero-copy,
  body.in-index .jkp-hero > div:first-of-type:not(.jkp-visual) {
    order: 1 !important;
  }

  body.in-index .jkp-hero > .jkp-hero-copy > p,
  body.in-index .jkp-hero > div:first-of-type:not(.jkp-visual) > p {
    max-width: none !important;
  }
}

body.in-index .jkp-services {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: min(1560px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: max(16px, env(safe-area-inset-left)) !important;
  padding-right: max(16px, env(safe-area-inset-right)) !important;
  overflow-x: visible !important;
}


/* ============================================================================
   13. MOBILNÍ ÚPRAVY — obsah (bez overflow-x na #content = méně konfliktů s menu)
   ============================================================================ */

@media (max-width: 991px) {
  body:not(.in-index) #content-wrapper,
  body:not(.in-index) .content-wrapper-in,
  body:not(.in-index) .container {
    padding: 24px 16px 0 !important;
    max-width: 100% !important;
  }

  h1, .h1, .category-title, .heading {
    font-size: 28px !important;
    line-height: 1.05 !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    margin: 0 0 12px !important;
  }

  .breadcrumbs {
    font-size: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 10px !important;
  }

  img, table {
    max-width: 100% !important;
    height: auto !important;
  }
}


/* ============================================================================
   14. MOBILNÍ MENU — NATIVNÍ SHOPTET (body.navigation-window-visible)
   ============================================================================ */

@media (max-width: 991px) {
  /* Shoptet toggles body.navigation-window-visible natively */
  body.navigation-window-visible {
    overflow: hidden !important;
  }

  /* Overlay */
  body.navigation-window-visible::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.62) !important;
    z-index: 10040 !important;
  }

  /* The nav drawer */
  #header nav#navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(340px, 92vw) !important;
    height: 100dvh !important;
    background: var(--p) !important;
    border-right: 1px solid var(--ln) !important;
    box-shadow: 8px 0 36px rgba(0, 0, 0, 0.45) !important;
    overflow-y: auto !important;
    transform: translateX(-108%) !important;
    transition: transform 0.28s ease !important;
    z-index: 10045 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.navigation-window-visible #header nav#navigation {
    transform: translateX(0) !important;
  }

  #header nav#navigation .navigation-in {
    background: transparent !important;
    padding: 60px 16px 28px !important;
  }

  #header nav#navigation a {
    color: var(--t) !important;
  }

  #header nav#navigation .menu-level-1 > li > a:hover,
  #header nav#navigation .menu-level-1 .active > a {
    color: var(--g) !important;
  }

  #header nav#navigation .menu-level-1 b {
    color: inherit !important;
  }

  #header nav#navigation .menu-level-2 {
    background: var(--b) !important;
    border: 1px solid var(--ln) !important;
  }

  #header nav#navigation .menu-level-2 a {
    color: var(--m) !important;
  }

  #header nav#navigation .navigationActions {
    border-top: 1px solid var(--ln) !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
  }

  #header nav#navigation .navigationActions a {
    color: var(--g) !important;
  }

  /* Close X (Shoptet's .navigation-close) — style it visible top-right */
  #header nav#navigation .navigation-close {
    display: block !important;
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    cursor: pointer !important;
  }

  #header nav#navigation .navigation-close::before,
  #header nav#navigation .navigation-close::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 22px !important;
    height: 2px !important;
    background: var(--t) !important;
  }

  #header nav#navigation .navigation-close::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  #header nav#navigation .navigation-close::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }

  /* Hide the duplicate .menu-helper ("Více" dropdown) on mobile */
  #header .menu-helper {
    display: none !important;
  }
}


/* ============================================================================
   15. PRODUKTOVÝ DETAIL (.jkp-hero nedotčeno — jen výřez produktu)
   ============================================================================ */

.product-detail .p-image,
.product-detail .p-image a,
.product-detail .images,
.product-detail .images-wrapper,
.product-detail .product-images,
.product-detail [class*="gallery"],
.product-detail .splide__slide,
.product-detail .splide__track {
  background: transparent !important;
}

.product-detail .dklabAxDetailParameters a,
.product-detail .dklabAxDetailParameters button,
.product-detail .product-detail-parameters a,
.product-detail .toolbar a,
.product-detail [class*="action"] a {
  color: var(--g2) !important;
  background: transparent !important;
}
.product-detail .dklabAxDetailParameters a:hover,
.product-detail .product-detail-parameters a:hover,
.product-detail .toolbar a:hover {
  color: var(--g) !important;
}

.product-detail .nav-tabs,
.product-detail ul.tabs {
  background: var(--p) !important;
  border-color: var(--ln) !important;
}

.product-detail .nav-tabs > li > a,
.product-detail ul.tabs > li > a {
  background: var(--b) !important;
  color: var(--t) !important;
  border-color: var(--ln) !important;
}

.product-detail .nav-tabs > li.active > a,
.product-detail ul.tabs > li.active > a {
  background: var(--gr) !important;
  color: var(--dg) !important;
}

.product-detail .tab-content,
.product-detail .tabs-pane {
  background: var(--b) !important;
  color: var(--t) !important;
}

/* v1.23: tabs_responsive — žádné skákání výšky při přepnutí Popis / Diskuze */
.product-detail .tab-content,
.product-detail #tab-content,
.product-detail .products-tabs-content {
  min-height: 0 !important;
  overflow: visible !important;
  position: static !important;
}

.product-detail .tab-pane:not(.active) {
  display: none !important;
}

.product-detail .tab-pane.active {
  display: block !important;
  position: static !important;
}

/* v1.16: záložky Popis / Diskuze — bez bílého pozadí za řádkem tabů */
.product-detail .products-tabs,
.product-detail .products-tabs-tabs,
.product-detail .tabs-list,
.product-detail ul.tabs,
.product-detail .ui-tabs-nav,
.product-detail [class*="tabs-nav"],
.product-detail [class*="tabsList"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--ln) !important;
}

.product-detail .products-tabs li,
.product-detail .products-tabs-tabs li,
.product-detail .tabs-list li,
.product-detail ul.tabs li,
.product-detail .ui-tabs-nav li,
.product-detail [class*="tabs-nav"] li {
  background: transparent !important;
  background-color: transparent !important;
}

.product-detail .products-tabs li a,
.product-detail .products-tabs-tabs li a,
.product-detail .tabs-list li a,
.product-detail ul.tabs li a,
.product-detail .ui-tabs-nav li a {
  background: var(--b) !important;
  background-color: var(--b) !important;
  background-image: none !important;
  color: var(--t) !important;
  border: 1px solid var(--ln) !important;
}

.product-detail .products-tabs li.active a,
.product-detail .products-tabs-tabs li.active a,
.product-detail ul.tabs li.active a,
.product-detail .ui-tabs-nav li.ui-tabs-active a {
  background: var(--gr) !important;
  background-image: linear-gradient(135deg, #00e639, #00ff41) !important;
  color: var(--dg) !important;
  border-color: transparent !important;
}

/* Metadata: Kategorie / Tisk / Zeptat se / Sdílet */
.product-detail .product-actions,
.product-detail .product-actions-wrapper,
.product-detail .toolbar,
.product-detail .product-meta,
.product-detail .product-share,
.product-detail .share-and-print,
.product-detail [class*="productInfo"] .actions,
.product-detail .product-detail-share,
.product-detail .product-info-extra {
  background: var(--b) !important;
  background-color: var(--b) !important;
  background-image: none !important;
  border: 1px solid var(--ln) !important;
  color: var(--t) !important;
  padding: 14px 18px !important;
  margin-top: 16px !important;
}

.product-detail .product-actions a,
.product-detail .toolbar a,
.product-detail [class*="productInfo"] .actions a {
  color: var(--g2) !important;
  background: transparent !important;
}

.product-detail .product-actions a:hover,
.product-detail .toolbar a:hover {
  color: var(--g) !important;
}

.product-detail [class*="category-label"],
.product-detail .product-category-label,
.product-detail [itemprop="category"] {
  color: var(--m) !important;
  background: transparent !important;
}

/* Mobil: Popis / Diskuze nesmí „plavat“ s vlastní levou vidlicí kvůli paddingům řádku */
@media (max-width: 991px) {
  .product-detail .tabs-wrapper,
  .product-detail .shp-tabs-wrapper,
  .product-detail .products-detail-tabs.wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .product-detail ul.nav-tabs,
  .product-detail ul.nav-tabs.products-tabs-tabs,
  .product-detail ul.tabs.products-tabs-tabs,
  .product-detail .nav-tabs {
    display: flex !important;
    flex-flow: row nowrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: stretch !important;
    box-sizing: border-box !important;
  }

  .product-detail ul.nav-tabs > li,
  .product-detail ul.tabs.products-tabs-tabs > li {
    flex: 1 1 0 !important;
    margin: 0 !important;
    float: none !important;
  }

  .product-detail ul.nav-tabs > li > a,
  .product-detail ul.tabs.products-tabs-tabs > li > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 8px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .product-detail .tab-content:not(.homepage-tabs-wrapper),
  .product-detail .tabs-pane,
  .product-detail #tab-content .tab-pane,
  .product-detail .products-tabs-content .tab-pane {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 14px 0 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Text popisu dorovnat záložky (bez vnitřního odsazení šablony) */
  .product-detail .wysiwyg,
  .product-detail #description,
  .product-detail .discussion,
  .product-detail .discussion-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body:not(.in-index) #content-wrapper .product-detail .tab-pane p,
  body:not(.in-index) #content-wrapper .product-detail .tab-pane ul {
    max-width: 100% !important;
  }
}

/* v1.22: štítek „Kód“ + Shoptet .shp-tabs (Popis) na mobilu */
.product-detail .product-code,
.product-detail [class*="product-code"],
.product-detail .code,
.product-detail .row-header-label,
.product-detail span.row-header-label {
  color: var(--t) !important;
  background: transparent !important;
}

.product-detail .row-header-label strong,
.product-detail .product-code strong {
  color: var(--g) !important;
}

@media (max-width: 991px) {
  .product-detail .shp-tabs,
  .product-detail .shp-tabs-row,
  .product-detail ul.shp-tabs {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .product-detail .shp-tab-link {
    padding: 12px 18px !important;
  }
}

/* Benefit lišta pod produktem — ne roztahovat přes celou šířku bez mezí */
body:not(.in-index) .container--bannersBenefit,
body:not(.in-index) [class*="bannersBenefit"] {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ============================================================================
   17. v1.9 — HERO EDGE-TO-EDGE, VĚTŠÍ TYPOGRAFIE, FOOTER, SILNĚJŠÍ TOP10 HIDE
   ============================================================================ */

/* ---- 17.1  Hero: mřížka od strany do strany ------------------------------ */
/* Wrapper musí dovolit pseudo-vrstvě „vylézt“ za své okraje (full bleed). */
body.in-index .homepage-texts-wrapper,
body.in-index .welcome-wrapper,
body.in-index .welcome {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

/* Tato vrstva nahrazuje vnitřní mřížku v .jkp-hero a leží přes 100vw. */
body.in-index .jkp-hero::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-color: #131313 !important;
  background-image:
    linear-gradient(to right,  rgba(0, 255, 65, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 255, 65, 0.07) 1px, transparent 1px) !important;
  background-size: 26px 26px !important;
  background-position: center top !important;
  background-repeat: repeat !important;
}

/* Samotný .jkp-hero už nemá vlastní mřížku / orámování — průhledný panel. */
body.in-index .jkp-hero {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
}

/* Také odebrat jemnou mřížku jen v pravém sloupci — splývá s edge-to-edge. */
body.in-index .jkp-visual {
  background-image: none !important;
}


/* ---- 17.2  Větší hero (text + obrázek) ---------------------------------- */
body.in-index .jkp-hero {
  /* Větší prostor mezi pseudo-vrstvou a obsahem, ne malý vnitřní rám. */
  padding: clamp(40px, 6vw, 96px) clamp(20px, 3vw, 48px) !important;
  min-height: min(82vh, 820px) !important;
  /* Sloupec s textem dostane víc místa, ale rozestup je větší. */
  grid-template-columns: minmax(260px, 1.05fr) minmax(360px, 1.15fr) !important;
  column-gap: clamp(36px, 6vw, 96px) !important;
}

body.in-index .jkp-hero h1 {
  font-size: clamp(2.4rem, 5vw + 1rem, 5rem) !important;
  line-height: 1.02 !important;
}

body.in-index .jkp-hero .jkp-kicker {
  font-size: clamp(11px, 0.9vw + 9px, 14px) !important;
  padding: 10px 16px !important;
}

body.in-index .jkp-hero > .jkp-hero-copy > p,
body.in-index .jkp-hero > div:first-of-type:not(.jkp-visual) > p {
  font-size: clamp(1.1rem, 1vw + 0.95rem, 1.45rem) !important;
  line-height: 1.6 !important;
}


/* ---- 17.3  Hero CTA řádek (.jkp-actions) — mezery a odsazení ------------- */
body.in-index .jkp-actions {
  gap: 18px 22px !important;
  margin-top: clamp(24px, 2.5vw, 40px) !important;
}


/* ---- 17.4  Mobil — hero ne moc vysoké, žádné useknutí grafiky ----------- */
@media (max-width: 991px) {
  body.in-index .jkp-hero {
    min-height: 0 !important;
    padding: 28px 18px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.in-index .jkp-hero .jkp-visual {
    display: none !important;
  }

  body.in-index .jkp-hero h1 {
    font-size: clamp(2rem, 7vw + 0.6rem, 2.8rem) !important;
  }
  body.in-index a.jkp-btn.jkp-btn-primary,
  body.in-index a.jkp-btn.jkp-btn-secondary {
    min-height: 60px !important;
    padding: 0 28px !important;
    width: 100% !important;
  }
}


/* ---- 17.5  Skrýt všechny varianty „Top 10 produktů“ --------------------- */
/* Pozn.: nejlepší je vypnout přímo v Shoptet adminu (Vzhled › Prvky šablony
   › Doplňkové bloky), tohle je CSS pojistka napříč variantami. */
body.in-index aside .products-block,
body.in-index .products-related,
body.in-index .products-block.products-block--top-10,
body.in-index .products-block[class*="top"],
body.in-index .products-block.bestsellers,
body.in-index #related-products,
body.in-index #topProducts,
body.in-index .top-products-wrapper,
body.in-index [data-block="top10"],
body.in-index [data-block="topProducts"],
body.in-index [data-products-block="top10"],
body.in-index [data-testid*="top10"],
body.in-index .right-sidebar,
body.in-index .left-sidebar.in-index,
body.in-index .col-sidebar,
body.in-index .sidebar-right,
body.in-index .sidebar-block,
body.in-index .sidebar .products-block,
body.in-index #content > aside,
body.in-index .index-content-wrapper > aside,
body.in-index .welcome-wrapper > aside {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Když Shoptet sype top10 v <h3> + ul.products vedle hero — preventivní hide. */
body.in-index #content-wrapper .products-block:not(.jkp-services) {
  display: none !important;
}


/* ---- 17.6  Patička v1.10: ÚPRAVY ODSTRANĚNY -----------------------------
   Patička se vrací k chování ze sekce 11 (kompaktní mono, malé písmo).
   K vlastnímu copyright textu a layoutu patičky se vrátíme později — bude
   řešeno přímo v Shoptet adminu (Vzhled › HTML kódy › Pata), ne přes CSS
   pseudo-elementy. */


/* ---- 17.7  Košík /kosik/ + checkout — „Zpět do obchodu“ přitáhnout k obsahu
   Shoptet renderuje na cart stránce <aside class="sidebar sidebar-left">
   s jediným tlačítkem; ve výchozím gridu plave daleko vlevo. */

body.in-kosik .content-wrapper-in,
body.ordering-process .content-wrapper-in {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

body.in-kosik aside.sidebar.sidebar-left,
body.ordering-process aside.sidebar.sidebar-left {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 24px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* v1.11 + v1.16: „Zpět“ / „Pokračovat“ — shodná výška 44px a padding 22px na /kosik/ i v checkoutu */
body.in-kosik aside.sidebar.sidebar-left .toggle-window-arr,
body.in-kosik .next-step.next-step--cart .next-step-back,
body.in-kosik .next-step .next-step-back,
body.in-kosik .next-step .next-step-forward,
body.ordering-process aside.sidebar.sidebar-left .toggle-window-arr,
body.ordering-process .next-step .next-step-back,
body.ordering-process .next-step .next-step-forward {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 22px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

body.in-kosik aside.sidebar.sidebar-left .toggle-window-arr,
body.ordering-process aside.sidebar.sidebar-left .toggle-window-arr,
body.in-kosik .next-step.next-step--cart .next-step-back,
body.in-kosik .next-step .next-step-back,
body.ordering-process .next-step .next-step-back {
  display: inline-flex !important;
  width: auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--b) !important;
  color: var(--t) !important;
  border: 1px solid var(--ln) !important;
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.in-kosik .next-step .next-step-forward {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  background: var(--gr) !important;
  background-image: linear-gradient(135deg, #00e639, #00ff41) !important;
  color: var(--dg) !important;
  border: 0 !important;
}

@media (hover: hover) {
  body.in-kosik .next-step .next-step-forward:hover,
  body.ordering-process .next-step .next-step-forward:hover {
    filter: brightness(1.05) !important;
  }
}

/* v1.16: checkout krok 3 — OBJEDNAT zmenšeno, ZPĚT 48px (footer / submit) */
body.ordering-process .next-step .next-step-forward,
body.ordering-process .next-step button[type="submit"],
body.ordering-process .next-step input[type="submit"],
body.ordering-process .next-step .btn-conversion,
body.ordering-process .next-step .order-button,
body.ordering-process .ordering-process__footer .next-step-forward,
body.ordering-process .ordering-process__footer button[type="submit"] {
  min-height: 48px !important;
  height: auto !important;
  max-height: 56px !important;
  padding: 0 28px !important;
  font-size: 0.85rem !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  background: var(--gr) !important;
  background-image: linear-gradient(135deg, #00e639, #00ff41) !important;
  color: var(--dg) !important;
  border: 0 !important;
}

body.ordering-process .next-step .next-step-back,
body.ordering-process .ordering-process__footer .next-step-back {
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 22px !important;
  font-size: 0.78rem !important;
  background: var(--b) !important;
  color: var(--t) !important;
  border: 1px solid var(--ln) !important;
}

/* Druhotný <span>do obchodu</span> z HTML — ať se taky nezalomí */
body.in-kosik aside.sidebar.sidebar-left .toggle-window-arr span,
body.ordering-process aside.sidebar.sidebar-left .toggle-window-arr span,
body.in-kosik .next-step.next-step--cart .next-step-back .continue-shopping,
body.in-kosik .next-step .next-step-back span,
body.ordering-process .next-step .next-step-back span {
  white-space: nowrap !important;
  display: inline !important;
  text-transform: uppercase !important;
}

body.in-kosik aside.sidebar.sidebar-left .toggle-window-arr:hover,
body.ordering-process aside.sidebar.sidebar-left .toggle-window-arr:hover,
body.in-kosik .next-step .next-step-back:hover,
body.ordering-process .next-step .next-step-back:hover {
  color: var(--g) !important;
  border-color: var(--g2) !important;
}

body.in-kosik main#content,
body.ordering-process main#content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

@media (max-width: 991px) {
  body.in-kosik .content-wrapper-in,
  body.ordering-process .content-wrapper-in {
    flex-direction: column !important;
    gap: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.in-kosik aside.sidebar.sidebar-left,
  body.ordering-process aside.sidebar.sidebar-left {
    padding-top: 12px !important;
  }
}


/* ---- 17.8  Bonusy box + Recap box — jednotný tmavý panel s borderem ----- */

body.in-kosik .row.summary,
body.ordering-process .row.summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: stretch !important;
  margin: 24px 0 !important;
}

body.in-kosik .row.summary > [class*="col-"],
body.ordering-process .row.summary > [class*="col-"] {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 320px !important;
  min-width: 0 !important;
  display: flex !important;
}

body.in-kosik .row.summary .box,
body.in-kosik .row.summary .box.box-md,
body.in-kosik .row.summary .box.box-bg-default,
body.ordering-process .row.summary .box,
body.ordering-process .row.summary .box.box-bg-default {
  background: var(--b) !important;
  background-image: none !important;
  border: 1px solid var(--ln) !important;
  color: var(--t) !important;
  padding: 22px 26px !important;
  width: 100% !important;
}

body.in-kosik .row.summary .box h2,
body.in-kosik .row.summary .box .h4,
body.ordering-process .row.summary .box h2,
body.ordering-process .row.summary .box .h4 {
  margin: 0 0 12px !important;
  color: var(--t) !important;
  font-family: var(--fd) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 1.05rem !important;
}

body.in-kosik .row.summary .extra.delivery,
body.ordering-process .row.summary .extra.delivery {
  background: transparent !important;
  color: var(--g) !important;
  padding: 0 !important;
}

body.in-kosik .row.summary .extra.delivery strong,
body.ordering-process .row.summary .extra.delivery strong {
  color: var(--g) !important;
  font-weight: 700 !important;
  font-family: var(--fd) !important;
}

/* Recap (Celkem za zboží) — sjednotit s Bonusy */
body.in-kosik .row.summary .price-wrapper,
body.ordering-process .row.summary .price-wrapper {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  background: var(--b) !important;
  border: 1px solid var(--ln) !important;
  padding: 22px 26px !important;
  width: 100% !important;
}

body.in-kosik .row.summary .price-wrapper .price-label,
body.ordering-process .row.summary .price-wrapper .price-label {
  color: var(--m) !important;
  text-transform: none !important;
  font-size: 0.95rem !important;
}

body.in-kosik .row.summary .price-wrapper .price.price-primary,
body.ordering-process .row.summary .price-wrapper .price.price-primary {
  color: var(--g) !important;
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  font-size: 1.7rem !important;
}


/* ---- 17.9  Prázdný košík — sjednotit bloky (tmavý panel + border) ------- */
/* Shoptet vykresluje seskupené boxy "Podívejte se na naši nabídku",
   "Zkuste vyhledávání", "Potřebujete pomoc?" v rámci .empty-cart / .row */

body.in-kosik .empty-cart,
body.in-kosik .cart-is-empty,
body.in-kosik .empty-cart-wrapper,
body.in-kosik .cart-empty,
body.in-kosik #cart-wrapper .row,
body.in-kosik .cart-wrapper > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: stretch !important;
  margin: 0 !important;
}

body.in-kosik .empty-cart > *,
body.in-kosik .cart-empty > *,
body.in-kosik #cart-wrapper > .row > [class*="col-"],
body.in-kosik .cart-wrapper > .row > [class*="col-"],
body.in-kosik .empty-cart [class*="col-"],
body.in-kosik .cart-empty [class*="col-"] {
  flex: 1 1 280px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  background: var(--b) !important;
  border: 1px solid var(--ln) !important;
  color: var(--t) !important;
  box-sizing: border-box !important;
}

body.in-kosik .empty-cart [class*="col-"] > *,
body.in-kosik .cart-empty [class*="col-"] > *,
body.in-kosik #cart-wrapper > .row > [class*="col-"] > * {
  padding: 18px 22px !important;
  background: transparent !important;
  margin: 0 !important;
}

body.in-kosik .empty-cart h2,
body.in-kosik .empty-cart h3,
body.in-kosik .empty-cart .h2,
body.in-kosik .empty-cart .h3,
body.in-kosik .cart-empty h2,
body.in-kosik .cart-empty h3,
body.in-kosik #cart-wrapper h2,
body.in-kosik #cart-wrapper h3 {
  margin: 0 0 12px !important;
  color: var(--t) !important;
  font-family: var(--fd) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 1.05rem !important;
}

/* „Potřebujete pomoc?“ blok — typicky .contact-help / .help-contact-block */
body.in-kosik .contact-help,
body.in-kosik .help-contact,
body.in-kosik .help-contact-block,
body.in-kosik [class*="help-contact"],
body.in-kosik [class*="contactHelp"],
body.in-kosik .cart-help {
  background: var(--b) !important;
  background-image: none !important;
  border: 1px solid var(--ln) !important;
  color: var(--t) !important;
  padding: 18px 22px !important;
}

body.in-kosik .contact-help a,
body.in-kosik .help-contact a,
body.in-kosik [class*="help-contact"] a,
body.in-kosik .cart-help a {
  color: var(--g2) !important;
}

/* Velký nadpis „Váš nákupní košík je prázdný“ — sjednotit s panelem nad ním */
body.in-kosik .cart-is-empty-text,
body.in-kosik .empty-cart-title,
body.in-kosik #cart-wrapper > h2,
body.in-kosik #cart-wrapper > h1 {
  background: var(--b) !important;
  border: 1px solid var(--ln) !important;
  color: var(--t) !important;
  padding: 18px 22px !important;
  margin: 0 0 16px !important;
  font-family: var(--fd) !important;
  font-size: 1.4rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}


/* ---- 17.10  E-shop výpis: tlačítko „Otevřít/Zavřít filtr“ + řazení ------- */

/* Otevřít/Zavřít filtr v sidebaru kategorie */
.box.box-filters .filters-unveil-button-wrapper a.btn.unveil-button,
.box.box-filters a.btn.btn-default.unveil-button,
.filters-wrapper a.btn.unveil-button,
.filters-unveil-button-wrapper a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  background: var(--b) !important;
  background-image: none !important;
  color: var(--g) !important;
  border: 1px solid var(--ln) !important;
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.box.box-filters .filters-unveil-button-wrapper a.btn.unveil-button:hover,
.filters-wrapper a.btn.unveil-button:hover {
  background: var(--b2) !important;
  color: var(--g) !important;
  border-color: var(--g2) !important;
}

/* Wrapper „box-filters“ — sladit s panely (žádné světlé pozadí) */
.box.box-filters,
.box.box-bg-default.box-filters {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}


/* Řazení produktů: .listSorting + tlačítka .listSorting__control --------- */
.listSorting,
.js-listSorting {
  background: transparent !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

.listSorting__controls {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
}

.listSorting__controls > li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  list-style: none !important;
}

.listSorting__controls > li::before {
  content: none !important;
}

button.listSorting__control,
.listSorting__controls button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  background: var(--b) !important;
  background-image: none !important;
  color: var(--t) !important;
  border: 1px solid var(--ln) !important;
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

button.listSorting__control:hover,
.listSorting__controls button:hover {
  color: var(--g) !important;
  border-color: var(--g2) !important;
  background: var(--b2) !important;
}

/* Aktivní řazení — zelený akcent */
button.listSorting__control.listSorting__control--current,
button.listSorting__control[aria-disabled="true"] {
  background: var(--g) !important;
  background-image: none !important;
  color: var(--dg) !important;
  border-color: var(--g) !important;
  cursor: default !important;
}


/* Drobnost: container .category-header — žádné světlé pozadí */
#category-header,
.category-header {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}


/* ============================================================================
   18. NOVÉ KOMPONENTY — HERO BEZ OBRÁZKU (SLUŽBY / REFERENCE / KONTAKTY)
   ============================================================================ */

body.in-sluzby .jkp-hero.jkp-hero--text,
body.in-reference-a-realizace .jkp-hero.jkp-hero--text,
body.in-reference .jkp-hero.jkp-hero--text,
body.in-kontakty .jkp-hero.jkp-hero--text {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 48px);
}

body.in-sluzby .jkp-hero.jkp-hero--text .jkp-visual,
body.in-reference-a-realizace .jkp-hero.jkp-hero--text .jkp-visual,
body.in-reference .jkp-hero.jkp-hero--text .jkp-visual,
body.in-kontakty .jkp-hero.jkp-hero--text .jkp-visual {
  display: none;
}

body.in-sluzby .jkp-hero.jkp-hero--text .jkp-hero-copy,
body.in-sluzby .jkp-hero.jkp-hero--text > div:first-of-type:not(.jkp-visual),
body.in-reference-a-realizace .jkp-hero.jkp-hero--text .jkp-hero-copy,
body.in-reference-a-realizace .jkp-hero.jkp-hero--text > div:first-of-type:not(.jkp-visual),
body.in-reference .jkp-hero.jkp-hero--text .jkp-hero-copy,
body.in-reference .jkp-hero.jkp-hero--text > div:first-of-type:not(.jkp-visual),
body.in-kontakty .jkp-hero.jkp-hero--text .jkp-hero-copy,
body.in-kontakty .jkp-hero.jkp-hero--text > div:first-of-type:not(.jkp-visual) {
  width: 100%;
  max-width: none;
}

body.in-sluzby .jkp-hero.jkp-hero--text > .jkp-hero-copy > p,
body.in-sluzby .jkp-hero.jkp-hero--text > div:first-of-type:not(.jkp-visual) > p,
body.in-reference-a-realizace .jkp-hero.jkp-hero--text > .jkp-hero-copy > p,
body.in-reference-a-realizace .jkp-hero.jkp-hero--text > div:first-of-type:not(.jkp-visual) > p,
body.in-reference .jkp-hero.jkp-hero--text > .jkp-hero-copy > p,
body.in-reference .jkp-hero.jkp-hero--text > div:first-of-type:not(.jkp-visual) > p,
body.in-kontakty .jkp-hero.jkp-hero--text > .jkp-hero-copy > p,
body.in-kontakty .jkp-hero.jkp-hero--text > div:first-of-type:not(.jkp-visual) > p {
  max-width: 60ch;
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.25rem) !important;
  line-height: 1.6 !important;
}

body.in-sluzby .jkp-hero.jkp-hero--text h1,
body.in-reference-a-realizace .jkp-hero.jkp-hero--text h1,
body.in-reference .jkp-hero.jkp-hero--text h1,
body.in-kontakty .jkp-hero.jkp-hero--text h1 {
  font-size: clamp(2rem, 3.2vw + 1rem, 3.4rem);
}


/* ============================================================================
   19. .JKP-BLOCK + MŘÍŽKY (.JKP-GRID--2 / --3 + .JKP-INFO-* ALIASY + LEGACY)
   ============================================================================ */

.jkp-services-grid,
.jkp-grid.jkp-grid--2,
.jkp-grid.jkp-grid--3,
.jkp-info-grid {
  max-width: min(1320px, 100%);
  margin: clamp(32px, 5vw, 64px) auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  display: grid;
  gap: clamp(20px, 2.5vw, 28px);
  background: transparent;
}

.jkp-grid.jkp-grid--2,
.jkp-services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jkp-grid.jkp-grid--3,
.jkp-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jkp-block,
.jkp-info-card {
  background: var(--b);
  border: 1px solid var(--ln);
  padding: clamp(24px, 3vw, 40px);
  color: var(--t);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

@media (hover: hover) {
  .jkp-block:hover,
  .jkp-info-card:hover {
    border-color: var(--g2);
    background: #1e1d1d;
  }
}

.jkp-block-id {
  font-family: var(--fm);
  font-size: clamp(11px, 0.7vw + 9px, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g);
  margin: 0 0 4px;
}

.jkp-block h3,
.jkp-info-card h3 {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--t);
  margin: 0;
}

.jkp-block p,
.jkp-info-card p {
  font-family: var(--fb);
  font-size: clamp(1.02rem, 0.5vw + 0.92rem, 1.15rem) !important;
  line-height: 1.65 !important;
  color: var(--m);
  margin: 0;
}

.jkp-block p a,
.jkp-info-card p a {
  color: var(--g2);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 230, 57, 0.3);
}

@media (hover: hover) {
  .jkp-block p a:hover,
  .jkp-info-card p a:hover {
    color: var(--g);
    border-bottom-color: var(--g);
  }
}

@media (max-width: 767px) {
  .jkp-grid.jkp-grid--2,
  .jkp-grid.jkp-grid--3,
  .jkp-info-grid,
  .jkp-grid--2,
  .jkp-grid--3,
  .jkp-services-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .jkp-block,
  .jkp-info-card {
    padding: 22px;
  }
}

/* v1.15: kicker vždy zelený (vnoření v kartách / hero / CTA / ticker) */
.jkp-block .jkp-kicker,
.jkp-info-card .jkp-kicker,
.jkp-hero .jkp-kicker,
.jkp-hero--text .jkp-kicker,
.jkp-cta .jkp-kicker,
.jkp-logo-ticker-head .jkp-kicker {
  color: var(--g) !important;
  font-family: var(--fm) !important;
  font-size: clamp(11px, 0.7vw + 9px, 13px) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
}

/* v1.23: zelený akcent v nadpisech — stejná velikost jako okolní text */
h1 .jkp-accent,
h2 .jkp-accent,
h3 .jkp-accent,
.jkp-hero h1 .jkp-accent,
.jkp-block h3 .jkp-accent,
.jkp-info-card h3 .jkp-accent,
.pageArticleDetail h1 .jkp-accent,
.pageArticleDetail [itemprop="about"] h2 .jkp-accent,
.pageArticleDetail [itemprop="about"] h3 .jkp-accent {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  color: var(--g) !important;
}

/* v1.15: Kontakty — vycentrovat 3 info karty + menší mezera pod formulářem */
body.in-kontakty .jkp-info-grid,
body.in-kontakty .jkp-grid--3,
body.in-kontakty .jkp-grid.jkp-grid--3 {
  max-width: min(1100px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.in-kontakty .jkp-form + .jkp-info-grid,
body.in-kontakty .jkp-form + .jkp-grid.jkp-grid--3,
body.in-kontakty .jkp-form + .jkp-grid--3 {
  margin-top: clamp(12px, 2vw, 20px) !important;
}


/* ============================================================================
   20. .JKP-LOGO-TICKER — PÁS LOG (TITULKA, CSS ANIMACE)
   ============================================================================ */

body.in-index .jkp-logo-ticker {
  max-width: min(1560px, 100%);
  margin: clamp(16px, 2.5vw, 32px) auto clamp(20px, 3vw, 40px) auto !important;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  background: transparent;
  box-sizing: border-box;
}

body.in-index .jkp-logo-ticker-head {
  text-align: center;
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

body.in-index .jkp-logo-ticker-head .jkp-kicker {
  font-family: var(--fm);
  font-size: clamp(10px, 0.85vw + 8px, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--g);
  margin: 0 0 8px;
}

body.in-index .jkp-logo-ticker-head h2 {
  font-family: var(--fd);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 1.5vw + 1rem, 1.9rem);
  color: var(--t);
  margin: 8px 0 0;
}

body.in-index .jkp-logo-ticker-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}

body.in-index .jkp-logo-ticker-track {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 88px) !important;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: jkp-logo-ticker-scroll 40s linear infinite;
  will-change: transform;
}

@keyframes jkp-logo-ticker-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (hover: hover) {
  body.in-index .jkp-logo-ticker:hover .jkp-logo-ticker-track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.in-index .jkp-logo-ticker-track {
    animation: none;
  }
}

body.in-index .jkp-logo-ticker-item {
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  height: clamp(56px, 6vw, 88px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.in-index .jkp-logo-ticker-item img {
  max-height: 100%;
  max-width: clamp(140px, 14vw, 220px) !important;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.85 !important;
  filter: grayscale(1) brightness(1.6);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

@media (hover: hover) {
  body.in-index .jkp-logo-ticker-item:hover img {
    opacity: 1;
    filter: grayscale(0) brightness(1);
  }
}

@media (max-width: 767px) {
  body.in-index .jkp-logo-ticker-track {
    gap: 32px;
    animation-duration: 30s;
  }

  body.in-index .jkp-logo-ticker-item {
    height: 48px !important;
  }

  body.in-index .jkp-logo-ticker-item img {
    max-width: 130px !important;
  }
}


/* ============================================================================
   21. .JKP-GALLERY — FOTOMŘÍŽKA (REFERENCE)
   ============================================================================ */

body.in-reference-a-realizace .jkp-gallery,
body.in-reference .jkp-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  max-width: min(1320px, 100%);
  margin: clamp(8px, 1.5vw, 16px) auto clamp(32px, 5vw, 56px);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  background: transparent;
}

body.in-reference-a-realizace .jkp-gallery-item,
body.in-reference .jkp-gallery-item {
  aspect-ratio: 1 / 1;
  background: var(--b);
  border: 1px solid var(--ln);
  overflow: hidden;
  margin: 0;
  position: relative;
  cursor: default !important;
  transition: border-color 0.18s ease;
}

body.in-reference-a-realizace .jkp-gallery-item img,
body.in-reference .jkp-gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
  padding: 12px !important;
  opacity: 1 !important;
  transition: transform 0.25s ease, opacity 0.2s ease !important;
  box-sizing: border-box !important;
}

@media (hover: hover) {
  body.in-reference-a-realizace .jkp-gallery-item:hover,
  body.in-reference .jkp-gallery-item:hover {
    border-color: var(--g2) !important;
  }

  body.in-reference-a-realizace .jkp-gallery-item:hover img,
  body.in-reference .jkp-gallery-item:hover img {
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 991px) {
  body.in-reference-a-realizace .jkp-gallery,
  body.in-reference .jkp-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  body.in-reference-a-realizace .jkp-gallery,
  body.in-reference .jkp-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}


/* ============================================================================
   22. .JKP-CTA + .JKP-FORM + .JKP-FOOTNOTE (KONTAKTY)
   ============================================================================ */

body.in-kontakty .jkp-cta {
  max-width: min(1320px, 100%);
  margin: clamp(40px, 6vw, 80px) auto clamp(32px, 5vw, 64px);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

body.in-kontakty .jkp-cta-inner {
  background: var(--b);
  border: 1px solid var(--ln);
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

body.in-kontakty .jkp-cta-inner .jkp-kicker {
  font-family: var(--fm);
  font-size: clamp(10px, 0.85vw + 8px, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--g);
  margin: 0;
}

body.in-kontakty .jkp-cta-inner h2 {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.8vw + 1.1rem, 2.4rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--t);
  margin: 0;
}

body.in-kontakty .jkp-cta-inner h2 .jkp-accent {
  color: var(--g);
}

body.in-kontakty .jkp-cta-inner p {
  font-family: var(--fb);
  color: var(--m);
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.15rem);
  line-height: 1.55;
  max-width: 50ch;
  margin: 0;
}

body.in-kontakty .jkp-cta-inner a.jkp-btn.jkp-btn-primary {
  margin-top: 8px;
}

body.in-kontakty .jkp-form {
  margin-top: clamp(20px, 3vw, 32px);
}

body.in-kontakty .jkp-form label {
  color: var(--t);
  font-family: var(--fb);
}

body.in-kontakty .jkp-form .form-group {
  margin-bottom: 14px;
}

body.in-kontakty .jkp-footnote {
  max-width: min(900px, 100%);
  margin: clamp(40px, 5vw, 64px) auto clamp(24px, 3vw, 40px);
  padding: 20px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  background: transparent;
  border-top: 1px solid var(--ln);
  text-align: center;
}

body.in-kontakty .jkp-footnote p {
  color: var(--m);
  font-size: 0.85rem;
  font-family: var(--fb);
  line-height: 1.6;
  margin: 0;
}

body.in-kontakty .jkp-footnote strong {
  color: var(--t);
}


/* ============================================================================
   23. DEFAULT ARTICLE STYLING — automatický hero pro nové stránky vytvořené v Shoptet adminu
   ============================================================================ */

/* Wrapper — trochu vzduchu kolem článku */
body:not(.in-index) .pageArticleDetail {
  padding: 0;
  margin: 0;
}

/* H1 + auto-kicker */
body:not(.in-index) .pageArticleDetail > header[itemprop="headline"] {
  position: relative;
  margin: clamp(12px, 2vw, 28px) 0 clamp(20px, 3vw, 36px);
  padding-bottom: clamp(16px, 2.5vw, 28px);
  border-bottom: 1px solid var(--ln);
}

/* Automatický kicker nad H1 */
body:not(.in-index) .pageArticleDetail > header[itemprop="headline"]::before {
  content: "// JK_PRINT";
  display: block;
  font-family: var(--fm);
  font-size: clamp(11px, 0.7vw + 9px, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g);
  margin-bottom: clamp(8px, 1vw, 14px);
}

body:not(.in-index) .pageArticleDetail > header[itemprop="headline"] h1 {
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 3.2vw + 1rem, 3.4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  color: var(--t) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Volitelný .jkp-accent uvnitř H1 */
body:not(.in-index) .pageArticleDetail > header[itemprop="headline"] h1 .jkp-accent {
  color: var(--g) !important;
}

/* Obsah v [itemprop="about"] */
body:not(.in-index) .pageArticleDetail [itemprop="about"] {
  font-family: var(--fb);
  color: var(--t);
}

/* První <p> = lead */
body:not(.in-index) .pageArticleDetail [itemprop="about"] > p:first-of-type {
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem);
  line-height: 1.55;
  color: var(--m);
  margin: 0 0 clamp(20px, 3vw, 32px);
  max-width: 65ch;
}

/* Další odstavce */
body:not(.in-index) .pageArticleDetail [itemprop="about"] p {
  font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.05rem);
  line-height: 1.65;
  color: var(--t);
  margin: 0 0 1.1em;
  max-width: 70ch;
}

/* Podnadpisy v obsahu */
body:not(.in-index) .pageArticleDetail [itemprop="about"] h2 {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.5vw + 1.1rem, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--t);
  margin: clamp(28px, 4vw, 48px) 0 clamp(12px, 1.5vw, 20px);
}

body:not(.in-index) .pageArticleDetail [itemprop="about"] h3 {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1.2rem, 1vw + 1rem, 1.55rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--t);
  margin: clamp(20px, 3vw, 32px) 0 clamp(8px, 1vw, 14px);
}

body:not(.in-index) .pageArticleDetail [itemprop="about"] h2 .jkp-accent,
body:not(.in-index) .pageArticleDetail [itemprop="about"] h3 .jkp-accent {
  color: var(--g);
}

/* Seznamy */
body:not(.in-index) .pageArticleDetail [itemprop="about"] ul,
body:not(.in-index) .pageArticleDetail [itemprop="about"] ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
  max-width: 65ch;
}

body:not(.in-index) .pageArticleDetail [itemprop="about"] li {
  margin: 0 0 0.4em;
  line-height: 1.6;
  color: var(--t);
}

body:not(.in-index) .pageArticleDetail [itemprop="about"] li::marker {
  color: var(--g);
}

/* Odkazy v obsahu (ne CTA / karty) */
body:not(.in-index) .pageArticleDetail [itemprop="about"] a:not(.jkp-btn):not(.jkp-block a):not(.jkp-info-card a) {
  color: var(--g2);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 230, 57, 0.3);
  transition: border-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  body:not(.in-index) .pageArticleDetail [itemprop="about"] a:not(.jkp-btn):not(.jkp-block a):not(.jkp-info-card a):hover {
    color: var(--g);
    border-bottom-color: var(--g);
  }
}

/* Strong / em */
body:not(.in-index) .pageArticleDetail [itemprop="about"] strong {
  color: var(--t);
  font-weight: 700;
}

body:not(.in-index) .pageArticleDetail [itemprop="about"] em {
  color: var(--m);
}

/* Sekce / komponenty — vlastní šířky, bez max-width z odstavců */
body:not(.in-index) .pageArticleDetail [itemprop="about"] section,
body:not(.in-index) .pageArticleDetail [itemprop="about"] .jkp-grid,
body:not(.in-index) .pageArticleDetail [itemprop="about"] .jkp-block,
body:not(.in-index) .pageArticleDetail [itemprop="about"] .jkp-cta,
body:not(.in-index) .pageArticleDetail [itemprop="about"] .jkp-gallery,
body:not(.in-index) .pageArticleDetail [itemprop="about"] .jkp-info-grid,
body:not(.in-index) .pageArticleDetail [itemprop="about"] .jkp-info-card {
  max-width: none;
}

@media (max-width: 767px) {
  body:not(.in-index) .pageArticleDetail > header[itemprop="headline"] h1 {
    font-size: clamp(1.7rem, 8vw, 2.3rem) !important;
  }
}


/* ============================================================================
   24. MOBILE POLISH v1.12
   ============================================================================
   Cílím dva breakpointy:
     - ? 991 px (širší tablet / většina mobilů na šířku)
     - ? 575 px (telefon na výšku)
   Pravidla jsou cílená — žádné body * nebo div { … }, nelámeme .jkp-hero
   strukturu, jen úpravy velikostí a layoutu.
   ============================================================================ */

/* ---- 24.1  Globální typografie & odsazení (? 991 px) -------------------- */
@media (max-width: 991px) {
  html {
    font-size: 16px !important;
  }
  body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  /* Nadpisy nepřetékat */
  h1, h2, h3, h4, .h1, .h2, .h3, .h4,
  .category-title, .heading {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }

  /* Min. velikost textu (čitelnost) */
  body, p, li, label, td, th, span, a, .btn {
    font-size: clamp(14px, 3.6vw, 16px) !important;
  }

  /* Hlavní container — žádný horizontální odskok */
  .container, .container_resetted {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}


/* ---- 24.2  Header na mobilu — sjednotit výšku ikon a posunout zarovnání */
@media (max-width: 991px) {
  #header .container.navigation-wrapper,
  #header .navigation-wrapper {
    padding: 8px 12px !important;
    min-height: 56px !important;
    align-items: center !important;
  }

  #header .site-name img {
    max-width: 110px !important;
    height: auto !important;
  }

  #header .navigation-buttons {
    gap: 4px !important;
  }

  #header .navigation-buttons > a,
  #header .navigation-buttons > button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Cart badge — větší & čitelný (palec se trefí) */
  .cart-count i,
  [data-testid=headerCartCount] {
    min-width: 18px !important;
    height: 18px !important;
    font-size: 11px !important;
    top: -4px !important;
    right: -4px !important;
  }
}


/* ---- 24.3  Hero na mobilu — kompaktnější, lehčí blur ------------------- */
@media (max-width: 991px) {
  body.in-index .jkp-hero {
    padding: 22px 16px !important;
    min-height: 0 !important;
    row-gap: 18px !important;
  }
  body.in-index .jkp-hero h1 {
    font-size: clamp(1.7rem, 7.8vw, 2.4rem) !important;
    line-height: 1.06 !important;
  }
  body.in-index .jkp-hero .jkp-kicker {
    font-size: 10px !important;
    padding: 6px 10px !important;
  }
  body.in-index .jkp-hero > .jkp-hero-copy > p,
  body.in-index .jkp-hero > div:first-of-type:not(.jkp-visual) > p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }
  /* Tlačítka přes 100 % stack, ale ne moc obrovská */
  body.in-index a.jkp-btn.jkp-btn-primary,
  body.in-index a.jkp-btn.jkp-btn-secondary {
    min-height: 52px !important;
    padding: 0 22px !important;
    font-size: 0.85rem !important;
    width: 100% !important;
  }
  /* Blur — menší kvůli perf na slabších zařízeních */
  body.in-index .jkp-visual::before {
    filter: blur(28px) !important;
    opacity: 0.7 !important;
  }
}


/* ---- 24.4  Hero — telefony na výšku (? 575 px) -------------------------- */
@media (max-width: 575px) {
  body.in-index .jkp-hero {
    padding: 18px 14px !important;
  }
  body.in-index .jkp-hero h1 {
    font-size: clamp(1.55rem, 8.8vw, 2.1rem) !important;
  }
}


/* ---- 24.5  E-shop výpis: 2 sloupce do 575 px, 1 sloupec do 360 px ------- */
@media (max-width: 991px) {
  #products.products,
  .products.products-page,
  .products-block.products,
  body:not(.in-index) #content .products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body:not(.in-index) #content .products > .product,
  #products.products > .product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    min-width: 0 !important;
  }

  /* Karta produktu — kompaktní vnitřek */
  body:not(.in-index) .products > .product .image,
  body:not(.in-index) .products > .product .image-wrapper,
  body:not(.in-index) .products > .product .thumbnail {
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
  }
  body:not(.in-index) .products > .product .image img,
  body:not(.in-index) .products > .product .thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body:not(.in-index) .products > .product .name,
  body:not(.in-index) .products > .product .p-name,
  body:not(.in-index) .products > .product .name a {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
  }

  body:not(.in-index) .products > .product .price,
  body:not(.in-index) .products > .product .price-final {
    font-size: 1rem !important;
  }
}

@media (max-width: 360px) {
  #products.products,
  .products.products-page,
  body:not(.in-index) #content .products {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* ---- 24.6  Řazení produktů — vodorovný scroll s snap (1 řádek) --------- */
@media (max-width: 991px) {
  .listSorting,
  .js-listSorting {
    margin: 0 -16px 12px !important; /* aby řádek šel z kraje obrazovky */
    padding: 0 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }
  .listSorting::-webkit-scrollbar,
  .js-listSorting::-webkit-scrollbar { display: none !important; }

  .listSorting__controls {
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: 100% !important;
    gap: 8px !important;
  }
  .listSorting__controls > li { flex: 0 0 auto !important; }
  button.listSorting__control {
    min-height: 40px !important;
    padding: 0 16px !important;
    scroll-snap-align: start !important;
  }
}


/* ---- 24.7  Filtry — sidebar na celou šířku, button větší --------------- */
@media (max-width: 991px) {
  body:not(.in-index) #category-left,
  body:not(.in-index) aside.sidebar:not(.sidebar-left),
  body:not(.in-index) .sidebar-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
  }

  .box.box-filters .filters-unveil-button-wrapper a.btn.unveil-button,
  .filters-wrapper a.btn.unveil-button {
    min-height: 48px !important;
    font-size: 0.85rem !important;
  }

  /* Cena slider — celá šířka */
  .slider-wrapper,
  .filters .slider-wrapper {
    padding: 14px 4px !important;
  }
}


/* ---- 24.8  Košík — tabulka › karty (řádky se „zalomí“ na 2-sloupcový grid)
   HTML je <table.cart-table><tr><td class="cart-p-image|p-name|p-availability|
   p-quantity|p-price|p-total">…</td></tr></table>. Na mobilu uděláme
   z každého <tr> kartu s 2-sloupcovým gridem. */
@media (max-width: 767px) {
  .cart-table,
  .cart-table tbody,
  .cart-table tr,
  .cart-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cart-table { border-spacing: 0 !important; }

  .cart-table > thead { display: none !important; }

  .cart-table tr.removeable,
  .cart-table tbody > tr {
    background: var(--b) !important;
    border: 1px solid var(--ln) !important;
    padding: 12px !important;
    margin: 0 0 10px !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: center !important;
  }

  .cart-table td.cart-p-image {
    grid-row: 1 / span 2 !important;
    grid-column: 1 !important;
    padding: 0 !important;
  }

  .cart-table td.cart-p-image img {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
    background: var(--p) !important;
  }

  .cart-table td.p-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    font-weight: 700 !important;
  }
  .cart-table td.p-name a {
    color: var(--g) !important;
    word-break: break-word !important;
  }

  /* Ostatní buňky — pod sebou, label + hodnota */
  .cart-table td.p-availability,
  .cart-table td.p-quantity,
  .cart-table td.p-price,
  .cart-table td.p-total {
    grid-column: 1 / -1 !important;
    padding: 6px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px dashed var(--ln) !important;
  }

  .cart-table .p-label {
    display: inline-block !important;
    color: var(--m) !important;
    font-family: var(--fm) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  /* Množství — kompaktní pruh +/- */
  .cart-table .quantity {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .cart-table .quantity .amount {
    width: 56px !important;
    text-align: center !important;
  }
  .cart-table .quantity button.increase,
  .cart-table .quantity button.decrease,
  .cart-table button.increase,
  .cart-table button.decrease {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
  }
}


/* ---- 24.9  Krokový bar 1 › 2 › 3 (.cart-header.step-0) ----------------- */
@media (max-width: 767px) {
  ol.cart-header {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
  }
  ol.cart-header > li.step {
    text-align: center !important;
    padding: 10px 8px !important;
    font-size: 0.75rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  ol.cart-header > li.step span {
    display: block !important;
    word-break: break-word !important;
  }
}


/* ---- 24.10  Bonusy + Celkem — pod sebou na mobilu --------------------- */
@media (max-width: 767px) {
  body.in-kosik .row.summary,
  body.ordering-process .row.summary {
    flex-direction: column !important;
    gap: 12px !important;
  }
  body.in-kosik .row.summary .box,
  body.in-kosik .row.summary .price-wrapper,
  body.ordering-process .row.summary .box,
  body.ordering-process .row.summary .price-wrapper {
    padding: 16px 18px !important;
  }
  body.in-kosik .row.summary .price-wrapper .price.price-primary,
  body.ordering-process .row.summary .price-wrapper .price.price-primary {
    font-size: 1.5rem !important;
  }
}


/* ---- 24.11  Spodní akce „Zpět do obchodu“ + „Pokračovat“ --------------- */
@media (max-width: 767px) {
  body.in-kosik .next-step,
  body.ordering-process .next-step {
    display: flex !important;
    gap: 10px !important;
    margin: 16px 0 0 !important;
  }
  body.in-kosik .next-step .next-step-back,
  body.in-kosik .next-step .next-step-forward,
  body.ordering-process .next-step .next-step-back,
  body.ordering-process .next-step .next-step-forward {
    flex: 1 1 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 12px !important;
    font-size: 0.72rem !important;
  }

  body.in-kosik .next-step .next-step-forward,
  body.ordering-process .next-step .next-step-forward {
    background: var(--gr) !important;
    background-image: linear-gradient(135deg, #00e639, #00ff41) !important;
    color: var(--dg) !important;
    border: 0 !important;
  }
}


/* ---- 24.12  Sidebar „Zpět do obchodu“ — schovat (duplikuje spodní) ----- */
@media (max-width: 991px) {
  /* Aside-left na cart stránce je tu jen kvůli „Zpět do obchodu“;
     na mobilu už dolní řada (next-step) tu samou akci nabízí. */
  body.in-kosik aside.sidebar.sidebar-left,
  body.ordering-process aside.sidebar.sidebar-left {
    display: none !important;
  }
}


/* ---- 24.13  Produktový detail na mobilu -------------------------------- */
@media (max-width: 991px) {
  .product-detail .p-image img,
  .product-detail .product-detail-images img,
  .product-detail [class*="gallery"] img {
    max-width: 100% !important;
    height: auto !important;
  }

  .product-detail .product-detail-buttons,
  .product-detail .add-to-cart-area,
  .product-detail .product-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .product-detail .add-to-cart-button,
  .product-detail button[type="submit"].add-to-cart-button,
  .product-detail .btn.add-to-cart-button {
    width: 100% !important;
    min-height: 54px !important;
  }
}


/* ---- 24.14  Patička — čitelnost na malých displejích ------------------- */
@media (max-width: 767px) {
  #footer .container,
  .footer .container,
  .footer-bottom.container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 16px !important;
  }
  #footer, .footer, .footer-bottom,
  .copyright, #signature {
    font-size: 0.7rem !important;
  }
}


/* ---- 24.15  Univerzální pojistka — žádný horizontální scroll ----------- */
@media (max-width: 991px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}


/* ============================================================================
   KONEC
   ============================================================================ */