/*
 * ============================================================
 *  03 – KATEGORIE, PODKATEGORIE, FILTRY & VÝPIS PRODUKTŮ
 *  Původní soubory: primakoupelny2.css, primakoupelny3b.css,
 *                   primakoupelny5.css, buttony-tlacitka-1.css,
 *                   primakoupelny-parametry.css, styly.css (filtry)
 *  Optimalizace: sloučení duplikátních :is() bloků, konsolidace
 *                media queries, oprava fallbacků pro :has()
 * ============================================================
 */


/* =============================================================
   CSS PROMĚNNÉ – tlačítka podkategorií
   ============================================================= */

:root {
  --btn-bg:             #ecf5fe;
  --btn-bg-hover:       #D9EBFD;
  --btn-radius:         4px;
  --btn-text:           #24242E;
  --btn-h:              52px;
  --btn-h-mobile:       56px;

  --ico-slot-w:         55px;
  --ico-slot-h:         45px;
  --ico-max:            45px;

  --logo-max:           30px;
  --text-gap:           10px;

  --highlight-bg:       #ffe9eb;
  --highlight-bg-hover: #ffd8db;
}


/* =============================================================
   SUBCATEGORIES / SEO-SUBCATEGORIES – sdílený selektor
   Konsolidováno: původně 6× opakovaný :is() blok
   ============================================================= */

/* Alias pro čitelnost: použit lokální custom property pro společný základ */
:is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  body.type-post .subcategories.with-image
) {
  display:         flex !important;
  flex-wrap:       wrap !important;
  align-items:     stretch !important;
  padding:         4px 0 !important;
  margin:          0 -6px 12px -6px !important;
  position:        relative !important;
}

/* Resetování pseudo-elementů wrapperu */
:is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  body.type-post .subcategories.with-image,
  .subcategories,
  .seo-subcategories
)::before,
:is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  body.type-post .subcategories.with-image,
  .subcategories,
  .seo-subcategories
)::after {
  height: 0 !important;
}

.subcategories,
.seo-subcategories {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
}

.category-perex { margin-bottom: 0 !important; }


/* =============================================================
   SUBCATEGORIES / SEO-SUBCATEGORIES – LI
   ============================================================= */

:is(
  .subcategories.seo-subcategories.with-image li,
  .seo-subcategories.with-image li,
  body.type-post .subcategories.with-image li
) {
  list-style:  none !important;
  flex:        0 0 auto !important;
  padding:     4px !important;
  box-sizing:  border-box !important;
}

/* Mezera mezi nadpisem a první řadou tlačítek */
:is(h1,h2,h3,.h1,.h2,.h3) + :is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  .subcategories.with-image
) {
  margin-top: 0 !important;
}

@supports selector(:has(*)) {
  :is(h1,h2,h3,.h1,.h2,.h3):has(+ :is(
    .subcategories.seo-subcategories.with-image,
    .seo-subcategories.with-image,
    .subcategories.with-image
  )) {
    margin-bottom: 10px !important;
  }
}


/* =============================================================
   SUBCATEGORIES – TLAČÍTKO (A)
   ============================================================= */

:is(
  .subcategories.seo-subcategories.with-image li a,
  .seo-subcategories.with-image li a,
  body.type-post .subcategories.with-image li a
) {
  display:          flex !important;
  align-items:      center !important;
  position:         relative !important;
  height:           var(--btn-h) !important;
  padding:          6px 10px !important;
  font-weight:      bold !important;
  text-decoration:  none !important;
  background-color: var(--btn-bg) !important;
  border-radius:    var(--btn-radius) !important;
  box-shadow:       inset 0 -1px 0 0 rgba(0, 0, 0, .1) !important;
  border:           0 !important;
  color:            var(--btn-text) !important;
  transition:       background-color 0.15s ease;
}

/* Hover – normální tlačítko */
:is(
  .subcategories.seo-subcategories.with-image li:not(.highlitedsub) a:hover,
  .seo-subcategories.with-image li:not(.highlitedsub) a:hover,
  body.type-post .subcategories.with-image li:not(.highlitedsub) a:hover
) {
  background-color: var(--btn-bg-hover) !important;
}

/* Skrýt pseudo-elementy ::before / ::after tlačítek */
:is(
  .subcategories.seo-subcategories.with-image li a,
  .seo-subcategories.with-image li a,
  body.type-post .subcategories.with-image li a,
  .subcategories li a,
  .seo-subcategories li:not(.highlitedsub) a
)::before,
:is(
  .subcategories.seo-subcategories.with-image li a,
  .seo-subcategories.with-image li a,
  body.type-post .subcategories.with-image li a,
  .subcategories li a,
  .seo-subcategories li:not(.highlitedsub) a
)::after {
  display: none !important;
}

/* Stín – obecné subcategories bez with-image */
.subcategories li a { box-shadow: none; }


/* =============================================================
   SUBCATEGORIES – ZVÝRAZNĚNÍ (.highlitedsub)
   ============================================================= */

:is(
  .subcategories.seo-subcategories.with-image li.highlitedsub a,
  .seo-subcategories.with-image li.highlitedsub a,
  body.type-post .subcategories.with-image li.highlitedsub a,
  .highlitedsub a
) {
  background: var(--highlight-bg) !important;
}

:is(
  .subcategories.seo-subcategories.with-image li.highlitedsub a:hover,
  .seo-subcategories.with-image li.highlitedsub a:hover,
  body.type-post .subcategories.with-image li.highlitedsub a:hover,
  .highlitedsub a:hover
) {
  background: var(--highlight-bg-hover) !important;
}


/* =============================================================
   SUBCATEGORIES – IKONA (.image)
   ============================================================= */

:is(
  .subcategories.seo-subcategories.with-image li a .image,
  .seo-subcategories.with-image li a .image,
  body.type-post .subcategories.with-image li a .image
) {
  flex:            0 0 var(--ico-slot-w) !important;
  width:           var(--ico-slot-w) !important;
  height:          var(--ico-slot-h) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  overflow:        hidden !important;
}

:is(
  .subcategories.seo-subcategories.with-image li a .image img,
  .seo-subcategories.with-image li a .image img,
  body.type-post .subcategories.with-image li a .image img
) {
  width:       auto !important;
  height:      auto !important;
  max-width:   var(--ico-max) !important;
  max-height:  var(--ico-max) !important;
  object-fit:  contain !important;
  display:     block !important;
}


/* =============================================================
   SUBCATEGORIES – TEXT
   ============================================================= */

:is(
  .subcategories.seo-subcategories.with-image li a .text,
  .seo-subcategories.with-image li a .text,
  body.type-post .subcategories.with-image li a .text
) {
  padding-left:       var(--text-gap) !important;
  min-width:          0 !important;
  white-space:        normal !important;
  overflow:           hidden !important;
  text-overflow:      clip !important;
  overflow-wrap:      normal !important;
  word-break:         normal !important;
  hyphens:            none !important;
  font-size:          14px !important;
  font-weight:        bold !important;
  line-height:        1.15 !important;
  display:            -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  max-height:         calc(2 * 1.15em) !important;
}

/* Highlitedsub text – přidáno ellipsis */
:is(
  .subcategories.seo-subcategories.with-image li.highlitedsub a .text,
  .seo-subcategories.with-image li.highlitedsub a .text,
  body.type-post .subcategories.with-image li.highlitedsub a .text
) {
  text-overflow: ellipsis !important;
}

/* Přepsání pro type-category seo-subcategories */
html .type-category .seo-subcategories li a .text {
  font-size:   14px !important;
  line-height: 1.3em !important;
  font-weight: bold !important;
}

.seo-subcategories .text { font-weight: bold; }


/* =============================================================
   SUBCATEGORIES – LOGA (.imageznacka)
   ============================================================= */

.imageznacka {
  width:           100% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  text-align:      center !important;
}

.imageznacka img {
  width:       auto !important;
  height:      auto !important;
  max-height:  var(--logo-max) !important;
  max-width:   100% !important;
  object-fit:  contain !important;
  display:     block !important;
}


/* =============================================================
   SUBCATEGORIES – VÝŠKA & ROZLOŽENÍ (desktop ≥768px)
   Konsolidováno z původních 4 separátních media query bloků
   ============================================================= */

@media (min-width: 768px) {
  .subcategories li a,
  .seo-subcategories li a {
    height: 70px !important;
  }

  .subcategories.with-image li a .image,
  .seo-subcategories.with-image li a .image {
    width: 55px !important;
  }

  .subcategories.with-image li a .image img {
    max-height: 45px !important;
  }

  .subcategories.with-image li a .text,
  .seo-subcategories.with-image li a .text {
    width: auto !important;
  }
}


/* =============================================================
   SUBCATEGORIES – RESPONSIVE LAYOUT
   Konsolidace: bloky seřazeny od nejužšího breakpointu
   ============================================================= */

/* Mobil: 2 v řadě */
@media (max-width: 767px) {
  :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    body.type-post .subcategories.with-image li,
    .subcategories li
  ) {
    width: 50% !important;
  }

  :is(
    .subcategories.seo-subcategories.with-image li a,
    .seo-subcategories.with-image li a,
    body.type-post .subcategories.with-image li a
  ) {
    height: var(--btn-h-mobile) !important;
  }

  .subcategories.with-image li a             { width: 100%; }
  .subcategories.with-image li a .image      { width: 30% !important; }
  .subcategories.with-image li a .text       { width: 70% !important; }

  .seo-subcategories.with-image li a .image  { width: 30% !important; }
  .seo-subcategories li                      { padding: 4px; }
  .seo-subcategories li a                    { height: 73px; }
}

/* Tablet: 3 v řadě */
@media (min-width: 768px) and (max-width: 991px) {
  :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    body.type-post .subcategories.with-image li
  ) {
    width: 33.333% !important;
  }
}

/* Kategorie: 3 v řadě */
@media (min-width: 992px) and (max-width: 1279px) {
  html .type-category :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li
  ) {
    width: 33.333% !important;
  }

  /* Blog: 3 v řadě (stejný breakpoint) */
  body.type-post :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ) {
    width: 33.333% !important;
  }
}

/* Kategorie: 4 v řadě */
@media (min-width: 1280px) and (max-width: 1599px) {
  html .type-category :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li
  ) {
    width: 25% !important;
  }
}

/* Kategorie: 5 v řadě */
@media (min-width: 1600px) {
  html .type-category :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li
  ) {
    width: 20% !important;
  }
}

/* Blog: 4 v řadě */
@media (min-width: 1200px) {
  body.type-post :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ) {
    width: 25% !important;
  }
}

/* Obsahové stránky: 2 / 3 / 4 v řadě */
@media (max-width: 767px) {
  body.type-page:not(.type-post):not(.type-category) :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ) {
    width: 50% !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.type-page:not(.type-post):not(.type-category) :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ) {
    width: 33.333% !important;
  }
}

@media (min-width: 1200px) {
  body.type-page:not(.type-post):not(.type-category) :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ) {
    width: 25% !important;
  }
}


/* =============================================================
   SUBCATEGORIES – BARVY (obrázky barev)
   ============================================================= */

/* Sdílený selektor pro oba @supports bloky */
@supports selector(:has(*)) {
  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li:has(
    img[src*="/upload/barva/" i],
    img[src*="/documents/upload/barva/" i],
    img[src*="/ikony-kategorie/" i][src*="/barvy/" i]
  ) a {
    height:      var(--btn-h) !important;
    display:     flex !important;
    align-items: center !important;
  }

  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li:has(
    img[src*="/upload/barva/" i],
    img[src*="/documents/upload/barva/" i],
    img[src*="/ikony-kategorie/" i][src*="/barvy/" i]
  ) a .image {
    flex:            0 0 var(--ico-slot-w) !important;
    width:           var(--ico-slot-w) !important;
    height:          var(--ico-slot-h) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         4px !important;
    box-sizing:      border-box !important;
    overflow:        hidden !important;
  }

  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li a .image img:is(
    [src*="/upload/barva/" i],
    [src*="/documents/upload/barva/" i],
    [src*="/ikony-kategorie/" i][src*="/barvy/" i]
  ) {
    width:      auto !important;
    height:     auto !important;
    max-width:  100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display:    block !important;
  }
}

/* Fallback pro prohlížeče bez :has() */
@supports not selector(:has(*)) {
  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li a .image img:is(
    [src*="/upload/barva/" i],
    [src*="/documents/upload/barva/" i],
    [src*="/ikony-kategorie/" i][src*="/barvy/" i]
  ) {
    width:      auto !important;
    height:     auto !important;
    max-width:  var(--ico-max) !important;
    max-height: var(--ico-max) !important;
    object-fit: contain !important;
    display:    block !important;
  }

  :where(html .type-category, body.type-page, body.type-post)
  :is(.subcategories.with-image, .seo-subcategories.with-image)
  li a .image {
    padding:    4px !important;
    box-sizing: border-box !important;
    overflow:   hidden !important;
  }
}


/* =============================================================
   SEO-SUBCATEGORIES (v příspěvcích / blogu)
   Poznámka: tyto základní styly jsou přepsány výše uvedenými :is()
   bloky – slouží jako fallback pro starší markup bez .with-image
   ============================================================= */

.seo-subcategories {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  margin:      0 -6px 36px -6px;
  padding:     26px 0;
  position:    relative;
}

.seo-subcategories li {
  list-style: none;
  flex:       0 0 auto;
  padding:    6px;
}

.seo-subcategories.with-image li a {
  display:     flex;
  align-items: center;
}

.seo-subcategories.with-image li a .image { text-align: center; }

.seo-subcategories.with-image li a .text {
  padding-left: 5px;
  flex-grow:    0;
  text-align:   left;
  display:      inline-block;
  overflow:     hidden;
  text-overflow: ellipsis;
}

.seo-subcategories li a {
  box-shadow:      none;
  position:        relative;
  display:         flex;
  align-items:     center;
  height:          88px;
  padding:         12px;
  font-weight:     500;
  color:           var(--color-text, #24242E);
  border:          1px solid var(--color-border, #e4e4e4);
  text-decoration: none !important;
  transition:      border-color 0.15s ease;
}

.seo-subcategories li a:hover {
  border-color: var(--color-primary, #00a8ee) !important;
}

.seo-subcategories li a .text {
  max-height:  62px;
  overflow:    hidden;
  line-height: 20px;
  font-size:   14px;
  font-weight: bold;
}


/* =============================================================
   OPRAVA BLOG – subcategories s obrázkem
   ============================================================= */

.type-post .subcategories.with-image li a {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  border:     1px solid rgba(0, 0, 0, 0.07);
  padding-right: 0;
}

.type-post .subcategories.with-image li a .text {
  font-size:   85%;
  line-height: 1.3em;
  color:       #000 !important;
  padding:     0 0 0 10px !important;
  width:       100% !important;
}

/* Skrytí arrow pseudo-elementů v blogu */
.type-post .subcategories li a::after,
.type-post .subcategories li a::before { display: none; }

.type-post .subcategories .text { padding-top: 25px; }

.type-post .seo-subcategories.with-image li a {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  border:     1px solid rgba(0, 0, 0, 0.07);
  padding-right: 0;
}

.news-item-detail .text { margin-bottom: 0 !important; }


/* =============================================================
   VÝPIS PRODUKTŮ
   ============================================================= */

.products-block.products .p .name { height: 80px; }


/* =============================================================
   FILTRY – vizuální úpravy
   ============================================================= */

.filter-sections,
.box-filters {
  background-color: transparent !important;
  border: 0 !important;
}

.filter-section {
  padding:    0 !important;
  border-top: 0 !important;
}

/* Aktivní filtrovací formulář */
.type-category #filters .param-filter-top form,
.type-category .filter-section form {
  padding:          15px;
  padding-bottom:   0 !important;
  margin-bottom:    20px !important;
  background:       var(--color-bg-light, #F6F6F6);
  border-radius:    5px;
  border:           1px solid var(--color-border, #E4E4E4) !important;
}

/* Výjimka: stock filter bez stylu */
.type-category #filters .param-filter-top form[action="/action/ProductsListing/setStockFilter/"] {
  padding:    0 !important;
  border:     0 !important;
  background: transparent !important;
  margin:     0 !important;
}

/* Odebrání hover background na fieldsetech */
.filter-section form > fieldset > div:not(.advanced-filters-wrapper):hover {
  background-color: transparent !important;
}

.filter-section form:first-of-type { padding-top: 0 !important; }

/* Prázdné / disabled formuláře bez rámečku */
.type-category .filter-section form:not(:has(div)),
.type-category #filters .param-filter-top form,
.type-category .filter-section form:has(input[disabled]) {
  border-color: transparent !important;
  background:   transparent !important;
}

/* Skrytí disabled checkboxů a rádií */
.filter-section input[type="checkbox"]:disabled + label,
.filter-section input[type="radio"]:disabled + label {
  display: none;
}

/* Slider filtr */
.slider-wrapper.dkLab__slider-parameter { margin: unset !important; }
.filters-wrapper > .filters > .slider-wrapper { display: none; }

/* Více/méně parametrů filtru */
.more-param:not(.rozbaleno) form fieldset div:nth-child(n+6) { display: none; }

.more-param-link {
  display:         inline-block;
  margin-top:      12px;
  margin-bottom:   15px;
  font-size:       13px;
  color:           var(--color-primary, #00a8ee);
  text-decoration: underline;
  cursor:          pointer;
}

.more-param-link:hover { text-decoration: none; }

.more-param-link::after         { content: " více"; }
.rozbaleno .more-param-link::after { content: " méně"; }

/* Odsazení první/poslední položky filtru */
.filter-section fieldset div:first-of-type label { margin-top: 15px; }
.filter-section fieldset div:last-of-type label  { margin-bottom: 15px; }


/* =============================================================
   PARAMETRICKÉ FILTRY – řazení kategorií
   ============================================================= */

/* --- Topné tyče --- */
body[class*="in-topne-tyce"] .filter-section-parametric-id-93   { order: -100; }
body[class*="in-topne-tyce"] .filter-section-parametric-id-99   { order: -99;  }
body[class*="in-topne-tyce"] .filter-section-parametric-id-1034 { order: -98;  }
body[class*="in-topne-tyce"] .filter-section-parametric-id-30   { order: -97;  }
body[class*="in-topne-tyce"] .filter-section-parametric-id-135  { order: -96;  }
body[class*="in-topne-tyce"] .filter-section-parametric-id-117  { order: -95;  }
body[class*="in-topne-tyce"] .filter-section-parametric-id-45   { order: -94;  }

/* --- Topné žebříky & koupelnové radiátory --- */
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-396 { order: -101; }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-93  { order: -100; }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-18  { order: -99;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-21  { order: -98;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-99  { order: -97;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-120 { order: -96;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-30  { order: -95;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-45  { order: -94;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-36  { order: -93;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-929 { order: -92;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-941 { order: -91;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-117 { order: -90;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-210 { order: -89;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-135 { order: -88;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-27  { order: -87;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-102 { order: -86;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-60  { order: -85;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-96  { order: -84;  }
:is(body[class*="-topne-zebriky"], body[class*="in-koupelnove-radiatory"]) .filter-section-parametric-id-114 { order: -83;  }

/* --- Žlaby --- */
body[class*="zlaby"] .filter-section-parametric-id-396 { order: -101; }
body[class*="zlaby"] .filter-section-parametric-id-93  { order: -100; }
body[class*="zlaby"] .filter-section-parametric-id-57  { order: -99;  }
body[class*="zlaby"] .filter-section-parametric-id-18  { order: -98;  }
body[class*="zlaby"] .filter-section-parametric-id-21  { order: -97;  }
body[class*="zlaby"] .filter-section-parametric-id-60  { order: -96;  }
body[class*="zlaby"] .filter-section-parametric-id-45  { order: -95;  }
body[class*="zlaby"] .filter-section-parametric-id-30  { order: -94;  }
body[class*="zlaby"] .filter-section-parametric-id-27  { order: -93;  }
body[class*="zlaby"] .filter-section-parametric-id-195 { order: -92;  }
body[class*="zlaby"] .filter-section-parametric-id-114 { order: -91;  }
body[class*="zlaby"] .filter-section-parametric-id-324 { order: -90;  }


/* =============================================================
   ÚVODNÍ STRÁNKA – rozcestník kategorií
   ============================================================= */

.uvodni-kategorie {
  display:       flex;
  flex-wrap:     wrap;
  gap:           20px;
  margin-bottom: 20px;
}

.uvodni-kategorie .col-sm-4 { padding-bottom: 20px; }
.uvodni-kategorie > div     { flex: 1; }

@media (max-width: 991px) {
  .uvodni-kategorie              { display: block; }
  .uvodni-kategorie > div        { width: 86%; margin: 0 7%; flex-basis: auto; }
  .uvodni-kategorie h3           { padding-top: 20px !important; }
  .uvodni-kategorie .col-sm-4    { margin-bottom: 20px; }
}

@media (max-width: 768px) {
  .uvodni-kategorie { margin-bottom: 0; margin-top: -20px; }
}

.uvodni-kategorie h3  { font-size: 20px; font-weight: bold; text-transform: uppercase; }
.uvodni-kategorie ul  { list-style: none; padding-left: 0; }
.uvodni-kategorie a   { color: #000; }
.uvodni-kategorie a:hover   { text-decoration: underline !important; }
.uvodni-kategorie a.vsechny { color: #000; font-weight: bold; }

/* Barevná pozadí bloků (fallback bez obrázku) */
.uvodni-kategorie .vodovodni-baterie  { background: #f4f0ec; }
.uvodni-kategorie .sprchove-kouty     { background: #f3ecfb; }
.uvodni-kategorie .vany               { background: #ecf3dd; }
.uvodni-kategorie .zebriky            { background: #f3dddd; }
.uvodni-kategorie .koupelnovy-nabytek { background: #cde3d1; }
.uvodni-kategorie .sprchovy-program   { background: #f4ecfb; }

/* Obrázková pozadí (desktop) */
@media (min-width: 992px) {
  .uvodni-kategorie .vodovodni-baterie {
    background-image: url('https://www.primakoupelny.cz/user/documents/upload/styly-nemazat/uvod-rozcestnik/rozcestnik-pozadi-baterie.png');
    background-size: cover;
    background-position: center;
  }
  .uvodni-kategorie .sprchove-kouty {
    background-image: url('https://www.primakoupelny.cz/user/documents/upload/styly-nemazat/uvod-rozcestnik/rozcestnik-pozadi-sprchy.png');
    background-size: cover;
    background-position: center;
  }
  .uvodni-kategorie .vany {
    background-image: url('https://www.primakoupelny.cz/user/documents/upload/styly-nemazat/uvod-rozcestnik/rozcestnik-pozadi-vany.png');
    background-size: cover;
    background-position: center;
  }
  .uvodni-kategorie .zebriky {
    background-image: url('https://www.primakoupelny.cz/user/documents/upload/styly-nemazat/uvod-rozcestnik/rozcestnik-pozadi-zebriky.png');
    background-size: cover;
    background-position: center;
  }
  .uvodni-kategorie .koupelnovy-nabytek {
    background-image: url('https://www.primakoupelny.cz/user/documents/upload/styly-nemazat/uvod-rozcestnik/rozcestnik-pozadi-koupelnovy-nabytek.png');
    background-size: cover;
    background-position: center;
  }
  .uvodni-kategorie .sprchovy-program {
    background-image: url('https://www.primakoupelny.cz/user/documents/upload/styly-nemazat/uvod-rozcestnik/rozcestnik-pozadi-sprchovy-program.png');
    background-size: cover;
    background-position: center;
  }
}

/* Odebrání hover box-shadow na homepage */
.homepage-box:hover,
.homepage-box:hover * { box-shadow: none !important; }

/* Pořadí prvků na homepage (992px+) */
@media (min-width: 992px) {
  .in-index .overall-wrapper                                      { display: flex; flex-direction: column; }
  .in-index .top-navigation-bar                                   { order: 0; }
  .in-index #header                                               { order: 1; }
  .in-index #content-wrapper                                      { order: 2; }
  .in-index .content-wrapper.homepage-box.before-carousel        { order: 2; }
  .in-index .content-wrapper.container                            { order: 3; }
  .in-index .content-wrapper.latest-contribution-box             { order: 2; }
  .in-index .content-wrapper.homepage-box.middle-banners-wrapper  { order: 2; }
  .in-index .content-wrapper.homepage-box.welcome-wrapper         { order: 3; }
}

/* Banner přes celou šířku */
.banners-content.body-banners > div { width: 100% !important; }

/* Benefit banner */
.type-index .benefitBanner { border-bottom: none !important; margin-top: 10px; }
.fav-cat { margin-top: 5px !important; }

/* Oblíbené kategorie – sekce "vše o nákupu" */
.in-vse-o-nakupu .subcategories img {
  display:      block !important;
  width:        40px;
  height:       40px;
  margin-right: 10px;
}

.in-vse-o-nakupu .subcategories li a {
  text-align:  left;
  line-height: 1.4;
}

@media screen and (min-width: 768px) {
  .in-vse-o-nakupu .subcategories li { width: 25%; }
}


/* =============================================================
   HODNOCENÍ – recenze (výpis)
   ============================================================= */

.r-bottom .vote-wrap {
  width:            calc(25% - 20px) !important;
  margin:           10px !important;
  background-color: var(--color-bg-light, #F6F6F6);
  border-radius:    10px;
}

.vote-summary { padding-bottom: 10px !important; }

.votes-wrap {
  background-color: var(--color-bg-light, #F6F6F6);
  border-radius:    10px;
  padding:          2rem;
}

.r-bottom .stars {
  padding-top: 10px;
  left:        10px !important;
}

@media (max-width: 768px) {
  .r-bottom .vote-wrap { width: calc(50% - 20px) !important; }
}

.proklikhodnoceni {
  width:         100%;
  margin-top:    20px;
  margin-bottom: 20px;
  text-align:    center;
}

.proklikhodnoceni .btn { max-width: 100px; }


/* =============================================================
   ÚVODNÍ KATEGORIE – nový vzdušný layout (2 bannery v řadě)
   Nahrazuje původní .uvodni-kategorie s Bootstrap .row/.col-sm-4
   ============================================================= */

.pk-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 16px;
}

.pk-cat-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 40px 44px 36px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pk-cat-card__content {
  position: relative;
  z-index: 1;
  max-width: 58%;
}

.pk-cat-card__img {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 82%;
  width: auto;
  max-width: 44%;
  object-fit: contain;
}

.pk-cat-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 10px;
}

.pk-cat-card h3 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  color: #1a1a2e;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.pk-cat-card__desc {
  font-size: 13px;
  color: #555;
  margin: 0 0 18px;
}

.pk-cat-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.pk-cat-card ul li {
  margin: 5px 0;
}

.pk-cat-card ul li a {
  font-size: 14px;
  color: #222;
  text-decoration: none;
  transition: color .15s;
}

.pk-cat-card ul li a:hover {
  color: var(--color-primary, #00a8ee);
  text-decoration: underline;
}

.pk-cat-card__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 2px solid #1a1a2e;
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}

.pk-cat-card__all:hover {
  color: var(--color-primary, #00a8ee);
  border-color: var(--color-primary, #00a8ee);
}


/* Barvy pozadí – jednotlivé kategorie */

.c-baterie { background: #f4f0ec; }
.c-sprchy  { background: #ede8f8; }
.c-vany    { background: #eaf3e2; }
.c-zebriky { background: #faeaea; }
.c-nabytek { background: #ddf0e2; }
.c-program { background: #ede8f8; }


/* Responzivita */

@media (max-width: 991px) {
  .pk-cat-card {
    padding: 30px 28px 28px;
    min-height: 280px;
  }
}

@media (max-width: 767px) {
  .pk-cat-grid {
    grid-template-columns: 1fr;
  }

  .pk-cat-card {
    min-height: auto;
    padding: 28px 24px 32px;
  }

  .pk-cat-card__content {
    max-width: 100%;
  }

  .pk-cat-card__img {
    position: static;
    height: 110px;
    max-width: 130px;
    float: right;
    margin: -30px -8px 12px 12px;
  }
}