/* Legacy arrow offsets and 9.5's flex navigation otherwise compound. Keep
   real 48px hit targets centred on the two content edges. The small sizing
   helper aligns product arrows with the images rather than their captions. */
#page-content .worldPremiereCarousel .owl-carousel > .owl-nav {
    /* Older page CSS declares position:initial!important on this wrapper. */
    position: absolute !important;
    inset: var(--pf-carousel-arrow-top, 50%) var(--pf-carousel-arrow-right, 0px) auto var(--pf-carousel-arrow-left, 0px) !important;
    width: auto !important;
    height: 0;
    margin: 0 !important;
    pointer-events: none;
}
#page-content .worldPremiereCarousel.fullHeight .owl-carousel > .owl-nav {
    left: var(--pf-carousel-arrow-left, var(--gap, 0px)) !important;
    right: var(--pf-carousel-arrow-right, var(--gap, 0px)) !important;
}
#page-content .worldPremiereCarousel .owl-carousel > .owl-nav button {
    position: absolute;
    top: 0 !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: auto;
}
#page-content .worldPremiereCarousel .owl-carousel > .owl-nav .owl-prev {
    left: 0 !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
}
#page-content .worldPremiereCarousel .owl-carousel > .owl-nav .owl-next {
    left: auto !important;
    right: 0 !important;
    transform: translate(50%, -50%) !important;
}
#page-content .worldPremiereCarousel .owl-carousel > .owl-nav button::before {
    display: block;
    color: #fff;
    background-color: rgba(108, 108, 108, 0.48);
    backdrop-filter: blur(10px);
    font-family: "Material Icons";
    font-feature-settings: "liga";
    border: 0 !important;
    border-radius: 0;
    z-index: 99;
    box-sizing: border-box;
    inset: 0;
    width: 48px;
    height: 48px;
    padding: 12px;
    font-size: 24px;
    line-height: 24px;
}
/* Some older pages hide Zephyr's ::after without defining the replacement.
   Keep the same visible icon/background as the current product templates. */
#page-content .worldPremiereCarousel .owl-carousel > .owl-nav .owl-prev::before {
    content: "keyboard_arrow_left";
}
#page-content .worldPremiereCarousel .owl-carousel > .owl-nav .owl-next::before {
    content: "keyboard_arrow_right";
}
#page-content .worldPremiereCarousel .owl-carousel > .owl-nav button::after {
    display: none;
}
/* Physical edges match the Material Icon chevrons, including RTL pages. */
#page-content .video-slider-wrap .video-slider .slick-slider > .slick-prev,
#page-content .pf-split-carousel > .slick-prev,
#page-content .artisanGalleryCarousel > .slick-prev {
    left: 0 !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
}
#page-content .video-slider-wrap .video-slider .slick-slider > .slick-next,
#page-content .pf-split-carousel > .slick-next,
#page-content .artisanGalleryCarousel > .slick-next {
    left: auto !important;
    right: 0 !important;
    transform: translate(50%, -50%) !important;
}
/* Legacy craft galleries share the broad play-button offsets. Their visible
   pseudo-element and real hit target must occupy the same 48px square. */
#page-content .artisanGalleryCarousel > .slick-arrow {
    top: var(--pf-gallery-arrow-top, 50%) !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
}
#page-content .pf-split-carousel > .slick-arrow {
    top: var(--pf-split-arrow-top, 50%) !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
}
#page-content .artisanGalleryCarousel > .slick-prev {
    left: var(--pf-gallery-arrow-left, 0px) !important;
}
#page-content .artisanGalleryCarousel > .slick-next {
    right: var(--pf-gallery-arrow-right, 0px) !important;
}
#page-content .artisanGalleryCarousel > .slick-arrow::before,
#page-content .pf-split-carousel > .slick-arrow::before {
    box-sizing: border-box;
    inset: 0;
    width: 48px;
    height: 48px;
    padding: 12px;
    font-size: 24px;
    line-height: 24px;
}
/* Full-width blocks can lack an outside gutter at any viewport width. */
#page-content .worldPremiereCarousel .owl-carousel.pf-arrows-inset > .owl-nav .owl-prev,
#page-content .pf-split-carousel.pf-arrows-inset > .slick-prev,
#page-content .video-slider-wrap .video-slider .slick-slider.pf-arrows-inset > .slick-prev {
    left: 12px !important;
    transform: translateY(-50%) !important;
}
#page-content .worldPremiereCarousel .owl-carousel.pf-arrows-inset > .owl-nav .owl-next,
#page-content .pf-split-carousel.pf-arrows-inset > .slick-next,
#page-content .video-slider-wrap .video-slider .slick-slider.pf-arrows-inset > .slick-next {
    right: 12px !important;
    transform: translateY(-50%) !important;
}
#page-content .artisanGalleryCarousel.pf-arrows-inset > .slick-prev {
    left: calc(var(--pf-gallery-arrow-left, 0px) + 12px) !important;
    transform: translateY(-50%) !important;
}
#page-content .artisanGalleryCarousel.pf-arrows-inset > .slick-next {
    right: calc(var(--pf-gallery-arrow-right, 0px) + 12px) !important;
    transform: translateY(-50%) !important;
}
/* Keep the established small-screen inset before JavaScript initialises. */
@media (max-width: 600px) {
    #page-content .worldPremiereCarousel .owl-carousel > .owl-nav .owl-prev,
    #page-content .pf-split-carousel > .slick-prev,
    #page-content .video-slider-wrap .video-slider .slick-slider > .slick-prev {
        left: 12px !important;
        transform: translateY(-50%) !important;
    }
    #page-content .worldPremiereCarousel .owl-carousel > .owl-nav .owl-next,
    #page-content .pf-split-carousel > .slick-next,
    #page-content .video-slider-wrap .video-slider .slick-slider > .slick-next {
        right: 12px !important;
        transform: translateY(-50%) !important;
    }
    #page-content .artisanGalleryCarousel > .slick-prev {
        left: calc(var(--pf-gallery-arrow-left, 0px) + 12px) !important;
        transform: translateY(-50%) !important;
    }
    #page-content .artisanGalleryCarousel > .slick-next {
        right: calc(var(--pf-gallery-arrow-right, 0px) + 12px) !important;
        transform: translateY(-50%) !important;
    }
}

/* External Slick navigation loses its former wrapper styling when anchored
   inside the gallery. Keep its button text accessible and its icon explicit. */
#page-content .artisanGalleryCarousel > .slick-arrow {
    color: transparent;
    background: transparent;
    font-size: 0;
    line-height: 0;
}
#page-content .artisanGalleryCarousel > .slick-arrow::before {
    position: absolute;
    font-family: "Material Icons";
    font-feature-settings: "liga";
    color: #fff;
    background-color: rgba(108, 108, 108, 0.48);
    backdrop-filter: blur(10px);
    border: 0;
    border-radius: 0;
    opacity: 1;
}

/* Respect Owl's explicit RTL direction, rather than the page language alone. */
#page-content .worldPremiereCarousel .owl-carousel.owl-rtl > .owl-nav .owl-prev {
    left: auto !important;
    right: 0 !important;
    transform: translate(50%, -50%) !important;
}
#page-content .worldPremiereCarousel .owl-carousel.owl-rtl > .owl-nav .owl-next {
    left: 0 !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
}
#page-content .worldPremiereCarousel .owl-carousel.owl-rtl > .owl-nav .owl-prev::before { content: "keyboard_arrow_right"; }
#page-content .worldPremiereCarousel .owl-carousel.owl-rtl > .owl-nav .owl-next::before { content: "keyboard_arrow_left"; }
#page-content .worldPremiereCarousel .owl-carousel.owl-rtl.pf-arrows-inset > .owl-nav .owl-prev {
    right: var(--pf-scroll-inset, 12px) !important;
    transform: translateY(-50%) !important;
}
#page-content .worldPremiereCarousel .owl-carousel.owl-rtl.pf-arrows-inset > .owl-nav .owl-next {
    left: var(--pf-scroll-inset, 12px) !important;
    transform: translateY(-50%) !important;
}
@media (max-width: 600px) {
    #page-content .worldPremiereCarousel .owl-carousel.owl-rtl > .owl-nav .owl-prev {
        right: var(--pf-scroll-inset, 12px) !important;
        transform: translateY(-50%) !important;
    }
    #page-content .worldPremiereCarousel .owl-carousel.owl-rtl > .owl-nav .owl-next {
        left: var(--pf-scroll-inset, 12px) !important;
        transform: translateY(-50%) !important;
    }
}

/* Slick's RTL galleries reverse travel and the physical navigation edges. */
#page-content .artisanGalleryCarousel > .slick-prev::before { content: "keyboard_arrow_left"; }
#page-content .artisanGalleryCarousel > .slick-next::before { content: "keyboard_arrow_right"; }
#page-content .artisanGalleryCarousel.pf-carousel-rtl > .slick-prev {
    left: auto !important;
    right: var(--pf-gallery-arrow-right, 0px) !important;
    transform: translate(50%, -50%) !important;
}
#page-content .artisanGalleryCarousel.pf-carousel-rtl > .slick-next {
    left: var(--pf-gallery-arrow-left, 0px) !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
}
#page-content .artisanGalleryCarousel.pf-carousel-rtl > .slick-prev::before { content: "keyboard_arrow_right"; }
#page-content .artisanGalleryCarousel.pf-carousel-rtl > .slick-next::before { content: "keyboard_arrow_left"; }
#page-content .artisanGalleryCarousel.pf-carousel-rtl.pf-arrows-inset > .slick-prev {
    right: calc(var(--pf-gallery-arrow-right, 0px) + 12px) !important;
    transform: translateY(-50%) !important;
}
#page-content .artisanGalleryCarousel.pf-carousel-rtl.pf-arrows-inset > .slick-next {
    left: calc(var(--pf-gallery-arrow-left, 0px) + 12px) !important;
    transform: translateY(-50%) !important;
}
@media (max-width: 600px) {
    #page-content .artisanGalleryCarousel.pf-carousel-rtl > .slick-prev {
        right: calc(var(--pf-gallery-arrow-right, 0px) + 12px) !important;
        transform: translateY(-50%) !important;
    }
    #page-content .artisanGalleryCarousel.pf-carousel-rtl > .slick-next {
        left: calc(var(--pf-gallery-arrow-left, 0px) + 12px) !important;
        transform: translateY(-50%) !important;
    }
}

/* Split panels and videos also preserve their own Slick RTL setting. */
#page-content .pf-split-carousel > .slick-prev::before,
#page-content .video-slider-wrap .slick-slider > .slick-prev::before { content: "keyboard_arrow_left"; }
#page-content .pf-split-carousel > .slick-next::before,
#page-content .video-slider-wrap .slick-slider > .slick-next::before { content: "keyboard_arrow_right"; }
#page-content .pf-split-carousel.pf-carousel-rtl > .slick-prev,
#page-content .video-slider-wrap .slick-slider.pf-carousel-rtl > .slick-prev {
    left: auto !important;
    right: 0 !important;
    transform: translate(50%, -50%) !important;
}
#page-content .pf-split-carousel.pf-carousel-rtl > .slick-next,
#page-content .video-slider-wrap .slick-slider.pf-carousel-rtl > .slick-next {
    left: 0 !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
}
#page-content .pf-split-carousel.pf-carousel-rtl.pf-arrows-inset > .slick-prev,
#page-content .video-slider-wrap .slick-slider.pf-carousel-rtl.pf-arrows-inset > .slick-prev {
    right: 12px !important;
    transform: translateY(-50%) !important;
}
#page-content .pf-split-carousel.pf-carousel-rtl.pf-arrows-inset > .slick-next,
#page-content .video-slider-wrap .slick-slider.pf-carousel-rtl.pf-arrows-inset > .slick-next {
    left: 12px !important;
    transform: translateY(-50%) !important;
}
#page-content .pf-archive-carousel.pf-carousel-rtl > .slick-prev {
    left: auto !important;
    right: calc(var(--pf-archive-arrow-right, 0px) + 12px) !important;
}
#page-content .pf-archive-carousel.pf-carousel-rtl > .slick-next {
    left: calc(var(--pf-archive-arrow-left, 0px) + 12px) !important;
    right: auto !important;
}
#page-content .pf-split-carousel.pf-carousel-rtl > .slick-prev::before,
#page-content .pf-archive-carousel.pf-carousel-rtl > .slick-prev::before,
#page-content .video-slider-wrap .slick-slider.pf-carousel-rtl > .slick-prev::before { content: "keyboard_arrow_right"; }
#page-content .pf-split-carousel.pf-carousel-rtl > .slick-next::before,
#page-content .pf-archive-carousel.pf-carousel-rtl > .slick-next::before,
#page-content .video-slider-wrap .slick-slider.pf-carousel-rtl > .slick-next::before { content: "keyboard_arrow_left"; }
@media (max-width: 600px) {
    #page-content .pf-split-carousel.pf-carousel-rtl > .slick-prev,
    #page-content .video-slider-wrap .slick-slider.pf-carousel-rtl > .slick-prev {
        right: 12px !important;
        transform: translateY(-50%) !important;
    }
    #page-content .pf-split-carousel.pf-carousel-rtl > .slick-next,
    #page-content .video-slider-wrap .slick-slider.pf-carousel-rtl > .slick-next {
        left: 12px !important;
        transform: translateY(-50%) !important;
    }
}
@media (max-width: 767px) {
    /* Keep visible pagination in the panel's flow, clear of the next section. */
    #page-content .pf-split-carousel > .slick-dots {
        position: static !important;
        transform: none !important;
        margin: 16px 0 0 !important;
    }
}

/* Preserve screen-sized controls while legacy scroll rows scale their media. */
#page-content .pf-scroll-carousel > .owl-nav button,
#page-content .pf-scroll-carousel > .owl-nav button::before {
    width: var(--pf-scroll-control, 48px) !important;
    height: var(--pf-scroll-control, 48px) !important;
}
#page-content .pf-scroll-carousel > .owl-nav button::before {
    padding: var(--pf-scroll-inset, 12px);
    font-size: var(--pf-scroll-icon, 24px);
    line-height: var(--pf-scroll-icon, 24px);
}
#page-content .pf-scroll-carousel.pf-arrows-inset > .owl-nav .owl-prev { left: var(--pf-scroll-inset, 12px) !important; }
#page-content .pf-scroll-carousel.pf-arrows-inset > .owl-nav .owl-next { right: var(--pf-scroll-inset, 12px) !important; }

/* The 2025 archive uses a separate, stretched Slick layout. Its old
   defaults put the next arrow beyond the screen and the previous in the middle. */
#page-content .pf-archive-carousel > .slick-arrow {
    top: var(--pf-split-arrow-top, 50%) !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}
#page-content .pf-archive-carousel > .slick-prev {
    left: calc(var(--pf-archive-arrow-left, 0px) + 12px) !important;
    right: auto !important;
}
#page-content .pf-archive-carousel > .slick-next {
    left: auto !important;
    right: calc(var(--pf-archive-arrow-right, 0px) + 12px) !important;
}
#page-content .pf-archive-carousel > .slick-arrow::before {
    color: #fff;
    background-color: rgba(108, 108, 108, 0.48);
    backdrop-filter: blur(10px);
    font-family: "Material Icons";
    font-feature-settings: "liga";
    box-sizing: border-box;
    inset: 0;
    width: 48px;
    height: 48px;
    padding: 12px;
    font-size: 24px;
    line-height: 24px;
    opacity: 1;
}
#page-content .pf-archive-carousel > .slick-prev::before { content: "keyboard_arrow_left"; }
#page-content .pf-archive-carousel > .slick-next::before { content: "keyboard_arrow_right"; }

/* 9.5 adds a positive inline margin to stretched legacy flex columns. A
   50% + 50% row then wraps. Preserve the previous physical edge offsets;
   grid-based rows retain the new theme behavior. */
@media (min-width: 768px) {
    .g-cols.via_flex.type_default > .wpb_column.stretched:first-of-type {
        margin-inline-start: 0;
        margin-left: -1rem;
    }
    .g-cols.via_flex.type_default > .wpb_column.stretched:last-of-type {
        margin-inline-end: 0;
        margin-right: -1rem;
    }
}

/* Override 9.5's more-specific SVG auto-height rule only for this campaign. */
#page-content .bannerSection .bannerWrapper {
    justify-content: center;
    align-items: center;
}
#page-content .bannerSection .w-image.logoPFsvgWhite img[src$=".svg"] {
    height: 80px;
    width: auto;
}

/* Previously embedded in the Carillon HTML block, now kept out of post code. */
.audioDiv {
    display: flex;
    justify-content: center;
}

/* 9.5 starts applying this story's orphaned USB-only CSS. Keep the article
   template's original responsive heading scale and available title width. */
body.postid-590601 #page-content .us_custom_8b387e63 .post_title {
    max-width: none;
    font-size: var(--h1-font-size, 3.75rem) !important;
}
/* The existing site typography switches h1 to 2rem at 900px without changing
   --h1-font-size. Preserve that breakpoint alongside its 2rem line height. */
@media (max-width: 900px) {
    body.postid-590601 #page-content .us_custom_8b387e63 .post_title {
        font-size: 2rem !important;
    }
}

/* Variable-width galleries must size the picture independently of its caption.
   Retain the existing 90vw slide limit and 10px padding on each side, without
   max-width:100% feeding a stale caption measurement back into the image. */
.artisanGalleryCarousel.pf-gallery-sizing .artisanCarouselItem img {
    max-width: calc(90vw - 20px);
}
.artisanGalleryCarousel.pf-gallery-sizing .pf-gallery-caption {
    width: var(--pf-gallery-image-width) !important;
    min-width: 0;
}

/* 9.5 renames style_drop_default to mod_dropdown and applies field styles
   to the legacy title button. Preserve the catalogue's reviewed controls. */
.masterGridFilter.w-filter.state_desktop.mod_dropdown .w-filter-item-title {
    font-family: "Public Sans";
    border-width: 0;
    text-decoration: underline;
    text-transform: uppercase;
}
.masterGridFilter.w-filter.state_desktop.mod_dropdown .w-filter-list {
    gap: 0;
    margin: -0.5em;
}
.masterGridFilter.w-filter.state_desktop.mod_dropdown .w-filter-item {
    margin: 0.5em;
}
.masterGridFilter.w-filter.state_desktop.mod_dropdown .w-filter-item:not(.has_value) .w-filter-item-title::after {
    top: 56%;
    transform: translateY(-50%);
    margin: 0 1rem;
    border-radius: 2px;
}

/* New inner buttons must retain the existing mobile panel label treatment. */
#mobile.filterMobilePopUp .w-filter-item-toggle {
    text-transform: inherit;
    text-decoration: inherit;
}
#mobile.filterMobilePopUp .w-filter-item-title-text {
    line-height: inherit;
}
#mobile.filterMobilePopUp .w-filter-item-control {
    display: none;
}
#mobile.filterMobilePopUp .w-filter-item-title::after {
    content: "";
    position: absolute;
    inset-inline-start: auto;
    inset-inline-end: 0;
    top: 0;
    margin: 0;
    border-radius: 0;
    transform: rotate(-90deg);
    pointer-events: none;
}

/* 9.5's stretched-column container query adds a second negative gutter to
   legacy article content. The outer column already supplies that stretch. */
body.single-stories .post_content .g-cols.via_flex.type_default > .wpb_column.stretched > .vc_column-inner {
    margin: 0;
}