@font-face{font-family:"Lahzeh";font-weight:300;font-stretch:100%;src:url(../fonts/Lahzeh-Light.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:300;font-stretch:112.5%;src:url(../fonts/Lahzeh-LightSemiStretch.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:300;font-stretch:125%;src:url(../fonts/Lahzeh-LightStretch.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:300;font-stretch:150%;src:url(../fonts/Lahzeh-LightExStretch.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:400;font-stretch:100%;src:url(../fonts/Lahzeh-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:400;font-stretch:112.5%;src:url(../fonts/Lahzeh-RegularSemiStretch.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:400;font-stretch:125%;src:url(../fonts/Lahzeh-RegularStretch.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:400;font-stretch:150%;src:url(../fonts/Lahzeh-RegularExStretch.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:500;font-stretch:100%;src:url(../fonts/Lahzeh-Medium.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:500;font-stretch:112.5%;src:url(../fonts/Lahzeh-MediumSemiStretch.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:500;font-stretch:125%;src:url(../fonts/Lahzeh-MediumStretch.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:500;font-stretch:150%;src:url(../fonts/Lahzeh-MediumExStretch.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:700;font-stretch:100%;src:url(../fonts/Lahzeh-Bold.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:700;font-stretch:112.5%;src:url(../fonts/Lahzeh-BoldSemiStretch.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:700;font-stretch:125%;src:url(../fonts/Lahzeh-BoldStretch.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lahzeh";font-weight:700;font-stretch:150%;src:url(../fonts/Lahzeh-BoldExStretch.woff2) format("woff2");font-display:swap}
:root{--bg:#8C9878;--accent:#4F8FB5;--ink:#000;--paper:#fff;--fa:"Lahzeh",Tahoma,system-ui,sans-serif;--semi:112.5%;--wide:125%;--xwide:150%}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-x pan-y;margin:0;background:var(--paper);color:var(--ink);font-family:var(--fa);-webkit-tap-highlight-color:transparent;max-width:560px;margin-inline:auto;min-height:100vh}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
[hidden]{display:none!important}

/* هدر سبز */
.top,.hero{background:var(--bg)}
.top{display:flex;align-items:center;gap:17px;padding:calc(env(safe-area-inset-top,0px) + 16px) 23px 0}
.round{flex:none;width:45px;height:45px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;transition:transform .2s}
.pill{font-stretch:var(--semi);flex:1;min-width:0;height:45px;border:1.5px solid var(--ink);border-radius:999px;padding:0 14px;font-size:14px;transition:transform .2s}
.pill span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.round:active,.pill:active{transform:scale(.96)}
.hero{padding:0 23px 0;min-height:313px;display:flex;flex-direction:column}
.hero__hi{margin:38px 0 0;font-size:15px;font-weight:400;font-stretch:var(--wide)}
.hero__type{margin:26px 0 0;font-size:clamp(21px,7.4vw,28px);line-height:1.45;font-weight:500;font-stretch:var(--wide);white-space:pre-line;min-height:2.9em;letter-spacing:-.01em}
.hero__type.is-typing::after{content:"";display:inline-block;width:2px;height:.9em;margin-inline-start:3px;vertical-align:-.08em;background:var(--ink);animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* تب‌ها */
.tabs{margin:auto -23px 0;padding:0 23px 22px;display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{display:none}
.tab{font-stretch:var(--semi);flex:none;min-width:90px;height:31px;padding:0 14px;font-size:15px;scroll-snap-align:center;transition:background .25s,color .25s}
.tab.is-on{background:var(--ink);color:var(--paper)}

/* شبکه */
.grid{display:grid;grid-template-columns:1fr 1fr;padding:1px 1px 180px}
.cell{position:relative;aspect-ratio:1/1;container-type:size;min-width:0;min-height:0;overflow:hidden;padding:16px;margin:-1px;border:2px solid var(--ink);background:var(--paper)}
.cell[hidden]{display:none!important}
.js .cell:not(.in){opacity:0;transform:translateY(30px) scale(.96)}
.js .cell.in{transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.cell__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cell__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 46%,rgba(0,0,0,0) 72%)}
.cell__title{position:relative;margin:0;display:flex;align-items:baseline;gap:6px;font-size:clamp(14px,9.4cqw,19px);font-weight:700;font-stretch:var(--wide);line-height:1.3;flex-wrap:wrap}
.has-img .cell__title{color:#fff}
.cell__title i{font-style:normal;font-weight:400}
.latin{font-weight:inherit;letter-spacing:.01em}
.cell__desc{position:relative;margin:6px 0 0;font-size:clamp(11px,6.4cqw,13px);font-weight:300;font-stretch:var(--semi);line-height:1.45}
.has-img .cell__desc{color:rgba(255,255,255,.88)}
.cell__price{position:relative;margin:10px 0 0;display:flex;align-items:baseline;gap:5px;color:var(--accent);white-space:nowrap}
.has-img .cell__price,.has-img .cell__price small{color:#fff}
.cell__price b{font-size:clamp(15px,9.6cqw,21px);font-weight:700;font-stretch:var(--wide)}
.cell__price small{font-size:clamp(9px,5.6cqw,11px)}
.cell__ctrl{position:absolute;inset-inline-start:16px;bottom:13px;display:flex;z-index:1}
.has-img .add,.has-img .step{background:#fff;border-color:#fff}
.has-img .add{color:var(--accent)}
.has-img .step{color:var(--accent)}
.has-img .step .inc{background:var(--accent);color:#fff}
.is-out .cell__img{filter:grayscale(1)}

.add{position:relative;width:32px;height:32px;border:1.5px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);transition:transform .15s}
.add svg{width:20px;height:20px}
.add:active{transform:scale(.9)}
.add.has{background:var(--accent);color:var(--paper)}
.add em{position:absolute;top:-7px;inset-inline-end:-7px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--ink);color:#fff;font:700 11px/18px var(--fa);text-align:center}
.step{display:flex;align-items:center;justify-content:space-between;width:84px;height:32px;border:1.5px solid var(--accent);border-radius:999px;color:var(--accent);padding:0 2px;animation:pop .22s ease}
.step button{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:var(--accent)}
.step .inc{background:var(--accent);color:var(--paper)}
.step span{font-size:16px;font-weight:700}
@keyframes pop{from{transform:scale(.85);opacity:.4}}

/* سبد شناور */
.fade{position:fixed;inset:auto 0 0;height:150px;background:linear-gradient(rgba(255,255,255,0),#fff 85%);pointer-events:none;z-index:5}
.cart{position:fixed;z-index:10;left:0;right:0;margin:0 auto;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);width:max-content;min-width:119px;height:80px;padding:0 20px 3px;border-radius:40px;background:var(--accent);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;white-space:nowrap;animation:rise .35s cubic-bezier(.2,.9,.3,1.2)}
.cart svg{width:14px;height:14px;stroke-width:2;flex:none}
.cart strong{margin-top:7px;font-stretch:var(--wide);font-weight:400;font-size:16px;line-height:1}
.cart small{margin-top:11px;font-size:10px;line-height:1}
.cart.bump{animation:bump .25s ease}
@keyframes rise{from{transform:translateY(30px) scale(.8);opacity:0}}
@keyframes bump{50%{transform:scale(1.07)}}

/* دیالوگ آدرس */
.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:90vh;overflow:auto;border:0;border-top:2px solid var(--ink);padding:18px 16px calc(env(safe-area-inset-bottom,0px) + 18px);background:var(--paper);color:var(--ink)}
.sheet[open]{animation:sheetin .5s cubic-bezier(.22,1,.36,1) both}
.sheet[open]::backdrop{animation:bdin .4s ease both}
.sheet[open].out{animation:sheetout .32s cubic-bezier(.5,0,.9,.4) both}
.sheet[open].out::backdrop{animation:bdout .32s ease both}
@keyframes sheetin{from{transform:translateY(100%)}}
@keyframes sheetout{to{transform:translateY(100%)}}
@keyframes bdin{from{opacity:0}}
@keyframes bdout{to{opacity:0}}
.sheet label{display:block;font-weight:700;margin-bottom:8px}
.sheet textarea,.co__form input,.co__form textarea{width:100%;border:1.5px solid var(--ink);border-radius:0;padding:10px;background:transparent;resize:none}
.sheet__row{display:flex;gap:8px;margin-top:12px}
.btn{height:42px;padding:0 18px;background:var(--ink);color:#fff;font-weight:700}
.btn--ghost{background:none;color:var(--ink);border:1.5px solid var(--ink)}
.btn--block{width:100%}

/* تایید سفارش */
.co{padding:calc(env(safe-area-inset-top,0px) + 24px) 23px 60px}
.co__title{font-size:24px;margin:0 0 18px;font-weight:700}
.co__list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.co__list li{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:2px solid var(--ink)}
.co__list .n{flex:1;font-weight:700}
.co__list .p{color:var(--accent);font-weight:700}
.co__sum{display:flex;align-items:baseline;gap:6px;margin:16px 0;font-size:16px}
.co__sum b{font-size:24px;color:var(--accent)}
.co__form{display:grid;gap:10px}
.co__msg{margin:0;min-height:1.4em;font-size:14px}
.co__back{display:inline-block;margin-top:18px;border-bottom:1.5px solid var(--ink)}
.hp{position:absolute;left:-9999px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.empty{grid-column:1/-1;padding:24px 16px;font-size:14px}

.is-out .cell__title,.is-out .cell__desc,.is-out .cell__price{opacity:.4}
.out{font-size:13px;border:1.5px solid var(--ink);padding:5px 12px;border-radius:999px}

.sheet__title{margin:0 0 10px;font-size:18px;font-weight:700}
input,textarea{-webkit-user-select:text;user-select:text}

@media (prefers-reduced-motion:reduce){.js .cell:not(.in){opacity:1;transform:none}}

/* انتخاب گزینه: مربع‌های گرافیکی */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:1px}
.opt{position:relative;margin:-1px;aspect-ratio:1/1;border:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;cursor:pointer;background:var(--paper);transition:transform .15s,background .25s}
.opt:active{transform:scale(.96)}
.opt.on{background:var(--bg)}
.opt__ic{position:relative;width:52px;height:52px;border:1.5px solid var(--ink);border-radius:50%;background:var(--ink);overflow:hidden}
.opt__ic i{position:absolute;inset:auto 0 0;height:0;background:var(--accent);transition:height .8s cubic-bezier(.22,1,.36,1)}
.opts.go .opt__ic i{height:calc(var(--c) * 1%)}
.opt__l{font-size:14px;font-weight:500;font-stretch:var(--semi);line-height:1.2;padding:0 6px}
.opt__p{font-size:13px;color:var(--accent);font-weight:700;transition:color .25s}
.opt.on .opt__p{color:#fff}
.opt em{position:absolute;top:6px;inset-inline-start:6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--ink);color:#fff;font:700 12px/22px var(--fa);text-align:center;font-style:normal;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.opt.on em{transform:scale(1)}
.opt .dec{position:absolute;top:6px;inset-inline-end:6px;width:24px;height:24px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s}
.opt.on .dec{opacity:1;pointer-events:auto}
.js .opts:not(.go) .opt{opacity:0;transform:translateY(14px)}
.opts.go .opt{animation:optin .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * .07s + .2s)}
.opts.go .opt__ic i{transition-delay:calc(var(--i) * .07s + .45s)}
@keyframes optin{from{opacity:0;transform:translateY(14px)}}