@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:"Vazirmatn",Tahoma,sans-serif;
    background:#fcfaf5;
    color:#19371f;
    line-height:1.8;
}

a{
    color:inherit;
}

.topbar{
    background:#102f18;
    color:#fff;
    text-align:center;
    padding:8px 15px;
    font-size:13px;
}

.top-phone{
    margin-right:25px;
}

.top-phone a,
footer a{
    direction:ltr;
    display:inline-block;
    text-decoration:none;
}

.header{
    min-height:82px;
    padding:10px max(20px,calc((100% - 1200px)/2));
    display:flex;
    align-items:center;
    gap:25px;
    background:#fff;
    border-bottom:1px solid #e9e3d7;
    position:sticky;
    top:0;
    z-index:100;
}

.logo{
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:9px;
    min-width:180px;
}

.logo-icon{
    font-size:32px;
}

.logo strong{
    display:block;
    font-size:24px;
}

.logo small{
    display:block;
    color:#99752e;
    font-size:10px;
}

.header nav{
    flex:1;
    display:flex;
    justify-content:center;
    gap:23px;
}

.header nav a{
    text-decoration:none;
    font-size:13px;
    font-weight:600;
}

.cart-button{
    text-decoration:none;
    background:#143f1d;
    color:#fff;
    padding:8px 14px;
    border-radius:11px;
    white-space:nowrap;
}

.hero{
    max-width:1200px;
    min-height:570px;
    margin:22px auto 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    border-radius:30px;
    overflow:hidden;
    background:#f4ead6;
    box-shadow:0 20px 60px #18371f16;
}

.hero-image{
    position:relative;
    min-height:570px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        radial-gradient(circle,#f8edcf 0,#d2bd82 40%,#927039 100%);
}

.hero-image:before,
.hero-image:after{
    content:"";
    position:absolute;
    border:1px solid #ffffff45;
    border-radius:50%;
}

.hero-image:before{
    width:470px;
    height:470px;
}

.hero-image:after{
    width:350px;
    height:350px;
}

.hero-pistachios{
    position:relative;
    z-index:2;
    width:420px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    transform:rotate(-7deg);
}

.hero-pistachios span{
    font-size:115px;
    margin:-12px;
    filter:drop-shadow(0 15px 10px #3b2b151c);
}

.premium-circle{
    position:absolute;
    z-index:5;
    left:30px;
    bottom:30px;
    width:105px;
    height:105px;
    border-radius:50%;
    background:#fff8e8;
    border:3px solid #a27a2e;
    color:#805d24;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    line-height:1.2;
}

.premium-circle b{
    font-size:14px;
}

.premium-circle small{
    font-size:9px;
}

.hero-content{
    padding:65px 55px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.eyebrow{
    color:#9a742e;
    font-weight:800;
    font-size:13px;
}

.hero h1{
    font-size:47px;
    line-height:1.4;
    margin:12px 0;
}

.hero h1 span{
    color:#a36d21;
    display:block;
}

.hero p{
    color:#5d655e;
    max-width:520px;
    font-size:16px;
}

.hero-buttons{
    display:flex;
    gap:10px;
    margin:20px 0;
}

.button{
    display:inline-block;
    border:0;
    border-radius:11px;
    padding:12px 23px;
    text-decoration:none;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    text-align:center;
}

.primary{
    color:#fff;
    background:#145421;
    box-shadow:0 8px 20px #14542125;
}

.secondary{
    background:#fff;
    border:1px solid #ded6c7;
}

.hero-features{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    font-size:12px;
    color:#626b62;
}

.advantages{
    max-width:1120px;
    margin:22px auto 60px;
    background:#fff;
    border:1px solid #e4dfd4;
    border-radius:18px;
    padding:17px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.advantages div{
    text-align:center;
    border-left:1px solid #e8e2d8;
}

.advantages div:last-child{
    border:0;
}

.advantages strong,
.advantages small{
    display:block;
}

.advantages small{
    color:#7a8179;
    font-size:11px;
}

.section{
    max-width:1160px;
    margin:70px auto;
    padding:0 20px;
}

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

.section-title span{
    color:#9c762e;
    font-size:12px;
    font-weight:800;
}

.section-title h2{
    margin:5px 0;
    font-size:30px;
}

.section-title p{
    margin:0;
    color:#7a8179;
    font-size:13px;
}

.products{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.product{
    background:#fff;
    border:1px solid #e3ded3;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 30px #17351d0d;
    transition:.25s;
}

.product:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px #17351d18;
}

.product-image{
    height:245px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.product-image:before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:#fff6d966;
}

.premium{
    background:linear-gradient(145deg,#e4d09e,#faf0d9);
}

.export{
    background:linear-gradient(145deg,#d6dfbf,#f6efd8);
}

.economy{
    background:linear-gradient(145deg,#e8d6b9,#f9ead2);
}

.big-nut{
    font-size:130px;
    position:relative;
    z-index:2;
    filter:drop-shadow(0 15px 10px #3d2d171c);
}

.badge{
    position:absolute;
    top:15px;
    right:15px;
    background:#123f1d;
    color:#fff;
    border-radius:20px;
    padding:5px 13px;
    font-size:11px;
    font-weight:800;
    z-index:5;
}

.product-content{
    padding:20px;
}

.product-content>small{
    color:#9a752e;
    font-weight:700;
}

.product-content h3{
    font-size:20px;
    margin:5px 0;
}

.product-content p{
    color:#747b73;
    font-size:12px;
    min-height:45px;
}

.product-price{
    font-size:21px;
    color:#154b20;
    font-weight:900;
    margin:10px 0;
}

.product-price small{
    color:#777;
    font-size:10px;
    font-weight:400;
}

.weight-select{
    display:flex;
    gap:6px;
    margin:12px 0;
}

.weight-select button{
    flex:1;
    border:1px solid #ddd5c5;
    background:#fff;
    border-radius:8px;
    padding:8px 3px;
    font-family:inherit;
    font-size:11px;
    cursor:pointer;
}

.weight-select button.active{
    background:#eee2c6;
    border-color:#ad853a;
    color:#6e501e;
    font-weight:800;
}

.add-button{
    width:100%;
    border:0;
    border-radius:10px;
    padding:12px;
    background:#145421;
    color:#fff;
    font:inherit;
    font-weight:800;
    cursor:pointer;
}

.packages{
    max-width:1120px;
    margin:70px auto;
    padding:0 20px;
}

.package-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.package-grid div{
    background:#fff;
    border:1px solid #e3ddd0;
    border-radius:16px;
    padding:23px;
    text-align:center;
}

.package-grid b,
.package-grid span{
    display:block;
}

.package-grid b{
    color:#8f6828;
    font-size:22px;
}

.package-grid span{
    color:#737a72;
    font-size:12px;
}

.important-note{
    background:#f1e8d4;
    border-radius:12px;
    padding:13px;
    margin-top:12px;
    text-align:center;
    font-size:12px;
}

.airport{
    max-width:1120px;
    margin:70px auto;
    padding:42px 50px;
    border-radius:25px;
    background:linear-gradient(120deg,#e2ebd4,#f3e2c6);
    display:flex;
    align-items:center;
    gap:30px;
}

.airport-icon{
    font-size:75px;
}

.airport h2{
    font-size:30px;
    margin:5px 0;
}

.airport p{
    color:#5d655d;
}

.about{
    max-width:900px;
    margin:70px auto;
    padding:0 20px;
    text-align:center;
}

.about>div{
    background:#fff;
    border:1px solid #e5dfd4;
    border-radius:24px;
    padding:42px;
}

.about h2{
    font-size:32px;
}

.about p{
    color:#646c64;
}

.about strong{
    color:#a23827;
}

.faq{
    max-width:900px;
}

.faq details{
    background:#fff;
    border:1px solid #e3ded4;
    border-radius:12px;
    margin:10px 0;
    padding:17px 20px;
}

.faq summary{
    cursor:pointer;
    font-weight:700;
}

.faq p{
    color:#676e66;
    font-size:13px;
}

footer{
    background:#102f19;
    color:#fff;
    padding:35px max(20px,calc((100% - 1160px)/2));
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

footer small{
    display:block;
    color:#d8c89b;
}

footer p{
    grid-column:1/-1;
    text-align:center;
    border-top:1px solid #ffffff22;
    padding-top:17px;
    font-size:11px;
}

.whatsapp{
    position:fixed;
    left:20px;
    bottom:20px;
    width:55px;
    height:55px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#18a64a;
    color:#fff;
    text-decoration:none;
    font-size:25px;
    z-index:200;
    box-shadow:0 10px 25px #0003;
}


/* صفحات خرید */

.inner-page{
    min-height:100vh;
    background:#f6f4ee;
}

.back-button{
    margin-right:auto;
    background:#eee9dd;
    padding:8px 15px;
    border-radius:9px;
    text-decoration:none;
    font-size:13px;
}

.checkout-container{
    max-width:1120px;
    margin:45px auto;
    padding:0 20px;
}

.page-title{
    text-align:center;
    margin-bottom:30px;
}

.page-title>div{
    font-size:45px;
}

.page-title h1{
    margin:5px 0;
    font-size:31px;
}

.page-title p{
    margin:0;
    color:#777;
}

.cart-layout{
    display:grid;
    grid-template-columns:1.5fr .8fr;
    gap:20px;
}

.cart-list,
.cart-summary,
.form-box,
.summary-box{
    background:#fff;
    border:1px solid #e4dfd4;
    border-radius:18px;
    padding:25px;
    box-shadow:0 10px 30px #17351d0b;
}

.cart-list h2,
.cart-summary h2,
.form-box h2,
.summary-box h2{
    margin-top:0;
}

.cart-item{
    display:grid;
    grid-template-columns:70px 1fr auto auto;
    align-items:center;
    gap:15px;
    padding:16px 0;
    border-bottom:1px solid #eee;
}

.cart-image{
    height:65px;
    border-radius:12px;
    background:#eee2c8;
    display:grid;
    place-items:center;
    font-size:35px;
}

.cart-info h3{
    margin:0;
    font-size:16px;
}

.cart-info small{
    color:#777;
}

.cart-info strong{
    display:block;
    color:#155020;
}

.quantity{
    display:flex;
    align-items:center;
    gap:8px;
}

.quantity button{
    width:32px;
    height:32px;
    border:0;
    background:#eee;
    border-radius:7px;
    font-size:18px;
    cursor:pointer;
}

.cart-item-total{
    text-align:left;
    font-weight:800;
}

.delete{
    display:block;
    border:0;
    background:#fff0ed;
    color:#a33a2b;
    padding:5px 9px;
    border-radius:7px;
    cursor:pointer;
    margin-top:5px;
}

.summary-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #eee;
    margin-top:20px;
    padding-top:20px;
}

.summary-total strong{
    color:#145421;
    font-size:19px;
}

.full{
    width:100%;
    margin-top:15px;
}

.empty-cart{
    background:#fff;
    border-radius:18px;
    text-align:center;
    padding:70px 20px;
}

.empty-cart>div{
    font-size:65px;
}

.checkout-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:20px;
}

.form-box label{
    display:block;
    font-weight:700;
    margin-bottom:16px;
}

.form-box label span{
    color:#888;
    font-weight:400;
    font-size:11px;
}

.form-box input,
.form-box textarea{
    width:100%;
    display:block;
    margin-top:7px;
    padding:13px;
    border:1px solid #ddd5c7;
    border-radius:10px;
    font:inherit;
    outline:0;
}

.form-box textarea{
    min-height:100px;
    resize:vertical;
}

.phone-input{
    direction:ltr;
    text-align:left;
}

.summary-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid #eee;
    padding:12px 0;
    font-size:12px;
}

.summary-row small{
    display:block;
    color:#777;
}

.grand-total{
    display:flex;
    justify-content:space-between;
    margin-top:18px;
    font-size:18px;
    font-weight:900;
}

.grand-total strong{
    color:#145421;
}

.payment-info{
    background:#f1e8d4;
    color:#675126;
    padding:15px;
    border-radius:11px;
    margin-top:20px;
    font-size:12px;
}


@media(max-width:850px){

    .header{
        flex-wrap:wrap;
        padding:10px 15px;
    }

    .header nav{
        order:3;
        width:100%;
        overflow:auto;
        justify-content:flex-start;
        gap:18px;
    }

    .hero{
        grid-template-columns:1fr;
        margin:10px;
    }

    .hero-image{
        min-height:330px;
    }

    .hero-content{
        padding:40px 25px;
        text-align:center;
        align-items:center;
    }

    .hero h1{
        font-size:35px;
    }

    .hero-features{
        justify-content:center;
    }

    .advantages{
        grid-template-columns:1fr 1fr;
        margin:15px;
    }

    .advantages div{
        border:0;
        padding:7px;
    }

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

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

    .airport{
        margin:40px 15px;
        padding:30px 22px;
        display:block;
        text-align:center;
    }

    footer{
        grid-template-columns:1fr 1fr;
        text-align:center;
    }

    .cart-layout,
    .checkout-grid{
        grid-template-columns:1fr;
    }

    .cart-item{
        grid-template-columns:55px 1fr;
    }

    .cart-item .quantity,
    .cart-item .cart-item-total{
        grid-column:2;
    }

}


@media(max-width:500px){

    .topbar{
        font-size:10px;
    }

    .top-phone{
        margin-right:8px;
    }

    .hero-image{
        min-height:280px;
    }

    .hero-pistachios{
        width:300px;
    }

    .hero-pistachios span{
        font-size:75px;
    }

    .premium-circle{
        width:82px;
        height:82px;
        left:15px;
        bottom:15px;
    }

    .hero h1{
        font-size:29px;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
    }

    .hero-buttons .button{
        width:100%;
    }

    .advantages{
        font-size:12px;
    }

    footer{
        grid-template-columns:1fr;
    }

    .cart-list,
    .cart-summary,
    .form-box,
    .summary-box{
        padding:18px;
    }

}