/* =========================
   BANNER BOUTIQUE
========================= */


.shop-banner{

height:420px;
background:
linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.55)
),
url("../images/banner-shop.jpg");

background-size:cover;
background-position:center;

display:flex;
align-items:center;
justify-content:center;

text-align:center;
color:white;

}



.shop-banner h1{

font-family:'Playfair Display',serif;
font-size:65px;
margin-bottom:15px;

}



.shop-banner p{

font-size:20px;

}









/* =========================
   OUTILS RECHERCHE
========================= */


.shop-tools{

padding:60px 7%;
display:flex;
justify-content:space-between;
align-items:center;
gap:30px;

}



.search-box{

width:50%;
height:60px;

background:white;

border-radius:50px;

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

display:flex;
align-items:center;

padding:0 25px;

}



.search-box i{

font-size:20px;
color:var(--green);
margin-right:15px;

}



.search-box input{

border:none;
outline:none;

width:100%;

font-size:16px;

}






.filters{

display:flex;
gap:20px;

}



.filters select{

height:55px;

padding:0 25px;

border-radius:30px;

border:1px solid #ddd;

background:white;

font-size:15px;

cursor:pointer;

}









/* =========================
   CATEGORIES RAPIDES
========================= */


.quick-category{

padding:20px 7% 50px;

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}



.category-btn{

padding:12px 30px;

border-radius:50px;

background:white;

border:2px solid var(--green);

color:var(--green);

font-weight:600;

transition:.4s;

}



.category-btn:hover,
.category-btn.active{

background:var(--green);

color:white;

transform:translateY(-4px);

}









/* =========================
   PRODUITS BOUTIQUE
========================= */


.shop-products{

padding:30px 7% 100px;

}



.product-grid{

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

}




.shop-card{

position:relative;

animation:showProduct .7s ease;

}



@keyframes showProduct{

from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}

}








/* IMAGE PRODUIT */


.card-image{

height:450px;

}



.card-overlay{

position:absolute;

inset:0;

background:
rgba(0,0,0,.45);

display:flex;

justify-content:center;

align-items:center;

gap:20px;

opacity:0;

transition:.4s;

}



.card-image:hover .card-overlay{

opacity:1;

}



.card-overlay a{

width:50px;

height:50px;

background:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:var(--green);

font-size:20px;

transition:.3s;

}



.card-overlay a:hover{

background:var(--red);

color:white;

transform:scale(1.15);

}








/* PROMOTION */

.tag.promo{

background:var(--green);

}









/* BOUTONS */

.details-btn{

color:var(--green);

font-weight:600;

transition:.3s;

}



.details-btn:hover{

background:var(--green);

color:white;

}



.order-btn{

font-weight:600;

transition:.3s;

}



.order-btn:hover{

background:#05652f;

transform:scale(1.05);

}









/* =========================
   PAGINATION FUTURE
========================= */


.pagination{

display:flex;

justify-content:center;

gap:15px;

margin-top:50px;

}



.pagination button{

width:45px;

height:45px;

border-radius:50%;

background:white;

border:1px solid #ddd;

}



.pagination button.active{

background:var(--green);

color:white;

}









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


@media(max-width:1000px){


.shop-tools{

flex-direction:column;

}



.search-box{

width:100%;

}



.filters{

width:100%;

justify-content:center;

}



.product-grid{

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

}



}





@media(max-width:600px){


.shop-banner h1{

font-size:40px;

}



.product-grid{

grid-template-columns:1fr;

}



.filters{

flex-direction:column;

}



.filters select{

width:100%;

}



}

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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:100px 8%;

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #0b8f45 0%,
        #ffffff 50%,
        #c1121f 100%
    );

}