/* ==========================
   RESET
========================== */

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

body{
    font-family:'Segoe UI',sans-serif;
    background:#f6f7f8;
    color:#222;
}

/* ==========================
   SHOP LAYOUT
========================== */

.shop-container{
    max-width:1400px;
    margin:35px auto;
    display:grid;
    grid-template-columns:280px 1fr;
    gap:30px;
    padding:0 20px;
}

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

.sidebar{

    background:#fff;

    border-radius:18px;

    padding:25px;

    height:fit-content;

    box-shadow:0 5px 18px rgba(0,0,0,.08);

    position:sticky;

    top:20px;

}

.filter-heading{

    font-size:22px;

    margin-bottom:25px;

    display:flex;

    align-items:center;

    gap:10px;

}

.filter-box{

    margin-bottom:30px;

}

.filter-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:17px;

    font-weight:600;

    margin-bottom:18px;

    cursor:pointer;

}

.checkbox{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    font-size:15px;

}

.checkbox input{

    width:18px;

    height:18px;

}

.price-inputs{

    display:flex;

    gap:10px;

    margin-bottom:15px;

}

.price-inputs input{

    width:100%;

    padding:10px;

    border:1px solid #ddd;

    border-radius:8px;

}

.price-slider{

    width:100%;

}

.apply-btn{

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#00b36b;

    color:#fff;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}

.apply-btn:hover{

    background:#00985b;

}

/* ==========================
   TOP BAR
========================== */

.top-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.sort-select{

    padding:12px 18px;

    border:1px solid #ddd;

    border-radius:10px;

    background:#fff;

    cursor:pointer;

}

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

.products-grid{

    display:grid;

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

    gap:25px;

}

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

.product-card{

    background:#fff;

    border-radius:20px;

    padding:18px;

    transition:.3s;

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

}

.product-card:hover{

    transform:translateY(-6px);

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

}

.country-image{

    width:72px;

    height:72px;

    border-radius:14px;

    object-fit:cover;

}

.card-top{

    margin-bottom:18px;

}

.product-info h3{

    font-size:20px;

    margin-bottom:10px;

    font-weight:700;

}

.rating{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:15px;

    font-size:14px;

}

.stars{

    color:#00c56d;

    font-size:15px;

}

.price-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:12px;

}

.price{

    font-size:26px;

    font-weight:bold;

    color:#111;

}

.old-price{

    color:#999;

    text-decoration:line-through;

    font-size:14px;

    margin-top:4px;

}

.arrow-btn{

    width:44px;

    height:44px;

    border-radius:50%;

    border:none;

    background:#dff8ea;

    color:#00a95c;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

.arrow-btn:hover{

    background:#00b36b;

    color:#fff;

}

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

@media(max-width:992px){

.shop-container{

grid-template-columns:1fr;

}

.sidebar{

position:static;

}

}

@media(max-width:768px){

.top-bar{

flex-direction:column;

gap:15px;

align-items:flex-start;

}

.products-grid{

grid-template-columns:1fr;

}

}