/*
 * IONTMAX Theme — Site Boot Critical CSS
 * Modular Blank CSS anti-FOUC layer.
 *
 * Účel:
 * - zabránit probliknutí nativního Shoptet headeru,
 * - zabránit probliknutí mobilního loga v Classic velikosti,
 * - zabránit probliknutí login/cart user-action,
 * - zabránit probliknutí nehotových produktových karet,
 * - vykreslit listing title rovnou ve finálním IONTMAX stylu,
 * - stabilizovat geometrii homepage sliderů před runtime,
 * - zachovat bezpečný fallback při selhání IONTMAX runtime.
 */


/* =========================================================
   1. NATIVNÍ SHOPTET TOP BAR
   ========================================================= */

.top-navigation-bar {
  display: none !important;
}


/* =========================================================
   2. HEADER PŘED SESTAVENÍM IONTMAX HEADERU
   ========================================================= */

#header:not(:has(.im-header)) {
  min-height: 64px;
  background: #fff;
}

#header:not(:has(.im-header)) .navigation-buttons,
#header:not(:has(.im-header)) .navigation-tools,
#header:not(:has(.im-header)) #navigation,
#header:not(:has(.im-header)) .navigation-in,
#header:not(:has(.im-header)) [data-testid="hamburgerMenu"],
#header:not(:has(.im-header)) [data-target="navigation"] {
  display: none !important;
}


/* =========================================================
   2A. MOBILE LOGO — FIRST-PAINT ANTI-FOUC

   Nativní Shoptet logo je před sestavením .im-header skryté.
   Jinak se na mobilu stihne vykreslit v původní Classic
   velikosti a až následně se přesune do IONTMAX headeru.
   ========================================================= */

@media (max-width: 767px) {
  #header:not(:has(.im-header)) {
    min-height: 52px !important;
    max-height: 52px !important;
    overflow: hidden !important;
  }

  #header:not(:has(.im-header)) .site-name-wrapper,
  #header:not(:has(.im-header)) .site-name-wrapper .site-name,
  #header:not(:has(.im-header)) .site-name-wrapper a,
  #header:not(:has(.im-header)) .site-name-wrapper img {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   3. NATIVE USER ACTION / LOGIN / CART — ANTI-FOUC
   ========================================================= */

.user-action,
.user-action-in,
.user-action-login,
.user-action-cart {
  position: fixed !important;

  top: -100000px !important;
  left: -100000px !important;

  width: 1px !important;
  height: 1px !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: 1px !important;
  max-height: 1px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  overflow: hidden !important;

  opacity: 0 !important;
  visibility: hidden !important;

  pointer-events: none !important;

  transform: none !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;
}


/* =========================================================
   4. IONTMAX PANEL
   ========================================================= */

.im-panel-overlay .user-action,
.im-panel-overlay .user-action-in,
.im-panel-overlay .user-action-login,
.im-panel-overlay .user-action-cart,

.im-panel-overlay__content .user-action,
.im-panel-overlay__content .user-action-in,
.im-panel-overlay__content .user-action-login,
.im-panel-overlay__content .user-action-cart,

.im-panel-overlay__content .popup-widget,
.im-panel-overlay__content .im-panel-widget {
  position: static !important;

  top: auto !important;
  left: auto !important;

  width: auto !important;
  height: auto !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: none !important;
  max-height: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: initial;
  padding-right: initial;

  overflow: visible !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: auto !important;

  transform: none !important;

  clip: auto !important;
  clip-path: none !important;

  white-space: normal !important;
}


/* =========================================================
   5. HEADER TOOLS — LANGUAGE / CURRENCY ANTI-FOUC
   ========================================================= */

.im-header__tools [data-testid="topnavCurrencyDropdown"],
.im-header__tools [data-testid="topnavLanguageDropdown"],
.im-header__tools .languagesMenu__box,
.im-header__tools .dropdown[data-testid*="Currency"],
.im-header__tools .dropdown[data-testid*="Language"],

.im-mobile-nav__tools [data-testid="topnavCurrencyDropdown"],
.im-mobile-nav__tools [data-testid="topnavLanguageDropdown"],
.im-mobile-nav__tools .languagesMenu__box,
.im-mobile-nav__tools .dropdown[data-testid*="Currency"],
.im-mobile-nav__tools .dropdown[data-testid*="Language"] {
  display: none !important;
}

.im-header__tools .im-header-tool-mount,
.im-mobile-nav__tools .im-header-tool-mount {
  display: block !important;
}

.im-header__tools,
.im-mobile-nav__tools {
  min-height: 42px;
}


/* =========================================================
   6. HOMEPAGE PRODUCT LISTING — FIRST PAINT GEOMETRY

   Slider dostane finální šířku ještě před tím, než runtime
   přidá .iontmax-listing-carousel-holder.
   ========================================================= */

body.type-index .product-slider-holder,
body.in-index .product-slider-holder,
body.template-index .product-slider-holder {
  --iontmax-listing-pad:
    var(--im-pad, clamp(16px, 4.2vw, 72px));

  --iontmax-listing-max:
    var(--im-max, 1800px);

  box-sizing: border-box !important;

  position: relative !important;

  left: auto !important;

  width: min(
    calc(100% - (var(--iontmax-listing-pad) * 2)),
    var(--iontmax-listing-max)
  ) !important;

  max-width: var(--iontmax-listing-max) !important;

  margin-right: auto !important;
  margin-left: auto !important;

  padding-right: 0 !important;
  padding-left: 0 !important;

  transform: none !important;
}


/* =========================================================
   7. PRODUCT LISTING TITLE — FINÁLNÍ STYL OD PRVNÍHO PAINTU

   Nadpis neschováváme.
   Rovnou dostane stejný vzhled jako po inicializaci runtime.
   ========================================================= */

body.type-index .iontmax-homepage-products-heading,
body.in-index .iontmax-homepage-products-heading,
body.template-index .iontmax-homepage-products-heading,

body.type-index
.homepage-group-title[class*="homepage-products-heading-"],
body.in-index
.homepage-group-title[class*="homepage-products-heading-"],
body.template-index
.homepage-group-title[class*="homepage-products-heading-"],

body.type-index [class*="homepage-products-heading-"],
body.in-index [class*="homepage-products-heading-"],
body.template-index [class*="homepage-products-heading-"],

body.type-index
.homepage-group-title:has(+ .product-slider-holder),
body.in-index
.homepage-group-title:has(+ .product-slider-holder),
body.template-index
.homepage-group-title:has(+ .product-slider-holder),

body.type-index
:is(h2, h3, .h4):has(+ .product-slider-holder),
body.in-index
:is(h2, h3, .h4):has(+ .product-slider-holder),
body.template-index
:is(h2, h3, .h4):has(+ .product-slider-holder),

body.type-detail .iontmax-homepage-products-heading,
body.in-detail .iontmax-homepage-products-heading,

body.type-detail
.homepage-group-title[class*="homepage-products-heading-"],
body.in-detail
.homepage-group-title[class*="homepage-products-heading-"] {
  --iontmax-listing-pad:
    var(--im-pad, clamp(16px, 4.2vw, 72px));

  --iontmax-listing-max:
    var(--im-max, 1800px);

  box-sizing: border-box !important;

  position: relative !important;

  left: auto !important;

  display: block !important;

  width: min(
    calc(100% - (var(--iontmax-listing-pad) * 2)),
    var(--iontmax-listing-max)
  ) !important;

  max-width: var(--iontmax-listing-max) !important;

  margin:
    0
    auto
    clamp(28px, 2.2vw, 36px) !important;

  padding: 0 !important;

  border: 0 !important;
  border-bottom: 0 !important;

  color: #202124 !important;

  font-size: clamp(22px, 1.45vw, 28px) !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;

  letter-spacing: -0.01em !important;

  text-align: left !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;
}


/* =========================================================
   8. PRODUCT LISTING — GLOBAL FIRST-PAINT ANTI-FOUC

   Důležité:
   Kategorie a search mají #products a .products-block na
   STEJNÉM elementu: #products.products-block.

   Starý selector "#products .products-block" proto tyto
   listingy netrefil a Classic karta mohla probliknout.
   ========================================================= */


/* Homepage sliders */

body.type-index
.product-slider-holder
.products-block:not(.iontmax-product-block-v23),

body.in-index
.product-slider-holder
.products-block:not(.iontmax-product-block-v23),

body.template-index
.product-slider-holder
.products-block:not(.iontmax-product-block-v23) {
  visibility: hidden !important;
  opacity: 0 !important;

  pointer-events: none !important;
}


/* Homepage product blocks */

body.type-index
.products-block[class*="homepage-products-"]:not(.iontmax-product-block-v23),

body.in-index
.products-block[class*="homepage-products-"]:not(.iontmax-product-block-v23),

body.template-index
.products-block[class*="homepage-products-"]:not(.iontmax-product-block-v23) {
  visibility: hidden !important;
  opacity: 0 !important;

  pointer-events: none !important;
}


/* Category — #products.products-block is one element */

body.type-category
#products.products-block:not(.iontmax-product-block-v23),

body.in-category
#products.products-block:not(.iontmax-product-block-v23),

body.template-category
#products.products-block:not(.iontmax-product-block-v23),

body.type-category
.products-block:not(.products-additional):not(.iontmax-product-block-v23),

body.in-category
.products-block:not(.products-additional):not(.iontmax-product-block-v23),

body.template-category
.products-block:not(.products-additional):not(.iontmax-product-block-v23) {
  visibility: hidden !important;
  opacity: 0 !important;

  pointer-events: none !important;
}


/* Search — #products.products-block is one element */

body.type-search
#products.products-block:not(.iontmax-product-block-v23),

body.in-vyhledavani
#products.products-block:not(.iontmax-product-block-v23),

body.template-search
#products.products-block:not(.iontmax-product-block-v23),

body.type-search
.products-block:not(.products-additional):not(.iontmax-product-block-v23),

body.in-vyhledavani
.products-block:not(.products-additional):not(.iontmax-product-block-v23),

body.template-search
.products-block:not(.products-additional):not(.iontmax-product-block-v23) {
  visibility: hidden !important;
  opacity: 0 !important;

  pointer-events: none !important;
}


/* Related products */

body.type-detail
.products-block.products-related:not(.iontmax-product-block-v23),

body.in-detail
.products-block.products-related:not(.iontmax-product-block-v23) {
  visibility: hidden !important;
  opacity: 0 !important;

  pointer-events: none !important;
}


/* =========================================================
   9. PRODUCT SLIDER CONTROLS — ANTI-FOUC
   ========================================================= */

body.type-index
.product-slider-holder
.product-slider-navigation:not(
  [data-iontmax-product-native-nav="ready"]
),

body.in-index
.product-slider-holder
.product-slider-navigation:not(
  [data-iontmax-product-native-nav="ready"]
),

body.template-index
.product-slider-holder
.product-slider-navigation:not(
  [data-iontmax-product-native-nav="ready"]
),

body.type-detail
.product-slider-holder
.product-slider-navigation:not(
  [data-iontmax-product-native-nav="ready"]
),

body.in-detail
.product-slider-holder
.product-slider-navigation:not(
  [data-iontmax-product-native-nav="ready"]
) {
  visibility: hidden !important;
  opacity: 0 !important;

  pointer-events: none !important;
}


/* =========================================================
   10. READY PRODUCT BLOCK
   ========================================================= */

body.type-index
.products-block.iontmax-product-block-v23,

body.in-index
.products-block.iontmax-product-block-v23,

body.template-index
.products-block.iontmax-product-block-v23,

body.type-category
#products.products-block.iontmax-product-block-v23,

body.in-category
#products.products-block.iontmax-product-block-v23,

body.template-category
#products.products-block.iontmax-product-block-v23,

body.type-search
#products.products-block.iontmax-product-block-v23,

body.in-vyhledavani
#products.products-block.iontmax-product-block-v23,

body.template-search
#products.products-block.iontmax-product-block-v23,

body.type-detail
.products-block.products-related.iontmax-product-block-v23,

body.in-detail
.products-block.products-related.iontmax-product-block-v23 {
  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: auto !important;
}


/* =========================================================
   11. READY SLIDER CONTROLS
   ========================================================= */

.product-slider-holder
.product-slider-navigation[
  data-iontmax-product-native-nav="ready"
] {
  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: auto !important;
}


/* =========================================================
   12. MOBILE FIRST-PAINT GEOMETRY
   ========================================================= */

@media (max-width: 767px) {
  body.type-index .product-slider-holder,
  body.in-index .product-slider-holder,
  body.template-index .product-slider-holder {
    width: min(
      calc(100% - 32px),
      var(--iontmax-listing-max, 1800px)
    ) !important;
  }


  body.type-index .iontmax-homepage-products-heading,
  body.in-index .iontmax-homepage-products-heading,
  body.template-index .iontmax-homepage-products-heading,

  body.type-index
  .homepage-group-title[class*="homepage-products-heading-"],
  body.in-index
  .homepage-group-title[class*="homepage-products-heading-"],
  body.template-index
  .homepage-group-title[class*="homepage-products-heading-"],

  body.type-index [class*="homepage-products-heading-"],
  body.in-index [class*="homepage-products-heading-"],
  body.template-index [class*="homepage-products-heading-"],

  body.type-index
  .homepage-group-title:has(+ .product-slider-holder),
  body.in-index
  .homepage-group-title:has(+ .product-slider-holder),
  body.template-index
  .homepage-group-title:has(+ .product-slider-holder),

  body.type-index
  :is(h2, h3, .h4):has(+ .product-slider-holder),
  body.in-index
  :is(h2, h3, .h4):has(+ .product-slider-holder),
  body.template-index
  :is(h2, h3, .h4):has(+ .product-slider-holder) {
    width: min(
      calc(100% - 32px),
      var(--iontmax-listing-max, 1800px)
    ) !important;

    margin-top: 8px !important;
    margin-bottom: 22px !important;

    font-size: 22px !important;
    line-height: 1.3 !important;
  }
}


/* =========================================================
   13. PRODUCT LISTING FAILURE SAFE

   Site boot JS po 5 s přidá html.im-listing-fallback.
   Pokud by runtime selhal, obsah se znovu zobrazí.
   ========================================================= */

html.im-listing-fallback
body
.product-slider-holder
.products-block,

html.im-listing-fallback
body
#products.products-block,

html.im-listing-fallback
body
.products-block:not(.products-additional),

html.im-listing-fallback
body
.products-block.products-related {
  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: auto !important;
}

html.im-listing-fallback
body
.product-slider-holder
.product-slider-navigation {
  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: auto !important;
}


/* =========================================================
   14. HEADER FAILURE SAFE
   ========================================================= */

html.im-header-fallback
#header:not(:has(.im-header))
.navigation-buttons,

html.im-header-fallback
#header:not(:has(.im-header))
.navigation-tools,

html.im-header-fallback
#header:not(:has(.im-header))
#navigation,

html.im-header-fallback
#header:not(:has(.im-header))
.navigation-in,

html.im-header-fallback
#header:not(:has(.im-header))
[data-testid="hamburgerMenu"],

html.im-header-fallback
#header:not(:has(.im-header))
[data-target="navigation"] {
  display: revert !important;
}


@media (max-width: 767px) {
  html.im-header-fallback
  #header:not(:has(.im-header)) {
    min-height: initial !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.im-header-fallback
  #header:not(:has(.im-header))
  .site-name-wrapper,

  html.im-header-fallback
  #header:not(:has(.im-header))
  .site-name-wrapper
  .site-name,

  html.im-header-fallback
  #header:not(:has(.im-header))
  .site-name-wrapper
  a,

  html.im-header-fallback
  #header:not(:has(.im-header))
  .site-name-wrapper
  img {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* =========================================================
   15. USER ACTION FAILURE SAFE
   ========================================================= */

html.im-header-fallback .user-action,
html.im-header-fallback .user-action-in,
html.im-header-fallback .user-action-login,
html.im-header-fallback .user-action-cart {
  position: static !important;

  top: auto !important;
  left: auto !important;

  width: auto !important;
  height: auto !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: none !important;
  max-height: none !important;

  margin: initial !important;
  padding: initial !important;

  overflow: visible !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: auto !important;

  transform: none !important;

  clip: auto !important;
  clip-path: none !important;

  white-space: normal !important;
}