*{box-sizing:border-box}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#fff;
    color:#17151a;
    font-family:"Vazirmatn",Tahoma,sans-serif;
    line-height:1.8;
}

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

button{
    font:inherit;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:100;

    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);

    border-bottom:1px solid #ece8e1;

    transition:
        height .4s cubic-bezier(.16,.84,.32,1),
        box-shadow .4s ease,
        background .4s ease;
}

.header-inner{
    height:78px;
    max-width:1320px;
    margin:auto;

    padding:0 30px;

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

    gap:28px;

    transition:height .4s cubic-bezier(.16,.84,.32,1);
}

.brand{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:130px;
}

.brand > img{
    width:30px;
    height:auto;
    object-fit:contain;
    display:block;
}

.brand-mark img{
    width:50%;
    height:50%;
    object-fit:cover;
}

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.brand-text strong{
    font-size:18px;
    letter-spacing:1px;
}

.brand-text small{
    font-size:8px;
    letter-spacing:2.5px;
}


/* =========================================================
   DESKTOP NAV
   ========================================================= */

.desktop-nav{
    display:flex;
    align-items:center;
    gap:42px;
    font-weight:600;
}

.desktop-nav a{
    position:relative;
    padding:8px 0;
    color:#3a373b;
}

.desktop-nav a:after{
    content:"";

    position:absolute;
    bottom:0;
    right:0;

    width:0;
    height:2px;

    background:#c69a45;

    transition:.3s;
}

.desktop-nav a:hover:after,
.desktop-nav a.active:after{
    width:100%;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

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

.search-pill{
    border:1px solid #dfc88e;
    background:#f5e9cf;

    border-radius:30px;

    height:32px;
    padding:0 10px 0 8px;

    display:flex;
    align-items:center;

    gap:9px;

    font-size:12px;
    color:#504a43;

    cursor:pointer;
}


/* =========================================================
   HEADER SEARCH
   اصلاح کامل جای ذره‌بین
   ========================================================= */

.header-search{
    width:260px;
    height:44px;

    display:flex;

    /*
       چون صفحه RTL است، دکمه جستجو
       در سمت راست قرار می‌گیرد.
    */
    flex-direction:row-reverse;

    align-items:center;

    gap:8px;

    background:#fff;

    border:1px solid #dfc88e;
    border-radius:50px;

    padding:4px 6px 4px 10px;

    direction:rtl;

    transition:
        width .35s ease,
        border-color .3s ease,
        box-shadow .3s ease;

    box-shadow:
        0 8px 25px rgba(0,0,0,.05);
}


/* حالت فعال */
.header-search:focus-within{
    width:330px;

    border-color:#b48a3c;

    box-shadow:
        0 10px 35px rgba(180,138,60,.18);
}


/* فیلد جستجو */
.header-search input{
    flex:1;

    min-width:0;
    height:100%;

    border:none;
    outline:none;

    background:transparent;

    font-family:"Vazirmatn",Tahoma,sans-serif;
    font-size:13px;

    color:#333;

    text-align:right;
    direction:rtl;
}


/* Placeholder */
.header-search input::placeholder{
    color:#999;
    opacity:1;
}


/* دکمه ذره‌بین */
.header-search button{
    width:36px;
    height:36px;

    flex:0 0 36px;

    border:none;
    border-radius:50%;

    background:#c69a45;

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

    padding:0;
    margin:0;

    cursor:pointer;

    transition:
        transform .3s ease,
        background .3s ease;
}


/* Hover */
.header-search button:hover{
    transform:scale(1.08);
    background:#a87d30;
}


/* SVG ذره‌بین */
.header-search svg{
    width:18px;
    height:18px;

    display:block;

    fill:none;
    stroke:#fff;
    stroke-width:2;

    flex-shrink:0;
}


/* =========================================================
   MENU BUTTON
   ========================================================= */

.menu-button{
    display:none;

    border:0;
    background:none;

    padding:8px;

    position:relative;

    width:40px;
    height:40px;
}

.menu-button span{
    display:block;

    position:absolute;

    right:8px;
    left:8px;

    height:2px;

    background:#17151a;

    border-radius:2px;

    transition:
        transform .35s cubic-bezier(.16,.84,.32,1),
        opacity .25s ease,
        background .3s ease;
}

.menu-button span:nth-child(1){
    top:13px;
}

.menu-button span:nth-child(2){
    top:19px;
}

.menu-button span:nth-child(3){
    top:25px;
}

.menu-button.is-active span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
}

.menu-button.is-active span:nth-child(2){
    opacity:0;
}

.menu-button.is-active span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
}


/* =========================================================
   MOBILE NAV
   ========================================================= */

.mobile-nav{
    display:none;

    flex-direction:column;

    max-height:0;
    overflow:hidden;

    opacity:0;

    padding:0 20px 15px;

    border-top:1px solid #eee;

    transition:
        max-height .45s cubic-bezier(.16,.84,.32,1),
        opacity .3s ease;
}

.mobile-nav.open{
    display:flex;

    max-height:400px;
    opacity:1;
}

.mobile-nav a{
    padding:12px 0;

    border-bottom:1px solid #f0ede8;

    opacity:0;

    transform:translateY(-6px);

    transition:
        opacity .35s ease,
        transform .35s ease;

    transition-delay:calc(var(--i, 0) * 60ms);
}

.mobile-nav.open a{
    opacity:1;
    transform:none;
}


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

.hero{
    height:min(760px,calc(100vh - 78px));

    min-height:560px;

    position:relative;
    overflow:hidden;

    background:#17131a;
}

.hero-media,
.hero-media video,
.hero-fallback{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

.hero-fallback{
    background:
        radial-gradient(
            circle at 70% 35%,
            #8d6c8d,
            #1a1320 48%,
            #09090b
        );
}

.hero-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(5,4,8,.78),
            rgba(20,12,25,.22) 65%,
            rgba(10,5,14,.55)
        );
}

.hero-content{
    position:relative;

    z-index:2;

    height:100%;

    max-width:1320px;

    margin:auto;

    padding:80px 8%;

    display:flex;
    flex-direction:column;

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

    color:white;
}

.eyebrow{
    font-size:11px;

    letter-spacing:3px;

    margin:0 0 14px;

    font-weight:700;
}

.eyebrow.gold{
    color:#b48a3c;
}

.hero h1{
    font-size:clamp(42px,6vw,82px);

    line-height:1.18;

    margin:0 0 18px;

    font-weight:700;
}

.hero h1 em{
    font-style:normal;
    color:#e4c27c;
}

.hero-content>p:not(.eyebrow){
    font-size:17px;

    color:#eee;

    margin:0 0 28px;
}

.gold-button{
    display:inline-flex;

    align-items:center;

    gap:24px;

    background:#c39a4b;

    color:#fff;

    padding:13px 22px;

    border-radius:2px;

    font-weight:600;

    transition:.25s;
}

.gold-button:hover{
    transform:translateY(-2px);
    background:#a98037;
}

.gold-button.dark{
    color:#17151a;
    background:#d0ad68;
}

.scroll-cue{
    position:absolute;

    z-index:2;

    bottom:25px;
    right:8%;

    color:#fff;

    font-size:11px;

    display:flex;
    align-items:center;

    gap:10px;
}

.scroll-cue span{
    display:block;

    width:1px;
    height:35px;

    background:#cda75e;

    position:relative;

    overflow:hidden;
}

.scroll-cue span::after{
    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(#fff,#fff);

    transform:translateY(-100%);

    animation:scroll-cue-drip 1.8s ease-in-out infinite;
}

@keyframes scroll-cue-drip{
    0%{
        transform:translateY(-100%);
    }

    60%{
        transform:translateY(100%);
    }

    100%{
        transform:translateY(100%);
    }
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section-shell{
    max-width:1240px;

    margin:0 auto;

    padding:120px 30px;
}

.intro{
    text-align:center;

    max-width:850px;

    position:relative;
}

.section-number{
    position:absolute;

    right:25px;
    top:80px;

    color:#d4c4a5;

    font-family:Georgia,serif;
}

.intro h2,
.offers h2,
.store h2,
.story h2,
.categories h2{
    font-size:clamp(30px,4vw,50px);

    line-height:1.35;

    margin:0 0 22px;
}

.intro h2 span,
.offers h2 span,
.store h2 span,
.story h2 span,
.categories h2 span{
    color:#9d7740;
}

.lead{
    font-size:19px;

    font-weight:500;

    margin:0 auto 15px;
}

.copy{
    color:#716c70;

    max-width:700px;

    margin:0 auto 24px;
}

.text-link{
    font-weight:700;

    color:#9b763e;

    display:inline-flex;

    gap:12px;
}


/* =========================================================
   OFFERS
   ========================================================= */

.offers{
    max-width:1380px;
}

.section-heading{
    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:20px;

    margin-bottom:30px;
}

.section-heading h2{
    margin:0;
}

.countdown-wrap{
    text-align:center;

    background:#f7f3eb;

    border:1px solid #eadfca;

    padding:10px 20px;

    border-radius:3px;

    min-width:190px;
}

.countdown-wrap small{
    display:block;

    color:#777;

    font-size:10px;
}

.countdown{
    direction:ltr;

    display:flex;

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

    gap:5px;

    color:#7d5b28;
}

.countdown b{
    font-family:Georgia,serif;

    font-size:27px;

    min-width:34px;

    display:inline-block;

    transform-origin:center;
}

.countdown i{
    font-style:normal;
}

.countdown b.tick{
    animation:countdown-tick .5s cubic-bezier(.16,.84,.32,1);
}

@keyframes countdown-tick{
    0%{
        transform:translateY(-45%);
        opacity:0;
        filter:blur(2px);
    }

    60%{
        transform:translateY(4%);
        opacity:1;
        filter:blur(0);
    }

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


/* =========================================================
   PRODUCT TRACK
   ========================================================= */

.product-track{
    display:flex;

    gap:18px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    padding:4px 2px 25px;

    scrollbar-width:thin;

    scrollbar-color:#d0b16f transparent;
}

.product-card{
    flex:0 0 285px;

    scroll-snap-align:start;

    background:#fff;

    border:1px solid #ece7df;

    transition:
        transform .35s cubic-bezier(.16,.84,.32,1),
        box-shadow .35s ease;

    box-shadow:
        0 8px 30px rgba(36,25,12,.05);

    transform-style:preserve-3d;
}

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

    box-shadow:
        0 20px 40px rgba(36,25,12,.1);
}

.product-image{
    height:330px;

    position:relative;

    display:grid;

    place-items:center;

    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            145deg,
            #f5efe3,
            #e4d5b7
        );
}

.product-2{
    background:
        linear-gradient(
            145deg,
            #e9edf0,
            #bdcbd0
        );
}

.product-3{
    background:
        linear-gradient(
            145deg,
            #ece0c9,
            #9b7650
        );
}

.product-4{
    background:
        linear-gradient(
            145deg,
            #f3e5dc,
            #c8a8a0
        );
}

.bottle{
    width:90px;
    height:205px;

    border:2px solid rgba(60,40,20,.35);

    border-radius:
        15px 15px 10px 10px;

    display:grid;

    place-items:center;

    font-family:Georgia,serif;

    font-size:13px;

    letter-spacing:2px;

    color:#503d28;

    box-shadow:
        0 20px 35px rgba(0,0,0,.14);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.35),
            rgba(155,110,50,.18),
            rgba(255,255,255,.35)
        );
}

.product-image .shine{
    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    opacity:0;

    background:
        radial-gradient(
            circle at var(--shine-x,50%) var(--shine-y,50%),
            rgba(255,255,255,.55),
            rgba(255,255,255,0) 42%
        );

    transition:opacity .35s ease;

    mix-blend-mode:soft-light;
}

.product-card:hover .shine{
    opacity:1;
}

.product-image .bottle,
.product-image > *:not(.shine):not(.discount){
    transition:
        transform .5s cubic-bezier(.16,.84,.32,1);
}

.product-card:hover .bottle{
    transform:
        translateY(-6px)
        scale(1.03);
}

.discount{
    position:absolute;

    top:14px;
    right:14px;

    background:#5e3b67;

    color:#fff;

    padding:3px 9px;

    border-radius:2px;

    font-size:11px;

    transition:
        transform .3s cubic-bezier(.34,1.56,.64,1);
}

.product-card:hover .discount{
    transform:
        scale(1.08)
        translateY(-2px);
}

.product-info{
    padding:18px;
}

.product-info p{
    font-size:11px;

    color:#9a773e;

    margin:0;
}

.product-info h3{
    margin:2px 0 5px;

    font-size:19px;
}

.notes{
    display:block;

    color:#888;

    font-size:11px;

    margin-bottom:13px;
}

.product-info del{
    display:block;

    color:#aaa;

    font-size:11px;
}

.product-info strong{
    display:block;

    font-size:14px;

    color:#30232d;
}

.track-controls{
    display:flex;

    gap:8px;

    justify-content:flex-start;

    direction:ltr;
}

.track-controls button{
    width:42px;
    height:42px;

    border:1px solid #d9c8a7;

    background:white;

    cursor:pointer;
}


/* =========================================================
   STORE
   ========================================================= */

.store{
    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:80px;

    align-items:center;
}

.store-image{
    height:560px;

    background:#e9e3da;
}

.image-placeholder{
    height:100%;

    display:grid;

    place-items:center;

    color:#8b8378;

    background:
        linear-gradient(
            135deg,
            #eee9e1,
            #d8d0c3
        );

    font-size:14px;
}

.store-copy{
    padding-left:20px;
}

.store-copy p:not(.eyebrow){
    color:#716c70;

    line-height:2;

    margin-bottom:28px;
}


/* =========================================================
   STORY
   ========================================================= */

.story-heading{
    margin-bottom:45px;
}

.story-grid{
    display:grid;

    grid-template-columns:.8fr 1.2fr;

    gap:70px;

    align-items:center;
}

.story-text{
    position:relative;

    padding-right:25px;
}

.big-quote{
    font-family:Georgia,serif;

    font-size:100px;

    color:#d6bd8a;

    position:absolute;

    right:-5px;
    top:-55px;
}

.story-text p{
    font-size:18px;

    color:#696368;
}

.story-visual{
    height:470px;
}


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

.center-heading{
    text-align:center;

    margin-bottom:45px;
}

.center-heading>p:not(.eyebrow){
    color:#777;
}

.category-track{
    display:grid;

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

    gap:12px;
}

.category{
    min-height:240px;

    padding:24px;

    display:flex;

    flex-direction:column;

    justify-content:end;

    position:relative;

    overflow:hidden;

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

    transition:
        transform .4s cubic-bezier(.16,.84,.32,1),
        box-shadow .4s ease;
}

.category:hover{
    transform:translateY(-6px);

    box-shadow:
        0 22px 45px rgba(20,15,10,.16);
}

.category span{
    position:absolute;

    top:18px;
    left:18px;

    font-family:Georgia,serif;

    opacity:.5;
}

.category h3{
    font-size:20px;

    margin:0;
}

.category p{
    font-size:11px;

    margin:3px 0 0;

    opacity:.7;
}

.warm{
    background:
        linear-gradient(
            145deg,
            #f3dfc0,
            #c88f57
        );
}

.cool{
    background:
        linear-gradient(
            145deg,
            #e4f0f2,
            #a9cbd1
        );
}

.sweet{
    background:
        linear-gradient(
            145deg,
            #f6e4e8,
            #d4adb6
        );
}

.woody{
    background:
        linear-gradient(
            145deg,
            #ddd2c4,
            #927a61
        );
}

.formal{
    background:
        linear-gradient(
            145deg,
            #ded8e0,
            #756878
        );

    color:#fff;
}


/* =========================================================
   QUOTE
   ========================================================= */

.quote-section{
    background:#151218;

    color:white;

    padding:135px 30px;

    text-align:center;
}

.quote-inner{
    max-width:900px;

    margin:auto;
}

.quote-inner blockquote{
    font-family:
        Georgia,
        "Vazirmatn",
        serif;

    font-size:
        clamp(28px,4vw,53px);

    line-height:1.65;

    margin:0 0 20px;
}

.quote-inner blockquote span{
    color:#d8b875;
}

.quote-inner small{
    color:#b99554;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
    background:#f5f2ed;

    padding:70px 30px 20px;
}

.footer-inner{
    max-width:1240px;

    margin:auto;

    display:grid;

    grid-template-columns:
        2fr 1fr 1fr 1.4fr;

    gap:50px;

    padding-bottom:50px;
}

.footer-inner>div:not(.footer-brand){
    display:flex;

    flex-direction:column;

    gap:8px;
}

.footer-inner h4{
    margin:0 0 8px;
}

.footer-inner a{
    font-size:13px;

    color:#666;
}

.footer-brand p{
    color:#777;

    font-size:13px;
}

.footer-bottom{
    max-width:1240px;

    margin:auto;

    border-top:1px solid #ddd6ca;

    padding-top:17px;

    display:flex;

    justify-content:space-between;

    color:#888;

    font-size:11px;
}


/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.reveal{
    opacity:0;

    transform:
        translateY(22px)
        scale(.985);

    filter:blur(6px);

    transition:
        opacity .9s cubic-bezier(.16,.84,.32,1),
        transform .9s cubic-bezier(.16,.84,.32,1),
        filter .9s cubic-bezier(.16,.84,.32,1);

    transition-delay:
        calc(var(--reveal-i,0) * 90ms);

    will-change:
        opacity,
        transform,
        filter;
}

.reveal.visible{
    opacity:1;

    transform:none;

    filter:blur(0);
}


/* =========================================================
   HEADER SCROLL
   ========================================================= */

.site-header.scrolled .header-inner{
    height:62px;
}

.site-header.scrolled{
    box-shadow:
        0 12px 30px rgba(20,15,10,.08);
}


/* =========================================================
   PRODUCT LOADING
   ========================================================= */

.product-loading{
    display:flex;

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

    gap:10px;

    padding:60px 20px;

    color:#9a773e;

    font-size:13px;
}

.spinner{
    width:16px;
    height:16px;

    border:2px solid #e6d4ac;

    border-top-color:#c69a45;

    border-radius:50%;

    animation:spin .8s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

    .header-inner{
        height:68px;

        padding:0 17px;

        gap:8px;
    }

    .desktop-nav{
        display:none;
    }

    .menu-button{
        display:block;
    }

    .mobile-nav{
        display:flex;
    }

    .brand-text small{
        font-size:6px;

        letter-spacing:1.5px;
    }


    /* -----------------------------
       SEARCH MOBILE
       ----------------------------- */

    .header-search{
        width:auto;

        flex:1 1 auto;

        min-width:0;

        max-width:150px;

        height:38px;

        padding:
            4px 5px 4px 10px;
    }

    .header-search:focus-within{
        width:auto;

        max-width:220px;
    }

    .header-search button{
        width:30px;
        height:30px;

        flex:0 0 30px;
    }

    .header-search svg{
        width:16px;
        height:16px;
    }

    .header-search input{
        font-size:11px;
    }


    /* -----------------------------
       HERO
       ----------------------------- */

    .hero{
        min-height:610px;

        height:
            calc(100vh - 68px);
    }

    .hero-content{
        padding:50px 24px;
    }

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


    /* -----------------------------
       SECTIONS
       ----------------------------- */

    .section-shell{
        padding:80px 20px;
    }

    .section-heading{
        align-items:flex-start;

        flex-direction:column;
    }

    .countdown-wrap{
        align-self:stretch;
    }


    /* -----------------------------
       PRODUCTS
       ----------------------------- */

    .product-card{
        flex-basis:78vw;
    }


    /* -----------------------------
       STORE
       ----------------------------- */

    .store{
        grid-template-columns:1fr;

        gap:35px;
    }

    .store-image{
        height:380px;
    }


    /* -----------------------------
       STORY
       ----------------------------- */

    .story-grid{
        grid-template-columns:1fr;

        gap:30px;
    }

    .story-visual{
        height:330px;
    }


    /* -----------------------------
       CATEGORIES
       ----------------------------- */

    .category-track{
        display:flex;

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        padding-bottom:15px;
    }

    .category{
        min-width:76vw;

        scroll-snap-align:start;
    }


    /* -----------------------------
       FOOTER
       ----------------------------- */

    .footer-inner{
        grid-template-columns:1fr 1fr;

        gap:35px;
    }

    .footer-brand{
        grid-column:1/-1;
    }

    .footer-bottom{
        flex-direction:column;

        gap:5px;
    }


    /* -----------------------------
       OLD SEARCH PILL
       ----------------------------- */

    .search-pill span:first-child{
        display:none;
    }

    .search-pill{
        width:34px;

        justify-content:center;

        padding:0;
    }


    .section-number{
        display:none;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media(max-width:380px){

    .header-search{
        max-width:120px;
    }

    .header-search:focus-within{
        max-width:160px;
    }

    .header-search input{
        font-size:10px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    .reveal{
        filter:none;

        transition:none;

        transition-delay:0ms;
    }

    .product-card,
    .category{
        transition:none;

        transform:none !important;
    }

    .product-image .shine{
        display:none;
    }

    .countdown b.tick{
        animation:none;
    }

    .scroll-cue span::after{
        animation:none;
    }

    .spinner{
        animation:none;
    }

    .mobile-nav,
    .mobile-nav a,
    .menu-button span{
        transition:none;
    }
}




/* گالری تصاویر */
.product-gallery {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.main-image-wrapper {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.main-image-wrapper .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumbs {
    display: flex;
    gap: 10px;
    padding: 12px 0 0;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s;
    opacity: 0.7;
}

.gallery-thumb:hover {
    opacity: 1;
}

.gallery-thumb.active {
    border-color: #d4af37;
    opacity: 1;
}