/*  === BUTTONY – TLAČÍTKA === */




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




/* === Mini buttony s TOP tématy === */


  .top-topics-wrap{
    /* Rozložení */
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;




    /* Mezery */
    margin-top:-12px;   /* zkrácení mezery nad tlačítky */
    margin-bottom:16px; /* příjemná mezera pod nimi */




    /* Písmo */
    font-family:"Poppins", sans-serif;
  }




  .top-topics-wrap .top-topic{
    /* Vzhled tlačítka */
    display:inline-flex;
    align-items:center;
    justify-content:center;




    padding:6px 14px;
    border-radius:999px;




    background:#f6f6f6;
    border:1px solid #e4e4e4;     /* aby se prvek při hoveru "nehýbal" */
    color:#24242E !important;         /* barva textu */
    text-decoration:none !important;




    font-size:14px;
    line-height:1.2;




    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease;
  }




  .top-topics-wrap .top-topic:hover{
    background:#eeeeee;               /* jemně tmavší */
    border-color:#e4e4e4;             /* lehký obrys */
    box-shadow:0 2px 8px rgba(0,0,0,.08); /* decentní stín */
    transform:translateY(-1px);       /* lehké nadzvednutí */
    text-decoration:none !important;
  }




  /* Zvýraznění při ovládání klávesnicí (Tab) */
  .top-topics-wrap .top-topic:focus-visible{
    outline:2px solid #9e9e9e;
    outline-offset:2px;
  }




  /* Jemný efekt při kliknutí */
  .top-topics-wrap .top-topic:active{
    transform:translateY(0);          /* vrátí zpět, aby to při kliknutí nepůsobilo "uskákáně" */
  }




  /* Aktivní/aktuální odkaz (pokud chcete zvýraznit vybraný) */
  .top-topics-wrap .top-topic.is-active,
  .top-topics-wrap .top-topic[aria-current="page"]{
    background:#24242E;
    border-color:#24242E;
    color:#ffffff !important;
    box-shadow:none;
    transform:none;
  }






/* === CTA button – tlačítko === */


.pk-cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 28px; border-radius:999px;
  background:#00A8E8; color:#fff; border:0;
  font-weight:700; font-size:14px; line-height:1;
  text-transform:uppercase; letter-spacing:.04em;
  cursor:pointer; transition:background-color .2s;
}
.pk-cta:hover{ background:#0F86B8; }
.pk-cta:focus-visible{ outline:3px solid rgba(0,168,232,.35); outline-offset:3px; }




/* hard no-underline (also kills underline on inner spans/icons) */
a.pk-cta, a.pk-cta *{
  color:#fff;
  text-decoration:none !important;
  box-shadow:none !important;
  border-bottom:0 !important;
}