:root {
  --primary-brown:#CDB79E;
}




.subcategories {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem 1rem;
  margin-top: 1rem;
}



.subcategories.with-image li {
  padding: 2rem 1rem;
  position: relative !important;
  border: 1px solid #CCCCCC !important;
  border-radius: 1rem!important;
  width: 100% !important;
  
}



.subcategories.with-image li:hover {
  border: 1px solid var(--primary-brown)!important;
  color: var(--primary-brown)!important;
}






/* Hide ::after content for .no-sticker class */
/* .subcategories.with-image li.no-sticker::after {
display: none;
} */

/* Target <li> elements with a child <a> tag containing a specific href attribute */
li:has(a[href="/ortopedicky-pelisek-bruno/"])::after, li:has(a[href="/ortopedicky-pelisek-pro-psa-sorriso/"])::after,
li:has(a[href="/pelisek-s-pametovou-penou-clara/"])::after,li:has(a[href="/ortopedicky-pelisek-pro-psa-medico-2/"])::after,li:has(a[href="/ortopedicky-pelisek-pro-psa-medical-pro/"])::after,li:has(a[href="/ortopedicky-pelisek-pro-psa-eden-alkantara/"])::after,li:has(a[href="/ortopedicky-pelisek-pro-psa-denzoo/"])::after,li:has(a[href="/ortopedicky-pelech-pro-psa-top-splendor/"])::after,li:has(a[href="/ortopedicky-pelisek-pro-psa-max/"])::after,li:has(a[href="/ortopedicky-pelisek-pro-psa-nancy/"])::after,li:has(a[href="/ortopedicky-pelisek-pro-psa-puffi-kordura/"])::after, li:has(a[href="/ortopedicky-pelisek-pro-psa-lusi/"])::after,li:has(a[href="/ortopedicky-pelech-pro-psa-nature/"])::after,li:has(a[href="/pelisek-pro-psa-velvet/"])::after,li:has(a[href="/ortopedicka-matrace-pro-psa-lui/"])::after,li:has(a[href="/ortopedicka-matrace-pro-psa-bliss/"])::after,li:has(a[href="/ortopedicka-matrace-pro-psa-vitamedog/"])::after,li:has(a[href="/ortopedicka-matrace-pro-psa-premium/"])::after,li:has(a[href="/ortopedicka-matrace-pro-psy-bambol/"])::after,li:has(a[href="/ortopedicky-pelisek-pro-psa-kory/"])::after,li:has(a[href="/ortopedicky-pelisek-milano/"])::after,li:has(a[href="/ortopedicky-pelisek-prato/"])::after,li:has(a[href="/ortopedicky-pelisek-palermo/"])::after,li:has(a[href="/ortopedicky-pelisek-toronto/"])::after,
li:has(a[href="/ortopedicky-pelisek-verona/"])::after, li:has(a[href="/ortopedicky-pelisek-modena/"])::after,li:has(a[href="/ortopedicky-pelisek-deluxe/"])::after,li:has(a[href="/ortopedicky-pelisek-luso/"])::after,li:has(a[href="/ortopedicky-pelisek-pro-psa-rimini/"])::after,li:has(a[href="/ortopedicky-pelisek-pro-psa-sandy/"])::after,li:has(a[href="/ortopedicky-pelisek-classy/"])::after,li:has(a[href="/ortopedicky-pelisek-teddy/"])::after,li:has(a[href="/ortopedicky-pelisek-belluno/"])::after,li:has(a[href="/ortopedicky-pelisek-pro-psa-torino/"])::after,li:has(a[href="/ortopedicky-pelisek-novara/"])::after,li:has(a[href="/ortopedicky-pelisek-ancona/"])::after,li:has(a[href="/ortopedicka-matrace-torino/"])::after,li:has(a[href="/ortopedicka-matrace-roma/"])::after,li:has(a[href="/ortopedicka-matrace-velur/"])::after{
content:"Ortopedický";
position: absolute !important;
top: -1.3rem;
left: 50%;
transform: translate(-50%, 0);
padding: 0.1rem 1rem;
border-radius: 0.3rem;
background-color: var(--primary-brown);
color: white;
font-size: 1.4rem;
}



.subcategories li a {
  padding: 0 !important;
  text-decoration: none !important;
  color: #000000;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  background-color: unset !important;
  border: none !important;
}

.subcategories li a:hover {
  background-color: unset !important;
  border: none !important;
 
  color: var(--primary-brown) !important;
  text-decoration: unset !important;
}
.subcategories.with-image li a {
  text-decoration: none !important;
  
}



.subcategories.with-image li a:hover,
.subcategories.with-image li a:hover .text,
.subcategories.with-image li a:hover .image {
text-decoration: none !important;

}

.subcategories.with-image li:hover a,
.subcategories.with-image li:hover a .text,
.subcategories.with-image li:hover a .image {
text-decoration: none !important;

}

.subcategories.with-image li a .text:hover,
.subcategories.with-image li a .image:hover {
text-decoration: none !important;

}



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

.subcategories.with-image li a .image {
  padding: 0 !important;
  text-align: center;
  width: 100% !important;
}

.subcategories.with-image li a::before {
  display: none !important;
  
}

.subcategories.with-image li a .text {
  width: unset !important;
  padding: 0 !important;
  line-height:normal !important;
  font-size: 1.7rem;
  text-align: center !important;
  max-width: unset !important;
  text-overflow: unset !important;
  flex-grow: unset !important;
  white-space: unset !important;
  max-height: unset !important;
  letter-spacing: normal !important;
}

.subcategories.with-image li a::after {
  display: none !important;
}

.subcategories.with-image li a .image img {
  max-height: unset !important;
}
/*breakpoints*/


@media screen and (min-width:1700px) {
  .container {
      width: 1712px !important;
  }
}


@media screen and (max-width: 1200px) {
  .subcategories.with-image {
      grid-template-columns: repeat(5, 1fr);
  }

  .subcategories.with-image li a .text {
      font-size: 1.6rem;
  }

  .subcategories.with-image .image img {
      width: 70%;
  }
}

@media screen and (max-width: 1000px) {
  .subcategories.with-image {
      grid-template-columns: repeat(4, 1fr);
  }

  .subcategories.with-image li a .text {
      font-size: 1.5rem;
  }
}

@media screen and (max-width: 700px) {
  .subcategories.with-image {
      grid-template-columns: repeat(3, 1fr) ;
  }
}

@media screen and (max-width: 500px) {
  .subcategories.with-image li {
      padding: 1rem 0.5rem;
  }

  .subcategories.with-image li a .text {
      
      margin-top: 1rem;
  }

  .subcategories.with-image .image img {
      width: 100%;
  }

  .subcategories.with-image li::after {
    top: -1rem;
    padding: 0.1rem 0.5rem;
    font-size: 1rem;
    }
}


@media screen and (max-width: 340px) {
  .subcategories.with-image {
    grid-template-columns: repeat(2, 1fr) ;
}


  .subcategories.with-image li::after {
    top: -1rem;
    padding: 0.1rem 0.5rem;
    font-size: 1rem;
    }
}