/**
 * Hero Area breadcrumb placement and fallback visibility.
 */

.cpl-breadcrumb-standalone {
    position: relative;
    z-index: 10;
}

/*
 * Standalone trail wrapping matches Page/hero breadcrumb flex-wrap.
 * Position (relative, overlay offset ≥1200px) is unchanged.
 * Do not set max-width:100% on .container — that overrides the site rail
 * and leaves only Bootstrap's ~15px gutter.
 */
.cpl-breadcrumb-standalone .breadcroumn-contnt,
.cpl-breadcrumb-standalone .bre-sub {
    max-width: 100%;
    box-sizing: border-box;
}

/*
 * Container Width: flatten Bootstrap max-width and use the shared shell inset
 * (same token as header + Page breadcrumb outside the slide caption).
 */
.cpl-breadcrumb-standalone.cpl-breadcrumb-standalone--container > .container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--cpl-shell-inset);
    padding-right: var(--cpl-shell-inset);
    box-sizing: border-box;
}

.cpl-breadcrumb-standalone .bre-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    line-height: 1.2;
}

.cpl-breadcrumb-standalone .bre-sub a,
.cpl-breadcrumb-standalone .bre-sub .current,
.cpl-breadcrumb-standalone .bre-sub span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media only screen and (max-width: 1024px) {
    .cpl-breadcrumb-standalone .bre-sub {
        row-gap: 0.15em;
    }
}

@media only screen and (max-width: 767px) {
    .cpl-breadcrumb-standalone .bre-sub {
        row-gap: 0.2em;
    }
}

/*
 * Single Post standalone: match Page/hero trail presentation below 1200px.
 * Physical location (after header; overlay offset only ≥1200px) is unchanged.
 */
body.single-post .cpl-breadcrumb-standalone .breadcroumn-contnt {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

body.single-post .cpl-breadcrumb-standalone .bre-sub .cpl-breadcrumb-home-link {
    display: inline-flex;
    align-items: center;
}

body.single-post .cpl-breadcrumb-standalone .bre-sub .cpl-breadcrumb-home-icon,
body.single-post .cpl-breadcrumb-standalone .bre-sub i {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/*
 * Live Single Post trail is .cpl-banner-breadcrumb when the post banner is on.
 * Match Page/hero wrap so a long post title does not overflow. Pages unchanged.
 */
body.single-post .cpl-banner-breadcrumb .bre-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    line-height: 1.2;
    box-sizing: border-box;
}

body.single-post .cpl-banner-breadcrumb .bre-sub a,
body.single-post .cpl-banner-breadcrumb .bre-sub .current,
body.single-post .cpl-banner-breadcrumb .bre-sub span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 1199.98px) {
    body.single-post .cpl-breadcrumb-standalone {
        max-width: 100%;
        box-sizing: border-box;
    }

    body.single-post .cpl-breadcrumb-standalone.cpl-breadcrumb-standalone--container > .container {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: var(--cpl-shell-inset, var(--cpl-page-inline-start, max(0.75rem, calc((100vw - 1200px) / 2))));
        padding-right: var(--cpl-shell-inset, var(--cpl-page-inline-end, max(0.75rem, calc((100vw - 1200px) / 2))));
        box-sizing: border-box;
    }

    body.single-post .cpl-breadcrumb-standalone .bre-sub {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        line-height: 1.2;
    }
}

/*
 * Desktop overlay/fixed header is out of flow. Clear it ≥1200px.
 * Below 1200 the Elementor/CPL header still overlays (absolute .main-header /
 * fixed #sticky-header until 1023px; over-slider stays absolute). Page hero
 * already uses --cpl-overlay-header-height at those widths. Standalone must too.
 */
@media (min-width: 1200px) {
    .cpl-breadcrumb-standalone {
        margin-top: var(--cpl-overlay-header-height, 79.14px);
    }

    .cpl-breadcrumb-fallback-mount:has(.cpl-breadcrumb-standalone) {
        padding-top: var(--cpl-overlay-header-height, 79.14px);
    }

    .cpl-breadcrumb-fallback-mount .cpl-breadcrumb-standalone {
        margin-top: 0;
    }

    /*
     * Overlay header is out of flow. Standalone breadcrumb normally clears it.
     * When Single Post breadcrumb and banner are both off, main must.
     */
    body.single-post.page-builder-not-used:not(:has(.cpl-breadcrumb-standalone)):not(:has(.breadcroumb-area)) .site-main.content-area {
        margin-top: var(--cpl-overlay-header-height, 79.14px);
    }
}

/*
 * Post/Blog standalone only, overlay/fixed CPL header only (.cpl-header).
 * Default in-flow header is excluded. :where() keeps specificity below Post
 * margin overrides. Fallbacks match Page hero overlay-height tokens.
 * body:has(.cpl-header--on-top) already zeros the token.
 */
@media (max-width: 1199.98px) {
    :where(body.single-post, body.blog):where(:has(.cpl-header)):where(:not(:has(.cpl-header--on-top))) .cpl-breadcrumb-standalone {
        --cpl-overlay-header-height: 76.32px;
        margin-top: var(--cpl-overlay-header-height, 76.32px);
    }

    :where(body.single-post, body.blog):where(:has(.cpl-header)):where(:not(:has(.cpl-header--on-top))) .cpl-breadcrumb-fallback-mount:has(.cpl-breadcrumb-standalone) {
        padding-top: var(--cpl-overlay-header-height, 76.32px);
    }

    :where(body.single-post, body.blog) .cpl-breadcrumb-fallback-mount .cpl-breadcrumb-standalone {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    :where(body.single-post, body.blog):where(:has(.cpl-header)):where(:not(:has(.cpl-header--on-top))) .cpl-breadcrumb-standalone {
        --cpl-overlay-header-height: 90.32px;
        margin-top: var(--cpl-overlay-header-height, 90.32px);
    }

    :where(body.single-post, body.blog):where(:has(.cpl-header)):where(:not(:has(.cpl-header--on-top))) .cpl-breadcrumb-fallback-mount:has(.cpl-breadcrumb-standalone) {
        padding-top: var(--cpl-overlay-header-height, 90.32px);
    }
}

.breadcroumb-area.cpl-has-overlay {
    position: relative;
}

.breadcroumb-area.cpl-has-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.breadcroumb-area.cpl-has-overlay .container {
    position: relative;
    z-index: 1;
}

.breadcroumb-area.cpl-banner-height-small {
    padding-top: 140px;
    padding-bottom: 100px;
}

.breadcroumb-area.cpl-banner-height-medium {
    padding-top: 220px;
    padding-bottom: 160px;
}

.breadcroumb-area.cpl-banner-height-large {
    padding-top: 320px;
    padding-bottom: 240px;
}

.cpl-slider-wrap,
.main-slider-wrap.cpl-slider-wrap,
.cpl-slider-hero-stage {
    position: relative;
}

.cpl-slider-hero-stage {
    width: 100%;
}

/*
 * Effective overlay-header height used to push the Top Inside breadcrumb below
 * the transparent overlay header (which sits at the top of the hero). Values are
 * the measured header height only and deliberately EXCLUDE the WP admin-bar
 * offset. Scoped to the slider hero so no other breadcrumb position is affected.
 *
 * CPL-WEBSITE-SLIDER-PROPORTIONAL-SPACING-1A — responsive visual rhythm.
 * Desktop maxima match the approved live geometry (1600px reference):
 *   header→content ≈45, content→CTA ≈25 (content-owned), CTA→BC ≈35,
 *   BC→dots =50, dots→bottom =10. Gaps scale with clamp() so tablet/mobile
 *   keep the same proportions without hard pixel jumps. Desktop clamp maxima
 *   preserve the approved look; Bottom Outside does not use these tokens.
 */
.main-slider,
.cpl-slider-hero-stage,
.slider-caption {
    /* Measured overlay-header height (excludes the WP admin-bar). Top Inside is
	   placed at (header height + header gap) from the top of the caption. */
    --cpl-overlay-header-height: 79.14px;

    /*
	 * PROPORTIONAL-SPACING-1A — continuous fluid gaps (no 1024/768 hard cuts).
	 * Preferred vw coeffs hit the desktop maximum at ≈1025px so ≥1025 resolves
	 * to the approved fixed look; narrower viewports scale smoothly.
	 */
    --cpl-breadcrumb-header-gap: clamp(16px, 2.95vw, 30px);
    --cpl-breadcrumb-top-content-gap: clamp(16px, 2.95vw, 30px);
    --cpl-breadcrumb-row-safe-height: clamp(44px, 6.85vw, 70px);
    --cpl-slider-dots-bottom: clamp(8px, 0.98vw, 10px);
    --cpl-slider-dots-height: 7px;
    --cpl-slider-controls-safe-height: 26px;
    --cpl-breadcrumb-controls-gap: clamp(24px, 4.9vw, 50px);

    /* Preferred spacing aliases — single system. */
    --cpl-slider-header-content-gap: var(--cpl-breadcrumb-header-gap);
    --cpl-slider-content-cta-gap: 25px;
    --cpl-slider-cta-breadcrumb-gap: clamp(20px, 3.4vw, 35px);
    --cpl-slider-breadcrumb-dots-gap: var(--cpl-breadcrumb-controls-gap);
    --cpl-slider-dots-bottom-gap: var(--cpl-slider-dots-bottom);
}

@media (max-width: 1199px) {

    .main-slider,
    .cpl-slider-hero-stage,
    .slider-caption {
        --cpl-overlay-header-height: 76.32px;
    }
}

@media (max-width: 767px) {

    .main-slider,
    .cpl-slider-hero-stage,
    .slider-caption {
        --cpl-overlay-header-height: 90.32px;
    }
}

.cpl-slider-hero-stage>.cpl-hero-breadcrumb--top_inside {
    position: relative;
    left: auto;
    right: auto;
    z-index: 4;
    margin-top: var(--cpl-overlay-header-height, 0px);
}

.cpl-slider-hero-stage>.cpl-hero-breadcrumb--bottom_inside {
    position: relative;
    left: auto;
    right: auto;
    z-index: 4;
}

/*
 * CPL-WEBSITE-SLIDER-CONTENT-BALANCE-1A — single content-zone contract.
 *
 * Caption layout is one grid at all widths:
 *   [optional Top Inside row | flexible content zone | optional Bottom Inside row]
 * Header-safe and dots-safe are padding on the layout (not absolute overlays).
 * Inside breadcrumbs are in-flow auto rows (content + Theme Options padding only).
 * Main content is flex-centered in the remaining zone (CTA included).
 */
.slider-caption>.cpl-slider-caption-layout {
    width: 100%;
    height: 100%;
    align-self: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "top"
        "content"
        "bottom";
    box-sizing: border-box;
    /* Top boundary: overlay header bottom. Bottom boundary: dots band. */
    padding-top: var(--cpl-overlay-header-height, 0px);
    padding-bottom: calc(var(--cpl-slider-dots-bottom-gap, var(--cpl-slider-dots-bottom, 10px)) + var(--cpl-slider-dots-height, 7px));
}

/* Bottom Inside: reserve breadcrumb→dots gap below the in-flow breadcrumb row. */
.slider-caption>.cpl-slider-caption-layout.cpl-slider-caption-layout--bottom_inside {
    padding-bottom: calc(var(--cpl-slider-dots-bottom-gap, var(--cpl-slider-dots-bottom, 10px)) + var(--cpl-slider-dots-height, 7px) + var(--cpl-slider-breadcrumb-dots-gap, var(--cpl-breadcrumb-controls-gap, 50px)));
}

/*
 * Neutralize legacy caption flex centering + padding-bottom:100px (custom-widgets)
 * and force caption to fill the slide so in-flow BI aligns to the same box as dots.
 */
.main-slider-wrap .slider-caption.cpl-slider-caption--none,
.main-slider-wrap .slider-caption.cpl-slider-caption--top_inside,
.main-slider-wrap .slider-caption.cpl-slider-caption--bottom_inside {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    box-sizing: border-box;
}

.cpl-slider-caption-zone--top {
    grid-area: top;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    z-index: 4;
    pointer-events: none;
    min-height: 0;
}

.cpl-slider-caption-zone--content {
    grid-area: content;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* safe center: equal free space when content fits; top-align when it does not */
    justify-content: safe center;
    align-items: stretch;
    overflow: hidden;
}

.cpl-slider-caption-zone--content>.container {
    width: 100%;
}

.cpl-slider-caption-zone--bottom {
    grid-area: bottom;
    position: relative;
    z-index: 4;
    pointer-events: none;
    min-height: 0;
}

/*
 * CPL-RESPONSIVE-CONTAINER-ALIGNMENT-1C — shared responsive container system.
 *
 * Authoritative tokens:
 *   --cpl-page-container-max   1200px  WordPress / Elementor site container
 *   --cpl-wide-container-max   1275px  header + slider cap
 *   --cpl-wide-growth-start    1200px  viewport where wide growth begins
 *   --cpl-wide-growth-end      1400px  viewport where wide cap is reached
 *   --cpl-desktop-gutter         30px  shared edge at 1200 (page + header/slider)
 *   --cpl-edge-gutter          0.75rem mobile / sub-1200 floor
 *   --cpl-shell-inset                  L/R inset for header + slider + breadcrumb
 *
 * Behaviour:
 *   <1200      continuous page-rail inset (no Bootstrap 960/720/540 cliffs)
 *   1200       shared 30px edge — page and header/slider both 1140 content
 *   1200–1400  header/slider width eases 1140 → 1275; page stays ≤1200
 *   ≥1400      header/slider locked at 1275, centered
 */
:root {
    --cpl-page-container-max: 1200px;
    --cpl-wide-container-max: 1275px;
    --cpl-wide-growth-start: 1200px;
    --cpl-wide-growth-end: 1400px;
    --cpl-desktop-gutter: 30px;
    --cpl-edge-gutter: 0.75rem;
    /* Content width at growth start: 1200 - 2×30 = 1140 */
    --cpl-wide-start-width: calc(var(--cpl-page-container-max) - 2 * var(--cpl-desktop-gutter));
    /*
     * <1200: ease toward the 30px desktop gutter so 1199→1200 is continuous.
     * Floors at edge-gutter on small viewports.
     */
    --cpl-shell-inset: max(
        var(--cpl-edge-gutter),
        calc((100vw - var(--cpl-page-container-max)) / 2 + var(--cpl-desktop-gutter))
    );
    --cpl-page-max: var(--cpl-page-container-max);
    --cpl-page-inline-start: var(--cpl-shell-inset);
    --cpl-page-inline-end: var(--cpl-shell-inset);
}

/*
 * 1200–1399.98: interpolate header/slider content width from
 * wide-start (1140) to wide-max (1275) as viewport goes 1200 → 1400.
 * inset = (100vw - width) / 2
 * Delta width 135 over 200px viewport → factor 135/200.
 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    :root {
        --cpl-wide-content-width: calc(
            var(--cpl-wide-start-width)
            + (100vw - var(--cpl-wide-growth-start)) * 135 / 200
        );
        --cpl-shell-inset: calc((100vw - var(--cpl-wide-content-width)) / 2);
        --cpl-page-inline-start: var(--cpl-shell-inset);
        --cpl-page-inline-end: var(--cpl-shell-inset);
    }
}

@media (min-width: 1400px) {
    :root {
        --cpl-shell-inset: max(
            var(--cpl-desktop-gutter),
            calc((100vw - var(--cpl-wide-container-max)) / 2)
        );
        --cpl-page-inline-start: var(--cpl-shell-inset);
        --cpl-page-inline-end: var(--cpl-shell-inset);
    }
}

/* —— Hero caption (body prefix beats Additional CSS ive-cplthm-css) —— */
body .main-slider-wrap .slider-caption,
body .main-slider-wrap .slider-caption.cpl-slider-caption--top_inside,
body .main-slider-wrap .slider-caption.cpl-slider-caption--bottom_inside,
body .main-slider-wrap .slider-caption.cpl-slider-caption--none {
    padding-left: var(--cpl-shell-inset) !important;
    padding-right: var(--cpl-shell-inset) !important;
    box-sizing: border-box;
}

.main-slider-wrap .slider-caption .container,
.main-slider-wrap .slider-caption .cpl-slider-caption-zone--content>.container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* —— Header shell: identical inset to hero —— */
body .elementor-widget-cplthm_header_template .main-header,
body .cplthm-header-template .main-header,
body .site-header.cpl-header .main-header,
body .site-header.tp-header .main-header,
body #sticky-header.main-header,
body .main-header.sticky-bar {
    padding-left: var(--cpl-shell-inset) !important;
    padding-right: var(--cpl-shell-inset) !important;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
}

/*
 * Page rail:
 *   <1200  — keep max 1200 (blocks Bootstrap 960/720/540 cliffs; fluid below 1200)
 *   ≥1200  — min(1200, 100vw - 2×30) so the page edge matches header/slider at 1200
 */
@media (max-width: 1199.98px) {
    body .container,
    body .container-sm,
    body .container-md,
    body .container-lg,
    body .elementor-section.elementor-section-boxed>.elementor-container {
        max-width: var(--cpl-page-container-max);
    }
}

@media (min-width: 1200px) {
    body .container,
    body .container-sm,
    body .container-md,
    body .container-lg,
    body .elementor-section.elementor-section-boxed>.elementor-container {
        max-width: min(
            var(--cpl-page-container-max),
            calc(100vw - 2 * var(--cpl-desktop-gutter))
        );
    }
}

/* Kill nested gutters — these were stacking and pushing the logo inward. */
.elementor-widget-cplthm_header_template .main-header>.container,
.elementor-widget-cplthm_header_template #sticky-header>.container,
.cplthm-header-template .main-header>.container,
.site-header.cpl-header .main-header>.container,
.site-header.tp-header .main-header>.container,
#sticky-header>.container,
.main-header.sticky-bar>.container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

.elementor-widget-cplthm_header_template .main-header .navbar,
.cplthm-header-template .main-header .navbar,
.site-header.cpl-header .main-header .navbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.elementor-widget-cplthm_header_template .main-header .logo-area,
.elementor-widget-cplthm_header_template .main-header .site-branding,
.elementor-widget-cplthm_header_template .main-header .site-branding a,
.elementor-widget-cplthm_header_template .main-header .custom-logo-link,
.cplthm-header-template .main-header .logo-area,
.site-header.cpl-header .main-header .logo-area {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.elementor-widget-cplthm_header_template .main-header .header-cta-button,
.elementor-widget-cplthm_header_template .main-header .button.header-cta-button,
.cplthm-header-template .main-header .header-cta-button,
.site-header.cpl-header .main-header .header-cta-button {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/*
 * Bottom Inside breadcrumb: in-flow row (CONTENT-BALANCE-1A).
 * No absolute bottom offset — dots gap is layout padding-bottom.
 */
.cpl-slider-caption-zone--bottom>.cpl-slider-item-bottom-breadcrumb,
.main-slider-item>.cpl-slider-item-bottom-breadcrumb {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 4;
    pointer-events: none;
}

body.cpl-breadcrumb-target-hero.cpl-hero-active .cpl-breadcrumb-fallback-mount,
body.cpl-hero-active .cpl-breadcrumb-fallback-mount:empty,
.cpl-breadcrumb-fallback-mount[hidden] {
    display: none !important;
}

.cpl-breadcrumb-fallback-mount:empty {
    display: none;
}

.cpl-hero-breadcrumb {
    position: relative;
    z-index: 4;
    pointer-events: none;
    /*
     * Solid Theme Options colors are converted to a horizontal fade via
     * cpl_breadcrumb_background_gradient_css() (transparent edges, ~50% center).
     * Do not set a competing solid background here.
     */
}

.cpl-hero-breadcrumb .bre-sub,
.cpl-hero-breadcrumb .bre-sub span,
.cpl-hero-breadcrumb .bre-sub a,
.cpl-hero-breadcrumb .bre-sub a span {
    color: #fff;
}

.cpl-hero-breadcrumb--top_inside .cpl-hero-breadcrumb-inner,
.cpl-hero-breadcrumb--bottom_inside .cpl-hero-breadcrumb-inner {
    /* Theme Options padding/margin remain authoritative (CONTENT-BALANCE-1A).
       No fixed height / min-height / clamp padding — row is content-driven. */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
}

.cpl-hero-breadcrumb--top_inside .cpl-hero-breadcrumb-inner .bre-sub,
.cpl-hero-breadcrumb--bottom_inside .cpl-hero-breadcrumb-inner .bre-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    line-height: 1.2;
    margin: 0;
}

.cpl-hero-breadcrumb--top_inside .cpl-hero-breadcrumb-inner .bre-sub .cpl-breadcrumb-home-link,
.cpl-hero-breadcrumb--bottom_inside .cpl-hero-breadcrumb-inner .bre-sub .cpl-breadcrumb-home-link {
    display: inline-flex;
    align-items: center;
}

.cpl-hero-breadcrumb--top_inside .cpl-hero-breadcrumb-inner .bre-sub .cpl-breadcrumb-home-icon,
.cpl-hero-breadcrumb--bottom_inside .cpl-hero-breadcrumb-inner .bre-sub .cpl-breadcrumb-home-icon,
.cpl-hero-breadcrumb--top_inside .cpl-hero-breadcrumb-inner .bre-sub i,
.cpl-hero-breadcrumb--bottom_inside .cpl-hero-breadcrumb-inner .bre-sub i {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/*
 * Breadcrumb width (Theme Options → Breadcrumb Width).
 * - Full Width : spans the full slider width (page edge) with a safe gutter.
 * - Container  : aligns with the slider/page content (Bootstrap .container).
 * - Custom     : centered max-width (px) set inline by the renderer.
 * Legacy "header" resolves to "container" in PHP (identical alignment), so its
 * modifier rules below are retained only for backward compatibility.
 */

/*
 * Full Width: inner spans the whole breadcrumb bar with a safe page-edge gutter.
 * No Bootstrap max-width is applied. Inside the slide caption the bar already
 * spans the full slide width (see the base .slider-caption rule above), so no
 * 100vw break-out is needed — that avoids the horizontal-scroll the viewport
 * unit could introduce.
 */
.cpl-hero-breadcrumb--fullwidth .cpl-hero-breadcrumb-inner,
.cpl-breadcrumb-standalone--fullwidth > .breadcroumn-contnt {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

/*
 * Header / Container: constrain the inner content to the Bootstrap .container
 * (max-width kept intact) so it is centered within the full-width breadcrumb bar.
 * - Header    reuses the same .container source as #sticky-header, so the trail
 *             starts on the header logo line.
 * - Container reuses the same .container source as .slider-caption, so the trail
 *             starts on the slider content-container line.
 * In this theme the header and slider caption share the same Bootstrap
 * .container, so these two modes resolve to the same edge; they are still mapped
 * to their own semantic source. A page-specific custom margin applied to
 * .main-slider-content via Elementor is a dynamic per-widget value and is not
 * tracked by this static container mapping.
 */
.cpl-hero-breadcrumb--header>.container,
.cpl-hero-breadcrumb--container>.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Container Width inside the slide caption — same fluid edge as hero/header.
 * Flatten Bootstrap .container; inset comes from caption padding (--cpl-page-inline).
 */
.main-slider-wrap .slider-caption .cpl-hero-breadcrumb--container>.container,
.main-slider-wrap .slider-caption .cpl-hero-breadcrumb--header>.container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* Outside-caption breadcrumbs: same fluid inset as logo / hero. */
.cpl-slider-hero-stage>.cpl-hero-breadcrumb--container>.container,
.cpl-slider-hero-stage>.cpl-hero-breadcrumb--header>.container,
.main-slider>.cpl-hero-breadcrumb--container>.container,
.main-slider>.cpl-hero-breadcrumb--header>.container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--cpl-shell-inset, var(--cpl-page-inline-start, max(0.75rem, calc((100vw - 1200px) / 2)))) !important;
    padding-right: var(--cpl-shell-inset, var(--cpl-page-inline-end, max(0.75rem, calc((100vw - 1200px) / 2)))) !important;
    box-sizing: border-box;
}

.cpl-hero-breadcrumb--header .cpl-hero-breadcrumb-inner,
.cpl-hero-breadcrumb--container .cpl-hero-breadcrumb-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Custom Width: the inner trail is capped by an inline max-width (px) set by the
 * renderer, centered, and full width up to that cap. width:100% + border-box
 * make it shrink to the parent on small screens (never overflows), and the edge
 * gutter keeps the text off the viewport edge.
 */
.cpl-hero-breadcrumb--custom .cpl-hero-breadcrumb-inner,
.cpl-breadcrumb-standalone--custom > .breadcroumn-contnt {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

.cpl-hero-breadcrumb--top_inside,
.cpl-hero-breadcrumb--bottom_inside {
    left: 0;
    right: 0;
    z-index: 4;
    pointer-events: none;
}

.cpl-hero-breadcrumb--top_inside {
    position: relative;
    top: auto;
}

.cpl-hero-breadcrumb--bottom_inside {
    position: relative;
    bottom: auto;
}

.cpl-hero-breadcrumb .bre-sub,
.cpl-hero-breadcrumb .brea-title,
.cpl-hero-breadcrumb a {
    pointer-events: auto;
}

.cpl-hero-breadcrumb--bottom_outside {
    position: relative;
    z-index: 4;
}

.cpl-hero-breadcrumb-inner .brea-title {
    font-size: clamp(24px, 4vw, 48px);
    line-height: 1.2;
    margin-bottom: 10px;
}

/* Default hero breadcrumb size. Kept below CSF typography specificity via
   :where() so Theme Options typography always wins when configured. */
:where(.cpl-hero-breadcrumb-inner) .bre-sub span {
    font-size: clamp(14px, 2vw, 18px);
}

.cpl-hero-breadcrumb-fallback-banner {
    padding-top: 120px;
    padding-bottom: 80px;
}

.main-slider,
.main-slider-wrap,
.cpl-slider-wrap {
    max-width: 100%;
    overflow: hidden;
}

.main-slider-wrap .image img,
.main-slider-wrap .image video,
.main-slider-wrap .image iframe {
    max-width: 100%;
}

@media only screen and (max-width: 991px) {
    .breadcroumb-area {
        padding-top: 180px;
        padding-bottom: 120px;
    }

    .breadcroumn-contnt .brea-title {
        font-size: clamp(28px, 6vw, 42px);
        line-height: 1.25;
    }

    .cpl-hero-breadcrumb-fallback-banner {
        padding-top: 80px;
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .breadcroumb-area {
        padding-top: 140px;
        padding-bottom: 90px;
    }

    .breadcroumn-contnt .brea-title {
        font-size: clamp(22px, 7vw, 32px);
        margin-bottom: 12px;
    }

    :where(.bre-sub) span {
        font-size: 14px;
    }

    /*
     * CPL-WEBSITE-HEADER-BREADCRUMB-ALIGNMENT-1A: previously added an EXTRA 15px
     * side padding on inside breadcrumbs here, which double-indented the trail
     * relative to the header logo's Bootstrap gutter. Removed so the trail stays
     * on the same container left edge as the logo / hero content.
     */
}

@media only screen and (max-width: 480px) {
    .breadcroumb-area {
        padding-top: 110px;
        padding-bottom: 70px;
    }

    /*
	 * PROPORTIONAL-SPACING-1A / MOBILE-HEIGHT-1A
	 * Legacy BI extent tokens kept for reference only — they must not drive a
	 * min-height floor that overrides Mobile Slider Height.
	 */
}

.cpl-hero-breadcrumb a:focus,
.cpl-hero-breadcrumb a:focus-visible,
.bre-sub a:focus,
.bre-sub a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.cpl-breadcrumb-home-icon {
    margin-right: 0.35em;
}

.cpl-breadcrumb-home-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.cpl-breadcrumb-home-link:hover,
.cpl-breadcrumb-home-link:focus {
    opacity: 0.85;
}

.bre-sub .current,
.cpl-hero-breadcrumb .current {
    font-weight: 600;
}

.bre-sub .cpl-breadcrumb-sep,
.cpl-hero-breadcrumb .cpl-breadcrumb-sep {
    margin: 0 0.45em;
    font-size: 0.75em;
    opacity: 0.85;
}

.bre-sub .cpl-breadcrumb-sep--slash,
.bre-sub .cpl-breadcrumb-sep--pipe,
.bre-sub .cpl-breadcrumb-sep--custom {
    font-size: 0.9em;
}

.cpl-breadcrumb-item--current {
    font-weight: 500;
}

.cpl-breadcrumb-fallback-mount--editor {
    display: block !important;
    position: relative;
    z-index: 5;
}

.cpl-breadcrumb-editor-preview {
    position: relative;
    z-index: 5;
    padding: 16px 0;
    background: rgba(0, 0, 0, 0.45);
}

.cpl-breadcrumb-editor-notice {
    margin: 8px 0 0;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.4;
    color: #e5e7eb;
    background: rgba(15, 23, 42, 0.85);
    border-left: 3px solid #3b82f6;
}