/*=====================================
=====
        GOOGLE FONTS
=======================================
===*/
/*@import url('https://fonts.googleapis.com/css2
?family=Playfair+Display:wght@600;700;800&
family=Poppins:wght@300;400;500;600;700&
display=swap');
/*=====================================
=====
        ROOT VARIABLES
=======================================
===*/
:root{
    --primary:#111111;
    --secondary:#ffffff;
    --accent:#C8A96A;
    --light:#F8F8F8;
    --text:#6B7280;
    --shadow:0 15px 35px rgba(0,0,0,.08);
    --radius:15px;
}
/*=====================================
=====
        RESET
=======================================
===*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:'Poppins',sans-serif;
    background:var(--secondary);
    color:var(--primary);
    overflow-x:hidden;
    line-height:1.7;
}
img{
    width:100%;
    display:block;
}
a{
    text-decoration:none;
    color:inherit;
}
ul{
    list-style:none;
}
button{
    border:none;
    cursor:pointer;
    font-family:inherit;
}
.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}
/*=====================================
=====
        BUTTONS
=======================================
===*/
.btn-primary{
    display:inline-block;
    padding:14px 34px;
    background:var(--accent);
    color:white;
    border-radius:50px;
    transition:.4s;
}
.btn-primary:hover{
    background:var(--primary);
}
.btn-secondary{
    display:inline-block;
    padding:14px 34px;
    border:2px solid var(--accent);
    color:var(--accent);
    border-radius:50px;
    transition:.4s;
}
.btn-secondary:hover{
    background:var(--accent);
    color:white;
}
/*=====================================
=====
        SECTION HEADER
=======================================
===*/
.section-header{
    text-align:center;
    margin-bottom:60px;
}
.section-header span{
    color:var(--accent);
    letter-spacing:2px;
    font-size:.9rem;
    font-weight:600;
}
.section-header h2{
    font-family:'Playfair Display',serif;
    font-size:3rem;
    margin:15px 0;
}
.section-header p{
    max-width:650px;
    margin:auto;
    color:var(--text);
}
/*=====================================
=====
        HEADER
=======================================
===*/
header{
    position:fixed;
    width:100%;
    top:0;
    left:0;
    background:white;
    box-shadow:var(--shadow);
    z-index:1000;
}
nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:85px;
}
.logo{
    font-family:'Playfair Display',serif;
    font-size:2rem;
    font-weight:700;
}
.logo span{
    color:var(--accent);
}
.nav-links{
    display:flex;
    gap:35px;
}
.nav-links a{
    font-weight:500;
    transition:.3s;
}
.nav-links a:hover,
.nav-links .active{
    color:var(--accent);
}
.nav-icons{
    display:flex;
    gap:25px;
    align-items:center;
}
.nav-icons a{
    position:relative;
    font-size:1.1rem;
}
.cart-count{
    position:absolute;
    top:-8px;
    right:-10px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#e63946;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:12px;
    font-weight: bold;
}
.menu-toggle{
    display:none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}
.menu-toggle span{
    width: 28px;
    height: 3px;
    background: var(--primary);
    border-radius: 5px;
}
/*=====================================
=====
        HERO SECTION
=======================================
===*/
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    background:linear-gradient(rgba(0,0,0,.45),
    rgba(0,0,0,.45)),
    url('../assets/Home-banner.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:white;
    padding-top:90px;
}
.hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px;
}
.hero-content span{
    color:var(--accent);
    letter-spacing:3px;
    font-weight:600;
}
.hero-content h1{
    font-family:'Playfair Display',serif;
    font-size:4.5rem;
    line-height:1.1;
    margin:20px 0;
}
.hero-content p{
    max-width:550px;
    color:#f2f2f2;
    margin-bottom:35px;
    font-size:1.05rem;
}
.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}
.hero-image{
    display:none;
}
/*=====================================
=====
        FEATURES
=======================================
===*/
.features{
    padding:80px 0;
    background:var(--light);
}
.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}
.feature{
    background:white;
    padding:35px 25px;
    text-align:center;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:.4s;
}
.feature:hover{
    transform:translateY(-10px);
}
.feature i{
    font-size:2.5rem;
    color:var(--accent);
    margin-bottom:20px;
}
.feature h3{
    margin-bottom:10px;
}
.feature p{
    color:var(--text);
}
/*=====================================
=====
        CATEGORIES
=======================================
===*/
.categories{
    padding:100px 0;
}
.category-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}
.category-card{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    cursor:pointer;
}
.category-card img{
    height:450px;
    object-fit:cover;
    transition:.5s;
}
.category-card:hover img{
    transform:scale(1.08);
}
.category-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(transparent,
    rgba(0,0,0,.75));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:30px;
    color:white;
}
.category-overlay h3{
    font-family:'Playfair Display',serif;
    font-size:2rem;
    margin-bottom:10px;
}
.category-overlay a{
    color:var(--accent);
    font-weight:600;
}
/*=====================================
=====
        PRODUCTS
=======================================
===*/
.new-arrivals,
.best-sellers{
    padding:100px 0;
    background:var(--light);
}
.product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}
/*=====================================
=====
        PRODUCT CARD
=======================================
===*/
.product-card{
    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.4s;
}
.product-card:hover{
    transform:translateY(-10px);
}
.product-image{
    overflow:hidden;
}
.product-image img{
    height:350px;
    object-fit:cover;
    transition:.5s;
}
.product-card:hover .product-image img{
    transform:scale(1.08);
}
.product-info{
    padding:25px;
}
.product-info h3{
    font-size:1.2rem;
    margin-bottom:10px;
}
.price{
    color:var(--accent);
    font-size:1.4rem;
    font-weight:700;
    margin-bottom:20px;
}
.add-cart{
    width:100%;
    padding:14px;
    background:var(--primary);
    color:white;
    border-radius:50px;
    transition:.3s;
}
.add-cart:hover{
    background:var(--accent);
}
/*=====================================
=====
        TRENDING
=======================================
===*/
.trending{
    padding:100px 0;
}
.trending .container{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px;
}
.trending-content span{
    color:var(--accent);
    letter-spacing:2px;
    font-weight:600;
}
.trending-content h2{
    font-family:'Playfair Display',serif;
    font-size:3.5rem;
    margin:20px 0;
}
.trending-content p{
    color:var(--text);
    margin-bottom:30px;
}
.trending-image img{
    border-radius:20px;
    box-shadow:var(--shadow);
}
/*=====================================
=====
        NEWSLETTER
=======================================
===*/
.newsletter{
    padding:100px 0;
    background:var(--primary);
    color:white;
    text-align:center;
}
.newsletter h2{
    font-family:'Playfair Display',serif;
    font-size:3rem;
    margin-bottom:20px;
}
.newsletter p{
    max-width:650px;
    margin:auto;
    margin-bottom:35px;
}
.newsletter form{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}
.newsletter input{
    width:420px;
    max-width:100%;
    padding:16px;
    border:none;
    border-radius:50px;
}
.newsletter button{
    padding:16px 35px;
    background:var(--accent);
    color:white;
    border-radius:50px;
}
/*=====================================
=====
        FOOTER
=======================================
===*/
footer{
    background:#0d0d0d;
    color:white;
    text-align:center;
    padding:70px 20px;
}
footer h2{
    font-family:'Playfair Display',serif;
    font-size:2.5rem;
    margin-bottom:20px;
}
.footer-links{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    margin:30px 0;
}
.footer-links a{
    transition:.3s;
}
.footer-links a:hover{
    color:var(--accent);
}
/*=====================================
=====
        SHOP HERO
=======================================
===*/
.shop-hero{
    height:55vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(rgba(0,0,0,.55),
    rgba(0,0,0,.55)),
    url('../assets/Shop-banner.jpg');
    background-size:cover;
    background-position:center;
    color:white;
}
.shop-hero span{
    color:var(--accent);
    letter-spacing:3px;
}
.shop-hero h1{
    font-family:'Playfair Display',serif;
    font-size:4rem;
    margin:15px 0;
}
.shop-hero p{
    max-width:650px;
    margin:auto;
}
/*=====================================
=====
        SHOP
=======================================
===*/
.shop{
    padding:100px 0;
}
.shop-layout{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
}
/*=====================================
=====
        FILTERS
=======================================
===*/
.filters{
    background:var(--light);
    padding:30px;
    border-radius:20px;
    box-shadow:var(--shadow);
    height:fit-content;
}
.filters h3{
    margin:25px 0 15px;
}
.filters ul li{
    padding:10px 0;
    cursor:pointer;
    transition:.3s;
}
.filters ul li:hover{
    color:var(--accent);
}
.filters input[type="range"]{
    width:100%;
    margin:20px 0;
}
.sizes{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.sizes button{
    width:45px;
    height:45px;
    border-radius:50%;
    background:white;
    border:1px solid #ddd;
    transition:.3s;
}
.sizes button:hover{
    background:var(--accent);
    color:white;
}
/*=====================================
=====
        SHOP PRODUCTS
=======================================
===*/
.shop-products{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
/*=====================================
=====
        PRODUCT BADGES
=======================================
===*/
.product-card{
    position:relative;
}
.product-badge{
    position:absolute;
    top:15px;
    left:15px;
    background:crimson;
    color:white;
    padding:8px 16px;
    border-radius:30px;
    font-size:.8rem;
    font-weight:600;
}
/*=====================================
=====
        PRODUCT HERO
=======================================
===*/
.product-hero{
    height:45vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:linear-gradient(rgba(0,0,0,.55),
    rgba(0,0,0,.55)),
    url('../assets/Shop-banner.jpg');
    background-size:cover;
    background-position:center;
    color:white;
}
.product-hero span{
    color:var(--accent);
    letter-spacing:3px;
}
.product-hero h1{
    font-family:'Playfair Display',serif;
    font-size:3.5rem;
    margin-top:15px;
}
/*=====================================
=====
        PRODUCT DETAILS
=======================================
===*/
.product-details{
    padding:100px 0;
}
.product-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}
/*=====================================
=====
        PRODUCT IMAGE
=======================================
===*/
.product-gallery img{
    border-radius:20px;
    box-shadow:var(--shadow);
}
/*=====================================
=====
        PRODUCT CONTENT
=======================================
===*/
.product-content h2{
    font-family:'Playfair Display',serif;
    font-size:3rem;
    margin-bottom:20px;
}
.rating{
    color:#f5b301;
    margin-bottom:20px;
}
.rating span{
    color:var(--text);
    margin-left:10px;
}
.product-content p{
    color:var(--text);
    margin:20px 0;
}
/*=====================================
=====
        SIZE & COLOR
=======================================
===*/
.sizes,
.colors{
    margin:30px 0;
}
.sizes button,
.colors button{
    margin:10px 10px 0 0;
    padding:12px 20px;
    background:white;
    border:1px solid #ddd;
    border-radius:50px;
    transition:.3s;
}
.sizes button:hover,
.colors button:hover{
    background:var(--accent);
    color:white;
}
/*=====================================
=====
        QUANTITY
=======================================
===*/
.quantity{
    margin:30px 0;
}
.quantity input{
    width:90px;
    padding:12px;
    text-align:center;
    border:1px solid #ddd;
    border-radius:10px;
}
/*=====================================
=====
        PRODUCT BUTTONS
=======================================
===*/
.product-buttons{
    display:flex;
    gap:20px;
    margin-top:35px;
    flex-wrap:wrap;
}
/*=====================================
=====
        RELATED PRODUCTS
=======================================
===*/
.related-products{
    padding:100px 0;
    background:var(--light);
}
/*=====================================
=====
        CART HERO
=======================================
===*/
.cart-hero{
    height:45vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:linear-gradient(rgba(0,0,0,.55),
    rgba(0,0,0,.55)),
    url('../assets/Shop-banner.jpg');
    background-size:cover;
    background-position:center;
    color:white;
}
.cart-hero h1{
    font-family:'Playfair Display',serif;
    font-size:3.5rem;
    margin:15px 0;
}
.cart-hero span{
    color:var(--accent);
    letter-spacing:3px;
}
/*=====================================
=====
        CART
=======================================
===*/
.cart{
    padding:100px 0;
}
.cart-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
}
/*=====================================
=====
        CART ITEM
=======================================
===*/
.cart-item{
    display:grid;
    grid-template-columns:120px 1fr auto auto;
    gap:25px;
    align-items:center;
    background:white;
    padding:25px;
    border-radius:20px;
    box-shadow:var(--shadow);
    margin-bottom:25px;
}
.cart-item img{
    height:120px;
    object-fit:cover;
    border-radius:15px;
}
.cart-info h3{
    margin-bottom:10px;
}
.cart-info p{
    color:var(--accent);
    font-size:1.2rem;
    font-weight:600;
}
/*=====================================
=====
        CART QUANTITY
=======================================
===*/
.cart-quantity{
    display:flex;
    align-items:center;
    gap:12px;
}
.cart-quantity button{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--light);
    transition:.3s;
}
.cart-quantity button:hover{
    background:var(--accent);
    color:white;
}
/*=====================================
=====
        REMOVE BUTTON
=======================================
===*/
.remove-item{
    padding:12px 20px;
    background:crimson;
    color:white;
    border-radius:50px;
    transition:.3s;
}
.remove-item:hover{
    opacity:.85;
}
/*=====================================
=====
        ORDER SUMMARY
=======================================
===*/
.cart-summary{
    background:white;
    padding:35px;
    border-radius:20px;
    box-shadow:var(--shadow);
    height:fit-content;
}
.cart-summary h2{
    margin-bottom:25px;
}
.summary-row{
    display:flex;
    justify-content:space-between;
    margin:18px 0;
}
.summary-row.total{
    font-size:1.3rem;
    font-weight:700;
    color:var(--accent);
}
.cart-summary input{
    width:100%;
    padding:15px;
    margin:25px 0;
    border:1px solid #ddd;
    border-radius:12px;
}
.cart-summary .btn-primary,
.cart-summary .btn-secondary{
    display:block;
    width:100%;
    text-align:center;
    margin-bottom:15px;
}
/*=====================================
=====
        CONTINUE SHOPPING
=======================================
===*/
.continue-shopping{
    padding-bottom:100px;
    text-align:center;
}
/*=====================================
=====
        CHECKOUT HERO
=======================================
===*/
.checkout-hero{
    height:45vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:linear-gradient(rgba(0,0,0,.55),
    rgba(0,0,0,.55)),
    url('../assets/Checkout-banner.jpg');
    background-size:cover;
    background-position:center;
    color:white;
}
.checkout-hero span{
    color:var(--accent);
    letter-spacing:3px;
}
.checkout-hero h1{
    font-family:'Playfair Display',serif;
    font-size:3.5rem;
    margin:15px 0;
}
.checkout-hero p{
    max-width:650px;
    margin:auto;
}
/*=====================================
=====
        BILLING FORM
=======================================
===*/
.checkout-form{
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:var(--shadow);
}
.checkout-form h2{
    margin-bottom:25px;
    font-family:'Playfair Display',serif;
}
.checkout-form input{
    width:100%;
    padding:16px;
    margin-bottom:18px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:1rem;
}
.checkout-form input:focus{
    outline:none;
    border-color:var(--accent);
}
/*=====================================
=====
        PAYMENT
=======================================
===*/
.checkout-form label{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 0;
    cursor:pointer;
    border-bottom:1px solid #eee;
}
.checkout-form input[type="radio"]{
    width:auto;
    margin:0;
}
/*=====================================
=====
        PLACE ORDER
=======================================
===*/
.checkout-form .btn-primary{
    width:100%;
    margin-top:30px;
    text-align:center;
}
/*=====================================
=====
        ORDER SUMMARY
=======================================
===*/
.order-summary{
    background:white;
    padding:35px;
    border-radius:20px;
    box-shadow:var(--shadow);
    height:fit-content;
}
.order-summary h2{
    margin-bottom:25px;
    font-family:'Playfair Display',serif;
}
.order-summary hr{
    margin:25px 0;
    border:none;
    border-top:1px solid #ddd;
}
.order-summary .summary-row{
    display:flex;
    justify-content:space-between;
    margin:15px 0;
}
.order-summary .total{
    font-size:1.3rem;
    color:var(--accent);
    font-weight:700;
}
.checkout-form input:hover{
    border-color:var(--accent);
    transition:.3s;
}
/*=====================================
=====
        ABOUT HERO
=======================================
===*/
.about-hero{
    height:50vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:linear-gradient(rgba(0,0,0,.55),
    rgba(0,0,0,.55)),
    url('../assets/About-banner.jpg');
    background-size:cover;
    background-position:center;
    color:white;
}
.about-hero span{
    color:var(--accent);
    letter-spacing:3px;
}
.about-hero h1{
    font-family:'Playfair Display',serif;
    font-size:3.8rem;
    margin:20px 0;
}
.about-hero p{
    max-width:650px;
    margin:auto;
}
/*=====================================
=====
        OUR STORY
=======================================
===*/
.our-story{
    padding:100px 0;
}
.story-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}
.story-image img{
    border-radius:20px;
    box-shadow:var(--shadow);
}
.story-content span{
    color:var(--accent);
    letter-spacing:2px;
    font-weight:600;
}
.story-content h2{
    font-family:'Playfair Display',serif;
    font-size:3rem;
    margin:20px 0;
}
.story-content p{
    color:var(--text);
    margin-bottom:20px;
}
/*=====================================
=====
        MISSION
=======================================
===*/
.mission{
    padding:100px 0;
    background:var(--light);
}
.mission-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.mission-card{
    background:white;
    padding:40px 30px;
    text-align:center;
    border-radius:20px;
    box-shadow:var(--shadow);
    transition:.4s;
}
.mission-card:hover{
    transform:translateY(-10px);
}
.mission-card i{
    font-size:3rem;
    color:var(--accent);
    margin-bottom:20px;
}
.mission-card h3{
    margin-bottom:15px;
}
.mission-card p{
    color:var(--text);
}
/*=====================================
=====
        WHY CHOOSE US
=======================================
===*/
.why-us{
    padding:100px 0;
}
.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}
.why-card{
    background:white;
    padding:35px;
    text-align:center;
    border-radius:20px;
    box-shadow:var(--shadow);
    transition:.4s;
}
.why-card:hover{
    background:var(--primary);
    color:white;
}
.why-card p{
    margin-top:15px;
    color:var(--text);
}
.why-card:hover p{
    color:#ddd;
}
/*=====================================
=====
        OUR VALUES
=======================================
===*/
.values{
    padding:100px 0;
    background:var(--light);
}
.values-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.value-card{
    background:white;
    padding:35px;
    border-radius:20px;
    box-shadow:var(--shadow);
    transition:.4s;
}
.value-card:hover{
    transform:translateY(-8px);
}
.value-card h3{
    margin-bottom:15px;
    color:var(--accent);
}
.value-card p{
    color:var(--text);
}
/*=====================================
=====
        CONTACT HERO
=======================================
===*/
.contact-hero{
    height:50vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:linear-gradient(rgba(0,0,0,.55),
    rgba(0,0,0,.55)),
    url('../assets/Contact-banner.jpg');
    background-size:cover;
    background-position:center;
    color:white;
}
.contact-hero span{
    color:var(--accent);
    letter-spacing:3px;
}
.contact-hero h1{
    font-family:'Playfair Display',serif;
    font-size:3.8rem;
    margin:20px 0;
}
.contact-hero p{
    max-width:650px;
    margin:auto;
}
/*=====================================
=====
        CONTACT INFO
=======================================
===*/
.contact-info{
    padding:100px 0;
}
.contact-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.contact-card{
    background:white;
    padding:40px 30px;
    text-align:center;
    border-radius:20px;
    box-shadow:var(--shadow);
    transition:.4s;
}
.contact-card:hover{
    transform:translateY(-10px);
}
.contact-card i{
    font-size:3rem;
    color:var(--accent);
    margin-bottom:20px;
}
.contact-card h3{
    margin-bottom:15px;
}
.contact-card p{
    color:var(--text);
}
/*=====================================
=====
        CONTACT FORM
=======================================
===*/
.contact-form{
    padding:100px 0;
    background:var(--light);
}
.contact-form form{
    max-width:700px;
    margin:40px auto 0;
}
.contact-form input,
.contact-form textarea{
    width:100%;
    padding:18px;
    margin-bottom:20px;
    border:1px solid #ddd;
    border-radius:15px;
    font-size:1rem;
    font-family:inherit;
    resize:none;
}
.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:var(--accent);
}
.contact-form button{
    width:100%;
}
/*=====================================
=====
        STORE HOURS
=======================================
===*/
.store-hours{
    padding:100px 0;
}
.hours-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.hours-grid div{
    background:white;
    text-align:center;
    padding:35px;
    border-radius:20px;
    box-shadow:var(--shadow);
}
.hours-grid strong{
    color:var(--accent);
    display:block;
    margin-top:10px;
}
/*=====================================
=====
        FAQ
=======================================
===*/
.faq{
    padding:100px 0;
    background:var(--light);
}
.faq-item{
    background:white;
    padding:30px;
    margin-bottom:25px;
    border-radius:20px;
    box-shadow:var(--shadow);
}
.faq-item h3{
    margin-bottom:15px;
    color:var(--primary);
}
.faq-item p{
    color:var(--text);
}
#topBtn{
    position:fixed;
    bottom:30px;
    right:30px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:var(--accent);
    color:white;
    font-size:1.3rem;
    cursor:pointer;
    display:none;
    z-index:999;
}
.cart-quantity{
    display:flex;
    align-items:center;
    gap:15px;
}
.cart-quantity button{
    width:35px;
    height:35px;
    border:none;
    background:var(--accent);
    color:white;
    cursor:pointer;
    border-radius:50%;
    font-size:18px;
}
.remove-item{
    padding:12px 20px;
    border:none;
    background:#d62828;
    color:white;
    border-radius:10px;
    cursor:pointer;
}
.search-box{
margin:40px 0;
text-align:center;
}
.search-box input{
width:100%;
max-width:450px;
padding:15px 20px;
border:1px solid #ddd;
border-radius:50px;
font-size:16px;
outline:none;
transition:.3s;
}
.search-box input:focus{
border-color:#000;
}
.filter-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    margin:30px 0;
}
.filter-btn{
    padding:12px 25px;
    border:none;
    border-radius:30px;
    cursor:pointer;
    background:#eee;
    transition:.3s;
}
.filter-btn:hover{
    background:#000;
    color:#fff;
}
.filter-btn.active{
    background:#000;
    color:#fff;
}
.sort-container{
display:flex;
justify-content:flex-end;
align-items:center;
gap:10px;
margin:20px 0;
}
.sort-container select{
padding:10px 15px;
border-radius:8px;
cursor:pointer;
}
.wishlist-btn{
    position:absolute;
    top:15px;
    right:15px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:white;
    cursor:pointer;
    font-size:20px;
    z-index:100;
}
.cart-icon{
    position: relative;
    font-size: 1.5rem;
    color: #222;
    text-decoration: none;
}