/* =====================================================
CATALOG PAGE
===================================================== */


.shop-page{

    width:100%;

}


/* SEARCH + FILTER */

.catalog-tools,
.shop-filters{

    background:white;

    padding:15px 35px;


    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}



.catalog-tools input,
.shop-filters input{


    flex:1;

    min-width:280px;


    padding:12px 18px;


    border-radius:25px;

    border:1px solid #ddd;

}



select{

    padding:10px 15px;

    border-radius:20px;

    border:1px solid #ddd;

}



#catalogStats{

    font-weight:bold;

    color:#003f3f;

}


/* =====================================================
GRID
===================================================== */


#catalogGrid{

    width:100%;

    padding:25px;

}



.category-block{

    width:100%;

    margin-bottom:25px;

}



.category-title{


    width:100%;


    background:#254b5a;


    color:#f0c35a;


    padding:16px 25px;


    border-radius:12px;


    font-weight:700;


    display:flex;

    justify-content:space-between;


    cursor:pointer;

}



/* PRODUCTS */

.category-products{


    display:grid;


    grid-template-columns:
    repeat(8,1fr);


    gap:15px;


    margin-top:18px;


}



.category-products.hide{

    display:none;

}



.product-card{


    background:white;


    border-radius:14px;


    padding:14px;


    height:390px;


    box-shadow:
    0 4px 12px rgba(0,0,0,.12);



    display:flex;

    flex-direction:column;

    justify-content:space-between;


    text-align:center;

}



.product-card img{


    width:100%;

    height:170px;

    object-fit:contain;

}



.product-card h4{


    font-size:14px;

    min-height:45px;

}



.cat{

    color:#008f8f;

    font-size:13px;

}



.price{

    font-weight:bold;

    color:#064d4d;

}



.add-btn,
.login-required{


    background:#d99a16;

    color:white;


    border:none;


    border-radius:20px;


    padding:8px 18px;


}



.login-required{

    background:none;

    color:#005b5b;

}




@media(max-width:768px){


.catalog-tools,
.shop-filters{

    flex-direction:column;

    align-items:stretch;

}



#catalogGrid{

    padding:12px;

}



.category-products{


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


    gap:10px;

}



.product-card{


    height:320px;

    padding:8px;

}



.product-card img{

    height:120px;

}


}