/* CP-PDP-PROPORTION-FIX-START */


/* =========================================================
   1. WHOLE PRODUCT AREA
   ========================================================= */

.cp-pdp-container{
    width:min(1180px, calc(100% - 36px)) !important;
    max-width:1180px !important;

    padding-top:14px !important;
}

.cp-pdp-breadcrumb{
    margin-bottom:12px !important;
}


/*
 * Balanced 50 / 50 product layout.
 * Gallery itself contains thumbnails + main image.
 */
.cp-pdp-top{
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap:34px !important;

    align-items:start !important;
}


/* =========================================================
   2. REMOVE THE GIANT RIGHT-SIDE CARD FEEL
   ========================================================= */

.cp-pdp-summary{
    margin:0 !important;

    padding:3px 0 0 !important;

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

    background:#fff !important;

    box-shadow:none !important;

    overflow:visible !important;
}


/* Kill any pseudo decorative/card layers */
.cp-pdp-summary::before,
.cp-pdp-summary::after{
    display:none !important;
}


/* =========================================================
   3. SMALLER, BETTER-PROPORTIONED GALLERY
   ========================================================= */

.cp-pdp-gallery{
    grid-template-columns:
        60px
        minmax(0,1fr) !important;

    gap:11px !important;
}

.cp-pdp-thumbs{
    width:60px !important;

    gap:7px !important;

    max-height:390px !important;
}

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

    flex-basis:60px !important;

    padding:5px !important;

    border-radius:7px !important;
}


/*
 * Current screenshot gallery is unnecessarily tall.
 */
.cp-pdp-main-image{
    height:390px !important;
    min-height:390px !important;
    max-height:390px !important;

    padding:18px !important;

    border-radius:8px !important;

    border-color:#e8e4e9 !important;
}

.cp-pdp-main-image img{
    max-width:82% !important;
    max-height:350px !important;
}


/* Smaller sale badge */
.cp-pdp-discount{
    top:11px !important;
    left:11px !important;

    padding:5px 8px !important;

    font-size:10px !important;
}


/* =========================================================
   4. TITLE / META / PRICE
   ========================================================= */

.cp-pdp-brand{
    margin-bottom:4px !important;

    font-size:10px !important;
}

.cp-pdp-summary h1{
    max-width:520px !important;

    margin-bottom:7px !important;

    font-size:25px !important;
    line-height:1.15 !important;

    letter-spacing:-.02em !important;
}

.cp-pdp-meta{
    margin-bottom:8px !important;

    gap:4px 12px !important;

    font-size:10px !important;
}

.cp-pdp-stock{
    margin-bottom:9px !important;

    padding:4px 7px !important;

    font-size:10px !important;
}

.cp-pdp-price{
    margin-bottom:5px !important;
}

.cp-pdp-price strong{
    font-size:32px !important;
}

.cp-pdp-price del{
    font-size:14px !important;
}

.cp-pdp-short{
    padding:
        1px 0
        10px !important;

    font-size:11px !important;
    line-height:1.45 !important;
}


/* =========================================================
   5. VARIANTS
   Remove unnecessary "Choose Options" heading completely.
   Size / Pack labels already explain the UI.
   ========================================================= */

.cp-pdp-variant-title{
    display:none !important;
}

.cp-pdp-variants{
    margin-top:10px !important;
}

.cp-pdp-option-groups{
    gap:10px !important;
}

.cp-pdp-option-head{
    margin-bottom:5px !important;

    font-size:10px !important;
}

.cp-pdp-option-head strong{
    display:none !important;
}

.cp-pdp-option-values{
    gap:6px !important;
}

.cp-pdp-option-choice span,
.cp-pdp-variant-choice span,
.cp-pdp-value-choice span{
    min-height:32px !important;

    padding:6px 10px !important;

    border-radius:5px !important;

    font-size:10px !important;
}

.cp-pdp-option-choice input:checked + span,
.cp-pdp-variant-choice input:checked + span,
.cp-pdp-value-choice input:checked + span{
    padding:5px 9px !important;
}


/* =========================================================
   6. PURCHASE CONTROLS
   Must be visible in first viewport.
   ========================================================= */

.cp-pdp-buy{
    margin-top:11px !important;
}

.cp-pdp-buy-box{
    margin:0 !important;

    padding:
        10px 0
        0 !important;

    border:0 !important;
    border-top:1px solid #ebe7ec !important;

    border-radius:0 !important;

    box-shadow:none !important;

    background:#fff !important;
}


/* Quantity is compact, not a separate visual section */

.cp-pdp-buy-row{
    margin-bottom:9px !important;

    gap:11px !important;
}

.cp-pdp-buy-label{
    min-width:auto !important;

    font-size:10px !important;
}

.cp-pdp-qty{
    width:98px !important;
    height:32px !important;

    grid-template-columns:
        30px
        38px
        30px !important;

    border-radius:5px !important;
}

.cp-pdp-qty button{
    width:30px !important;
    height:30px !important;

    line-height:30px !important;

    font-size:14px !important;
}

.cp-pdp-qty input{
    width:38px !important;
    height:30px !important;

    font-size:11px !important;
}


/* =========================================================
   7. CTA ROW
   ========================================================= */

.cp-pdp-actions{
    grid-template-columns:
        1.18fr
        .82fr !important;

    gap:7px !important;
}

.cp-pdp-btn{
    min-height:38px !important;

    padding:8px 10px !important;

    border-radius:5px !important;

    font-size:11px !important;
}


/* Solid purple only */
.cp-pdp-btn--cart{
    background:#68137f !important;
    border-color:#68137f !important;
}

.cp-pdp-btn--cart:hover{
    background:#4f0e62 !important;
    border-color:#4f0e62 !important;
}

.cp-pdp-btn--order{
    background:#fff !important;
}

.cp-pdp-btn--whatsapp{
    min-height:37px !important;
}


/* =========================================================
   8. TRUST ROW
   ========================================================= */

.cp-pdp-trust{
    margin-top:9px !important;

    padding-top:9px !important;
}

.cp-pdp-trust span{
    font-size:8px !important;
}


/* =========================================================
   9. REMOVE ALL PDP GLOW / PINK BACKGROUND
   ========================================================= */

.cp-pdp-v3,
.cp-pdp-container,
.cp-pdp-top,
.cp-pdp-gallery,
.cp-pdp-summary,
.cp-pdp-info,
.cp-pdp-buy,
.cp-pdp-buy-box,
.cp-pdp-variants,
.cp-pdp-option-group{
    background:#fff !important;

    box-shadow:none !important;
}


/* =========================================================
   10. TABLET
   ========================================================= */

@media(max-width:1050px){

    .cp-pdp-container{
        width:calc(100% - 28px) !important;
    }

    .cp-pdp-top{
        gap:24px !important;
    }

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

    .cp-pdp-main-image img{
        max-height:325px !important;
    }

    .cp-pdp-summary h1{
        font-size:23px !important;
    }
}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media(max-width:767px){

    .cp-pdp-container{
        width:100% !important;

        padding:
            9px 11px
            24px !important;
    }

    .cp-pdp-top{
        display:block !important;
    }

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

        margin-bottom:14px !important;
    }

    .cp-pdp-main-image{
        order:1 !important;

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

        padding:14px !important;
    }

    .cp-pdp-main-image img{
        max-height:270px !important;
    }

    .cp-pdp-thumbs{
        order:2 !important;

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

        flex-direction:row !important;

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

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

        flex:0 0 52px !important;
    }

    .cp-pdp-summary h1{
        font-size:20px !important;
    }

    .cp-pdp-price strong{
        font-size:29px !important;
    }

    .cp-pdp-option-choice span,
    .cp-pdp-variant-choice span,
    .cp-pdp-value-choice span{
        min-height:33px !important;

        padding:6px 9px !important;
    }

    .cp-pdp-buy{
        margin-top:12px !important;
    }

    .cp-pdp-actions{
        grid-template-columns:
            1fr
            1fr !important;
    }

    .cp-pdp-btn{
        min-height:40px !important;
    }

    .cp-pdp-btn--whatsapp{
        grid-column:1 / -1 !important;
    }
}


/* CP-PDP-PROPORTION-FIX-END */