/* ===========================================
   WORKA.CZ – karty produktů ve výpisu kategorie
   Šedý panel, bílé zaoblené karty se stínem (stejně jako podkategorie a Nejprodávanější).
   Jen vzhled – texty (název, krátký popis, cena) zůstávají v HTML beze změny.
   Platí pro výpis v kategorii (#products) i pro karusely produktů na titulní stránce (.slick-track).
   Načítat v ZÁHLAVÍ:
   <link rel="stylesheet" href="/user/documents/upload/kat-karty.css">
   =========================================== */

/* ---- PANEL VÝPISU ---- */
#products.products {
  background: #f6f6f6 !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 6px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- BUŇKA = mezera mezi kartami ---- */
:is(#products, .slick-track) > .product {
  padding: 6px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
:is(#products, .slick-track) > .product::before,
:is(#products, .slick-track) > .product::after { border: 0 !important; }

/* ---- KARTA ---- */
:is(#products, .slick-track) .product > .p {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 12px 14px 14px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .07) !important;
  overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
:is(#products, .slick-track) .product > .p:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12) !important;
  transform: translateY(-2px);
}

/* obrázek */
:is(#products, .slick-track) .p > a.image {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
}
:is(#products, .slick-track) .p > a.image img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  transition: transform .25s;
}
:is(#products, .slick-track) .p:hover > a.image img { transform: scale(1.03); }

/* štítky (Akce, Novinka, Doprava zdarma…) – jen zaoblení */
:is(#products, .slick-track) .flags .flag,
:is(#products, .slick-track) .flag {
  border-radius: 6px !important;
  font-weight: 700 !important;
}

/* obsah pod obrázkem */
:is(#products, .slick-track) .p-in {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
}
:is(#products, .slick-track) .p-in-in { margin: 0 !important; padding: 0 !important; }

/* název – max. 3 řádky, stejná výška u všech karet */
:is(#products, .slick-track) .p .name {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.9em;
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: #1a1a1a !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  text-decoration: none !important;
}
:is(#products, .slick-track) .p .name span { font: inherit !important; color: inherit !important; }
:is(#products, .slick-track) .p:hover .name { color: #067e34 !important; }
:is(#products, .slick-track) .ratings-wrapper { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
:is(#products, .slick-track) .stars-placeholder:empty { display: none !important; }

/* spodní část: popis → cena → tlačítko */
:is(#products, .slick-track) .p-bottom {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
}
:is(#products, .slick-track) .p-bottom > [data-micro="offer"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
}
:is(#products, .slick-track) [data-micro="offer"] > .p-desc { order: 1; }
:is(#products, .slick-track) [data-micro="offer"] > .prices { order: 2; margin-top: auto !important; }
:is(#products, .slick-track) [data-micro="offer"] > .p-tools { order: 3; }

/* krátký popis – 2 řádky šedě (celý text zůstává v HTML) */
:is(#products, .slick-track) .p-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: #777 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

/* dostupnost, cena, cena bez DPH */
:is(#products, .slick-track) .prices {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px;
  margin: 0 0 10px !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid #eef1ef !important;
  text-align: left !important;
}
:is(#products, .slick-track) .prices .availability { order: 0; margin: 0 0 4px !important; font-size: 12.5px !important; font-weight: 600 !important; }
:is(#products, .slick-track) .prices .availability span { font-size: inherit !important; }
:is(#products, .slick-track) .prices .availability-amount { font-weight: 400 !important; opacity: .8; }
:is(#products, .slick-track) .prices .price-standard-wrapper,
:is(#products, .slick-track) .prices .price-standard { order: 1; font-size: 12.5px !important; color: #999 !important; }
:is(#products, .slick-track) .prices .price-final {
  order: 2;
  margin: 0 !important;
  color: #1a1a1a !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}
:is(#products, .slick-track) .prices .price-final strong { font: inherit !important; color: inherit !important; }
:is(#products, .slick-track) .price-final .pr-list-unit { font-size: 12px !important; font-weight: 400 !important; color: #888 !important; }
:is(#products, .slick-track) .prices .price-additional {
  order: 3;
  margin: 0 !important;
  color: #888 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

/* tlačítko Do košíku – zelené přes celou šířku */
:is(#products, .slick-track) .p-tools {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
}
:is(#products, .slick-track) .p-tools form { margin: 0 !important; }
:is(#products, .slick-track) .p-tools .btn,
:is(#products, .slick-track) .p-tools .btn-cart {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  min-height: 42px;
  margin: 0 !important;
  padding: 0 14px !important;
  background: #067e34 !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background .15s;
}
:is(#products, .slick-track) .p-tools .btn-cart::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.1L21 8H6.2'/%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='17.5' cy='20' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(#products, .slick-track) .p-tools .btn:hover { background: #05692b !important; }
:is(#products, .slick-track) .p-tools .btn span { font: inherit !important; color: inherit !important; }

/* kód produktu – malý šedý pod tlačítkem */
:is(#products, .slick-track) .p .p-code {
  display: block !important;
  position: static !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  color: #aaa !important;
  font-size: 11.5px !important;
  text-align: left !important;
}

/* ---- MOBIL ---- */
@media (max-width: 767px) {
  #products.products { padding: 3px !important; border-radius: 12px !important; }
  :is(#products, .slick-track) > .product { padding: 3px !important; }
  :is(#products, .slick-track) .product > .p { padding: 8px 9px 10px !important; border-radius: 10px !important; }
  :is(#products, .slick-track) .p .name { font-size: 13px !important; }
  :is(#products, .slick-track) .p-desc { display: none !important; }
  :is(#products, .slick-track) .prices .price-final { font-size: 17px !important; }
  :is(#products, .slick-track) .p-tools .btn { min-height: 40px; font-size: 13px !important; }
}

/* ---- OPRAVY podle živé šablony ---- */
/* zbytečná mezera pod názvem */
:is(#products, .slick-track) .p-in-in,
:is(#products, .slick-track) .p .name { height: auto !important; max-height: none; }
:is(#products, .slick-track) .p-in-in { min-height: 0 !important; }
:is(#products, .slick-track) .p .name { max-height: 3.9em !important; }

/* krátký popis – opravdu jen 2 řádky */
:is(#products, .slick-track) .p-desc {
  height: auto !important;
  max-height: 2.9em !important;
  min-height: 0 !important;
}

/* dostupnost a cena zarovnat doleva */
:is(#products, .slick-track) .p-bottom,
:is(#products, .slick-track) .p-bottom > div,
:is(#products, .slick-track) .prices {
  width: 100% !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
:is(#products, .slick-track) .prices > * {
  align-self: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
  justify-content: flex-start !important;
}

/* tlačítko Do košíku – šablona ho vysouvá z boku, vrátit pod cenu */
:is(#products, .slick-track) .p-tools,
:is(#products, .slick-track) .p-tools form,
:is(#products, .slick-track) .p-tools .btn {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
}
:is(#products, .slick-track) .p-tools .btn { min-height: 42px !important; }

/* „+ Prodloužená záruka“ a další doplňky pod názvem – nepřekrývat název */
:is(#products, .slick-track) .p-in-in > *:not(.name) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin-top: 2px !important;
}
:is(#products, .slick-track) .p .name { position: relative !important; z-index: 1; }

/* blok s cenou a tlačítkem: na webu nemá atribut data-micro, cílit obecně */
:is(#products, .slick-track) .p-bottom > div {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
}
:is(#products, .slick-track) .p-bottom > div > .p-desc { order: 1; }
:is(#products, .slick-track) .p-bottom > div > .prices { order: 2; margin-top: auto !important; }
:is(#products, .slick-track) .p-bottom > div > .p-tools { order: 3; width: 100% !important; height: auto !important; }

/* =====  KOMPAKTNĚJŠÍ KARTA (v3)  ===== */
/* šablona drží pevné výšky – zrušit, ať se nic nepřekrývá */
:is(#products, .slick-track) .product > .p,
:is(#products, .slick-track) .p-in,
:is(#products, .slick-track) .p-bottom,
:is(#products, .slick-track) .p-bottom > div { height: auto !important; min-height: 0 !important; max-height: none !important; }
:is(#products, .slick-track) .product > .p { height: 100% !important; padding: 10px 12px 12px !important; }

/* menší obrázek */
:is(#products, .slick-track) .p > a.image { height: 170px !important; margin: 0 0 8px !important; overflow: hidden; }
:is(#products, .slick-track) .p > a.image img { max-height: 170px !important; width: auto !important; }

/* název max. 2 řádky, všude stejně vysoký */
:is(#products, .slick-track) .p .name { -webkit-line-clamp: 2 !important; min-height: 2.6em !important; max-height: 2.6em !important; font-size: 14px !important; }

/* záruka a podobné doplňky drobněji */
:is(#products, .slick-track) .p-in-in > *:not(.name) { font-size: 12px !important; line-height: 1.3 !important; margin: 4px 0 0 !important; }

/* krátký popis ve výpisu nezobrazovat (text zůstává v HTML) */
:is(#products, .slick-track) .p-desc { display: none !important; }

/* cena a pod ní široké tlačítko Do košíku */
:is(#products, .slick-track) .p-bottom > div {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  margin-top: auto !important;
}
:is(#products, .slick-track) .p-bottom > div > .prices {
  width: 100% !important;
  margin: auto 0 10px !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid #eef1ef !important;
  align-items: flex-start !important;
  text-align: left !important;
}
:is(#products, .slick-track) .prices,
:is(#products, .slick-track) .prices > * { margin-left: 0 !important; float: none !important; }
:is(#products, .slick-track) .p-tools .btn,
:is(#products, .slick-track) .p-tools .btn-cart { width: 100% !important; height: 42px !important; min-height: 42px !important; }
:is(#products, .slick-track) .prices .price-final { font-size: 19px !important; }

/* kód produktu nahoru vpravo do rohu obrázku, ať nepřekáží */
:is(#products, .slick-track) .p .p-code {
  position: absolute !important;
  top: 10px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2;
  margin: 0 !important;
  padding: 2px 6px !important;
  background: rgba(255, 255, 255, .85) !important;
  border-radius: 6px;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

@media (max-width: 767px) {
  :is(#products, .slick-track) .p > a.image { height: 120px !important; }
  :is(#products, .slick-track) .p > a.image img { max-height: 120px !important; }
  :is(#products, .slick-track) .p .name { font-size: 12.5px !important; }
  :is(#products, .slick-track) .prices .price-final { font-size: 16px !important; }
}

/* začátek krátkého popisu zpět – 2 řádky nad cenou */
:is(#products, .slick-track) .p-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 0 0 100% !important;
  order: 0 !important;
  max-height: 2.9em !important;
  margin: 0 0 4px !important;
}

/* štítek Doprava zdarma (kolečko) – neořezávat, nechat původní tvar šablony */
:is(#products, .slick-track) .product > .p,
:is(#products, .slick-track) .p > a.image { overflow: visible !important; }

/* =====  MOBIL – finální úpravy (musí být na konci souboru)  ===== */
@media (max-width: 767px) {
  /* popis a kód na mobilu nezobrazovat (text zůstává v HTML) */
  :is(#products, .slick-track) .p-desc,
  :is(#products, .slick-track) .p .p-code { display: none !important; }
  /* tlačítko Do košíku na mobilu šablona skrývá – nenechávat po něm prázdné místo */
  :is(#products, .slick-track) .p-bottom > div > .p-tools { display: none !important; }
  :is(#products, .slick-track) .p-bottom > div > .prices { margin-bottom: 0 !important; }
  :is(#products, .slick-track) .product > .p { padding: 8px 9px 10px !important; }
  :is(#products, .slick-track) .p > a.image { height: 120px !important; margin-bottom: 6px !important; }
  :is(#products, .slick-track) .p .name { font-size: 13px !important; }
  :is(#products, .slick-track) .prices .price-final { font-size: 16px !important; white-space: nowrap; }
  :is(#products, .slick-track) .prices .availability,
  :is(#products, .slick-track) .prices .price-additional { font-size: 11.5px !important; }
}

/* =====  KLID A ZAROVNÁNÍ (v8) – pevné výšky, ať nic neodskakuje  ===== */
/* tlačítko Do košíku v kartě nezobrazovat (košík je na detailu produktu) */
:is(#products, .slick-track) .p-bottom > div > .p-tools { display: none !important; }

/* pevná výška obrázku */
:is(#products, .slick-track) .p > a.image { height: 170px !important; }

/* název 2 řádky + místo pro „Prodloužená záruka“ – stejně vysoké u všech karet */
:is(#products, .slick-track) .p-in-in {
  display: flex !important;
  flex-direction: column !important;
  height: calc(2.6em + 24px) !important;
  min-height: calc(2.6em + 24px) !important;
  overflow: hidden !important;
  font-size: 14px !important;
}
:is(#products, .slick-track) .p .name { flex: none !important; }
:is(#products, .slick-track) .p-in-in > *:not(.name) { flex: none !important; max-height: 20px !important; overflow: hidden !important; white-space: nowrap; }

/* popis vždy přesně 2 řádky (i když je kratší) */
:is(#products, .slick-track) .p-desc {
  height: 2.9em !important;
  min-height: 2.9em !important;
  max-height: 2.9em !important;
  margin: 4px 0 8px !important;
}

/* cena hned pod popisem, bez natahování */
:is(#products, .slick-track) .p-bottom > div > .prices { margin: 0 !important; }

@media (max-width: 767px) {
  :is(#products, .slick-track) .p > a.image { height: 110px !important; }
  /* na mobilu bez řádku se zárukou – jen název ve 2 řádcích */
  :is(#products, .slick-track) .p-in-in { height: 2.6em !important; min-height: 2.6em !important; font-size: 13px !important; }
  :is(#products, .slick-track) .p-in-in > *:not(.name) { display: none !important; }
  :is(#products, .slick-track) .p .name { font-size: 13px !important; }
  :is(#products, .slick-track) .p-desc { display: none !important; }
}
@media (max-width: 767px) {
  :is(#products, .slick-track) .p-bottom > div > .prices { margin-top: 6px !important; padding-top: 6px !important; }
}

/* košík zpět – pod cenou, menší (v9) */
:is(#products, .slick-track) .p-bottom > div > .p-tools { display: block !important; margin-top: 10px !important; }
:is(#products, .slick-track) .p-tools .btn,
:is(#products, .slick-track) .p-tools .btn-cart { width: 100% !important; height: 38px !important; min-height: 38px !important; font-size: 13.5px !important; border-radius: 9px !important; }
:is(#products, .slick-track) .p-tools .btn-cart::before { width: 16px; height: 16px; }
@media (max-width: 767px) {
  :is(#products, .slick-track) .p-bottom > div > .p-tools { display: none !important; }
}

/* košík jako malé tlačítko vpravo vedle ceny (v10) */
:is(#products, .slick-track) .p-bottom > div { position: relative !important; }
:is(#products, .slick-track) .p-bottom > div > .prices { padding-right: 56px !important; box-sizing: border-box !important; }
:is(#products, .slick-track) .p-bottom > div > .p-tools {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  width: 46px !important;
  margin: 0 !important;
}
:is(#products, .slick-track) .p-bottom > div > .p-tools form,
:is(#products, .slick-track) .p-tools .btn,
:is(#products, .slick-track) .p-tools .btn-cart {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}
:is(#products, .slick-track) .p-tools .btn-cart::before { width: 21px; height: 21px; }
:is(#products, .slick-track) .p-tools .btn > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
@media (max-width: 767px) {
  :is(#products, .slick-track) .p-bottom > div > .prices { padding-right: 0 !important; }
}

/* víc vzduchu kolem obrázku: pod kódem nahoře a nad názvem (v11) */
:is(#products, .slick-track) .p > a.image { margin: 22px 0 16px !important; }
@media (max-width: 767px) {
  :is(#products, .slick-track) .p > a.image { margin: 4px 0 10px !important; }
}

/* mobil: štítky (Doprava zdarma, sleva, Novinka…) zmenšit do rohu obrázku (v12) */
@media (max-width: 767px) {
  :is(#products, .slick-track) .p .flags,
  :is(#products, .slick-track) .p .flags-extra,
  :is(#products, .slick-track) .p .flags-default {
    transform: scale(.58) !important;
    transform-origin: top right !important;
    top: 4px !important;
    right: 4px !important;
    left: auto !important;
    z-index: 3;
  }
  :is(#products, .slick-track) .p .flags-default { transform-origin: top left !important; left: 4px !important; right: auto !important; }
  /* hvězdičky hodnocení menší */
  :is(#products, .slick-track) .p .stars-wrapper,
  :is(#products, .slick-track) .p .stars { transform: scale(.75); transform-origin: left bottom; }
}

/* ===== TITULNÍ STRÁNKA – karusely produktů (slick) ===== */
.slick-track > .product {
  box-sizing: border-box !important;
  height: auto !important;
  float: none !important;
  padding: 6px !important;
  border: 0 !important;
  background: none !important;
}
.slick-track:has(> .product) { display: flex !important; align-items: stretch !important; }
.slick-list:has(> .slick-track > .product) { padding-top: 4px !important; padding-bottom: 10px !important; }