/* CP-RESPONSIVE-LOGO-FINAL-START */

/* =========================================================
   COSMETIC POINT RESPONSIVE HEADER LOGO
   One final authoritative sizing layer
   ========================================================= */

/* ---------- DESKTOP ---------- */

body .cp11-header .cp11-logo,
header.cp11-header .cp11-logo{
    min-width:0 !important;
    width:auto !important;
    max-width:220px !important;

    flex:0 0 auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

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

    overflow:visible !important;
}

body .cp11-header .cp11-logo picture,
header.cp11-header .cp11-logo picture{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

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

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

body .cp11-header .cp11-logo img,
header.cp11-header .cp11-logo picture img,
header.cp11-header .cp11-logo img{
    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:210px !important;
    max-height:50px !important;

    object-fit:contain !important;
    object-position:left center !important;

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

    border:0 !important;

    filter:none !important;
    box-shadow:none !important;

    transform:none !important;
}


/* Header row must vertically center logo */
body .cp11-header .cp11-header__main,
header.cp11-header .cp11-header__main{
    align-items:center !important;
}


/* ---------- TABLET ---------- */

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

    body .cp11-header .cp11-logo,
    header.cp11-header .cp11-logo{
        max-width:180px !important;
    }

    body .cp11-header .cp11-logo img,
    header.cp11-header .cp11-logo picture img,
    header.cp11-header .cp11-logo img{
        max-width:175px !important;
        max-height:44px !important;
    }
}


/* ---------- MOBILE ---------- */

@media(max-width:767px){

    /*
     * Mobile grid:
     * menu | logo | cart/actions
     */

    body .cp11-header .cp11-header__main,
    header.cp11-header .cp11-header__main{
        min-height:60px !important;

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

        gap:8px !important;

        padding:
            8px 12px
            6px !important;

        align-items:center !important;
    }


    body .cp11-header .cp11-logo,
    header.cp11-header .cp11-logo{
        grid-column:2 !important;

        justify-self:center !important;
        justify-content:center !important;

        width:auto !important;
        min-width:0 !important;
        max-width:150px !important;

        height:auto !important;

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


    body .cp11-header .cp11-logo picture,
    header.cp11-header .cp11-logo picture{
        width:auto !important;
        max-width:150px !important;

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

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


    body .cp11-header .cp11-logo img,
    header.cp11-header .cp11-logo picture img,
    header.cp11-header .cp11-logo img{
        width:auto !important;
        height:auto !important;

        max-width:145px !important;
        max-height:38px !important;

        object-fit:contain !important;
        object-position:center center !important;

        margin:0 auto !important;

        filter:none !important;
        box-shadow:none !important;
    }


    /*
     * If logo image cannot load and text fallback is used,
     * keep it compact.
     */
    body .cp11-header .cp11-logo span,
    header.cp11-header .cp11-logo span{
        min-height:0 !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        max-width:145px !important;

        padding:5px 8px !important;

        font-size:13px !important;
        line-height:1.1 !important;

        white-space:nowrap !important;

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

        box-shadow:none !important;
    }


    /*
     * Keep mobile actions aligned so logo stays centered.
     */
    body .cp11-header .cp11-actions,
    header.cp11-header .cp11-actions{
        grid-column:3 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;

        gap:3px !important;

        min-width:40px !important;
    }


    /*
     * Search row close to header.
     * Avoid unnecessary vertical whitespace.
     */
    body .cp11-header .cp11-mobile-search-row,
    header.cp11-header .cp11-mobile-search-row{
        padding:
            0 12px
            10px !important;
    }
}


/* ---------- SMALL PHONE ---------- */

@media(max-width:390px){

    body .cp11-header .cp11-logo,
    header.cp11-header .cp11-logo,
    body .cp11-header .cp11-logo picture,
    header.cp11-header .cp11-logo picture{
        max-width:132px !important;
    }

    body .cp11-header .cp11-logo img,
    header.cp11-header .cp11-logo picture img,
    header.cp11-header .cp11-logo img{
        max-width:128px !important;
        max-height:34px !important;
    }
}

/* CP-RESPONSIVE-LOGO-FINAL-END */