/* ================= پایه ================= */
@font-face{font-family:"DoranVF";src:url("fonts/DoranVF.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --gold:#c9a96a; --gold-l:#ecd9a8; --gold-rgb:201,169,106; --gold-l-rgb:236,217,168;
  --bg:#121212; --bar:18,18,18; --text:#f4efe8; --muted:#c9c3b9; --head:#f3dfae; --price:#f7e6b8;
  --edge-soft:rgba(var(--gold-rgb),.35); --line:rgba(var(--gold-rgb),.3);
  --chip:rgba(var(--gold-rgb),.08); --glass:rgba(30,30,30,.88); --field:rgba(0,0,0,.35);
  --card-1:rgb(12,12,12); --card-2:rgb(5,5,5); --maxw:480px; --r-lg:25px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html,body{background:var(--bg)}
body{font-family:"DoranVF","Geeza Pro",-apple-system,"SF Pro Text",Tahoma,sans-serif;color:var(--text);line-height:1.8;min-height:100vh;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);position:relative;isolation:isolate}
/* پس‌زمینه: لایه‌ی ثابت جدا با درخشش گرم طلایی از بالا (تم‌های مناسبتی رنگ خودشان را می‌گذارند) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transform:translateZ(0);background:linear-gradient(180deg,#141311,#121212 40%)}
img{display:block;max-width:100%}
a{color:inherit}
.app{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;min-height:100vh;padding:0 22px 8px}

/* ================= سربرگ: لوگو (راست)، نام کافه و وضعیت امروز (وسط)، دکمه‌های «i» و زبان (چپ) ================= */
.top{position:relative;z-index:21}   /* محو بالای نوار ابزار روی لوگو و خط وضعیت نیفتد */
.hero{position:relative;min-height:calc(env(safe-area-inset-top) + 66px);display:flex;align-items:center;justify-content:center;gap:10px;padding:calc(env(safe-area-inset-top) + 8px) 0 8px}
.brand{position:absolute;z-index:2;top:calc(env(safe-area-inset-top) + 8px);right:0;text-align:center}
.logo,html[data-theme] .logo{width:42px;height:auto;margin:0;display:block;filter:none!important}
.title{text-align:center}
.title h1{white-space:nowrap;font-size:1.35rem;font-weight:700;line-height:1.3;letter-spacing:.01em;color:var(--gold-l)}
.title .sep{color:rgba(var(--gold-rgb),.55);font-weight:400;margin:0 2px}
.title .en{font-size:.92em;letter-spacing:.03em}
#statusLine{display:flex;align-items:center;justify-content:center;gap:6px;margin:2px 0 0;font-size:.72rem;line-height:1.5;color:var(--muted)}
#statusLine[hidden]{display:none}
.title p::before,.title p::after{content:"";width:30px;height:1px;background:var(--gold)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.dot.on{background:#7fbf86;box-shadow:0 0 6px rgba(127,191,134,.7)}
.dot.off{background:#e0695a}

.info-btn{position:absolute;z-index:3;top:calc(env(safe-area-inset-top) + 12px);left:-14px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  color:var(--gold-l);background:rgba(var(--gold-rgb),.2);border:1.5px solid rgba(var(--gold-rgb),.7);border-radius:50%;
  transform-origin:top left;transition:background .15s,transform .15s}
.info-btn:active{background:rgba(var(--gold-rgb),.3);transform:scale(.94)}
/* دکمه‌ی زبان: آیکن ترجمه کنار متن */
.lang-btn{position:absolute;z-index:3;top:calc(env(safe-area-inset-top) + 12px);left:26px;height:34px;min-width:40px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:999px;cursor:pointer;
  color:var(--gold-l);font-weight:700;font-size:.74rem;background:rgba(var(--gold-rgb),.14);border:1.5px solid rgba(var(--gold-rgb),.55)}
.lang-btn:active{background:rgba(var(--gold-rgb),.3)}
.lang-btn::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z' stroke='%23000' stroke-width='.7' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z' stroke='%23000' stroke-width='.7' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ================= نوار چسبان: جستجو + تب منوها + حباب دسته‌ها =================
   تمام‌عرض صفحه است و پایینش در زمینه محو می‌شود؛ یک لایه‌ی جدا (::after) هم بالایش را نرم به سربرگ وصل می‌کند */
.toolbar{position:-webkit-sticky;position:sticky;top:0;z-index:20;pointer-events:none;
  margin:0 calc(50% - 50vw) -30px;padding:10px calc(50vw - 50%) 44px;
  background:linear-gradient(to bottom,rgb(var(--bar)) 0,rgb(var(--bar)) calc(100% - 26px),rgba(var(--bar),0) 100%)}
.toolbar>*{pointer-events:auto}
.toolbar::after{content:"";position:absolute;left:0;right:0;top:-46px;height:46px;pointer-events:none;background:linear-gradient(to bottom,rgba(var(--bar),0),rgb(var(--bar)))}
.bar{display:flex;align-items:center;gap:10px}
.s-btn{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;color:var(--price);cursor:pointer;
  background:var(--chip);border:1px solid var(--line);border-radius:50%;transition:.2s}
.s-btn[aria-expanded=true]{background:var(--gold);color:#1b1b1b;border-color:var(--gold)}

/* ردیف‌های لغزنده؛ لبه‌ها با --fl/--fr (از JS) محو می‌شوند. فضای خالی پایین برای اینکه سایه‌ی دکمه‌ی فعال بریده نشود */
.tabs,.chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  --fl:0px;--fr:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.tabs::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
.tabs{flex:1;min-width:0;padding:14px 8px 20px;margin:-10px 0 -16px}
.tab,.chip{position:relative;flex:0 0 auto;font:inherit;color:var(--text);cursor:pointer;white-space:nowrap;background:var(--chip);border:1px solid var(--line);
  border-radius:999px;transition:.2s;-webkit-appearance:none;appearance:none}
.tab{font-weight:700;font-size:.95rem;padding:6px 16px;height:42px}
.chip{font-weight:600;font-size:.85rem;padding:4px 14px;height:36px}
/* دکمه‌ی انتخاب‌شده: گرادیان تا لبه‌ی بیرونی، سایه‌ی یکنواخت دورتادور و بالاتر از همسایه‌ها */
.tab.active,.chip.active{z-index:2;color:#1b1b1b;border-color:transparent;background:linear-gradient(180deg,var(--gold-l),var(--gold)) border-box;box-shadow:0 0 12px 1px rgba(var(--gold-rgb),.42)}
/* دسته‌هایی که الان در صفحه دیده می‌شوند نیمه‌روشن علامت می‌خورند */
.chip.seen:not(.active){color:var(--gold-l);border-color:rgba(var(--gold-rgb),.65);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.25)}

/* حباب دسته‌ها: فلش بالایش (--px از JS) زیر تب فعال می‌نشیند */
.tray{--px:50%;--tray-bg:rgb(9,9,9);position:relative;display:flex;align-items:center;margin-top:12px;border-radius:999px;
  background:var(--tray-bg);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.45),0 6px 18px rgba(0,0,0,.42)}
.tray[hidden]{display:none}
.tray::before{content:"";position:absolute;top:-7px;left:calc(var(--px) - 7px);width:14px;height:14px;background:var(--tray-bg);transform:rotate(45deg);
  border-top:1px solid rgba(var(--gold-rgb),.45);border-left:1px solid rgba(var(--gold-rgb),.45);border-radius:3px 0 0 0}
.tray .chips{flex:1;min-width:0;padding:8px}
.tray .chips:empty{display:none}
.tray .chip.active{box-shadow:0 0 10px 1px rgba(var(--gold-rgb),.42)}

.searchrow{padding-top:10px}
.search{width:100%;font:inherit;font-size:.95rem;color:var(--text);height:44px;background:var(--field);border:1px solid var(--line);
  border-radius:999px;padding:0 18px;outline:none;-webkit-appearance:none;appearance:none}
.search:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.2)}
.search::placeholder{color:var(--muted)}

/* «قیمت‌ها به هزار تومان»: کپسول تیره، بالاتر از محو نوار */
.unit{position:relative;z-index:21;display:table;margin:12px auto -8px;padding:5px 18px;border-radius:999px;text-align:center;
  font-size:.82rem;font-weight:700;color:var(--gold-l);background:rgba(0,0,0,.78);box-shadow:inset 0 0 0 1px var(--edge-soft),0 6px 16px rgba(0,0,0,.4)}

/* پیام‌ها: نوار ثابت بالای منو */
.notes{display:grid;gap:8px;margin:12px 0 0}
.bar-note{margin:0;padding:10px 14px;border-radius:14px;font-size:.88rem;line-height:1.9;text-align:center;
  background:rgba(var(--gold-rgb),.12);border:1px solid rgba(var(--gold-rgb),.45);color:var(--gold-l)}
.bar-note.alert{background:rgba(214,96,77,.16);border-color:rgba(224,105,90,.6);color:#ffb3a6}

/* ================= دسته‌ها و آیتم‌ها: منوی چاپی کلاسیک ================= */
main{padding:0 0 8px}
.cat{padding-top:22px}
.frame{position:relative;border-radius:20px;padding:16px 16px 8px;background:linear-gradient(160deg,var(--card-1),var(--card-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(var(--gold-rgb),.4),0 12px 28px rgba(0,0,0,.38)}
.frame>*{position:relative}
/* نوار الگوی بالای قاب که به پایین محو می‌شود */
.frame::before{content:"";position:absolute;left:0;right:0;top:0;height:58px;border-radius:20px 20px 0 0;pointer-events:none;
  background:url("img/pattern.svg") repeat top center/300px 300px;mix-blend-mode:screen;opacity:.9;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 40%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 40%,transparent 100%)}
/* تابش دور قاب مقصد بعد از رسیدن اسکرول */
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 0 0 2px rgba(var(--gold-l-rgb),.95);will-change:opacity}
.frame.glow::after{animation:frameGlow 1.4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes frameGlow{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* عنوان دسته: سایه‌ی محوِ هم‌رنگ کارت پشت متن (تا الگو پشتش کمتر دیده شود) و خطی که از سمت عنوان محو می‌شود */
.cat h2{position:relative;font-size:1.2rem;font-weight:800;color:var(--head);padding-bottom:14px;margin-bottom:8px}
.cat h2::after{content:"";position:absolute;bottom:0;inset-inline:0;height:2px;border-radius:2px;background:linear-gradient(270deg,rgba(var(--gold-rgb),.75),rgba(var(--gold-rgb),.28) 45%,rgba(var(--gold-rgb),0))}
.h2t{position:relative;display:inline-block;isolation:isolate;text-shadow:0 1px 8px rgba(31,31,31,.9)}
.h2t::before{content:"";position:absolute;z-index:-1;inset:-10px -34px -8px -34px;border-radius:999px;background:var(--card-1);opacity:.95;-webkit-filter:blur(22px);filter:blur(22px)}
.cat-note{font-size:.76rem;line-height:1.8;color:var(--muted);padding:8px 0 4px}

.item{padding:12px 0}
/* خط جداکننده‌ی آیتم‌ها که دو سرش محو می‌شود؛ در جستجو اولین آیتم باقی‌مانده خط ندارد */
.item+.item{background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 22%,rgba(255,255,255,.2) 78%,rgba(255,255,255,0) 100%) top/100% 1px no-repeat}
.item+.item.first-vis{background:none}
.item.tap{cursor:pointer}
.l1{display:flex;align-items:baseline;gap:8px}
.name{font-size:1.02rem;font-weight:700;line-height:1.6;flex:0 1 auto;min-width:0;color:#fff}
.dots{flex:1;min-width:14px;border-bottom:2.5px dotted var(--edge-soft);transform:translateY(-4px)}
.price{white-space:nowrap;font-size:.98rem;font-weight:800;color:var(--price)}
.desc{font-size:.76rem;line-height:1.75;color:var(--muted);margin-top:2px}
/* قیمت دوتایی: جدول دو ستونه (برچسب | عدد) که نام و نقطه‌چین وسط آن می‌نشینند */
.l1.has-multi{align-items:center}
.l1.has-multi .dots{transform:none}
.price.multi{display:grid;grid-template-columns:auto auto;column-gap:15px;row-gap:2px;align-items:center;align-self:center;line-height:1.5}
.price.multi .pv{display:contents}
.pv i{font-style:normal;font-size:.68rem;font-weight:500;color:var(--muted);text-align:right}
.price.multi .pv>span{display:block;text-align:left}

/* برچسب‌ها، عکس، آلرژن، کالری */
.name .tg{display:inline-flex;gap:4px;vertical-align:middle;margin-inline-start:6px}
.bdg{font-size:.62rem;font-weight:700;line-height:1.6;padding:0 8px;border-radius:999px;white-space:nowrap}
.bdg-new{background:rgba(var(--gold-rgb),.24);color:var(--gold-l)}
.bdg-rec{background:rgba(120,170,230,.2);color:#b6d3ff}
.bdg-best{background:rgba(224,105,90,.2);color:#ffb3a6}
.bdg-veg{background:rgba(127,191,134,.2);color:#a9dbb0}
.bdg-hot{background:rgba(238,110,70,.24);color:#ffab8a}
.item.has-img{display:flex;gap:12px;align-items:flex-start}
.item .ibody{min-width:0;flex:1}
.item .thumb{width:54px;height:54px;border-radius:12px;object-fit:cover;flex:none;border:1px solid rgba(var(--gold-rgb),.35);background:#111}
.item .meta{display:flex;align-items:center;gap:8px;margin:4px 0 0;font-size:.74rem;color:var(--muted)}
.item .meta .al{display:inline-flex;color:var(--gold)}

/* طعم‌ها داخل قاب قلیان */
.flavors .fl-title{font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:8px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:.85rem;font-weight:600;padding:3px 13px;border-radius:999px;color:var(--gold-l);background:var(--chip);box-shadow:inset 0 0 0 1px var(--line)}

/* آیتم تمام‌شده: عدد قیمت فقط نامرئی می‌شود (تا ستون‌ها هم‌سطح بمانند) و قرص «تمام شد» رویش می‌نشیند */
.item.out .price:not(.multi),.pv.out>span{position:relative;color:transparent!important}
.item.out .price:not(.multi){min-width:2.5rem}
.item.out .price:not(.multi)::after,.pv.out>span::after{content:"تمام شد";position:absolute;top:50%;white-space:nowrap;font-size:.6rem;font-weight:800;line-height:1.5;
  padding:0 6px;border-radius:999px;background:rgba(214,96,77,.2);color:#ffb3a6}
.item.out .price:not(.multi)::after{left:0;transform:translateY(-50%)}
.pv.out>span::after{left:50%;transform:translate(-50%,-50%)}
.pv.out>i{opacity:.5}
.item.out .name,.item.out .desc{-webkit-filter:grayscale(1);filter:grayscale(1);opacity:.4}
.item.out .l1:not(.has-multi){align-items:center}
.item.out .l1:not(.has-multi) .dots{transform:none}

.empty{text-align:center;padding:40px 0;opacity:.8}

/* ================= منوی دارای ساعت سرو، بعد از پایان ساعت ================= */
.ended-note{display:none}
.cat.ended .ended-note{display:block;margin:10px 0 4px;padding:8px 12px;border-radius:12px;font-size:.8rem;font-weight:600;line-height:1.7;
  color:#f0c9c0;background:rgba(214,96,77,.14);box-shadow:inset 0 0 0 1px rgba(214,96,77,.4);animation:endedBlink 1.4s ease-in-out infinite}
@keyframes endedBlink{0%,100%{opacity:1}50%{opacity:.25}}
.cat.ended .items{opacity:.15;-webkit-filter:grayscale(.8);filter:grayscale(.8)}
.cat.ended h2{opacity:.5}
.cat.ended h2::after{background:linear-gradient(270deg,rgba(224,105,90,.7),rgba(224,105,90,0))}
.cat.ended .frame{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(224,105,90,.6),0 16px 34px rgba(0,0,0,.65)}
.cat.ended .frame::after{box-shadow:0 0 0 2px rgba(224,105,90,.95),0 0 14px rgba(224,105,90,.55)}
/* تب منوی تمام‌شده: کم‌رنگ؛ هنگام انتخاب قرمز. مهر «پایان سرو» کج روی گوشه‌ی دکمه */
.tab.ended{opacity:.5;color:var(--muted)}
.tab.ended.active{opacity:1;color:#fff;border-color:transparent;background:linear-gradient(180deg,#e0695a,#b3392b) border-box;box-shadow:0 0 12px 1px rgba(214,96,77,.5)}
.tab .badge{position:absolute;z-index:2;top:-9px;left:-6px;padding:0 4px;white-space:nowrap;font-size:.56rem;font-weight:800;line-height:1.5;letter-spacing:0;
  color:#ff9d8c;background:#1a0d0b;border:1.5px solid currentColor;border-radius:2px;transform:rotate(-12deg)}
.tab .badge[hidden]{display:none}
.tab.ended.active .badge{background:#8a2a1c;color:#fff;border-color:#fff}

/* ================= فوتر تماس ================= */
footer.contact{padding:8px 0 90px}
.contact h2{font-size:1.15rem;font-weight:800;color:var(--head);margin:26px 4px 12px}
.actions{display:grid;gap:10px}
.btn{display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 14px;border-radius:20px;text-decoration:none;color:var(--text);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--edge-soft);transition:transform .15s,background .2s}
.btn .ico{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--gold-l);
  background:rgba(var(--gold-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.4)}
.btn .txt{display:flex;flex-direction:column;line-height:1.5;min-width:0}
.btn .txt small{font-size:.78rem;font-weight:500;opacity:.85}
.btn .num{font-weight:800;font-size:1.25rem;letter-spacing:.04em;text-align:right}
.btn.primary{color:#15120a;background:linear-gradient(180deg,var(--gold-l),var(--gold));box-shadow:0 8px 20px rgba(var(--gold-rgb),.28),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.primary .ico{color:var(--gold-l);background:#15120a;box-shadow:none}
.btn:active{transform:scale(.98)}
.copy{text-align:center;margin-top:26px;font-size:.78rem;color:var(--muted);opacity:.8}

/* ================= برگه‌ها (معرفی و جزئیات آیتم) ================= */
dialog:not([open]){display:none}
.sheet{margin:auto auto 0;width:min(var(--maxw),100%);max-width:100%;max-height:86vh;overflow-y:auto;border:0;border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:24px 22px calc(env(safe-area-inset-bottom) + 28px);color:var(--text);text-align:justify;
  background:linear-gradient(160deg,var(--card-1),var(--card-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 -14px 30px rgba(0,0,0,.5)}
.sheet::backdrop{background:rgba(0,0,0,.6)}
.sheet h2{font-size:1.1rem;margin-bottom:10px;text-align:right;color:var(--head)}
.sheet p{font-size:.92rem;font-weight:500}
.close{margin-top:18px;width:100%;font:inherit;font-weight:700;color:#1b1b1b;background:linear-gradient(180deg,var(--gold-l),var(--gold));
  border:0;border-radius:999px;height:44px;cursor:pointer}
/* برگه‌ی معرفی: وضعیت، تماس، اطلاعیه‌ها */
#aboutStatus{display:grid;gap:6px;margin:12px 0 0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05)}
.st-row{display:flex;align-items:center;gap:8px;font-size:.9rem}
.contact-list{list-style:none;margin:12px 0 0;padding:0}
.contact-list li{border-top:1px solid rgba(255,255,255,.08);padding:9px 0}
.contact-list li,.contact-list a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;color:inherit;text-decoration:none}
.contact-list li>a{flex:1}
.contact-list span{color:var(--muted);font-size:.85rem;flex:none}
.contact-list b{font-weight:600;color:var(--gold-l);text-align:end}
#aboutNotes{margin:14px 0 4px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
#aboutNotes h3{font-size:.95rem;margin:0 0 8px;color:var(--head)}
.sheet p.anote{margin:8px 0 0;padding:10px 12px;border-radius:12px;font-size:.88rem;line-height:1.95;
  background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.35);color:var(--gold-l)}
.sheet p.anote.alert{background:rgba(214,96,77,.14);border-color:rgba(224,105,90,.5);color:#ffb3a6}
/* برگه‌ی جزئیات آیتم */
.idlg-img{display:block;width:100%;max-height:240px;object-fit:cover;border-radius:14px;margin-bottom:12px}
.idlg h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.idlg .idlg-desc{margin:6px 0 0}
.ip{margin:12px 0 0}
.ip-row{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid rgba(255,255,255,.08)}
.ip-row b{color:var(--price)}
.ip-row.out b{color:#ffb3a6}
.idlg-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:.85rem}
.al-l{display:inline-flex;align-items:center;gap:5px;color:var(--gold-l)}
.idlg-meta .cal{color:var(--muted)}

/* ================= دکمه‌ی بازگشت به بالا با حلقه‌ی پیشرفت ================= */
.to-top{position:fixed;z-index:60;bottom:calc(env(safe-area-inset-bottom) + 22px);left:max(16px,calc(50% - var(--maxw) / 2 + 16px));width:52px;height:52px;padding:0;border:0;border-radius:50%;
  cursor:pointer;color:var(--price);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.42);
  opacity:0;transform:translateY(24px) scale(.8);pointer-events:none;transition:opacity .25s,transform .3s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:active{transform:scale(.92)}
.to-top svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.to-top circle{fill:none;stroke-width:3}
.to-top .trk{stroke:rgba(var(--gold-rgb),.22)}
.to-top .ring{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .12s linear}
.to-top .arw{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transform-origin:24px 24px}

/* ================= پیام موقت (toast): متن | دکمه‌ی بستن با حلقه‌ی شمارش‌معکوس؛ رنگ‌ها از تم فعال ================= */
.toast{--tc:var(--gold);--tc-l:var(--gold-l);position:fixed;z-index:60;left:50%;top:calc(env(safe-area-inset-top) + 14px);width:min(448px,calc(100% - 28px));
  display:flex;align-items:center;gap:12px;padding:12px;padding-inline:18px 12px;border-radius:20px;overflow:hidden;color:var(--text);cursor:pointer;
  background:linear-gradient(160deg,rgb(var(--bar)),rgb(var(--bar)));
  background:linear-gradient(160deg,color-mix(in srgb,rgb(var(--bar)) 84%,#fff),color-mix(in srgb,rgb(var(--bar)) 92%,#000));
  box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 0 0 1px rgba(var(--gold-rgb),.5),inset 0 1px 0 rgba(255,255,255,.1);
  opacity:0;transform:translate(-50%,-24px);pointer-events:none;transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.2,1)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast.alert{--tc:#ff9d8c;--tc-l:#ffb3a6;box-shadow:0 12px 34px rgba(0,0,0,.6),inset 0 0 0 1px rgba(224,105,90,.6)}
.toast p{flex:1;min-width:0;margin:0;font-size:.86rem;font-weight:500;line-height:1.75;text-align:start;unicode-bidi:plaintext}
.toast-x{position:relative;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;color:var(--tc-l);cursor:pointer;
  background:rgba(var(--gold-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.25)}
.toast-x:hover{background:rgba(var(--gold-rgb),.3)}
.toast-x>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.toast-x circle{fill:none;stroke-width:2.4}
.toast-x .tr-bg{stroke:rgba(255,255,255,.12)}
.toast-x .tr-fg{stroke:var(--tc);stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:0;animation:toastRing linear forwards;animation-play-state:paused}
.toast.show .tr-fg{animation-play-state:running}
.toast-x b{position:relative;font-size:1.15rem;font-weight:500;line-height:1}
@keyframes toastRing{to{stroke-dashoffset:94.25}}

/* ================= پنل تنظیمات/آزمایش (فقط localhost، ?debug و دمو) ================= */
.simclock{position:fixed;right:12px;bottom:calc(env(safe-area-inset-bottom) + 22px);z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.sim-toggle{height:42px;padding:0 16px 0 14px;display:inline-flex;align-items:center;gap:7px;border-radius:999px;cursor:pointer;
  font-size:.85rem;font-weight:700;color:var(--gold-l);background:rgba(var(--bar),.92);border:1.5px solid rgba(var(--gold-rgb),.6);box-shadow:0 8px 24px rgba(0,0,0,.42)}
.sim-toggle svg{flex:none}
.sim-toggle:active{transform:scale(.96)}
.sim-body{max-width:min(340px,calc(100vw - 24px));max-height:70vh;overflow-y:auto;padding:12px;border-radius:16px;font-size:.8rem;
  background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 0 1px var(--edge-soft)}
.sim-body[hidden]{display:none}
.sim-h{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px;font-size:.9rem;color:var(--gold-l)}
.sim-x{border:0;background:var(--chip);color:var(--text);width:26px;height:26px;border-radius:50%;font-size:1rem;line-height:1;cursor:pointer}
.sim-body input{font:inherit;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:8px;padding:2px 6px}
.sim-body p{margin-top:6px;color:var(--muted)}
.sim-quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.sim-quick span{color:var(--muted);font-size:.75rem}
.sim-quick button{font:inherit;font-size:.78rem;color:var(--text);background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:2px 10px;cursor:pointer}
.sim-bg span{width:100%}
.sim-bg button{white-space:nowrap}
.sim-reset{color:#ee7d6e!important}

/* ================= English / چپ‌به‌راست ================= */
html[dir="ltr"] .brand{right:auto;left:0}
html[dir="ltr"] .info-btn{left:auto;right:-14px}
html[dir="ltr"] .lang-btn{left:auto;right:26px}
html[dir="ltr"] .title h1{display:flex;flex-direction:row-reverse;justify-content:center;gap:6px}
html[dir="ltr"] .tab .badge{left:auto;right:-6px;transform:rotate(12deg)}
html[dir="ltr"] .price.multi .pv>span{text-align:right}
html[dir="ltr"] .cat h2::after{background:linear-gradient(90deg,rgba(var(--gold-rgb),.75),rgba(var(--gold-rgb),.28) 45%,rgba(var(--gold-rgb),0))}
html[dir="ltr"] .cat.ended h2::after{background:linear-gradient(90deg,rgba(224,105,90,.7),rgba(224,105,90,0))}
html.en .item .name,html.en .desc{unicode-bidi:plaintext}
/* «Sold out» درازتر از «تمام شد» است: قرص جمع‌وجور، چسبیده به لبه‌ی ستون عدد */
html.en .price.multi{column-gap:8px}
html.en .item.out .price:not(.multi){min-width:2.7rem}
html.en .pv.out>span{display:inline-block;min-width:2.7rem}
html.en .item.out .price:not(.multi)::after,html.en .pv.out>span::after{content:"Sold out";line-height:1.45;padding:3px 5px 0 6px;text-align:center;
  left:auto;right:-5px;transform:translateY(-50%)}

/* ================= پالت‌های آزمایشی: html[data-theme] ================= */
html[data-theme="rose"]{--gold:#c98a76;--gold-l:#f0cdbd;--gold-rgb:201,138,118;--gold-l-rgb:240,205,189;--head:#f3d3c5;--price:#f8dccd}
html[data-theme="rose-dark"]{--gold:#b0705f;--gold-l:#d9a595;--gold-rgb:176,112,95;--gold-l-rgb:217,165,149;--head:#e3b7a8;--price:#edc6b8}
html[data-theme="gold"]{--gold:#d9a920;--gold-l:#f7d765;--gold-rgb:217,169,32;--gold-l-rgb:247,215,101;--head:#f8dd78;--price:#fbe595}

/* ================= تم‌های مناسبتی: html[data-occasion] =================
   هر تم: رنگ‌ها، زمینه‌ی کارت و حباب دسته‌ها، و گرادیان پس‌زمینه. سایه‌ها هم‌رنگ زمینه‌ی همان تم (--shc) */
html[data-occasion]{--shc:color-mix(in srgb,var(--bg) 60%,#000)}
html[data-occasion] .logo{filter:brightness(1.7) contrast(1.05)!important}
html[data-occasion] .tab:not(.active){color:var(--gold-l)}
html[data-occasion] .dot.on{background:var(--gold-l);box-shadow:0 0 6px rgba(var(--gold-l-rgb),.7)}
html[data-occasion] .unit{background:color-mix(in srgb,color-mix(in srgb,var(--bg) 55%,#000) 88%,transparent);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.35),0 6px 16px color-mix(in srgb,var(--shc) 55%,transparent)}
html[data-occasion] .tray{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.45),0 6px 18px color-mix(in srgb,var(--shc) 60%,transparent)}
html[data-occasion] .frame{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(var(--gold-rgb),.4),0 12px 28px color-mix(in srgb,var(--shc) 38%,transparent)}
html[data-occasion] .to-top,html[data-occasion] .sim-toggle{box-shadow:0 8px 24px color-mix(in srgb,var(--shc) 60%,transparent)}

html[data-occasion="nowruz"]{--bg:#0f2d20;--bar:14,43,30;--card-1:rgb(10,32,24);--card-2:rgb(5,14,11);--text:#eef7ea;--muted:#b5c9b1;
  --gold:#7fc28a;--gold-l:#c8ecc0;--gold-rgb:127,194,138;--gold-l-rgb:200,236,192;--head:#d3f0cb;--price:#e0f4d8}
html[data-occasion="nowruz"] .tray{--tray-bg:rgb(8,26,19)}
html[data-occasion="nowruz"] .frame{background:linear-gradient(160deg,rgba(10,32,24,.9),rgba(5,14,11,.93))}
html[data-occasion="nowruz"] body::before{background:linear-gradient(180deg,#0f2d2a,#123320)}

html[data-occasion="yalda"]{--bg:#0f2347;--bar:11,26,59;--card-1:rgb(10,20,42);--card-2:rgb(5,10,24);
  --gold:#e3ab52;--gold-l:#f7d68f;--gold-rgb:227,171,82;--gold-l-rgb:247,214,143;--head:#f6d89c;--price:#fbe4b4}
html[data-occasion="yalda"] .tray{--tray-bg:rgb(8,17,38)}
html[data-occasion="yalda"] .frame{background:linear-gradient(160deg,rgba(10,20,42,.9),rgba(5,10,24,.93))}
html[data-occasion="yalda"] body::before{background:radial-gradient(90% 20% at 50% 100%,rgba(224,110,100,.16),transparent 72%),linear-gradient(180deg,#0b1a3b,#0f2347 55%,#13264d)}

html[data-occasion="mothers"]{--bg:#311d21;--bar:46,27,34;--card-1:rgb(34,20,23);--card-2:rgb(15,9,10);--text:#fbeff2;--muted:#cdb6bc;
  --gold:#e8a0b0;--gold-l:#f6cfd8;--gold-rgb:232,160,176;--gold-l-rgb:246,207,216;--head:#f8d6de;--price:#fbe2e8}
html[data-occasion="mothers"] .tray{--tray-bg:rgb(27,16,18)}
html[data-occasion="mothers"] .frame{background:linear-gradient(160deg,rgba(34,20,23,.9),rgba(15,9,10,.93))}
html[data-occasion="mothers"] body::before{background:radial-gradient(ellipse 70% 30% at 15% 38%,rgba(246,207,216,.10),transparent 70%),radial-gradient(ellipse 60% 26% at 88% 52%,rgba(255,200,170,.09),transparent 70%),radial-gradient(ellipse 70% 28% at 25% 88%,rgba(232,160,176,.10),transparent 70%),linear-gradient(180deg,#2e1b22,#35201f)}

html[data-occasion="fathers"]{--bg:#111d30;--bar:10,24,48;--card-1:rgb(12,20,34);--card-2:rgb(5,9,14);--text:#eaf1fb;--muted:#b3c0d2;
  --gold:#86aedf;--gold-l:#c4dbf6;--gold-rgb:134,174,223;--gold-l-rgb:196,219,246;--head:#cfe1f7;--price:#dbe8f9}
html[data-occasion="fathers"] .tray{--tray-bg:rgb(9,16,26)}
html[data-occasion="fathers"] .frame{background:linear-gradient(160deg,rgba(12,20,34,.9),rgba(5,9,14,.93))}
html[data-occasion="fathers"] body::before{background:linear-gradient(180deg,#0a1830,#1b2530)}
html[data-occasion="fathers"] .dc-sway{animation-duration:15s!important}
html[data-occasion="fathers"] .dc-flutter{animation-duration:14s!important}

html[data-occasion="valentine"]{--bg:#340e25;--bar:59,16,33;--card-1:rgb(36,10,26);--card-2:rgb(16,4,11);--text:#fbeff2;--muted:#cdb6bc;
  --gold:#e0485f;--gold-l:#f2a7b6;--gold-rgb:224,72,95;--gold-l-rgb:242,167,182;--head:#f6bcc8;--price:#f9ccd5}
html[data-occasion="valentine"] .tray{--tray-bg:rgb(29,8,20)}
html[data-occasion="valentine"] .frame{background:linear-gradient(160deg,rgba(36,10,26,.9),rgba(16,4,11,.93))}
html[data-occasion="valentine"] body::before{background:radial-gradient(circle 210px at 12% 34%,rgba(255,110,150,.16),transparent 70%),radial-gradient(circle 260px at 90% 40%,rgba(255,150,170,.12),transparent 70%),radial-gradient(circle 190px at 20% 82%,rgba(220,80,140,.14),transparent 70%),radial-gradient(circle 150px at 85% 90%,rgba(255,180,190,.10),transparent 70%),linear-gradient(180deg,#3b1021,#2a0b2a)}

html[data-occasion="christmas"]{--bg:#0c2223;--bar:10,29,41;--card-1:rgb(8,24,24);--card-2:rgb(4,10,10);
  --gold:#d9a94a;--gold-l:#f2d68a;--gold-rgb:217,169,74;--gold-l-rgb:242,214,138;--head:#f3dc96;--price:#f8e7b2}
html[data-occasion="christmas"] .tray{--tray-bg:rgb(7,19,19)}
html[data-occasion="christmas"] .frame{background:linear-gradient(160deg,rgba(8,24,24,.9),rgba(4,10,10,.93))}
html[data-occasion="christmas"] body::before{background:linear-gradient(180deg,#0a1d29,#0e2a1b)}

html[data-occasion="halloween"]{--bg:#190d15;--bar:17,10,29;--card-1:rgb(18,9,15);--card-2:rgb(8,4,6);
  --gold:#f08a24;--gold-l:#f7c070;--gold-rgb:240,138,36;--gold-l-rgb:247,192,112;--head:#f9cf8e;--price:#fbdcaa}
html[data-occasion="halloween"] .tray{--tray-bg:rgb(14,7,12)}
html[data-occasion="halloween"] .frame{background:linear-gradient(160deg,rgba(18,9,15,.9),rgba(8,4,6,.93))}
html[data-occasion="halloween"] body::before{background:linear-gradient(180deg,#110a1d,#261209)}

html[data-occasion="winter"]{--bg:#0d1b2c;--bar:12,28,48;--card-1:rgb(10,22,36);--card-2:rgb(5,11,19);--text:#ecf5fd;--muted:#b4c4d4;
  --gold:#8ec5f0;--gold-l:#d3eafb;--gold-rgb:142,197,240;--gold-l-rgb:211,234,251;--head:#d9edfc;--price:#e6f3ff}
html[data-occasion="winter"] .tray{--tray-bg:rgb(8,17,28)}
html[data-occasion="winter"] .frame{background:linear-gradient(160deg,rgba(10,22,36,.9),rgba(5,11,19,.93))}
html[data-occasion="winter"] body::before{background:linear-gradient(180deg,#0b1a2e,#16283b)}

html[data-occasion="autumn"]{--bg:#1c120b;--bar:34,19,10;--card-1:rgb(26,16,10);--card-2:rgb(12,7,4);--text:#f8ece0;--muted:#cbb8a4;
  --gold:#e58a2c;--gold-l:#f5c47c;--gold-rgb:229,138,44;--gold-l-rgb:245,196,124;--head:#f6cf94;--price:#fadcaa}
html[data-occasion="autumn"] .tray{--tray-bg:rgb(20,12,7)}
html[data-occasion="autumn"] .frame{background:linear-gradient(160deg,rgba(26,16,10,.9),rgba(12,7,4,.93))}
html[data-occasion="autumn"] body::before{background:linear-gradient(180deg,#1a0f08,#2b170b)}

/* DECOR-START */
/* تزئینات مناسبتی (app.js → setOccasion): لایه‌ی ثابت پشت محتوا، فقط در حاشیه‌ها */
.decor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.decor.far{opacity:.6}
.decor .it{position:absolute;will-change:transform,opacity}
.decor .it span{display:block}
.decor svg{display:block;overflow:visible}
@keyframes dcPeek{0%,6%{transform:translateX(-115%)}16%,58%{transform:translateX(-2%)}68%,100%{transform:translateX(-115%)}}
@keyframes dcTail{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(14deg)}}
@keyframes dcFall{0%{transform:translate3d(0,-10vh,0);opacity:0}8%{opacity:var(--op,1)}90%{opacity:var(--op,1)}100%{transform:translate3d(var(--dx,0px),112vh,0);opacity:0}}
@keyframes dcRise{0%{transform:translate3d(0,112vh,0);opacity:0}10%{opacity:var(--op,1)}80%{opacity:var(--op,1)}100%{transform:translate3d(var(--dx,0px),-12vh,0);opacity:0}}
@keyframes dcSway{0%,100%{transform:translateX(calc(var(--sw,12px) * -1)) rotate(calc(var(--rt,14deg) * -1))}50%{transform:translateX(var(--sw,12px)) rotate(var(--rt,14deg))}}
@keyframes dcFlutter{0%{transform:rotateY(0) rotateZ(0)}100%{transform:rotateY(360deg) rotateZ(40deg)}}
@keyframes dcTilt{0%,100%{transform:rotate(calc(var(--tr,5deg) * -1))}50%{transform:rotate(var(--tr,5deg))}}
@keyframes dcTwinkle{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:var(--op,1);transform:scale(1.08)}}
@keyframes dcSpark{0%,70%,100%{opacity:0;transform:scale(.3) rotate(0)}82%{opacity:var(--op,1);transform:scale(1) rotate(45deg)}92%{opacity:0;transform:scale(.5) rotate(80deg)}}
@keyframes dcBlink{0%,42%{opacity:1}58%,100%{opacity:.22}}
@keyframes dcBlinkOpp{0%,42%{opacity:.22}58%,100%{opacity:1}}
@keyframes dcFlame{0%{transform:scale(1,1) skewX(0)}12%{transform:scale(.93,1.08) skewX(-3deg)}27%{transform:scale(1.05,.94) skewX(2deg)}41%{transform:scale(.96,1.1) skewX(-2deg)}58%{transform:scale(1.04,.95) skewX(3deg)}73%{transform:scale(.92,1.05) skewX(-1deg)}88%{transform:scale(1.03,1.02) skewX(2deg)}100%{transform:scale(1,1) skewX(0)}}
@keyframes dcHalo{0%,100%{opacity:.55;transform:scale(.95)}35%{opacity:.9;transform:scale(1.04)}65%{opacity:.62;transform:scale(.98)}}
@keyframes dcBeat{0%,60%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(1)}36%{transform:scale(1.14)}48%{transform:scale(1)}}
@keyframes dcGrass{0%,100%{transform:skewX(-3deg)}50%{transform:skewX(3deg)}}
@keyframes dcBurst{0%{transform:translate3d(var(--x0,-25vw),0,0)}34%,100%{transform:translate3d(var(--x1,125vw),var(--y1,0px),0)}}
@keyframes dcSwing{0%,100%{transform:rotate(calc(var(--sa,8deg)*-1))}50%{transform:rotate(var(--sa,8deg))}}
@keyframes dcFloat{0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}25%{transform:translate3d(var(--fx,6px),-9px,0) rotate(1deg)}50%{transform:translate3d(0,-16px,0) rotate(3deg)}75%{transform:translate3d(calc(var(--fx,6px)*-1),-7px,0) rotate(0deg)}}
@keyframes dcWisp{0%,100%{transform:skewX(-5deg)}50%{transform:skewX(5deg)}}
@keyframes dcEyes{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}97%{transform:scaleY(1)}}
@keyframes dcWingL{0%,100%{transform:rotate(-26deg) scaleY(1)}50%{transform:rotate(32deg) scaleY(.55)}}
@keyframes dcWingR{0%,100%{transform:rotate(26deg) scaleY(1)}50%{transform:rotate(-32deg) scaleY(.55)}}
@keyframes dcThread{0%,6%{transform:scaleY(.42)}16%{transform:scaleY(1.04)}20%{transform:scaleY(.98)}24%,58%{transform:scaleY(1)}63%,68%{transform:scaleY(.86)}73%,78%{transform:scaleY(.68)}84%,100%{transform:scaleY(.42)}}
@keyframes dcSpiderY{0%,6%{transform:translateY(calc(var(--len,96px)*-.58))}16%{transform:translateY(calc(var(--len,96px)*.04))}20%{transform:translateY(calc(var(--len,96px)*-.02))}24%,58%{transform:translateY(0)}63%,68%{transform:translateY(calc(var(--len,96px)*-.14))}73%,78%{transform:translateY(calc(var(--len,96px)*-.32))}84%,100%{transform:translateY(calc(var(--len,96px)*-.58))}}
@keyframes dcGhostFade{0%,100%{opacity:.5}40%{opacity:.58}50%,56%{opacity:.06}68%{opacity:.5}}
@keyframes dcFaceGlow{0%,100%{opacity:.9}9%{opacity:.62}17%{opacity:1}29%{opacity:.74}38%{opacity:.96}52%{opacity:.58}61%{opacity:.92}77%{opacity:.7}88%{opacity:1}}
@keyframes dcCandle{0%,100%{opacity:.78;transform:scale(1)}9%{opacity:.5;transform:scale(.95)}17%{opacity:.95;transform:scale(1.05)}29%{opacity:.62;transform:scale(.97)}38%{opacity:.9;transform:scale(1.03)}52%{opacity:.45;transform:scale(.94)}61%{opacity:.86;transform:scale(1.02)}77%{opacity:.6;transform:scale(.97)}88%{opacity:.95;transform:scale(1.04)}}
@keyframes dcFog{0%{transform:translate3d(0,0,0) scale(1,1);opacity:.75}50%{transform:translate3d(-7%,-5px,0) scale(1.04,1.14);opacity:1}100%{transform:translate3d(-14%,0,0) scale(1,1);opacity:.8}}
@keyframes dcBreeze{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(1.4deg) scale(1.03)}}
.dc-peek{animation:dcPeek var(--pk,24s) ease-in-out var(--dl,0s) infinite}
.dc-tail{transform-box:fill-box;transform-origin:15% 100%;animation:dcTail 4.8s ease-in-out infinite}
.dc-fall{animation:dcFall var(--d,12s) linear var(--dl,0s) infinite}
.dc-rise{animation:dcRise var(--d,14s) linear var(--dl,0s) infinite}
.dc-sway{animation:dcSway var(--sd,5s) ease-in-out var(--dl,0s) infinite}
.dc-flutter{animation:dcFlutter var(--fl,6s) linear var(--dl,0s) infinite}
.dc-tilt{transform-origin:50% 85%;animation:dcTilt var(--tt,9s) ease-in-out var(--dl,0s) infinite}   /* میوه‌های کنج یلدا: تاب خیلی کند */
.dc-twinkle{animation:dcTwinkle var(--td,3s) ease-in-out var(--dl,0s) infinite}
.dc-spark{animation:dcSpark var(--td,4.5s) ease-in-out var(--dl,0s) infinite}
.dc-blink{animation:dcBlink var(--bk,1.7s) steps(1) var(--dl,0s) infinite}
.dc-blink-opp{animation:dcBlinkOpp var(--bk,1.7s) steps(1) infinite}
.dc-flame{transform-origin:50% 92%;animation:dcFlame var(--fd,1.9s) ease-in-out infinite}
.dc-halo{animation:dcHalo 2.6s ease-in-out infinite}
.dc-beat{animation:dcBeat var(--bt,1.9s) ease-in-out var(--dl,0s) infinite}
.dc-grass{transform-origin:50% 100%;animation:dcGrass var(--gd,5s) ease-in-out var(--dl,0s) infinite}
.dc-burst{left:0;animation:dcBurst var(--d,20s) linear var(--dl,0s) infinite}
.dc-swing{transform-origin:50% 0;animation:dcSwing var(--sd,4s) ease-in-out var(--dl,0s) infinite}
.dc-thread{transform-origin:50% 0;animation:dcThread var(--sp,14s) ease-in-out var(--dl,0s) infinite}
.dc-spider{animation:dcSpiderY var(--sp,14s) ease-in-out var(--dl,0s) infinite}
.dc-ghost{opacity:.5;animation:dcFloat var(--bd,6s) ease-in-out var(--dl,0s) infinite,dcGhostFade var(--gf,13s) ease-in-out var(--dl,0s) infinite}
.dc-wisp{transform-origin:50% 0;animation:dcWisp var(--wd,3.2s) ease-in-out var(--dl,0s) infinite}
.dc-eyes{transform-box:fill-box;transform-origin:50% 50%;animation:dcEyes var(--ed,5.5s) linear var(--dl,0s) infinite}
.dc-face{animation:dcFaceGlow var(--fg,2.4s) ease-in-out infinite}
.dc-candle{animation:dcCandle var(--fg,2.4s) ease-in-out infinite}
.dc-fog{transform-origin:50% 100%;animation:dcFog var(--d,30s) ease-in-out infinite alternate}
.dc-breeze{transform-origin:0 0;animation:dcBreeze var(--d,8s) ease-in-out infinite}
.dc-wing-l,.dc-wing-r{transform-box:fill-box;transform-origin:100% 35%;animation:dcWingL var(--fp,.34s) ease-in-out var(--dl,0s) infinite}
.dc-wing-r{transform-origin:0 35%;animation-name:dcWingR}
/* پرواز موجی خفاش‌ها */
@keyframes dcWave{
  0%,100%{transform:translate3d(0,calc(var(--wa,16px)*-1),0) rotate(0deg);animation-timing-function:cubic-bezier(.12,0,.39,0)}
  25%{transform:translate3d(0,0,0) rotate(var(--bank,9deg));animation-timing-function:cubic-bezier(.61,1,.88,1)}
  50%{transform:translate3d(0,var(--wa,16px),0) rotate(0deg);animation-timing-function:cubic-bezier(.12,0,.39,0)}
  75%{transform:translate3d(0,0,0) rotate(calc(var(--bank,9deg)*-1));animation-timing-function:cubic-bezier(.61,1,.88,1)}}
.dc-wave{animation:dcWave var(--wd,2.6s) ease-in-out var(--dl,0s) infinite}
/* دست آدم‌برفی که تکان می‌خورد */
.dc-arm{transform-origin:152px 151px;animation:smWave 5.5s ease-in-out infinite}
@keyframes smWave{0%,50%,100%{transform:rotate(0)}58%{transform:rotate(-24deg)}66%{transform:rotate(3deg)}74%{transform:rotate(-24deg)}82%{transform:rotate(3deg)}90%{transform:rotate(0)}}
/* DECOR-END */

/* المان آخر صفحه (سبزه، درخت، سبیل، آدم‌برفی، برگ‌ها): داخل جریان صفحه، بعد از فوتر، کلیک‌ناپذیر */
.decor-end{width:min(340px,86%);margin:-64px auto 0;padding-bottom:22px;pointer-events:none;position:relative;z-index:1}
.decor-end.de-stache{width:min(300px,78%);margin:6px auto 0;padding-bottom:30px;opacity:.9}
.decor-end.de-snowman{width:min(210px,56%);margin:10px auto 0;padding-bottom:26px}
.decor-end.de-leaves{width:min(340px,88%);margin:0 auto;padding-bottom:18px;opacity:.95}
.dc-stache{transform-origin:50% 60%;animation:dcStache 6s ease-in-out infinite;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.dc-stache svg,.dc-snowman svg,.dc-leafpile svg{display:block;width:100%;height:auto}
.dc-snowman{transform-origin:50% 100%;animation:dcSnow 6s ease-in-out infinite}
.dc-leafpile{animation:dcLeaf 7s ease-in-out infinite}
@keyframes dcStache{0%,100%{transform:rotate(-2.5deg) scale(1)}50%{transform:rotate(2.5deg) scale(1.04)}}
@keyframes dcSnow{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg) translateY(-2px)}}
@keyframes dcLeaf{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ================= صفحه‌ی آغاز مناسبت‌ها (window.showSplash) ================= */
.splash{font-family:"DoranVF","Geeza Pro",-apple-system,"SF Pro Text",Tahoma,sans-serif;line-height:1.6;position:fixed;inset:0;z-index:100000;display:grid;place-items:center;cursor:pointer;transition:opacity .55s ease}
.splash.out{opacity:0;pointer-events:none}
.sp-art{width:min(62vw,300px);filter:drop-shadow(0 18px 28px rgba(0,0,0,.35))}
.sp-art svg{display:block;width:100%;height:auto;overflow:visible}
.sp-art.sp-balloon{position:relative;z-index:2;width:min(74vw,320px);animation:spBalloon 2.7s cubic-bezier(.3,.7,.3,1) both}
.sp-art:has(.sp-duo){width:min(78vw,340px)}
.sp-art:has(.sp-poster){width:min(94vw,420px);filter:none}
.sp-art.sp-big{width:min(84vw,380px)}
.sp-art.sp-front,.sp-art.sp-layer{position:relative;z-index:2}
.sp-art.sp-front svg{filter:drop-shadow(0 14px 18px rgba(90,10,35,.45))}
.sp-art .dc-face{animation:none;opacity:1}
.sp-duo{display:flex;align-items:center;justify-content:center}
.sp-duo>span{display:block}
.sp-pop{animation:spPop .75s cubic-bezier(.2,1.35,.4,1) both}
.sp-beat{animation:spPop .75s cubic-bezier(.2,1.35,.4,1) both,spBeat 1s ease-in-out .8s 2}
.sp-eyes{animation:spEyes 1.5s ease-in-out .8s both}
.sp-stache{transform-box:fill-box;transform-origin:50% 50%;animation:spStache 1.6s ease-in-out .9s 1}
.sp-black{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;animation:spBlack 1.3s ease-in-out 2.4s forwards}
/* تبریک بالا (مارکی) و نام کافه پایین */
.sp-top,.sp-bot{position:absolute;left:0;right:0;text-align:center;animation:spFade .6s ease .35s both}
.sp-top{top:calc(env(safe-area-inset-top) + 13%);overflow:hidden;direction:ltr;white-space:nowrap;font-size:clamp(1.5rem,8vw,2.3rem);font-weight:800;letter-spacing:.02em;text-shadow:0 2px 14px rgba(0,0,0,.22)}
.sp-track{display:inline-flex;animation:spMarquee 9s linear infinite}
.sp-top.fa .sp-track{animation-direction:reverse}
.sp-track span{padding:0 .6em}
.sp-track span::after{content:"\2726";margin-left:1.2em;font-size:.6em;vertical-align:middle;opacity:.7}
.sp-bot{bottom:calc(env(safe-area-inset-bottom) + 11%);display:flex;align-items:center;justify-content:center;gap:12px;font-size:1.25rem;font-weight:700;direction:rtl}
.sp-bot i{width:1.5px;height:1.3em;background:currentColor;opacity:.6}
.sp-bot span{letter-spacing:.06em;direction:ltr}
.sp-brand{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.sp-brand img{width:min(40vw,170px);height:auto;filter:brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.sp-brand b{font-size:clamp(1.9rem,9vw,2.6rem);font-weight:800;text-shadow:0 2px 14px rgba(0,0,0,.3)}
/* ذرات پس‌زمینه (برف، قلب، ستاره، گلبرگ) */
.sp-star{position:absolute;display:block;animation:spTw 1.4s ease-in-out infinite}
.sp-fx{position:absolute;display:block;pointer-events:none;opacity:0}
.sp-fx svg,.sp-fx i{display:block;width:100%}
.sp-fx.fall{top:-6%;animation:spFall linear infinite}
.sp-fx.rise{bottom:-6%;animation:spRise linear infinite}
.sp-fx.twinkle{top:calc(10% + 75% * var(--r,.5));animation:spTw 1.6s ease-in-out infinite}
@keyframes spBalloon{0%{transform:translateY(75vh) rotate(-6deg);opacity:0}25%{opacity:1}42%{transform:translateY(-1.5vh) rotate(4deg)}56%{transform:translateY(1vh) rotate(-3deg)}70%{transform:translateY(0) rotate(2deg)}100%{transform:translateY(-95vh) rotate(-5deg);opacity:1}}
@keyframes spPop{0%{transform:scale(.2) rotate(-8deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes spEyes{0%,100%{fill:#ff9a2e}35%,65%{fill:#ff1f1f}}
@keyframes spBeat{0%,100%{transform:scale(1)}30%{transform:scale(1.12)}}
@keyframes spStache{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg) scale(1.04)}60%{transform:rotate(3deg) scale(1.04)}}
@keyframes spBlack{to{opacity:1}}
@keyframes spFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes spMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spTw{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
@keyframes spFall{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(112vh) rotate(60deg);opacity:.6}}
@keyframes spRise{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-112vh) rotate(-20deg);opacity:.5}}

/* ================= واکنش‌گرا ================= */
/* گوشی: اندازه‌ی نام کافه با عرض صفحه کوچک می‌شود تا بین دکمه‌های چپ و لوگوی راست جا بماند */
@media (max-width:699px){
  .title h1{font-size:max(.8rem,min(1.35rem,calc((100vw - 200px) / 8.3)))}
}
@media (max-width:379px){
  .title h1{font-size:max(.8rem,min(1.35rem,calc((100vw - 172px) / 8.3)))}
  .logo,html[data-theme] .logo{width:32px}
  .info-btn{transform:scale(.68)}
  html[dir="ltr"] .info-btn{transform-origin:top right}
  .lang-btn{left:12px;height:26px;min-width:32px;padding:0 6px;gap:3px;font-size:.62rem;border-width:1.2px}
  html[dir="ltr"] .lang-btn{left:auto;right:12px}
  .lang-btn::before{width:12.5px;height:12.5px}
  .title p::before,.title p::after{display:none}
  #statusLine{font-size:.66rem}
}
/* تبلت و بالاتر: دو ستون */
@media (min-width:700px){
  :root{--maxw:920px}
  .app{padding:0 32px 8px}
  .hero{padding-top:28px}
  .logo{width:48px}
  .title h1{font-size:1.7rem}
  .toolbar{padding-top:14px}
  .tabs,.chips{justify-content:safe center}   /* وسط‌چین فقط وقتی جا هست؛ وگرنه شروع ردیف بریده نمی‌شود */
  .unit{margin-top:16px;margin-bottom:16px}
  main{columns:2;column-gap:28px;padding-top:6px}
  .cat{break-inside:avoid;padding-top:0;margin-bottom:28px}
  .to-top{left:24px}
}
/* دسکتاپ: سه ستون؛ ماوس افقی اسکرول نمی‌کند، پس چیپ‌ها چندردیفه و وسط‌چین می‌شوند */
@media (min-width:900px){
  :root{--maxw:1120px}
  main{columns:3;column-gap:26px}
  .tray{border-radius:28px}
  .tray .chips{flex-wrap:wrap;justify-content:center;overflow:visible;gap:8px;padding:10px 16px;-webkit-mask-image:none;mask-image:none}
}
@media (hover:hover){
  .tab,.chip{transition:color .2s,border-color .2s,transform .2s}
  .tab:not(.active):hover,.chip:not(.active):hover{color:var(--gold-l);border-color:rgba(var(--gold-rgb),.7);transform:translateY(-1px)}
  .item.tap:hover{background:rgba(255,255,255,.035);border-radius:12px}
  .to-top:hover,.sim-toggle:hover,.info-btn:hover,.lang-btn:hover{filter:brightness(1.15)}
}
:where(button,a,input,.item.tap):focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .frame.glow::after{animation-duration:.01s}
  .cat.ended .ended-note{animation:none}
  .toast{transition:opacity .2s;transform:translate(-50%,0)}
  .decor *,.decor-end *{animation:none!important}
  .decor .dc-fall,.decor .dc-rise,.decor .dc-burst,.decor .dc-fog,.decor .dc-peek{display:none}
  .decor .dc-halo,.decor .dc-candle{opacity:.6}
  .sp-art.sp-balloon,.dc-snowman,.dc-leafpile,.dc-arm{animation:none}
}