/* CP-PDP-IMAGE-VIEW-FINAL-START */


/* =========================================================
   1. DESKTOP GALLERY
   ========================================================= */

.cp-pdp-gallery{
    display:grid !important;

    grid-template-columns:
        64px
        minmax(0,1fr) !important;

    align-items:start !important;

    gap:12px !important;

    width:100% !important;

    padding:0 !important;
    margin:0 !important;

    background:#fff !important;
}


/* =========================================================
   2. MAIN PRODUCT IMAGE CANVAS
   ========================================================= */

.cp-pdp-main-image{
    position:relative !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:100% !important;

    height:430px !important;
    min-height:430px !important;
    max-height:430px !important;

    padding:10px !important;

    margin:0 !important;

    overflow:hidden !important;

    background:#fff !important;

    border:1px solid #e7e3e9 !important;
    border-radius:8px !important;

    box-shadow:none !important;
}


/*
 * Critical fix:
 * older PDP CSS limited the actual image to 82%.
 */
.cp-pdp-main-image img,
#cpMainProductImage{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 auto !important;
    padding:0 !important;

    object-fit:contain !important;

    object-position:center center !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;

    box-shadow:none !important;
}


/* =========================================================
   3. THUMBNAILS
   ========================================================= */

.cp-pdp-thumbs{
    display:flex !important;

    flex-direction:column !important;

    gap:8px !important;

    width:64px !important;
    min-width:64px !important;
    max-width:64px !important;

    max-height:430px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    padding:0 !important;
    margin:0 !important;

    scrollbar-width:none !important;
}

.cp-pdp-thumbs::-webkit-scrollbar{
    display:none !important;
}


.cp-pdp-thumbs button{
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:64px !important;
    height:64px !important;

    min-width:64px !important;
    min-height:64px !important;

    flex:0 0 64px !important;

    margin:0 !important;

    padding:4px !important;

    overflow:hidden !important;

    background:#fff !important;

    border:1px solid #e6e1e8 !important;
    border-radius:7px !important;

    box-shadow:none !important;

    cursor:pointer !important;
}


.cp-pdp-thumbs button.is-active{
    border-color:#71118b !important;

    box-shadow:
        0 0 0 1px
        #71118b !important;
}


.cp-pdp-thumbs button img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    padding:0 !important;
    margin:0 !important;

    object-fit:contain !important;

    background:#fff !important;
}


/* =========================================================
   4. PRODUCT WITH ONLY ONE IMAGE
   ========================================================= */

.cp-pdp-gallery:not(:has(.cp-pdp-thumbs)){
    display:block !important;
}


/* =========================================================
   5. SALE BADGE
   ========================================================= */

.cp-pdp-discount{
    top:10px !important;
    left:10px !important;

    z-index:3 !important;
}


/* =========================================================
   6. TABLET
   ========================================================= */

@media(max-width:1050px) and (min-width:768px){

    .cp-pdp-main-image{
        height:380px !important;
        min-height:380px !important;
        max-height:380px !important;
    }

    .cp-pdp-thumbs{
        max-height:380px !important;
    }
}


/* =========================================================
   7. MOBILE
   ========================================================= */

@media(max-width:767px){

    .cp-pdp-gallery{
        display:flex !important;

        flex-direction:column !important;

        width:100% !important;

        gap:9px !important;

        margin:0 0 15px !important;

        padding:0 !important;
    }


    /*
     * Responsive square-ish product viewport.
     * No fixed 300px / giant blank canvas.
     */
    .cp-pdp-main-image{
        order:1 !important;

        width:100% !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        aspect-ratio:1 / 1 !important;

        padding:8px !important;

        border-radius:7px !important;
    }


    .cp-pdp-main-image img,
    #cpMainProductImage{
        width:100% !important;
        height:100% !important;

        max-width:100% !important;
        max-height:100% !important;

        object-fit:contain !important;

        object-position:center !important;
    }


    /* thumbnails under main image */
    .cp-pdp-thumbs{
        order:2 !important;

        display:flex !important;

        flex-direction:row !important;

        gap:7px !important;

        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        height:auto !important;
        max-height:none !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding:1px 0 4px !important;

        margin:0 !important;

        -webkit-overflow-scrolling:touch !important;

        scrollbar-width:none !important;
    }


    .cp-pdp-thumbs button{
        width:56px !important;
        height:56px !important;

        min-width:56px !important;
        min-height:56px !important;

        flex:0 0 56px !important;

        padding:3px !important;

        border-radius:6px !important;
    }
}


/* =========================================================
   8. SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

    .cp-pdp-main-image{
        padding:6px !important;
    }

    .cp-pdp-thumbs button{
        width:52px !important;
        height:52px !important;

        min-width:52px !important;
        min-height:52px !important;

        flex-basis:52px !important;
    }
}


/* CP-PDP-IMAGE-VIEW-FINAL-END */