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


.egXXL-carousel-container {
    margin-top: 2rem;
    margin-bottom: clamp(1.182rem, 0.488rem + 1.273vw, 1.818rem);
    padding: 0 1rem 0.5rem 1rem;
    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) {
    .egXXL-carousel-container {
        padding: 0 0 0.5rem 0;
    }
}



.egXXL-card-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;
}


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


.egXXL-card-grab-cursor {
    cursor: grab;
    cursor: -webkit-grab;
}

.egXXL-card-grab-cursor.grabbing {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

.egXXL-card-img-top-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: .75rem;
    margin: clamp(8px, 1.4545px + 1.0909vw, 14px);
    align-items: center;
    justify-content: center;
    z-index: 100;
}



.egXXL-card-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: clamp(8px, 1.4545px + 1.0909vw, 14px);
    z-index: 100;
}

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




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

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

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

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

}

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

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

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

/* The slide item must be the positioning context */
.egXXL-card-carousel-slide-item {
    position: relative;
    /* add */
}

/* Pixel-perfect overlay: pin blur + full-res into the same box */
.egXXL-card-carousel-slide-item .blurred,
.egXXL-card-carousel-slide-item .full-res {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Keep the blur underneath and untouchable */
.egXXL-card-carousel-slide-item .blurred {
    z-index: 1;
    pointer-events: none;
}

/* Full-res above */
.egXXL-card-carousel-slide-item .full-res {
    z-index: 2;
}



.egXXL-card-img-learn-more {
    position: absolute;
    z-index: 2000;
    bottom: 1rem;
    right: 1rem;
    font-size: var(--font-size-13px);
    line-height: var(--font-size-13px);
    color: var(--white-color-2);
    font-family: var(--identity-font);
    font-weight: var(--font-weight4) !important;
    letter-spacing: var(--letter-spacing-regular);
    text-transform: capitalize;
    cursor: pointer;
    opacity: 0;
}

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

    .egXXL-card-carousel-images-link:hover~.egXXL-card-img-learn-more,
    .egXXL-card-img-learn-more:hover {
        opacity: 1;
    }
}

.egXXL-card-carousel-images-link {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
    -webkit-user-drag: none;
    user-drag: none;
}




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


.egXXL-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;
}

.egXXL-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;
}

.egXXL-thumbnail-wrapper.grabbing {
    cursor: grabbing;
}

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

.egXXL-thumbnail {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16/10;
    max-height: clamp(60px, -5.4545px + 10.9091vw, 120px);
    flex-shrink: 0;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    box-sizing: border-box;
    background-color: var(--egxxl-surface-6);
    border: 1px solid var(--egxxl-surface-1);
    border-radius: 4px;
    -webkit-user-drag: none;
    user-drag: none;
}

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

.egXXL-thumbnail img,
.egXXL-card-carousel-image,
.egXXL-card-carousel-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;
}


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

.egXXL-thumbnail.active {
    border: 2px solid var(--card-color);
    opacity: .85;
}

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

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

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


.thumbnail-scroll-btn {
    background: var(--egxxl-surface-2);
    border: 1px solid var(--egxxl-surface-1);
    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;
}

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

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






.egXXL-fullscreen-arrow.active {
    background-color: var(--card-color);
    opacity: 1;
}



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

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

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


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

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


.egXXL-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(--egxxl-surface-3);
    opacity: .6;
    border-radius: 4px;
    font-size: var(--ft-38-24);
    ;
}


@media (max-width: 825px) {

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

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

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

.egXXL-zoom-button:hover {
    background: var(--card-color);
    opacity: 1
}


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

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

}


.egXXL-card-carousel-circle-right,
.egXXL-card-carousel-circle-left {
    font-size: var(--ft-56-38);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    background-color: var(--egxxl-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) {

    .egXXL-card-carousel-circle-right,
    .egXXL-card-carousel-circle-left {
        font-size: var(--fm-38-32);
    }
}

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

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

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


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

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

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



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

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

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

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

}







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

.egXXL-card {
    --xxl-dexa-size: var(--ft-40-27);
}

.layout-wide .egXXL-card .dexa {
    --xxl-dexa-size: var(--ft-42-27);
}

.layout-full .egXXL-card .dexa {
    --xxl-dexa-size: var(--ft-40-27);
}

.hero-widget-side .egXXL-card .dexa,
.layout-side .egXXL-card .dexa {
    --xxl-dexa-size: var(--font-size-36px);
}

@media (max-width: 1150px) {

    .egXXL-card .dexa,
    .layout-wide .egXXL-card .dexa,
    .layout-full .egXXL-card .dexa,
    .layout-side .egXXL-card .dexa {
        --xxl-dexa-size: var(--ft-42-27);
    }
}

@media (max-width: 600px) {

    .egXXL-card,
    .layout-wide .egXXL-card .dexa,
    .layout-full .egXXL-card .dexa,
    .layout-side .egXXL-card .dexa {
        --xxl-dexa-size: var(--fm-27-20)
    }
}

.egXXL-card .dexa {
    font-size: var(--xxl-dexa-size)
}

.egXXL-card .editors-square-badge {
    font-size: calc(var(--xxl-dexa-size) * 0.55);
    position: relative;
    z-index: 1000;
    box-sizing: border-box;
    min-inline-size: max-content;
}


.egXXL-card-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;
}




.egXXL-card-thumbimg-top-container .dexa {
    font-size: clamp(6px, 3.3333px + 0.6667vw, 11px) !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;
}

.egXXL-card-thumbimg-top-container .editors-square-badge {
    font-size: calc(clamp(6px, 3.3333px + 0.6667vw, 11px) * 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;
}



.egXXL-card-carousel-slide-item .compare-toggle {
    position: absolute;
    top: clamp(8px, 1.4545px + 1.0909vw, 14px);
    right: clamp(8px, 1.4545px + 1.0909vw, 14px);
    box-sizing: border-box;
    z-index: 1000;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    overflow: hidden;
    font-size: var(--ft-21-16);
}

.egXXL-thumbnail-container .compare-toggle {
    position: absolute;
    top: .4rem;
    right: .4rem;
    box-sizing: border-box;
    z-index: 1000;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    overflow: hidden;
    font-size: clamp(6px, 3.3333px + 0.6667vw, 11px);
}



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


.egXXL-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;
}

.egXXL-fullscreen-overlay.open {
    display: flex;
}

.egXXL-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;
}

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

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



.egXXL-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;
}

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

.egXXL-fullscreen-overlay.grabbing .egXXL-fullscreen-image {
    cursor: grabbing
}


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






/* ---------------------------------------------------------
   egXXL Fullscreen Arrow — extracted styles
--------------------------------------------------------- */

/* Base egXXL arrow */
.egXXL-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(--egxxl-surface-2);
    opacity: .6;
    -webkit-tap-highlight-color: transparent;
}

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

/* Icon sizing */
.egXXL-fullscreen-arrow svg {
    width: 75%;
    height: 75%;
}

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

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

/* Active state */
.egXXL-fullscreen-arrow.active {
    background-color: var(--card-color);
    opacity: 1;
}

/* Hover styles (pointer capable devices) */
@media (hover: hover) and (pointer: fine) {

    .egXXL-fullscreen-arrow:hover {
        background-color: var(--card-color);
        opacity: 1;
    }

    .egXXL-fullscreen-arrow.active {
        background-color: var(--egxxl-surface-3);
    }

}

/* Inactive state */
.egXXL-fullscreen-arrow.inactive {
    background-color: var(--egxxl-surface-3);
    opacity: 0.25;
    cursor: not-allowed;
}