.fce-tab-section .b-tab-wrapper .b-tab-text:after{
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.fce-tab-section .fce-es-t-wrapper {
    justify-content: flex-start;
    gap: 15px;
}

.fce-tab-section .b-tab-wrapper .b-tab-item.b-tab-show .b-tab-text:after{
    background-color: var(--bagels-dark);
}

.fce-tab-section .b-tab-wrapper.light .b-tab-item.b-tab-show .b-tab-text:after{
    background-color: var(--bagels-light);
}

.fce-tab-section .fce-es-tabs:after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--bagels-dark);
}

.fce-tab-section.light .fce-es-tabs:after {
    background-color: var(--bagels-light);
}

.fce-tab-section .b-tab-wrapper .b-tab-link{
    padding-left: 0;
    padding-right: 0;
}

.fce-tab-section .b-tab-wrapper .b-tab-text{
    padding-left: 17px;
    padding-right: 17px;
}

.fce-tab-section .fce-es-tabs {
    position: relative;
    margin-bottom: 30px;
}

.fce-tab-section .fce-es-c-left-col {
    min-width: 48%;
}

.fce-tab-section-v2 .fce-es-c-left-col {
    min-width: calc( 50% - 16px );
}

.fce-tab-section .fce-es-c-lc-img {
    aspect-ratio: 322 / 149;
}

.fce-tab-section .fce-es-c-lc-text {
    padding: 24px 24px;
}

.fce-tab-section .fce-es-c-1-1 {
    gap: 32px;
}

.fce-tab-section .fce-es-c-right-col {
    min-width: calc( 100% - 48% - 32px );
}

.fce-tab-section-v2 .fce-es-c-right-col {
    min-width: calc( 50% - 16px );
}

/* Horizontal V2: keep a single visible column at the same half-width as the
   two-column layout. Vertical V2 intentionally overrides this to full width. */
@media (min-width: 992px) {
    .fce-tab-section-v2:not(.fce-ts-vertical) .fce-es-c-col {
        flex: 0 0 calc( 50% - 16px );
        width: calc( 50% - 16px );
        min-width: 0;
        max-width: calc( 50% - 16px );
    }
}

.fce-tab-section .fce-es-c-rc-sin {
    margin-bottom: 32px;
    padding: 11px 24px;
    cursor: pointer;
    /* Padding grows (11px -> 21px) as the item opens, alongside the body which
       slides via jQuery slideDown (200ms, linear). Keep padding on the SAME linear
       curve and duration so the two move in lockstep — an ease-in-out padding here
       drifted out of sync with the linear body slide and read as a slight wobble.
       Other properties (bg/colour) keep ease-in-out. */
    -webkit-transition: all 0.2s ease-in-out, padding 0.2s linear;
    -moz-transition: all 0.2s ease-in-out, padding 0.2s linear;
    transition: all 0.2s ease-in-out, padding 0.2s linear;
}

.fce-tab-section .fce-es-c-rc-s-descr {
    display: none;
}

.fce-tab-section .fce-es-c-rc-sin.active {
    padding-top: 21px;
    padding-bottom: 21px;
    cursor: auto;
}

.fce-tab-section .fce-es-c-rc-s-t-t-0{
    pointer-events: none;
}

.fce-tab-section .fce-es-c-rc-sin.active .fce-es-c-rc-s-t-t-0 {
    pointer-events: all;
}

.fce-tab-section .fce-es-c-rc-s-t-icon {
    min-width: 40px;
    min-height: 40px;
    background-color: var(--bagels-dark);
}

.fce-tab-section .fce-es-c-rc-sin.active .fce-es-c-rc-s-t-icon {
    background-color: var(--bagels-light);
    transform: rotateZ(90deg);
}

.fce-tab-section .fce-es-c-rc-s-d-text {
    margin-top: 10px;
}

.fce-tab-section .fce-es-c-rc-s-t-i-1 {
    top: 50%;
    left: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

.fce-tab-section .fce-es-c-rc-s-t-i-h {
    width: 12px;
    height: 2px;
}

.fce-tab-section .fce-es-c-rc-sin.active .fce-es-c-rc-s-t-i-1{
    background-color: var(--bagels-dark);
}

.fce-tab-section .fce-es-c-rc-sin.active .fce-es-c-rc-s-t-i-h{
    width: 0;
}

.fce-tab-section .fce-es-c-rc-s-t-i-v{
    height: 12px;
    width: 2px;
}

.fce-tab-section .fce-es-c-rc-s-title:after{
    position: absolute;
    /* content: ''; */
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.fce-tab-section .fce-es-c-rc-s-t-text {
    font-size: 20px;
}

.fce-tab-section .fce-es-c-rc-sin:not(.active):focus .fce-es-c-rc-s-title,
.fce-tab-section .fce-es-c-rc-s-title:focus{
    color: var(--bagels-dark);
}

.fce-tab-section.light .fce-es-c-rc-sin:not(.active):focus .fce-es-c-rc-s-title,
.fce-tab-section.light .fce-es-c-rc-s-title:focus{
    color: var(--bagels-light);
}

.fce-tab-section .fce-es-c-rc-sin .fce-es-c-rc-s-title{
    padding-right: 25px;
}

@media (min-width: 992px) {
    .fce-tab-section .b-tab-wrapper .b-tab-link:hover .b-tab-text:after{
        background-color: var(--bagels-dark);
    }
    
    .fce-tab-section .b-tab-wrapper.light .b-tab-link:hover .b-tab-text:after{
        background-color: var(--bagels-light);
    }

    .fce-tab-section .fce-es-c-rc-sin:not(.active):hover .fce-es-c-rc-s-title,
    .fce-tab-section .fce-es-c-rc-s-title:hover{
        color: var(--bagels-neutral_800);
    }

    .fce-tab-section.light .fce-es-c-rc-sin:not(.active):hover .fce-es-c-rc-s-title,
    .fce-tab-section.light .fce-es-c-rc-s-title:hover{
        color: var(--bagels-neutral_200);
    }

    .fce-tab-section .fce-es-c-rc-sin:not(.active):hover .fce-es-c-rc-s-title:after,
    .fce-tab-section .fce-es-c-rc-s-title:hover:after{
        background-color: var(--bagels-dark);
    }

    .fce-tab-section.light .fce-es-c-rc-sin:not(.active):hover .fce-es-c-rc-s-title:after,
    .fce-tab-section.light .fce-es-c-rc-s-title:hover:after{
        background-color: var(--bagels-light);
    }

    .fce-tab-section .fce-es-c-rc-sin:not(.active):hover .fce-es-c-rc-s-t-icon,
    .fce-tab-section .fce-es-c-rc-s-t-icon:hover {
        background-color: var(--bagels-light);
    }
    
    .fce-tab-section .fce-es-c-rc-sin:not(.active):hover .fce-es-c-rc-s-t-icon .fce-es-c-rc-s-t-i-1,
    .fce-tab-section .fce-es-c-rc-s-t-icon:hover .fce-es-c-rc-s-t-i-1{
        background-color: var(--bagels-dark);
    }
}

@media (max-width: 991px) {
    .fce-tab-section .fce-es-c-1-1{
        display: block;
    }

    .fce-tab-section .fce-es-c-right-col {
        margin-top: 25px;
    }

    .fce-tab-section .fce-es-c-rc-sin{
        margin-bottom: 25px;
    }

    .fce-tab-section .b-tab-wrapper .b-tab-link:active .b-tab-text:after{
        background-color: var(--bagels-dark);
    }
    
    .fce-tab-section .b-tab-wrapper.light .b-tab-link:active .b-tab-text:after{
        background-color: var(--bagels-light);
    }

    .fce-tab-section .fce-es-c-rc-sin:not(.active):active .fce-es-c-rc-s-title,
    .fce-tab-section .fce-es-c-rc-s-title:active{
        color: var(--bagels-neutral_800);
    }

    .fce-tab-section.light .fce-es-c-rc-sin:not(.active):active .fce-es-c-rc-s-title,
    .fce-tab-section.light .fce-es-c-rc-s-title:active{
        color: var(--bagels-neutral_200);
    }

    .fce-tab-section .fce-es-c-rc-sin:not(.active):active .fce-es-c-rc-s-title:after,
    .fce-tab-section .fce-es-c-rc-s-title:active:after{
        background-color: var(--bagels-dark);
    }

    .fce-tab-section.light .fce-es-c-rc-sin:not(.active):active .fce-es-c-rc-s-title:after,
    .fce-tab-section.light .fce-es-c-rc-s-title:active:after{
        background-color: var(--bagels-light);
    }

    .fce-tab-section .fce-es-c-rc-sin:not(.active):active .fce-es-c-rc-s-t-icon,
    .fce-tab-section .fce-es-c-rc-s-t-icon:active{
        background-color: var(--bagels-light);
    }
    
    .fce-tab-section .fce-es-c-rc-sin:not(.active):active .fce-es-c-rc-s-t-icon .fce-es-c-rc-s-t-i-1,
    .fce-tab-section .fce-es-c-rc-s-t-icon:active .fce-es-c-rc-s-t-i-1{
        background-color: var(--bagels-dark);
    }

    .fce-tab-section .fce-es-c-rc-sin:not(.active):active .fce-es-c-rc-s-title,
    .fce-tab-section .fce-es-c-rc-s-title:active{
        color: var(--bagels-dark);
    }

    .fce-tab-section.light .fce-es-c-rc-sin:not(.active):active .fce-es-c-rc-s-title,
    .fce-tab-section.light .fce-es-c-rc-s-title:active{
        color: var(--bagels-light);
    }
}

@media (max-width: 767px) {
    .fce-tab-section .fce-es-c-lc-text {
        padding: 25px 20px;
    }

    .fce-tab-section .fce-es-c-rc-s-t-text {
        font-size: 16px;
    }

    .fce-tab-section .fce-es-c-rc-s-t-icon {
        min-width: 35px;
        min-height: 35px;
    }

    .fce-tab-section .fce-es-c-right-col {
        margin-top: 20px;
    }

    .fce-tab-section .fce-es-c-rc-sin{
        margin-bottom: 20px;
    }

    .fce-tab-section .b-tab-wrapper .b-tab-text {
        padding-left: 10px;
        padding-right: 10px;
    }

    .fce-tab-section .fce-es-t-wrapper{
        gap: 10px;
    }
}

.fce-tab-section .fce-es-c-rc-sin:last-child {
    margin-bottom: 0;
}

/*
    Vertical tabs.
    Styles for layout with vertical tabs.
    The class "fce-ts-vertical" should be available in the "fce-tab-section" div
*/
    /* Gap between the intro content and the tabs/content wrapper (vertical only;
       horizontal relies on .fce-es-tabs margin-bottom instead). */
    .fce-tab-section.fce-ts-vertical .fce-es-intro {
        margin-bottom: 30px;
    }

    .fce-tab-section.fce-ts-vertical .fce-ts-t-n-tw-title-cont {
        margin-bottom: 100px;
        padding-right: 15px;
    }
    
    .fce-tab-section.fce-ts-vertical .fce-es-c-lc-text {
        padding: 0;
    }

    .fce-tab-section.fce-ts-vertical :is(.fce-ts-tabs-n-title-wrapper, .fce-es-c-lc-text) {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .fce-tab-section.fce-ts-vertical.full-height :is(.fce-ts-tabs-n-title-wrapper, .fce-es-c-lc-text) {
        padding-top: 33px;
        padding-bottom: 35px;
    }

    /* The top space above the tab headers belongs to the heading block, not the wrapper, so
       it only exists when a heading is present. The heading block (.fce-ts-t-n-tw-title-cont)
       is rendered conditionally on the frontend/preview and display-toggled in the editor, so
       removing the heading removes the space live — no extra class or binding needed. The
       wrapper keeps its padding-bottom (from the :is rules above); only its top padding moves.
       Two wrapper rules so the zero also beats the higher-specificity .full-height :is rule. */
    .fce-tab-section.fce-ts-vertical .fce-ts-tabs-n-title-wrapper { padding-top: 0; }
    .fce-tab-section.fce-ts-vertical.full-height .fce-ts-tabs-n-title-wrapper { padding-top: 0; }
    .fce-tab-section.fce-ts-vertical .fce-ts-t-n-tw-title-cont { padding-top: 50px; }
    .fce-tab-section.fce-ts-vertical.full-height .fce-ts-t-n-tw-title-cont { padding-top: 33px; }

    /* Editor: hide the heading block when its text is empty. Pure CSS replaces the old
       `display` binding so clearing the heading no longer triggers the re-render that
       dropped the element's vertical state. The `text` binding empties the <h2>, making it
       :empty. Frontend/preview never render this block without a heading, so this is a no-op
       there. display:none also removes its top padding, so the gap collapses correctly. */
    .fce-tab-section.fce-ts-vertical .fce-ts-t-n-tw-title-cont:has(.fce-ts-t-n-tw-heading h2:empty) {
        display: none;
    }

    .fce-tab-section.fce-ts-vertical .fce-ts-tabs-n-title-wrapper {
        min-width: 30.3%;
        max-width: 30.3%;
    }

    .fce-tab-section.fce-ts-vertical .fce-es-c-lc-text {
        padding-left: 50px;
        padding-right: 50px;
    }

    .fce-tab-section.fce-ts-vertical.full-height .fce-es-c-lc-text {
        padding-left: 35px;
        padding-right: 35px;
        overflow: auto;
        /* reinstate me */
        max-height: calc( 100vh - 10px - 250px);
        /* remove me */
        /* max-height: calc( 100vh - 10px - 340px); */
    }

    .fce-tab-section.fce-ts-vertical .b-tab-link{
        font-size: 21px;
    }

    .fce-tab-section.fce-ts-vertical .fce-es-tabs:after,
    .fce-tab-section.fce-ts-vertical .b-tab-text:after{
        height: 0;
    }

    .fce-tab-section.fce-ts-vertical .fce-es-t-wrapper{
        gap: 0;
    }

    .fce-tab-section.fce-ts-vertical .fce-es-tabs{
        margin-bottom: 0;
    }

    .fce-tab-section-v2.fce-ts-vertical .fce-es-c-right-col {
        display: none;
    }

    .fce-tab-section-v2.fce-ts-vertical .fce-es-c-col{
        display: flex;
        flex-direction: column-reverse;
        border-radius: 0;
    }

    .fce-tab-section.fce-ts-vertical .fce-ts-tnc-wrapper > .fce-es-content{
        display: flex;
        align-items: center;
        width: calc( 100% - 30.3% );
    }

    /* The content box sits next to the vertical tab list in the flex row above. By
       default it stretches to the row height (= the tab list), and align-items:center
       then centres the shorter tab content, leaving the theme-colour background showing
       above and below — worse the more tabs there are. align-self:flex-start lets the
       box hug its own content instead, so there's no excess background at any tab count.
       The section's overall height stays driven by the tab list, so nothing jumps when
       switching tabs. Applies in both the editor and the frontend. */
    .fce-tab-section-v2.fce-ts-vertical .fce-es-content{
        align-self: flex-start;
    }

    /* The content wrapper sits in the flex row above. Without flex-grow it would
       shrink to its content's intrinsic width, making the column width depend on
       the widest block present (e.g. the editor paragraph) — so removing the
       editor collapses the column. flex:1 keeps it full-width regardless of which
       blocks are present; min-width:0 lets long text wrap instead of overflowing. */
    .fce-tab-section-v2.fce-ts-vertical .fce-es-content > .fce-es-c-wrapper{
        flex: 1;
        min-width: 0;
    }

    /* In vertical mode the right column is removed, so the left column must fill the
       row. The editor template gives it an inline flex:1, but the frontend markup does
       not — so without this the column width follows its content on the live page and
       collapses when the editor block is removed (it only looked fine because the
       editor's wide text held it open). Scoped to vertical; horizontal keeps 50/50. */
    .fce-tab-section-v2.fce-ts-vertical .fce-es-c-left-col{
        flex: 1;
        min-width: 100%;
    }

    .fce-tab-section.fce-ts-vertical .fce-es-c-lc-img {
        aspect-ratio: 960 / 353;
    }

    .fce-tab-section.fce-ts-vertical.full-height .fce-es-c-lc-img {
        aspect-ratio: 960 / 305;
    }

    .fce-tab-section.fce-ts-vertical .fce-es-c-lc-img .b-cover-img{
        /* object-position: top; */
    }

    .fce-tab-section.fce-ts-vertical .fce-es-t-link{
        pointer-events: none;
    }

    .fce-tab-section.fce-ts-vertical .fce-es-t-1{
        cursor: pointer;
    }

    .fce-tab-section.fce-ts-vertical .fce-es-c-lc-t-scroll-down{
        position: sticky;
        bottom: -20px;
        left: 100%;
        margin-right: -15px;
        /* margin-bottom: -50px; */
        display: none;
        display: inline-block;
    }

    .fce-tab-section.fce-ts-vertical .fce-es-c-lc-t-scroll-down .btb-1{
        background-color: var(--bagels-neutral_800);
        color: #fff;
        min-width: 31px;
        min-height: 31px;
        font-size: 15px;
        opacity: 0.7;
        padding: 0;
        /* border-color: transparent; */
    }

    .fce-tab-section.fce-ts-vertical .fce-es-c-lc-t-scroll-down .btb-1:focus{
        background-color: var(--bagels-neutral_700);
    }
    
    .bagels-touch-device .fce-tab-section.fce-ts-vertical .fce-es-c-lc-t-scroll-down{
        display: inline-block;
    }

    .hide-scroll-to-top #scroll-top{
        display: none;
    }

    body.fce-es-c-lc-t-scrollable .fce-tab-section.fce-ts-vertical.full-height{
        display: none;
    }

    @media (min-width: 992px) {
        .fce-tab-section.fce-ts-vertical .fce-es-t-1:hover .b-tab-link:after {
            opacity: 1;
        }

        .fce-tab-section.fce-ts-vertical .fce-es-t-1:hover .b-tab-link:before {
            opacity: 0;
        }

        .fce-tab-section.fce-ts-vertical .fce-es-c-lc-t-scroll-down .btb-1:hover{
            /* background-color: var(--bagels-neutral_700); */
        }
    }

    @media (max-width: 1199px) {
        .fce-tab-section.fce-ts-vertical .fce-ts-t-n-tw-heading{
            margin-bottom: 70px;
        }

        .fce-tab-section.fce-ts-vertical.full-height{
            display: none;
        }
    }

    @media (max-width: 991px) {
        .fce-tab-section.fce-ts-vertical .fce-es-t-1:active .b-tab-link:after {
            opacity: 1;
        }

        .fce-tab-section.fce-ts-vertical .fce-es-t-1:active .b-tab-link:before {
            opacity: 0;
        }

        .fce-tab-section.fce-ts-vertical .fce-es-c-lc-t-scroll-down .btb-1:active{
            background-color: var(--bagels-neutral_700);
        }
    }

    @media (min-height: 650px) and (max-height: 860px) {
        .fce-tab-section.fce-ts-vertical.full-height .fce-es-c-lc-text {
            margin-bottom: 10px;
            margin-top: 10px;
            max-height: calc(100vh - 10px - 280px);
        }
    }

    /* Vertical layout structure fixes */
    /* .fce-tab-section-v2.fce-ts-vertical .fce-ts-tnc-wrapper {
        width: 100%;
    }

    .fce-tab-section-v2.fce-ts-vertical .fce-es-c-wrapper {
        flex: 1;
        min-width: 0;
    }

    .fce-tab-section-v2.fce-ts-vertical .fce-es-c-1 {
        width: 100%;
    }

    .fce-tab-section-v2.fce-ts-vertical .fce-es-c-left-col {
        min-width: 100%;
    } */
/* Vertical tabs. */

/* Tab icons. */
    .fce-tab-section .b-tab-wrapper.b-tw-tab-icons .b-tab-link{
        padding: 15px;
        padding-left: 43px;
        font-size: 21px;
    }

    .fce-tab-section .b-tab-wrapper.b-tw-tab-icons .b-tab-text{
        padding: 0;
    }
/* Tab icons. */

/* Pin spacer smooth transition */
    .fce-tab-section.fce-ts-vertical .pin-spacer {
        will-change: height;
    }

    .fce-tab-section.fce-ts-vertical.bt-pin-on-scroll {
        will-change: transform;
    }
/* Pin spacer smooth transition */

/* Slide on scroll */
    .fce-tab-section.fce-ts-vertical.bt-slide-on-scroll .fce-es-c-1.bagels-disp-none-imp{
        display: block !important;
    }
/* Slide on scroll */

    /* .fce-tab-section.fce-ts-vertical.full-height .fce-es-c-lc-text {
        max-height: calc( 100vh - 10px - 110px);
    } */

/* Page builder editor only — data-node-id is added by dcPbBlockWrapper at runtime, never present on frontend */
    .fce-tab-section-v2.fce-ts-vertical[data-node-id] [data-tab-content] {
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

/* Page builder editor only */

/* No AOS inside this element (vertical layout only) — the child content blocks
   (heading, editor, etc.) each render with their own data-aos and would fade/translate
   in. Force every [data-aos] descendant to its visible/end state so the effect is
   removed for the vertical layout only, on the frontend and in the page builder
   preview. Horizontal layout keeps its AOS, and other elements on the page are
   unaffected.

   Like the horizontal rule below, we pin opacity/transform but deliberately leave
   `transition` alone — setting `transition: none` here also killed the padding
   transition that an accordion item (.fce-es-c-rc-sin carries data-aos) uses to
   open smoothly, making the expand snap. The opacity/transform locks alone are
   enough to neutralise the AOS fade. */
    .fce-tab-section-v2.fce-ts-vertical [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

/* No AOS inside horizontal tab panels — hidden tabs (display:none) have their
   data-aos consumed by AOS on page init (position 0,0 = "already in viewport"),
   so only tab 1 ever animates. Scoped to .fce-es-content so the intro section
   above the tabs keeps its AOS. Other elements on the page are unaffected.

   Pinning opacity/transform with !important is enough to neutralise the fade:
   AOS toggles those two properties, and it can't override a locked value, so no
   fade ever fires. We deliberately do NOT set `transition: none` here — that
   would also kill the legitimate transitions of interactive children that happen
   to carry data-aos. In particular an accordion item (.fce-es-c-rc-sin has
   data-aos) animates its padding (11px -> 21px) on open via
   `transition: ... padding 0.2s`; killing it made the padding snap and the
   expand feel janky. Leaving transition alone keeps that open animation smooth. */
    .fce-tab-section-v2:not(.fce-ts-vertical) .fce-es-content [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
/* No AOS inside this element (vertical only) */