/*=======search start=========*/
#searchScreen{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#fff;
    z-index:99999;
    display:none;
    flex-direction:column;
}

.searchTopBar{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border-bottom:1px solid #eee;
}

.searchBackBtn{
    font-size:18px;
    cursor:pointer;
    padding:8px;
}

.searchBoxWrap{
    flex:1;
    display:flex;
    border:2px solid orange;
    border-radius:12px;
    overflow:hidden;
}

.searchBoxWrap input{
    flex:1;
    border:none;
    padding:10px;
    outline:none;
    font-size:15px;
}

.searchBoxWrap button{
    background:orange;
    border:none;
    color:#fff;
    width:50px;
}


.historyTags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
        margin-top:4px;

}

.historyTags span{
    background:#f1f1f1;
    padding:6px 10px;
    border-radius:20px;
    font-size:13px;
    cursor:pointer;
}




/* =========================
   SEARCH HISTORY HEADER
========================= */
.searchHistoryHeader h4{

    width:auto !important;
}
.searchHistoryHeader{

    display:flex;
    align-items:right;
    justify-content:space-between;

    margin-bottom:10px;
}




/* SEARCH SCREEN SCROLL FIX */

#searchScreen{

    overflow-y:auto;
}

/* RECENT SECTION COMPACT */

.searchHistoryBox{

    padding:8px 10px 2px;
}

/* RECENT RESULTS GAP FIX */

#recentSearchResults{

    padding:2px 10px 10px;
}

/* HISTORY TAGS SMALL */



.searchHistoryHeader h4{

    margin:0;
}

/* FULL HISTORY BOX */
#allSearchHistoryBox{

    padding:10px;

    display:flex;
    flex-wrap:wrap;

    gap:8px;
}

#allSearchHistoryBox span{

    background:#f1f1f1;

    padding:8px 12px;

    border-radius:20px;

    font-size:13px;

    cursor:pointer;
}

/*=========search end=========*/



/* =====================================
   SEARCH RESULTS GRID
===================================== */

#searchResults{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:8px;

    padding:0;

    margin:0;

    width:100%;

    align-items:start;

    box-sizing:border-box;

}

/* =====================================
   SEARCH PRODUCT CARD
===================================== */

.searchProductCard{

    position:relative;

    display:flex;

    flex-direction:column;

    width:100%;

    margin:0;

    padding:0;

    overflow:hidden;

    background:#fff;
    align-self:start;

    border:1px solid transparent;

    border-radius:8px;

    box-shadow:none;

    box-sizing:border-box;

}

/* =====================================
   IMAGE WRAPPER
===================================== */

.searchImgWrap{

    position:relative;

    width:100%;

    aspect-ratio:1 / 1.2;

    overflow:hidden;

    flex-shrink:0;

    display:block;

}
/* =====================================
   PLACEHOLDER
===================================== */

.searchImgPlaceholder{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;

    opacity:.12;

    z-index:1;

}

/* =====================================
   MAIN IMAGE
===================================== */

.searchMainImg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

    object-position:center;

    border-radius:8px;

    border:1px solid #e5e5e5;

    opacity:0;

background:#fff;
    transition:opacity .35s;

    z-index:2;

}

.searchMainImg.loaded{

    opacity:1;

}

/* =====================================
   TITLE
===================================== */

.searchProductTitle{

    font-size:13px;

    font-weight:600;

    color:#333;

    padding:0 10px;

    margin-top:6px;

    margin-bottom:5px;

    line-height:1.3;

    overflow:hidden;

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    text-overflow:ellipsis;

    word-break:break-word;

}

/* =====================================
   PRICE
===================================== */

.searchProductPrice{

    font-size:15px;

    font-weight:700;

    color:#2196f3;

    padding:0 10px;

    margin-bottom:8px;

}

/* =====================================
   ACTIONS
===================================== */

.searchProductActions{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:12px;

}

.searchActionLeft{

    flex:1;

}

.searchActionRight{

    width:42px;

    display:flex;

    justify-content:flex-end;

}

/* =====================================
   ADD BUTTON
===================================== */

.searchBtnAdd{

    display:block;

    width:100%;

    height:36px;

    border:none;

    border-radius:8px;

    background:#006FFF;

    color:#fff;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

}

/* =====================================
   DETAILS BUTTON
===================================== */

.searchBtnDetails{

    width:36px;

    height:36px;

    background:#1db954;
    color:#fff;
    border:none;
    border-radius:8px;



    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

/* =====================================
   QTY CONTAINER
===================================== */

.searchQtyContainer{

    margin-top:6px;

}

/* =========================================
   SEARCH ICON
========================================= */

#searchToggleBtn{

    width:40px;
    height:40px;

    border-radius:50%;

    background:#ffffff22;

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

    color:#fff;

    font-size:17px;

    cursor:pointer;
}









/* =========================
SEARCH PRODUCT ACTIONS
========================= */

.searchProductActions{

    max-height:0;

    opacity:0;

    overflow:hidden;

    display:none;

    gap:8px;

    transition:.25s;

    margin-top:0;

    padding:0 10px;

}

.searchProductActions.showActions{

    max-height:60px;

    opacity:1;

    display:flex;

    margin-top:10px;

    margin-bottom:10px;

}

/* ADD TO CART */

.searchProductActions .searchBtnAdd{

    flex:1;

    height:40px;

    background:#FFD700;

    color:#111;

    border:none;

    border-radius:5px;

    font-weight:700;

    font-size:13px;

}

/* MARK ADDED */

.searchBtnAdd.added{

    background:#16a34a;

    color:#fff;

}

/* QTY BOX */

.searchQtyBox{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    margin:8px 10px 10px;

}

.searchQtyBox button{

    width:25px;

    height:25px;

    border:none;

    border-radius:2px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

.searchQtyBox .decQ{

    background:#dc3545;

    color:#fff;

}

.searchQtyBox .incQ{

    background:#2196f3;

    color:#fff;

}

.searchQtyBox .showQ{

    width:28px;

    height:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    font-weight:700;

}

.searchQtyContainer{

    display:none;

}

.searchQtyContainer.showQty{

    display:block;

}