/* ── Page overflow safety ─────────────────────────────────────────── */
.tf-zone--body,
.tf-zone--body > .tf-section[data-tf-type="structural.row"] {
    max-width: 100%;
    overflow-x: clip;
}

.tf-zone--body:has(.section-ingredient-2),
.tf-zone--body:has(.tf-section[data-tf-type="home.sticky_banner"]),
.tf-zone--body > .tf-section[data-tf-type="structural.row"]:has(.section-ingredient-2),
.tf-zone--body > .tf-section[data-tf-type="structural.row"]:has(.tf-section[data-tf-type="home.sticky_banner"]) {
    overflow: visible;
}

/* Banner showcase: full-bleed horizontal track, container-aligned start */
.tf-section[data-tf-type="home.banner_showcase"],
.tf-section[data-tf-type="home.banner_showcase"] > .tf-section__row,
.tf-section[data-tf-type="home.banner_showcase"] > .tf-section__row > .tf-section__slot.is-filled {
    overflow: visible !important;
}

/* Sticky banner (classic): left column position:sticky needs a non-clipping ancestor chain */
.tf-section[data-tf-type="home.sticky_banner"],
.tf-section[data-tf-type="home.sticky_banner"] > .tf-section__row,
.tf-section[data-tf-type="home.sticky_banner"] > .tf-section__row > .tf-section__slot.is-filled,
.tf-section__slot.is-filled:has(> .tf-section[data-tf-type="home.sticky_banner"]) {
    overflow: visible !important;
}

.tf-zone--body:has(.tf-section[data-tf-type="home.banner_showcase"]),
.tf-storefront:has(.tf-section[data-tf-type="home.banner_showcase"]) {
    overflow-x: visible;
}

.tf-section[data-tf-type="home.banner_showcase"] .flat-spacing {
    overflow: hidden !important;
}

.tf-section[data-tf-type="home.banner_showcase"] .flat-spacing > .container {
    overflow: visible !important;
}

.tf-section[data-tf-type="home.banner_showcase"] .tf-banner-showcase__bleed,
.tf-section[data-tf-type="home.banner_showcase"] .gsap-horizontal-main,
.tf-section[data-tf-type="home.banner_showcase"] .pin-spacer:has(.gsap-horizontal-main) {
    width: 100%;
    max-width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.tf-section[data-tf-type="home.banner_showcase"] .gsap-horizontal-track {
    min-width: max-content;
    padding-inline: max(15px, calc((100vw - 1470px) / 2 + 15px)) 15px;
}

.tf-section[data-tf-type="home.banner_showcase"] .tf-banner-showcase__bleed .swiper {
    padding-inline: max(15px, calc((100vw - 1470px) / 2 + 15px)) 15px;
}

.tf-section[data-tf-type="home.banner_showcase"] .gsap-horizontal-item {
    flex-shrink: 0;
    min-width: clamp(280px, 40vw, 590px);
}

@media (max-width: 767.98px) {
    .tf-section[data-tf-type="home.banner_showcase"] .gsap-horizontal-item {
        flex: 0 0 min(400px, calc(100vw - 48px));
        max-width: min(400px, calc(100vw - 48px));
        min-width: 0;
    }
}

/* ── Campaign banner section (top-level + slot-embedded) ───────────── */
.tf-section__slot > .tf-section[data-tf-type="home.campaign_banner"],
.tf-section__slot .tf-section[data-tf-type="home.campaign_banner"],
.tf-section[data-tf-type="home.campaign_banner"],
.tf-section[data-tf-type="home.campaign_banner"].tf-section--slot-embedded {
    height: auto !important;
    min-height: var(--tf-campaign-height, 280px) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    overflow: visible !important;
    max-width: 100% !important;
}

.tf-section[data-tf-type="home.campaign_banner"] > .tf-section__row,
.tf-section[data-tf-type="home.campaign_banner"] > .tf-section__inner > .tf-section__row,
.tf-section[data-tf-type="structural.row"]:has([data-tf-type="home.campaign_banner"]) > .tf-section__row,
.tf-section[data-tf-type="structural.row"]:has([data-tf-type="home.campaign_banner"]) > .tf-section__inner > .tf-section__row {
    height: auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
}

.tf-section__slot:has(> .tf-section[data-tf-type="home.campaign_banner"]),
.tf-section__slot:has(.tf-section[data-tf-type="home.campaign_banner"]) {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    align-self: stretch !important;
}

/* ── Banner root ──────────────────────────────────────────────────── */
.section-banner-cta[data-tf-campaign="banner-cta"],
.tf-section[data-tf-type="home.campaign_banner"] .section-banner-cta,
.tf-section[data-tf-type="home.campaign_banner"] .tf-campaign {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, auto) !important;
    align-content: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--tf-campaign-height, 280px) !important;
    max-height: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.tf-section[data-tf-type="home.campaign_banner"] .tf-campaign-banner {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: var(--tf-campaign-height, 280px);
    overflow: hidden;
    box-sizing: border-box;
}

/* Decorative media — fills the box sized by copy */
.section-banner-cta[data-tf-campaign="banner-cta"] > .cta-image,
.tf-section[data-tf-type="home.campaign_banner"] .section-banner-cta > .cta-image {
    grid-area: 1 / 1 !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.section-banner-cta[data-tf-campaign="banner-cta"] > .cta-image img,
.section-banner-cta[data-tf-campaign="banner-cta"] > .cta-image .tf-card__ph,
.tf-section[data-tf-type="home.campaign_banner"] .section-banner-cta > .cta-image img,
.tf-section[data-tf-type="home.campaign_banner"] .section-banner-cta > .cta-image .tf-card__ph {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    display: block !important;
}

/* Copy in normal flow — THIS defines banner + row height */
.section-banner-cta[data-tf-campaign="banner-cta"] > .cta-content,
.tf-section[data-tf-type="home.campaign_banner"] .section-banner-cta > .cta-content,
.tf-section[data-tf-type="home.campaign_banner"] .tf-campaign > .tf-campaign__content {
    grid-area: 1 / 1 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--tf-campaign-height, 280px) !important;
    margin: 0 !important;
    padding-block: clamp(24px, 5vw, 40px) !important;
    padding-inline: clamp(16px, 4vw, 28px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.tf-section[data-tf-type="home.campaign_banner"] .section-banner-cta .tf-btn-line,
.section-banner-cta[data-tf-campaign="banner-cta"] .tf-btn-line {
    white-space: normal !important;
    max-width: 100% !important;
}

/* ── Marquee / infinite slide containment ─────────────────────────── */
.tf-section[data-tf-type="home.marquee"],
.tf-section__slot .tf-section[data-tf-type="home.marquee"],
.tf-section[data-tf-type="home.marquee"] .infiniteSlide-text-icon,
.tf-section[data-tf-type="home.marquee"] .infiniteslide_wrap,
.tf-section[data-tf-type="home.brands"],
.tf-section__slot .tf-section[data-tf-type="home.brands"],
.tf-section[data-tf-type="home.brands"] .infiniteSlide-brand,
.tf-section[data-tf-type="home.brands"] .infiniteslide_wrap,
.tf-section[data-tf-type="home.testimonials"],
.tf-section__slot .tf-section[data-tf-type="home.testimonials"],
.tf-section[data-tf-type="home.testimonials"] .infiniteSlide-testimonial,
.tf-section[data-tf-type="home.testimonials"] .infinite-slide_group,
.tf-section[data-tf-type="home.testimonials"] .infiniteslide_wrap {
    max-width: 100% !important;
    overflow: hidden !important;
    min-width: 0 !important;
}
.tf-section[data-tf-type="home.marquee"] .infiniteSlide,
.tf-section[data-tf-type="home.marquee"] .infiniteSlide-wrapper,
.tf-section[data-tf-type="home.brands"] .infiniteSlide,
.tf-section[data-tf-type="home.brands"] .infiniteSlide-wrapper,
.tf-section[data-tf-type="home.testimonials"] .infiniteSlide,
.tf-section[data-tf-type="home.testimonials"] .infiniteSlide-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
}

.tf-section__slot.is-filled > .tf-section[data-tf-slot-section],
.tf-section__slot.is-filled > .tf-section.tf-section--slot-embedded {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
}

.tf-section__slot.is-filled > .tf-section[data-tf-type="layout.topbar"],
.tf-section__slot.is-filled > .tf-section[data-tf-type="layout.header"],
.tf-section__slot.is-filled > .tf-section[data-tf-type="layout.footer"] {
    overflow: visible !important;
    isolation: auto;
    z-index: auto;
}

.tf-section__slot .tf-topbar {
    z-index: 1;
}

.tf-section__slot .tf-header.header-abs,
.tf-section__slot .tf-header.header-v2:not(.hd-v2_s2),
.tf-section__slot .tf-header.header-v4:not(.hd-v4_s2) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

.tf-section__slot :is(
    .container,
    .container-2,
    .container-3,
    .container-4,
    .container-5,
    .container-full
) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
}

.tf-section__slot .section-philosophy,
.tf-section__slot .section-animated-text,
.tf-section__slot .tf-animated-text,
.tf-section__slot .section-philosophy .content,
.tf-section__slot .section-animated-text .content,
.tf-section__slot .tf-animated-text__inner,
.tf-section__slot .tf-animated-text__split,
.tf-section__slot .tf-animated-text__panel,
.tf-section__slot .tf-animated-text__accent,
.tf-section__slot .tf-animated-text__lead,
.tf-section__slot .tf-animated-text__aside,
.tf-section__slot .tf-animated-text__body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.tf-section__slot .text-color-change,
.tf-section__slot .text-color-change-2,
.tf-section__slot .text-color-change-3,
.tf-section__slot .tf-at-reveal,
.tf-section__slot [data-tf-at-anim],
.tf-section__slot .word-wrapper,
.tf-section__slot .char-wrapper {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

body.tf-editable .tf-section__row > .tf-section__slot.is-filled,
body.tf-editable .tf-section__inner > .tf-section__slot.is-filled {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

body.tf-editable .tf-section__row > .tf-section__slot.is-filled:has(> .tf-section[data-tf-type="layout.topbar"]),
body.tf-editable .tf-section__row > .tf-section__slot.is-filled:has(> .tf-section[data-tf-type="layout.header"]),
body.tf-editable .tf-section__row > .tf-section__slot.is-filled:has(> .tf-section[data-tf-type="layout.footer"]),
body.tf-editable .tf-section__inner > .tf-section__slot.is-filled:has(> .tf-section[data-tf-type="layout.topbar"]),
body.tf-editable .tf-section__inner > .tf-section__slot.is-filled:has(> .tf-section[data-tf-type="layout.header"]),
body.tf-editable .tf-section__inner > .tf-section__slot.is-filled:has(> .tf-section[data-tf-type="layout.footer"]) {
    overflow: visible !important;
}

/* Equal-height columns so dikey hizalama has room to move content */
.tf-section__row:not(.tf-section__row--single) {
    align-items: stretch !important;
}

.tf-section__row:not(.tf-section__row--single) > .tf-section__slot.is-filled,
.tf-section__row:not(.tf-section__row--single) > .tf-section__slot.is-empty {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
}