/*==================================================
        GÜVENÇ ZEYTİNYAĞ
        PRODUCTS V3
==================================================*/

:root{

    --gold:#d4af37;
    --gold-light:#f3d977;
    --green:#123321;
    --green2:#1a472d;
    --green3:#0d2217;

    --white:#ffffff;
    --text:#e9ecef;
    --muted:#bfc5c8;

    --glass:rgba(255,255,255,.07);
    --glass-border:rgba(255,255,255,.12);

}

.products-page{

    position:relative;

    width:100%;

    padding:35px 0 80px;

    background:

    radial-gradient(circle at top right,
    rgba(212,175,55,.10),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(255,255,255,.04),
    transparent 45%),

    linear-gradient(
        135deg,
        #08140d,
        #133421,
        #1d4d31
    );

    overflow:hidden;

}

.products-container{

    width:min(1450px,94%);
    margin:auto;

}

.products-layout{

    display:grid;

    grid-template-columns:

    300px

    minmax(0,1fr);

    gap:40px;

    align-items:start;

}

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

.products-sidebar{

    position:sticky;

    top:120px;

    border-radius:34px;

    background:var(--glass);

    backdrop-filter:blur(30px);

    border:1px solid var(--glass-border);

    padding:30px;

    overflow:hidden;

}

.products-sidebar::before{

    content:"";

    position:absolute;

    top:-130px;
    right:-130px;

    width:260px;
    height:260px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(212,175,55,.25),
    transparent);

}

.sidebar-title{

    color:white;

    font-size:34px;

    font-weight:800;

    margin-bottom:30px;

}

.filter-group{

    margin-bottom:35px;

}

.filter-group h3{

    color:var(--gold);

    font-size:19px;

    margin-bottom:20px;

}

.filter-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.filter-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:13px 18px;

    border-radius:16px;

    color:white;

    cursor:pointer;

    transition:.35s;

}

.filter-item:hover{

    background:

    rgba(212,175,55,.12);

    transform:translateX(8px);

}

.filter-count{

    width:36px;
    height:36px;

    border-radius:50%;

    background:

    rgba(255,255,255,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    font-weight:700;

}
/*=========================================
ÜRÜNLER
=========================================*/

.products-main{

    display:flex;
    flex-direction:column;
    gap:35px;

}

.products-toolbar{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

}

.products-title{

    color:#fff;
    font-size:44px;
    font-weight:800;

}

.products-subtitle{

    color:#cfd8d3;
    margin-top:8px;
    font-size:17px;

}

.products-search{

    width:380px;
    max-width:100%;
    position:relative;

}

.products-search input{

    width:100%;
    height:58px;

    border:none;
    outline:none;

    border-radius:20px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    color:white;

    padding:0 60px 0 22px;

    font-size:15px;

}

.products-search i{

    position:absolute;

    right:22px;
    top:50%;

    transform:translateY(-50%);

    color:#d4af37;

    font-size:18px;

}

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

.products-grid{

    width:100%;
    max-width:1400px;

    margin:40px auto;

    display:grid;

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

    gap:24px;

    padding:0 25px;

    box-sizing:border-box;

}

/*=========================================
KART
=========================================*/

.product-v2-card{
    width:100%;

    min-width:0;

    position:relative;

    border-radius:32px;

    overflow:hidden;

    background:

    linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.03));

    backdrop-filter:blur(30px);

    border:1px solid rgba(255,255,255,.10);

    transition:.45s;

    box-shadow:

    0 15px 45px rgba(0,0,0,.20);

}
/*==========================
PREMIUM PRODUCT EFFECT
==========================*/

.product-v2-card{

    position:relative;
    overflow:hidden;

    border-radius:32px;

    transition:.45s;

    background:linear-gradient(
    180deg,
    #26472d,
    #1d3824);

    border:1px solid rgba(255,255,255,.08);

}

.product-v2-card:hover{

    transform:
    translateY(-15px)
    scale(1.02);

    box-shadow:

    0 35px 80px rgba(0,0,0,.45);

}

.card-glow{

    position:absolute;
    inset:-150px;

    background:

    radial-gradient(
    circle,
    rgba(212,175,55,.28),
    transparent 65%);

    opacity:0;

    transition:.6s;

    pointer-events:none;

}

.product-v2-card:hover .card-glow{

    opacity:1;

}

.card-shine{

    position:absolute;

    top:-150%;
    left:-60%;

    width:70%;
    height:300%;

    transform:rotate(25deg);

    background:linear-gradient(
        transparent,
        rgba(255,255,255,.22),
        transparent
    );

    pointer-events:none;

    z-index:2;
}

.product-v2-card:hover .card-shine{

    animation:shine 1.3s linear;

}

@keyframes shine{

0%{

left:-70%;

}

100%{

left:170%;

}

}
.product-actions{

position:absolute;

top:18px;

right:18px;

display:flex;

flex-direction:column;

gap:12px;

z-index:50;

}

.circle-btn{

width:48px;

height:48px;

border:none;

border-radius:50%;

background:rgba(255,255,255,.18);

backdrop-filter:blur(12px);

color:white;

font-size:18px;

cursor:pointer;

transition:.35s;

}

.circle-btn:hover{

transform:scale(1.15);

background:#d4af37;

color:#111;

}
.favorite-btn:hover i{

animation:heartBeat .5s;

}

@keyframes heartBeat{

0%{transform:scale(1);}
30%{transform:scale(1.45);}
60%{transform:scale(.9);}
100%{transform:scale(1);}

}
.product-v2-card img{

transition:.6s;

}

.product-v2-card:hover img{

transform:scale(1.08);

}

.product-v2-card:hover{

    transform:

    translateY(-14px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.35);

}

.product-v2-card::before{

    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:240px;
    height:240px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(212,175,55,.30),

    transparent);

}

.product-v2-image{

    position:relative;

    height:340px;

    overflow:hidden;

}

.product-v2-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s;

}

.product-v2-card:hover img{

    transform:scale(1.08);

}

.product-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.12),

    rgba(0,0,0,.35)

    );

}

.product-badge{

    position:absolute;

    top:18px;
    left:18px;

    background:#d4af37;

    color:#222;

    padding:8px 15px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

}

.product-actions{

    position:absolute;

    top:22px;
    right:22px;

    display:flex;
    flex-direction:column;

    gap:12px;

    z-index:100;
}

.product-actions .circle-btn{

    width:52px;
    height:52px;

    border-radius:50%;

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

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.25);

    transition:.35s;

    cursor:pointer;

    color:#fff;
}

.product-actions .circle-btn:hover{

    transform:scale(1.12);

    background:#d4af37;

    color:#111;
}

.favorite-btn:hover{

    background:#d4af37;

    color:#111;

    transform:rotate(12deg);

}
/*=========================================
ÜRÜN BİLGİLERİ
=========================================*/

.product-v2-content{

    padding:26px;

}

.product-category{

    color:#9fb3a7;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:8px;

}

.product-title{

    color:#fff;

    font-size:32px;

    line-height:1.2;

    font-weight:800;

    margin-bottom:14px;

}

.product-desc{

    color:#b8c6be;

    font-size:15px;

    line-height:1.7;

    margin-bottom:18px;

}

/*========================
PUAN
========================*/

.product-rating{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.product-stars{

    color:#f5c84c;

    font-size:15px;

}

.product-review{

    color:#9ea7a2;

    font-size:13px;

}

/*========================
STOK
========================*/

.product-stock{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:22px;

    color:#89d68a;

    font-weight:600;

}

.stock-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#4cd964;

    box-shadow:0 0 10px #4cd964;

}

/*========================
FİYAT
========================*/

.product-price-area{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:28px;

}

.price-left{

    display:flex;

    flex-direction:column;

}

.old-price{

    color:#7b8a82;

    text-decoration:line-through;

    font-size:18px;

}

.new-price{

    color:#37d07f;

    font-size:42px;

    font-weight:900;

    line-height:1;

}

.discount-tag{

    background:#d4af37;

    color:#111;

    padding:8px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

}

/*========================
BUTONLAR
========================*/

.product-buttons{

    display:flex;

    gap:14px;

}

.buy-btn{

    flex:1;

    height:58px;

    border:none;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #d4af37,
        #f0cf67
    );

    color:#111;

    font-size:16px;

    font-weight:800;

    cursor:pointer;

    transition:.35s;

}

.buy-btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 35px rgba(212,175,55,.45);

}

.detail-btn{

    width:64px;
    height:56px;

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

    border-radius:18px;

    background:#3a5640;

    color:#fff;

    text-decoration:none;

    transition:.35s;

    font-size:20px;

    flex-shrink:0;

}

.detail-btn i{

    margin:0;
    line-height:1;

}

.detail-btn:hover{

    background:#fff;

    color:#111;

}
/*=========================================
PREMIUM HOVER EFFECTS
=========================================*/

.product-v2-card{

    isolation:isolate;

}

.product-v2-card::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:0;

    transition:.45s;

    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.18),
        transparent 35%,
        transparent 65%,
        rgba(212,175,55,.12)
    );

    pointer-events:none;

}

.product-v2-card:hover::after{

    opacity:1;

}

.product-v2-card:hover{

    border-color:rgba(212,175,55,.55);

}

.product-v2-card:hover .product-title{

    color:#f7d86d;

}

.product-v2-card:hover .product-category{

    color:#d4af37;

}

/*=========================================
SHINE
=========================================*/

.shine{

    position:absolute;

    top:-150%;

    left:-120%;

    width:70%;

    height:300%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:1.2s;

    z-index:8;

}

.product-v2-card:hover .shine{

    left:160%;

}

/*=========================================
IMAGE ZOOM
=========================================*/

.product-v2-card:hover .product-v2-image img{

    transform:

        scale(1.10)

        rotate(.8deg);

}

/*=========================================
BADGES
=========================================*/

.product-badges{

    position:absolute;

    top:18px;

    left:18px;

    display:flex;

    flex-direction:column;

    gap:10px;

    z-index:15;

}

.badge-premium{

    background:linear-gradient(
        135deg,
        #d4af37,
        #f6dc7b
    );

    color:#111;

    font-size:12px;

    font-weight:800;

    padding:8px 14px;

    border-radius:30px;

}

.badge-sale{

    background:#d83434;

    color:white;

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

.badge-new{

    background:#2ab76d;

    color:white;

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

/*=========================================
FEATURES
=========================================*/

.product-features{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:20px;

}

.product-features span{

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    color:#d8ddd9;

    font-size:12px;

    padding:8px 12px;

    border-radius:30px;

}

.product-v2-card:hover .product-features span{

    border-color:rgba(212,175,55,.25);

}

/*=========================================
STOCK PULSE
=========================================*/

.stock-dot{

    animation:pulseStock 2s infinite;

}

@keyframes pulseStock{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.35);

        opacity:.6;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/*=========================================
FLOAT ANIMATION
=========================================*/

.fade-up{

    animation:fadeCard .8s ease both;

}

@keyframes fadeCard{

    from{

        opacity:0;

        transform:

        translateY(35px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}
/*=========================================
PREMIUM HERO
=========================================*/

.products-hero{

    position:relative;

    overflow:hidden;

    border-radius:40px;

    margin-bottom:45px;

    padding:70px 60px;

    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.03)
    );

    backdrop-filter:blur(35px);

    border:1px solid rgba(255,255,255,.10);

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

}

.products-hero::before{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    right:-200px;
    top:-220px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.28),
        transparent
    );

}

.products-hero::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-170px;
    bottom:-220px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(255,255,255,.08),
        transparent
    );

}

.hero-content{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1fr 420px;

    gap:40px;

    align-items:center;

}

.hero-left small{

    display:inline-block;

    padding:10px 20px;

    border-radius:40px;

    background:rgba(212,175,55,.15);

    color:#d4af37;

    font-weight:700;

    letter-spacing:1px;

}

.hero-left h1{

    margin-top:25px;

    font-size:58px;

    font-weight:900;

    line-height:1.1;

    color:white;

}

.hero-left h1 span{

    color:#d4af37;

}

.hero-left p{

    margin-top:20px;

    color:#d6dad7;

    font-size:18px;

    line-height:1.8;

    max-width:650px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:35px;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 32px;

    border-radius:18px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.hero-btn.primary{

    background:linear-gradient(
        135deg,
        #d4af37,
        #f6dc7b
    );

    color:#111;

}

.hero-btn.primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 20px 45px rgba(212,175,55,.35);

}

.hero-btn.secondary{

    border:1px solid rgba(255,255,255,.15);

    color:white;

    background:rgba(255,255,255,.05);

}

.hero-btn.secondary:hover{

    background:rgba(255,255,255,.10);

}

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

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-circle{

    width:380px;

    height:380px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.25),
        rgba(255,255,255,.05)
    );

    display:flex;

    justify-content:center;

    align-items:center;

    animation:floatHero 6s ease-in-out infinite;

}

.hero-circle img{

    width:88%;

    filter:
        drop-shadow(0 30px 40px rgba(0,0,0,.30));

}

@keyframes floatHero{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}
/*=========================================
FILTER SEARCH
=========================================*/

.search-box{

    position:relative;

    margin-bottom:30px;

}

.search-box input{

    width:100%;

    height:60px;

    border:none;
    outline:none;

    border-radius:18px;

    padding:0 60px 0 20px;

    color:#fff;

    font-size:15px;

    background:
    rgba(255,255,255,.07);

    backdrop-filter:blur(20px);

}

.search-box input::placeholder{

    color:#cfcfcf;

}

.search-box i{

    position:absolute;

    right:22px;
    top:50%;

    transform:translateY(-50%);

    color:#d4af37;

    font-size:18px;

}

/*=========================================
SELECT
=========================================*/

.sort-box{

    margin-bottom:30px;

}

.sort-box select{

    width:100%;

    height:58px;

    border:none;
    outline:none;

    border-radius:18px;

    background:
    rgba(255,255,255,.07);

    color:#fff;

    padding:0 20px;

    font-size:15px;

    backdrop-filter:blur(20px);

}

.sort-box option{

    color:#111;

}

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

.price-filter{

    margin-top:30px;

}

.price-filter input[type=range]{

    width:100%;

    accent-color:#d4af37;

}

.price-values{

    display:flex;

    justify-content:space-between;

    margin-top:10px;

    color:#ddd;

    font-size:14px;

}

/*=========================================
CATEGORY LIST
=========================================*/

.category-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.category-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 18px;

    border-radius:16px;

    cursor:pointer;

    transition:.35s;

    background:rgba(255,255,255,.04);

}

.category-item:hover{

    background:

    rgba(212,175,55,.12);

    transform:translateX(8px);

}

.category-item span{

    color:#fff;

}

.category-item small{

    color:#d4af37;

}

/*=========================================
TOP INFO BOXES
=========================================*/

.top-stats{

    display:grid;

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

    gap:20px;

    margin-bottom:35px;

}

.stat-box{

    background:

    rgba(255,255,255,.07);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.10);

    border-radius:22px;

    padding:24px;

    text-align:center;

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-8px);

    border-color:#d4af37;

}

.stat-box h2{

    color:#d4af37;

    font-size:34px;

    font-weight:800;

    margin-bottom:8px;

}

.stat-box p{

    color:#ddd;

    margin:0;

}

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

.section-title{

    color:white;

    font-size:42px;

    font-weight:900;

    margin-bottom:12px;

}

.section-subtitle{

    color:#cfcfcf;

    font-size:17px;

    margin-bottom:35px;

}
/*=========================================
NEWSLETTER
=========================================*/

.newsletter-section{

    margin-top:70px;

    border-radius:35px;

    padding:70px 60px;

    background:

    linear-gradient(
        135deg,
        rgba(212,175,55,.10),
        rgba(255,255,255,.04)
    );

    border:1px solid rgba(255,255,255,.10);

    text-align:center;

    backdrop-filter:blur(30px);

}

.newsletter-section h2{

    color:#fff;

    font-size:44px;

    font-weight:900;

    margin-bottom:18px;

}

.newsletter-section p{

    color:#d5d5d5;

    max-width:700px;

    margin:0 auto 35px;

    line-height:1.8;

}

.newsletter-form{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.newsletter-form input{

    width:430px;

    height:60px;

    border:none;

    outline:none;

    border-radius:18px;

    background:rgba(255,255,255,.08);

    color:white;

    padding:0 20px;

}

.newsletter-form button{

    height:60px;

    padding:0 35px;

    border:none;

    border-radius:18px;

    background:#d4af37;

    color:#111;

    font-weight:800;

    transition:.35s;

}

.newsletter-form button:hover{

    transform:translateY(-4px);

}

/*=========================================
ADVANTAGES
=========================================*/

.advantages-row{

    display:grid;

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

    gap:22px;

    margin:70px 0;

}

.advantage-card{

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    border-radius:28px;

    padding:35px;

    text-align:center;

    transition:.35s;

    backdrop-filter:blur(20px);

}

.advantage-card:hover{

    transform:translateY(-10px);

    border-color:#d4af37;

}

.advantage-card i{

    font-size:44px;

    color:#d4af37;

    margin-bottom:20px;

}

.advantage-card h3{

    color:#fff;

    font-size:22px;

    margin-bottom:12px;

}

.advantage-card p{

    color:#d5d5d5;

    line-height:1.7;

}

/*=========================================
CTA
=========================================*/

.premium-cta{

    border-radius:40px;

    padding:80px 60px;

    background:

    linear-gradient(
        135deg,
        #0d2518,
        #17452d
    );

    position:relative;

    overflow:hidden;

    margin:70px 0;

}

.premium-cta::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    right:-220px;

    top:-220px;

    background:

    radial-gradient(circle,
    rgba(212,175,55,.22),
    transparent);

}

.cta-content{

    position:relative;

    z-index:5;

    text-align:center;

}

.cta-content span{

    color:#d4af37;

    font-weight:700;

}

.cta-content h2{

    color:white;

    font-size:52px;

    margin:20px 0;

}

.cta-content p{

    color:#d4d4d4;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}

.cta-buttons{

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:18px;

}

.cta-main{

    background:#d4af37;

    color:#111;

    padding:18px 34px;

    border-radius:18px;

    font-weight:800;

    text-decoration:none;

}

.cta-outline{

    border:1px solid rgba(255,255,255,.15);

    color:white;

    padding:18px 34px;

    border-radius:18px;

    text-decoration:none;

}

/*=========================================
INSTAGRAM
=========================================*/

.instagram-section{

    margin-top:70px;

}

.instagram-section h2{

    color:white;

    font-size:40px;

    text-align:center;

    margin-bottom:15px;

}

.instagram-section p{

    color:#d0d0d0;

    text-align:center;

    margin-bottom:35px;

}

.instagram-grid{

    display:grid;

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

    gap:18px;

}

.insta-box{

    aspect-ratio:1;

    border-radius:24px;

    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.02)
    );

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.insta-box:hover{

    transform:scale(1.05);

    border-color:#d4af37;

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

@media(max-width:1400px){

.products-layout{

grid-template-columns:260px 1fr;

gap:28px;

}

.products-grid{

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

}

.hero-content{

grid-template-columns:1fr 320px;

}

.hero-circle{

width:300px;
height:300px;

}

.hero-left h1{

font-size:48px;

}

}


@media(max-width:1100px){

.products-layout{

grid-template-columns:1fr;

}

.products-sidebar{

position:relative;

top:0;

margin-bottom:35px;

}

.top-stats{

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

}

.advantages-row{

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

}

.instagram-grid{

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

}

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-right{

margin-top:40px;

}

}


@media(max-width:768px){

.products-page{

padding:20px 0 60px;

}

.products-container{

width:95%;

}

.products-hero{

padding:35px 25px;

border-radius:28px;

}

.hero-left h1{

font-size:36px;

}

.hero-left p{

font-size:15px;

}

.hero-circle{

width:230px;

height:230px;

}

.products-grid{

grid-template-columns:1fr;

gap:22px;

}

.product-v2-image{

height:260px;

}

.product-title{

font-size:24px;

}

.new-price{

font-size:34px;

}

.product-buttons{

flex-direction:column;
position:relative;

z-index:50;

}

.buy-btn{

width:100%;
position:relative;

z-index:60;

}

.detail-btn{

width:100%;

height:55px;
position:relative;

z-index:60;

}

.top-stats{

grid-template-columns:1fr;

}

.advantages-row{

grid-template-columns:1fr;

}

.instagram-grid{

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

}

.newsletter-section{

padding:40px 25px;

}

.newsletter-section h2{

font-size:30px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

.newsletter-form button{

width:100%;

}

.cta-content h2{

font-size:34px;

}

.cta-buttons{

flex-direction:column;

}

.cta-main,
.cta-outline{

width:100%;

text-align:center;

}

}


@media(max-width:480px){

.hero-left h1{

font-size:30px;

}

.products-title{

font-size:28px;

}

.sidebar-title{

font-size:26px;

}

.hero-circle{

width:180px;

height:180px;

}

.product-v2-image{

height:220px;
 position:relative;

 overflow:hidden;

}

.product-v2-content{

padding:18px;
position:relative;

z-index:5;

}

.new-price{

font-size:28px;

}

.product-title{

font-size:21px;

}

.instagram-grid{

grid-template-columns:1fr;

}

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0d2217;

}

::-webkit-scrollbar-thumb{

background:#d4af37;

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:#f2d468;

}

/*==================================================
SELECTION
==================================================*/

::selection{

background:#d4af37;

color:#111;

}

/*==================================================
SMOOTH
==================================================*/

html{

scroll-behavior:smooth;

}

body{

overflow-x:hidden;

}
.buy-btn{
    position:relative !important;
    z-index:99999 !important;
}

.product-buttons{
    position:relative;
    z-index:15;
}

.card-shine{

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transform:skewX(-25deg);

    animation:shineMove 5s linear infinite;

    pointer-events:none;

    z-index:2;

}
@keyframes shineMove{

    0%{
        left:-120%;
    }

    100%{
        left:180%;
    }

}
.swal2-container{
    z-index:999999 !important;
    top:95px !important;
}
.favorite-btn{
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;

    background:#ffffffd9;
    border:none;
    outline:none;
    box-shadow:0 10px 25px rgba(0,0,0,.15);

    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.favorite-btn:hover{
    transform:scale(1.08);
    background:#f3c742;
}

.favorite-btn i{
    font-size:22px;
    color:#fff;
}

.favorite-btn .fa-solid{
    color:#ff3b5c;
}

.favorite-btn .fa-regular{
    color:white;
}
.favorite-btn:focus,
.favorite-btn:active{
    outline:none;
    box-shadow:none;
}

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

.products-layout{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:30px;
    align-items:start;
}

.products-main{
    width:100%;
    min-width:0;
    max-width:1000px;
    margin:0 auto;
}

.products-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:28px;
    padding:0;
    margin:35px 0;
}

.product-v2-card{
    width:100%;
    max-width:320px;
    min-width:0;
    margin:auto;
}

.product-v2-image img{
    width:100%;
    display:block;
}

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

.buy-btn{
    flex:1;
}

.detail-btn{
    width:64px;
    flex-shrink:0;
}
@media (max-width:1200px){

.products-layout{
    grid-template-columns:1fr;
}

.products-sidebar{
    position:relative;
    top:0;
}

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

}

@media (max-width:768px){

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

.product-buttons{
    flex-direction:column;
}

.detail-btn{
    width:100%;
}

}

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

@media (max-width:1200px){

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

}

@media (max-width:768px){

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

}
/*===============================
PREMIUM FILTER
================================*/

.filter-box{
    backdrop-filter:blur(14px);
    
    background:rgba(24,52,34,.88);

    border:1px solid rgba(212,175,55,.18);
    
    box-shadow:0 25px 45px rgba(0,0,0,.25);


    border-radius:28px;

    padding:28px;

    position:sticky;

    top:120px;

}

.filter-box h3{

    color:#d4af37;

    margin-bottom:25px;

    font-size:26px;

}

.filter-group{

    margin-bottom:22px;

}

.filter-group label{

    display:block;

    margin-bottom:10px;

    color:#fff;

    font-weight:600;

}

.filter-group select{

    width:100%;

    height:54px;

    background:#21462d;

    border:none;

    color:white;

    border-radius:16px;

    padding:0 18px;

}
.filter-group select:hover{

    border:1px solid #d4af37;

}

.filter-group select:focus{

    outline:none;

    border:1px solid #d4af37;

}

.filter-group input[type=range]{

    width:100%;

}

.price-text{

    margin-top:10px;

    color:#d4af37;

}

.filter-check{

    margin:18px 0;

    padding:8px 0;

    color:white;

}
.filter-check input{

    accent-color:#d4af37;

    transform:scale(1.25);

    cursor:pointer;

}

.filter-check label{

    display:flex;

    gap:10px;

    cursor:pointer;

}

.filter-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    background:#d4af37;

    color:#111;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.filter-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(212,175,55,.25);

}
.price-value{
    margin-top:10px;
    color:#d9b23a;
    font-size:15px;
    font-weight:600;
}
@media(max-width:992px){

.products-grid{

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

gap:20px;

}

}

@media(max-width:600px){

.products-grid{

grid-template-columns:1fr;

}

}
@media(max-width:768px){

.mini-cart{

width:100%;

right:0;

top:0;

height:100vh;

border-radius:0;

}

}

/*==================================================
END PRODUCTS V3
==================================================*/