/* === Buttony pro rozcestníky podkategorií (subcategories / seo-subcategories) === */


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


  /* nižší tlačítka */
  --btn-h:52px;
  --btn-h-mobile:56px;


  /* slot pro ikonu jako původně (55px), max velikost ikony 45px */
  --ico-slot-w:55px;
  --ico-slot-h:45px;
  --ico-max:45px;


  /* loga (značky) */
  --logo-max:30px;


  --text-gap:10px;


  /* růžové zvýraznění (z původního kódu 2) */
  --highlight-bg:#ffe9eb;
  --highlight-bg-hover:#ffd8db;
}


/* =========================================================
   1) ZMENŠENÍ MEZERY NAD TLAČÍTKY (nadpis -> seznam)
   ========================================================= */


: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;
  }
}






/* =========================================================
   2) WRAPPER (UL) – menší vertikální mezery
   ========================================================= */
: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;
}


:is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  body.type-post .subcategories.with-image
)::before,
:is(
  .subcategories.seo-subcategories.with-image,
  .seo-subcategories.with-image,
  body.type-post .subcategories.with-image
)::after{
  height:0 !important;
}


/* =========================================================
   3) 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;
}


/* =========================================================
   4) BUTTON (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;
}


: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;
}


:is(
  .subcategories.seo-subcategories.with-image li a,
  .seo-subcategories.with-image li a,
  body.type-post .subcategories.with-image li a
)::before,
:is(
  .subcategories.seo-subcategories.with-image li a,
  .seo-subcategories.with-image li a,
  body.type-post .subcategories.with-image li a
)::after{
  display:none !important;
}


/* =========================================================
   5) HIGHlitedsub – růžové + výjimka pro text (ellipsis povoleno)
   ========================================================= */
: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
){
  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
){
  background:var(--highlight-bg-hover) !important;
}


/* =========================================================
   6) IKONY – KONZISTENTNÍ, BEZ NAFUKOVÁNÍ, JAKO PŮVODNĚ (max 45px)
   ========================================================= */
: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;
}


/* =========================================================
   7) TEXT – vždy se vejde (2 řádky), nepřetéká ven
   ========================================================= */
: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;
}


: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;
}


/* =========================================================
   8) LOGA (.imageznacka) – vždy na středu, bez růstu
   ========================================================= */
.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;
}


/* =========================================================
   9) ROZLOŽENÍ – počet v řadě dle šířky
   ========================================================= */


/* 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
  ){ 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; }
}


/* 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 (se sidebar / užší obsah): 3 v řadě */
@media (min-width:992px) and (max-width:1599px){
  html .type-category :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li
  ){ width:33.333% !important; }
}


/* Kategorie široký desktop: 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ě na 992–1199 */
@media (min-width:992px) and (max-width:1199px){
  body.type-post :is(
    .subcategories.seo-subcategories.with-image li,
    .seo-subcategories.with-image li,
    .subcategories.with-image li
  ){ width:25% !important; }
}


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


html .type-category .seo-subcategories li a .text{
  font-size:14px !important;
  line-height:1.3em !important;
  font-weight:bold !important;
}


/* =========================================================
   9A) OBSAHOVÉ STRÁNKY SHOPTETU SE SIDEBAR MENU (type-page)
   - max 4 tlačítka vedle sebe
   ========================================================= */


@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:991px){
  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:992px) and (max-width:1599px){
  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:1600px){
  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;
    min-width:240px !important;
  }
}


/* =========================================================
   10) BARVY – jen pro ikony barev
   Platí pro: kategorie + obsahové stránky + blog
   Cílíme na:
   - /upload/barva/
   - /documents/upload/barva/
   - /ikony-kategorie/.../Barvy/ (case-insensitive)
   ========================================================= */


/* ===== 1) MODERNÍ PROHLÍŽEČE (plná oprava přes :has()) ===== */
@supports selector(:has(*)){


  /* výška tlačítka jen tam, kde se vyskytují barvy */
  :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;
  }


  /* slot pro barvy + ochranná zóna */
  :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;              /* ochranná zóna */
    box-sizing:border-box !important;
    overflow:hidden !important;
  }


  /* obrázek barvy: vždy se vejde do slotu */
  :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;
  }
}


/* ===== 2) FALLBACK (bez :has()) =====
   Pozn.: bez :has() neumíme v čistém CSS spolehlivě zacílit "výšku A"
   jen podle toho, že uvnitř je IMG s barvou. Umíme ale zabránit nafukování
   samotným obrázkem a dát ochrannou zónu kolem obrázku.
*/
@supports not selector(:has(*)){


  /* zmenši obrázek barvy, aby nenafukoval layout */
  :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;
  }


  /* ochranná zóna okolo obrázku */
  :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;
  }
}