/*
  IONTMAX Banner: Top carousel
  v61 - mobile homepage section spacing after banners
  Production file: iontmax-banner-carousel-VQ.css
*/

/* ─── SR-only utility (shared with header) ─── */
.im-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Anti-FOUC – nativní bannery skryté, dokud JS neinicializuje carousel */
body.type-index .next-to-carousel-banners:not(.iontmax-banner-carousel):not([data-iontmax-banner-carousel="ready"]),
body.in-index .next-to-carousel-banners:not(.iontmax-banner-carousel):not([data-iontmax-banner-carousel="ready"]),
body.template-index .next-to-carousel-banners:not(.iontmax-banner-carousel):not([data-iontmax-banner-carousel="ready"]),
body.type-index [data-testid="gridTopBanners"]:not(.iontmax-banner-carousel):not([data-iontmax-banner-carousel="ready"]),
body.in-index [data-testid="gridTopBanners"]:not(.iontmax-banner-carousel):not([data-iontmax-banner-carousel="ready"]),
body.template-index [data-testid="gridTopBanners"]:not(.iontmax-banner-carousel):not([data-iontmax-banner-carousel="ready"]) {
  visibility: hidden !important;
  overflow: hidden !important;
}

body.type-index .iontmax-banner-carousel,
body.in-index .iontmax-banner-carousel,
body.template-index .iontmax-banner-carousel,
body.type-index [data-iontmax-banner-carousel="ready"],
body.in-index [data-iontmax-banner-carousel="ready"],
body.template-index [data-iontmax-banner-carousel="ready"] {
  visibility: visible !important;
}

/* ══════════════════════════════════════════
   CAROUSEL SHELL
══════════════════════════════════════════ */

.iontmax-banner-carousel {
  --iontmax-carousel-inset: clamp(16px, 4.2vw, 72px);
  --iontmax-carousel-max: calc(var(--im-max, 1680px) + var(--iontmax-carousel-inset) + var(--iontmax-carousel-inset));
  --iontmax-carousel-gap: 10px;
  --iontmax-carousel-cards: 4.15;
  --iontmax-carousel-radius: 8px;
  --iontmax-carousel-text: #ffffff;
  --iontmax-carousel-muted: rgba(255, 255, 255, 0.92);
  --iontmax-carousel-button-bg: #ffffff;
  --iontmax-carousel-button-text: #262626;
  --iontmax-carousel-button-hover-fill: #e2e2e2;
  --iontmax-carousel-progress-dot: 7px;
  --iontmax-carousel-progress-line: 34px;
  --iontmax-carousel-progress-gap: 10px;
  --iontmax-carousel-arrow-size: 52px;
  --iontmax-carousel-black: #0a0a0a;
  --iontmax-carousel-white: #fff;

  display: block !important;
  position: relative;
  left: auto;
  transform: none;
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--iontmax-carousel-max) !important;
  margin: 0 auto 16px !important;
  padding-right: var(--iontmax-carousel-inset) !important;
  padding-left: var(--iontmax-carousel-inset) !important;
}

.iontmax-banner-carousel__viewport {
  position: relative;
  width: 100%;
}

.iontmax-banner-carousel__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: var(--iontmax-carousel-gap);
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 0 0 4px;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-x pan-y;
  width: 100% !important;
  max-width: 100% !important;
}

.iontmax-banner-carousel__track::-webkit-scrollbar { display: none; }

.iontmax-banner-carousel__item,
.iontmax-banner-carousel .banner-wrapper.iontmax-banner-carousel__item {
  --im-copy-x: clamp(18px, 1.9vw, 34px);
  --im-copy-y: clamp(18px, 1.9vw, 34px);
  --im-title: clamp(18px, 1.45vw, 26px);
  --im-body: clamp(11px, 0.78vw, 14px);
  --im-btn-fs: clamp(11px, 0.77vw, 13px);
  --im-btn-h: clamp(32px, 2.25vw, 39px);
  --im-btn-px: clamp(14px, 1.15vw, 20px);
  --im-btn-min-w: clamp(82px, 6.1vw, 109px);
  --im-btn-radius: 7px;
  --im-gap-title: clamp(5px, 0.38vw, 9px);
  --im-gap-body: clamp(10px, 0.72vw, 14px);

  flex: 0 0 calc(
    (100% - ((var(--iontmax-carousel-cards) - 1) * var(--iontmax-carousel-gap))) /
      var(--iontmax-carousel-cards)
  ) !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  aspect-ratio: 412.93 / 619.4;
  display: block !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  border-radius: var(--iontmax-carousel-radius);
  background: #f2f2f0;
  scroll-snap-align: start;
}

.iontmax-banner-carousel__item > a,
.iontmax-banner-carousel__wrapper,
.iontmax-banner-carousel__item picture {
  display: block;
  height: 100%;
}

.iontmax-banner-carousel__item a {
  position: relative;
  color: inherit;
  text-decoration: none;
  -webkit-user-drag: none;
}

.iontmax-banner-carousel__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.iontmax-banner-carousel__track.is-pointer-down {
  cursor: grabbing;
  scroll-behavior: auto;
}

.iontmax-banner-carousel__track.is-dragging,
.iontmax-banner-carousel__track.is-dragging * {
  cursor: grabbing;
  user-select: none;
}

.iontmax-banner-carousel__track.is-dragging a[href] {
  pointer-events: none !important;
}

/* Let horizontal swipe pass through image wrapper links to the scroll track. */
.iontmax-banner-carousel__track .banner-wrapper > a:not(.extended-banner-link),
.iontmax-banner-carousel__track .iontmax-banner-carousel__item > a:not(.extended-banner-link) {
  touch-action: pan-x pan-y;
}

/* ══════════════════════════════════════════
   CAPTION / TEXT
══════════════════════════════════════════ */

.iontmax-banner-carousel__caption,
.iontmax-banner-carousel .extended-banner-texts {
  position: absolute !important;
  top: auto !important;
  right: var(--im-copy-x) !important;
  bottom: var(--im-copy-y) !important;
  left: var(--im-copy-x) !important;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  width: calc(100% - (var(--im-copy-x) * 2)) !important;
  max-width: calc(100% - (var(--im-copy-x) * 2)) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--iontmax-carousel-text) !important;
  line-height: 1.2;
  text-align: left !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.22);
  transform: none !important;
  height: auto !important;
}

/* Some Shoptet templates hide banner copy until hover. Force always-visible text. */
.iontmax-banner-carousel .extended-banner-texts,
.iontmax-banner-carousel .extended-banner-title,
.iontmax-banner-carousel .extended-banner-text,
.iontmax-banner-carousel .banner-title,
.iontmax-banner-carousel .banner__title,
.iontmax-banner-carousel .banner-description,
.iontmax-banner-carousel [class*="banner-title"],
.iontmax-banner-carousel [class*="bannerTitle"],
.iontmax-banner-carousel [class*="banner-description"],
.iontmax-banner-carousel [class*="bannerDescription"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  text-indent: 0 !important;
}

.iontmax-banner-carousel__caption::before,
.iontmax-banner-carousel__caption::after,
.iontmax-banner-carousel__caption :is(.extended-banner-title, .extended-banner-text)::before,
.iontmax-banner-carousel__caption :is(.extended-banner-title, .extended-banner-text)::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.iontmax-banner-carousel__caption :is(
  .extended-banner-title, .extended-banner-text,
  .banner-title, .banner__title, .banner-description,
  [class*="banner-title"], [class*="bannerTitle"],
  [class*="banner-description"], [class*="bannerDescription"]
),
.iontmax-banner-carousel__item :where(
  .extended-banner-title, .banner-title, .banner__title,
  [class*="banner-title"], [class*="bannerTitle"],
  .extended-banner-text, .banner-description,
  [class*="banner-description"], [class*="bannerDescription"]
) {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  text-align: left !important;
  transform: none !important;
  color: var(--iontmax-carousel-text) !important;
  max-width: 88% !important;
  white-space: normal !important;
}

.iontmax-banner-carousel__caption :where(h1,h2,h3,h4,h5,h6),
.iontmax-banner-carousel__item :where(
  .extended-banner-title, .banner-title, .banner__title,
  [class*="banner-title"], [class*="bannerTitle"]
) {
  order: 1;
  margin: 0 0 var(--im-gap-title) !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: var(--im-title) !important;
  font-weight: 600 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.015em;
}

.iontmax-banner-carousel__caption :where(p, .extended-banner-desc, .banner-description),
.iontmax-banner-carousel__item :where(
  .extended-banner-text, .banner-description,
  [class*="banner-description"], [class*="bannerDescription"]
) {
  order: 2;
  margin: 0 0 var(--im-gap-body) !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--iontmax-carousel-muted) !important;
  font-size: var(--im-body) !important;
  font-weight: 400 !important;
  line-height: 1.32 !important;
}

/* Light-background banners – dark copy */
.iontmax-banner-carousel__item.im-banner--dark-copy {
  --iontmax-carousel-text: #262626;
  --iontmax-carousel-muted: #262626;
  --iontmax-carousel-button-bg: #262626;
  --iontmax-carousel-button-text: #ffffff;
  --iontmax-carousel-button-hover-fill: #1a1a1a;
}

.iontmax-banner-carousel__item.im-banner--dark-copy .iontmax-banner-carousel__caption,
.iontmax-banner-carousel__item.im-banner--dark-copy .extended-banner-texts {
  text-shadow: none !important;
}

/* Blue / photo cards – explicit light theme (Tricarb etc.) */
.iontmax-banner-carousel__item.im-banner--light {
  --iontmax-carousel-text: #ffffff;
  --iontmax-carousel-muted: rgba(255, 255, 255, 0.94);
  --iontmax-carousel-button-bg: #ffffff;
  --iontmax-carousel-button-text: #262626;
  --iontmax-carousel-button-hover-fill: #e2e2e2;
}

/*
  Finální mapa barev podle obrázku – přebíjí JS třídy.
  1,3,5 = tmavý text | 2,4 = bílý text
*/
.iontmax-banner-carousel__item:has(img[src*="banner_1-3"]),
.iontmax-banner-carousel__item:has(img[src*="banner_2-8"]),
.iontmax-banner-carousel__item:has(img[src*="banner_5-3"]) {
  --iontmax-carousel-text: #262626;
  --iontmax-carousel-muted: #262626;
  --iontmax-carousel-button-bg: #262626;
  --iontmax-carousel-button-text: #ffffff;
  --iontmax-carousel-button-hover-fill: #1a1a1a;
}

.iontmax-banner-carousel__item:has(img[src*="banner_1-3"]) .extended-banner-texts,
.iontmax-banner-carousel__item:has(img[src*="banner_2-8"]) .extended-banner-texts,
.iontmax-banner-carousel__item:has(img[src*="banner_5-3"]) .extended-banner-texts,
.iontmax-banner-carousel__item:has(img[src*="banner_1-3"]) .iontmax-banner-carousel__caption,
.iontmax-banner-carousel__item:has(img[src*="banner_2-8"]) .iontmax-banner-carousel__caption,
.iontmax-banner-carousel__item:has(img[src*="banner_5-3"]) .iontmax-banner-carousel__caption {
  text-shadow: none !important;
}

.iontmax-banner-carousel__item:has(img[src*="banner_3-2"]),
.iontmax-banner-carousel__item:has(img[src*="banner_4-5"]) {
  --iontmax-carousel-text: #ffffff;
  --iontmax-carousel-muted: rgba(255, 255, 255, 0.94);
  --iontmax-carousel-button-bg: #ffffff;
  --iontmax-carousel-button-text: #262626;
  --iontmax-carousel-button-hover-fill: #e2e2e2;
}

/* CTA button – paleta A, jen .extended-banner-link */
.iontmax-banner-carousel__item .extended-banner-link {
  position: relative !important;
  order: 3;
  z-index: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: var(--im-btn-min-w) !important;
  height: var(--im-btn-h) !important;
  min-height: var(--im-btn-h) !important;
  margin: 0 !important;
  padding: 0 var(--im-btn-px) !important;
  color: var(--iontmax-carousel-button-text) !important;
  background: var(--iontmax-carousel-button-bg) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--im-btn-radius) !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: var(--im-btn-fs) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transform: none !important;
  isolation: isolate;
  transition: color 0.18s !important;
}

.iontmax-banner-carousel__item .extended-banner-link::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--iontmax-carousel-button-hover-fill) !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1);
  pointer-events: none;
}

.iontmax-banner-carousel__item .extended-banner-link::after {
  display: none !important;
  content: none !important;
}

.iontmax-banner-carousel__item .extended-banner-link:hover::before {
  transform: scaleX(1);
  transition: transform 0.75s cubic-bezier(0.42, 0, 1, 1);
}

.iontmax-banner-carousel__item .extended-banner-link:hover {
  color: var(--iontmax-carousel-button-text) !important;
  background: var(--iontmax-carousel-button-bg) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

.iontmax-banner-carousel__item .im-banner-btn__label {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* Image-only banner: img was direct child, now inside <a> */
.iontmax-banner-carousel__item > a:only-child,
.iontmax-banner-carousel__item > a:has(> img.iontmax-banner-carousel__image) {
  display: block !important;
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════
   ARROWS + PROGRESS
══════════════════════════════════════════ */

.iontmax-banner-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--iontmax-carousel-arrow-size);
  height: var(--iontmax-carousel-arrow-size);
  padding: 0;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 32px rgba(0,0,0,.2);
  color: var(--iontmax-carousel-black);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity .22s, visibility .22s, transform .22s, background .18s, color .18s, border-color .18s;
}

.iontmax-banner-carousel__arrow:hover {
  border-color: var(--iontmax-carousel-black);
  background: var(--iontmax-carousel-black);
  color: var(--iontmax-carousel-white);
  transform: translateY(-50%) scale(1.04);
}

.iontmax-banner-carousel__arrow:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

.iontmax-banner-carousel__arrow:disabled {
  visibility: hidden !important;
  opacity: 0 !important;
  cursor: default;
  pointer-events: none !important;
}

.iontmax-banner-carousel__arrow--prev:disabled {
  transform: translate(-12px, -50%) scale(.92) !important;
}

.iontmax-banner-carousel__arrow--next:disabled {
  transform: translate(12px, -50%) scale(.92) !important;
}

.iontmax-banner-carousel__arrow:not(:disabled) {
  visibility: visible !important;
  opacity: 1 !important;
}

.iontmax-banner-carousel__arrow svg { width: 22px; height: 22px; }
.iontmax-banner-carousel__arrow--prev { left: -26px; }
.iontmax-banner-carousel__arrow--next { right: -26px; }

.iontmax-banner-carousel__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--iontmax-carousel-progress-gap);
  width: 100%;
  margin-top: 10px;
}

.iontmax-banner-carousel__progress-item {
  display: block;
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  width: var(--iontmax-carousel-progress-dot);
  height: var(--iontmax-carousel-progress-dot);
  min-width: var(--iontmax-carousel-progress-dot);
  min-height: var(--iontmax-carousel-progress-dot);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #dedede;
  cursor: pointer;
  opacity: .9;
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  vertical-align: middle;
  transition: width .24s ease, background .24s ease, opacity .24s ease;
}

.iontmax-banner-carousel__progress-item.is-active {
  width: var(--iontmax-carousel-progress-line);
  min-width: var(--iontmax-carousel-progress-line);
  height: var(--iontmax-carousel-progress-dot);
  min-height: var(--iontmax-carousel-progress-dot);
  background: #202020;
  opacity: 1;
}

.iontmax-banner-carousel__progress-item:focus-visible {
  outline: 2px solid #151515;
  outline-offset: 4px;
}

.iontmax-banner-carousel--no-overflow .iontmax-banner-carousel__progress {
  display: none;
}

/* ══════════════════════════════════════════
   CLASSIC CRITICAL FIX – Shoptet overrides track to display:block
══════════════════════════════════════════ */

.banners-row.iontmax-banner-carousel-host:not(.iontmax-banner-carousel) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

.banners-row.iontmax-banner-carousel-host::before,
.banners-row.iontmax-banner-carousel-host::after,
.iontmax-banner-carousel::before,
.iontmax-banner-carousel::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.type-index :where(
  .content-wrapper,
  .content,
  .container,
  .container-full-width,
  .homepage-box,
  .banners-row,
  .banner,
  .banner-wrapper,
  .extended-banner,
  .text-banners,
  .text-banner,
  .middle-banners-wrapper,
  .homepage-banners,
  #content
):has(.iontmax-banner-carousel),
body.type-index :where(
  .content-wrapper,
  .content,
  .container,
  .container-full-width,
  .homepage-box,
  .banners-row,
  .banner,
  .banner-wrapper,
  .extended-banner,
  .text-banners,
  .text-banner,
  .middle-banners-wrapper,
  .homepage-banners,
  #content
):has(.iontmax-banner-carousel-host),
body.in-index :where(
  .content-wrapper,
  .content,
  .container,
  .container-full-width,
  .homepage-box,
  .banners-row,
  .banner,
  .banner-wrapper,
  .extended-banner,
  .text-banners,
  .text-banner,
  .middle-banners-wrapper,
  .homepage-banners,
  #content
):has(.iontmax-banner-carousel),
body.in-index :where(
  .content-wrapper,
  .content,
  .container,
  .container-full-width,
  .homepage-box,
  .banners-row,
  .banner,
  .banner-wrapper,
  .extended-banner,
  .text-banners,
  .text-banner,
  .middle-banners-wrapper,
  .homepage-banners,
  #content
):has(.iontmax-banner-carousel-host),
body.template-index :where(
  .content-wrapper,
  .content,
  .container,
  .container-full-width,
  .homepage-box,
  .banners-row,
  .banner,
  .banner-wrapper,
  .extended-banner,
  .text-banners,
  .text-banner,
  .middle-banners-wrapper,
  .homepage-banners,
  #content
):has(.iontmax-banner-carousel),
body.template-index :where(
  .content-wrapper,
  .content,
  .container,
  .container-full-width,
  .homepage-box,
  .banners-row,
  .banner,
  .banner-wrapper,
  .extended-banner,
  .text-banners,
  .text-banner,
  .middle-banners-wrapper,
  .homepage-banners,
  #content
):has(.iontmax-banner-carousel-host) {
  width: 100% !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

.iontmax-banner-carousel .iontmax-banner-carousel__viewport {
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
}

.iontmax-banner-carousel .iontmax-banner-carousel__track,
.next-to-carousel-banners.iontmax-banner-carousel .iontmax-banner-carousel__track {
  display: flex !important;
  flex-flow: row nowrap !important;
}

.iontmax-banner-carousel .iontmax-banner-carousel__item,
.iontmax-banner-carousel .banner-wrapper.iontmax-banner-carousel__item,
.next-to-carousel-banners.iontmax-banner-carousel .banner-wrapper {
  flex: 0 0 calc(
    (100% - ((var(--iontmax-carousel-cards) - 1) * var(--iontmax-carousel-gap))) /
      var(--iontmax-carousel-cards)
  ) !important;
  width: auto !important;
  max-width: none !important;
}

.iontmax-banner-carousel .banner-wrapper a {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
}

.iontmax-banner-carousel .banner-wrapper a img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ══════════════════════════════════════════
   CLASSIC TEMPLATE (template-11) OVERRIDES
══════════════════════════════════════════ */

/* Reset native stacked banner layout */
.iontmax-banner-carousel.banners-row,
.iontmax-banner-carousel .wide-carousel,
body.template-11 .iontmax-banner-carousel {
  margin-top: 0 !important;
}

.iontmax-banner-carousel .banner-wrapper {
  margin: 0 !important;
  max-width: none !important;
}

.iontmax-banner-carousel .banner-wrapper + .banner-wrapper {
  margin-top: 0 !important;
}

/* Hide native Bootstrap carousel chrome */
.iontmax-banner-carousel .carousel-indicators,
.iontmax-banner-carousel .carousel-control,
.iontmax-banner-carousel .carousel .carousel-control {
  display: none !important;
}

.iontmax-banner-carousel .carousel,
.iontmax-banner-carousel .carousel-inner {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  transform: none !important;
  overflow: visible !important;
  background: transparent !important;
}

.iontmax-banner-carousel .item {
  display: block !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

/* Classic extended-banner: reset scattered absolute white boxes */
.iontmax-banner-carousel .extended-banner-texts {
  position: absolute !important;
  inset: auto !important;
  top: auto !important;
  right: var(--im-copy-x) !important;
  bottom: var(--im-copy-y) !important;
  left: var(--im-copy-x) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  width: calc(100% - (var(--im-copy-x) * 2)) !important;
  height: auto !important;
}

.iontmax-banner-carousel .extended-banner-title,
.iontmax-banner-carousel .extended-banner-text {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: 88% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--iontmax-carousel-text) !important;
  transform: none !important;
}

.iontmax-banner-carousel .extended-banner-title {
  order: 1;
  margin-bottom: var(--im-gap-title) !important;
  font-size: var(--im-title) !important;
  font-weight: 600 !important;
  line-height: 1.14 !important;
}

.iontmax-banner-carousel .extended-banner-text {
  order: 2;
  margin-bottom: var(--im-gap-body) !important;
  font-size: var(--im-body) !important;
  font-weight: 400 !important;
  line-height: 1.32 !important;
  color: var(--iontmax-carousel-muted) !important;
}

.iontmax-banner-carousel .extended-banner-link {
  order: 3;
  position: relative !important;
  display: inline-flex !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin: 0 !important;
  min-width: var(--im-btn-min-w) !important;
  min-height: var(--im-btn-h) !important;
  height: var(--im-btn-h) !important;
  padding: 0 var(--im-btn-px) !important;
  border: none !important;
  border-radius: var(--im-btn-radius) !important;
  box-shadow: none !important;
  font-size: var(--im-btn-fs) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: none !important;
}

.iontmax-banner-carousel .extended-banner-link:empty {
  display: none !important;
}

/* Prevent Classic hover scale on carousel cards */
.iontmax-banner-carousel .banner-wrapper a:hover img,
.iontmax-banner-carousel__item a:hover .iontmax-banner-carousel__image {
  transform: none !important;
}

/* Hide empty Classic .wide-carousel sibling */
.iontmax-banner-carousel-host > .wide-carousel:empty,
.iontmax-banner-carousel-host > .wide-carousel:not(:has(img)) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.iontmax-banner-carousel-host {
  display: block !important;
  width: 100% !important;
}

.iontmax-banner-carousel[data-testid="gridTopBanners"] {
  display: block !important;
}

.iontmax-banner-carousel.next-to-carousel-banners,
.iontmax-banner-carousel.wide-carousel,
.iontmax-banner-carousel-host > .next-to-carousel-banners,
.iontmax-banner-carousel-host > .wide-carousel {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Classic stacked banner wrappers before JS runs */
body.type-index .next-to-carousel-banners:not(.iontmax-banner-carousel):not([data-iontmax-banner-carousel="ready"]) .banner-wrapper,
body.in-index .next-to-carousel-banners:not(.iontmax-banner-carousel):not([data-iontmax-banner-carousel="ready"]) .banner-wrapper,
body.template-index .next-to-carousel-banners:not(.iontmax-banner-carousel):not([data-iontmax-banner-carousel="ready"]) .banner-wrapper {
  visibility: hidden !important;
}

.next-to-carousel-banners.iontmax-banner-carousel .banner-wrapper {
  margin: 0 !important;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1199px) {
  .iontmax-banner-carousel {
    --iontmax-carousel-gap: 10px;
    --iontmax-carousel-cards: 3;
  }
}

@media (max-width: 767px) {
  .iontmax-banner-carousel {
    --iontmax-carousel-inset: 16px;
    --iontmax-carousel-gap: 12px;
    --iontmax-carousel-cards: 1.15;
    --iontmax-carousel-radius: 8px;
    --iontmax-carousel-progress-dot: 6px;
    --iontmax-carousel-progress-line: 28px;
    left: auto;
    transform: none;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 28px !important;
    padding-top: 0 !important;
  }

  .iontmax-banner-carousel__track {
    padding: 0 !important;
    scroll-padding-left: 0 !important;
    scroll-behavior: auto !important;
    cursor: default !important;
    touch-action: pan-x pan-y !important;
  }

  .iontmax-banner-carousel__item,
  .iontmax-banner-carousel .banner-wrapper.iontmax-banner-carousel__item {
    --im-copy-x: clamp(20px, 4.4vw, 38px);
    --im-copy-y: clamp(20px, 4.4vw, 38px);
    --im-title: clamp(22px, 5.23vw, 32px);
    --im-body: clamp(14px, 2.82vw, 18px);
    --im-btn-fs: clamp(14px, 2.78vw, 17px);
    --im-btn-h: clamp(40px, 8.12vw, 48px);
    --im-btn-px: clamp(18px, 4.15vw, 24px);
    --im-btn-min-w: clamp(105px, 22vw, 140px);
    --im-btn-radius: 8px;
    --im-gap-title: clamp(6px, 1.37vw, 11px);
    --im-gap-body: clamp(12px, 2.6vw, 16px);
    aspect-ratio: 412.93 / 619.4 !important;
  }

  .iontmax-banner-carousel__arrow {
    display: none;
  }

  .iontmax-banner-carousel__progress {
    margin-top: 10px !important;
  }
}

/* ══════════════════════════════════════════
   FINAL LAYOUT + TEXT (must stay last)
   No header/logo alignment math: carousel follows its parent container.
══════════════════════════════════════════ */

body.type-index .iontmax-banner-carousel,
body.in-index .iontmax-banner-carousel,
body.template-index .iontmax-banner-carousel {
  --iontmax-carousel-inset: clamp(16px, 4.2vw, 72px);
  --iontmax-carousel-max: calc(var(--im-max, 1680px) + var(--iontmax-carousel-inset) + var(--iontmax-carousel-inset));
  position: relative !important;
  left: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--iontmax-carousel-max) !important;
  margin: 0 auto 16px !important;
  padding-right: var(--iontmax-carousel-inset) !important;
  padding-left: var(--iontmax-carousel-inset) !important;
}

body.type-index .iontmax-banner-carousel .extended-banner-texts,
body.in-index .iontmax-banner-carousel .extended-banner-texts,
body.template-index .iontmax-banner-carousel .extended-banner-texts,
body.type-index .iontmax-banner-carousel .iontmax-banner-carousel__caption,
body.in-index .iontmax-banner-carousel .iontmax-banner-carousel__caption,
body.template-index .iontmax-banner-carousel .iontmax-banner-carousel__caption,
body.type-index .iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-texts,
body.in-index .iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-texts,
body.template-index .iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-texts {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  max-height: none !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  pointer-events: none;
}

body.type-index .iontmax-banner-carousel .extended-banner-title,
body.in-index .iontmax-banner-carousel .extended-banner-title,
body.template-index .iontmax-banner-carousel .extended-banner-title,
body.type-index .iontmax-banner-carousel .extended-banner-text,
body.in-index .iontmax-banner-carousel .extended-banner-text,
body.template-index .iontmax-banner-carousel .extended-banner-text,
body.type-index .iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-title,
body.in-index .iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-title,
body.template-index .iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-title,
body.type-index .iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-text,
body.in-index .iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-text,
body.template-index .iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-text {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.type-index .iontmax-banner-carousel .extended-banner-link,
body.in-index .iontmax-banner-carousel .extended-banner-link,
body.template-index .iontmax-banner-carousel .extended-banner-link,
body.type-index .iontmax-banner-carousel a.extended-banner-link,
body.in-index .iontmax-banner-carousel a.extended-banner-link,
body.template-index .iontmax-banner-carousel a.extended-banner-link,
body.type-index .iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-link,
body.in-index .iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-link,
body.template-index .iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-link,
body.type-index .iontmax-banner-carousel .banner-wrapper:not(:hover) a.extended-banner-link,
body.in-index .iontmax-banner-carousel .banner-wrapper:not(:hover) a.extended-banner-link,
body.template-index .iontmax-banner-carousel .banner-wrapper:not(:hover) a.extended-banner-link {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 767px) {
  body.type-index .iontmax-banner-carousel,
  body.in-index .iontmax-banner-carousel,
  body.template-index .iontmax-banner-carousel {
    --iontmax-carousel-inset: 16px;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 28px !important;
    padding-top: 0 !important;
  }

  body.type-index .has-carousel,
  body.in-index .has-carousel,
  body.template-index .has-carousel,
  body.type-index .before-carousel,
  body.in-index .before-carousel,
  body.template-index .before-carousel,
  body.type-index .iontmax-banner-carousel-host,
  body.in-index .iontmax-banner-carousel-host,
  body.template-index .iontmax-banner-carousel-host,
  body.type-index .banners-row.iontmax-banner-carousel-host,
  body.in-index .banners-row.iontmax-banner-carousel-host,
  body.template-index .banners-row.iontmax-banner-carousel-host {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.type-index :where(
    .content-wrapper,
    .content,
    .container,
    .container-full-width,
    .homepage-box,
    .homepage-banners,
    #content
  ):has(.iontmax-banner-carousel),
  body.in-index :where(
    .content-wrapper,
    .content,
    .container,
    .container-full-width,
    .homepage-box,
    .homepage-banners,
    #content
  ):has(.iontmax-banner-carousel),
  body.template-index :where(
    .content-wrapper,
    .content,
    .container,
    .container-full-width,
    .homepage-box,
    .homepage-banners,
    #content
  ):has(.iontmax-banner-carousel),
  body.type-index :where(
    .content-wrapper,
    .content,
    .container,
    .container-full-width,
    .homepage-box,
    .homepage-banners,
    #content
  ):has(.iontmax-banner-carousel-host),
  body.in-index :where(
    .content-wrapper,
    .content,
    .container,
    .container-full-width,
    .homepage-box,
    .homepage-banners,
    #content
  ):has(.iontmax-banner-carousel-host),
  body.template-index :where(
    .content-wrapper,
    .content,
    .container,
    .container-full-width,
    .homepage-box,
    .homepage-banners,
    #content
  ):has(.iontmax-banner-carousel-host) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .iontmax-banner-carousel-host > .wide-carousel:empty,
  .iontmax-banner-carousel-host > .wide-carousel:not(:has(.iontmax-banner-carousel__item, img)) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* ══════════════════════════════════════════
   CLASSIC HOVER KILL – copy always visible
   Shoptet template-11 puts title/text/link as absolute
   boxes and often nests them inside the image <a>.
══════════════════════════════════════════ */

.iontmax-banner-carousel .banner-wrapper > a:only-child,
.iontmax-banner-carousel__item > a:has(> .iontmax-banner-carousel__image) {
  display: block !important;
  position: relative !important;
  z-index: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

.iontmax-banner-carousel .banner-wrapper > .extended-banner-texts,
.iontmax-banner-carousel__item > .extended-banner-texts,
.iontmax-banner-carousel .extended-banner-texts.iontmax-banner-carousel__caption,
.iontmax-banner-carousel .banner-wrapper:not(:hover) > .extended-banner-texts,
.iontmax-banner-carousel__item:not(:hover) > .extended-banner-texts {
  position: absolute !important;
  top: auto !important;
  right: var(--im-copy-x) !important;
  bottom: var(--im-copy-y) !important;
  left: var(--im-copy-x) !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  width: calc(100% - (var(--im-copy-x) * 2)) !important;
  max-width: calc(100% - (var(--im-copy-x) * 2)) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

.iontmax-banner-carousel .extended-banner-texts .extended-banner-link,
.iontmax-banner-carousel .extended-banner-texts a.extended-banner-link {
  pointer-events: auto;
}

.iontmax-banner-carousel .extended-banner-title,
.iontmax-banner-carousel .extended-banner-text,
.iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-title,
.iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-text,
.iontmax-banner-carousel__item:not(:hover) .extended-banner-title,
.iontmax-banner-carousel__item:not(:hover) .extended-banner-text,
.iontmax-banner-carousel .banner-wrapper a:not(:hover) .extended-banner-title,
.iontmax-banner-carousel .banner-wrapper a:not(:hover) .extended-banner-text {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  max-height: none !important;
  height: auto !important;
  width: auto !important;
  max-width: 88% !important;
  clip: auto !important;
  clip-path: none !important;
  text-indent: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.iontmax-banner-carousel .extended-banner-title,
.iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-title,
.iontmax-banner-carousel__item:not(:hover) .extended-banner-title {
  display: block !important;
}

.iontmax-banner-carousel .extended-banner-text,
.iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-text,
.iontmax-banner-carousel__item:not(:hover) .extended-banner-text {
  display: block !important;
}

.iontmax-banner-carousel .extended-banner-link,
.iontmax-banner-carousel a.extended-banner-link,
.iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-link,
.iontmax-banner-carousel .banner-wrapper:not(:hover) a.extended-banner-link,
.iontmax-banner-carousel__item:not(:hover) .extended-banner-link,
.iontmax-banner-carousel__item:not(:hover) a.extended-banner-link {
  position: relative !important;
  display: inline-flex !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: var(--im-btn-min-w) !important;
  height: var(--im-btn-h) !important;
  min-height: var(--im-btn-h) !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: var(--iontmax-carousel-button-bg) !important;
  color: var(--iontmax-carousel-button-text) !important;
}

/* Final Safari visibility guard - must stay last. */

.iontmax-banner-carousel .iontmax-banner-carousel__caption,
.iontmax-banner-carousel .extended-banner-texts,
.iontmax-banner-carousel .banner-wrapper .extended-banner-texts,
.iontmax-banner-carousel__item .extended-banner-texts,
.iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-texts,
.iontmax-banner-carousel__item:not(:hover) .extended-banner-texts {
  position: absolute !important;
  inset: auto !important;
  top: auto !important;
  right: var(--im-copy-x) !important;
  bottom: var(--im-copy-y) !important;
  left: var(--im-copy-x) !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  box-sizing: border-box !important;
  width: calc(100% - (var(--im-copy-x) * 2)) !important;
  max-width: calc(100% - (var(--im-copy-x) * 2)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  pointer-events: none !important;
}

.iontmax-banner-carousel .extended-banner-title,
.iontmax-banner-carousel .extended-banner-text,
.iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-title,
.iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-text,
.iontmax-banner-carousel__item:not(:hover) .extended-banner-title,
.iontmax-banner-carousel__item:not(:hover) .extended-banner-text {
  position: static !important;
  inset: auto !important;
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: 88% !important;
  height: auto !important;
  max-height: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-indent: 0 !important;
}

.iontmax-banner-carousel .extended-banner-link,
.iontmax-banner-carousel a.extended-banner-link,
.iontmax-banner-carousel .banner-wrapper:not(:hover) .extended-banner-link,
.iontmax-banner-carousel .banner-wrapper:not(:hover) a.extended-banner-link,
.iontmax-banner-carousel__item:not(:hover) .extended-banner-link,
.iontmax-banner-carousel__item:not(:hover) a.extended-banner-link {
  position: relative !important;
  z-index: 6 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  min-width: var(--im-btn-min-w) !important;
  height: var(--im-btn-h) !important;
  min-height: var(--im-btn-h) !important;
  margin: 0 !important;
  padding: 0 var(--im-btn-px) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  pointer-events: auto !important;
}

.iontmax-banner-carousel .extended-banner-link .im-banner-btn__label,
.iontmax-banner-carousel a.extended-banner-link .im-banner-btn__label {
  position: relative !important;
  z-index: 2 !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  color: inherit !important;
  text-indent: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* Mobile – copy/buttons scaled to card size (1.15 vs 4.15 cards on desktop) */
@media (max-width: 767px) {
  .iontmax-banner-carousel__item,
  .iontmax-banner-carousel .banner-wrapper.iontmax-banner-carousel__item {
    --im-copy-x: clamp(20px, 4.4vw, 38px);
    --im-copy-y: clamp(20px, 4.4vw, 38px);
    --im-title: clamp(22px, 5.23vw, 32px);
    --im-body: clamp(14px, 2.82vw, 18px);
    --im-btn-fs: clamp(14px, 2.78vw, 17px);
    --im-btn-h: clamp(40px, 8.12vw, 48px);
    --im-btn-px: clamp(18px, 4.15vw, 24px);
    --im-btn-min-w: clamp(105px, 22vw, 140px);
    --im-btn-radius: 8px;
    --im-gap-title: clamp(6px, 1.37vw, 11px);
    --im-gap-body: clamp(12px, 2.6vw, 16px);
  }
}

/* Shoptet button resets – progress dots must stay aligned on desktop */
body.type-index .iontmax-banner-carousel .iontmax-banner-carousel__progress,
body.in-index .iontmax-banner-carousel .iontmax-banner-carousel__progress,
body.template-index .iontmax-banner-carousel .iontmax-banner-carousel__progress {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--iontmax-carousel-progress-gap) !important;
  width: 100% !important;
  margin-top: 10px !important;
}

body.type-index .iontmax-banner-carousel .iontmax-banner-carousel__progress-item,
body.in-index .iontmax-banner-carousel .iontmax-banner-carousel__progress-item,
body.template-index .iontmax-banner-carousel .iontmax-banner-carousel__progress-item {
  display: block !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  box-sizing: border-box !important;
  width: var(--iontmax-carousel-progress-dot) !important;
  height: var(--iontmax-carousel-progress-dot) !important;
  min-width: var(--iontmax-carousel-progress-dot) !important;
  min-height: var(--iontmax-carousel-progress-dot) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #dedede !important;
  box-shadow: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: width 0.24s ease, background 0.24s ease, opacity 0.24s ease !important;
}

body.type-index .iontmax-banner-carousel .iontmax-banner-carousel__progress-item.is-active,
body.in-index .iontmax-banner-carousel .iontmax-banner-carousel__progress-item.is-active,
body.template-index .iontmax-banner-carousel .iontmax-banner-carousel__progress-item.is-active {
  width: var(--iontmax-carousel-progress-line) !important;
  min-width: var(--iontmax-carousel-progress-line) !important;
  height: var(--iontmax-carousel-progress-dot) !important;
  min-height: var(--iontmax-carousel-progress-dot) !important;
  background: #202020 !important;
}