/*
 * Founárna – autoritativní stabilizační vrstva
 * Verze: 20260714rr4
 *
 * Načítat jako POSLEDNÍ CSS. Sjednocuje hlavičku, hero a viditelnost
 * kategorií po starších dílčích úpravách bez zásahu do dat Shoptetu.
 */

:root {
  --fn-recovery-ink: #101827;
  --fn-recovery-line: rgba(190, 205, 226, .72);
  --fn-recovery-panel: rgba(255, 255, 255, .96);
}

html.fn-runtime-recovery,
html.fn-runtime-recovery body {
  min-width: 0;
}

html.fn-runtime-recovery *,
html.fn-runtime-recovery *::before,
html.fn-runtime-recovery *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Obsah kategorií a detailu: vždy viditelný, nikdy prázdná stránka
   ------------------------------------------------------------------ */
html.fn-runtime-recovery body:not(.type-product) #content .category-top,
html.fn-runtime-recovery body:not(.type-product) #content .subcategories,
html.fn-runtime-recovery body:not(.type-product) #content [class*="subcategor"],
html.fn-runtime-recovery body:not(.type-product) #content #filters-wrapper,
html.fn-runtime-recovery body:not(.type-product) #content .filters-wrapper,
html.fn-runtime-recovery body:not(.type-product) #content .filter-section,
html.fn-runtime-recovery body:not(.type-product) #content .fn-model-filter-sidebar,
html.fn-runtime-recovery body:not(.type-product) #content .products-block,
html.fn-runtime-recovery body:not(.type-product) #content .products,
html.fn-runtime-recovery body:not(.type-product) #content .product,
html.fn-runtime-recovery body:not(.type-product) #content .p,
html.fn-runtime-recovery body.type-product #content,
html.fn-runtime-recovery body.type-product #content .p-detail,
html.fn-runtime-recovery body.type-product #content .product-top {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
}

html.fn-runtime-recovery body:not(.type-product) #content #filters-wrapper,
html.fn-runtime-recovery body:not(.type-product) #content .filters-wrapper,
html.fn-runtime-recovery body:not(.type-product) #content .filter-section,
html.fn-runtime-recovery body:not(.type-product) #content .fn-model-filter-sidebar,
html.fn-runtime-recovery body.type-product #content,
html.fn-runtime-recovery body.type-product #content .p-detail,
html.fn-runtime-recovery body.type-product #content .product-top {
  pointer-events: auto !important;
}

html.fn-runtime-recovery body:not(.type-product) #content .product.fn-category-facet-product-hidden,
html.fn-runtime-recovery body:not(.type-product) #content .p.fn-category-facet-product-hidden {
  display: none !important;
}

html.fn-runtime-recovery body:not(.type-product) #content .fn-model-image-pending img,
html.fn-runtime-recovery body:not(.type-product) #content img.fn-model-image-pending {
  visibility: visible !important;
  opacity: 1 !important;
}

html.fn-runtime-recovery body:not(.type-product) #content .category-top:empty,
html.fn-runtime-recovery body:not(.type-product) #content .subcategories:empty {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Starší kompaktní/antiflash vrstvy měnily display nebo rezervovaly vysoký
   prázdný blok. Neprázdný obsah musí být od prvního renderu ve skutečném toku. */
html.fn-runtime-recovery body:not(.type-product) #content .category-top:not(:empty) {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  min-height: 0 !important;
  max-height: none !important;
  opacity: 1 !important;
}

html.fn-runtime-recovery body:not(.type-product) #content .subcategories:not(:empty) {
  display: grid !important;
  visibility: visible !important;
  min-height: 0 !important;
  max-height: none !important;
  opacity: 1 !important;
}

html.fn-runtime-recovery body:not(.type-product) #content .products-block,
html.fn-runtime-recovery body:not(.type-product) #content .products {
  visibility: visible !important;
  min-height: 0 !important;
  max-height: none !important;
  opacity: 1 !important;
}

/* ------------------------------------------------------------------
   Desktopová navigace: stabilní pozice, bez skoku a bez zmizení
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  html.fn-runtime-recovery #navigation,
  html.fn-runtime-recovery #navigation .navigation-wrapper,
  html.fn-runtime-recovery #navigation .navigation-in {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html.fn-runtime-recovery #navigation {
    z-index: 1200 !important;
    border-top: 1px solid rgba(205, 215, 230, .54) !important;
    border-bottom: 1px solid rgba(205, 215, 230, .54) !important;
    background: rgba(255, 255, 255, .98) !important;
  }

  html.fn-runtime-recovery.fn-primary-nav-native-ready #navigation .menu-helper {
    display: none !important;
  }

  html.fn-runtime-recovery:not(.fn-primary-nav-native-ready) #navigation .menu-helper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html.fn-runtime-recovery #navigation .navigation-in > .menu-level-1,
  html.fn-runtime-recovery #navigation .fn-primary-navigation__list {
    position: static !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: clamp(2px, .55vw, 10px) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 60px !important;
    margin: 0 auto !important;
    padding: 0 clamp(10px, 2vw, 34px) !important;
    overflow: visible !important;
    transform: none !important;
  }

  html.fn-runtime-recovery #navigation .menu-level-1 > li {
    position: static !important;
    display: flex !important;
    align-items: stretch !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html.fn-runtime-recovery #navigation .menu-level-1 > li > a,
  html.fn-runtime-recovery #navigation .menu-level-1 > li:hover > a,
  html.fn-runtime-recovery #navigation .menu-level-1 > li.exp > a,
  html.fn-runtime-recovery #navigation .menu-level-1 > li.active > a,
  html.fn-runtime-recovery #navigation .menu-level-1 > li > a:focus-visible {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 clamp(8px, .9vw, 16px) !important;
    border: 0 !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    color: var(--fn-recovery-ink) !important;
    font-size: clamp(13px, .9vw, 16px) !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html.fn-runtime-recovery #navigation .menu-level-1 > li > a::before,
  html.fn-runtime-recovery #navigation .menu-level-1 > li > a::after {
    display: none !important;
    content: none !important;
  }

  html.fn-runtime-recovery #navigation .menu-level-1 > li:hover > a,
  html.fn-runtime-recovery #navigation .menu-level-1 > li.exp > a,
  html.fn-runtime-recovery #navigation .menu-level-1 > li.active > a,
  html.fn-runtime-recovery #navigation .menu-level-1 > li > a:focus-visible {
    background: linear-gradient(135deg, rgba(255, 241, 195, .62), rgba(229, 242, 255, .78)) !important;
    box-shadow: inset 0 0 0 1px rgba(117, 130, 158, .16) !important;
  }

  html.fn-runtime-recovery #navigation .menu-level-1 > li > .menu-level-2,
  html.fn-runtime-recovery #navigation .menu-level-1 > li > ul,
  html.fn-runtime-recovery #navigation .menu-level-1 > li > div[class*="menu-level"] {
    position: absolute !important;
    z-index: 1300 !important;
    top: 60px !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    transform-origin: top center !important;
  }

  html.fn-runtime-recovery #navigation .fn-primary-navigation__fallback > li > ul {
    display: none !important;
  }

  /* Filtr zůstává vlevo i na menším notebooku. Původní pravidlo při 1180 px
     vytvořilo přes celou stránku 650px vysoký panel a rozcestníky vypadaly
     jako prázdné. Mobilní drawer začíná až pod 992 px. */
  html.fn-runtime-recovery body:not(.type-product) #content .fn-model-filter-layout {
    display: grid !important;
    grid-template-columns: clamp(220px, 19vw, 252px) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(14px, 1.5vw, 22px) !important;
    width: min(1600px, calc(100% - 24px)) !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 10px auto 26px !important;
  }

  html.fn-runtime-recovery body:not(.type-product) #content .fn-model-filter-sidebar {
    position: sticky !important;
    top: 112px !important;
    display: block !important;
    align-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - 132px) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html.fn-runtime-recovery body:not(.type-product) #content .fn-model-filter-main {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
}

/* ------------------------------------------------------------------
   Hero: jedna geometrie, statický tok textu a žádné překrytí CTA
   ------------------------------------------------------------------ */
html.fn-runtime-recovery .fn-model-finder--slider,
html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__inner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  transform: none !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__inner {
  position: relative !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1896 / 829 !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__visual,
html.fn-runtime-recovery .fn-model-finder--slider .fn-hero-scenes,
html.fn-runtime-recovery .fn-model-finder--slider .fn-hero-scene,
html.fn-runtime-recovery .fn-model-finder--slider .fn-hero-scene picture,
html.fn-runtime-recovery .fn-model-finder--slider .fn-hero-scene img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-hero-scene img {
  object-fit: contain !important;
  object-position: center !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-hero-scene::after {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  background: linear-gradient(90deg, rgba(255, 252, 245, .97) 0%, rgba(255, 252, 245, .91) 36%, rgba(255, 255, 255, .18) 61%, transparent 79%) !important;
  content: "" !important;
  pointer-events: none !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__content {
  position: relative !important;
  inset: auto !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 53% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(22px, 3vw, 50px) clamp(24px, 3.6vw, 62px) !important;
  transform: none !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__content > * {
  position: relative !important;
  inset: auto !important;
  float: none !important;
  transform: none !important;
}

html.fn-runtime-recovery .fn-model-finder--slider #fn-model-finder-title,
html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__content > h2 {
  width: 100% !important;
  min-height: 0 !important;
  margin: 10px 0 12px !important;
  font-size: clamp(36px, 3.7vw, 64px) !important;
  line-height: 1 !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__lead {
  width: 100% !important;
  max-width: 690px !important;
  min-height: 0 !important;
  margin: 0 0 16px !important;
  font-size: clamp(15px, 1.22vw, 20px) !important;
  line-height: 1.45 !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__cta,
html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__button {
  align-self: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 330px !important;
  min-height: 46px !important;
  height: auto !important;
  margin: 0 0 14px !important;
  padding: 11px 22px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brands {
  display: block !important;
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  min-height: 0 !important;
  margin: 0 !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brand-label,
html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brands-label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 7px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brands,
html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brand-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brand-grid {
  display: grid !important;
  width: 100% !important;
  margin: 0 !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brand,
html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brand-grid > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 4px 6px !important;
  overflow: hidden !important;
}

html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brand img,
html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brand-grid img {
  display: block !important;
  width: auto !important;
  max-width: 96% !important;
  height: auto !important;
  max-height: 29px !important;
  margin: auto !important;
  object-fit: contain !important;
}

html.fn-runtime-recovery .fn-hero-control-list button {
  width: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
  font-size: 0 !important;
}

html.fn-runtime-recovery .fn-hero-control-list button i {
  display: block !important;
}

/* ------------------------------------------------------------------
   Mobilní hero a navigace
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
  html.fn-runtime-recovery #navigation {
    min-height: 0 !important;
  }

  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__inner {
    aspect-ratio: 941 / 1672 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  html.fn-runtime-recovery .fn-model-finder--slider .fn-hero-scene img {
    object-fit: contain !important;
    object-position: center top !important;
  }

  html.fn-runtime-recovery .fn-model-finder--slider .fn-hero-scene::after {
    background: linear-gradient(180deg, rgba(255, 252, 245, .97) 0%, rgba(255, 252, 245, .91) 43%, rgba(255, 255, 255, .26) 64%, rgba(255, 255, 255, .04) 100%) !important;
  }

  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__content {
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    padding: 7% 6% 5% !important;
  }

  html.fn-runtime-recovery .fn-model-finder--slider #fn-model-finder-title,
  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__content > h2 {
    max-width: 94% !important;
    margin: 8px 0 10px !important;
    font-size: clamp(31px, 9vw, 46px) !important;
    line-height: 1.02 !important;
  }

  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__lead {
    max-width: 94% !important;
    margin-bottom: 12px !important;
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1.42 !important;
  }

  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__cta,
  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__button {
    min-height: 42px !important;
    margin-bottom: 12px !important;
    padding: 10px 17px !important;
    font-size: 14px !important;
  }

  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brands,
  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brand,
  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brand-grid > a {
    min-height: 43px !important;
    height: 43px !important;
    padding: 4px !important;
  }

  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brand img,
  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__brand-grid img {
    max-width: 98% !important;
    max-height: 33px !important;
  }
}

@media (max-width: 520px) {
  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__content {
    padding: 6.5% 5.2% 4.5% !important;
  }

  html.fn-runtime-recovery .fn-model-finder--slider #fn-model-finder-title,
  html.fn-runtime-recovery .fn-model-finder--slider .fn-model-finder__content > h2 {
    font-size: clamp(29px, 9.5vw, 40px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.fn-runtime-recovery *,
  html.fn-runtime-recovery *::before,
  html.fn-runtime-recovery *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}