/* ==============================
MAIN CONTAINER
============================== */

.products-container{
max-width:1400px;
margin:auto;
padding:40px 20px;
}

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

.page-title{
text-align:center;
font-size:36px;
font-weight:700;
margin-bottom:10px;
color:#222;
}

.brand{
color:#ff7a00;
}

.page-subtitle{
text-align:center;
color:#555;
margin-bottom:40px;
}

/* ==============================
PAGE LAYOUT
============================== */

.products-page{
display:flex;
align-items:flex-start;
gap:30px;
}

/* ==============================
SIDEBAR
============================== */

.filter-sidebar{
width:260px;
flex-shrink:0;
}

.filter-sidebar h3{
margin-bottom:10px;
font-size:20px;
}

.filter-list{
list-style:none;
padding:0;
margin-bottom:30px;
}

.filter-list li{
margin-bottom:8px;
font-size:15px;
}

.filter-list input{
margin-right:6px;
cursor:pointer;
}

/* ==============================
PRODUCT AREA
============================== */

.product-area{
flex:1;
}

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

.product-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}

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

.product-card{
background:#fff;
border:1px solid #eee;
border-radius:10px;
overflow:hidden;
transition:0.3s;
}

.product-card:hover{
box-shadow:0 10px 25px rgba(0,0,0,0.1);
transform:translateY(-3px);
}

/* ==============================
PRODUCT IMAGE
============================== */
/* ==============================
PRODUCT IMAGE
============================== */

.product-img{
width:100%;
height:300px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
padding:10px;
overflow:hidden;
}

.product-img img{
max-width:100%;
max-height:100%;
width:auto !important;
height:auto !important;
object-fit:contain;
display:block;
}
/* ==============================
DISCOUNT BADGE
============================== */

.discount-badge{
position:absolute;
top:10px;
left:10px;
background:#ff4d4d;
color:#fff;
font-size:12px;
padding:4px 8px;
border-radius:4px;
}

/* ==============================
PRODUCT INFO
============================== */

.product-info{
padding:15px;
}

.product-name{
font-size:17px;
font-weight:600;
margin-bottom:6px;
}

.product-desc{
font-size:14px;
color:#666;
margin-bottom:10px;
}

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

.price-box{
margin-bottom:10px;
}

.offer-price{
font-size:18px;
font-weight:700;
color:#111;
}

.old-price{
font-size:14px;
text-decoration:line-through;
color:#888;
margin-left:8px;
}

/* ==============================
BUTTONS
============================== */

.product-buttons{
display:flex;
gap:10px;
}

.buy-btn{
flex:1;
background:#ff7a00;
color:white;
text-align:center;
padding:8px;
border-radius:5px;
text-decoration:none;
font-size:14px;
}

.buy-btn:hover{
background:#e46700;
}

.cart-btn{
flex:1;
background:#222;
color:white;
border:none;
padding:8px;
border-radius:5px;
cursor:pointer;
font-size:14px;
}

.cart-btn:hover{
background:#000;
}

/* ==============================
RESPONSIVE
============================== */

@media(max-width:1100px){

.product-grid{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:768px){

.products-page{
flex-direction:column;
}

.filter-sidebar{
width:100%;
}

.product-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:480px){

.product-grid{
grid-template-columns:1fr;
}

}