/* فونت‌ها روی همین سایت (بدون گوگل فونت، برای سرعت در ایران) */
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/vazirmatn-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/vazirmatn-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/vazirmatn-arabic-600-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/vazirmatn-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/vazirmatn-arabic-800-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/vazirmatn-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/vazirmatn-arabic-900-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/vazirmatn-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Lalezar'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lalezar-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Lalezar'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lalezar-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ================= پایه ================= */
:root {
  --plum: #2b1030; --rose: #e3306d; --rose-soft: #fde3ea; --gold: #d9a35f; --muted: #8a7384; --line: #f0e6eb; --bg: #ffffff; --soft: #faf6f8;
  --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --hdr-h: 84px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--plum); font-family: 'Vazirmatn', Tahoma, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .container { padding-inline: 28px; } }
.fa-num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
::selection { background: var(--rose); color: #fff; }

/* دکمه‌ها */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 26px; font-weight: 800; font-size: 15px; transition: transform .35s var(--spring), box-shadow .35s, background .3s; white-space: nowrap; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--plum); color: #fff; box-shadow: 0 12px 24px -12px rgba(43,16,48,.6); }
.btn-rose { background: var(--rose); color: #fff; box-shadow: 0 12px 24px -12px rgba(227,48,109,.7); }
.btn-ghost { background: #fff; color: var(--plum); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--plum); }
.btn[disabled] { opacity: .55; pointer-events: none; }
.rnd { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; display: grid; place-items: center; font-size: 18px; transition: .3s var(--spring); flex: 0 0 auto; }
.rnd:hover { background: var(--plum); color: #fff; border-color: var(--plum); transform: scale(1.08); }

/* فرم‌ها */
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--muted); }
.input { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 15px; background: #fff; color: var(--plum); outline: none; transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: var(--rose); box-shadow: 0 0 0 4px var(--rose-soft); }
textarea.input { resize: vertical; min-height: 110px; line-height: 1.9; }

/* بخش‌ها */
.section { padding-block: clamp(36px, 6vw, 72px); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.sec-title { margin: 0; font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; line-height: 1.3; text-wrap: balance; }
.sec-title em { font-style: normal; color: var(--rose); }
.sec-sub { margin: 6px 0 0; color: var(--muted); }
.link-arrow { font-weight: 800; display: inline-flex; gap: 6px; align-items: center; }
.link-arrow span { transition: transform .3s var(--spring); }
.link-arrow:hover span { transform: translateX(-6px); }

/* ورود تدریجی هنگام اسکرول */
.await { opacity: 0; transform: translateY(40px); }
.shown { transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* ================= نوار اعلان ================= */
.annc { background: linear-gradient(90deg, var(--plum), #5b1640, var(--plum)); color: #fff; font-size: 13px; font-weight: 600; overflow: hidden; white-space: nowrap; height: 36px; display: flex; align-items: center; }
.annc-track { display: inline-flex; gap: 48px; padding-inline-start: 48px; animation: marquee 32s linear infinite; }
.annc-track span::before { content: "✦"; color: var(--gold); margin-inline-end: 12px; }
/* نوار اعلان با اسکرول خودش بالا می‌رود؛ تغییر ارتفاع آن صفحه را می‌لرزاند */

/* ================= هدر ================= */
.hdr { position: sticky; top: 0; z-index: 60; padding-block: 12px; transition: transform .4s var(--ease); }
.hdr-in { position: relative; display: flex; align-items: center; gap: 16px; height: 64px; padding-inline: 14px 10px; border-radius: 22px; background: rgba(255,255,255,.82); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid rgba(240,230,235,.9); box-shadow: 0 10px 30px -20px rgba(43,16,48,.35); transition: box-shadow .4s, border-radius .4s; }
/* هنگام اسکرول فقط سایه و جابه‌جایی (transform) عوض می‌شود، نه ارتفاع؛ وگرنه محتوا زیر هدر بالا و پایین می‌پرد */
body.scrolled .hdr { transform: translateY(-4px); }
body.scrolled .hdr-in { box-shadow: 0 18px 40px -22px rgba(43,16,48,.45); }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 22px; flex: 0 0 auto; }
.logo img { height: 40px; width: auto; }
.logo-mark { width: 40px; height: 40px; border-radius: 13px; background: conic-gradient(from 200deg, var(--rose), #ff9a6b, var(--gold), #b56cc9, var(--rose)); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 21px; box-shadow: 0 8px 18px -8px rgba(227,48,109,.8); animation: hue 8s linear infinite; }
.logo-text { background: linear-gradient(90deg, var(--plum), var(--rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* منو position ندارد تا پنل دسته‌ها (mega) به پهنای کل هدر باز شود */
.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav > a, .nav > .has-mega > a { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: color .3s; }
.nav a.active { color: var(--rose); }
.nav-ind { position: absolute; z-index: 0; left: 0; top: 50%; height: 40px; margin-top: -20px; border-radius: 999px; background: var(--rose-soft); opacity: 0; transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s; pointer-events: none; }
.has-mega { position: static; }
.has-mega > a i { font-style: normal; font-size: 11px; transition: transform .3s; }
.has-mega:hover > a i, .has-mega:focus-within > a i { transform: rotate(180deg); }
.mega { position: absolute; top: calc(100% + 12px); inset-inline: 0; background: #fff; border-radius: 26px; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(43,16,48,.45); padding: 18px; display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 12px; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); transform-origin: top; transition: .35s var(--ease); }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega::before { content: ""; position: absolute; inset-inline: 0; top: -14px; height: 14px; }
.mega-cat { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; transition: background .3s, transform .3s var(--spring); }
.mega-cat:hover { background: var(--tone, var(--rose-soft)); transform: translateY(-2px); }
.mega-cat .im { width: 56px; height: 56px; border-radius: 16px; background: var(--tone); display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; }
.mega-cat .im img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s var(--spring); }
.mega-cat:hover .im img { transform: scale(1.15) rotate(-8deg); }
.mega-cat b { display: block; font-size: 15px; } .mega-cat small { color: var(--muted); font-size: 12px; }
.mega-promo { grid-row: span 2; border-radius: 20px; padding: 18px; background: linear-gradient(140deg, var(--plum), #6b1a4a); color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; position: relative; overflow: hidden; }
.mega-promo::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: var(--rose); filter: blur(40px); opacity: .6; bottom: -60px; left: -40px; animation: breathe 5s ease-in-out infinite; }
.mega-promo b { font-size: 20px; position: relative; z-index: 1; } .mega-promo span { position: relative; z-index: 1; font-size: 13px; color: #ecd7e4; }
.mega-promo .btn { position: relative; z-index: 1; align-self: start; padding: 9px 18px; font-size: 13px; background: #fff; color: var(--plum); }
.acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ico { position: relative; width: 44px; height: 44px; border-radius: 14px; border: 0; background: transparent; display: grid; place-items: center; transition: background .25s, transform .3s var(--spring); }
.ico:hover { background: var(--rose-soft); transform: translateY(-2px); }
.ico svg { width: 22px; height: 22px; }
.ico .badge { position: absolute; top: 3px; inset-inline-end: 1px; min-width: 19px; height: 19px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; padding-inline: 4px; border: 2px solid #fff; }
.ico .badge:empty, .ico .badge[data-n="0"] { display: none; }
.ico.bump { animation: bump .55s var(--spring); }
.cart-ico { background: var(--plum); color: #fff; }
.cart-ico:hover { background: var(--rose); }
.burger { display: none; }
.burger span { position: absolute; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }
.burger span:nth-child(1) { transform: translateY(-6px); } .burger span:nth-child(3) { transform: translateY(6px); }
body.menu-open .burger span:nth-child(1) { transform: rotate(45deg); } body.menu-open .burger span:nth-child(2) { opacity: 0; } body.menu-open .burger span:nth-child(3) { transform: rotate(-45deg); }
@media (max-width: 960px) {
  .nav { display: none; }
  .burger { display: grid; }
  .logo { margin-inline: auto; font-size: 19px; }
  .logo-mark { width: 36px; height: 36px; font-size: 19px; }
  .acts .acc-ico { display: none; }
}

/* منوی موبایل */
.mmenu { position: fixed; inset: 0; z-index: 55; background: #fff; padding: 104px 0 0; display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); visibility: hidden; transition: transform .6s cubic-bezier(.7, 0, .2, 1), visibility 0s .6s; }
body.menu-open .mmenu { transform: none; visibility: visible; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
body.menu-open { overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--tone, var(--soft)); font-weight: 700; font-size: 14px; border: 1.5px solid transparent; transition: .3s; }
.chip img { width: 26px; height: 26px; object-fit: contain; mix-blend-mode: multiply; }
.chip.on { background: var(--plum); color: #fff; }

/* جستجو */
.search { position: fixed; inset: 0; z-index: 80; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); padding: 12vh 16px 30px; opacity: 0; visibility: hidden; transition: .35s var(--ease); overflow-y: auto; }
body.search-open .search { opacity: 1; visibility: visible; }
.search-box { max-width: 760px; margin-inline: auto; transform: translateY(-20px); transition: transform .5s var(--ease); }
body.search-open .search-box { transform: none; }
.search-in { display: flex; align-items: center; gap: 12px; border-bottom: 3px solid var(--plum); padding-bottom: 10px; }
.search-in input { flex: 1; border: 0; outline: none; font-size: clamp(22px, 4vw, 38px); font-weight: 800; background: transparent; color: var(--plum); min-width: 0; }
.search-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 24px; }
.sr { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: var(--soft); transition: .3s var(--spring); }
.sr:hover { transform: translateY(-3px); background: var(--rose-soft); }
.sr .im { width: 56px; height: 56px; border-radius: 14px; background: #fff; flex: 0 0 auto; display: grid; place-items: center; }
.sr .im img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.sr b { display: block; font-size: 14px; } .sr small { color: var(--rose); font-weight: 800; }
.search-hint { color: var(--muted); margin-top: 18px; }

/* کشوی سبد خرید */
.ovl { position: fixed; inset: 0; z-index: 70; background: rgba(43,16,48,.35); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: .35s; }
body.cart-open .ovl, body.modal-open .ovl { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 75; width: min(420px, 100%); background: #fff; display: flex; flex-direction: column; transform: translateX(-105%); transition: transform .55s var(--ease); border-radius: 0 28px 28px 0; visibility: hidden; transition: transform .55s var(--ease), visibility 0s .55s; }
body.cart-open .drawer { visibility: visible; transition: transform .55s var(--ease); box-shadow: 30px 0 60px -30px rgba(43,16,48,.4); }
body.cart-open .drawer { transform: none; }
.drawer-h { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer-h b { font-size: 19px; }
.drawer-list { flex: 1; overflow-y: auto; padding: 16px 18px; display: grid; gap: 12px; align-content: start; }
.ci { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: var(--soft); animation: slideIn .45s var(--ease) both; }
.ci .im { width: 72px; height: 72px; border-radius: 14px; background: var(--tone, #fff); display: grid; place-items: center; }
.ci .im img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.ci b { font-size: 14px; display: block; line-height: 1.6; } .ci .pr { color: var(--rose); font-weight: 800; font-size: 14px; }
.qty { display: inline-flex; align-items: center; gap: 2px; background: #fff; border-radius: 999px; padding: 3px; border: 1px solid var(--line); margin-top: 6px; }
.qty button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; font-size: 16px; font-weight: 800; }
.qty button:hover { background: var(--rose-soft); }
.qty span { min-width: 22px; text-align: center; font-weight: 800; font-size: 14px; }
.ci .rm { border: 0; background: transparent; color: var(--muted); font-size: 18px; align-self: start; }
.ci .rm:hover { color: var(--rose); }
.drawer-f { padding: 18px 22px 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.ship-bar { font-size: 13px; color: var(--muted); display: grid; gap: 6px; }
.ship-bar i { display: block; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.ship-bar i u { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--rose)); border-radius: 6px; transition: width .8s var(--ease); }
.empty { text-align: center; color: var(--muted); padding: 40px 10px; display: grid; gap: 10px; justify-items: center; }
.empty .big { font-size: 46px; animation: float 4s ease-in-out infinite; }

/* ================= فوتر کوچک ================= */
.soc { display: flex; gap: 6px; }
.soc a { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--soft); color: var(--plum); transition: .3s var(--spring); }
.soc a:hover { background: var(--rose); color: #fff; transform: translateY(-3px) rotate(-8deg); }
.soc svg { width: 16px; height: 16px; }

/* ================= کارت محصول ================= */
.grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
@media (max-width: 520px) { .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.pc { position: relative; background: #fff; border-radius: 24px; padding: 10px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s; min-width: 0; }
.pc:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(43,16,48,.5); border-color: transparent; }
.pc .box { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; background: var(--tone, var(--soft)); overflow: hidden; perspective: 700px; }
.pc .box img { width: 72%; height: 72%; object-fit: contain; mix-blend-mode: multiply; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) scale(var(--sc, 1)); transition: transform .25s; filter: drop-shadow(0 14px 12px rgba(0,0,0,.14)); }
.pc:hover .box img { --sc: 1.07; }
.pc .box::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.7), transparent 45%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.pc:hover .box::after { opacity: 1; }
.pc .off { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; background: var(--rose); color: #fff; font-weight: 900; font-size: 12px; padding: 4px 10px; border-radius: 10px; animation: pulse 2.2s ease-in-out infinite; }
.pc .new { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; background: var(--plum); color: #fff; font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 10px; }
.pc .off + .new { top: 40px; }
.pc .meta { padding-inline: 4px; display: grid; gap: 4px; }
.pc .br { font-size: 12px; color: var(--muted); font-weight: 700; }
.pc .nm { font-weight: 800; font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.2em; }
.pc .pr { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; flex-wrap: wrap; padding-inline: 4px; }
.pc .pr b { font-size: 16px; font-weight: 900; } .pc .pr s { color: var(--muted); font-size: 12px; }
.pc .stock { display: grid; gap: 4px; font-size: 12px; color: var(--muted); padding-inline: 4px; }
.pc .stock i { display: block; height: 6px; border-radius: 6px; background: #f3e4ec; overflow: hidden; }
.pc .stock i u { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--rose)); transition: width 1.6s var(--ease); }
.pc .add { margin-top: auto; border: 0; border-radius: 14px; padding: 11px; font-weight: 800; background: var(--plum); color: #fff; transition: background .3s, transform .3s var(--spring); }
.pc .add:hover { background: var(--rose); }
.pc .add.done { background: #1f9d6b; }
.pc .add[disabled] { background: #e9dfe5; color: var(--muted); }
@media (max-width: 520px) { .pc { border-radius: 18px; padding: 6px; } .pc .nm { font-size: 13px; } .pc .pr b { font-size: 14px; } .pc .add { font-size: 13px; padding: 9px; } }
.flyer { position: fixed; z-index: 999; width: 56px; height: 56px; pointer-events: none; transition: transform .85s cubic-bezier(.5, -0.4, .6, 1), opacity .85s; }
.flyer img { width: 100%; height: 100%; object-fit: contain; }

/* toast */
.toast { position: fixed; bottom: 24px; left: 50%; z-index: 999; transform: translate(-50%, 30px); opacity: 0; background: var(--plum); color: #fff; padding: 13px 22px; border-radius: 16px; font-weight: 700; box-shadow: 0 20px 40px -20px rgba(43,16,48,.7); transition: .45s var(--spring); max-width: calc(100% - 32px); pointer-events: none; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.toast.err { background: #c0243e; }

/* سربرگ صفحات داخلی */
.page-hero { position: relative; overflow: hidden; border-radius: 30px; background: var(--soft); padding: clamp(28px, 5vw, 56px); margin-top: 8px; isolation: isolate; }
.page-hero h1 { margin: 6px 0 8px; font-size: clamp(30px, 5vw, 52px); font-weight: 900; line-height: 1.25; }
.page-hero p { margin: 0; color: var(--muted); max-width: 56ch; line-height: 1.9; }
.crumbs { font-size: 13px; color: var(--muted); display: flex; gap: 8px; }
.crumbs a:hover { color: var(--rose); }
.page-hero .blob { position: absolute; z-index: -1; width: 340px; aspect-ratio: 1; border-radius: 46% 54% 62% 38% / 44% 40% 60% 56%; inset-inline-end: -80px; top: -120px; background: var(--rose-soft); animation: morph 10s ease-in-out infinite alternate, spin 40s linear infinite; }
.page-hero .blob.b2 { inset-inline-end: 18%; top: auto; bottom: -200px; width: 260px; background: #fff0dc; animation-duration: 12s, 50s; }

.skel { background: linear-gradient(90deg, #f5eef2 25%, #fbf7f9 50%, #f5eef2 75%); background-size: 200% 100%; animation: skel 1.3s linear infinite; border-radius: 18px; }

/* ================= keyframes ================= */
@keyframes marquee { to { transform: translateX(50%); } }
/* فقط ویژگی‌های ترکیبی (rotate/scale) تا مرورگر هر فریم دوباره نقاشی نکند */
@keyframes morph { 0% { scale: 1; rotate: 0deg; } 50% { scale: 1.05 .98; rotate: 10deg; } 100% { scale: .97 1.04; rotate: -8deg; } }
@keyframes float { 50% { translate: 0 -14px; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes bump { 40% { transform: scale(1.22); } }
@keyframes pulse { 50% { transform: scale(1.08); } }
@keyframes pop { 40% { transform: scale(1.35); } }
@keyframes breathe { 50% { transform: scale(1.3); opacity: .8; } }
@keyframes hue { to { filter: hue-rotate(360deg); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-30px); } }
@keyframes skel { to { background-position: -200% 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ================= صفحه اصلی: اسلایدر ================= */
.hero { --bg: #fde3ea; --accent: #e3306d; position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; background: var(--bg); transition: background-color 1s var(--ease); height: clamp(540px, 74vh, 640px); touch-action: pan-y; }
.hero-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; padding: 40px clamp(20px, 5vw, 64px) 110px; pointer-events: none; }
.hero-slide.on { pointer-events: auto; }
.hero-word { position: absolute; inset-inline: 0; bottom: 64px; text-align: center; font-weight: 900; font-size: clamp(90px, 16vw, 220px); line-height: 1; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--plum) 14%, transparent); white-space: nowrap; transform: translateX(-30%); opacity: 0; transition: transform 1.4s var(--ease), opacity .8s; z-index: -1; pointer-events: none; }
.hero-slide.on .hero-word { transform: none; opacity: 1; }
.hero-text { display: grid; gap: 14px; justify-items: start; max-width: 480px; }
.hero-eyebrow { font-weight: 800; font-size: 14px; background: rgba(255,255,255,.7); padding: 6px 14px; border-radius: 999px; }
.hero-title { margin: 0; font-size: clamp(40px, 6vw, 76px); font-weight: 900; line-height: 1.15; }
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; }
.hero-title .w > span { display: inline-block; transform: translateY(110%) rotate(6deg); transition: transform .9s var(--ease); }
.hero-title .hl > span { color: var(--accent); }
.hero-desc { margin: 0; line-height: 1.9; font-size: 16px; max-width: 42ch; }
.hero-buy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-price b { font-size: 22px; font-weight: 900; } .hero-price s { opacity: .55; font-size: 14px; margin-inline-start: 6px; }
.hero-eyebrow, .hero-desc, .hero-buy { opacity: 0; transform: translateY(14px); transition: .7s var(--ease); }
.hero-slide.on .hero-eyebrow { opacity: 1; transform: none; transition-delay: .1s; }
.hero-slide.on .hero-desc { opacity: 1; transform: none; transition-delay: .45s; }
.hero-slide.on .hero-buy { opacity: 1; transform: none; transition-delay: .55s; }
.hero-slide.on .hero-title .w > span { transform: none; transition-delay: .15s; }
.hero-slide.on .hero-title .w.hl > span { transition-delay: .27s; }
.hero-art { position: relative; height: 100%; display: grid; place-items: center; }
.hero-blob { position: absolute; width: min(80%, 420px); aspect-ratio: 1; background: var(--accent); border-radius: 46% 54% 62% 38% / 44% 40% 60% 56%; transform: scale(0) rotate(-40deg); transition: transform 1.1s var(--spring); animation: morph 9s ease-in-out infinite alternate; opacity: .9; }
.hero-slide.on .hero-blob { transform: scale(1) rotate(0); }
.hero-prod { position: relative; width: min(70%, 380px); transform: translate(calc(var(--mx, 0) * -18px), calc(var(--my, 0) * -18px)); }
.hero-prod > div { transform: translateY(120px) rotate(-35deg) scale(.6); opacity: 0; transition: transform 1.2s var(--spring) .2s, opacity .5s .2s; }
.hero-prod img { width: 100%; height: auto; filter: drop-shadow(0 30px 30px rgba(0,0,0,.22)); }
.hero-slide.on .hero-prod > div { transform: none; opacity: 1; animation: float 5s ease-in-out 1.4s infinite; }
.hero-chip { position: absolute; background: #fff; border-radius: 16px; padding: 10px 14px; font-size: 13px; line-height: 1.5; box-shadow: 0 14px 30px -14px rgba(0,0,0,.3); transform: translate(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 14px)) scale(0); transition: transform .7s var(--spring); }
.hero-chip b { display: block; font-size: 18px; font-weight: 900; color: var(--accent); }
.hero-chip.ch1 { top: 14%; inset-inline-start: 4%; } .hero-chip.ch2 { bottom: 14%; inset-inline-end: 10%; }
.hero-slide.on .hero-chip { transform: translate(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 14px)) scale(1); transition-delay: .8s; }
.hero-slide.on .hero-chip.ch2 { transition-delay: 1s; }
.hero-ui { position: absolute; inset-inline: clamp(20px, 5vw, 64px); bottom: 24px; display: flex; align-items: center; gap: 20px; z-index: 5; }
.hero-count { direction: ltr; font-weight: 900; font-size: 15px; min-width: 64px; } .hero-count b { font-size: 26px; }
.hero-bar { flex: 1; height: 3px; background: rgba(43,16,48,.15); border-radius: 3px; overflow: hidden; }
.hero-bar i { display: block; height: 100%; background: var(--plum); transform-origin: right; transform: scaleX(0); }
.hero-bar i.run { animation: fill 6.5s linear forwards; }
.hero:hover .hero-bar i.run { animation-play-state: paused; }
.hero-thumbs { display: flex; gap: 8px; }
.hero-thumbs button { width: 54px; height: 54px; border-radius: 16px; border: 2px solid transparent; background: rgba(255,255,255,.6); padding: 6px; transition: .3s var(--spring); }
.hero-thumbs button img { width: 100%; height: 100%; object-fit: contain; }
.hero-thumbs button.on { border-color: var(--plum); background: #fff; transform: translateY(-4px); }
.hero-arrows { display: flex; gap: 8px; }
@keyframes fill { to { transform: scaleX(1); } }
@media (max-width: 860px) {
  .hero { height: 700px; border-radius: 26px; }
  .hero-slide { grid-template-columns: 1fr; grid-template-rows: 290px auto; align-content: start; padding: 16px 20px 96px; gap: 8px; }
  .hero-art { order: -1; height: 290px; }
  .hero-prod { width: min(62%, 260px); }
  .hero-word { bottom: auto; top: 120px; }
  .hero-thumbs { display: none; }
  .hero-desc { font-size: 15px; }
}

/* ================= دسته‌بندی‌ها (بنتو) ================= */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; }
.tile { --tone: #ffd6e3; --deep: #e3306d; position: relative; overflow: hidden; border-radius: 28px; background: var(--tone); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; transition: color .4s; }
.tile::before { content: ""; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: var(--deep); top: 16px; inset-inline-end: 16px; transform: scale(0); transition: transform .8s var(--ease); z-index: -1; }
.tile:hover::before, .tile:focus-visible::before { transform: scale(20); }
.tile:hover, .tile:focus-visible { color: #fff; }
.tile-t { position: relative; display: grid; gap: 4px; max-width: 62%; }
.tile-t b { font-size: 22px; font-weight: 900; } .tile-t span { font-size: 13px; opacity: .8; line-height: 1.7; }
.tile .go { position: absolute; top: 16px; inset-inline-end: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--plum); color: #fff; display: grid; place-items: center; font-size: 18px; transition: transform .5s var(--spring), background .4s, color .4s; }
.tile:hover .go { transform: rotate(-45deg); background: #fff; color: var(--plum); }
.tile-img { position: absolute; bottom: -14px; inset-inline-end: 6%; height: 92%; width: auto; max-width: 60%; object-fit: contain; transform: rotate(-12deg); transition: transform .8s var(--spring); filter: drop-shadow(0 18px 18px rgba(0,0,0,.18)); mix-blend-mode: multiply; }
.tile:hover .tile-img { transform: translateY(-14px) rotate(0) scale(1.06); mix-blend-mode: normal; }
.tile.big { grid-column: span 2; grid-row: span 2; } .tile.big .tile-t b { font-size: 34px; } .tile.big .tile-img { height: 74%; bottom: -6px; inset-inline-end: 10%; }
.tile.wide { grid-column: span 2; } .tile.wide .tile-img { height: 118%; bottom: -36px; }
.tile.all { background: var(--plum); color: #fff; justify-content: center; align-items: center; text-align: center; }
.tile.all::before { background: var(--rose); }
.tile.all .tile-t { max-width: none; justify-items: center; }
@media (max-width: 860px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 10px; } .tile { border-radius: 22px; padding: 16px; } .tile-t b { font-size: 18px; } .tile.big .tile-t b { font-size: 26px; } .tile .go { width: 36px; height: 36px; } }

/* ================= حراج ================= */
.sale { background: linear-gradient(180deg, #fff 0%, #fff4f7 30%, #fff4f7 70%, #fff 100%); }
.sale-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 8px; }
.sale-top .sec-title { display: flex; align-items: center; gap: 12px; }
.bolt { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--rose); color: #fff; font-size: 24px; animation: zap 1.8s ease-in-out infinite; flex: 0 0 auto; }
.timer { display: flex; align-items: center; gap: 6px; direction: ltr; }
.timer .u { display: grid; justify-items: center; gap: 3px; }
.timer .u small { font-size: 11px; color: var(--muted); direction: rtl; }
.timer .digits { display: flex; gap: 3px; }
.timer .dg { width: 32px; height: 44px; border-radius: 10px; background: var(--plum); color: #fff; font-weight: 900; font-size: 22px; display: grid; place-items: center; overflow: hidden; }
.timer .dg.tick span { display: block; animation: drop .45s var(--spring); }
.timer .sep { font-weight: 900; font-size: 22px; padding-bottom: 18px; animation: blink 1s steps(1) infinite; }
.sale-nav { display: flex; gap: 8px; align-items: center; }
.sale-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px max(16px, calc((100vw - 1280px) / 2 + 28px)) 28px; scrollbar-width: none; cursor: grab; scroll-padding-inline: max(16px, calc((100vw - 1280px) / 2 + 28px)); }
.sale-track::-webkit-scrollbar { display: none; }
.sale-track.drag { cursor: grabbing; scroll-snap-type: none; }
.sale-track.drag a { pointer-events: none; }
.sale-track .pc { flex: 0 0 248px; scroll-snap-align: start; }
@media (max-width: 520px) { .sale-track .pc { flex-basis: 190px; } .sale-nav .rnd { display: none; } .timer .dg { width: 28px; height: 38px; font-size: 19px; } }
@keyframes zap { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg) scale(1.1); } 20% { transform: rotate(10deg); } 30% { transform: rotate(0); } }
@keyframes drop { from { transform: translateY(-100%); } }
@keyframes blink { 50% { opacity: .2; } }

/* ================= بنر ================= */
.banner { position: relative; overflow: hidden; isolation: isolate; border-radius: 34px; background: #fff7f2; min-height: 500px; display: grid; place-items: center; padding: 56px 20px; }
.mesh { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.mesh i { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; opacity: .8; will-change: transform; }
.mesh i:nth-child(1) { background: radial-gradient(closest-side, var(--c1), transparent); top: -10%; left: -6%; animation: roam1 14s ease-in-out infinite alternate; }
.mesh i:nth-child(2) { background: radial-gradient(closest-side, var(--c2), transparent); bottom: -20%; left: 30%; animation: roam2 16s ease-in-out infinite alternate; }
.mesh i:nth-child(3) { background: radial-gradient(closest-side, var(--c3), transparent); top: -14%; right: -8%; animation: roam3 12s ease-in-out infinite alternate; }
.mesh i:nth-child(4) { background: radial-gradient(closest-side, #8fe3d0, transparent); bottom: -18%; right: 10%; width: 40%; animation: roam1 18s ease-in-out infinite alternate-reverse; }
.layer { position: absolute; z-index: -1; transition: transform .25s ease-out; }
.layer > div { width: 100%; height: 100%; animation: float 6s ease-in-out infinite; }
.layer img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 20px rgba(43,16,48,.22)); }
.l1 { width: 170px; height: 200px; top: 10%; left: 6%; } .l1 > div { animation-delay: -1s; }
.l2 { width: 130px; height: 150px; bottom: 8%; left: 22%; } .l2 > div { animation-delay: -3s; }
.l3 { width: 180px; height: 210px; top: 8%; right: 7%; } .l3 > div { animation-delay: -2s; }
.l4 { width: 120px; height: 140px; bottom: 10%; right: 24%; } .l4 > div { animation-delay: -4s; }
.glass { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.95); backdrop-filter: blur(18px); border-radius: 32px; padding: 32px clamp(20px, 4vw, 48px); text-align: center; display: grid; gap: 12px; justify-items: center; max-width: 520px; box-shadow: 0 30px 60px -30px rgba(43,16,48,.35); }
.glass .k { font-weight: 800; font-size: 14px; }
.glass h2 { margin: 0; font-size: clamp(28px, 4.4vw, 46px); font-weight: 900; line-height: 1.3; background: linear-gradient(90deg, var(--rose), #8f4bb8, #ff9a3d, var(--rose)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; text-wrap: balance; }
.glass p { margin: 0; line-height: 1.9; }
.glass .big { font-size: 64px; font-weight: 900; line-height: 1; } .glass .big small { font-size: 20px; }
.glass-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.coupon { display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--plum); border-radius: 14px; padding: 6px 6px 6px 14px; direction: ltr; background: rgba(255,255,255,.6); }
.coupon code { font-family: inherit; font-weight: 900; letter-spacing: 2px; }
.cp-code { position: relative; display: inline-flex; align-items: center; border-radius: 9px; padding: 2px 4px; cursor: pointer; overflow: hidden; outline: none; -webkit-tap-highlight-color: transparent; }
.cp-code code { display: inline-block; filter: blur(7px); opacity: .55; transform: scale(.94); transition: filter .45s ease, opacity .45s ease, transform .45s cubic-bezier(.3,1.6,.5,1); user-select: none; }
.cp-code::after { content: attr(data-hint); position: absolute; inset: 0; display: grid; place-items: center; white-space: nowrap; font-size: 12px; font-weight: 800; letter-spacing: 0; direction: rtl; color: #fff; border-radius: inherit; background: linear-gradient(110deg, #ff6f9c 20%, #ffd6e4 42%, #ff6f9c 60%, #b24a8f 85%); background-size: 250% 100%; animation: cpShine 2.4s linear infinite; transition: opacity .35s ease, transform .45s ease; }
.coupon.shown .cp-code code, .cp-code:focus-visible code { filter: none; opacity: 1; transform: none; user-select: all; }
.coupon.shown .cp-code::after, .cp-code:focus-visible::after { opacity: 0; transform: translateY(-110%); pointer-events: none; }
@media (hover: hover) { .cp-code:hover code { filter: none; opacity: 1; transform: none; user-select: all; } .cp-code:hover::after { opacity: 0; transform: translateY(-110%); } }
@keyframes cpShine { to { background-position: -250% 0; } }
@media (prefers-reduced-motion: reduce) { .cp-code::after { animation: none; } }
.coupon button { border: 0; border-radius: 10px; background: var(--plum); color: #fff; font-weight: 800; padding: 8px 12px; direction: rtl; }
@media (max-width: 860px) { .l2, .l4 { display: none; } .l1 { width: 90px; height: 110px; top: 3%; left: 3%; } .l3 { width: 96px; height: 116px; top: auto; bottom: 3%; right: 3%; } .banner { min-height: 0; padding: 90px 16px; border-radius: 26px; } }
@keyframes shimmer { to { background-position: -300% 0; } }
@keyframes roam1 { to { transform: translate(40%, 30%) scale(1.2); } }
@keyframes roam2 { to { transform: translate(-30%, -40%) scale(.9); } }
@keyframes roam3 { to { transform: translate(-35%, 35%) scale(1.15); } }

/* ================= فروشگاه ================= */
.page-hero { min-height: 200px; }
.hero-cat-img { position: absolute; z-index: -1; inset-inline-end: 4%; bottom: -10px; height: 115%; width: auto; max-width: 38%; object-fit: contain; mix-blend-mode: multiply; animation: float 6s ease-in-out infinite; }
@media (max-width: 640px) { .hero-cat-img { opacity: .35; } }
.shop-bar { display: grid; gap: 14px; margin: 22px 0 24px; }
.chips-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips-row::-webkit-scrollbar { display: none; }
.chips-row .chip { flex: 0 0 auto; }
.chips-row .chip:hover { transform: translateY(-2px); border-color: var(--plum); }
.shop-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.shop-tools input[type=search] { flex: 1 1 240px; }
.shop-tools select { flex: 0 0 auto; width: auto; padding-inline-end: 34px; }
.toggle { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; }
.toggle span { width: 46px; height: 26px; border-radius: 99px; background: var(--line); position: relative; transition: background .3s; }
.toggle span::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .35s var(--spring); }
.toggle input:checked + span { background: var(--rose); }
.toggle input:checked + span::after { transform: translateX(-20px); }
.toggle input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 3px; }

/* ================= صفحه محصول ================= */
.pp-crumbs { margin: 14px 0 16px; flex-wrap: wrap; }
.pp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; }
.pp-media { position: sticky; top: 100px; border-radius: 32px; background: var(--tone); aspect-ratio: 1 / .9; overflow: hidden; isolation: isolate; display: grid; place-items: center; }
.pp-media .blob { position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 46% 54% 62% 38% / 44% 40% 60% 56%; background: rgba(255,255,255,.55); animation: morph 9s ease-in-out infinite alternate, spin 40s linear infinite; }
.pp-off { position: absolute; top: 18px; inset-inline-start: 18px; z-index: 2; background: var(--rose); color: #fff; font-weight: 900; padding: 6px 14px; border-radius: 12px; animation: pulse 2.2s ease-in-out infinite; }
.pp-zoom { width: 100%; height: 100%; display: grid; place-items: center; cursor: zoom-in; }
.pp-zoom img { width: 68%; height: 68%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 30px 26px rgba(43,16,48,.2)); transition: transform .35s var(--ease); transform-origin: var(--zx, 50%) var(--zy, 50%); animation: ppIn 1s var(--spring) both; }
.pp-zoom:hover img { transform: scale(1.7); }
@keyframes ppIn { from { opacity: 0; transform: translateY(40px) rotate(-14deg) scale(.8); } }
.pp-info { display: grid; gap: 16px; padding-top: 6px; }
.pp-brand { font-weight: 800; color: var(--rose); letter-spacing: .5px; }
.pp-info h1 { margin: 0; font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; line-height: 1.35; }
.pp-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--soft); font-size: 13px; font-weight: 700; color: var(--plum); border: 1px solid var(--line); }
.pp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 0; border-block: 1px dashed var(--line); }
.pp-price b { font-size: clamp(26px, 3vw, 34px); font-weight: 900; }
.pp-price s { color: var(--muted); }
.pp-price .save { background: #e6f7ef; color: #1f9d6b; font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 999px; }
.pp-buy { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.qty.big { margin: 0; padding: 5px; }
.qty.big button { width: 40px; height: 40px; font-size: 20px; }
.qty.big span { min-width: 34px; font-size: 17px; }
.pp-buy .btn { flex: 1 1 150px; }
.pp-out { margin: 0; padding: 14px 18px; border-radius: 16px; background: var(--soft); color: var(--muted); font-weight: 700; }
.pp-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pp-feats.n4 { grid-template-columns: repeat(2, 1fr); }
.pp-feats li, .pp-feats li > a { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); line-height: 1.6; }
.pp-feats li { padding: 10px 12px; border-radius: 20px; background: linear-gradient(150deg, #fff, var(--soft)); border: 1px solid var(--line); animation: fadeUp .6s var(--d, 0ms) var(--ease) both; transition: transform .35s var(--spring), box-shadow .35s; }
.pp-feats li > a { margin: -10px -12px; padding: 10px 12px; flex: 1; }
@media (hover: hover) { .pp-feats li:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(43,16,48,.5); } .pp-feats li:hover img { transform: rotate(-8deg) scale(1.08); } }
.pp-feats img { width: 50px; height: 50px; flex: 0 0 auto; object-fit: contain; transition: transform .45s var(--spring); filter: drop-shadow(0 6px 8px rgba(90,29,72,.12)); }
.pp-feats b { display: block; color: var(--plum); font-size: 13px; }
.pp-feats .pp-gu { font-style: normal; }
@media (max-width: 860px) { .pp { grid-template-columns: 1fr; } .pp-media { position: relative; top: 0; }  .pp-feats, .pp-feats.n4 { grid-template-columns: repeat(2, 1fr); } .pp-feats li { flex-direction: column; text-align: center; padding: 14px 10px; } .pp-feats li > a { flex-direction: column; text-align: center; margin: -14px -10px; padding: 14px 10px; } .pp-feats img { width: 58px; height: 58px; } }
.tabs-wrap { margin-top: clamp(30px, 5vw, 60px); }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: none; padding: 12px 18px; font-weight: 800; font-size: 15px; color: var(--muted); position: relative; white-space: nowrap; flex-shrink: 0; }
.tabs button::after { content: ""; position: absolute; inset-inline: 10px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--rose); transform: scaleX(0); transition: transform .4s var(--ease); }
.tabs button.on { color: var(--plum); } .tabs button.on::after { transform: none; }
.tab-pane { animation: fadeUp .5s var(--ease); }
.prose { line-height: 2.1; font-size: 16px; max-width: 75ch; }
.prose p { margin: 0 0 1em; }
.prose h2 { font-size: 23px; font-weight: 900; margin: 1.6em 0 .5em; line-height: 1.5; }
.prose h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--rose); margin-inline-end: 10px; transform: rotate(45deg); vertical-align: middle; }
.prose blockquote { margin: 1.4em 0; padding: 18px 22px; border-radius: 20px; background: var(--rose-soft); border-inline-start: 4px solid var(--rose); font-weight: 700; }
.prose ul { padding-inline-start: 22px; } .prose a { color: var(--rose); font-weight: 700; }
.prose .lead { font-size: 19px; font-weight: 600; color: #5d3f58; }

/* ================= مجله ================= */
.blog-chips { margin: 22px 0; }
.tag { display: inline-block; justify-self: start; align-self: start; padding: 4px 12px; border-radius: 999px; background: var(--rose-soft); color: var(--rose); font-weight: 800; font-size: 12px; }
.meta { color: var(--muted); font-size: 13px; }
.feat { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; border-radius: 30px; overflow: hidden; background: var(--soft); margin-bottom: 26px; transition: box-shadow .5s; }
.feat:hover { box-shadow: 0 30px 60px -36px rgba(43,16,48,.55); }
.feat-img { overflow: hidden; aspect-ratio: 16 / 10; }
.feat-img img, .post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.feat:hover .feat-img img, .post:hover .post-img img { transform: scale(1.07); }
.feat-body { padding: clamp(22px, 4vw, 44px); display: grid; gap: 12px; align-content: center; }
.feat-body h2 { margin: 0; font-size: clamp(22px, 3vw, 34px); font-weight: 900; line-height: 1.45; }
.feat-body p { margin: 0; color: #6b5267; line-height: 1.9; }
@media (max-width: 760px) { .feat { grid-template-columns: 1fr; } }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.post { display: grid; gap: 10px; align-content: start; }
.post-img { border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--soft); }
.post h2 { margin: 0; font-size: 19px; font-weight: 900; line-height: 1.6; transition: color .3s; }
.post:hover h2 { color: var(--rose); }
.post p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.read-bar { position: fixed; top: 0; inset-inline: 0; height: 4px; z-index: 90; background: linear-gradient(90deg, var(--gold), var(--rose)); transform: scaleX(0); transform-origin: right; }
.art-head { display: grid; gap: 12px; justify-items: center; text-align: center; padding-block: 18px 26px; }
.art-head .crumbs { justify-content: center; }
.art-head h1 { margin: 0; font-size: clamp(28px, 4.6vw, 50px); font-weight: 900; line-height: 1.35; max-width: 22ch; text-wrap: balance; }
.art-cover { width: 100%; height: auto; max-width: 1080px; margin-inline: auto; border-radius: 30px; aspect-ratio: 16 / 8; object-fit: cover; }
.art-body { margin: 36px auto 0; }

/* ================= درباره ما ================= */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; padding-top: 18px; }
.about-text { display: grid; gap: 16px; justify-items: start; }
.about-text h1 { margin: 0; font-size: clamp(32px, 5vw, 58px); font-weight: 900; line-height: 1.25; }
.about-img { position: relative; width: 100%; }
.about-img::before { content: ""; position: absolute; inset: 14px -10px -12px 14px; border-radius: 30px; background: linear-gradient(135deg, #ffe1ea, #fff3e6); z-index: 0; }
.about-img img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; box-shadow: 0 18px 40px -18px rgba(214, 51, 108, .35); background: #fff4f7; }
@media (max-width: 800px) { .about { grid-template-columns: 1fr; gap: 22px; padding-top: 6px; } .about-img { order: -1; max-width: 520px; margin-inline: auto; } .about-img::before { inset: 10px -6px -8px 10px; border-radius: 24px; } .about-img img { border-radius: 22px; } }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 50px; }
.stat { padding: 26px; border-radius: 26px; background: var(--plum); color: #fff; display: grid; gap: 4px; position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: var(--rose); filter: blur(40px); opacity: .6; bottom: -50px; left: -30px; }
.stat b { font-size: 42px; font-weight: 900; line-height: 1.2; } .stat span { color: #e6cfe0; }
.stat:nth-child(2) { background: var(--rose); } .stat:nth-child(2)::after { background: var(--gold); }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.value { padding: 24px; border-radius: 26px; border: 1px solid var(--line); display: grid; gap: 8px; transition: .4s var(--ease); }
.value:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -28px rgba(43,16,48,.5); }
.value svg { width: 36px; height: 36px; color: var(--rose); }
.value b { font-size: 18px; } .value p { margin: 0; color: var(--muted); line-height: 1.9; }

/* ================= تماس ================= */
.contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; margin-top: 22px; align-items: start; }
.contact-cards { display: grid; gap: 12px; }
.ccard { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 22px; background: var(--soft); transition: .4s var(--ease); }
.ccard:hover { background: var(--rose-soft); transform: translateX(-4px); }
.ci-ico { width: 50px; height: 50px; border-radius: 16px; background: #fff; display: grid; place-items: center; color: var(--rose); flex: 0 0 auto; }
.ci-ico svg { width: 24px; height: 24px; }
.ccard small { display: block; color: var(--muted); font-size: 12px; } .ccard b, .ccard a { font-weight: 800; line-height: 1.7; }
.soc.big a { width: 46px; height: 46px; border-radius: 15px; } .soc.big svg { width: 22px; height: 22px; }
.contact-form { display: grid; gap: 14px; padding: clamp(20px, 3vw, 32px); border-radius: 28px; border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(43,16,48,.5); }
.contact-form h2 { margin: 0; font-size: 24px; font-weight: 900; }
.contact-form .btn { justify-self: start; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sent-msg { margin: 0; padding: 12px 16px; border-radius: 14px; background: #e6f7ef; color: #1f9d6b; font-weight: 800; animation: fadeUp .5s var(--ease); }
.contact.no-form { grid-template-columns: 1fr; } .contact.no-form .contact-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.page-hero.has-img { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(18px, 4vw, 48px); align-items: center; }
.page-hero .ph-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: 0 18px 40px -20px rgba(214, 51, 108, .35); }
@media (max-width: 800px) { .page-hero.has-img { grid-template-columns: 1fr; padding: 16px 16px 24px; } .page-hero.has-img .ph-img { order: -1; } .page-hero .ph-img img { border-radius: 20px; } }
@media (max-width: 800px) { .contact { grid-template-columns: 1fr; } .row2 { grid-template-columns: 1fr; } }

/* ================= ۴۰۴ ================= */
.nf { text-align: center; padding-block: 60px; display: grid; gap: 14px; justify-items: center; }
.nf-num { font-size: clamp(110px, 22vw, 220px); font-weight: 900; line-height: 1; color: var(--plum); }
.nf-num span { display: inline-block; color: var(--rose); animation: float 3s ease-in-out infinite; }
.nf h1 { margin: 0; font-size: 28px; } .nf p { margin: 0; color: var(--muted); }

/* ================= سبد و تسویه ================= */
.steps { display: flex; align-items: center; gap: 10px; margin: 16px 0 22px; font-size: 13px; font-weight: 800; color: var(--muted); flex-wrap: wrap; }
.steps span { padding: 7px 14px; border-radius: 999px; background: var(--soft); }
.steps span.on { background: var(--plum); color: #fff; }
.steps i { width: 28px; height: 2px; background: var(--line); }
.checkout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
.checkout h1 { margin: 0 0 14px; font-size: 30px; font-weight: 900; }
.co-list { display: grid; gap: 12px; }
.co-list .ci { grid-template-columns: 96px 1fr auto auto; padding: 14px; background: #fff; border: 1px solid var(--line); }
.co-list .ci .im { width: 96px; height: 96px; }
.co-list .ci .line { font-weight: 900; white-space: nowrap; }
.co-side { position: sticky; top: 100px; display: grid; gap: 14px; }
.co-sum, .co-form, .co-login { padding: 22px; border-radius: 26px; border: 1px solid var(--line); display: grid; gap: 12px; background: #fff; }
.co-sum .r { display: flex; justify-content: space-between; color: var(--muted); }
.co-sum .r.t { color: var(--plum); font-weight: 900; font-size: 19px; padding-top: 12px; border-top: 1px dashed var(--line); }
.co-sum .r.off { color: #0f8a55; font-weight: 800; }
.co-cpn { padding: 16px 18px; border-radius: 22px; border: 1.5px dashed #f3b6cb; background: linear-gradient(135deg, #fff7fa, #fdf3ff); display: grid; gap: 10px; }
.co-cpn > label { font-weight: 800; color: var(--plum); font-size: 14px; }
.cpn-row { display: flex; gap: 8px; } .cpn-row[hidden] { display: none; }
.cpn-row .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; text-align: center; }
.cpn-row .btn { padding-inline: 18px; flex: none; }
.cpn-on { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #e9f9f1; color: #0f8a55; font-size: 13px; font-weight: 700; animation: cpnIn .5s var(--spring) both; }
.cpn-on[hidden] { display: none; }
.cpn-on.warn { background: #fff4e5; color: #a35a00; }
.cpn-on code { padding: 3px 9px; border-radius: 9px; background: #fff; border: 1.5px dashed currentColor; font: 800 13px ui-monospace, Menlo, monospace; letter-spacing: .5px; direction: ltr; }
.cpn-on span { flex: 1; } .cpn-on small { opacity: .75; font-weight: 600; }
.cpn-on button { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: inherit; flex: none; }
@keyframes cpnIn { from { opacity: 0; transform: scale(.94); } }
.co-form h2 { margin: 0; font-size: 20px; }
.pay-methods { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.pay-methods legend { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.pm { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); cursor: pointer; transition: .25s; }
.pm:has(input:checked) { border-color: var(--rose); background: #fff7fa; }
.pm input { accent-color: var(--rose); width: 18px; height: 18px; }
.pm b { display: block; } .pm small { color: var(--muted); }
.co-login { background: var(--soft); border: 0; justify-items: start; } .co-login p { margin: 0; color: var(--muted); }
.co-done { text-align: center; padding: 50px 20px; display: grid; gap: 12px; justify-items: center; }
.co-done .ok { width: 90px; height: 90px; border-radius: 50%; background: #1f9d6b; color: #fff; display: grid; place-items: center; font-size: 44px; animation: pop .7s var(--spring); }
.co-done h2 { margin: 0; font-size: 28px; }
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } .co-side { position: static; } .co-list .ci { grid-template-columns: 72px 1fr auto; } .co-list .ci .im { width: 72px; height: 72px; } .co-list .ci .line { grid-column: 2; } }

/* ================= ورود و حساب کاربری ================= */
.auth { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; min-height: 520px; }
.auth-art { position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; background: var(--plum); color: #fff; padding: 40px; display: grid; align-content: end; gap: 10px; }
.auth-art .blob { position: absolute; z-index: -1; width: 380px; aspect-ratio: 1; background: var(--rose); top: -100px; right: -100px; filter: blur(10px); animation: morph 9s ease-in-out infinite alternate, spin 30s linear infinite; }
.auth-art .blob.b2 { background: var(--gold); width: 220px; top: auto; right: auto; bottom: 30%; left: -60px; opacity: .7; }
.auth-art b { font-size: 36px; font-weight: 900; } .auth-art p { margin: 0; color: #e6cfe0; line-height: 1.9; max-width: 36ch; }
.auth-card { padding: clamp(22px, 4vw, 44px); border-radius: 32px; border: 1px solid var(--line); display: grid; align-content: center; gap: 22px; }
.auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--soft); border-radius: 999px; padding: 5px; }
.auth-tabs button { position: relative; z-index: 1; border: 0; background: none; padding: 11px; font-weight: 800; font-size: 15px; border-radius: 999px; transition: color .3s; }
.auth-tabs button.on { color: #fff; }
.auth-tabs i { position: absolute; top: 5px; bottom: 5px; right: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--plum); transition: transform .45s var(--spring); }
.auth-tabs.reg i { transform: translateX(-100%); }
.auth-form { display: grid; gap: 14px; animation: fadeUp .5s var(--ease); }
@media (max-width: 800px) { .auth { grid-template-columns: 1fr; } .auth-art { min-height: 200px; padding: 28px; } .auth-art b { font-size: 26px; } }
.muted { color: var(--muted); }
.dash { padding-top: 10px; }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 26px; border-radius: 30px; background: var(--soft); }
.dash-head h1 { margin: 4px 0; font-size: clamp(24px, 3.6vw, 36px); font-weight: 900; } .dash-head p { margin: 0; }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.dash-stats div { padding: 18px; border-radius: 22px; border: 1px solid var(--line); display: grid; gap: 2px; animation: fadeUp .6s var(--ease) both; }
.dash-stats div:nth-child(2) { animation-delay: .08s; } .dash-stats div:nth-child(3) { animation-delay: .16s; }
.dash-stats b { font-size: 26px; font-weight: 900; } .dash-stats span { color: var(--muted); font-size: 13px; }
.dash-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; align-items: start; }
.dash-h { margin: 0 0 12px; font-size: 19px; font-weight: 900; }
.dash-side { display: grid; gap: 14px; }
.card-form { padding: 20px; border-radius: 24px; border: 1px solid var(--line); display: grid; gap: 12px; }
.card-form .btn { justify-self: start; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.orders { display: grid; gap: 12px; }
.order { border: 1px solid var(--line); border-radius: 22px; padding: 16px; display: grid; gap: 12px; animation: fadeUp .5s var(--ease) both; }
.order-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.order-h b { font-size: 16px; }
.order-items { display: flex; gap: 8px; flex-wrap: wrap; }
.order-items span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 12px; background: var(--soft); font-size: 13px; }
.order-items img { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; background: #fff; }
.st { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--soft); }
.st.pending { background: #fff4dc; color: #a86b00; } .st.processing { background: #e5efff; color: #2459c7; } .st.shipped { background: #efe6ff; color: #6a3fc4; }
.st.delivered, .st.paid { background: #e6f7ef; color: #1f9d6b; } .st.cancelled, .st.failed { background: #fde6ea; color: #c0243e; }
.pay-box { padding: 18px 20px; border-radius: 22px; font-weight: 800; margin-top: 14px; animation: fadeUp .5s var(--ease); }
.pay-box.ok { background: #e6f7ef; color: #1f9d6b; } .pay-box.fail { background: #fde6ea; color: #c0243e; }
[hidden] { display: none !important; }

/* ================= پس‌زمینه‌ی سفید (درخواست کارفرما) ================= */
.hero { background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -60px rgba(43,16,48,.35); }
.hero::before { content: ""; position: absolute; z-index: -2; width: 60%; aspect-ratio: 1; border-radius: 50%; inset-inline-end: -8%; top: -20%; background: radial-gradient(circle, var(--bg) 0%, transparent 68%); opacity: .9; transition: background 1s var(--ease); }
.hero-word { -webkit-text-stroke: 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.hero-eyebrow { background: var(--soft); color: var(--accent); border: 1px solid var(--line); }
.hero-thumbs button { background: var(--soft); }
.sale { background: #fff; }
.page-hero { background: #fff; border: 1px solid var(--line); }
.page-hero .blob { opacity: .7; }
.dash-head { background: #fff; border: 1px solid var(--line); }

/* ================= هدر جذاب ================= */
.hdr-in { background: rgba(255,255,255,.9); border-color: transparent; }
.hdr-in::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(90deg, var(--line), var(--rose), var(--gold), #b56cc9, var(--line)); background-size: 300% 100%; animation: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .55; transition: opacity .4s; }
.hdr-in:hover::before, body.scrolled .hdr-in::before { opacity: 1; }
@keyframes hdrGlow { to { background-position: -300% 0; } }
.hdr-in::after { content: ""; position: absolute; z-index: -1; inset: 30% 10% -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(227,48,109,.18), transparent); filter: blur(20px); pointer-events: none; }
.logo-mark { position: relative; overflow: hidden; }
.logo-mark::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%); transform: translateX(-120%); animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 60%, 100% { transform: translateX(120%); } }
.logo:hover .logo-mark { transform: rotate(-10deg) scale(1.08); transition: transform .4s var(--spring); }
.nav > a::after, .nav > .has-mega > a::after { content: ""; position: absolute; bottom: 4px; inset-inline: 40%; height: 2px; border-radius: 2px; background: var(--rose); transform: scaleX(0); transition: transform .35s var(--spring); }
.nav a.active::after { transform: scaleX(1); }
.search-pill { width: auto; padding-inline: 12px 16px; gap: 8px; display: flex; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; }
.search-pill span { white-space: nowrap; }
.search-pill:hover { background: #fff; border-color: var(--rose); color: var(--plum); }
.cart-ico { background: linear-gradient(135deg, var(--plum), #6b1a4a); box-shadow: 0 10px 22px -10px rgba(43,16,48,.8); }
.cart-ico:hover { background: linear-gradient(135deg, var(--rose), #ff7a59); }
.cart-ico .badge { animation: pulse 2.2s ease-in-out infinite; }
@media (max-width: 1180px) { .search-pill span { display: none; } .search-pill { width: 44px; padding: 0; justify-content: center; border-radius: 14px; } }

/* ================= مدل‌های قابل انتخاب صفحه اصلی (از صفحه‌ی ایده‌ها) ================= */
:root { --f-pop: 'Lalezar', 'Vazirmatn', sans-serif; }
.v-stage { border-radius: 30px; overflow: hidden; position: relative; isolation: isolate; box-shadow: 0 30px 60px -40px rgba(43,16,48,.55); }
.v-stage .btn { background: #fff; color: var(--plum); }

/* اسلایدر ب: ویترین سه‌بعدی */
.s2 { --glow: #e3306d; background: radial-gradient(60% 70% at 20% 30%, color-mix(in srgb, var(--glow) 45%, transparent), transparent 70%), radial-gradient(50% 60% at 90% 90%, #4b1d6b, transparent 70%), #170a1b; color: #fff; display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; align-items: center; padding: 48px clamp(20px, 5vw, 60px); min-height: 560px; touch-action: pan-y; user-select: none; transition: background 1s; }
.s2-info { display: grid; gap: 18px; justify-items: start; }
.s2-item { display: grid; gap: 14px; justify-items: start; animation: fadeUp .6s var(--ease); }
/* همه‌ی اسلایدها در یک خانه‌ی گرید می‌مانند تا ارتفاع بخش با عوض شدن اسلاید تغییر نکند و صفحه نلرزد */
.s2-item { grid-area: 1 / 1; }
.s2-item[hidden] { display: grid !important; visibility: hidden; animation: none; pointer-events: none; }
.s2-item .k { color: var(--gold); font-weight: 700; font-size: 14px; letter-spacing: 1px; }
.s2-item h2 { margin: 0; font-family: var(--f-pop); font-weight: 400; font-size: clamp(38px, 5vw, 62px); line-height: 1.15; }
.s2-item p { margin: 0; color: #d9c7d6; line-height: 1.9; max-width: 36ch; }
.s2-item .chips { display: flex; gap: 8px; flex-wrap: wrap; } .s2-item .chips span { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); } .s2-item .chips b { color: var(--gold); }
.s2-item .row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .s2-item .pr { font-size: 20px; }
.s2-nav { display: flex; gap: 10px; } .s2-nav .rnd { border-color: rgba(255,255,255,.5); color: #fff; } .s2-nav .rnd:hover { background: #fff; color: var(--plum); }
.s2-ring { position: relative; height: 420px; perspective: 1300px; }
.s2-card { position: absolute; top: 50%; left: 50%; width: 210px; height: 300px; margin: -150px 0 0 -105px; border-radius: 26px; background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); display: grid; grid-template-rows: 1fr auto; padding: 22px 18px 16px; color: #fff; transition: transform .9s var(--ease), opacity .9s, box-shadow .9s; }
.s2-card .p { display: grid; place-items: center; padding: 0 12%; min-height: 0; transition: transform .9s var(--spring); }
.s2-card .p img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 20px 20px rgba(0,0,0,.35)); }
.s2-card.on { box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 30px 80px -20px var(--glow); }
.s2-card.on .p { transform: translateY(-10px) scale(1.08); animation: float 4s ease-in-out infinite; }
.s2-card .n { font-weight: 700; font-size: 14px; text-align: center; line-height: 1.6; }
.s2-card .n small { display: block; color: var(--gold); font-weight: 800; font-size: 14px; margin-top: 2px; }

/* اسلایدر ج: پرده‌ی دایره‌ای */
.s3 { height: clamp(560px, 72vh, 620px); color: var(--plum); touch-action: pan-y; background: var(--soft); }
.s3-layer { position: absolute; inset: 0; display: grid; grid-template-columns: 230px 1fr 1fr; align-items: center; gap: 24px; padding: 40px clamp(20px, 5vw, 56px); clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); }
.s3-layer.full { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.s3-layer.static { clip-path: none; }
.s3-num { position: absolute; top: 20px; inset-inline-start: 50%; font-family: var(--f-pop); font-size: clamp(180px, 26vw, 340px); line-height: 1; color: rgba(255,255,255,.45); pointer-events: none; }
.s3-copy { display: grid; gap: 14px; justify-items: start; position: relative; }
.s3-copy h2 { margin: 0; font-size: clamp(36px, 4.6vw, 60px); font-weight: 900; line-height: 1.15; }
.s3-copy p { margin: 0; line-height: 1.9; max-width: 34ch; }
.s3 .s3-copy .btn { background: var(--plum); color: #fff; }
.s3-layer .s3-copy > * { opacity: 0; transform: translateX(-40px); }
.s3-layer.full .s3-copy > *, .s3-layer.static .s3-copy > * { opacity: 1; transform: none; transition: .8s var(--ease); }
.s3-layer.full .s3-copy > :nth-child(1) { transition-delay: .4s; } .s3-layer.full .s3-copy > :nth-child(2) { transition-delay: .5s; } .s3-layer.full .s3-copy > :nth-child(3) { transition-delay: .6s; }
.s3-prod { height: 82%; display: grid; place-items: center; position: relative; }
.s3-prod .disc { position: absolute; width: min(90%, 380px); aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(43,16,48,.25); animation: spin 30s linear infinite; }
.s3-prod .p { width: min(52%, 220px); transform: scale(.4) rotate(25deg); filter: drop-shadow(0 30px 30px rgba(0,0,0,.25)); }
.s3-prod .p img { width: 100%; height: auto; }
.s3-layer.full .s3-prod .p, .s3-layer.static .s3-prod .p { transform: none; transition: transform 1.2s var(--spring) .35s; }
.s3-nav { position: absolute; inset-block: 0; inset-inline-start: clamp(20px, 5vw, 56px); z-index: 10; display: grid; align-content: center; gap: 6px; width: 200px; }
.s3-nav button { border: 0; background: none; display: flex; align-items: center; gap: 12px; padding: 10px 0; font-weight: 700; font-size: 15px; color: var(--plum); opacity: .5; transition: opacity .3s; }
.s3-nav button i { display: block; height: 2px; width: 18px; background: currentColor; transition: width .5s var(--ease); }
.s3-nav button.on { opacity: 1; } .s3-nav button.on i { width: 54px; }

/* دسته‌بندی ب: حباب‌ها */
.c2-head { text-align: center; display: grid; justify-items: center; }
.c2 .squig { display: block; margin: 6px auto 0; width: 140px; height: 14px; }
.c2 .squig path { stroke: var(--rose); stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 2s var(--ease) .3s forwards; }
.bubbles { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px max(16px, calc((100vw - 1280px) / 2 + 28px)) 10px; justify-content: safe center; scrollbar-width: none; }
.bubbles::-webkit-scrollbar { display: none; }
.bub { flex: 0 0 auto; scroll-snap-align: center; display: grid; justify-items: center; gap: 6px; color: var(--plum); width: 160px; }
.bub .orb { position: relative; width: 160px; height: 160px; display: grid; place-items: center; }
.bub .blob { position: absolute; inset: 14px; background: var(--tone); border-radius: 46% 54% 62% 38% / 44% 40% 60% 56%; animation: morph 7s ease-in-out infinite alternate; transition: background .5s, inset .5s var(--spring); }
.bub:hover .blob { background: var(--deep); inset: 4px; }
.bub .ring { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.bub .ring text { direction: ltr; unicode-bidi: embed; font-size: 10.5px; font-weight: 700; fill: var(--plum); letter-spacing: 1px; }
.bub:hover .ring { animation-duration: 5s; }
.bub .p { position: relative; width: 70px; height: 96px; object-fit: contain; transition: transform .6s var(--spring); filter: drop-shadow(0 12px 10px rgba(0,0,0,.2)); }
.bub:hover .p { animation: hop .8s var(--spring); transform: rotate(-10deg) scale(1.12); }
.bub b { font-size: 17px; font-weight: 900; } .bub small { color: var(--muted); font-size: 12.5px; }

/* حراج ب: نورافکن */
.d2 { background: var(--plum); color: #fff; padding: clamp(20px, 4vw, 40px); }
.ribbon { position: absolute; top: 26px; left: -10%; width: 120%; transform: rotate(-3deg); background: var(--gold); color: var(--plum); font-family: var(--f-pop); font-size: 20px; padding: 6px 0; white-space: nowrap; overflow: hidden; z-index: 3; }
.ribbon div { display: inline-block; animation: marquee 18s linear infinite; }
.d2-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; margin-top: 64px; }
.spot { --c: #e3306d; border-radius: 28px; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000)); padding: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; min-height: 360px; transition: background .8s; position: relative; overflow: hidden; }
.spot .info, .spot .pp { transition: opacity .35s, transform .5s var(--ease); }
.spot .info { display: grid; gap: 10px; justify-items: start; }
.spot.swap .info, .spot.swap .pp { opacity: 0; transform: scale(.9) translateY(12px); }
.spot .lbl { background: rgba(255,255,255,.22); padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.spot h3 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.3; }
.spot .old { opacity: .7; } .spot .new { font-size: 30px; font-weight: 900; }
.spot .save { background: #fff; color: var(--plum); font-weight: 800; padding: 6px 12px; border-radius: 12px; font-size: 14px; }
.d2 .spot .btn { background: var(--plum); color: #fff; }
.spot .pp { position: relative; display: grid; place-items: center; min-height: 260px; }
.spot .pp .p { width: 80%; max-width: 300px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; animation: sway 6s ease-in-out infinite; filter: drop-shadow(0 30px 25px rgba(0,0,0,.35)); }
.spot .ringt { position: absolute; width: 96%; max-width: 300px; aspect-ratio: 1; }
.spot .ringt circle { fill: none; stroke-width: 3; } .spot .ringt .bg { stroke: rgba(255,255,255,.2); }
.spot .ringt .fg { stroke: #fff; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; transform: rotate(-90deg); transform-origin: center; }
.spot .ringt .fg.run { animation: ring 7s linear forwards; }
.minis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.minis .mini { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); border-radius: 22px; padding: 14px; display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; text-align: start; color: #fff; transition: .4s var(--ease); }
.minis .mini img { height: 64px; width: 64px; object-fit: cover; border-radius: 16px; background: var(--tone, #fff); }
.minis .mini b { font-size: 14px; display: block; line-height: 1.6; } .minis .mini small { color: var(--gold); font-weight: 800; }
.minis .mini:hover { background: rgba(255,255,255,.12); }
.d2-foot { position: relative; z-index: 2; margin-top: 16px; display: flex; justify-content: flex-end; }
.d2-foot .link-arrow { color: var(--gold); }

/* بنر الف: شب طلایی */
.b1 { background: linear-gradient(120deg, #1d0a20, #4a1238 55%, #8e1f45); color: #fff; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; min-height: 460px; padding: 40px clamp(20px, 5vw, 60px) 90px; }
.b1 canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.b1-text { display: grid; gap: 16px; justify-items: start; }
.b1-text .k { color: var(--gold); font-weight: 700; letter-spacing: 1px; }
.b1-text h2 { margin: 0; font-family: var(--f-pop); font-weight: 400; font-size: clamp(42px, 6vw, 78px); line-height: 1.1; background: linear-gradient(100deg, #fff 20%, #f6d29b 40%, #fff 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4s linear infinite; }
.b1-text p { margin: 0; color: #e8d3e0; line-height: 1.9; max-width: 42ch; }
.b1-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.b1 .coupon { border-color: var(--gold); background: transparent; } .b1 .coupon code { color: var(--gold); } .b1 .coupon button { background: var(--gold); color: var(--plum); }
.b1-art { position: relative; height: 360px; display: grid; place-items: center; }
.b1-art .rays { position: absolute; width: 420px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8%, rgba(246,210,155,.18) 10%, transparent 12% 25%, rgba(246,210,155,.14) 27%, transparent 29% 45%, rgba(246,210,155,.18) 47%, transparent 49% 62%, rgba(246,210,155,.14) 64%, transparent 66% 80%, rgba(246,210,155,.18) 82%, transparent 84%); animation: spin 24s linear infinite; -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
.b1-art .halo { position: absolute; width: 230px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,140,190,.55), transparent 65%); animation: breathe 4s ease-in-out infinite; }
.b1-art .p { position: relative; width: 190px; height: auto; animation: float 6s ease-in-out infinite; filter: drop-shadow(0 30px 30px rgba(0,0,0,.4)); }
.b1-marq { position: absolute; bottom: 0; inset-inline: 0; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.15); white-space: nowrap; overflow: hidden; font-family: var(--f-pop); font-size: 30px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); }
.b1-marq div { display: inline-block; animation: marquee 26s linear infinite; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes hop { 30% { translate: 0 -18px; } 60% { translate: 0 0; } 80% { translate: 0 -6px; } }
@keyframes sway { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-12px); } }
@keyframes ring { to { stroke-dashoffset: 0; } }
@media (max-width: 860px) {
  .s2 { grid-template-columns: 1fr; } .s2-ring { height: 360px; order: -1; }
  .s3 { height: 740px; }
  .s3-layer { grid-template-columns: 1fr; grid-template-rows: auto 300px; align-content: center; padding-top: 110px; }
  .s3-nav { inset-block: 20px auto; inset-inline: 20px; width: auto; display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .s3-nav button i { width: 10px; } .s3-nav button.on i { width: 26px; }
  .s3-num { top: auto; bottom: 10px; }
  .d2-grid { grid-template-columns: 1fr; }
  .b1 { grid-template-columns: 1fr; } .b1-art { height: 280px; order: -1; }
}
@media (max-width: 520px) { .spot { grid-template-columns: 1fr; } .spot .pp { order: -1; min-height: 220px; } .minis { grid-template-columns: 1fr; } }

/* ویترین سه‌بعدی زیر اسلایدر */
.showcase { margin-top: 28px; }

/* ===== ورود و ثبت‌نام ===== */
.auth2 { --glow: #e3306d; --glow2: #7a2a8c; display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; margin-top: 12px; min-height: 620px; }
.auth2[data-mode="register"] { --glow: #d9a35f; --glow2: #b0306d; }
.a2-art { --mx: 0; --my: 0; position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; color: #fff; padding: clamp(26px, 4vw, 48px); display: grid; align-content: end; background: radial-gradient(120% 90% at 85% 10%, #4a1a4f 0%, #2b1030 45%, #170819 100%); box-shadow: 0 40px 80px -40px rgba(43,16,48,.7); }
.a2-art canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.a2-glow { position: absolute; z-index: -2; inset: -20%; background: radial-gradient(35% 35% at 70% 30%, var(--glow), transparent 70%), radial-gradient(30% 30% at 20% 75%, var(--glow2), transparent 70%); opacity: .55; filter: blur(30px); transition: background .9s; animation: a2drift 12s ease-in-out infinite alternate; }
@keyframes a2drift { to { transform: translate(-4%, 5%) rotate(8deg); } }
.a2-stack { position: absolute; inset: 0 0 40% 0; perspective: 1000px; transform: translate(calc(var(--mx) * -26px), calc(var(--my) * -20px)); transition: transform .4s var(--ease); }
.a2-card { position: absolute; width: 170px; padding: 12px 12px 14px; border-radius: 24px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); display: grid; gap: 8px; box-shadow: 0 30px 50px -20px rgba(0,0,0,.6); transition: transform 1s var(--spring), top 1s var(--spring), right 1s var(--spring); animation: float 6s ease-in-out infinite; }
.a2-card img { width: 100%; height: 130px; object-fit: cover; border-radius: 16px; background: var(--tone); }
.a2-card b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a2-card.k0 { top: 14%; right: 12%; transform: rotate(-8deg) rotateY(-12deg); }
.a2-card.k1 { top: 24%; right: 41%; transform: rotate(6deg) rotateY(10deg) scale(.92); animation-delay: -2s; }
.a2-card.k2 { top: 6%; right: 68%; transform: rotate(-4deg) scale(.82); animation-delay: -4s; opacity: .85; }
.auth2[data-mode="register"] .a2-card.k0 { top: 8%; right: 66%; transform: rotate(7deg) rotateY(12deg) scale(.85); }
.auth2[data-mode="register"] .a2-card.k1 { top: 12%; right: 10%; transform: rotate(-7deg) rotateY(-10deg); }
.auth2[data-mode="register"] .a2-card.k2 { top: 26%; right: 38%; transform: rotate(3deg) scale(.95); }
.a2-copy { position: relative; display: grid; }
.a2-msg { display: grid; gap: 10px; justify-items: start; animation: fadeUp .7s var(--ease); }
.a2-msg .k { color: var(--gold); font-weight: 800; font-size: 13px; letter-spacing: 1px; padding: 5px 12px; border: 1px solid rgba(217,163,95,.4); border-radius: 999px; }
.a2-msg h1, .a2-msg h2 { margin: 0; font-family: var(--f-pop); font-weight: 400; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.2; background: linear-gradient(90deg, #fff, #ffd9e6 50%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a2-msg p { margin: 0; color: #e6cfe0; line-height: 1.9; max-width: 40ch; }
.a2-perks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.a2-perks li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; animation: fadeUp .6s var(--ease) both; animation-delay: calc(.25s + var(--d)); }
.a2-perks svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--gold); color: var(--plum); stroke-width: 3; flex: none; }
.a2-card-wrap { display: grid; place-items: center; }
.a2-panel { position: relative; width: min(460px, 100%); padding: clamp(24px, 4vw, 42px); border-radius: 32px; background: #fff; display: grid; gap: 22px; box-shadow: 0 30px 70px -30px rgba(43,16,48,.3); }
.a2-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(90deg, var(--line), var(--rose), var(--gold), #b56cc9, var(--line)); background-size: 300% 100%; animation: hdrGlow 8s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.auth2 .auth-form { gap: 14px; }
.fl { position: relative; display: block; }
.fl .input { width: 100%; height: 58px; padding: 22px 46px 6px 46px; border-radius: 18px; background: var(--soft); border: 1.5px solid transparent; transition: border-color .3s, background .3s, box-shadow .3s; }
.fl .input:focus { outline: 0; background: #fff; border-color: var(--rose); box-shadow: 0 0 0 5px rgba(227,48,109,.1); }
.fl .lb { position: absolute; right: 46px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14.5px; pointer-events: none; transition: .25s var(--ease); }
.fl .input:focus ~ .lb, .fl .input:not(:placeholder-shown) ~ .lb { top: 15px; font-size: 11.5px; font-weight: 700; color: var(--rose); }
.fl .ic { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); transition: color .3s, transform .3s var(--spring); }
.fl .ic svg, .fl .eye svg { width: 100%; height: 100%; }
.fl:focus-within .ic { color: var(--rose); transform: translateY(-50%) scale(1.12); }
.fl .eye { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 7px; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; }
.fl .eye.on { color: var(--rose); background: var(--rose-soft); }
.a2-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: center; margin-top: -4px; }
.a2-meter i { height: 5px; border-radius: 5px; background: var(--line); transition: background .4s; }
.a2-meter small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); min-height: 1em; }
.a2-meter[data-l="1"] i:nth-child(-n+1) { background: #e5484d; }
.a2-meter[data-l="2"] i:nth-child(-n+2) { background: #f5a524; }
.a2-meter[data-l="3"] i:nth-child(-n+3) { background: #7ac74f; }
.a2-meter[data-l="4"] i { background: #22a06b; }
.a2-submit { position: relative; overflow: hidden; height: 56px; font-size: 16px; justify-content: center; }
.a2-submit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(120%); transition: transform .8s var(--ease); }
.a2-submit:hover::after { transform: translateX(-120%); }
.a2-submit.busy { color: transparent; pointer-events: none; }
.a2-submit.busy::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; }
.a2-switch { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
.a2-switch button { border: 0; background: none; color: var(--rose); font-weight: 800; cursor: pointer; padding: 0; font: inherit; font-weight: 800; }
.auth-form.shake { animation: a2shake .45s; }
@keyframes a2shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (max-width: 860px) {
  .auth2 { grid-template-columns: 1fr; min-height: 0; }
  .a2-art { min-height: 0; padding: 20px 22px 26px; align-content: start; gap: 6px; }
  .a2-stack { position: relative; inset: auto; height: 170px; margin: 0 -10px; }
  .a2-card.k0, .auth2[data-mode="register"] .a2-card.k1 { top: 6%; right: 4%; }
  .a2-card.k1, .auth2[data-mode="register"] .a2-card.k2 { top: 14%; right: 34%; }
  .a2-card.k2, .auth2[data-mode="register"] .a2-card.k0 { top: 2%; right: 64%; }
  .a2-card { width: 120px; padding: 8px 8px 10px; border-radius: 18px; } .a2-card img { height: 86px; } .a2-card b { font-size: 11px; }
  .a2-msg h1, .a2-msg h2 { font-size: 34px; }
  .a2-perks { grid-template-columns: 1fr; }
  .a2-panel { box-shadow: 0 20px 50px -30px rgba(43,16,48,.3); }
}
@media (prefers-reduced-motion: reduce) { .a2-card, .a2-glow { animation: none; } }

/* =========================================================
   نسخه‌ی موبایل: حس اپلیکیشن
   ========================================================= */
html { -webkit-tap-highlight-color: transparent; }
@media (max-width: 860px) {
  /* هدر موبایل: منو و لوگو در یک سمت، جستجو و حساب و سبد در سمت دیگر */
  .hdr { padding-block: 8px; }
  .hdr-in { display: flex; gap: 8px; height: 62px; padding-inline: 8px; border-radius: 22px; }
  .hdr-in .logo { margin: 0; margin-inline-end: auto; gap: 6px; font-size: 17px; }
  .hdr-in .acts { gap: 6px; }
  .hdr-in .acts .ico { width: 40px; height: 40px; border-radius: 13px; }
  .hdr-in .acts .ico svg { width: 20px; height: 20px; }
  .hdr-in .search-pill, .hdr-in .acc-ico { display: grid; background: var(--soft); color: var(--plum); box-shadow: inset 0 0 0 1px var(--line); }
  .hdr-in .search-pill:active, .hdr-in .acc-ico:active { transform: scale(.9); background: var(--rose-soft); }
  .hdr-in .cart-ico { background: linear-gradient(135deg, var(--rose), #9b2c8f); box-shadow: 0 8px 18px -8px rgba(227,48,109,.8); }
  .hdr-in .cart-ico .badge { top: -5px; inset-inline-end: -5px; background: var(--plum); animation: badgePop .5s var(--spring); }
  .annc { font-size: 12px; }


  /* لمس: بازخورد فشردن */
  .btn:active, .pc:active, .tile:active, .chip:active, .bub:active, .mini:active, .s2-card:active { transform: scale(.97); transition-duration: .15s; }

  /* کارت محصول: دکمه‌ی گرد + به جای دکمه‌ی پهن */
  .pc { position: relative; }
  .pc .pr { padding-left: 44px; min-height: 40px; align-content: center; }
  .pc .add:not(:disabled) { position: absolute; left: 8px; bottom: 8px; width: 40px; height: 40px; padding: 0; border-radius: 14px; font-size: 0; display: grid; place-items: center; box-shadow: 0 8px 16px -8px rgba(43,16,48,.6); }
  .pc .add:not(:disabled)::before { content: "+"; font-size: 24px; font-weight: 400; line-height: 1; }
  .pc .stock { margin-left: 44px; }

  /* سبد خرید: نوار جمع کل چسبان */
  .co-sticky { position: fixed; z-index: 69; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 10px; padding-inline-start: 18px; border-radius: 22px; background: var(--plum); color: #fff; box-shadow: 0 20px 40px -18px rgba(43,16,48,.8); transition: transform .5s var(--spring), opacity .3s, bottom .5s var(--ease); animation: tbIn .7s var(--spring) both; }
  .co-sticky[hidden] { display: none; }
  .co-sticky.away { transform: translateY(160%); opacity: 0; }
  .co-sticky span { display: grid; } .co-sticky small { font-size: 11px; color: #e6cfe0; } .co-sticky b { font-size: 17px; }

  /* ورود و ثبت‌نام: برگه‌ی کشویی روی هنر */
  /* تصویر تیره تا پشت هدر بالا می‌آید تا نوار سفیدی پشت هدر نماند */
  .auth2 { margin: calc(-1 * (58px + 16px)) -16px 0; gap: 0; }
  .a2-art { border-radius: 0 0 36px 36px; padding: calc(58px + 30px) 22px 64px; box-shadow: none; }
  .a2-card-wrap { position: relative; z-index: 2; margin-top: -40px; padding-inline: 12px; }
  .a2-panel { border-radius: 30px; padding: 30px 20px 24px; animation: sheetUp .8s var(--spring) both .1s; }
  .a2-panel::after { content: ""; position: absolute; top: 10px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 5px; background: var(--line); }
}
@keyframes sheetUp { from { transform: translateY(60px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .a2-panel, .co-sticky { animation: none; } }

/* لوگوی تصویری */
.logo-img { width: 54px; height: 54px; margin-block: -6px; flex: none; display: grid; place-items: center; transition: transform .5s var(--spring); }
.logo-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(227,48,109,.25)); }
.logo:hover .logo-img { transform: rotate(-6deg) scale(1.08); }
.ftr .logo-img { width: 40px; height: 40px; }
.m-logo { width: 150px; height: auto; align-self: center; margin-top: auto; animation: fadeUp .8s var(--ease) both .4s; }
.a2-logo { width: 110px; height: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); margin-bottom: 4px; }
@media (max-width: 860px) { .logo-img { width: 46px; height: 46px; } .a2-logo { width: 84px; } }

/* آیکون منو: دو خط نامساوی و یک نقطه‌ی صورتی که به ضربدر تبدیل می‌شود */
.burger { place-items: center; width: 44px; height: 44px; border-radius: 15px; background: linear-gradient(135deg, var(--rose-soft), #f3e4ff); color: var(--plum); box-shadow: 0 6px 14px -8px rgba(227,48,109,.6); }
.burger span { right: 12px; height: 2.4px; transition: transform .45s var(--spring), width .4s var(--ease), background .3s; }
.burger span:nth-child(1) { width: 20px; transform: translateY(-5px); }
.burger span:nth-child(2) { width: 12px; transform: translateY(3px); }
.burger span:nth-child(3) { width: 5px; height: 5px; border-radius: 50%; right: auto; left: 11px; background: var(--rose); transform: translateY(3px); }
.burger:hover span:nth-child(2) { width: 20px; }
body.menu-open .burger { background: var(--plum); color: #fff; }
body.menu-open .burger span:nth-child(1) { transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2) { width: 20px; opacity: 1; transform: rotate(-45deg); }
body.menu-open .burger span:nth-child(3) { opacity: 0; transform: scale(0); }

/* ===== منوی موبایل دو ستونه (دسته‌ها و زیردسته‌ها) ===== */
.mm-search { margin: 4px 14px 12px; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--soft); color: var(--muted); font: inherit; font-size: 14px; text-align: start; cursor: pointer; }
.mm-search svg { width: 20px; height: 20px; color: var(--rose); }
.mm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 96px 1fr; border-top: 1px solid var(--line); }
.mm-rail { overflow-y: auto; background: var(--soft); padding: 6px 0 20px; scrollbar-width: none; }
.mm-rail::-webkit-scrollbar { display: none; }
.mm-rail button, .mm-rail a { position: relative; width: 100%; display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; text-align: center; opacity: 0; transform: translateX(20px); transition: opacity .4s, transform .5s var(--ease), color .3s, background .3s; }
body.menu-open .mm-rail > * { opacity: 1; transform: none; }
body.menu-open .mm-rail > :nth-child(2) { transition-delay: .05s; } body.menu-open .mm-rail > :nth-child(3) { transition-delay: .1s; } body.menu-open .mm-rail > :nth-child(4) { transition-delay: .15s; } body.menu-open .mm-rail > :nth-child(5) { transition-delay: .2s; } body.menu-open .mm-rail > :nth-child(6) { transition-delay: .25s; } body.menu-open .mm-rail > :nth-child(n+7) { transition-delay: .3s; }
.mm-rail b { font-weight: 700; line-height: 1.4; }
.mm-rail .im { width: 46px; height: 46px; border-radius: 16px; background: var(--tone, #fff); display: grid; place-items: center; transition: transform .4s var(--spring), box-shadow .3s; }
.mm-rail .im img { width: 40px; height: 40px; object-fit: contain; }
.mm-rail .on { background: #fff; color: var(--plum); }
.mm-rail .on b { font-weight: 900; }
.mm-rail .on::before { content: ""; position: absolute; right: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 4px 0 0 4px; background: var(--deep, var(--rose)); }
.mm-rail .on .im { transform: scale(1.08); box-shadow: 0 8px 16px -8px var(--deep, var(--rose)); }
.mm-sale .im { background: linear-gradient(135deg, var(--rose), #9b2c8f); font-size: 20px; color: #fff; }
.mm-sale b { color: var(--rose); }
.mm-panes { overflow-y: auto; padding: 14px 14px 30px; }
.mm-pane { display: grid; gap: 14px; align-content: start; animation: mmPane .45s var(--ease); }
@keyframes mmPane { from { opacity: 0; transform: translateY(14px); } }
.mm-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 16px 8px; border-radius: 22px; background: var(--tone); color: var(--plum); }
.mm-hero::before { content: ""; position: absolute; width: 140px; height: 140px; left: -30px; top: -40px; border-radius: 50%; background: rgba(255,255,255,.45); }
.mm-hero span { position: relative; display: grid; gap: 2px; }
.mm-hero small { font-size: 12px; color: var(--muted); font-weight: 700; }
.mm-hero b { font-size: 22px; font-weight: 900; }
.mm-hero i { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--deep); }
.mm-hero img { position: relative; width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(90,29,72,.18)); animation: float 5s ease-in-out infinite; }
.mm-h { margin: 6px 0 0; font-size: 14px; font-weight: 900; color: var(--plum); }
.mm-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
.mm-sub { display: grid; justify-items: center; gap: 6px; text-align: center; animation: mmPane .5s var(--ease) both; animation-delay: var(--d); }
.mm-sub .im { width: 64px; height: 64px; border-radius: 50%; background: var(--tone); display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); overflow: hidden; transition: transform .35s var(--spring), box-shadow .3s; }
.mm-sub .im img { width: 86%; height: 86%; object-fit: contain; transition: transform .4s var(--spring); }
.mm-sub:hover .im img { transform: scale(1.1) rotate(-6deg); }
.mm-sub b { font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.mm-sub:active .im { transform: scale(.92); box-shadow: 0 0 0 2px var(--deep); }
.mm-links { display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px; border-top: 1px solid var(--line); scrollbar-width: none; }
.mm-links::-webkit-scrollbar { display: none; }
.mm-links a { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--soft); font-size: 13px; font-weight: 700; }
.mmenu .mfoot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 14px calc(14px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 12.5px; }
.mmenu .mfoot span { display: inline-flex; align-items: center; gap: 6px; } .mmenu .mfoot svg { width: 15px; height: 15px; }

@keyframes badgePop { from { transform: scale(0); } }

.search-in input::-webkit-search-cancel-button { display: none; }

/* =========================================================
   کارایی: انیمیشن‌های بیرون از صفحه متوقف می‌شوند
   ========================================================= */
.paused, .paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; }
@media (hover: hover) { .hdr-in:hover::before { animation: hdrGlow 8s linear infinite; } }
@media (max-width: 860px) {
  .hdr-in { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.97); }
  .glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.82); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
/* شبکه‌های اجتماعی سه‌بعدی در فوتر */
.soc a.s3d { width: 34px; height: 34px; background: none; }
.soc a.s3d:hover { background: none; }
.s3d { display: grid; place-items: center; border-radius: 12px; transition: transform .4s var(--spring); }
.s3d svg { width: 28px; height: 28px; overflow: visible; filter: drop-shadow(0 3px 3px rgba(60,20,70,.22)); }
.s3d:hover, .s3d:active { transform: translateY(-2px) rotate(-8deg) scale(1.08); }
/* امضای طراح */
.credit { margin: 0; padding: 0; text-align: center; font-size: 10.5px; color: var(--muted); opacity: .85; display: flex; align-items: center; justify-content: center; gap: 4px; }
.credit .heart { width: 11px; height: 10px; vertical-align: -1px; animation: beat 1.6s ease-in-out infinite; }
.credit a { color: var(--plum); font-weight: 800; }
.credit a:hover { color: var(--rose); }
@keyframes beat { 0%, 60%, 100% { scale: 1; } 30% { scale: 1.25; } }

/* ---------- فوتر: چسبیده به پایین صفحه، با باز شدن انیمیشنی ---------- */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
.ftr { margin-top: 56px; position: relative; flex-shrink: 0; overflow: clip; }
.ftr-card { position: relative; padding: 44px 0 18px; border-radius: 40px 40px 0 0; background: linear-gradient(180deg, #fff3f8 0%, #f8f0fd 100%); border-top: 1px solid #f6dce8; overflow: hidden;
  transform-origin: 50% 100%; transition: transform 1s cubic-bezier(.2, .9, .25, 1.05), opacity .6s ease; }
.ftr.anim .ftr-card { transform: translateY(70px) scaleY(.9); opacity: .4; }
.ftr-card::before { content: ""; position: absolute; top: 0; left: 50%; width: 64px; height: 5px; margin-left: -32px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--gold), var(--rose)); transition: transform .8s .35s var(--spring); }
.ftr.anim .ftr-card::before { transform: scaleX(0); }
.ftr-card::after { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; top: -170px; inset-inline-end: -110px; background: radial-gradient(circle, rgba(255,143,177,.22), rgba(255,143,177,0) 70%); pointer-events: none; }
.ftr .fx { transition: opacity .55s ease, transform .8s var(--spring); }
.ftr.anim .fx { opacity: 0; transform: translateY(28px); }
.ftr.anim.open .ftr-card { transform: none; opacity: 1; }
.ftr.anim.open .ftr-card::before { transform: scaleX(1); }
.ftr.anim.open .fx { opacity: 1; transform: none; }
.ftr.open .fx:nth-child(1) { transition-delay: .12s; } .ftr.open .fx:nth-child(2) { transition-delay: .2s; } .ftr.open .fx:nth-child(3) { transition-delay: .28s; } .ftr.open .fx:nth-child(4) { transition-delay: .36s; }
.ftr.open .ftr-bottom { transition-delay: .44s; }
.ftr-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr 1.3fr 1.2fr; gap: 28px; }
.ftr-brand { display: grid; gap: 12px; align-content: start; }
.ftr-brand .logo { font-size: 19px; }
.ftr-brand p { margin: 0; font-size: 13.5px; line-height: 2; color: var(--muted); max-width: 300px; }
.ftr-col { display: grid; gap: 9px; align-content: start; font-size: 13.5px; color: var(--muted); }
.ftr-col > b { color: var(--plum); font-size: 15px; font-weight: 900; margin-bottom: 4px; position: relative; padding-inline-start: 12px; }
.ftr-col > b::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--rose); }
.ftr-col > a { transition: color .25s, transform .3s var(--spring); width: fit-content; }
.ftr-col > a:hover { color: var(--rose); transform: translateX(-4px); }
.ftr-contact a, .ftr-contact > span { display: flex; align-items: flex-start; gap: 8px; line-height: 1.8; }
.ftr-contact svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--rose); }
.trust { display: flex; gap: 10px; flex-wrap: wrap; }
.trust img { max-height: 96px; width: auto; background: #fff; border-radius: 16px; padding: 6px; box-shadow: 0 10px 24px -16px rgba(43,16,48,.35); }
.trust-slot { width: 96px; height: 106px; border-radius: 20px; border: 1.5px dashed #ecc3d6; background: rgba(255,255,255,.75); display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.6; color: #b98ea6; }
.trust-slot svg { width: 26px; height: 26px; color: #e7a6c3; }
.ftr-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 30px; padding-top: 16px; border-top: 1px dashed #efd3e1; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .ftr { margin-top: 36px; }
  .ftr-card { padding-top: 34px; border-radius: 32px 32px 0 0; }
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .ftr-brand, .ftr-trust { grid-column: 1 / -1; }
  .ftr-brand p { max-width: none; }
  .ftr-trust .trust { justify-content: flex-start; }
  .ftr-bottom { justify-content: center; text-align: center; flex-direction: column; gap: 6px; }
  body.page-cart:has(#co-sticky:not([hidden])) .ftr-card { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { .ftr-card, .ftr .fx { transform: none !important; opacity: 1 !important; transition: none !important; } }

/* روش ارسال در سبد خرید */
.co-ship { padding: 16px; border-radius: 22px; border: 1px solid var(--line); background: #fff; display: grid; gap: 10px; }
.co-ship[hidden] { display: none; }
.co-ship > b { font-size: 14px; color: var(--plum); }
.shm-list { display: grid; gap: 8px; }
.shm { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .25s, background .25s, transform .3s var(--spring); }
.shm:active { transform: scale(.98); }
.shm input { accent-color: var(--rose); width: 18px; height: 18px; flex: none; margin: 0; }
.shm span { flex: 1; display: grid; gap: 2px; min-width: 0; }
.shm b { font-size: 14px; } .shm small { font-size: 12px; color: var(--muted); } .shm small.fo { color: #0f8a55; }
.shm em { font-style: normal; font-weight: 900; font-size: 13.5px; color: var(--plum); white-space: nowrap; }
.shm em.free { color: #0f8a55; }
.shm.on { border-color: var(--rose); background: #fff6fa; }

/* ---------- چت آنلاین ---------- */
.chat-w { position: fixed; z-index: 68; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); direction: rtl; transition: bottom .5s var(--ease); }
body.menu-open .chat-w, body.search-open .chat-w, body.cart-open .chat-w { opacity: 0; pointer-events: none; }
.chat-fab { position: relative; width: 60px; height: 60px; border: 0; border-radius: 22px; cursor: pointer; color: #fff; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff5f97, #b5267f 70%, #7b1f73); box-shadow: 0 16px 34px -12px rgba(181,38,127,.75), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .45s var(--spring), border-radius .45s var(--spring); animation: fabIn .8s 1s var(--spring) both; }
.chat-fab::before { content: ""; position: absolute; inset: -6px; border-radius: 26px; border: 2px solid rgba(227,48,109,.35); animation: fabRing 2.8s 2s ease-out infinite; }
.chat-fab:hover { transform: translateY(-3px) rotate(-6deg); } .chat-fab:active { transform: scale(.92); }
.chat-fab svg { position: absolute; width: 28px; height: 28px; transition: transform .45s var(--spring), opacity .25s; }
.chat-fab .i-chat { fill: #fff; } .chat-fab .i-chat circle { fill: #c22b80; }
.chat-fab .i-x { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: 0; transform: rotate(-90deg) scale(.5); }
.chat-w.open .chat-fab { border-radius: 50%; } .chat-w.open .chat-fab::before { animation: none; opacity: 0; }
.chat-w.open .i-chat { opacity: 0; transform: rotate(90deg) scale(.5); } .chat-w.open .i-x { opacity: 1; transform: none; }
.chat-fab.ring { animation: fabShake .9s var(--spring); }
.chat-nb { position: absolute; top: -5px; left: -5px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #19b26b; color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; border: 2px solid #fff; animation: pop .5s var(--spring); }
.chat-nb:empty { display: none; }
@keyframes fabIn { from { opacity: 0; transform: translateY(30px) scale(.6); } }
@keyframes fabRing { 0% { transform: scale(.9); opacity: 1; } 70%, 100% { transform: scale(1.25); opacity: 0; } }
@keyframes fabShake { 20% { transform: rotate(-14deg) scale(1.08); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } }

.chat-box { position: absolute; right: 0; bottom: 74px; width: min(370px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 130px)); display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 28px; border: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(43,16,48,.55);
  transform-origin: 100% 100%; transform: translateY(16px) scale(.86); opacity: 0; transition: transform .5s var(--spring), opacity .3s; }
.chat-box.on { transform: none; opacity: 1; }
.chat-h { display: flex; align-items: center; gap: 11px; padding: 16px 16px 18px; color: #fff; background: linear-gradient(135deg, #ff5f97, #a8247c 60%, #4b1650); position: relative; }
.chat-h::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 14px; background: #fff; border-radius: 16px 16px 0 0; }
.chat-av { position: relative; width: 44px; height: 44px; border-radius: 15px; background: rgba(255,255,255,.95); display: grid; place-items: center; font-size: 20px; flex: none; }
.chat-av img { width: 34px; height: 34px; object-fit: contain; }
.chat-av i { position: absolute; bottom: -2px; left: -2px; width: 12px; height: 12px; border-radius: 50%; background: #2bd47d; border: 2px solid #b5267f; }
.chat-h > span:nth-child(2) { flex: 1; display: grid; gap: 1px; } .chat-h b { font-size: 15.5px; } .chat-h small { font-size: 11.5px; opacity: .85; }
.chat-close { width: 34px; height: 34px; border-radius: 12px; border: 0; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; font-size: 14px; }
.chat-body { flex: 1; overflow-y: auto; padding: 6px 14px 12px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, #fff, #fff8fb); overscroll-behavior: contain; }
#chat-msgs { display: flex; flex-direction: column; gap: 8px; }
.chat-hi { margin: auto 0; text-align: center; display: grid; gap: 6px; justify-items: center; padding: 10px 6px; animation: lfIn .6s var(--spring) both; }
.chat-hi .wave { font-size: 38px; display: inline-block; animation: wave 1.8s ease-in-out .4s 2; transform-origin: 70% 80%; }
.chat-hi b { font-size: 17px; } .chat-hi p { margin: 0; font-size: 13px; line-height: 2; color: var(--muted); }
@keyframes wave { 15%, 45% { transform: rotate(18deg); } 30%, 60% { transform: rotate(-10deg); } 75% { transform: none; } }
@keyframes lfIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.chat-foot { padding: 10px 12px; border-top: 1px solid var(--line); background: #fff; }
.chat-start { display: grid; gap: 9px; }
.chat-start label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.chat-start .input { padding: 11px 14px; font-size: 14px; }
.chat-start .btn { width: 100%; }
.cb { max-width: 82%; display: grid; gap: 2px; animation: lfIn .4s var(--spring) both; }
.cb p { margin: 0; padding: 9px 13px; border-radius: 18px; font-size: 13.5px; line-height: 1.9; overflow-wrap: anywhere; }
.cb time { font-size: 10px; color: var(--muted); padding-inline: 6px; }
.cb.them { align-self: flex-end; } .cb.them p { background: #f6eef3; color: var(--plum); border-start-end-radius: 6px; } .cb.them time { text-align: end; }
.cb.me { align-self: flex-start; } .cb.me p { background: linear-gradient(135deg, #ff5f97, #b5267f); color: #fff; border-start-start-radius: 6px; }
.cb.sending p { opacity: .65; } .cb.fail p { background: #c0392b; }
.cb.sys p { background: linear-gradient(135deg, #fff1f6, #f6efff); border: 1px dashed #f0c4d8; }
.chat-send { display: flex; align-items: flex-end; gap: 8px; }
.chat-send textarea { flex: 1; resize: none; min-height: 44px; max-height: 110px; padding: 11px 14px; font-size: 14px; border-radius: 16px; }
.chat-send button { width: 44px; height: 44px; border-radius: 15px; border: 0; cursor: pointer; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #ff5f97, #b5267f); transition: transform .3s var(--spring); }
.chat-send button:active { transform: scale(.9); }
.chat-send svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; transform: scaleX(-1); }
.chat-mars { display: block; text-align: center; font-size: 10.5px; color: var(--muted); padding: 0 0 9px; background: #fff; }
.chat-mars b { color: var(--rose); }
@media (max-width: 700px) {
  .chat-w { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  body:has(#pp-buybar) .chat-w, body:has(.co-sticky:not([hidden]):not(.away)) .chat-w { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .chat-fab { width: 54px; height: 54px; border-radius: 19px; }
  .chat-box { position: fixed; right: 0; left: 0; bottom: 0; width: auto; height: min(88dvh, 640px); border-radius: 28px 28px 0 0; transform: translateY(100%); opacity: 1; transform-origin: 50% 100%; }
  .chat-box.on { transform: none; }
  .chat-w.open .chat-fab { opacity: 0; pointer-events: none; transform: scale(.6); }
  .chat-mars { padding-bottom: calc(9px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .chat-fab, .chat-fab::before, .chat-hi .wave { animation: none; } }

/* ============ تضمین اصالت کالا ============ */
.gu { --ok: #12a26b; position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; padding: clamp(22px, 4vw, 48px); background: linear-gradient(155deg, #ffffff 0%, #fff4f8 55%, #f3fbf7 100%); border: 1px solid #f3e3ea; box-shadow: 0 40px 80px -60px rgba(43,16,48,.35); }
.gu::before, .gu::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.gu::before { width: 420px; height: 420px; top: -200px; inset-inline-start: -160px; background: radial-gradient(circle, rgba(18,162,107,.13), transparent 68%); }
.gu::after { width: 380px; height: 380px; bottom: -220px; inset-inline-end: -120px; background: radial-gradient(circle, rgba(227,48,109,.12), transparent 68%); }
.gu-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 36px); align-items: center; }
.gu-seal { position: relative; width: clamp(104px, 13vw, 150px); aspect-ratio: 1; display: grid; place-items: center; }
.gu-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.gu-ring text { font: 800 9.4px Vazirmatn, Tahoma, sans-serif; fill: #0e8a5a; letter-spacing: .4px; direction: rtl; }
.gu-shield { width: 58%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #1fc286, #0e8a5a); box-shadow: 0 16px 30px -12px rgba(14,138,90,.65), inset 0 2px 0 rgba(255,255,255,.35); }
.gu-shield svg { width: 56%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gu-shield .ck { stroke-dasharray: 12; stroke-dashoffset: 12; animation: draw .8s .4s var(--ease) forwards; }
.gu-ttl { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.gu-k { font-size: 13px; font-weight: 800; color: var(--ok); background: rgba(18,162,107,.1); padding: 5px 12px; border-radius: 999px; }
.gu-h { margin: 0; font-size: clamp(24px, 3.4vw, 40px); font-weight: 900; line-height: 1.35; text-wrap: balance; }
.gu-h em { font-style: normal; background: linear-gradient(90deg, var(--rose), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gu-intro { margin: 0; color: var(--muted); line-height: 2; max-width: 70ch; }
.gu-list { list-style: none; margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; counter-reset: gu; }
.gu-it { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px; border-radius: 22px; background: rgba(255,255,255,.85); border: 1px solid #f0e4ea; box-shadow: 0 14px 30px -26px rgba(43,16,48,.5); transition: transform .4s var(--ease), box-shadow .4s var(--ease); counter-increment: gu; }
.gu-it::after { content: "۰" counter(gu, persian); position: absolute; inset-inline-end: 16px; top: 10px; font: 900 34px/1 Vazirmatn, sans-serif; color: rgba(43,16,48,.05); pointer-events: none; }
@media (hover: hover) { .gu-it:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(43,16,48,.55); } }
.gu-ck { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, #1fc286, #0e8a5a); box-shadow: 0 8px 16px -8px rgba(14,138,90,.7); flex-shrink: 0; }
.gu-ck svg { width: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.gu-tx { display: grid; gap: 6px; min-width: 0; }
.gu-tx b { font-size: 16px; font-weight: 900; padding-inline-end: 34px; }
.gu-tx p { margin: 0; color: #6f5b69; line-height: 1.95; font-size: 14px; }
.gu-more { display: none; }
.gu-foot { margin-top: clamp(18px, 3vw, 28px); display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.gu-outro { margin: 0; font-weight: 900; font-size: clamp(16px, 2vw, 20px); display: inline-flex; align-items: center; gap: 10px; }
.gu-outro::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--rose)); }
.gu-cta { display: flex; gap: 10px; flex-wrap: wrap; }
/* ورود آرام موارد وقتی بخش دیده می‌شود */
.gu .gu-it { animation: fadeUp .7s var(--d, 0ms) var(--ease) both; }
.gu-page { margin-top: 8px; }
.gu.full .gu-list { grid-template-columns: 1fr; }
.gu.full .gu-it { padding: 22px; }
.gu.full .gu-tx p { font-size: 15px; }
/* صفحه محصول */
.pp-gu { display: block; color: var(--ok, #12a26b); font-weight: 700; font-size: 12.5px; }
.gu-tab-intro { margin: 0 0 14px; color: var(--muted); line-height: 2; }
.gu-tab { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.gu-tab li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.gu-tab b { display: block; margin-bottom: 2px; }
.gu-tab p { margin: 0; color: #6f5b69; line-height: 1.9; font-size: 14px; }
@media (max-width: 760px) {
  .gu { border-radius: 26px; padding: 20px 16px; }
  .gu-head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
  .gu-ttl { justify-items: center; }
  .gu-seal { width: 112px; }
  .gu-intro { font-size: 14px; }
  .gu-list { grid-template-columns: 1fr; gap: 10px; }
  .gu-it { padding: 14px; gap: 12px; border-radius: 18px; }
  .gu-it[aria-expanded] { cursor: pointer; grid-template-columns: auto 1fr auto; -webkit-tap-highlight-color: transparent; }
  .gu-it[aria-expanded]::after { display: none; }
  .gu-it[aria-expanded] .gu-tx b { padding: 0; font-size: 15px; }
  .gu-it[aria-expanded] .gu-tx p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; }
  .gu-it[aria-expanded="true"] .gu-tx p { -webkit-line-clamp: unset; display: block; }
  .gu-more { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--soft); font-weight: 900; color: var(--muted); transition: transform .35s var(--spring); align-self: center; }
  .gu-it[aria-expanded="true"] .gu-more { transform: rotate(45deg); }
  .gu-foot { justify-content: center; text-align: center; }
  .gu-cta { justify-content: center; width: 100%; } .gu-cta .btn { flex: 1 1 200px; }
}
@media (prefers-reduced-motion: reduce) { .gu-ring, .gu .gu-it { animation: none; } .gu-shield .ck { stroke-dashoffset: 0; animation: none; } }
@media (max-width: 420px) { .tabs button { padding: 12px 12px; font-size: 14px; } }

/* ============ گالری، ویژگی‌ها و رسانه‌ی توضیحات محصول ============ */
.pp-gal { position: sticky; top: 100px; display: grid; gap: 12px; min-width: 0; }
.pp-gal .pp-media { position: relative; top: 0; touch-action: pan-y; }
.pp-zoom img.sw { animation: ppSwap .55s var(--ease) both; }
@keyframes ppSwap { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 40px)) scale(.94); } }
.pp-nav { position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); box-shadow: 0 10px 24px -12px rgba(43,16,48,.45); font-weight: 900; font-size: 16px; display: grid; place-items: center; opacity: 0; transition: opacity .3s, transform .3s var(--spring); backdrop-filter: blur(6px); }
.pp-nav.prev { inset-inline-start: 14px; } .pp-nav.next { inset-inline-end: 14px; }
.pp-media:hover .pp-nav { opacity: 1; } .pp-nav:hover { transform: scale(1.08); }
.pp-dots { position: absolute; bottom: 14px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; z-index: 3; pointer-events: none; }
.pp-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(43,16,48,.22); transition: width .35s var(--ease), background .35s; }
.pp-dots i.on { width: 22px; background: var(--plum); }
.pp-thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-snap-type: x proximity; }
.pp-thumbs::-webkit-scrollbar { display: none; }
.pp-thumbs button { flex: 0 0 76px; height: 76px; border-radius: 18px; border: 2px solid transparent; background: var(--tone, #fdf0f4); padding: 6px; transition: border-color .25s, transform .3s var(--spring); scroll-snap-align: start; }
.pp-thumbs button img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pp-thumbs button.on { border-color: var(--plum); transform: translateY(-3px); }
.pp-opts { display: grid; gap: 16px; }
.po { display: grid; gap: 10px; }
.po-h { font-size: 15px; } .po-h b { font-weight: 900; } .po-v { color: var(--muted); font-weight: 700; }
.po-list { display: flex; flex-wrap: wrap; gap: 10px; }
.po-list.sw button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 2px #fff, 0 0 0 3px transparent; transition: box-shadow .25s, transform .3s var(--spring); position: relative; }
.po-list.sw button[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 3px #fff, 0 0 0 5px var(--plum); transform: scale(1.06); }
.po-list.sw button:not(:disabled):hover { transform: scale(1.1); }
.po-list.tx button { min-width: 52px; padding: 9px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-weight: 800; font-size: 14px; display: grid; justify-items: center; line-height: 1.4; transition: border-color .25s, background .25s, color .25s; }
.po-list.tx button small { font-size: 11px; font-weight: 700; color: var(--muted); }
.po-list.tx button[aria-checked="true"] { border-color: var(--plum); background: var(--plum); color: #fff; }
.po-list.tx button[aria-checked="true"] small { color: rgba(255,255,255,.75); }
.po-list button:disabled { opacity: .38; cursor: not-allowed; }
.po-list.sw button:disabled::after { content: ""; position: absolute; inset: 45% -2px auto; height: 2px; background: #fff; transform: rotate(-45deg); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.po-list.tx button:disabled { text-decoration: line-through; }
.ci-opt { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.prose .rt-media { margin: 22px 0; border-radius: 22px; overflow: hidden; background: var(--soft); }
.prose .rt-media img, .prose .rt-media video { width: 100%; height: auto; max-height: 560px; object-fit: contain; display: block; margin: 0 auto; }
.prose .rt-media video { background: #0d0610; }
.prose .rt-media figcaption { padding: 10px 16px; font-size: 13px; color: var(--muted); text-align: center; }
@media (max-width: 860px) {
  .pp-gal { position: relative; top: 0; }
  .pp-nav { display: none; }
  .pp-thumbs button { flex-basis: 64px; height: 64px; border-radius: 16px; }
}

/* نوار خرید صفحه محصول: در موبایل شناور و چسبیده به پایین */
.pp-bar-price { display: none; }
@media (max-width: 860px) {
  .pp-buy { position: fixed; z-index: 69; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px; border-radius: 24px; background: rgba(43,16,48,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; box-shadow: 0 22px 44px -16px rgba(43,16,48,.75), inset 0 1px 0 rgba(255,255,255,.08); animation: barUp .6s var(--spring) both; }
  .pp-bar-price { display: grid; padding-inline-start: 8px; line-height: 1.35; min-width: 0; }
  .pp-bar-price small { font-size: 11px; color: rgba(255,255,255,.6); }
  .pp-bar-price b { font-size: 15px; font-weight: 900; color: #ffd9a0; white-space: nowrap; }
  /* روی موبایل قیمت فقط در نوار خرید پایین صفحه */
  body:has(#pp-buybar) .pp-price { display: none; }
  .pp-bar-price.has-off small { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11.5px; }
  .pp-bar-price.has-off s { color: rgba(255,255,255,.55); }
  .pp-bar-price.has-off em { font-style: normal; font-size: 10.5px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #ff5c8d, #e3306d); padding: 1px 6px; border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(227,48,109,.9); }
  .pp-buy .qty.big { background: rgba(255,255,255,.1); border: 0; color: #fff; height: 46px; }
  .pp-buy .qty.big button { color: #fff; width: 32px; height: 36px; }
  .pp-buy .btn { flex: none; height: 46px; padding: 0 18px; font-size: 14px; white-space: nowrap; background: linear-gradient(135deg, #ff5c8d, #e3306d 55%, #b0216b); color: #fff; box-shadow: 0 10px 22px -10px rgba(227,48,109,.9); }
  body:has(#pp-buybar) .ftr-card { padding-bottom: 104px; }
  body:has(#pp-buybar) .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) { .pp-bar-price small:not(:has(s)) { display: none; } .pp-bar-price.has-off s { display: none; } .pp-buy .btn { padding: 0 12px; } }
@keyframes barUp { from { transform: translateY(140%); opacity: 0; } }

/* فیلتر فروشگاه: دکمه، پنل کشویی (موبایل از پایین، دسکتاپ از کنار) و دکمه‌ی شناور */
.f-btn { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-weight: 800; font-size: 14px; transition: transform .35s var(--spring), border-color .3s; }
.f-btn:hover { border-color: var(--plum); transform: translateY(-2px); }
.f-btn svg, .f-fab svg { width: 20px; height: 20px; }
.f-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; font-style: normal; text-align: center; }
.f-n:empty { display: none; }
.f-btn .f-n { position: absolute; top: -7px; left: -7px; box-shadow: 0 0 0 3px #fff; }
.shop-res { transition: opacity .25s; }
.shop-res.loading { opacity: .45; pointer-events: none; }
.shop-res.fin .pc { animation: fIn .55s var(--ease) both; }
@keyframes fIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.shop-res .empty .btn + .btn { margin-top: -4px; }

.fsheet { position: fixed; inset: 0; z-index: 90; visibility: hidden; transition: visibility 0s .5s; }
.fsheet.on { visibility: visible; transition: none; }
.fs-scrim { position: absolute; inset: 0; background: rgba(43,16,48,.38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s; }
.fsheet.on .fs-scrim { opacity: 1; }
.fs-panel { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; background: #fff; border-radius: 30px 30px 0 0; box-shadow: 0 -30px 60px -30px rgba(43,16,48,.45); transform: translateY(105%); transition: transform .5s var(--ease); }
.fsheet.on .fs-panel { transform: none; }
.fs-grab { width: 44px; height: 5px; border-radius: 9px; background: #eadde4; margin: 10px auto 0; flex: 0 0 auto; }
.fs-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 12px; }
.fs-h b { font-size: 18px; font-weight: 900; }
.fs-x { width: 40px; height: 40px; border: 0; border-radius: 14px; background: var(--soft); display: grid; place-items: center; transition: transform .3s var(--spring); }
.fs-x:active { transform: scale(.9); }
.fs-x svg { width: 20px; height: 20px; }
.fs-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; display: grid; gap: 24px; align-content: start; }
.fs-sec h4 { margin: 0 0 12px; font-size: 14px; font-weight: 900; }
.fs-sec h4 small { color: var(--muted); font-weight: 600; }
.fs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .3s var(--spring); }
.fchip:active { transform: scale(.95); }
.fchip img { width: 22px; height: 22px; margin: -4px 0; }
.fchip.on { background: var(--plum); border-color: var(--plum); color: #fff; box-shadow: 0 10px 20px -12px rgba(43,16,48,.8); }
.fchip.ghost { border-style: dashed; color: var(--muted); }
.fchip:has(:focus-visible) { outline: 2px solid var(--rose); outline-offset: 2px; }
.fr { position: relative; height: 34px; margin: 0 2px; }
.fr-track { position: absolute; inset: 14px 0 auto; height: 6px; border-radius: 9px; background: var(--line); }
.fr-track i { position: absolute; top: 0; bottom: 0; right: calc(13px + (100% - 26px) * var(--a)); left: calc(13px + (100% - 26px) * (1 - var(--b))); border-radius: 9px; background: linear-gradient(90deg, #b44bd6, var(--rose)); }
.fr input { position: absolute; inset: 0; width: 100%; height: 34px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.fr input::-webkit-slider-runnable-track { height: 34px; background: none; }
.fr input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 26px; height: 26px; margin-top: 4px; border-radius: 50%; background: #fff; border: 3px solid var(--rose); box-shadow: 0 6px 14px -6px rgba(227,48,109,.8); cursor: grab; }
.fr input::-moz-range-track { background: none; }
.fr input::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--rose); box-shadow: 0 6px 14px -6px rgba(227,48,109,.8); cursor: grab; }
.fr input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--rose-soft); }
.fr-vals { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); }
.fr-vals b { color: var(--plum); font-weight: 900; font-size: 14px; }
.fs-sw { display: grid; gap: 10px; }
.fs-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--soft); cursor: pointer; }
.fs-row span { display: grid; gap: 2px; }
.fs-row b { font-size: 14px; }
.fs-row small { font-size: 12px; color: var(--muted); }
.fs-row .sw { flex: 0 0 auto; width: 46px; height: 26px; border-radius: 99px; background: #e8dbe2; position: relative; transition: background .3s; }
.fs-row .sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .35s var(--spring); }
.fs-row input:checked + .sw { background: var(--rose); }
.fs-row input:checked + .sw::after { transform: translateX(-20px); }
.fs-row input:focus-visible + .sw { outline: 2px solid var(--rose); outline-offset: 3px; }
.fs-f { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.fs-f .btn { padding-inline: 18px; }
.fs-f .btn:disabled { opacity: .7; }
body.filter-open { overflow: hidden; }
body.filter-open .chat-w { opacity: 0; pointer-events: none; }
.f-fab { display: none; }
@media (min-width: 861px) {
  .fs-panel { left: auto; top: 0; width: 420px; max-height: none; border-radius: 30px 0 0 30px; transform: translateX(105%); }
  .fs-grab { display: none; }
  .fs-h { padding-top: 22px; }
}
@media (max-width: 860px) {
  .shop-tools { flex-wrap: nowrap; }
  .shop-tools input[type=search] { flex: 1 1 auto; min-width: 0; }
  .shop-tools select, .shop-tools .toggle { display: none; }
  .f-btn { padding: 0 14px; }
  .f-fab { display: inline-flex; position: fixed; z-index: 66; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); align-items: center; gap: 8px; height: 52px; padding: 0 22px; border: 0; border-radius: 99px; background: rgba(43,16,48,.94); color: #fff; font-weight: 800; font-size: 14px; white-space: nowrap; box-shadow: 0 18px 36px -14px rgba(43,16,48,.75), inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translate(-50%, 160%); transition: transform .5s var(--spring); }
  .f-fab:active { transform: translate(-50%, 0) scale(.95); }
  .f-fab .f-n { box-shadow: none; }
  body.f-fab-on .f-fab { transform: translate(-50%, 0); }
  body.filter-open .f-fab, body.cart-open .f-fab, body.menu-open .f-fab, body.search-open .f-fab { transform: translate(-50%, 160%); }
  body:has(.f-fab) .ftr-card { padding-bottom: 90px; }
}

/* ---------- قوانین سایت ---------- */
.terms-page { max-width: 760px; margin: 0 auto; padding: 8px 0 40px; }
.terms-page h1 { font-size: clamp(22px, 5vw, 32px); margin: 8px 0 18px; }
.agree { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: #fff7fa; border: 1.5px dashed #f3c4d6; font-size: 13.5px; line-height: 1.9; cursor: pointer; margin: 4px 0 12px; }
.agree input { accent-color: var(--rose); width: 20px; height: 20px; margin-top: 3px; flex: none; }
.agree a { color: var(--rose); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.agree:has(input:checked) { border-style: solid; border-color: var(--rose); }
.agree.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(6px); } 50% { transform: translateX(-6px); } 75% { transform: translateX(3px); } }

/* ---------- حراج لحظه‌ای ---------- */
.pc .flash-chip { align-self: center; position: relative; z-index: 3; margin-top: -26px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 9px; border-radius: 99px; background: linear-gradient(135deg, #2b1030, #5b1846); color: #fff; font-size: 12px; box-shadow: 0 8px 18px -8px rgba(43,16,48,.7); }
.pc .flash-chip i { font-style: normal; color: #ffd36a; animation: bolt 1.6s ease-in-out infinite; }
.pc .flash-chip b { font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; letter-spacing: .3px; }
@keyframes bolt { 0%, 100% { transform: none; } 50% { transform: scale(1.25) rotate(-8deg); } }
.flash { position: relative; overflow: hidden; display: grid; gap: 12px; padding: 14px 16px 16px; margin: 4px 0 14px; border-radius: 22px; color: #fff; isolation: isolate;
  background: radial-gradient(80% 120% at 100% 0%, #ff5c8d 0%, transparent 55%), radial-gradient(70% 120% at 0% 100%, #7b1f73 0%, transparent 60%), #2b1030; box-shadow: 0 18px 36px -20px rgba(123,31,115,.8); }
.flash::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.12) 45%, transparent 60%); transform: translateX(100%); animation: flShine 3.2s 1s ease-in-out infinite; }
@keyframes flShine { 60%, 100% { transform: translateX(-100%); } }
.fl-h { display: flex; align-items: center; gap: 10px; }
.fl-h b { display: block; font-size: 16px; font-weight: 900; }
.fl-h small { display: block; font-size: 12px; opacity: .78; margin-top: 2px; }
.fl-bolt { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: rgba(255,255,255,.12); flex: none; animation: bolt 1.6s ease-in-out infinite; }
.fl-cd { display: flex; align-items: center; justify-content: center; gap: 6px; direction: rtl; }
.fl-cd span { display: grid; justify-items: center; gap: 3px; min-width: 64px; padding: 8px 6px 6px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); }
.fl-cd b { font-size: 26px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.fl-cd b.tk { animation: tk .35s var(--spring); }
@keyframes tk { from { transform: translateY(-5px); opacity: .4; } }
.fl-cd small { font-size: 11px; opacity: .7; }
.fl-cd i { font-style: normal; font-weight: 900; font-size: 20px; opacity: .55; }
.fl-bar { height: 6px; border-radius: 9px; background: rgba(255,255,255,.14); overflow: hidden; }
.fl-bar u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd36a, #ff5c8d); transform-origin: right; transition: transform 1s linear; }
.pp-pts { margin: -2px 0 14px; padding: 10px 14px; border-radius: 16px; background: #fff8ec; color: #8a5a12; font-size: 13.5px; line-height: 1.9; }
.pp-pts b { color: #b7700f; } .pp-pts a { color: var(--rose); font-weight: 700; }

/* ---------- محصولات مکمل ---------- */
.ups { position: fixed; inset: 0; z-index: 95; visibility: hidden; }
.ups.on { visibility: visible; }
.ups-bg { position: absolute; inset: 0; background: rgba(30,10,34,.45); opacity: 0; transition: opacity .35s; }
.ups.on .ups-bg { opacity: 1; }
.ups-p { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow: auto; background: #fff; border-radius: 28px 28px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .5s var(--ease); box-shadow: 0 -20px 50px -20px rgba(43,16,48,.5); }
.ups.on .ups-p { transform: none; }
.ups-grab { display: block; width: 44px; height: 5px; border-radius: 9px; background: #e9dbe3; margin: 4px auto 10px; }
.ups-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ups-h > div { flex: 1; min-width: 0; } .ups-h b { display: block; font-size: 17px; font-weight: 900; } .ups-h small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ups-ok { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #e6f7ef; color: #0f8a55; font-weight: 900; flex: none; animation: okPop .5s var(--spring); }
@keyframes okPop { from { transform: scale(.3); } }
.ups-x { width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--soft); flex: none; }
.ups-list { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; }
.ups-list::-webkit-scrollbar { display: none; }
.ups-c { flex: 0 0 150px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 20px; border: 1px solid var(--line); background: #fff; animation: fadeUp .45s both; }
.ups-c .im { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; background: var(--tone, var(--soft)); overflow: hidden; }
.ups-c .im img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.ups-c .im em { position: absolute; top: 6px; inset-inline-start: 6px; font-style: normal; background: var(--rose); color: #fff; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 8px; }
.ups-c .nm { font-size: 12.5px; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; }
.ups-c .pr { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; } .ups-c .pr b { font-weight: 900; } .ups-c .pr s { color: var(--muted); font-size: 11.5px; }
.ups-add { margin-top: auto; height: 36px; border: 0; border-radius: 12px; background: var(--rose-soft); color: var(--rose); font-weight: 800; font-size: 12.5px; transition: background .25s, color .25s, transform .3s var(--spring); }
.ups-add:active { transform: scale(.95); } .ups-add.done { background: #e6f7ef; color: #0f8a55; }
.ups-f { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 4px; }
.ups-f .btn { height: 48px; justify-content: center; }
body.ups-open { overflow: hidden; }
@media (min-width: 761px) {
  .ups-p { left: 50%; right: auto; bottom: 50%; width: min(680px, 92vw); border-radius: 28px; transform: translate(-50%, 60%) scale(.96); opacity: 0; transition: transform .45s var(--ease), opacity .3s; padding: 18px 22px 22px; }
  .ups.on .ups-p { transform: translate(-50%, 50%); opacity: 1; }
  .ups-grab { display: none; } .ups-c { flex-basis: 170px; }
}
.co-ups { margin-top: 18px; } .co-ups h2 { font-size: 17px; margin: 0 0 10px; }
.ci-up { display: inline-block; font-size: 11.5px; font-weight: 800; color: #0f8a55; background: #e6f7ef; padding: 1px 8px; border-radius: 8px; margin: 2px 0; }
.ci .pr s { color: var(--muted); font-size: 12px; font-weight: 400; }
.co-sum .r.pts { color: #b7700f; font-size: 13.5px; font-weight: 700; background: #fff8ec; padding: 8px 12px; border-radius: 12px; }

/* ---------- خریدهای اخیر ---------- */
.proof { position: fixed; z-index: 67; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: min(340px, calc(100vw - 110px)); direction: rtl; opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none; transition: opacity .45s var(--ease), transform .55s var(--spring), bottom .5s var(--ease); }
.proof.on { opacity: 1; transform: none; pointer-events: auto; }
.pf-in { display: flex; gap: 10px; align-items: center; padding: 9px 12px 9px 30px; border-radius: 20px; background: rgba(255,255,255,.96); border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(43,16,48,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pf-im { width: 50px; height: 50px; border-radius: 14px; background: var(--soft); display: grid; place-items: center; flex: none; overflow: hidden; }
.pf-im img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pf-t { display: grid; gap: 1px; min-width: 0; font-size: 12.5px; line-height: 1.7; }
.pf-t b { font-size: 13px; font-weight: 900; }
.pf-t > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--plum); }
.pf-t small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-ok { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #0f8a55; color: #fff; font-style: normal; font-size: 9px; margin-inline-end: 4px; vertical-align: -2px; }
.pf-x { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--soft); color: var(--muted); font-size: 10px; line-height: 1; }
body.menu-open .proof, body.search-open .proof, body.cart-open .proof, body.filter-open .proof, body.ups-open .proof { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .proof { left: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); width: calc(100vw - 104px); }
  body:has(#pp-buybar) .proof, body.f-fab-on .proof { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .pf-in { padding: 7px 10px 7px 28px; } .pf-im { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .proof, .ups-p, .flash::after, .fl-bolt, .pc .flash-chip i { transition: none; animation: none; } }

/* ---------- باشگاه مشتریان (حساب کاربری) ---------- */
.club { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; margin: 0 0 20px; scroll-margin-top: 110px; }
.club-card { position: relative; overflow: hidden; display: grid; gap: 14px; align-content: start; padding: 20px; border-radius: 28px; color: #fff; isolation: isolate;
  background: radial-gradient(90% 110% at 100% 0%, #ff7aa6, transparent 55%), radial-gradient(80% 120% at 0% 100%, #d9a35f, transparent 60%), linear-gradient(135deg, #5b1846, #2b1030); box-shadow: 0 24px 50px -30px rgba(91,24,70,.9); }
.club-card::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 30px solid rgba(255,255,255,.06); top: -90px; left: -70px; z-index: -1; }
.club-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.club-lv { font-weight: 900; background: rgba(255,255,255,.16); padding: 5px 12px; border-radius: 99px; font-size: 13.5px; }
.club-rule { font-size: 12px; opacity: .8; }
.club-bal b { display: block; font-size: 44px; font-weight: 900; line-height: 1.1; }
.club-bal span { font-size: 13px; opacity: .85; }
.club-prog i { display: block; height: 8px; border-radius: 9px; background: rgba(255,255,255,.18); overflow: hidden; margin-bottom: 6px; }
.club-prog u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd36a, #fff); }
.club-prog small { font-size: 12.5px; opacity: .9; }
.club-side { padding: 18px; border-radius: 28px; border: 1px solid var(--line); background: #fff; }
.club-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tier { display: grid; gap: 2px; text-align: start; padding: 12px 14px; border-radius: 18px; border: 1.5px solid #f3c4d6; background: #fff7fa; transition: transform .3s var(--spring), border-color .25s; }
.tier b { font-size: 15px; font-weight: 900; color: var(--rose); } .tier small { color: var(--muted); font-size: 12px; }
.tier:not(:disabled):hover { transform: translateY(-2px); border-color: var(--rose); }
.tier.off { opacity: .5; cursor: not-allowed; background: var(--soft); border-color: var(--line); } .tier.off b { color: var(--muted); }
.club-codes { display: grid; gap: 6px; margin-top: 12px; }
.cc { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #e6f7ef; font-size: 13px; }
.cc code { font-weight: 900; letter-spacing: 1px; color: #0f8a55; } .cc span { flex: 1; color: var(--muted); } .cc.used { background: var(--soft); } .cc.used code { color: var(--muted); text-decoration: line-through; }
.club-hist { margin-top: 12px; font-size: 13px; } .club-hist summary { cursor: pointer; font-weight: 800; color: var(--muted); padding: 6px 0; }
.club-hist div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.club-hist b { color: #0f8a55; } .club-hist b.neg { color: var(--rose); } .club-hist small { color: var(--muted); }
.club-note { margin: 12px 0 0; font-size: 13px; }
.order-trk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin: 8px 0; border-radius: 14px; background: #eef4ff; color: #2d4f9e; font-size: 13px; }
.order-trk b { letter-spacing: .5px; }
@media (max-width: 760px) { .club { grid-template-columns: 1fr; } .club-bal b { font-size: 38px; } }
.cp-btn { border: 0; height: 28px; padding: 0 12px; border-radius: 9px; background: #fff; color: inherit; font-size: 12px; font-weight: 800; box-shadow: 0 2px 6px -3px rgba(43,16,48,.3); }
.co-items, .co-side, .co-ups { min-width: 0; }

/* ورود و ثبت‌نام تمام‌صفحه (بدون هدر و فوتر) */
.bare > main { display: flex; flex-direction: column; justify-content: center; padding-block: 20px 8px; }
.bare .auth2 { margin-top: 0; min-height: min(720px, calc(100dvh - 70px)); }
.a2-back { position: absolute; z-index: 3; top: clamp(16px, 2.4vw, 26px); inset-inline-start: clamp(16px, 2.4vw, 26px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 16px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); color: #fff; font-size: 13px; font-weight: 700; transition: background .3s, transform .4s var(--spring); }
.a2-back span { font-size: 16px; line-height: 1; transition: transform .4s var(--spring); }
.a2-back:hover { background: rgba(255,255,255,.22); } .a2-back:hover span { transform: translateX(4px); }
.a2-back:active { transform: scale(.95); }
.bare-credit { padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); }
@media (max-width: 860px) {
  .bare > main { justify-content: flex-start; padding: 0; }
  .bare .auth2 { margin: 0 -16px; min-height: 0; }
  .bare .a2-art { padding-top: calc(70px + env(safe-area-inset-top)); }
  .a2-back { top: calc(14px + env(safe-area-inset-top)); padding: 7px 12px 7px 14px; font-size: 12.5px; }
}

/* فراموشی رمز */
.a2-forgot { justify-self: start; margin-top: -6px; border: 0; background: none; padding: 2px 4px; font: inherit; font-size: 13px; font-weight: 700; color: var(--rose); cursor: pointer; }
.a2-forgot:hover { text-decoration: underline; text-underline-offset: 4px; }
.fg-head { display: grid; gap: 4px; }
.fg-head b { font-size: 18px; font-weight: 900; color: var(--plum); }
.fg-head p { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--muted); }
.fg-step2 { display: none; gap: 14px; }
.fg-form[data-step="2"] .fg-step2 { display: grid; animation: fadeUp .5s var(--ease); }
.fg-form[data-step="2"] #f-login { opacity: .65; }
.fg-code input { letter-spacing: .5em; font-weight: 800; font-size: 18px; text-align: center; }
.fg-resend { justify-self: start; border: 0; background: none; padding: 0 4px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--rose); cursor: pointer; }
.fg-resend:disabled { color: var(--muted); cursor: default; }
.auth2.fg-on .auth-tabs { display: none; }

/* =========================================================
   کپچای اختصاصی (ورود، ثبت‌نام، فراموشی رمز)
   ========================================================= */
.cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.cap-in input { letter-spacing: .35em; font-weight: 800; }
.cap-img { position: relative; width: 150px; min-height: 52px; padding: 0; border: 1.5px dashed #ecd2df; border-radius: 16px; background: #fff7fa; overflow: hidden; display: grid; place-items: center; transition: border-color .3s, transform .3s var(--spring); }
.cap-img:hover { border-color: var(--rose); } .cap-img:active { transform: scale(.96); }
.cap-svg { display: block; width: 100%; height: 100%; } .cap-svg svg { display: block; width: 100%; height: 100%; }
.cap-img i { position: absolute; bottom: 4px; left: 4px; width: 22px; height: 22px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--plum); box-shadow: 0 2px 6px rgba(43,16,48,.18); }
.cap-img i svg { width: 14px; height: 14px; }
.cap.ld .cap-img i svg { animation: spin .8s linear infinite; }
.cap.ld .cap-svg { opacity: .35; }
.fg-form[data-step="2"] .fg-step1 { display: none; }
@media (max-width: 400px) { .cap-img { width: 128px; } }

/* =========================================================
   پنل کاربری: هدر و فوتر مخصوص، منوی کناری (دسکتاپ) و تب‌های لغزان (موبایل)
   ========================================================= */
.bare.panel > main { display: block; padding: 0; }


.up-main { min-width: 0; display: grid; gap: 18px; }
.up-pane { display: grid; gap: 18px; align-content: start; animation: fadeUp .5s var(--ease); }
.up-pane[hidden] { display: none; }
.up-pane-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.up-pane-h h1, .up-hello h1 { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 900; }
.up-pane-h .btn svg { width: 18px; height: 18px; }
.up-note { margin: -8px 0 0; font-size: 13.5px; }
.up-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ust { display: grid; gap: 4px; padding: 16px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .35s var(--spring), box-shadow .3s; animation: fadeUp .5s var(--ease) both; }
.ust:nth-child(2) { animation-delay: .06s; } .ust:nth-child(3) { animation-delay: .12s; } .ust:nth-child(4) { animation-delay: .18s; }
a.ust:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -22px rgba(43,16,48,.5); }
.ust.gold { background: linear-gradient(135deg, #fff8ea, #fff); border-color: #f5e2bd; } .ust.gold b { color: #a86b00; }
.up-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.up-card { display: grid; gap: 12px; padding: 18px; border-radius: 26px; background: #fff; border: 1px solid var(--line); }
.up-card h2 { margin: 0; font-size: 17px; font-weight: 900; }
.up-card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.up-card-h a { font-size: 13px; font-weight: 800; color: var(--rose); }
.up-card .order { border: 0; padding: 0; }
.empty.sm { padding: 18px 6px; } .empty.sm .big { font-size: 34px; }
.up-filter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.up-filter::-webkit-scrollbar { display: none; }
.up-filter button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 800; font-size: 13.5px; transition: background .3s, color .3s; }
.up-filter button.on { background: var(--plum); border-color: var(--plum); color: #fff; }
.up-filter em { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 99px; background: var(--rose-soft); color: var(--rose); }
.up-filter .on em { background: rgba(255,255,255,.18); color: #fff; }
.up-main .orders { display: grid; gap: 12px; }
.up-main .order { background: #fff; }
.order-addr { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.8; }
.order-addr svg { width: 16px; height: 16px; flex: none; margin-top: 4px; }
/* مراحل سفارش */
.o-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.o-steps li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #b9a5b4; }
.o-steps li::before { content: ""; position: absolute; top: 6px; left: 50%; width: 100%; height: 3px; background: #f1e6ec; z-index: 0; }
.o-steps li:first-child::before { display: none; }
.o-steps li.on::before { background: linear-gradient(270deg, var(--rose), #b0216b); }
.o-steps i { position: relative; z-index: 1; width: 15px; height: 15px; border-radius: 50%; background: #f1e6ec; border: 3px solid #fff; box-shadow: 0 0 0 1px #eadbe3; }
.o-steps li.on { color: var(--plum); } .o-steps li.on i { background: var(--rose); box-shadow: 0 0 0 1px var(--rose); }
.o-steps li.cur i { animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot { 50% { box-shadow: 0 0 0 1px var(--rose), 0 0 0 6px rgba(227,48,109,.18); } }
.up-main .club { margin: 0; }

/* آدرس‌ها */
.addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.addr { position: relative; display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 22px; background: #fff; border: 1.5px solid var(--line); text-align: start; animation: fadeUp .45s var(--ease) both; }
.addr.def { border-color: #f3b8cc; background: linear-gradient(180deg, #fff6f9, #fff); }
.addr-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.addr-h b { display: flex; align-items: center; gap: 6px; font-weight: 900; } .addr-h svg { width: 18px; height: 18px; color: var(--rose); }
.addr-h em { font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: var(--rose); color: #fff; }
.addr p { margin: 0; font-size: 14px; line-height: 1.9; }
.addr-m { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.addr-a { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--line); }
.addr-a button { border: 0; background: var(--soft); padding: 7px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 800; }
.addr-a button:hover { background: var(--rose-soft); } .addr-a .rm { color: #c0243e; margin-inline-start: auto; background: none; }
.addr.add { place-items: center; place-content: center; min-height: 150px; border-style: dashed; border-color: #ecc9d8; background: #fffafc; color: var(--rose); cursor: pointer; transition: background .3s, transform .3s var(--spring); }
.addr.add span { font-size: 34px; line-height: 1; font-weight: 300; } .addr.add:hover { background: var(--rose-soft); } .addr.add:active { transform: scale(.97); }
.addr-sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(43,16,48,0); transition: background .3s; }
.addr-sheet.on { background: rgba(43,16,48,.45); }
body:has(.addr-sheet.on) .toast { bottom: auto; top: calc(18px + env(safe-area-inset-top)); transform: translate(-50%, -30px); } body:has(.addr-sheet.on) .toast.on { transform: translate(-50%, 0); }
.addr-form { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; display: grid; gap: 12px; padding: 22px; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -30px rgba(43,16,48,.6); transform: translateY(24px) scale(.97); opacity: 0; transition: transform .45s var(--spring), opacity .3s; }
.addr-sheet.on .addr-form { transform: none; opacity: 1; }
.addr-sheet-h { display: flex; justify-content: space-between; align-items: center; } .addr-sheet-h b { font-size: 18px; font-weight: 900; }
.addr-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.addr-def { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; } .addr-def input { width: 18px; height: 18px; accent-color: var(--rose); }
body.sheet-open { overflow: hidden; }

/* فوتر پنل */

@media (max-width: 860px) {
  /* منوی بخش‌ها روی موبایل: نوار لغزان افقی که بالای صفحه می‌چسبد */
  .up-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ust { padding: 14px; border-radius: 20px; } .ust b { font-size: 18px; }
  .up-grid2 { grid-template-columns: 1fr; }
  .up-card { padding: 16px; border-radius: 22px; }
  .addr-grid { grid-template-columns: 1fr; }
  .addr-sheet { place-items: end stretch; padding: 0; }
  .addr-form { width: 100%; border-radius: 28px 28px 0 0; max-height: 92dvh; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); opacity: 1; }
  .addr-2 { grid-template-columns: 1fr; }
}
/* خروج روی موبایل داخل «حساب من» */
@media (prefers-reduced-motion: reduce) { .up-pane, .ust, .addr, .o-steps li.cur i { animation: none; } }

/* سبد خرید: انتخاب آدرس ذخیره‌شده */
.co-addrs { display: grid; gap: 10px; }
.co-addr { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; transition: border-color .3s, background .3s, box-shadow .3s; }
.co-addr input { position: absolute; opacity: 0; pointer-events: none; }
.co-addr .tick { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 2px solid #e4cfda; display: grid; place-items: center; margin-top: 2px; transition: background .3s, border-color .3s, transform .4s var(--spring); }
.co-addr .tick::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .35s var(--spring); }
.co-addr.on { border-color: var(--rose); background: #fff7fa; box-shadow: 0 12px 26px -20px rgba(227,48,109,.8); }
.co-addr.on .tick { background: var(--rose); border-color: var(--rose); transform: scale(1.05); }
.co-addr.on .tick::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.co-addr input:focus-visible + .tick { outline: 2px solid var(--rose); outline-offset: 3px; }
.co-addr > span { display: grid; gap: 4px; min-width: 0; }
.co-addr b { font-weight: 900; font-size: 14.5px; } .co-addr b em { font-style: normal; font-size: 10.5px; padding: 2px 8px; border-radius: 99px; background: var(--rose-soft); color: var(--rose); margin-inline-start: 4px; }
.co-addr small { font-size: 13px; color: #5d4459; line-height: 1.8; } .co-addr small.who { color: var(--muted); font-size: 12px; }
.co-addr.new b { color: var(--rose); } .co-addr.new { border-style: dashed; }
.co-addrs:not(.all) .co-addr.more { display: none; }
.co-more { justify-self: center; padding: 8px 18px; border-radius: 99px; background: var(--rose-soft); color: var(--rose); font: inherit; font-size: 12.5px; font-weight: 800; border: 0; cursor: pointer; }
.co-addr-m { justify-self: start; font-size: 12.5px; font-weight: 800; color: var(--rose); padding: 2px 4px; }
.co-new { display: grid; gap: 12px; animation: fadeUp .45s var(--ease); }
.co-new[hidden] { display: none; }
.co-save { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; } .co-save input { width: 18px; height: 18px; accent-color: var(--rose); }

/* =========================================================
   پنل کاربری: هدر اختصاصی (پروفایل و امتیاز)، منوی چسبان بخش‌ها، فوتر اختصاصی
   ========================================================= */
.up { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #fff; }
.up-in { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: clamp(14px, 3vw, 28px); }
.up-hdr { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 14px 0 70px; border-radius: 0 0 38px 38px; background: linear-gradient(140deg, #340d38 0%, #571a5c 48%, #a2246f 100%); }
.up-hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.3px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.up-hdr-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.up-hdr-bg i { position: absolute; border-radius: 50%; will-change: transform; }
.up-hdr-bg i:nth-child(1) { width: 340px; height: 340px; top: -170px; left: -90px; background: radial-gradient(circle, rgba(255,92,147,.75), transparent 68%); animation: upFloat 14s ease-in-out infinite alternate; }
.up-hdr-bg i:nth-child(2) { width: 300px; height: 300px; bottom: -190px; right: 12%; background: radial-gradient(circle, rgba(140,70,255,.6), transparent 68%); animation: upFloat 17s ease-in-out -6s infinite alternate-reverse; }
.up-hdr-bg i:nth-child(3) { width: 180px; height: 180px; top: -40px; right: -50px; background: radial-gradient(circle, rgba(255,211,106,.45), transparent 68%); animation: upFloat 11s ease-in-out -3s infinite alternate; }
@keyframes upFloat { to { transform: translate3d(40px, 26px, 0) scale(1.12); } }
.up-top { display: flex; align-items: center; gap: 10px; }
.up-logo { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; font-weight: 900; font-size: 18px; }
.up-logo .logo-img { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
.up-logo .logo-img img { width: 40px; height: 40px; object-fit: contain; }
.up-logo .logo-text { white-space: nowrap; background: linear-gradient(90deg, #fff, #ffd9e6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.up-acts { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.up-btn { position: relative; height: 44px; min-width: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 15px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; transition: background .3s, transform .35s var(--spring); }
.up-btn:hover { background: rgba(255,255,255,.22); } .up-btn:active { transform: scale(.92); }
.up-btn svg { width: 20px; height: 20px; flex: none; }
.up-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.up-who { display: flex; align-items: center; gap: 16px; min-width: 0; animation: fadeUp .6s var(--ease) both; }
.up-who > div { min-width: 0; }
.up-av { flex: none; width: 74px; height: 74px; padding: 3px; border-radius: 50%; display: grid; background: conic-gradient(from 200deg, #ffd36a, #ff5c93, #b892ff, #ffd36a); box-shadow: 0 16px 34px -14px rgba(0,0,0,.6); }
.up-av b { display: grid; place-items: center; border-radius: 50%; border: 3px solid #4d1752; background: linear-gradient(135deg, #fff, #ffe3ee); color: var(--plum); font-size: 29px; font-weight: 900; }
.up-date { font-size: 12.5px; font-weight: 700; color: #ffd9a0; }
.up-who h1 { margin: 2px 0 4px; font-size: clamp(23px, 4vw, 32px); font-weight: 900; color: #fff; line-height: 1.3; }
.up-who h1 .wave { display: inline-block; width: .62em; height: .62em; color: #ffd36a; vertical-align: middle; animation: upTw 2.6s ease-in-out infinite; }
@keyframes upTw { 50% { transform: rotate(45deg) scale(1.25); opacity: .7; } }
.up-who p { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.75); }
.up-lv { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 3px 11px; border-radius: 99px; color: #4d3000; background: linear-gradient(135deg, #ffe7a8, #ffc45c); }
.up-pts { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 22px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s, transform .35s var(--spring); animation: fadeUp .6s var(--ease) .1s both; }
.up-pts:hover { background: rgba(255,255,255,.2); } .up-pts:active { transform: scale(.97); }
.up-pts svg { width: 30px; height: 30px; color: #ffd36a; }
.up-pts span { display: grid; } .up-pts b { font-size: 21px; font-weight: 900; line-height: 1.2; } .up-pts small { font-size: 11.5px; opacity: .75; }

.up-tabs { position: sticky; top: 0; z-index: 60; margin-top: -36px; padding: 8px 0; }
.up-nav { display: flex; gap: 6px; padding: 6px; border-radius: 24px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); box-shadow: 0 20px 44px -24px rgba(43,16,48,.55); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.up-nav::-webkit-scrollbar { display: none; }
.up-nav a { position: relative; flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 18px; color: #6b5468; font-weight: 800; font-size: 14px; white-space: nowrap; scroll-snap-align: center; transition: background .3s, color .3s; }
.up-nav a svg { width: 20px; height: 20px; flex: none; }
.up-nav a:hover { color: var(--plum); background: var(--soft); }
.up-nav a.on { color: #fff; background: linear-gradient(135deg, #340d38, #6b1f6c); box-shadow: 0 12px 24px -14px rgba(43,16,48,.9); }
.up-nav em { font-style: normal; font-size: 11px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--rose-soft); color: var(--rose); }
.up-nav em:empty { display: none; }
.up-nav a.on em { background: rgba(255,255,255,.18); color: #fff; }
.up-main { flex: 1 0 auto; padding-top: 14px; padding-bottom: 40px; }
.up-pane-h h2 { margin: 0; font-size: clamp(20px, 3vw, 26px); font-weight: 900; }
.ust i { width: 44px; height: 44px; margin-bottom: 6px; display: grid; place-items: center; border-radius: 15px; background: var(--rose-soft); color: var(--rose); }
.ust:nth-child(2) i { background: #efe6ff; color: #7a3cc4; } .ust:nth-child(3) i { background: #fff3dc; color: #b07300; } .ust:nth-child(4) i { background: #e3f6ee; color: #1f8a5b; }
.ust i svg { width: 22px; height: 22px; }
.ust b { font-size: 21px; font-weight: 900; } .ust span { font-size: 12.5px; color: var(--muted); }
.up-out { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 16px; border: 1px solid #f6d3da; background: #fff5f7; color: #c0243e; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.up-out svg { width: 19px; height: 19px; } .up-out:hover { background: #fde6ea; }

.up-ftr { margin-top: auto; padding: 28px 0 calc(18px + env(safe-area-inset-bottom)); border-radius: 38px 38px 0 0; color: #fff; background: linear-gradient(160deg, #2b0b2f 0%, #45144a 60%, #6b1d5e 100%); position: relative; overflow: hidden; isolation: isolate; }
.up-ftr::before { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; left: -140px; bottom: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,92,147,.4), transparent 68%); }
.up-help { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px; border-radius: 26px; background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.16); }
.up-help-ic { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(135deg, #ff6b9d, #e3306d); box-shadow: 0 12px 24px -12px rgba(255,92,147,.9); }
.up-help-ic svg { width: 24px; height: 24px; }
.up-help > div:nth-child(2) { display: grid; gap: 2px; } .up-help b { font-size: 16px; font-weight: 900; } .up-help small { font-size: 12.5px; color: rgba(255,255,255,.7); }
.up-help-acts { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.up-help-acts a { height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 15px; font-weight: 800; font-size: 13.5px; transition: transform .35s var(--spring), background .3s; }
.up-help-acts a:active { transform: scale(.95); }
.up-help-acts svg { width: 18px; height: 18px; }
.up-help-call { background: #fff; color: var(--plum); } .up-help-call svg { color: var(--rose); }
.up-help-msg { color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); } .up-help-msg:hover { background: rgba(255,255,255,.18); }
.up-ftr-grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 24px; margin: 26px 0 22px; }
.up-ftr nav { display: grid; gap: 9px; align-content: start; }
.up-ftr nav b { font-size: 13px; color: #ffd9a0; font-weight: 800; margin-bottom: 2px; }
.up-ftr nav a { width: fit-content; font-size: 14px; color: rgba(255,255,255,.78); transition: color .3s; } .up-ftr nav a:hover { color: #fff; }
.up-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.up-trust li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); font-size: 13px; font-weight: 700; }
.up-trust svg { width: 20px; height: 20px; flex: none; color: #ffd36a; }
.up-ftr .credit { margin: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; font-size: 12px; color: rgba(255,255,255,.6); }
.up-ftr .credit a { color: #fff; font-weight: 800; }

@media (max-width: 760px) {
  .up-hdr { padding: 12px 0 64px; border-radius: 0 0 32px 32px; }
  .up-btn { height: 42px; min-width: 42px; border-radius: 14px; }
  .up-shop { padding: 0; } .up-shop span { display: none; }
  .up-logo { font-size: 16px; } .up-logo .logo-img { width: 42px; height: 42px; border-radius: 14px; } .up-logo .logo-img img { width: 36px; height: 36px; }
  .up-hero { margin-top: 22px; gap: 14px; }
  .up-av { width: 62px; height: 62px; } .up-av b { font-size: 24px; }
  .up-pts { width: 100%; padding: 10px 14px; border-radius: 18px; }
  .up-pts span { grid-auto-flow: column; align-items: baseline; gap: 8px; justify-content: start; } .up-pts b { font-size: 18px; }
  .up-pts::after { content: "←"; margin-inline-start: auto; opacity: .7; }
  .up-tabs { margin-top: -34px; padding: 6px 0; }
  .up-nav { border-radius: 20px; padding: 5px; gap: 4px; }
  .up-nav a { padding: 10px 14px; border-radius: 15px; font-size: 13.5px; gap: 6px; }
  .up-nav a svg { width: 18px; height: 18px; }
  .ust { padding: 14px; border-radius: 20px; } .ust b { font-size: 18px; } .ust i { width: 40px; height: 40px; border-radius: 13px; }
  .up-ftr { border-radius: 30px 30px 0 0; padding-top: 22px; }
  .up-help-acts { width: 100%; } .up-help-acts a { flex: 1; }
  .up-ftr-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .up-trust { grid-column: 1 / -1; }
  body.panel .chat-w { bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@media (max-width: 370px) { .up-logo .logo-text { display: none; } }
@media (prefers-reduced-motion: reduce) { .up-hdr-bg i, .up-who h1 .wave, .up-who, .up-pts { animation: none; } }

/* باشگاه: قوانین، کدها و بخش دعوت دوستان */
.club-intro, .club-how, .club-hist, .club-note { grid-column: 1 / -1; }
.club-skel { display: contents; }
.club-intro { margin: 0; padding: 14px 18px; border-radius: 20px; background: linear-gradient(135deg, #fff4f8, #f6efff); color: #5d4459; font-size: 14px; line-height: 1.9; }
.club-lv { display: inline-flex; align-items: center; gap: 6px; } .club-lv svg { width: 16px; height: 16px; color: #ffd36a; } .club-lv b { color: #ffd36a; }
.club-h3 { margin: 16px 0 8px; font-size: 15px; font-weight: 900; }
.tier em { display: block; margin-top: 4px; font-style: normal; font-size: 11px; color: var(--muted); }
.club-how { padding: 18px; border-radius: 26px; border: 1px solid var(--line); background: #fff; }
.club-how .club-h3 { margin-top: 0; }
.club-how ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.club-how li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.9; color: #4a3247; }
.club-how li svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 12px; background: var(--rose-soft); color: var(--rose); }
.club-how li a { color: var(--rose); font-weight: 800; }
.inv-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 16px; padding: 24px; border-radius: 30px; color: #fff; background: linear-gradient(140deg, #340d38, #6b1f6c 55%, #c22a73); box-shadow: 0 30px 60px -40px rgba(43,16,48,.9); }
.inv-hero::after { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; border-radius: 50%; left: -120px; bottom: -160px; background: radial-gradient(circle, rgba(255,211,106,.35), transparent 68%); }
.inv-art { position: absolute; inset-inline-end: 20px; top: 18px; width: 86px; height: 86px; z-index: -1; }
.inv-art span { position: absolute; inset: 10px; display: grid; place-items: center; border-radius: 24px; background: rgba(255,255,255,.14); transform: rotate(-8deg); animation: invBob 3.2s ease-in-out infinite; }
.inv-art span svg { width: 36px; height: 36px; color: #ffd36a; }
.inv-art i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffd36a; animation: upTw 2.4s ease-in-out infinite; } .inv-art i:nth-child(2) { top: 0; left: 6px; } .inv-art i:nth-child(3) { bottom: 4px; right: -4px; background: #ff8fb6; animation-delay: .8s; } .inv-art i:nth-child(4) { top: 30px; left: -10px; width: 5px; height: 5px; animation-delay: 1.4s; }
@keyframes invBob { 50% { transform: rotate(6deg) translateY(-6px); } }
.inv-txt { max-width: 560px; padding-inline-end: 90px; } .inv-txt h3 { margin: 0 0 6px; font-size: clamp(20px, 3vw, 26px); font-weight: 900; } .inv-txt p { margin: 0; font-size: 14px; line-height: 2; color: rgba(255,255,255,.85); } .inv-txt b { color: #ffd36a; }
.inv-link { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-url { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 14px; border-radius: 16px; background: #fff; color: var(--plum); }
.inv-url svg { width: 20px; height: 20px; flex: none; color: var(--rose); }
.inv-url input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--plum); outline: 0; text-overflow: ellipsis; }
.inv-link .btn { height: 50px; display: inline-flex; align-items: center; gap: 8px; } .inv-link .btn svg { width: 19px; height: 19px; }
.inv-link .btn.done { background: #12a36a; }
.inv-share { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-share a, .inv-share button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .3s; }
.inv-share a:hover, .inv-share button:hover { background: rgba(255,255,255,.2); } .inv-share svg { width: 17px; height: 17px; }
.inv-share [hidden] { display: none; }
.inv-code { font-size: 12.5px; color: rgba(255,255,255,.7); } .inv-code b { color: #fff; letter-spacing: 1px; }
.inv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.inv-steps li { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.inv-steps b { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #ff6b9d, #e3306d); color: #fff; font-weight: 900; }
.inv-list { display: grid; gap: 8px; }
.inv-list > div { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--soft); }
.inv-list > div > span:nth-child(2) { display: grid; font-weight: 800; font-size: 14px; } .inv-list small { font-weight: 500; font-size: 12px; color: var(--muted); }
.inv-list em { margin-inline-start: auto; font-style: normal; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: #fff3dc; color: #a86b00; } .inv-list em.ok { background: #e3f6ee; color: #12805a; }
.up-av.sm { width: 40px; height: 40px; padding: 2px; box-shadow: none; } .up-av.sm b { border-width: 2px; border-color: #fff; font-size: 16px; }
#invite { display: grid; gap: 16px; }
@media (max-width: 760px) {
  .inv-hero { padding: 20px 16px; border-radius: 26px; }
  .inv-art { width: 64px; height: 64px; inset-inline-end: 12px; top: 12px; } .inv-art span svg { width: 28px; height: 28px; }
  .inv-txt { padding-inline-end: 64px; }
  .inv-link .btn { flex: 1; justify-content: center; }
  .inv-share a, .inv-share button { flex: 1; justify-content: center; padding: 0 10px; }
  .inv-stats .ust { padding: 12px; } .inv-stats .ust b { font-size: 17px; } .inv-stats .ust span { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .inv-art span, .inv-art i { animation: none; } }

/* =========================================================
   لودینگ اسکلتی: عکس‌ها، نتایج فیلتر فروشگاه، جستجو، پنل‌ها
   ========================================================= */
@keyframes skelSweep { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.img-wait { background-image: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 70%) !important; background-size: 220% 100% !important; background-repeat: no-repeat !important; animation: skelSweep 1.15s linear infinite !important; }
.img-wait > img { opacity: 0; }
main img, #search-res img, #ups img { transition: opacity .4s ease; }
/* نتایج فروشگاه هنگام فیلتر: کارت‌ها به اسکلت تبدیل می‌شوند */
.shop-res.loading { opacity: 1; }
.shop-res.loading .pc { position: relative; overflow: hidden; border-color: transparent; background: #f5eef2; }
.shop-res.loading .pc > * { visibility: hidden; }
.shop-res.loading .pc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 70%); background-size: 220% 100%; animation: skelSweep 1.15s linear infinite; }
.shop-res.loading .pc::before { content: ""; position: absolute; z-index: 1; inset: auto 14px 18px 14px; height: 46px; border-radius: 12px; background: repeating-linear-gradient(180deg, #ecdfe6 0 12px, transparent 12px 20px); opacity: .9; }
/* جستجو */
.sr-skel { display: grid; gap: 10px; }
.sr-skel i { display: block; height: 68px; border-radius: 18px; background: linear-gradient(90deg, #f5eef2 25%, #fbf7f9 50%, #f5eef2 75%); background-size: 200% 100%; animation: skel 1.3s linear infinite; }
.sr-skel i:nth-child(2) { opacity: .75; } .sr-skel i:nth-child(3) { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .img-wait, .shop-res.loading .pc::after, .sr-skel i { animation: none !important; } }
#r-ref { text-transform: uppercase; letter-spacing: .08em; }

/* ---------- پرداخت کارت به کارت ---------- */
.c2c { margin: 4px 0 14px; display: grid; gap: 10px; animation: c2cIn .45s var(--ease); }
@keyframes c2cIn { from { opacity: 0; transform: translateY(-8px); } }
.c2c-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; padding: 18px 18px 14px; color: #fff; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(120% 140% at 100% 0%, #ff6b9d 0%, #e3306d 32%, #7a1f4f 66%, #2b1030 100%); box-shadow: 0 22px 40px -22px rgba(227,48,109,.75); }
.c2c-card::before, .c2c-card::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; background: rgba(255,255,255,.09); }
.c2c-card::before { width: 210px; height: 210px; top: -110px; left: -60px; }
.c2c-card::after { width: 150px; height: 150px; bottom: -80px; left: 70px; background: rgba(255,255,255,.06); }
.c2c-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c2c-top b { font-size: 15px; font-weight: 800; }
.c2c-chip { width: 40px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #f6d28b, #d9a35f); color: #6b4317; }
.c2c-chip svg { width: 20px; height: 20px; }
.c2c-num { display: flex; justify-content: space-between; gap: 6px; font-size: clamp(19px, 5.6vw, 25px); font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0,0,0,.18); margin: 16px 0 12px; }
.c2c-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: rgba(255,255,255,.85); }
.c2c-foot b { color: #fff; }
.c2c-cp { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 13px; font-size: 12.5px; font-weight: 800; background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(6px); transition: transform .2s var(--spring), background .2s; white-space: nowrap; }
.c2c-cp svg { width: 16px; height: 16px; }
.c2c-cp em { font-style: normal; }
.c2c-cp:active { transform: scale(.94); }
.c2c-cp.ok { background: #1f9d63 !important; color: #fff !important; }
.c2c-cp.sm { background: var(--rose-soft); color: var(--rose); padding: 7px 11px; }
.c2c-row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); }
.c2c-lb { font-size: 12px; color: var(--muted); font-weight: 700; flex-shrink: 0; }
.c2c-v { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; text-align: left; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.c2c-row.amt { background: #fff7fa; border-color: #f8cddd; }
.c2c-row.amt .c2c-v { color: var(--rose); font-size: 15px; text-align: right; }
.c2c-note { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--muted); padding: 0 4px; }
.c2c-proof { display: grid; gap: 10px; padding: 14px; border-radius: 20px; border: 1.5px dashed #f2b8cc; background: #fffafc; transition: border-color .3s, background .3s; }
.c2c.done .c2c-proof { border-style: solid; border-color: #9edbbd; background: #f5fcf8; }
.c2c-proof.shake { animation: shake .45s; border-color: var(--rose); }
.c2c-h { font-size: 13.5px; }
.c2c-up { position: relative; overflow: hidden; display: block; border-radius: 16px; background: #fff; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.c2c-up:hover { border-color: #f2b8cc; box-shadow: 0 10px 22px -18px rgba(227,48,109,.8); }
.c2c-up-in, .c2c-prev { display: flex; align-items: center; gap: 12px; padding: 12px; }
.c2c-up-in[hidden], .c2c-prev[hidden] { display: none; }
.c2c-up-in i { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #ff6b9d, #e3306d); color: #fff; }
.c2c-up-in i svg { width: 22px; height: 22px; }
.c2c-up b, .c2c-up small { display: block; } .c2c-up small { font-size: 12px; color: var(--muted); margin-top: 2px; }
.c2c-prev img { width: 52px; height: 52px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); flex-shrink: 0; }
.c2c-prev > span { flex: 1; min-width: 0; } .c2c-prev b { color: #1f9d63; }
.c2c-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--soft); display: grid; place-items: center; color: var(--muted); }
.c2c-x svg { width: 16px; height: 16px; }
.c2c-bar { position: absolute; inset: auto 0 0 0; height: 3px; overflow: hidden; opacity: 0; }
.c2c-bar u { position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--rose); border-radius: 3px; }
.c2c-up.busy { pointer-events: none; } .c2c-up.busy .c2c-bar { opacity: 1; } .c2c-up.busy .c2c-bar u { animation: c2cBar 1s linear infinite; }
.c2c-up.busy .c2c-up-in { opacity: .55; }
@keyframes c2cBar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.c2c-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.c2c-or::before, .c2c-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.c2c-proof .field { margin: 0; }
.c2c-ref { letter-spacing: .08em; font-weight: 800; font-variant-numeric: tabular-nums; text-align: left; }
.c2c-ref::placeholder { letter-spacing: 0; font-weight: 400; text-align: right; }
.c2c-ref.warn { border-color: #e9a23b; box-shadow: 0 0 0 3px rgba(233,162,59,.18); }
.co-wait { max-width: 420px; margin: 0 auto 18px; padding: 12px 16px; border-radius: 16px; background: #fff7e9; color: #8a5a12; font-size: 13.5px; line-height: 1.9; }
/* وضعیت پرداخت در پنل کاربر */
.st.review { background: #fff4de; color: #a8650c; }
.order-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--soft); font-size: 12.5px; color: var(--muted); }
.order-pay b { color: var(--plum); } .order-pay a { color: var(--rose); font-weight: 700; }
.c2c { scroll-margin-top: calc(var(--hdr-h) + 16px); }
.c2c-proof { scroll-margin-top: calc(var(--hdr-h) + 16px); }
@media (max-width: 520px) {
  .c2c-row:not(.amt) { flex-wrap: wrap; row-gap: 6px; }
  .c2c-row:not(.amt) .c2c-lb { flex: 1; }
  .c2c-row:not(.amt) .c2c-v { order: 3; flex-basis: 100%; font-size: 14px; letter-spacing: .02em; }
}
.b1 .cp-code::after { color: var(--plum); background-image: linear-gradient(110deg, #e9c46a 20%, #fff4cf 42%, #e9c46a 60%, #c9973a 85%); }

/* ===== studio look (2026-10): softer light, glass chips, podium, richer tiles ===== */
.hero-blob { width: min(88%, 460px); border-radius: 50%; animation: none; opacity: 1;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--accent) 38%, #fff) 0, color-mix(in srgb, var(--accent) 16%, #fff) 42%, color-mix(in srgb, var(--accent) 0%, transparent) 70%); }
.hero-blob::before { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero-blob::before { inset: 9%; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 0 0 26px color-mix(in srgb, #fff 35%, transparent), inset 0 0 40px rgba(255,255,255,.7); }
.hero-blob::after { display: none; }
.hero-prod { width: min(74%, 400px); }
.hero-prod img { filter: drop-shadow(0 22px 24px rgba(59,24,64,.18)); }
.hero-chip { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 18px 36px -18px rgba(59,24,64,.35), inset 0 1px 0 #fff; }
.tile { background: radial-gradient(110% 80% at 80% 100%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%), linear-gradient(155deg, var(--tone), color-mix(in srgb, var(--tone) 55%, #fff)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.45), 0 16px 34px -24px rgba(59,24,64,.45); }
.tile.all { background: radial-gradient(120% 90% at 20% 0%, #5a2a62, var(--plum) 60%); }
.tile .go { box-shadow: 0 8px 16px -8px rgba(43,16,48,.6); }
@media (prefers-reduced-motion: reduce) { .hero-blob { transition: none; } }
.pc .box { background: radial-gradient(90% 70% at 50% 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%), linear-gradient(180deg, color-mix(in srgb, var(--tone, var(--soft)) 70%, #fff), var(--tone, var(--soft))); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.pc .box img { width: 80%; height: 80%; filter: none; }
/* mobile menu: no raw scrollbars, soft fade at the scroll edges, scroll stays inside the menu */
.mm-rail, .mm-panes { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); }
.mm-panes::-webkit-scrollbar { display: none; }
body.menu-open { overflow: hidden; }
.mm-links { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; overflow: visible; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
.mm-links a { padding: 9px 4px; text-align: center; font-size: 12.5px; white-space: nowrap; }