/*
 * FDL - Hero Visual Uniformizer
 * v1.9.0
 * A altura do hero passa a ser CSS puro: 100vw / ratio real da imagem.
 * Isto evita saltos no resize e evita chamadas repetidas ao Flickity enquanto a janela muda de tamanho.
 */

:root {
    --fdl-hero-default-ratio: 4;
}

.fdl-hero-visual {
    --fdl-hero-ratio: var(--fdl-hero-default-ratio);
    --fdl-hero-height: calc(100vw / var(--fdl-hero-ratio));
}

/* Reserva imediata antes do JS terminar: usa o ratio mais comum dos banners FDL. */
body:not(.single-product) #content > .slider-wrapper:first-child,
body:not(.single-product) #content > .banner:first-child,
body:not(.single-product) #content > .img:first-child,
body:not(.single-product) #content > section:first-child > .section-content > .slider-wrapper:first-child,
body:not(.single-product) #content > section:first-child > .section-content > .banner:first-child,
body:not(.single-product) #content > section:first-child > .section-content > .img:first-child {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    height: calc(100vw / var(--fdl-hero-default-ratio)) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body:not(.single-product) #content > .slider-wrapper:first-child > .slider,
body:not(.single-product) #content > .slider-wrapper:first-child > .slider > .flickity-viewport,
body:not(.single-product) #content > section:first-child > .section-content > .slider-wrapper:first-child > .slider,
body:not(.single-product) #content > section:first-child > .section-content > .slider-wrapper:first-child > .slider > .flickity-viewport {
    height: calc(100vw / var(--fdl-hero-default-ratio)) !important;
    overflow: hidden !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-visual {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    height: var(--fdl-hero-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    transition: none !important;
}

/* Durante o resize, bloquear animacoes/transicoes que criam pulinhos. */
html.fdl-hero-resizing body:not(.single-product) .fdl-hero-visual,
html.fdl-hero-resizing body:not(.single-product) .fdl-hero-visual * {
    transition: none !important;
    animation-duration: 0s !important;
}

/* Slider principal Flatsome/Flickity */
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider > .slider,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider > .slider > .flickity-viewport {
    height: var(--fdl-hero-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: none !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider > .slider > .flickity-viewport > .flickity-slider {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Celulas do slider. Nao mexe em left, transform, position ou display. */
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider > .slider > .img,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider > .slider > .banner,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider .flickity-slider > .img,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider .flickity-slider > .banner {
    height: var(--fdl-hero-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider .flickity-slider > .img > a,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider .flickity-slider > .img .img-inner,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider > .slider > .img > a,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider > .slider > .img .img-inner {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider .flickity-slider > .img img,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider > .slider > .img img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-position: center center !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider.fdl-hero-mode-stretch .flickity-slider > .img img,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider.fdl-hero-mode-stretch > .slider > .img img {
    object-fit: fill !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider.fdl-hero-mode-cover .flickity-slider > .img img,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider.fdl-hero-mode-cover > .slider > .img img {
    object-fit: cover !important;
}

/* Slides banner dentro de slider */
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider .flickity-slider > .banner,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider .flickity-slider > .banner .banner-inner,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider .flickity-slider > .banner .banner-bg,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider .flickity-slider > .banner .bg,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider .flickity-slider > .banner .bg-fill,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider .flickity-slider > .banner .banner-layers {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider.fdl-hero-mode-stretch .flickity-slider > .banner .bg,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider.fdl-hero-mode-stretch .flickity-slider > .banner .bg-fill {
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider.fdl-hero-mode-cover .flickity-slider > .banner .bg,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-slider.fdl-hero-mode-cover .flickity-slider > .banner .bg-fill {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Imagem UX Builder isolada */
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-image,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-image > a,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-image .img-inner {
    height: var(--fdl-hero-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-image img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-position: center center !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-image.fdl-hero-mode-stretch img {
    object-fit: fill !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-image.fdl-hero-mode-cover img {
    object-fit: cover !important;
}

/* Banner UX Builder isolado */
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-banner,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-banner .banner-inner,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-banner .banner-bg,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-banner .bg,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-banner .bg-fill,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-banner .banner-layers {
    height: var(--fdl-hero-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-banner.fdl-hero-mode-stretch .bg,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-banner.fdl-hero-mode-stretch .bg-fill {
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-banner.fdl-hero-mode-cover .bg,
html.fdl-hero-ready body:not(.single-product) .fdl-hero-type-banner.fdl-hero-mode-cover .bg-fill {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Section isolada com background */
html.fdl-hero-ready body:not(.single-product) section.fdl-hero-type-section,
html.fdl-hero-ready body:not(.single-product) section.fdl-hero-type-section > .section-bg,
html.fdl-hero-ready body:not(.single-product) section.fdl-hero-type-section > .section-bg .bg,
html.fdl-hero-ready body:not(.single-product) section.fdl-hero-type-section > .section-bg .bg-fill,
html.fdl-hero-ready body:not(.single-product) section.fdl-hero-type-section > .section-content {
    height: var(--fdl-hero-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

html.fdl-hero-ready body:not(.single-product) section.fdl-hero-type-section.fdl-hero-mode-stretch > .section-bg .bg,
html.fdl-hero-ready body:not(.single-product) section.fdl-hero-type-section.fdl-hero-mode-stretch > .section-bg .bg-fill {
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

html.fdl-hero-ready body:not(.single-product) section.fdl-hero-type-section.fdl-hero-mode-cover > .section-bg .bg,
html.fdl-hero-ready body:not(.single-product) section.fdl-hero-type-section.fdl-hero-mode-cover > .section-bg .bg-fill {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.single-product #tab-description,
.single-product #tab-description .banner,
.single-product #tab-description .slider-wrapper,
.single-product #tab-description .img,
.single-product #tab-description section {
    height: auto;
    max-height: none;
}

@media (max-width: 849px) {
    .fdl-hero-visual {
        --fdl-hero-height: calc(100vw / var(--fdl-hero-ratio));
    }
}