@font-face {
    font-family: "YekanBakh";
    src: url("../assets/fonts/YekanBakh-Regular.woff2") format("woff2");
}

:root{
    --primary:#2E7D32;
    --primary-light:#4CAF50;
    --bg:#f8fafc;
    --card-bg:rgba(255,255,255,.55);
    --text:#1f2937;
    --border:rgba(255,255,255,.35);
    --shadow:0 10px 35px rgba(0,0,0,.08);
}

body.dark{
    --bg:#0f172a;
    --card-bg:rgba(15,23,42,.55);
    --text:#f8fafc;
    --border:rgba(255,255,255,.08);
    --shadow:0 10px 35px rgba(0,0,0,.35);
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"YekanBakh",sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    transition:.3s;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    display:block;
    max-width:100%;
}

.container{
    width:min(1200px,92%);
    margin:auto;
}

/* Glass */

.glass{
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    background:var(--card-bg);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
}

/* Background */

.bg-blur{
    position:fixed;
    border-radius:50%;
    filter:blur(100px);
    z-index:-1;
}

.bg-blur-1{
    width:350px;
    height:350px;
    background:#4caf5040;
    top:-80px;
    right:-100px;
}

.bg-blur-2{
    width:300px;
    height:300px;
    background:#22c55e30;
    bottom:-100px;
    left:-80px;
}

/* Header */

.header{
    position:fixed;
    top:15px;
    left:50%;
    transform:translateX(-50%);
    width:min(1200px,94%);
    border-radius:20px;
    z-index:1000;
}

.header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 22px;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    font-size:1.1rem;
}

.logo img{

    width:90px;
    margin:auto auto 25px;
}


.nav{
    display:flex;
    gap:28px;
}

.nav a{
    transition:.3s;
}

.nav a:hover{
    color:var(--primary);
}

.header-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.theme-btn,
.menu-btn{
    border:none;
    cursor:pointer;
    width:42px;
    height:42px;
    border-radius:12px;
    background:var(--card-bg);
    color:var(--text);
    font-size:18px;
}

.menu-btn{
    display:none;
}

/* Hero */

.hero{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    color:#fff;
    width:min(850px,90%);
}

.hero-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:999px;
    margin-bottom:20px;
}

.hero h1{
    font-size:clamp(2.3rem,6vw,4.5rem);
    line-height:1.3;
    margin-bottom:20px;
}

.hero p{
    font-size:1.1rem;
    line-height:2;
    margin-bottom:30px;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.btn{
    padding:14px 28px;
    border-radius:14px;
    font-weight:600;
    transition:.3s;
}

.btn-primary{
    background:var(--primary);
    color:#fff;
}

.btn-primary:hover{
    transform:translateY(-3px);
}

.btn-secondary{
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
}

/* Sections */

section{
    padding:100px 0;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:2rem;
    margin-bottom:10px;
}

.section-title p{
    opacity:.7;
}

/* Categories */

.category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:24px;
}

.category-card{
    padding:35px;
    border-radius:24px;
    text-align:center;
    transition:.3s;
}

.category-card:hover{
    transform:translateY(-8px);
}

.category-card span{
    font-size:3rem;
}

.category-card h3{
    margin-top:15px;
}

/* Products */

.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
    gap:24px;
}

.product-card{
    border-radius:24px;
    overflow:hidden;
    transition:.3s;
}

.product-card:hover{
    transform:translateY(-10px);
}

.product-image{
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:5rem;
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
}

.product-content{
    padding:20px;
}

.product-content p{
    margin:10px 0 20px;
    opacity:.7;
}

.product-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.product-footer button{
    border:none;
    background:var(--primary);
    color:#fff;
    padding:10px 16px;
    border-radius:12px;
    cursor:pointer;
}

/* Features */

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:24px;
}

.feature{
    text-align:center;
    padding:35px;
    border-radius:24px;
    font-size:2rem;
}

.feature h3{
    font-size:1rem;
    margin-top:15px;
}

/* About */

.about-box{
    padding:50px;
    border-radius:28px;
    text-align:center;
}

.about-box h2{
    margin-bottom:20px;
}

.about-box p{
    max-width:700px;
    margin:auto;
    line-height:2.2;
}

/* Footer */

footer{
    padding:60px 0;
    border-top:1px solid rgba(128,128,128,.15);
}

.footer-content{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.footer-content h3,
.footer-content h4{
    margin-bottom:10px;
}

.copyright{
    margin-top:40px;
    text-align:center;
    opacity:.7;
}

/* Mobile */

@media(max-width:900px){

    .menu-btn{
        display:block;
    }

    .nav{
        position:fixed;
        top:90px;
        right:-100%;
        width:280px;
        flex-direction:column;
        padding:25px;
        border-radius:20px;
        transition:.3s;
        background:var(--card-bg);
        backdrop-filter:blur(20px);
    }

    .nav.active{
        right:20px;
    }

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

    .btn{
        width:100%;
    }
}

.hidden{
    opacity:0;
    transform:translateY(30px);
    transition:.7s ease;
}

.show{
    opacity:1;
    transform:translateY(0);
}
/* Showcase Image */

.showcase-section{
    padding:40px 0 100px;
}

.showcase-frame{
    padding:18px;
    border-radius:36px;
    overflow:hidden;
}

.showcase-frame img{
    width:100%;
    height:650px;
    object-fit:cover;
    display:block;
    border-radius:24px;
    transition:.5s;
}

.showcase-frame:hover img{
    transform:scale(1.03);
}

@media(max-width:768px){

    .showcase-frame img{
        height:320px;
    }

}
/* Contact */

.contact-section{
    padding:100px 0;
}

.contact-wrapper{
    border-radius:32px;
    padding:40px;
    display:grid;
    grid-template-columns:380px 1fr;
    gap:40px;
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-item{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px;
    border-radius:20px;
    background:rgba(255,255,255,.05);
}

.contact-icon{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    font-size:1.4rem;
    background:var(--primary);
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    border:none;
    outline:none;
    border-radius:18px;
    padding:16px;
    background:rgba(255,255,255,.08);
    color:var(--text);
    font-family:inherit;
}

.contact-form textarea{
    min-height:180px;
    resize:none;
}

.contact-form button{
    border:none;
    cursor:pointer;
    padding:16px;
    border-radius:18px;
    background:var(--primary);
    color:#fff;
    font-family:inherit;
    font-size:1rem;
    transition:.3s;
}

.contact-form button:hover{
    transform:translateY(-3px);
}

@media(max-width:900px){

    .contact-wrapper{
        grid-template-columns:1fr;
        padding:25px;
    }

}
:root{
    --primary:#2E7D32;
    --primary-light:#4CAF50;

    --bg:#f5f7fb;

    --card-bg:rgba(255,255,255,.78);

    --text:#111827;

    --border:rgba(255,255,255,.8);

    --shadow:
        0 8px 32px rgba(31,38,135,.08),
        0 2px 10px rgba(0,0,0,.04);
}
.glass{
    background:var(--card-bg);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:var(--shadow);
}
body{
    background:
        radial-gradient(circle at top right,#d9f99d 0%,transparent 30%),
        radial-gradient(circle at bottom left,#bbf7d0 0%,transparent 30%),
        var(--bg);

    color:var(--text);
}
.contact-form input,
.contact-form textarea{
    width:100%;
    padding:18px 20px;

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

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

    color:var(--text);

    border-radius:18px;

    outline:none;

    font-family:inherit;

    transition:.3s;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:#6b7280;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(76,175,80,.15);

    transform:translateY(-2px);
}
body.dark .contact-form input,
body.dark .contact-form textarea{
    background:rgba(15,23,42,.75);

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

    color:#fff;
}

body.dark .contact-form input::placeholder,
body.dark .contact-form textarea::placeholder{
    color:#94a3b8;
}
body{
    background:
        radial-gradient(circle at 0% 0%, #bbf7d0 0%, transparent 30%),
        radial-gradient(circle at 100% 0%, #86efac 0%, transparent 30%),
        radial-gradient(circle at 100% 100%, #dcfce7 0%, transparent 35%),
        radial-gradient(circle at 0% 100%, #d9f99d 0%, transparent 35%),
        #f8fafc;

    color:var(--text);
}
body.dark{
    background:
        radial-gradient(circle at 0% 0%, #14532d 0%, transparent 25%),
        radial-gradient(circle at 100% 0%, #166534 0%, transparent 25%),
        radial-gradient(circle at 100% 100%, #052e16 0%, transparent 30%),
        radial-gradient(circle at 0% 100%, #064e3b 0%, transparent 30%),
        #0f172a;
}
body::before{
    content:"";
    position:fixed;
    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.05) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255,255,255,.05) 50%,
            rgba(255,255,255,.05) 75%,
            transparent 75%
        );

    background-size:60px 60px;

    pointer-events:none;

    z-index:-2;

    opacity:.25;
}
body{
    background:
        radial-gradient(circle at 10% 15%, rgba(34,197,94,.20) 0%, transparent 28%),
        radial-gradient(circle at 85% 15%, rgba(132,204,22,.18) 0%, transparent 25%),
        radial-gradient(circle at 90% 80%, rgba(16,185,129,.18) 0%, transparent 30%),
        radial-gradient(circle at 15% 85%, rgba(74,222,128,.16) 0%, transparent 28%),
        radial-gradient(circle at 50% 50%, rgba(134,239,172,.10) 0%, transparent 40%),
        #f8fafc;

    color:var(--text);
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;

    background:
        radial-gradient(circle at 20% 20%, rgba(34,197,94,.08), transparent 20%),
        radial-gradient(circle at 80% 30%, rgba(132,204,22,.08), transparent 20%),
        radial-gradient(circle at 70% 80%, rgba(16,185,129,.08), transparent 20%);
}
body.dark{
    background:
        radial-gradient(circle at 10% 15%, rgba(34,197,94,.18) 0%, transparent 25%),
        radial-gradient(circle at 85% 15%, rgba(132,204,22,.15) 0%, transparent 22%),
        radial-gradient(circle at 90% 80%, rgba(16,185,129,.15) 0%, transparent 28%),
        radial-gradient(circle at 15% 85%, rgba(74,222,128,.12) 0%, transparent 25%),
        #0f172a;
}
/* فقط در دارک مود */

.floating-bg{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
}

.star{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#60a5fa;
    box-shadow:
        0 0 10px #60a5fa,
        0 0 20px #60a5fa;

    animation: twinkle 3s infinite ease-in-out;
    pointer-events:auto;
    transition:.3s;
}

.star:hover{
    transform:scale(3);
}

.star:nth-child(1){
    top:12%;
    left:10%;
}

.star:nth-child(2){
    top:22%;
    left:80%;
}

.star:nth-child(3){
    top:75%;
    left:20%;
}

.star:nth-child(4){
    top:60%;
    left:88%;
}

.star:nth-child(5){
    top:35%;
    left:55%;
}

.bubble{
    position:absolute;
    border-radius:50%;
    background:rgba(34,197,94,.08);
    backdrop-filter:blur(10px);

    animation: float 14s infinite ease-in-out;
}

.bubble:nth-of-type(1){
    width:180px;
    height:180px;
    top:15%;
    right:10%;
}

.bubble:nth-of-type(2){
    width:250px;
    height:250px;
    bottom:10%;
    left:5%;
    animation-duration:18s;
}

.bubble:nth-of-type(3){
    width:140px;
    height:140px;
    top:50%;
    left:50%;
    animation-duration:12s;
}

@keyframes twinkle{
    0%,100%{
        opacity:.3;
    }
    50%{
        opacity:1;
    }
}

@keyframes float{
    0%{
        transform:translateY(0) translateX(0);
    }

    50%{
        transform:translateY(-25px) translateX(15px);
    }

    100%{
        transform:translateY(0) translateX(0);
    }
}
.cursor-glow{
    position:fixed;
    width:250px;
    height:250px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(96,165,250,.15),
        transparent 70%
    );

    pointer-events:none;
    z-index:-1;
}
.plus-star{
    position:absolute;

    width:200px;
    height:200px;

    opacity:.06;

    animation:floatStar 12s ease-in-out infinite;
}

.plus-star::before,
.plus-star::after{
    content:"";
    position:absolute;

    background:#60a5fa;

    border-radius:999px;

    box-shadow:
        0 0 20px rgba(96,165,250,.4),
        0 0 40px rgba(96,165,250,.2);

    transition:.4s;
}

.plus-star::before{
    width:40px;
    height:200px;
    left:80px;
    top:0;
}

.plus-star::after{
    width:200px;
    height:40px;
    left:0;
    top:80px;
}

.plus-star:hover{
    opacity:.15;
    transform:scale(1.15);
}
.star-1{
    top:10%;
    left:-60px;
}

.star-2{
    top:45%;
    right:-80px;
}

.star-3{
    bottom:5%;
    left:20%;
}
@keyframes floatStar{

    0%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-25px) rotate(8deg);
    }

    100%{
        transform:translateY(0) rotate(0deg);
    }

}
.product-page{
    padding-top:160px;
    min-height:100vh;
}

.product-layout{
    border-radius:32px;
    padding:30px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

.product-gallery{
    display:flex;
    justify-content:center;
    align-items:center;
}

.main-product-image{
    width:100%;
    max-height:600px;
    object-fit:cover;
    border-radius:24px;
}

.product-info{
    display:flex;
    flex-direction:column;
}

.product-badge{
    display:inline-block;
    padding:8px 16px;
    border-radius:999px;
    background:#22c55e20;
    color:#22c55e;
    margin-bottom:20px;
}

.product-info h1{
    font-size:2.2rem;
    margin-bottom:20px;
}

.product-price{
    font-size:1.8rem;
    font-weight:700;
    color:#22c55e;
    margin-bottom:20px;
}

.product-description{
    line-height:2;
    opacity:.8;
    margin-bottom:30px;
}

.product-features{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:30px;
}

.product-actions{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.buy-btn{
    border:none;
    background:var(--primary);
    color:#fff;
    padding:15px 25px;
    border-radius:16px;
    cursor:pointer;
}

.back-btn{
    padding:15px 25px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.15);
}

@media(max-width:900px){

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

}
.products-page{
    padding-top:160px;
    min-height:100vh;
}

.products-search{
    padding:20px;
    border-radius:24px;
    margin-bottom:40px;
}

.products-search input{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    color:var(--text);
    font-family:inherit;
    font-size:1rem;
}

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

.product-image img{
    width:100%;
    height:220px;
    object-fit:cover;
}
.products-page .product-card{
    display:block;
    overflow:hidden;
    border-radius:24px;
    transition:.3s;
}

.products-page .product-card:hover{
    transform:translateY(-8px);
}

.products-page .product-image{
    overflow:hidden;
}

.products-page .product-image img{
    transition:.5s;
}

.products-page .product-card:hover .product-image img{
    transform:scale(1.08);
}

.products-page .product-footer button{
    pointer-events:none;
}
.product-card img{
    width: 100%;
    height: 260px;
    object-fit: contain;
    background: #fff;
    padding: 10px;
}
.products-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:24px;
}

.product-card{
    overflow:hidden;
    border-radius:24px;
    padding:0;
}

.product-card img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
}

.product-card h3,
.product-card p,
.product-card .price,
.product-card .buy-btn{
    margin-right:20px;
    margin-left:20px;
}

.product-card h3{
    margin-top:18px;
}
.product-card{
    min-height: 580px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
}

.product-card img{
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.product-card p{
    flex-grow: 1;
}

.product-card .buy-btn{
    margin-top: auto;
    margin-bottom: 20px;
}
.product-card .buy-btn{
    width: fit-content;
    align-self: center;
    margin-top: auto;
    margin-bottom: 20px;
    padding: 12px 24px;
}
/* آیتم های سبد خرید */

.cart-item{
    display:flex;
    align-items:center;
    gap:20px;
    padding:20px;
    margin-bottom:20px;
    border-radius:24px;
}

.cart-item img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:16px;
    flex-shrink:0;
}

.cart-info{
    flex:1;
}

.cart-info h3{
    margin-bottom:10px;
    font-size:1.2rem;
}

.cart-info p{
    font-size:1rem;
    font-weight:700;
    margin-bottom:15px;
}



/* دکمه حذف */

.remove-btn{
    border:none;
    cursor:pointer;
    padding:10px 18px;
    border-radius:12px;
    font-size:14px;
    background:#ef4444;
    color:#fff;
    transition:.3s;
}

.remove-btn:hover{
    transform:translateY(-2px);
}



/* باکس جمع کل */

.cart-summary{
    margin-top:30px;
    padding:25px;
    border-radius:24px;
    text-align:center;
}

.cart-summary h3{
    margin-bottom:20px;
    font-size:1.4rem;
}



/* دکمه ثبت سفارش */

.checkout-btn{
    border:none;
    cursor:pointer;
    padding:14px 28px;
    border-radius:14px;
    font-size:16px;
    font-weight:700;
    margin:8px;
    background:#10b981;
    color:#fff;
    transition:.3s;
}

.checkout-btn:hover{
    transform:translateY(-2px);
}



/* دکمه خالی کردن سبد */

.clear-cart-btn{
    border:none;
    cursor:pointer;
    padding:14px 28px;
    border-radius:14px;
    font-size:16px;
    font-weight:700;
    margin:8px;
    background:#ef4444;
    color:#fff;
    transition:.3s;
}

.clear-cart-btn:hover{
    transform:translateY(-2px);
}



/* سبد خالی */

.empty-cart{
    text-align:center;
    padding:40px 20px;
    border-radius:24px;
}

.empty-cart h3{
    margin-bottom:20px;
}
.invoice-box{
    padding:30px;
    border-radius:24px;
}

.invoice-box h1{
    margin-bottom:20px;
}

.invoice-box h2{
    margin-top:20px;
    margin-bottom:20px;
}

.invoice-box h3{
    margin-top:15px;
    margin-bottom: 15px;
    color:#10b981;
}