/* ============================================================
   CAROUSEL THEME ROOTS
   • Grouped background colors are driven by 4 tokens:
     --cpt-surface-1, --cpt-surface-2, --cpt-surface-3
   • Defaults match your current article styling.
   • Override per context (e.g., hero) by redefining these tokens.
============================================================ */
.carousel-pt {
    --cpt-surface-1: var(--section-dusker-background-color);
    --cpt-surface-2: var(--section-dark-background-color);
    --cpt-surface-3: var(--section-darkest-background-color);
}

/* Context presets (optional, easy theming) */
.article-widget .carousel-pt {
    --cpt-surface-1: var(--section-dusker-background-color);
    --cpt-surface-2: var(--section-dark-background-color);
    --cpt-surface-3: var(--section-darkest-background-color);
}

.hero-wrapper .carousel-pt {
    --cpt-surface-1: var(--section-dusker-background-color);
    --cpt-surface-2: var(--section-dark-background-color);
    --cpt-surface-3: var(--section-darkest-background-color);
}

/*----------------------------------------------------*/
/* ==============================
Blurred Images on Cards
  ============================== */

.carousel-pt .blurred {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
    transition: opacity 0.4s ease-out;
}

.carousel-pt .blurred.hidden {
    opacity: 0;
}

.carousel-pt .full-res {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
}

.carousel-pt .full-res.loaded {
    opacity: 1;
}



/*-------------------------------------------------------------------------------------------*/


.carousel-pt-container {
    position: relative;
    -webkit-user-select: none;
    /* Safari / Chrome */
    -moz-user-select: none;
    /* Firefox          */
    -ms-user-select: none;
    /* Edge(legacy)     */
    user-select: none;
    /* Standard         */
    -webkit-user-drag: none;
    /* Safari / Chrome */
    -khtml-user-drag: none;
    /* Konqueror        */
    -moz-user-drag: none;
    /* Firefox          */
    -o-user-drag: none;
    /* Older Opera      */
    user-drag: none;
    /* Draft spec       */
}

@media (max-width: 825px) {
    .carousel-pt-container {
        padding: 0 0 0.5rem 0;
    }
}



.carousel-pt-img-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: clamp(227px, 27px + 50vw, 602px);
    overflow: hidden;
    background: transparent;
    container-type: size;
}


.carousel-pt-img-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

.carousel-pt-img {
    display: flex;
}

.carousel-pt-img img {
    flex: 1 1 auto;
}

.carousel-pt-grab-cursor {
    cursor: grab;
    cursor: -webkit-grab;
}

.carousel-pt-grab-cursor.grabbing {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

.carousel-pt-img-top-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: .75rem;
    margin: clamp(10px, 4.5455px + 0.9091vw, 15px);
    align-items: center;
    justify-content: center;
    z-index: 100;
}



.carousel-pt-img-bottom-container {
    position: absolute;
    transform: translateZ(0);
    /* Force new 3D context on mobile */
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 1.5rem;
    z-index: 100;
}

.carousel-pt-img-bottom-row-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    transform: translateZ(0);
    /* Force new 3D context on mobile */
}


@media (max-width: 825px) {

    .carousel-pt-img-bottom-container,
    .carousel-pt-img-top-container {
        margin: 1rem;
    }
}

/* ───────────────────────────────────────────────────────────
   2. Flickity carousel
─────────────────────────────────────────────────────────── */
/* ───────────────────────────────────────────────────────────
   Flickity carousel (FULL BLOCK — copy / replace)
─────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────
   Flickity carousel – FINAL BLOCK (replace existing rules)
─────────────────────────────────────────────────────────── */

/* Gallery wrapper (inherits 16:9 height from card) */
.carousel-pt-images {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-user-drag: none;
    user-drag: none;
}

/* Flickity injects its own transform */
.carousel-pt-slide {
    height: 100%;
    width: 100%;
    -webkit-user-drag: none;
    user-drag: none;

}

/* Each cell derives its height from its in-flow image */
.carousel-pt-slide-item {
    position: relative;
    width: 100%;
    height: 100%;
    margin-right: clamp(8px, 3.7333px + 1.0667vw, 16px);
    box-sizing: border-box;
    -webkit-user-drag: none;
    user-drag: none;
}


/* Main image fills the cell’s width, keeps natural ratio */
.carousel-pt-slide-item img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid var(--section-medium-background-color);
    object-fit: cover;
    object-position: center;
    -webkit-user-drag: none;
    user-drag: none;
}

/* Cut-outs scale *inside* the 16∶9 box */
.carousel-pt-slide-item .cutout-image {
    object-fit: contain;
}



.carousel-pt-slide-item .blurred {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}


/* Full-res image stays in flow so cell gets its height */
.carousel-pt-slide-item .full-res {
    z-index: 2;
}





/*-------------------------------------------------------------------------------------------*/


.carousel-pt-thumbnail-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 6px auto 0;
    box-sizing: border-box;
    gap: 1rem;
    padding: 1rem 0;
    background: transparent;
    border-radius: 1rem;
    -webkit-user-drag: none;
    user-drag: none;
}

.carousel-pt-thumbnail-wrapper {
    display: flex;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: clamp(7px, 4.3333px + 0.6667vw, 12px);
    padding: 2px 0;
    height: clamp(60px, -5.4545px + 10.9091vw, 120px);
    align-items: center;
}

.carousel-pt-thumbnail-wrapper.grabbing {
    cursor: grabbing;
}

.carousel-pt-thumbnail-wrapper::-webkit-scrollbar {
    display: none;
}

.carousel-pt-thumbnail {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16/9;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    box-sizing: border-box;
    background-color: var(--cpt-surface-1);
    border: 1px solid var(--section-medium-background-color);
    border-radius: 4px;
    -webkit-user-drag: none;
    user-drag: none;
}


.carousel-pt-thumbnail-wrapper {
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.carousel-pt-thumbnail img,
.carousel-pt-image,
.carousel-pt-slide-item img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.carousel-pt-thumbnail img {
    display: block;
    border-radius: 2.75px;
    width: 100%;
    height: 100%;
}

.carousel-pt-thumbnail.active {
    border: 2px solid var(--card-color, var(--site-color));
    opacity: .85;
}

@media (max-width: 600px) {
    .carousel-pt-thumbnail.active {
        border: 1px solid var(--card-color, var(--site-color));
    }
}

.carousel-pt-thumbnail:hover {
    opacity: 0.85;
    filter: brightness(1.1);
    /* Brighter on hover */
}

.carousel-pt-thumbnail.active:hover {
    opacity: .85;
    filter: none;
}




.carousel-pt .thumbnail-scroll-btn {
    background: var(--cpt-surface-2);
    border: 1px solid var(--section-light-background-color);
    color: var(--white-color-1);
    height: clamp(70px, 15.4545px + 9.0909vw, 120px);
    padding: 0 0.85rem;
    cursor: pointer;
    z-index: 10;
    border-radius: 2px;
    font-size: 3rem;
    box-sizing: border-box;
}

.carousel-pt .thumbnail-left {
    margin-right: 0;
}

.carousel-pt .thumbnail-right {
    margin-left: 0;
}






.carousel-pt-fullscreen-arrow.active {
    background-color: var(--card-color, var(--site-color));
    opacity: 1;
}



/* Mobile-specific styles */
@media (hover: hover) and (pointer: fine) {
    .carousel-pt .thumbnail-scroll-btn:hover {
        background-color: var(--card-color, var(--site-color));
    }

    .carousel-pt .thumbnail-scroll-btn.active {
        background-color: var(--cpt-surface-2);
    }
}

.carousel-pt .thumbnail-scroll-btn.inactive {
    background-color: var(--cpt-surface-2);
    opacity: 0.25;
    cursor: not-allowed;
}


@media (max-width: 1150px) {
    .carousel-pt .thumbnail-scroll-btn {
        display: none;
    }
}

/*-------------------------------------------------------------------------------------------*/


.carousel-pt-zoom-button {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    padding: .5rem .7rem;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
    z-index: 300;
    background: var(--cpt-surface-3);
    opacity: .6;
    border-radius: 4px;
    font-size: var(--ft-38-24);
}


@media (max-width: 825px) {

    .carousel-pt-zoom-button {
        font-size: var(--fm-24-20);
    }
}

.carousel-pt svg.enlarge-photo {
    width: 1em;
    height: 1em;
    color: #fff;
}

.carousel-pt .zoom-arrow-icon {
    stroke-width: 2px;
}

.carousel-pt-zoom-button:hover {
    background: var(--card-color, var(--site-color));
    opacity: 1
}


/*----------------------------------------------------------------
   Arrow Container
----------------------------------------------------------------*/
.carousel-pt .arrow-container-wrapper {
    position: absolute;
    bottom: 1rem;
    right: 1em;
    gap: .6rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.carousel-pt .carousel-pt-arrow-container {
    width: auto;
    height: auto;
    display: grid;
    transform: translateZ(0);
    z-index: 200;
    cursor: pointer;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;

}

/* When the zoom button is inside the arrow container wrapper,
   make it participate in the flex row so it sits to the left of the arrows. */
.carousel-pt .arrow-container-wrapper .carousel-pt-zoom-button {
    position: static;
    bottom: auto;
    left: auto;
    margin-right: .2rem;
}


.carousel-pt-circle-right,
.carousel-pt-circle-left {
    font-size: var(--ft-52-34);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    background-color: var(--cpt-surface-3);
    opacity: 0.6;
    display: flex;
    align-self: center;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}


@media (max-width: 825px) {

    .carousel-pt-circle-right,
    .carousel-pt-circle-left {
        font-size: var(--fm-34-32);
    }
}

.carousel-pt-circle-right {
    justify-self: end;
}

.carousel-pt-circle-left {
    justify-self: start;
}

.carousel-pt-circle-right svg,
.carousel-pt-circle-left svg {
    height: 50%;
    width: 50%;
    overflow-clip-margin: unset;
}


.carousel-pt-arrow-container.active .carousel-pt-circle-right,
.carousel-pt-arrow-container.active .carousel-pt-circle-left {
    background-color: var(--card-color, var(--site-color));
    opacity: 1;
}

.carousel-pt-arrow-container.right-arrow:hover .carousel-pt-circle-right,
.carousel-pt-arrow-container.left-arrow:hover .carousel-pt-circle-left {
    background-color: var(--cpt-surface-3);
}

.carousel-pt-arrow-container.active:hover .carousel-pt-circle-right,
.carousel-pt-arrow-container.active:hover .carousel-pt-circle-left {
    background-color: var(--card-color, var(--site-color));
}



@media (hover: hover) and (pointer: fine) {

    .carousel-pt-arrow-container.active .carousel-pt-circle-right,
    .carousel-pt-arrow-container.active .carousel-pt-circle-left {
        background-color: var(--cpt-surface-3);
    }

    .carousel-pt-arrow-container.right-arrow:hover .carousel-pt-circle-right,
    .carousel-pt-arrow-container.left-arrow:hover .carousel-pt-circle-left {
        background-color: var(--card-color, var(--site-color));
        opacity: 1;
    }

    .carousel-pt-arrow-container.active:hover .carousel-pt-circle-right,
    .carousel-pt-arrow-container.active:hover .carousel-pt-circle-left {
        background-color: var(--cpt-surface-3);
    }

}












/*-------------------------------------------------------------------------------------------*/
/* NEW FOR FULLSCREEN OVERLAY             */
/*-------------------------------------------------------------------------------------------*/


.carousel-pt-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(8, 8, 8, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 98000;
    overflow: hidden;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.carousel-pt-fullscreen-overlay.open {
    display: flex;
}

.carousel-pt-fullscreen-close {
    position: absolute;
    top: clamp(17px, -1.6px + 3.1vw, 48px);
    right: clamp(5px, -20.8px + 4.3vw, 48px);
    border: none;
    background: transparent;
    color: var(--white-color-1);
    font-size: var(--ft-40-24);
    cursor: pointer;
    z-index: 1000;
}

.carousel-pt-fullscreen-close svg {
    height: 1em;
    width: 1em;
    color: var(--white-color-2);
}

.carousel-pt-fullscreen-close svg:hover {
    color: var(--accent-color-3);
}



.carousel-pt-fullscreen-counter {
    position: absolute;
    top: clamp(17px, -1.6px + 3.1vw, 48px);
    left: clamp(5px, -20.8px + 4.3vw, 48px);
    color: var(--white-color-1);
    font-family: var(--identity-font);
    font-weight: 400;
    font-size: var(--ft-24-16);
    z-index: 1000;
    background-color: rgba(44, 54, 56, 0.4);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.carousel-pt-fullscreen-image {
    width: 100%;
    max-width: 1600px;
    aspect-ratio: 1.625 / 1;
    height: auto;
    object-fit: contain;
    display: block;
    cursor: grab;
}

.carousel-pt-fullscreen-overlay.grabbing .carousel-pt-fullscreen-image {
    cursor: grabbing
}


@media (max-width: 600px) {
    .carousel-pt-fullscreen-counter {
        font-size: var(--fm-16-14);
    }
}


/* ---------------------------------------------------------
   carousel-pt Fullscreen Arrow — extracted styles
--------------------------------------------------------- */

.carousel-pt-fullscreen-arrow {
    position: absolute;
    color: var(--white-color-1);
    z-index: 200;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: clamp(3.455rem, 1.273rem + 4vw, 5.455rem);
    /* 1150 - 600 & 60 - 30 */
    width: 1em;
    height: 1em;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--cpt-surface-2);
    opacity: .6;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 600px) {
    .carousel-pt-fullscreen-arrow {
        font-size: clamp(3rem, 1.4rem + 4vw, 3.8rem);
        /* 600- 400  & 38 - 30 */
    }
}

.carousel-pt-fullscreen-arrow svg {
    width: 75%;
    height: 75%;
}

.carousel-pt-fullscreen-arrow.left {
    left: clamp(3px, -15.5455px + 3.0909vw, 20px);
    /* 1150 – 600 */
}

.carousel-pt-fullscreen-arrow.right {
    right: clamp(3px, -15.5455px + 3.0909vw, 20px);
}

.carousel-pt-fullscreen-arrow.active {
    background-color: var(--card-color, var(--site-color));
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {

    .carousel-pt-fullscreen-arrow:hover {
        background-color: var(--card-color, var(--site-color));
        opacity: 1;
    }

    .carousel-pt-fullscreen-arrow.active {
        background-color: var(--cpt-surface-3);
    }

}

.carousel-pt-fullscreen-arrow.inactive {
    background-color: var(--cpt-surface-3);
    opacity: 0.25;
    cursor: not-allowed;
}


/************************************************************************************/
/*    COMPARE (VAULT) TOGGLE — EM-BASED, SCALE VIA .compare-toggle { font-size }   */
/************************************************************************************/


.carousel-pt .carousel-images .compare-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    box-sizing: border-box;
    z-index: 1000;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    overflow: hidden;
    font-size: var(--ft-21-16);
}



/* Top‑right overlay container in thumbnails */
.carousel-pt-thumbimg-top-right-container {
    position: absolute;
    top: .4rem;
    right: .4rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scale the static toggle for thumbnails (EM-based like dexa/badge) */
.carousel-pt-thumbimg-top-right-container .compare-toggle {
    font-size: clamp(6px, 3.8667px + 0.5333vw, 10px);
}


/************************************************************************************/
/*   Overlay Text
/************************************************************************************/

/* reserve a safe zone on the right for arrows/zoom */
.carousel-pt-img-container {
    --cpt-controls-safe-right: clamp(112px, 3vw + 82px, 168px);
}

/* each slide needs a positioning context for the gradient strip */
.carousel-pt-slide-item {
    position: relative;
}

/* full-width bottom gradient on ALL slides, but only when any image has text */
.carousel-pt-container.has-bot-text .carousel-pt-slide-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(to top,
            rgba(8, 8, 8, .88) 0%,
            rgba(8, 8, 8, .72) 48%,
            rgba(8, 8, 8, 0) 100%);
    z-index: 160;
    /* under text & controls */
    pointer-events: none;
    /* never blocks clicks */
}

/* bottom text block — stays readable and never intrudes into controls */
.carousel-pt-bot-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: min(65%, calc(100% - var(--cpt-controls-safe-right, 0px)));
    max-width: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: left;
    text-transform: capitalize;

    font-family: var(--identity-font);
    font-size: var(--ft-36-22);
    line-height: 1.25;
    letter-spacing: -.5px;
    font-weight: bold;
    color: var(--white-color-1);

    background: transparent;
    /* gradient provided by ::after */
    border-radius: 0 8px 8px 0;
    z-index: 190;
    /* above gradient, below controls */
}

/* link hover (unchanged) */
a.carousel-pt-bot-text {
    text-decoration: none;
}

a.carousel-pt-bot-text:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 1.25px;
    text-underline-offset: 2px;
}

/* mobile tuning */
@media (max-width:825px) {
    .carousel-pt-container.has-bot-text .carousel-pt-slide-item::after {
        height: 46%;
    }

    .carousel-pt-bot-text {
        padding: 1.25rem;
    }
}


/*-----------------------------------------------------------------------------------------
   Editors Choice &   Rating
-----------------------------------------------------------------------------------------*/

/* Root font-size variables per layout type */
.layout-wide .carousel-pt {
    --dexa-size: var(--ft-42-27);
}

.hero-widget-full .carousel-pt,
.layout-full .carousel-pt {
    --dexa-size: var(--ft-40-27);
}

.hero-widget-side .carousel-pt,
.layout-side .carousel-pt {
    --dexa-size: var(--font-size-36px);
}

@media (max-width: 1150px) {

    .layout-wide .carousel-pt,
    .layout-full .carousel-pt,
    .hero-widget-side .carousel-pt,
    .layout-side .carousel-pt {
        --dexa-size: var(--ft-42-27);
    }
}

@media (max-width: 600px) {

    .layout-wide .carousel-pt,
    .layout-full .carousel-pt,
    .hero-widget-side .carousel-pt,
    .layout-side .carousel-pt {
        --dexa-size: var(--fm-27-20)
    }
}

.carousel-pt .carousel-images .dexa {
    font-size: var(--dexa-size);
}

.carousel-pt .carousel-images .editors-square-badge {
    font-size: calc(var(--dexa-size) * 0.55);
}

.carousel-pt .carousel-images .editors-square-badge {
    position: relative;
    z-index: 1000;
    box-sizing: border-box;
    min-inline-size: max-content;
}

/*-----------------------------------------------------------------------------------------
   Thumbnail
-----------------------------------------------------------------------------------------*/


.carousel-pt-thumbimg-top-container {
    position: absolute;
    top: .4rem;
    left: .4rem;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    gap: .35rem;
    z-index: 1;
}


.carousel-pt-thumbimg-top-container .dexa {
    font-size: clamp(6px, 3.8667px + 0.5333vw, 10px) !important;
    min-inline-size: max-content;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
    -moz-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important;
}

.carousel-pt-thumbimg-top-container .editors-square-badge {
    font-size: calc(clamp(6px, 3.8667px + 0.5333vw, 10px) * 0.55) !important;
    position: relative;
    z-index: 1000;
    box-sizing: border-box;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
    -moz-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important;
}






/* ============================================================================
   partial_carousel.css — APPEND THESE RULES AT THE END OF THE FILE
   Gradient hover theming for carousel UI (thumb buttons, arrows, zoom, fullscreen)
   Uses:
     --interactive-start-color / --interactive-end-color
   Defaults to site gradient; JS sets per-slide/category overrides.
============================================================================= */

/* sensible defaults (overridden per item/overlay by JS) */
.carousel-pt-container,
#carousel-pt-fullscreen-overlay {
    --interactive-start-color: var(--site-start-color);
    --interactive-end-color: var(--site-end-color);
}

/* Zoom button (in-card) */
.carousel-pt-zoom-button:hover {
    background: linear-gradient(135deg,
            var(--interactive-start-color),
            var(--interactive-end-color));
    opacity: 1;
}

/* Main left/right arrows (in-card) — fine pointer hover shows gradient */
@media (hover: hover) and (pointer: fine) {

    .carousel-pt-arrow-container.right-arrow:hover .carousel-pt-circle-right,
    .carousel-pt-arrow-container.left-arrow:hover .carousel-pt-circle-left {
        background: linear-gradient(135deg,
                var(--interactive-start-color),
                var(--interactive-end-color));
        opacity: 1;
    }

    /* keep the existing UX rule: active+hover returns to dark */
    .carousel-pt-arrow-container.active:hover .carousel-pt-circle-right,
    .carousel-pt-arrow-container.active:hover .carousel-pt-circle-left {
        background-color: var(--section-darkest-background-color);
    }
}

/* Thumbnail strip scroll buttons */
.carousel-pt .thumbnail-scroll-btn:hover:not(.inactive) {
    background: linear-gradient(135deg,
            var(--interactive-start-color),
            var(--interactive-end-color));
}

/* Fullscreen overlay arrows */
.carousel-pt-fullscreen-arrow:hover,
.carousel-pt-fullscreen-arrow.active {
    background: linear-gradient(135deg,
            var(--interactive-start-color),
            var(--interactive-end-color)) !important;
    opacity: 1;
}































/************************************************************************************/
/*                               8) WRAPPER-DETAILS                                 */
/*          CHANGED: .detail-container removed absolute positioning                 */
/************************************************************************************/
/* New/Active */
.wrapper-details {
    flex: 0 0 auto;
    /* Added so .wrapper-details is no longer stacked absolutely */
    width: 100%;
    height: auto;
    overflow: hidden;
    z-index: 1000;
}

.detail-container {
    position: relative;
    /* or relative with a small z-index, if truly needed */
    display: flex;
    /* Removed position:absolute + bottom:0 */
    flex-direction: column;
    flex-wrap: wrap;
    box-sizing: border-box;
    z-index: 3000;
    padding: .65rem 1.65rem 1.35rem 1.65rem;
    font-family: var(--identity-font);
    letter-spacing: 0px;
    text-align: left;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    pointer-events: auto;
}



/************************************************************************************/
/*                              9) DETAIL CONTAINER TEXT                             */
/*     (Mostly unchanged – same code for brand-text, sub-text, etc.)                */
/************************************************************************************/
.detail-title-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    flex-wrap: wrap;
    width: 100%;
    column-gap: 1rem;
    justify-content: space-between;
}

.detail-title {
    display: flex;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(var(--font-size-24px), 1.325rem + 1.143vw, var(--font-size-26px));
    /*1000 - 825 */
}


.slideShow-brand-logo {
    position: relative !important;
    z-index: 9999;
    height: calc(1em * 1.1);
    /* exactly the line-height of the title */
    filter: brightness(0) invert(1);
}


.detail-container .brand-text {
    font-weight: var(--font-weight7);
    letter-spacing: -.5px !important;
    font-family: var(--identity-font);
    color: var(--white-color-1);
    line-height: 1.4;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.slide-bottom-text {
    margin-bottom: .55rem;
}

.detail-container .slide-sub-text {
    font-size: clamp(var(--font-size-18px), 0.779rem + 1.143vw, var(--font-size-20px));
    /*1000 - 825 */
    font-weight: var(--font-weight4);
    letter-spacing: -.5px !important;
    font-family: var(--identity-font);
    color: var(--white-color-1);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
    margin-right: 1rem;
}

.learn-more-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    width: auto;
    margin: 0;
    margin-right: .5rem;
    padding: 0;
    font-size: clamp(var(--font-size-17px), 1.117rem + 0.571vw, var(--font-size-18px));
    /*1000 - 825 */
    color: var(--white-color-1);
    text-decoration: none;
    text-align: left;
    font-weight: 400;
    letter-spacing: -.5px;
    position: relative;
}

.learn-more-link::after {
    content: '\276F';
    position: relative;
    right: auto;
    top: auto;
    font-family: var(--identity-font);
    font-weight: 400;
    transform: none;
    color: var(--white-color-1);
    margin-left: .5rem;
    line-height: .9;
    font-size: clamp(var(--font-size-17px), 1.117rem + 0.571vw, var(--font-size-18px));
    /*1000 - 825 */
}



.slide-anchor:hover .detail-container .brand-text,
.slide-anchor:hover .detail-container .slide-sub-text,
.slide-anchor:hover .detail-container .learn-more-link {
    text-decoration-line: underline;
    text-decoration-thickness: 1.25px;
    text-decoration-color: var(--white-color-1);
    text-underline-offset: 2px;
}




@media (max-width: 900px) {
    .detail-container {
        padding: .75rem 1.5rem 1.0rem 1.5rem;
    }

    .detail-container h2,
    .detail-container .brand-text {
        font-size: var(--ftm-24-21)
    }


    .detail-container .slide-sub-text {
        font-size: var(--ftm-18-16)
    }

    .learn-more-link,
    .learn-more-link::after {
        font-size: var(--ftm-17-15)
    }
}

@media (max-width: 600px) {
    .text-line {
        display: inline-flex;
        flex-wrap: wrap;
        text-overflow: ellipsis;
        white-space: wrap;
    }

    .detail-container h2,
    .detail-container .brand-text {
        font-size: var(--fm-21-19)
    }


    .detail-container .slide-sub-text {
        font-size: var(--fm-16-15)
    }

    .learn-more-link,
    .learn-more-link::after {
        font-size: var(--fm-15-14)
    }
}


/************************************************************************************/
/*                                   10) RATING BAR                                 */
/************************************************************************************/
.rating-bar {
    position: relative;
    width: calc(100% - .1rem) !important;
    height: clamp(var(--font-size-23px), 18.2857px + 0.5714vw, var(--font-size-24px)) !important;
    background-color: #646464;
    border-radius: 2px;
    overflow: hidden;
    margin-left: 0rem !important;
    margin-bottom: .1rem;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.rating-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(180deg, var(--site-start-color), var(--site-end-color));
    position: relative;
    transition: width 0.5s ease-in-out;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 2px 0 0 2px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0% 100%);
}

.rating-separators {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 1;
}

.separator {
    width: 1px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    transform: rotate(25deg);
    transform-origin: center;
    flex-shrink: 0;
    box-shadow: inset 1px 0 3px rgba(255, 255, 255, 0.2),
        inset -1px 0 3px rgba(0, 0, 0, 0.6);
}

.detail-container p.rating-text {
    text-align: left;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
    margin-right: 0.5rem;
}

.rating-value {
    display: none;
}

.external-rating-value {
    font-size: var(--font-size-13px);
    color: var(--white-color-2);
    margin-left: 0.3rem;
    display: inline;
}

@keyframes slideShow {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (max-width: 900px) {
    .rating-bar {
        height: clamp(var(--font-size-20px), 16.2353px + 0.9412vw, var(--font-size-23px)) !important;
    }
}






/*-------------------------------------------------------------------------------------------*/
/* CTA Buttons — show only for the hovered slide (not the whole container)                   */
/* REPLACE your existing .carousel-pt-cta-container block + hover rule with this block       */
/*-------------------------------------------------------------------------------------------*/

.carousel-pt-cta-container {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    display: flex;
    flex-direction: row;
    gap: .65rem;
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {

    /* Only reveal CTAs for the slide that is actually under the pointer */
    .carousel-pt-slide-item:hover>.carousel-pt-cta-container,
    .carousel-pt-slide-item:focus-within>.carousel-pt-cta-container {
        opacity: 1;
        pointer-events: auto;
    }
}

.cpt-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    padding: .8rem 1.1rem;
    text-transform: capitalize;
    font-size: var(--font-size-15px);
    border-radius: 4px;
    font-weight: 700;
    font-family: var(--identity-font);
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, var(--interactive-start-color), var(--interactive-end-color));
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.cpt-cta-btn:hover {
    filter: brightness(1.06);
}

.cpt-cta-src {
    order: 0;
}

.cpt-cta-alink {
    order: 1;
}

@media (max-width: 1150px) {
    .carousel-pt-cta-container {
        display: none !important;
    }

    .carousel-pt-cta-mask {
        position: fixed;
        inset: 0;
        background: rgba(10, 10, 12, .7);
        z-index: 1100;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }

    .carousel-pt-container.cta-open .carousel-pt-cta-mask {
        opacity: 1;
        pointer-events: auto;
    }

    .carousel-pt-cta-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translateY(100%);
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        padding: 4rem 2rem;
        background: var(--section-dark-background-color);
        border-top: 1px solid var(--section-medium-background-color);
        box-shadow: 0 -8px 40px rgba(0, 0, 0, .5);
        z-index: 1200;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        will-change: transform;
        transition: transform .25s ease;
    }

    .carousel-pt-container.cta-open .carousel-pt-cta-sheet {
        transform: translateY(0);
    }

    .carousel-pt-cta-sheet .cpt-cta-btn {
        min-width: 0;
        box-sizing: border-box;
        padding: 1rem 1.25rem;
        font-size: var(--ft-17-15);
        border-radius: 4px;
    }
}

@media (min-width: 1151px) {
    .carousel-pt-cta-sheet {
        display: none !important;
    }

    .carousel-pt-cta-mask {
        display: none !important;
    }
}

.cpt-cta-btn .cpt-cta-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: .5em;
    vertical-align: -.18em;
}