/* ==========================================
   COLLECTION HERO
========================================== */

.collection-hero{
    position: relative;
    text-align: center;
    padding: 160px 8% 100px;
    background-color:#fffeff;
     background-repeat: no-repeat;
    background-image:url("../images/background.png") ;
    background-position: right center;
    background-size: 45% auto;
    text-align:center;
    padding:170px 8% 80px;

}

.collection-hero .hero-tag{

    display:inline-block;

    background:#e6f3e9;

    color:#21452A;

    padding:8px 18px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:20px;

    letter-spacing:1px;

}

.collection-hero h1{

    font-size:58px;

    line-height:1.1;

    color:#152818;

    margin-bottom:20px;

}
.collection-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255,0.45);
}

.collection-hero p{

    max-width:650px;

    margin:auto;

    color:#666;

    font-size:18px;

}
.collection-hero .hero-tag,.collection-hero h1,.collection-hero p {
    position: relative;
    z-index: 1;
}


/* ==========================================
   FILTER BAR
========================================== */

.product-controls{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 8% 40px;
    flex-wrap:wrap;
    gap:20px;

}

.types{

    display:flex;
    gap:15px;
    flex-wrap:wrap;

}

.types button{

    border:1px solid #ddd;
    background:#fff;
    color:#333;

    padding:12px 22px;

    border-radius:30px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.3s ease;

}

.types button:hover{

    background:#21452A;

    color:#fff;

    border-color:#21452A;

}

.types button.active{

    background:#21452A;

    color:#fff;

    border-color:#21452A;

}

.sort select{

    padding:12px 20px;

    border-radius:30px;

    border:1px solid #ddd;

    cursor:pointer;

    outline:none;

}

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

.products-grid{

    display:grid;

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

    gap:35px;

    padding:0 8% 80px;

}


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

.product-card{

    background:white;

    border-radius:20px;

    overflow:hidden;

    position:relative;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.product-card:hover{

    transform:translateY(-8px);

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

}


/* Badge */

.badge{

    position:absolute;

    top:20px;

    left:20px;

    background:#dff4e5;

    color:#21452A;

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}


/* Product Image */

.product-card img{

    width:100%;

    height:300px;

    object-fit:contain;

    background:#fafafa;

    padding:25px;

    transition:.4s;

}

.product-card:hover img{

    transform:scale(1.05);

}


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

.product-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

}

.product-info h3{

    font-size:20px;

    color:#222;

}

.product-info span{

    font-weight:700;

    color:#21452A;

}


/* ==========================================
   COLORS
========================================== */

.colors{

    display:flex;

    gap:10px;

    padding:0 20px 18px;

}

.colors span{

    width:18px;

    height:18px;

    border-radius:50%;

    border:1px solid #ccc;

    cursor:pointer;

}

.green{

    background:#21452A;

}

.black{

    background:black;

}

.gray{

    background:#d7d7d7;

}

.white{

    background:white;

}


/* ==========================================
   SIZES
========================================== */

.sizes{

    display:flex;

    gap:8px;

    padding:0 20px 25px;

    flex-wrap:wrap;

}

.sizes span{

    border:1px solid #ddd;

    border-radius:6px;

    padding:5px 10px;

    font-size:13px;

    transition:.3s;

    cursor:pointer;

}

.sizes span:hover{

    background:#21452A;

    color:white;

}


/* ==========================================
   LOAD MORE
========================================== */

.load-more{

    text-align:center;

    margin-bottom:90px;

}

.load-more button{

    padding:15px 45px;

    border-radius:35px;

    border:2px solid #21452A;

    background:white;

    color:#21452A;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.load-more button:hover{

    background:#21452A;

    color:white;

}


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

@media(max-width:900px){

.collection-hero h1{

    font-size:42px;

}

.product-controls{

    flex-direction:column;

    align-items:flex-start;

}

.products-grid{

    grid-template-columns:1fr;

}


.product-link{
    text-decoration: none;
    color: inherit;
    display: block;
}

.product-link:hover{
    text-decoration: none;
    color: inherit;
}

}