.pdp-preview__thumbnails {
    --pdp-preview-thumbnails-width: 80px;
    --pdp-preview-thumbnails-gap: 8px;
    --pdp-preview-thumbnail-size: 70px;
    --pdp-preview-thumbnails-max-height: 462px;

    display: flex;
    float: left;
    flex-direction: column;
    gap: var(--pdp-preview-thumbnails-gap);
    width: var(--pdp-preview-thumbnails-width);
    max-height: var(--pdp-preview-thumbnails-max-height);
    overflow-y: auto;
}

.pdp-preview__thumbnail {
    width: var(--pdp-preview-thumbnail-size);
    height: var(--pdp-preview-thumbnail-size);
    flex-shrink: 0;
    padding: 0;
    background-color: #F9F7F4;
    border: 2px solid rgba(37, 43, 66, 0.10);
    cursor: pointer;
}

.pdp-preview__thumbnail.is-selected {
    border-color: #54BA82;
}

.pdp-preview__thumbnail-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    container-type: inline-size;
    overflow: hidden;
}

.pdp-preview__thumbnail-media img {
    max-width: 100%;
    max-height: 100%;
}

.pdp-preview__thumbnail[data-product-preview-key="front"]
    [data-product-preview-orientation="landscape"]
    .pdp-preview__thumbnail-image,
.pdp-preview__thumbnail[data-product-preview-key="foil_animation"]
    .pdp-preview__thumbnail-media[data-product-preview-orientation="landscape"] .pdp-preview__thumbnail-image{
    max-width: 80.5%;
}

.pdp-preview__thumbnail[data-product-preview-key="front"]
    [data-product-preview-orientation="portrait"]
    .pdp-preview__thumbnail-image,
.pdp-preview__thumbnail[data-product-preview-key="foil_animation"]
    .pdp-preview__thumbnail-media[data-product-preview-orientation="portrait"] .pdp-preview__thumbnail-image{
    max-height: 82.2%;
}

.pdp-preview__thumbnail-media[data-product-preview-composition="angled"][data-product-preview-orientation="portrait"]
    .pdp-preview__thumbnail-image,
.pdp-preview__static[data-product-preview-composition="angled"][data-product-preview-orientation="portrait"]
    .pdp-preview__static-image {
        transform-origin: center center;
        transform:
            translate(-1.972630%, -10.691021%)
            rotateZ(23.831492deg)
            skewX(-14.860494deg)
            scale(1.142143, 0.881163)
            perspective(66.666667cqw)
            rotateY(-3.817033deg)
            rotateX(6.267639deg);
}

.pdp-preview__thumbnail-media[data-product-preview-composition="angled"][data-product-preview-orientation="landscape"]
    .pdp-preview__thumbnail-image,
.pdp-preview__static[data-product-preview-composition="angled"][data-product-preview-orientation="landscape"]
    .pdp-preview__static-image {
        transform-origin: center center;
        transform:
            translate(4.305781%, -6.533071%)
            rotateZ(-17.103516deg)
            skewX(15.983360deg)
            scale(1.025660, 0.861146)
            perspective(66.666667cqw)
            rotateY(2.950547deg)
            rotateX(4.729807deg);
}

.pdp-preview__thumbnail-media[data-product-preview-composition="angled"][data-product-preview-orientation="square"]
    .pdp-preview__thumbnail-image,
.pdp-preview__static[data-product-preview-composition="angled"][data-product-preview-orientation="square"]
    .pdp-preview__static-image {
        width: 100%;
        height: 100%;
        transform-origin: center center;
        transform:
            translate(-4.854002%, -6.450070%)
            rotateZ(25.210363deg)
            skewX(-13.459195deg)
            scale(0.828904, 0.716933)
            perspective(66.666667cqw)
            rotateY(-2.848709deg)
            rotateX(5.528775deg);
}

/* TODO(extra MIPs): Tune Back base/overlay ratios independently after final assets are approved. */
.pdp-preview__thumbnail-media[data-product-preview-composition="back"] .pdp-preview__thumbnail-image,
.pdp-preview__static[data-product-preview-composition="back"] .pdp-preview__static-image {
    max-width: 84%;
    max-height: 84%;
}

.pdp-preview__thumbnail-media[data-product-preview-composition="back"][data-product-preview-back-source="sample"][data-product-preview-orientation="portrait"]
    .pdp-preview__thumbnail-image,
.pdp-preview__static[data-product-preview-composition="back"][data-product-preview-back-source="sample"][data-product-preview-orientation="portrait"]
    .pdp-preview__static-image {
        max-width: 100%;
        max-height: 100%;
        transform-origin: center center;
        transform:
            translate(-0.071024%, 5.948640%)
            scale(0.771318, 0.770401);
}

.pdp-preview__thumbnail-media[data-product-preview-composition="back"][data-product-preview-back-source="static"][data-product-preview-orientation="portrait"]
    .pdp-preview__thumbnail-image,
.pdp-preview__static[data-product-preview-composition="back"][data-product-preview-back-source="static"][data-product-preview-orientation="portrait"]
    .pdp-preview__static-image {
        max-width: 100%;
        max-height: 100%;
        transform-origin: center center;
        transform:
            translateY(6%)
            scale(0.732965, 0.742667);
}

.pdp-preview__thumbnail[data-product-preview-key="back"]
    [data-product-preview-orientation="portrait"].is-folded
    .pdp-preview__thumbnail-image,
.pdp-preview__static[data-product-preview-composition="back"][data-product-preview-orientation="portrait"].is-folded
    .pdp-preview__static-image {
    transform:
        translate(-0.071024%, 5.948640%)
        scale(0.745, 0.745)
        skewY(-2.5deg);
}

.pdp-preview__thumbnail-media[data-product-preview-composition="back"][data-product-preview-back-source="sample"][data-product-preview-orientation="landscape"]
    .pdp-preview__thumbnail-image,
.pdp-preview__static[data-product-preview-composition="back"][data-product-preview-back-source="sample"][data-product-preview-orientation="landscape"]
    .pdp-preview__static-image {
        max-width: 100%;
        max-height: 100%;
        transform-origin: center center;
        transform:
            translate(0.115260%, 7.985977%)
            scale(0.771093, 0.772287);
}

.pdp-preview__thumbnail-media[data-product-preview-composition="back"][data-product-preview-back-source="static"][data-product-preview-orientation="landscape"]
    .pdp-preview__thumbnail-image,
.pdp-preview__static[data-product-preview-composition="back"][data-product-preview-back-source="static"][data-product-preview-orientation="landscape"]
    .pdp-preview__static-image {
        max-width: 100%;
        max-height: 100%;
        transform-origin: center center;
        transform:
            translate(0.166667%, 8.057090%)
            scale(0.743333, 0.733886);
}

.pdp-preview__thumbnail[data-product-preview-key="back"]
    [data-product-preview-orientation="landscape"].is-folded
    .pdp-preview__thumbnail-image,
.pdp-preview__static[data-product-preview-composition="back"][data-product-preview-orientation="landscape"].is-folded
    .pdp-preview__static-image {
    transform:
        translate(1.115260%, 7.8%)
        scale(0.725, 0.725)
        skewX(2.5deg);
}

.pdp-preview__thumbnail-media[data-product-preview-composition="back"][data-product-preview-back-source="sample"][data-product-preview-orientation="square"]
    .pdp-preview__thumbnail-image,
.pdp-preview__static[data-product-preview-composition="back"][data-product-preview-back-source="sample"][data-product-preview-orientation="square"]
    .pdp-preview__static-image {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        transform-origin: center center;
        transform:
            translate(0.096224%, 5.629557%)
            scale(0.5475);
}

.pdp-preview__thumbnail-media[data-product-preview-composition="back"][data-product-preview-back-source="static"][data-product-preview-orientation="square"]
    .pdp-preview__thumbnail-image,
.pdp-preview__static[data-product-preview-composition="back"][data-product-preview-back-source="static"][data-product-preview-orientation="square"]
    .pdp-preview__static-image {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        transform-origin: center center;
        transform:
            translate(0.133333%, 5.666667%)
            scale(0.530667);
}

.pdp-preview__thumbnail[data-product-preview-key="front"]
    [data-product-preview-orientation="landscape"].is-folded
    .pdp-preview__thumbnail-image {
    max-width: 82%;
    margin-left: -2%;
    transform: skewX(-2.5deg);
}

.pdp-preview__thumbnail[data-product-preview-key="front"]
    [data-product-preview-orientation="portrait"].is-folded
    .pdp-preview__thumbnail-image {
    margin-top: 2.2%;
    transform: skewY(2.5deg);
}

.pdp-preview__thumbnail[data-product-preview-key="front"]
    [data-product-preview-orientation="landscape"].is-folded::after,
.pdp-preview__thumbnail[data-product-preview-key="front"]
    [data-product-preview-orientation="portrait"].is-folded::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    pointer-events: none;
}

.pdp-preview__thumbnail[data-product-preview-key="front"]
    [data-product-preview-orientation="landscape"].is-folded::after {
    background-image: url("https://d16q1w9dn6bp9c.cloudfront.net/prod/ucd/die_cuts/elevated/H-Folded-Shadow.png?t=260423");
}

.pdp-preview__thumbnail[data-product-preview-key="front"]
    [data-product-preview-orientation="portrait"].is-folded::after {
    background-image: url("https://d16q1w9dn6bp9c.cloudfront.net/prod/ucd/die_cuts/elevated/V-Folded-Shadow.png?t=260423");
}

/* Cardstock-only styles */
.pdp-preview__static[data-product-preview-composition="foil_cardstock"] .pdp-preview__static-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-preview__thumbnail-overlay,
.pdp-preview__static-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.pdp-preview__static {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: inline-size;
    background: #f9f7f4;
    pointer-events: none;
    overflow: hidden;
}

.pdp-preview__static-image {
    max-width: 100%;
    max-height: 100%;
}

.pdp-preview__static-overlay {
    object-fit: cover;
}

#details_preview.pdp-preview--static-active [data-pz-layer] {
    display: none !important;
}

#details_preview.pdp-preview--static-active .pdp-preview__static-image,
#details_preview.pdp-preview--static-active .pdp-preview__static-overlay:not(.hideme) {
    display: block !important;
}

#details_preview.pdp-preview--static-active .subtitling,
#details_preview.pdp-preview--static-active #lightning_wrapper,
#details_preview.pdp-preview--static-active .pz-zoom-hint-trigger {
    display: none !important;
}

#details.extra-mips-preview {
    --extra-mips-preview-size: 462px;
}

#details.extra-mips-preview .details_left {
    width: var(--extra-mips-preview-size);
}

#details.extra-mips-preview #details_preview {
    width: var(--extra-mips-preview-size);
    height: var(--extra-mips-preview-size);
}

@media (min-width: 1420px) {
    .pdp-preview__thumbnails {
        --pdp-preview-thumbnails-width: 110px;
        --pdp-preview-thumbnails-gap: 12px;
        --pdp-preview-thumbnail-size: 100px;
        --pdp-preview-thumbnails-max-height: 663px;
    }
    .details_page.STI #main_content_wrapper,
    .details_page.STI #details {
        width: 1258px;
    }
    .details_page.STI #recommendations {
        width: 1258px;
        margin: 0 auto;
    }
    #details.extra-mips-preview {
        --extra-mips-preview-size: 663px;
    }
}

/* PLA bottom_thumbs* at 1258px (1420–1899). This sheet loads only for extra-MIPs variant. */
@media (min-width: 1420px) and (max-width: 1899px) {
    /* html + .details_page: one step above main1440’s .details_page #details #… */
    html .details_page #details.extra-mips-preview #category_thumb_wrapper.category_thumb_wrapper_full {
        overflow: hidden;
        width: 1258px;
        margin-left: 0;
    }
    html .details_page #details.extra-mips-preview #category_thumb_wrapper.category_thumb_wrapper_full .page-container {
        grid-template-columns: repeat(4, 304px);
        column-gap: 18.5px;
        row-gap: 30px;
    }
    html .details_page #details.extra-mips-preview #category_thumb_wrapper.category_thumb_wrapper_full .category_thumb {
        width: 304px;
    }
    html .details_page #details.extra-mips-preview #category_thumb_wrapper .thumb_wrapper {
        width: 304px;
        height: 304px;
        margin: 0;
    }
    html .details_page #details.extra-mips-preview #category_thumb_wrapper .thumb_wrapper .vertical img,
    html .details_page #details.extra-mips-preview #category_thumb_wrapper .thumb_wrapper .vertical_dc img {
        margin-top: 18px;
    }
    html .details_page #details.extra-mips-preview #category_thumb_wrapper .thumb_wrapper .horizontal img,
    html .details_page #details.extra-mips-preview #category_thumb_wrapper .thumb_wrapper .horizontal_dc img {
        margin-top: 56px;
    }
    html .details_page #details.extra-mips-preview #category_thumb_wrapper .thumb_wrapper .horizontal img.folded-thumb,
    html .details_page #details.extra-mips-preview #category_thumb_wrapper .thumb_wrapper .horizontal_dc img.folded-thumb {
        margin: 66px 0 0 0 !important;
        max-width: 258px;
        max-height: 258px;
    }
    html .details_page #bottom_widget_thumb_wrapper {
        min-height: 278px;
    }
    html .details_page #bottom_thumb_wrapper .widget_thumb,
    html .details_page #widget_thumb_wrapper:not(.recommendations) .widget_thumb {
        width: 202px;
        height: 260px;
        margin: 0 9px 10px 0;
    }
    html .details_page #bottom_widget_thumb_wrapper .widget_thumb_wrapper {
        width: 202px;
        height: 202px;
    }
    html .details_page #bottom_widget_thumb_wrapper .widget_thumb_wrapper .horizontal img {
        width: 181px;
        margin-top: 33px;
    }
    html .details_page #bottom_widget_thumb_wrapper .widget_thumb_wrapper .vertical img {
        width: 133px;
        margin-top: 12px !important;
    }
    html .details_page #bottom_widget_thumb_wrapper .widget_thumb_wrapper .horizontal img.folded-thumb {
        width: 181px;
        margin-top: 33px;
    }
    html .details_page #bottom_widget_thumb_wrapper .widget_thumb_wrapper .vertical img.folded-thumb {
        width: 133px;
        margin-top: 16px !important;
    }
    html .details_page #details.extra-mips-preview #category_thumb_wrapper.category_thumb_wrapper_full .all_designs {
        margin-top: 84px;
    }
    html .details_page #details.extra-mips-preview .all_designs {
        margin-top: 52px;
    }
    html .details_page #details.extra-mips-preview .all_designs p {
        margin-top: 36px;
    }
    html .details_page #details.extra-mips-preview #category_thumb_wrapper.category_thumb_wrapper_full .folded-overlay {
        width: 100% !important;
        background: url(//cdn3.simplytoimpress.com/images/Folded_Card_Thumb_Overlay_2.png) no-repeat 10px 63px;
        background-size: 91%;
    }
    html .details_page #details.extra-mips-preview #category_thumb_wrapper.category_thumb_wrapper_full .folded-overlay-portrait {
        background: url(//cdn3.simplytoimpress.com/images/Folded_Card_Thumb_Portrait_Overlay_2.png) no-repeat 53px 23px;
        background-size: 64%;
    }
    html .details_page #details.extra-mips-preview #category_thumb_wrapper .thumb_wrapper .vertical img,
    html .details_page #details.extra-mips-preview #category_thumb_wrapper .thumb_wrapper .vertical_dc img {
        margin: 27px auto 0;
        max-height: 258px;
    }
    html .details_page #details.extra-mips-preview #category_thumb_wrapper .thumb_wrapper .vertical img.folded-thumb,
    html .details_page #details.extra-mips-preview #category_thumb_wrapper .thumb_wrapper .vertical_dc img.folded-thumb {
        margin: 27px auto 0 !important;
        max-height: 258px;
    }
    html .details_page #bottom_widget_thumb_wrapper .widget_thumb_wrapper .folded-overlay {
        right: -5px;
        top: 3px;
    }
    html .details_page #bottom_widget_thumb_wrapper .widget_thumb_wrapper .folded-thumb-portrait {
        margin-top: 1px !important;
    }
    html .details_page #bottom_widget_thumb_wrapper .widget_thumb_wrapper .folded-overlay-portrait {
        background: url(//cdn.simplytoimpress.com/images/Folded_Card_Thumb_Portrait_Overlay_2.png) no-repeat -4px 13px;
        background-size: 110%;
    }

    /* YMAL carousel (main1440 1090 sizing vs 1258 layout at ≥1900 in main1920) */
    html .details_page .recommendations #thumb_wrapper {
        width: 1140px;
        height: 301px;
        float: left;
        overflow: hidden;
        position: relative;
    }
    html .details_page #widget_thumb_wrapper.recommendations .widget_thumb {
        width: 204px;
        height: 268px;
        margin: 0 12px 10px 12px;
    }
    html .details_page #widget_thumb_wrapper.recommendations .widget_thumb_wrapper {
        width: 202px;
        height: 202px;
    }
    html .details_page #widget_thumb_wrapper.recommendations .widget_thumb_wrapper .horizontal img:not(.real_foil) {
        width: 181px;
        margin-top: 33px;
    }
    html .details_page #widget_thumb_wrapper.recommendations .widget_thumb_wrapper .vertical img:not(.real_foil) {
        width: 133px;
        margin-top: 12px !important;
    }
    html .details_page #widget_thumb_wrapper.recommendations .widget_thumb_wrapper .horizontal img.folded-thumb {
        width: 181px;
        margin-top: 33px;
    }
    html .details_page #widget_thumb_wrapper.recommendations .widget_thumb_wrapper .vertical img.folded-thumb {
        width: 133px;
        margin-top: 16px !important;
    }
    html .details_page .recommendations .widget_thumb_wrapper .square img {
        width: 170px;
    }
    html .details_page #widget_thumb_wrapper.recommendations .prev,
    html .details_page #widget_thumb_wrapper.recommendations .next {
        width: 59px;
        height: 220px;
        float: left;
        padding-top: 22px;
    }
    html .details_page #reco_inner .widget_thumb_wrapper .stocking img,
    html .details_page #reco_inner .widget_thumb_wrapper .gitf_tag img,
    html .details_page #reco_inner .widget_thumb_wrapper .ornament img {
        width: 200px;
        margin: 0;
    }
    html .details_page #reco_inner .real_foil {
        margin: 0 !important;
        width: 50px;
    }
    html .details_page #widget_thumb_wrapper.recommendations .widget_thumb_wrapper .folded-overlay {
        right: -5px;
        top: 3px;
    }
    html .details_page #widget_thumb_wrapper.recommendations .widget_thumb_wrapper .folded-thumb-portrait {
        margin-top: 1px !important;
    }
    html .details_page #widget_thumb_wrapper.recommendations .widget_thumb_wrapper .folded-overlay-portrait {
        background: url(//cdn.simplytoimpress.com/images/Folded_Card_Thumb_Portrait_Overlay_2.png) no-repeat -4px 13px;
        background-size: 110%;
    }
}

/* Suite match: scale carousel to 462px preview column (<1420 extra-MIPs). JS unchanged. */
@media (max-width: 1419px) {
    #details.extra-mips-preview .detail-suite-div {
        --suite-match-scale: calc(462 / 543);
        width: 462px;
        max-width: 100%;
        overflow: hidden;
    }
    #details.extra-mips-preview .details-suite.clearfix {
        width: 543px;
        transform: scale(var(--suite-match-scale));
        transform-origin: top left;
        /* Layout box stays pre-scale height; pull up gap below (~220px unscaled block). */
        margin-bottom: calc((var(--suite-match-scale) - 1) * 220px);
    }
}

/* Mobile styles */
@media (max-width: 575px) {
    #details-container.extra-mips-preview {
        --pdp-preview-mobile-size: 100vw;
    }

    #details-container.extra-mips-preview >.spacer062 {
        display: none;
    }
    #details-container.extra-mips-preview .raster_text_inputDiv,
    #details-container.extra-mips-preview .num_photos_inputDiv {
        margin-top: 2.05vmin;
    }

    .pdp-preview__thumbnails {
        --pdp-preview-thumbnail-size: 21vmin;
        --pdp-preview-thumbnails-gap: 2.05vmin;

        float: none;
        flex-direction: row;
        width: 100%;
        max-height: none;
        padding: 3.07vmin;
        overflow-x: auto;
        box-sizing: border-box;
    }

    /* 100vw preview band; .cardImg* heights/margins stay from detail.css — only center inside this shell. */
    #details-container.extra-mips-preview .pdp-preview-mobile {
        position: relative;
        height: var(--pdp-preview-mobile-size);
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        background-color: #f9f7f4;
    }

    .pdp-preview-mobile.pdp-preview--static-active > :not([data-product-preview-static]) {
        display: none !important;
    }

    #details-container.extra-mips-preview .pdp-preview-mobile .pdp-preview__static {
        inset: 0 0 auto;
        height: var(--pdp-preview-mobile-size);
    }

    .pdp-preview-mobile.pdp-preview--static-active [data-pz-layer] {
        display: none !important;
    }

    .pdp-preview-mobile.pdp-preview--static-active .pdp-preview__static-image,
    .pdp-preview-mobile.pdp-preview--static-active .pdp-preview__static-overlay:not(.hideme) {
        display: block !important;
    }

    #details-container .pdp-preview-mobile .real_foil.orientation_30,
    #details-container .pdp-preview-mobile .real_foil.orientation_30 {
        top: 0;
    }
}
