/* ===========================
   OHAM IMPORTER
=========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Poppins',sans-serif;

background:#f4f6f8;

color:#333;

}


/* HEADER */

.header{

background:#0f9d58;

color:white;

padding:20px;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

}

.header h1{

font-size:32px;

}

.header p{

margin-top:5px;

font-size:14px;

}

.contact{

text-align:right;

font-size:15px;

line-height:28px;

}


/* CUSTOMER */

.customer-section{

background:white;

margin:20px;

padding:20px;

border-radius:10px;

box-shadow:0 2px 10px rgba(0,0,0,.1);

}

.customer-section h2{

margin-bottom:15px;

color:#0f9d58;

}

.customer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:15px;

}

.customer-grid input{

padding:12px;

border:1px solid #ddd;

border-radius:8px;

font-size:15px;

}


/* TOOLBAR */

.toolbar{

display:flex;

gap:15px;

margin:20px;

flex-wrap:wrap;

}

.toolbar input,

.toolbar select{

padding:12px;

border:1px solid #ccc;

border-radius:8px;

font-size:15px;

}

.toolbar input{

flex:1;

min-width:250px;

}


/* MAIN */

.container{

display:grid;

grid-template-columns:3fr 1fr;

gap:20px;

padding:20px;

}


/* PRODUCTS */

.products-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(240px,1fr));

gap:20px;

}


/* PRODUCT */

.product{

background:white;

border-radius:12px;

overflow:hidden;

box-shadow:0 2px 10px rgba(0,0,0,.1);

transition:.3s;

}

.product:hover{

transform:translateY(-5px);

}

.product img{

width:100%;

height:180px;

object-fit:cover;

}

.product-content{

padding:15px;

}

.product h3{

font-size:18px;

margin-bottom:8px;

color:#0f9d58;

}

.product p{

font-size:14px;

margin-bottom:12px;

color:#555;

}


/* QTY */

.qty-box{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

margin:12px 0;

}

.qty-box button{

width:35px;

height:35px;

background:#0f9d58;

color:white;

border:none;

border-radius:5px;

cursor:pointer;

font-size:18px;

}

.qty-box button:hover{

background:#08753f;

}

.qty-box input{

width:60px;

text-align:center;

padding:8px;

border:1px solid #ddd;

border-radius:5px;

}


/* BUTTONS */

.add-btn{

width:100%;

padding:12px;

background:#1a73e8;

color:white;

border:none;

border-radius:6px;

cursor:pointer;

font-weight:bold;

}

.add-btn:hover{

background:#155ac6;

}


/* CART */

.cart{

background:white;

border-radius:12px;

padding:20px;

box-shadow:0 2px 10px rgba(0,0,0,.1);

position:sticky;

top:20px;

height:fit-content;

}

.cart h2{

color:#0f9d58;

margin-bottom:15px;

}

#cartItems{

max-height:400px;

overflow:auto;

margin-bottom:20px;

}

.cart-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:10px;

margin-bottom:8px;

background:#eef3ff;

border-radius:6px;

}

.remove-btn{

background:red;

color:white;

border:none;

padding:5px 10px;

border-radius:5px;

cursor:pointer;

}

.cart-total{

display:flex;

justify-content:space-between;

font-size:20px;

margin-bottom:20px;

}

.cart-buttons button{

width:100%;

padding:12px;

margin-bottom:10px;

border:none;

border-radius:6px;

cursor:pointer;

font-weight:bold;

}

#clearCartBtn{

background:#ff9800;

color:white;

}

#printBtn{

background:#444;

color:white;

}

#emailBtn{

background:#1976d2;

color:white;

}

#whatsappBtn{

background:#25d366;

color:white;

}


/* FOOTER */

footer{

background:#0f9d58;

color:white;

text-align:center;

padding:20px;

margin-top:30px;

}


/* MOBILE */

@media(max-width:992px){

.container{

grid-template-columns:1fr;

}

.cart{

position:relative;

}

}


/* PHONE */

@media(max-width:600px){

.products-grid{

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

gap:12px;

}

.product img{

height:120px;

}

.header{

justify-content:center;

text-align:center;

}

.contact{

text-align:center;

margin-top:10px;

}

.toolbar{

flex-direction:column;

}

.toolbar input{

width:100%;

}

.toolbar select{

width:100%;

}

.customer-grid{

grid-template-columns:1fr;

}

.product h3{

font-size:15px;

}

.product p{

font-size:12px;

}

.add-btn{

font-size:13px;

padding:10px;

}

}
/* CATEGORY BUTTONS */

.category-bar{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin:20px 0;
}

.category-bar button{
    background:#0f9d58;
    color:white;
    border:none;
    padding:10px 20px;
    border-radius:8px;
    cursor:pointer;
    font-weight:bold;
    transition:0.3s;
}

.category-bar button:hover{
    background:#08753f;
}