/* === ALTERNATIVNÍ PRODUKTY - ON RUNNING STYL === */

/* Reset původních stylů */
#productsAlternative .product {
  border: 0 !important;
  border-radius: 0 !important;
  height: auto !important;
  margin: 0 !important;
}

#productsAlternative .products-block.products .product {
  padding: 0 !important;
  height: auto !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

#productsAlternative .products-block.products .product:hover {
  border: 0 !important;
  box-shadow: none !important;
}

/* Aktivní produkt - bez rámečku */
#productsAlternative .product.aktivni-produkt {
  border: 0 !important;
  border-color: transparent !important;
}

#productsAlternative .product.aktivni-produkt::before {
  display: none !important;
}

/* Underline pod aktivním produktem */
#productsAlternative .product {
  position: relative;
}

#productsAlternative .product.aktivni-produkt::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #192826;
  position: absolute;
  bottom: -6px;
  left: 0;
}

/* Vnitřní padding a pozadí */
#productsAlternative .products-block .p {
  background-color: transparent !important;
  padding: 8px !important;
  border-radius: 0 !important;
}

#productsAlternative .products-block .aktivni-produkt .p {
  background-color: transparent !important;
}

/* Obrázky */
#productsAlternative .products-block .p img {
  height: 44px !important;
  width: auto !important;
  mix-blend-mode: darken;
}

/* Nadpis "Barva" - stejný styl jako "VELIKOST" */
#productsAlternative::before {
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #192826 !important;
  margin-bottom: 16px !important;
  letter-spacing: 0 !important;
}

#productsAlternative {
  margin: 0 0 24px 0;
  padding-bottom: 8px;
}

/* Skrytí šipek a teček */
#productsAlternative .slick-arrow,
#productsAlternative .slick-dots {
  display: none !important;
}

/* === DESKTOP - 7 bot na řádek === */
@media screen and (min-width: 768px) {

  #productsAlternative .products-block {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }

  #productsAlternative .products-block.products .product {
    width: calc(100% / 7) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  #productsAlternative .slick-track {
    display: flex !important;
    width: auto !important;
    padding: 0 !important;
  }

  #productsAlternative .slick-list {
    margin: 0 !important;
  }
}

/* === MOBIL - 6 viditelných + 7. čouhá === */
@media screen and (max-width: 767px) {

  #productsAlternative .products-block {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    margin: 0 -10px 0 0 !important; /* pravý přesah */
    padding-right: 10px !important;
  }

  /* Skrytí scrollbaru */
  #productsAlternative .products-block::-webkit-scrollbar {
    display: none;
  }

  #productsAlternative .products-block {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Každá bota = 1/6.5 šířky → 6 celých + kousek 7. */
  #productsAlternative .products-block.products .product {
    flex: 0 0 calc(100% / 6.5) !important;
    width: calc(100% / 6.5) !important;
    margin: 0 !important;
    scroll-snap-align: start;
    border: 0 !important;
  }

  #productsAlternative .products-block.products .product.aktivni-produkt {
    border: 0 !important;
    border-color: transparent !important;
  }

  #productsAlternative .products-block .p img {
    height: 38px !important;
  }

  #productsAlternative .products-block .p {
    padding: 6px 4px !important;
  }
}

/* ============================================
   JONAP.CZ - MOBILNÍ MENU - ON RUNNING STYL
   Accordion přístup (bez slide panelů)
   ============================================ */

@media screen and (max-width: 991px) {

  /* === RESET SHOPTET SLIDE PANELŮ === */
  /* Kompletně zrušíme slide přechody */
  .navigation-in,
  .navigation-in .menu,
  .navigation-in ul,
  .navigation-in ul li,
  .navigation-in ul ul {
    transform: none !important;
    transition: none !important;
    -webkit-transform: none !important;
    -webkit-transition: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
  }

  /* Menu wrapper */
  .navigation-in.menu {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Level 1 - vždy viditelný */
  .navigation-in > ul.menu-level-1 {
    display: block !important;
    width: 100% !important;
    position: static !important;
    transform: none !important;
  }

  /* Level 2 - skrytý by default, accordion */
  .navigation-in ul.menu-level-2 {
    display: none !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Level 2 - zobrazení když otevřeno */
  .navigation-in ul li.menu-accordion-open > ul.menu-level-2 {
    display: block !important;
  }

  /* Level 3 - skrytý by default */
  .menu-level-3 {
    display: none !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Level 3 - zobrazení */
  .menu-level-2 > li.menu-accordion-open .menu-level-3 {
    display: block !important;
  }

  /* Skrytí VŠECH původních back tlačítek a headerů */
  .navigation-in ul::before,
  .navigation-in ul ul::before,
  .menu-level-2::before,
  .menu-level-3::before {
    display: none !important;
  }

  /* Skrytí slide indikátorů */
  .navigation-in .menu-level-2 > .menu-back,
  .navigation-in .menu-level-3 > .menu-back {
    display: none !important;
  }


  /* ============================================
     LEVEL 1 - HLAVNÍ KATEGORIE
     ============================================ */

  .navigation-in > ul > li {
    border-bottom: 1px solid #E5E5E5 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
  }

  .navigation-in > ul > li > a {
    font-size: 26px !important;
    font-weight: 600 !important;
    color: #000 !important;
    padding: 22px 70px 22px 24px !important;
    display: block !important;
    line-height: 1.2 !important;
    font-family: "roc-grotesk", sans-serif !important;
    text-decoration: none !important;
    background: none !important;
    position: relative !important;
  }

  .navigation-in > ul > li > a b {
    font-weight: 600 !important;
  }

  /* Skrytí původní submenu šipky na odkazu */
  .navigation-in > ul > li > a > .submenu-arrow {
    display: none !important;
  }

  /* Plus/minus toggle tlačítko - přidáno přes JS */
  .menu-toggle-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: none !important;
    z-index: 5 !important;
    cursor: pointer !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    color: #000 !important;
    font-family: "roc-grotesk", sans-serif !important;
    line-height: 1 !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Výprodej a položky bez submenu - bez toggle */
  .navigation-in > ul > li:not(.ext) {
    border-bottom: 1px solid #E5E5E5 !important;
  }

  /* Rozbalená hlavní kategorie - zvýraznění */
  .navigation-in > ul > li.menu-accordion-open {
    background-color: #F5F5F5 !important;
  }

  .navigation-in > ul > li.menu-accordion-open > a {
    padding-bottom: 12px !important;
  }


  /* ============================================
     LEVEL 2 - PODKATEGORIE
     ============================================ */

  /* Skrytí obrázků kategorií */
  .menu-level-2 > li > a.menu-image {
    display: none !important;
  }

  .menu-level-2 > li {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
  }

  .menu-level-2 > li > div {
    position: relative !important;
    display: block !important;
  }

  /* Odkaz podkategorie */
  .menu-level-2 > li > div > a {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #000 !important;
    padding: 14px 70px 14px 40px !important;
    display: block !important;
    line-height: 1.3 !important;
    font-family: "roc-grotesk", sans-serif !important;
    text-decoration: none !important;
    background: none !important;
  }

  .menu-level-2 > li > div > a span {
    font-size: 18px !important;
    font-weight: 400 !important;
    font-family: "roc-grotesk", sans-serif !important;
  }

  /* Skrytí původní šipky na level 2 */
  .menu-level-2 > li > div > .submenu-arrow {
    display: none !important;
  }

  /* Toggle button pro level 2 */
  .menu-level-2 .menu-toggle-btn {
    font-size: 22px !important;
    color: #999 !important;
    right: 8px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Rozbalená podkategorie */
  .menu-level-2 > li.menu-accordion-open {
    background-color: #ECECEC !important;
    border-radius: 0 !important;
  }


  /* ============================================
     LEVEL 3 - TŘETÍ ÚROVEŇ (inline)
     ============================================ */

  .menu-level-2 > li.menu-accordion-open > div > ul.menu-level-3 {
    display: block !important;
  }

  .menu-level-3 {
    list-style: none !important;
    padding: 0 0 12px 40px !important;
  }

  .menu-level-3 > li {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    position: static !important;
  }

  .menu-level-3 > li > a {
    font-size: 15px !important;
    color: #666 !important;
    padding: 4px 0 !important;
    display: inline !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    font-family: "roc-grotesk", sans-serif !important;
    line-height: 2 !important;
  }

  .menu-level-3 > li > a:hover,
  .menu-level-3 > li > a:active {
    color: #000 !important;
  }

  /* Čárky mezi položkami level 3 - jsou již v HTML */


  /* ============================================
     BANNER
     ============================================ */

  .mega-menu-custom-banner.mobile-mega-menu-inserted {
    padding: 20px 24px 8px 24px !important;
    display: block !important;
  }

  .mobile-menu-banner {
    display: block !important;
  }

  .mobile-menu-banner a {
    display: block !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .mobile-menu-banner img {
    width: 100% !important;
    border-radius: 10px !important;
    display: block !important;
  }

  .mobile-menu-banner .menu-banner-text {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    background-color: #fff !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-family: "roc-grotesk", sans-serif !important;
    color: #000 !important;
  }

  /* Desktop bannery skrýt */
  .ohne-style-menu-banners.desktop-only {
    display: none !important;
  }

  .mobile-menu-banner.mobile-only {
    display: block !important;
  }


  /* ============================================
     SPODNÍ ČÁST MENU
     ============================================ */

  .menu-spodek {
    margin-top: 32px !important;
    padding: 20px 24px !important;
    border-top: 1px solid #E5E5E5 !important;
  }

  .menu-spodek .leva ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .menu-spodek .leva ul li a {
    font-size: 14px !important;
    color: #666 !important;
    font-family: "roc-grotesk", sans-serif !important;
  }

  /* Navigation actions */
  .navigationActions {
    padding: 12px 24px !important;
    border-top: 1px solid #E5E5E5 !important;
    margin-top: 16px !important;
  }

  .navigationActions > li > a {
    font-size: 16px !important;
    font-family: "roc-grotesk", sans-serif !important;
    color: #000 !important;
  }

}
/* === FIX 1: Toggle tlačítko zůstane viditelné === */
@media screen and (max-width: 991px) {

  /* Level 1 toggle - fixní pozice v rámci li */
  .navigation-in > ul > li > .menu-toggle-btn {
    position: absolute !important;
    right: 16px !important;
    top: 22px !important;
    transform: none !important;
    z-index: 10 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Zajistit že li má správný context */
  .navigation-in > ul > li {
    position: relative !important;
    overflow: visible !important;
  }

  /* Rozbalená kategorie - toggle stále viditelný */
  .navigation-in > ul > li.menu-accordion-open > .menu-toggle-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    right: 16px !important;
    top: 22px !important;
  }

  /* === FIX 2: Třetí úroveň - pod sebe se správným fontem === */
  .menu-level-3 > li {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .menu-level-3 > li > a {
    font-size: 15px !important;
    color: #666 !important;
    padding: 8px 0 8px 56px !important;
    display: block !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    font-family: "roc-grotesk", sans-serif !important;
    line-height: 1.4 !important;
    border-top: 1px solid #E9E9E9 !important;
  }

  .menu-level-3 > li:first-child > a {
    border-top: 0 !important;
  }

  .menu-level-3 > li > a:hover,
  .menu-level-3 > li > a:active {
    color: #000 !important;
  }

  .menu-level-3 {
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

}
@media screen and (max-width: 991px) {

  /* FIX 1: Level-2 toggle - vždy nahoře vedle nadpisu */
  .menu-level-2 > li > div {
    position: relative !important;
  }

  .menu-level-2 > li > div > .menu-toggle-btn {
    position: absolute !important;
    right: 8px !important;
    top: 14px !important;
    transform: none !important;
  }

  /* FIX 2: Level-3 font - maximální specificita */
  .navigation-in .has-third-level div > ul.menu-level-3 > li > a,
  .navigation-in .menu-level-2 .has-third-level div ul.menu-level-3 li a,
  .navigation-in ul ul ul.menu-level-3 li a,
  #navigation .menu-level-3 > li > a {
    font-family: "roc-grotesk", sans-serif !important;
    font-size: 15px !important;
    color: #666 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    padding: 8px 0 8px 56px !important;
    display: block !important;
  }

  #navigation .menu-level-3 > li > a:hover,
  .navigation-in .has-third-level div > ul.menu-level-3 > li > a:hover {
    color: #000 !important;
  }

}
/* === SUBCATEGORIE - CHIPY S OUTLINE === */

/* Horizontální layout */
.subcategories.with-image,
.subcategories {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  gap: 10px !important;
  margin: 0 0 40px 0 !important;
  padding: 0 0 0 0 !important;
  list-style: none !important;
  align-items: center !important;
}

/* Skrytí scrollbaru */
.subcategories.with-image::-webkit-scrollbar,
.subcategories::-webkit-scrollbar {
  display: none;
}
.subcategories.with-image,
.subcategories {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Reset grid tříd */
.subcategories.with-image > li,
.subcategories > li,
.subcategories.with-image > li.col-xs-6,
.subcategories.with-image > li.col-sm-6,
.subcategories.with-image > li.col-lg-3,
.subcategories.with-image > li.col-xl-3 {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  scroll-snap-align: start;
}

/* Chip styl */
.subcategories.with-image li a,
.subcategories li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 48px !important;
  padding: 0 20px 0 6px !important;
  border: 1.5px solid #E5E5E5 !important;
  border-radius: 999px !important;
  background: #fff !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  font-family: "roc-grotesk", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #192826 !important;
  transition: border-color 0.2s ease !important;
}

.subcategories.with-image li a:hover,
.subcategories li a:hover {
  border-color: #192826 !important;
}

/* Šipka - skrytí */
.subcategories.with-image li a::after,
.subcategories li a::after {
  display: none !important;
}

/* Fotky v chipu - 36px */
.subcategories.with-image li a .image {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background-color: #F5F5F5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.subcategories.with-image li a .image img {
  width: 36px !important;
  height: 36px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  mix-blend-mode: darken !important;
  margin: 0 !important;
  max-height: none !important;
}

/* Text v chipu */
.subcategories.with-image li a .text,
.subcategories li a .text {
  width: auto !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: "roc-grotesk", sans-serif !important;
  text-align: left !important;
  padding: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: inline !important;
  line-height: 1 !important;
}

/* Čárka za textem (z původního CSS) - skrýt */
.subcategories.with-image li a .text::after {
  display: none !important;
}

/* === BREADCRUMB CHIP === */
.subcategory-breadcrumb-li {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

.subcategory-breadcrumb-chip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 48px !important;
  padding: 0 14px 0 20px !important;
  border: 1.5px solid #192826 !important;
  border-radius: 999px !important;
  background: #fff !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  font-family: "roc-grotesk", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #192826 !important;
  flex: 0 0 auto !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.subcategory-breadcrumb-chip:hover {
  background-color: #F5F5F5 !important;
  border-color: #192826 !important;
  color: #192826 !important;
  text-decoration: none !important;
}

/* Šipka mezi úrovněmi */
.subcategory-breadcrumb-chip .chip-separator {
  color: #999 !important;
  font-size: 12px !important;
  margin: 0 -2px !important;
}

/* X tlačítko */
.subcategory-breadcrumb-chip .chip-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #F0F0F0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: #666 !important;
  margin-left: 2px !important;
  transition: background-color 0.2s ease !important;
}

.subcategory-breadcrumb-chip:hover .chip-close {
  background-color: #E0E0E0 !important;
  color: #192826 !important;
}

/* === MOBIL === */
@media screen and (max-width: 767px) {

  .subcategories.with-image,
  .subcategories {
    margin: 0 -10px 32px 0 !important;
    padding-right: 10px !important;
    gap: 8px !important;
  }

  .subcategories.with-image li a,
  .subcategories li a {
    font-size: 15px !important;
    height: 44px !important;
    font-weight: 600 !important;
    padding: 0 16px 0 5px !important;
    gap: 8px !important;
  }

  .subcategories.with-image li a .image {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

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

  .subcategory-breadcrumb-chip {
    font-size: 15px !important;
    height: 44px !important;
    padding: 0 12px 0 16px !important;
    gap: 8px !important;
  }

  .subcategories.with-image li a .text,
  .subcategories li a .text {
    font-size: 15px !important;
  }
}

/* === DESKTOP === */
@media screen and (min-width: 992px) {
  .subcategories.with-image,
  .subcategories {
    overflow-x: visible !important;
    margin-bottom: 48px !important;
    gap: 12px !important;
  }
}