/* CP-SEARCH-SUGGESTION-FINAL-START */


/* =========================================================
   SEARCH DROPDOWN
   ========================================================= */

.cp11-search{
    position:relative !important;
}


/*
 * The suggestion panel must be completely opaque.
 * Nothing from the homepage should visually appear through it.
 */
.cp11-search .cp-search-results{
    position:absolute !important;

    left:0 !important;
    right:0 !important;
    top:calc(100% + 7px) !important;

    z-index:9998 !important;

    width:100% !important;

    max-height:430px !important;

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

    margin:0 !important;
    padding:5px !important;

    background:#ffffff !important;

    border:1px solid #e6e0e8 !important;
    border-radius:10px !important;

    box-shadow:
        0 14px 35px
        rgba(37,18,43,.16) !important;

    isolation:isolate !important;
}


/*
 * hidden must always win.
 */
.cp11-search .cp-search-results[hidden]{
    display:none !important;
}


/* =========================================================
   RESULT ROWS
   Covers common renderer output patterns
   ========================================================= */

.cp11-search .cp-search-results a,
.cp11-search .cp-search-result{
    min-height:58px !important;

    display:grid !important;

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

    align-items:center !important;

    gap:10px !important;

    width:100% !important;

    padding:7px 8px !important;
    margin:0 !important;

    background:#fff !important;

    color:#211a24 !important;

    border:0 !important;
    border-bottom:1px solid #f0edf1 !important;

    border-radius:0 !important;

    text-decoration:none !important;

    box-shadow:none !important;
}


/*
 * Last item no divider.
 */
.cp11-search .cp-search-results a:last-child,
.cp11-search .cp-search-result:last-child{
    border-bottom:0 !important;
}


/*
 * Product image.
 */
.cp11-search .cp-search-results img,
.cp11-search .cp-search-result img{
    width:46px !important;
    height:46px !important;

    min-width:46px !important;

    display:block !important;

    padding:3px !important;

    object-fit:contain !important;

    background:#fff !important;

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


/*
 * Product/title text.
 */
.cp11-search .cp-search-results strong{
    min-width:0 !important;

    color:#211a24 !important;

    font-size:12px !important;
    line-height:1.3 !important;

    font-weight:750 !important;
}


/*
 * Price / secondary information.
 */
.cp11-search .cp-search-results span,
.cp11-search .cp-search-results small{
    color:#68137f !important;

    font-size:11px !important;
    line-height:1.25 !important;

    font-weight:700 !important;
}


/* Hover */
.cp11-search .cp-search-results a:hover,
.cp11-search .cp-search-result:hover{
    background:#faf8fb !important;
}


/* =========================================================
   BROKEN IMAGE SAFETY
   ========================================================= */

.cp11-search .cp-search-results img[src=""],
.cp11-search .cp-search-results img:not([src]){
    visibility:hidden !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767px){

    /*
     * Search dropdown belongs to search row only.
     * It must float above hero/category/brand content.
     */

    .cp11-mobile-search-row{
        position:relative !important;
        z-index:9997 !important;

        overflow:visible !important;
    }


    .cp11-search--mobile{
        position:relative !important;

        z-index:9998 !important;

        overflow:visible !important;
    }


    .cp11-search--mobile .cp-search-results{
        left:0 !important;
        right:0 !important;

        top:calc(100% + 5px) !important;

        width:100% !important;

        max-height:
            min(
                420px,
                calc(100vh - 210px)
            ) !important;

        padding:4px !important;

        background:#fff !important;

        border-radius:9px !important;

        box-shadow:
            0 12px 30px
            rgba(31,17,36,.20) !important;
    }


    /*
     * Smaller rows on phone.
     */
    .cp11-search--mobile .cp-search-results a,
    .cp11-search--mobile .cp-search-result{
        min-height:56px !important;

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

        gap:9px !important;

        padding:6px 7px !important;

        background:#fff !important;
    }


    .cp11-search--mobile .cp-search-results img,
    .cp11-search--mobile .cp-search-result img{
        width:44px !important;
        height:44px !important;

        min-width:44px !important;
    }


    /*
     * This prevents homepage controls such as
     * "View All Brands" from appearing visually
     * inside the suggestion panel.
     */
    body:has(
        .cp11-search--mobile
        .cp-search-results:not([hidden])
    )
    .cp11-home-shell{
        position:relative !important;
        z-index:1 !important;
    }


    body:has(
        .cp11-search--mobile
        .cp-search-results:not([hidden])
    )
    .cp-brand-section-v4 .cp-view-all-brands-final{
        visibility:hidden !important;
    }
}


/* CP-SEARCH-SUGGESTION-FINAL-END */