/* ============================================================
   customi.css — tabule-nabytek.cz / TANA school (Shoptet)
   ------------------------------------------------------------
   Soubor na "všechno ostatní" mimo vertical-menu.css.
   POŘADÍ: načítat v hlavičce AŽ ZA vertical-menu.css.
   ============================================================ */

/* ============================================================
   HOMEPAGE — LAYOUT / POŘADÍ SEKCÍ
   (vše scopováno přes body.type-index → platí jen na homepage)
   ============================================================ */
@media (max-width: 768px) {
  body.type-index .row.banners-row {order: 1;}
  body.type-index .welcome {order: 2; margin-top: 20px;}
  body.type-index .h4.homepage-group-title {order: 3;}
  body.type-index #products-6 {order: 4;}
}
@media (min-width: 768px) {
  body.type-index .overall-wrapper {display: flex; flex-direction: column;}
  body.type-index .user-action {order: 1;}
  body.type-index .admin-bar {order: 2;}
  body.type-index .top-navigation-bar {order: 3;}
  body.type-index #header {order: 4;}
  body.type-index .content-wrapper.homepage-box.before-carousel {order: 5; padding-bottom: 0px; margin-bottom: 12px;}
  body.type-index .content-wrapper.homepage-box.welcome-wrapper {order: 6;}
  body.type-index .content-wrapper.container ~ .content-wrapper.container {order: 7;}
  body.type-index #content-wrapper {order: 99;}
  body.type-index .welcome {margin-top: 20px;}
}
body.type-index .welcome div {max-width: 100% !important;}
body.type-index #content {display: flex; flex-direction: column;}
body.type-index .homepage-box.welcome-wrapper {order: 2; margin-top: 12px; margin-bottom: 0; padding-top: 0; padding-bottom: 0;}
body.type-index .row.banners-row {order: 1;}
body.type-index .h4.homepage-group-title {order: 3; margin-top: 20px;}
body.type-index #products-1 {order: 4;}
body.type-index .h4.homepage-group-title ~ .h4.homepage-group-title {order: 5;}
body.type-index #products-11 {order: 8;}
body.type-index .homepage-box {
  border-top-color: #fff;
  border-bottom-color: #fff;
  background-color: #fff;
}

/* Hlavní banner carousel — odsadit 10px od menu i pravého okraje
   (ať není nalepený) + zaoblené rohy jako kartičky kategorií (14px) */
body.type-index .before-carousel .wide-carousel {
  margin-left: 20px !important;
  margin-right: 20px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Bannerová řada: vrátit boční odsazení. Shoptet .row má margin -20px (Bootstrap
   gutter), který bannery roztáhne až ke krajům. Přebíjíme JEN .banners-row →
   ostatní .row si negativní margin nechají, takže se nic jiného nerozbije. */
body.type-index .row.banners-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Zaoblení rohů všech tří bannerů (hlavní + 2 boční) — 14px jako jinde na webu.
   overflow:hidden ořízne obrázek do zaoblených rohů. */
body.type-index .banners-row .banner-wrapper,
body.type-index .banners-row .wide-carousel,
body.type-index .banners-row .main-banner,
body.type-index .banners-row .carousel.slide,
body.type-index .banners-row .carousel-inner {
  border-radius: 14px !important;
  overflow: hidden !important;
}
body.type-index .banners-row .banner-wrapper > a,
body.type-index .banners-row .banner-wrapper img,
body.type-index .banners-row .wide-carousel img,
body.type-index .banners-row .main-banner img {
  border-radius: 14px !important;
}

/* ============================================================
   HOMEPAGE — DLAŽDICE KATEGORIÍ (kompaktní moderní kartičky)
   ============================================================ */
body.type-index .kn_container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
}

/* Karta — kompaktní */
body.type-index .kn_child2 {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 16px 18px;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
body.type-index .kn_child2:hover {
  border-color: #dbe3e0;
  box-shadow: 0 10px 26px rgba(57, 85, 76, .12);
  transform: translateY(-2px);
}

/* Obrázek vlevo — menší */
body.type-index .cat_img {
  flex: 0 0 22%;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.type-index .cat_img a {display: block; width: 100%;}
body.type-index .cat_img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 96px;
  object-fit: contain;
}

/* Textová část vpravo */
body.type-index .cat_text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Nadpis (je to <h2>) */
body.type-index .cat_text h2 {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
body.type-index .cat_text h2 a {
  color: #2c3531;
  text-decoration: none;
  transition: color .15s ease;
}
body.type-index .cat_text h2 a:hover {color: #ff9933;}

/* Popis — oříznutý na 2 řádky (celý text zůstává v HTML = SEO OK) */
body.type-index .cat_text > p:first-of-type {
  margin: 0 0 10px;
  color: #797979;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Podkategorie jako jemné "pilulky" — kompaktní */
body.type-index .cat_text ul,
body.type-index .kn_child2 ul {
  display: flex;
  flex-flow: row wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
body.type-index .kn_child2 ul li {margin: 0; padding: 0; border: 0;}
body.type-index .kn_child2 ul li a {
  display: inline-block;
  padding: 4px 11px;
  background: #f3f6f5;
  border: 1px solid #e7eceb;
  border-radius: 16px;
  color: #46554f;
  font-size: 12.5px;
  line-height: 1.3;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.type-index .kn_child2 ul li a:hover {
  background: #39554c;
  border-color: #39554c;
  color: #fff;
}

/* Tlačítko "Vybrat si" — kompaktní, dole */
body.type-index .cat_text p:last-child {margin: auto 0 0;}
body.type-index .cat_text p > a {
  display: inline-block;
  padding: 8px 20px;
  background: #ff9933;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 7px;
  text-decoration: none;
  transition: background .18s ease;
}
body.type-index .cat_text p > a:hover {background: #f57c00;}

/* ============================================================
   HOMEPAGE — BENEFITY (Kvalita / Osobní přístup / …)
   ============================================================ */
/* trošku odsadit řadu benefitů od kategorií nahoře (kontejner s .kn_child4) */
body.type-index .kn_container:has(.kn_child4) {
  margin-top: 32px !important;
}
body.type-index .kn_container[style] .kn_child4,
body.type-index .kn_child4 {
  text-align: center;
  box-sizing: border-box;
}
body.type-index .kn_child4 img {
  max-width: 76px;
  height: auto;
  transition: transform .25s ease;
}
body.type-index .kn_child4:hover img {
  transform: translateY(-4px);
}
body.type-index .kn_child4 h4 {
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  color: #39554c;
}

/* ============================================================
   HOMEPAGE — USP / BENEFITY v2 (nový blok .usp-row)
   ------------------------------------------------------------
   HTML se vkládá v adminu na titulní stranu (dolů). Ikony jsou
   inline SVG jako data-URI přímo tady v CSS → ŽÁDNÉ obrázky,
   ostré na retině, barvu řídíme odsud. HTML tak zůstává čisté
   (jen divy + třídy) a editor v adminu nemá co rozbít.
   Až se blok nasadí, starou sekci .kn_child4 nahoře lze smazat.
   ============================================================ */
.usp-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 18px;
  margin: 38px 0 10px;
}
.usp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* ikona = PŮVODNÍ PNG obrázek (vkládá se v HTML jako <img>).
   Žádný kruh/chip — jen samotná ikonka, jednotná výška, hover zdvih. */
.usp-ico {
  display: block;
  margin: 0 0 12px;
  line-height: 0;
}
.usp-ico img {
  width: auto;
  height: 64px;
  max-width: 100%;
  transition: transform .25s ease;
}
.usp-item:hover .usp-ico img {
  transform: translateY(-4px);
}
.usp-title {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #ff9933;   /* brand oranžová */
  text-wrap: balance;
}
/* text-wrap: balance = prohlížeč rozloží slova po řádcích rovnoměrně →
   žádné osamocené slovo na posledním řádku ("...pro / školy."). První
   řádek tak vyjde plný, druhý o kousek kratší = hezčí. Kde to prohlížeč
   neumí, chová se to jako dřív (bezpečný fallback). */
.usp-sub {
  margin: 0;
  max-width: 230px;
  font-size: 13px;
  line-height: 1.5;
  color: #797979;
  text-wrap: balance;
}

/* tablet → 2 ve řádku */
@media (max-width: 900px) {
  .usp-row {grid-template-columns: repeat(2, 1fr); gap: 24px 14px;}
}
/* mobil → 2 ve řádku, kompaktnější */
@media (max-width: 560px) {
  .usp-row {gap: 20px 10px; margin: 26px 0 6px;}
  .usp-ico {margin-bottom: 9px;}
  .usp-ico img {height: 54px;}
  .usp-title {font-size: 14px;}
  .usp-sub {font-size: 12px; line-height: 1.45;}
}

/* ============================================================
   HOMEPAGE — RESPONZIVNÍ ŠÍŘKY DLAŽDIC
   ============================================================ */
@media (max-width: 768px) {
  body.type-index .kn_child2 {
    width: 100%;
    margin: 0 0 16px;
    flex-flow: column nowrap;
    align-items: stretch;
    text-align: center;
    gap: 16px;
  }
  body.type-index .cat_img,
  body.type-index .cat_text {flex: 1 1 auto; width: 100%;}
  body.type-index .cat_img img {max-height: 170px;}
  body.type-index .cat_text ul,
  body.type-index .kn_child2 ul {justify-content: center;}
  body.type-index .kn_child4 {width: 48%; padding: 10px;}
}
@media (min-width: 768px) and (max-width: 992px) {
  body.type-index aside {display: none;}
  body.type-index .kn_child2 {width: calc(50% - 7px); margin: 0 0 14px;}
  body.type-index .kn_child4 {width: 22%; margin: 1.5%; padding: 10px;}
}
@media (min-width: 992px) {
  body.type-index .kn_child2 {width: calc(50% - 8px); margin: 0 0 16px;}
  body.type-index .kn_child4 {width: 16%; margin: 0 2%; padding: 10px;}
}

/* ============================================================
   PRODUKTOVÉ KARTY — GLOBÁLNĚ (homepage / kategorie / hledání)
   Stejná Shoptet komponenta všude → styl platí konzistentně.
   CSS-only → SEO netknuté.
   ============================================================ */

/* Grid buňka: pryč dělící čáry, místo nich mezera mezi kartami */
.products-block > .product {
  border: 0 !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

/* Samotná karta (.p uvnitř .product) */
.products-block .p {
  height: 100%;
  background: #fff !important;
  border: 1px solid #ececec !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease !important;
}
.products-block .p:hover {
  border-color: #dbe3e0 !important;
  box-shadow: 0 10px 26px rgba(57, 85, 76, .12) !important;
  transform: translateY(-3px) !important;
}

/* Obrázek — jednotná výška, vycentrovaný */
.products-block .p a.image {
  display: block;
  text-align: center;
  margin-bottom: 12px;
}
.products-block .p a.image img {
  max-height: 170px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}

/* Název — čistý, 2 řádky (Shoptet už má height:45px overflow hidden) */
.products-block .p .name {
  font-size: 15px !important;
  line-height: 1.35 !important;
  height: 65px !important;        /* výška názvu na kartě (přebíjí Shoptetích 45px); mobil má vlastní v mobil.css */
  font-weight: 600 !important;
  color: #2c3531 !important;
  margin-bottom: 12px !important;
}
.products-block .p .name:hover {color: #ff9933 !important;}

/* ── CENA + TLAČÍTKO: stack pod sebe (oprava lámání ceny) ── */
.products-block .p-bottom > div {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}
.products-block .p-bottom .prices,
.products-block .p-bottom .p-tools {
  flex: 0 0 auto !important;
  width: 100% !important;
  text-align: left !important;
}
/* cena → tlačítko: 15px mezera */
.products-block .p-bottom .prices {
  margin: 0 0 20px !important;
}
.products-block .p-bottom .p-tools {
  margin: 0 !important;
}
/* Krátký popis na kartě — PEVNÁ VÝŠKA 250px (text odshora, zbytek prázdný).
   POZOR (test shop 661417): .p-desc je flex-potomek uvnitř .p-bottom a v DOM
   stojí AŽ ZA cenou/tlačítkem → bez order:-1 spadne pod tlačítko!
   Proto: výška na .p-desc (platí všude) + order:-1 jen v .p-bottom (zvedne
   popisek nad cenu i tlačítko = pořadí název → popis → cena → tlačítko). */
.products-block .p-desc {
  height: 90px !important;
  min-height: 90px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: 0 0 12px !important;
  color: #797979 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.products-block .p-bottom .p-desc {
  order: -1 !important;
}
/* "Kč" zůstane u čísla, neláme se */
.products-block .price-final,
.products-block .price-standard {
  white-space: nowrap !important;
}
.products-block .price-final {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #2c3531 !important;
}

/* ── PROHOZENÍ CEN: klasická cena (s DPH, .price-final) NAHOŘE,
   cena bez DPH (.price-additional) POD ní. Řeší se flex-orderem uvnitř
   .prices (obě ceny jsou jeho potomci) → 20px mezera na .prices ke
   tlačítku zůstává správně. Prázdný .price-standard-wrapper-placeholder
   skryjeme (akční „Původně:" ceny nemají -placeholder → zůstanou). */
.products-block .prices {
  display: flex !important;
  flex-direction: column !important;
}
.products-block .prices .price-standard-wrapper-placeholder {
  display: none !important;
}
.products-block .prices .price-final {
  order: 1 !important;
  padding-bottom: 5px !important;
}
.products-block .prices .price-additional {
  order: 2 !important;
}

/* Tlačítko Do košíku / Detail — menší, decentnější */
.products-block .p-tools .btn {
  border-radius: 7px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  padding: 7px 14px !important;
  transition: background .18s ease, opacity .18s ease !important;
}
.products-block .p-tools .btn.add-to-cart-button {
  background: #ff9933 !important;
  border-color: #ff9933 !important;
  color: #fff !important;
}
.products-block .p-tools .btn.add-to-cart-button:hover {
  background: #f57c00 !important;
  border-color: #f57c00 !important;
}
/* místo šipky › ikonka košíku (vlastní SVG, bílá) */
.products-block .p-tools .btn.add-to-cart-button::before {
  content: "" !important;
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 7px 0 0 !important;
  vertical-align: -2px !important;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>') no-repeat center / contain !important;
}

/* ============================================================
   HOMEPAGE — PRODUKTY JAKO CAROUSEL (JEN homepage; kategorie = mřížka)
   Lehký CSS scroll-carousel + šipky (JS staví: homepage-carousel.js).
   Vzhled karet (.p, ceny, tlačítko) se NEMĚNÍ — mění se jen rozložení.
   Vše scopováno body.type-index → na kategorie/produkt nezasahuje.
   ============================================================ */
/* HOMEPAGE: .products-block JE SOUČASNĚ .products (přímo drží .product karty).
   Proto cílíme přímo na .products-block, NE na vnořené .products (to neexistuje)!
   Blok zůstává NA MÍSTĚ (id/order sekcí zachované), nescrolluje a slouží jen
   jako kotva šipek. Karty JS přesune do vnitřní .hp-track (ta scrolluje) —
   kdyby scrolloval blok sám, šipky uvnitř by odscrollovaly s obsahem. */
body.type-index .products-block.hp-ready {
  position: relative !important;
  display: block !important;            /* přebít Shoptet flex-grid z třídy .products */
}

/* Vnitřní dráha (staví JS) = vodorovný scroller s kartami.
   snap MANDATORY + krok JS přesně na hranu karty = plynulé, bez uskakování.
   scroll-behavior NEdáváme do CSS — plynulost řídí JS (scrollTo behavior:smooth),
   ať se dvě animace nepřekrývají. */
body.type-index .products-block .hp-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  border: 0 !important;            /* Shoptet dává .hp-track border-right 1px #dadada → na konci viditelná linka; pryč */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  /* CSS scroll-snap ZRUŠEN — sám posouval scroll na nenulovou pozici (scrollLeft 20)
     → levá šipka se neschovávala. Plynulost i "cvaknutí" řeší JS (scrollTo na hranu
     karty + dorovnání po scrollu). */
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;            /* Firefox: skrýt scrollbar */
}
body.type-index .products-block .hp-track::-webkit-scrollbar {
  display: none !important;                     /* WebKit: skrýt scrollbar */
}
/* Buňky — šířku v px nastaví JS (přesně N bez peeku); tyto hodnoty jsou jen
   FALLBACK do doby, než JS naběhne (taky bez peeku = celé zlomky). */
body.type-index .products-block .hp-track > .product {
  flex: 0 0 25% !important;
  flex-shrink: 0 !important;      /* nesmí se smrsknout (jinak peek) */
  max-width: 25% !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}
@media (max-width: 992px) {
  body.type-index .products-block .hp-track > .product {flex-basis: 33.333% !important; max-width: 33.333% !important;}
}
@media (max-width: 768px) {
  body.type-index .products-block .hp-track > .product {flex-basis: 50% !important; max-width: 50% !important;}
}
@media (max-width: 560px) {
  body.type-index .products-block .hp-track > .product {flex-basis: 100% !important; max-width: 100% !important;}
}

/* Šipky ‹ › — kulaté, překryjí okraje carouselu, vertikálně na střed */
body.type-index .hp-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border: 1px solid #e3e3e3 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background .15s ease, box-shadow .15s ease, opacity .15s ease !important;
}
body.type-index .hp-arrow:hover {
  background: #f7f7f7 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important;
}
/* chevron z bordeů */
body.type-index .hp-arrow::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid #39554c !important;
  border-bottom: 2px solid #39554c !important;
}
/* šipky vysunuté na hranu carouselu (půlka přes okraj) */
body.type-index .hp-arrow.hp-prev {left: -7px !important;}
body.type-index .hp-arrow.hp-prev::before {transform: rotate(135deg) !important; margin-left: 4px !important;}
body.type-index .hp-arrow.hp-next {right: -7px !important;}
body.type-index .hp-arrow.hp-next::before {transform: rotate(-45deg) !important; margin-right: 4px !important;}

/* Schování šipek na krajích (řídí JS třídami hp-at-start / hp-at-end na bloku).
   Na začátku zmizí levá, na konci pravá → zákazník nemá pocit, že lze scrollovat
   tam, kam nejde. Default (uprostřed) = obě viditelné. */
body.type-index .products-block.hp-at-start .hp-prev,
body.type-index .products-block.hp-at-end .hp-next {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Fade-out na okrajích carouselu — místo ostré linky (okraj poslední karty)
   jemné prolnutí do bílé. Mizí na příslušném kraji (start/end). z-index 3 =
   nad kartami, pod šipkami (5). */
body.type-index .products-block.hp-ready::before,
body.type-index .products-block.hp-ready::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 46px !important;
  z-index: 3 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity .2s ease !important;
}
body.type-index .products-block.hp-ready::before {
  left: 0 !important;
  background: linear-gradient(to right, #fff 18%, rgba(255, 255, 255, 0)) !important;
}
body.type-index .products-block.hp-ready::after {
  right: 0 !important;
  background: linear-gradient(to left, #fff 18%, rgba(255, 255, 255, 0)) !important;
}
body.type-index .products-block.hp-at-start::before {opacity: 0 !important;}
body.type-index .products-block.hp-at-end::after {opacity: 0 !important;}

/* ============================================================
   KATEGORIE — DLAŽDICE PODKATEGORIÍ (ul.subcategories.with-image)
   Kompaktní dlaždice se světle oranžovým "podmazem" (à la Alza v našich
   barvách): jen IKONA + NÁZEV, BEZ šipky, nižší. Scope body.type-category.
   CSS-only → SEO netknuté. Struktura: ul > li > a > span.image>img + span.text.
   ============================================================ */
body.type-category ul.subcategories.with-image {
  display: flex !important;
  flex-flow: row wrap !important;
  gap: 14px !important;
  list-style: none !important;
  margin: 22px 0 10px !important;
  padding: 0 !important;
}
/* buňka → 4 na řádek desktop (přebít Bootstrap col-*) */
body.type-category ul.subcategories.with-image > li {
  flex: 0 0 calc(25% - 10.5px) !important;
  max-width: calc(25% - 10.5px) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* karta = světle oranžový podmaz, bez rámečku, kompaktní (nižší) */
body.type-category ul.subcategories.with-image > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
  background: #fff5e8 !important;
  border: 1px solid #ffe9cf !important;   /* jemné zvýraznění v hover barvě */
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}
body.type-category ul.subcategories.with-image > li > a:hover {
  background: #ffe9cf !important;         /* jen tmavší odstín, bez zdvihu a stínu */
}
/* ikona vlevo — menší (nižší dlaždice) */
body.type-category ul.subcategories.with-image .image {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 46px !important;
  margin: 0 !important;
}
body.type-category ul.subcategories.with-image .image img {
  max-width: 100% !important;
  max-height: 46px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  /* odfiltrovat bílé pozadí obrázku → prolne se do podmazu (bílá × pozadí = pozadí).
     Funguje na čistě bílé pozadí; u průhledných PNG (produkce) je neškodné. */
  mix-blend-mode: multiply !important;
}
/* název */
body.type-category ul.subcategories.with-image .text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #2c3531 !important;
}
/* ŽÁDNÁ šipka — skrýt všechny pseudo-chevrony (Shoptet vlevo i náš dřívější vpravo) */
body.type-category ul.subcategories.with-image a::before,
body.type-category ul.subcategories.with-image a::after,
body.type-category ul.subcategories.with-image .text::before,
body.type-category ul.subcategories.with-image .text::after,
body.type-category ul.subcategories.with-image .image::before,
body.type-category ul.subcategories.with-image .image::after,
body.type-category ul.subcategories.with-image li::before,
body.type-category ul.subcategories.with-image li::after {
  display: none !important;
  content: none !important;
}
/* responzivní šířky */
@media (max-width: 1200px) {
  body.type-category ul.subcategories.with-image > li {flex-basis: calc(33.333% - 9.34px) !important; max-width: calc(33.333% - 9.34px) !important;}
}
@media (max-width: 768px) {
  body.type-category ul.subcategories.with-image > li {flex-basis: calc(50% - 7px) !important; max-width: calc(50% - 7px) !important;}
}
@media (max-width: 460px) {
  body.type-category ul.subcategories.with-image > li {flex-basis: 100% !important; max-width: 100% !important;}
}

/* ============================================================
   DETAIL PRODUKTU — sjednocené, modernější dropdowny variant/příplatků
   (Varianta + příplatky jsou nativní <select> v .p-detail.)
   Scope body.type-product. CSS-only → nemění funkci ani HTML, jen vzhled.
   ============================================================ */
body.type-product .p-detail select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  max-width: 340px !important;        /* dropdown není moc široký → popisek má místo */
  height: auto !important;
  padding: 11px 42px 11px 15px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  color: #2c3531 !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7672' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 13px !important;
  border: 1.5px solid #dfe3e1 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
body.type-product .p-detail select:hover {border-color: #c2cac6 !important;}
body.type-product .p-detail select:focus {
  border-color: #39554c !important;
  box-shadow: 0 0 0 3px rgba(57, 85, 76, .12) !important;
  outline: none !important;
}

/* ── ŠÍŘKA: popisek (th) víc místa, ať se i delší text vejde s "?" na řádek ── */
body.type-product .p-detail tr.surcharge-list > th,
body.type-product .p-detail tr.variant-list > th {
  width: 47% !important;
  vertical-align: middle !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}
body.type-product .p-detail tr.surcharge-list > td,
body.type-product .p-detail tr.variant-list > td {
  vertical-align: middle !important;
}

/* ── PANEL: konfigurátor (tabulka variant + příplatků) jako jemná karta.
   :has(tr.surcharge-list) zacílí JEN konfigurační tabulku, ne tabulku parametrů. ── */
body.type-product .p-detail table:has(tr.surcharge-list) {
  background: #f7f8f8 !important;
  border: 1px solid #e7ebea !important;
  border-radius: 14px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin: 8px 0 18px !important;
}
body.type-product .p-detail table:has(tr.surcharge-list) th {padding: 6px 14px 6px 18px !important;}
body.type-product .p-detail table:has(tr.surcharge-list) td {padding: 6px 18px 6px 6px !important;}

/* ── Vzdušnost: padding okolo CELÉHO detailu (název + obrázek + buy-box
   = .p-detail-inner) → obsah není nalepený na kraje. ── */
body.type-product .p-detail-inner {
  box-sizing: border-box !important;
  padding: 14px 28px 28px !important;
}

/* ── POČÍTADLO + TLAČÍTKO = jeden zaoblený tvar (počítadlo zaoblené jen vlevo,
   tlačítko jen vpravo), flush vedle sebe, stejná výška, tlačítko širší. ── */
body.type-product .p-detail .add-to-cart {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}
body.type-product .p-detail .add-to-cart .quantity {
  margin: 0 !important;
  border-radius: 9px 0 0 9px !important;   /* zaoblení jen vlevo nahoře/dole */
  overflow: hidden !important;
}
body.type-product .p-detail .add-to-cart .quantity,
body.type-product .p-detail .add-to-cart .quantity > input {
  border-color: #dfe3e1 !important;
}
body.type-product .p-detail .add-to-cart .add-to-cart-button {
  margin: 0 !important;
  border-radius: 0 9px 9px 0 !important;    /* zaoblení jen vpravo nahoře/dole */
  padding-left: 34px !important;
  padding-right: 34px !important;
}
/* místo šipky › ikonka košíku (bílá) — stejná jako u karet, přebíjí Shoptet ::before */
body.type-product .p-detail .add-to-cart .add-to-cart-button::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 9px 0 0 !important;
  vertical-align: -3px !important;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>') no-repeat center / contain !important;
}

/* ============================================================
   KOŠÍK (body.in-kosik) — čistší, přehlednější položky + souhrn.
   CSS-only. Struktura: table.cart-table > tr.removeable > td.(cart-p-image |
   p-name | p-availability | p-quantity | p-price | p-total).
   Sidebar: .sidebar-in-cart > .box.box-bg-default (pomoc) + .summary-wrapper
   .box (souhrn) + .next-step tlačítka. Počítadlo = .quantity (jako na detailu).
   ============================================================ */
/* ── Položky: jasně oddělené řádky, vzdušnější, čitelnější ── */
body.in-kosik .cart-table {border-collapse: collapse !important; width: 100% !important;}
body.in-kosik .cart-table tr.removeable {border-bottom: 1px solid #ececec !important;}
body.in-kosik .cart-table tr.removeable td {
  padding: 11px 12px !important;
  vertical-align: middle !important;
  border: 0 !important;
  background: transparent !important;
}
body.in-kosik .cart-table .cart-p-image {width: 72px !important;}
body.in-kosik .cart-table .cart-p-image img {
  width: 64px !important;
  height: auto !important;
  border-radius: 10px !important;
  border: 1px solid #f0f0f0 !important;
  display: block !important;
}
/* šířky sloupců — názvu co nejvíc místa (→ méně řádků), ostatní kompaktně */
body.in-kosik .cart-table .p-name {width: 42% !important;}
body.in-kosik .cart-table .p-availability {width: 92px !important;}
body.in-kosik .cart-table .p-quantity {width: 76px !important;}
body.in-kosik .cart-table .p-price,
body.in-kosik .cart-table .p-total {white-space: nowrap !important;}
body.in-kosik .cart-table .p-name .main-link {
  font-weight: 600 !important;
  color: #2c3531 !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
  text-transform: none !important;     /* normální velikost písmen (ne VERZÁLKY) */
  text-decoration: none !important;
}
body.in-kosik .cart-table .p-name .main-link:hover {color: #ff9933 !important;}
body.in-kosik .cart-table .main-link-variant,
body.in-kosik .cart-table .main-link-surcharges {
  display: block !important;
  color: #797979 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin-top: 3px !important;
}
body.in-kosik .cart-table .availability-label {color: #39554c !important; font-weight: 600 !important; font-size: 14px !important;}
body.in-kosik .cart-table .price-final {color: #2c3531 !important; font-weight: 700 !important; white-space: nowrap !important;}
body.in-kosik .cart-table .unit-value {color: #797979 !important; font-size: 13px !important;}
/* počítadlo — zaoblené, laděné se zbytkem */
body.in-kosik .cart-table .quantity {border-radius: 9px !important; overflow: hidden !important;}
body.in-kosik .cart-table .quantity,
body.in-kosik .cart-table .quantity input.amount {border-color: #dfe3e1 !important;}
/* odebrat položku — decentní */
body.in-kosik .cart-table .remove-item {opacity: .55 !important; transition: opacity .15s ease !important;}
body.in-kosik .cart-table .remove-item:hover {opacity: 1 !important;}

/* ── Sidebar: čisté karty (pomoc + souhrn) ── */
body.in-kosik .sidebar-in-cart .box {
  background: #fff !important;
  border: 1px solid #ececec !important;
  border-radius: 14px !important;
  padding: 22px !important;
}
body.in-kosik .sidebar-in-cart .box {margin-bottom: 0 !important;}   /* Shoptet tam dává velký margin → kolabuje jako mezera mezi kartami */
body.in-kosik .checkout-box-wrapper {margin-bottom: -15px !important;}  /* záporný margin přitáhne souhrn nahoru (uživatel odladil v devtools) */
body.in-kosik .summary-wrapper {margin-top: 0 !important;}
body.in-kosik .checkout-box-wrapper > h2.h4 {color: #39554c !important; font-weight: 700 !important; margin-bottom: 14px !important;}
body.in-kosik .contact-box img {border-radius: 50% !important; width: 70px !important; height: 70px !important; object-fit: cover !important;}
/* souhrn cen — zarovnané řádky: popisek vlevo, částka vpravo (grid 2 sloupce) */
body.in-kosik .summary-wrapper .price-wrapper {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 9px 12px !important;
  align-items: center !important;
}
body.in-kosik .summary-wrapper .price-wrapper .price-label {text-align: left !important; margin: 0 !important;}
body.in-kosik .summary-wrapper .price-wrapper .price {text-align: right !important; white-space: nowrap !important; margin: 0 !important;}
body.in-kosik .summary-wrapper .price-label.price-primary {font-weight: 600 !important; color: #2c3531 !important;}
body.in-kosik .summary-wrapper strong.price.price-primary {font-size: 21px !important; font-weight: 800 !important; color: #39554c !important;}
body.in-kosik .summary-wrapper .price-secondary {font-size: 13px !important; color: #797979 !important;}
/* tlačítka souhrnu */
body.in-kosik .next-step--cart .btn {border-radius: 9px !important;}
body.in-kosik .next-step-forward.btn-conversion {background: #ff9933 !important; border-color: #ff9933 !important;}
body.in-kosik .next-step-forward.btn-conversion:hover {background: #f57c00 !important; border-color: #f57c00 !important;}
body.in-kosik .next-step-back .continue-shopping {white-space: nowrap !important;}

/* ============================================================
   CHECKOUT — HOTOVÉ KROKY (1/2/3) ORANŽOVĚ VYPLNĚNÉ
   Scope body.ordering-process (košík + všechny kroky objednávky).
   Hotový krok = li.step.completed (jazykově neutrální). Kolečko s číslem
   = .step::before (Safari hlásí content:none, ale ::before JE to kolečko).
   CSS-only → vybarví jen už dokončené kroky, aktivní/budoucí beze změny.
   ============================================================ */
body.ordering-process .cart-header .step.completed span::before {
  background-color: #ff9933 !important;
  border-color: #ff9933 !important;
  color: #fff !important;
}

/* ============================================================
   CHECKOUT — REKAPITULACE OBJEDNÁVKY (.order-summary-inner) čistě
   Scope body.ordering-process (na /kosik/ .order-summary-inner není → bezpečné).
   Struktura: .order-summary-inner > h2.h4 + .cart-items > .cart-item
   (.cart-item-name > a.main-link + spans | .cart-item-amount | .cart-item-price)
   + souhrn (.price-wrapper). Sjednoceno s košíkem.
   ============================================================ */
body.ordering-process .order-summary-inner > h2.h4 {
  color: #39554c !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}
body.ordering-process .order-summary-inner .cart-item {
  border-bottom: 1px solid #ececec !important;
}
body.ordering-process .order-summary-inner .cart-item-name .main-link {
  text-transform: none !important;       /* normální velikost místo verzálek */
  font-weight: 600 !important;
  color: #2c3531 !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}
body.ordering-process .order-summary-inner .main-link-variant,
body.ordering-process .order-summary-inner .main-link-surcharges {
  display: block !important;
  color: #797979 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin-top: 3px !important;
}
body.ordering-process .order-summary-inner .cart-item-price,
body.ordering-process .order-summary-inner .cart-item-amount {white-space: nowrap !important;}
body.ordering-process .order-summary-inner .cart-item-price {font-weight: 700 !important; color: #2c3531 !important;}
/* souhrn cen — zarovnané, zelená celková */
body.ordering-process .order-summary-inner .price-wrapper {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px 12px !important;
  align-items: center !important;
}
body.ordering-process .order-summary-inner .price-wrapper .price {text-align: right !important; white-space: nowrap !important;}
body.ordering-process .order-summary-inner strong.price.price-primary {color: #39554c !important;}
body.ordering-process .order-summary-inner .price-secondary {color: #797979 !important;}
/* zaoblení rohů: oranžový box "Potřebujete pomoc?" + tlačítka kroků (Pokračovat/Zpět) */
body.ordering-process .toggle-contacts {border-radius: 12px !important;}
body.ordering-process .next-step .btn,
body.ordering-process .next-step-forward,
body.ordering-process .next-step-back {border-radius: 9px !important;}