/* =====================================================================
   store.base.css — عیناً از فایل طراحی خودتان (store.css) گرفته شده.
   تنها تغییر: دامنه‌ی توکن‌ها از :root به .store منتقل شده تا پنل مدیریت
   (که کلاس .hm دارد) دست‌نخورده بماند — طبق CLAUDE.md فولدر طراحی.
   ===================================================================== */

a{transition:color .15s ease}
/* ⚠️ هاور سراسریِ لینک فقط برای لینک‌های متنیِ بی‌کلاس. قبلاً روی هر <a> بود و
   هر دکمه/کارتی که با <a> ساخته شده بود (متن سفید روی سبز، کارت محصول،
   کاشی دسته) با هاور سبزِ تیره و زیرخط می‌گرفت — «هاورها درست نیست». */
a:where(:not([class])):hover{color:var(--brand7)}
button{transition:background .15s ease,color .15s ease,border-color .15s ease}
button:not(:disabled):hover{filter:brightness(.97)}
button:not(:disabled):active{filter:brightness(.94)}

/* ── حالت‌های هاور دکمه‌ها، مطابق کتابخانه‌ی کامپوننت طرح ──────────────
   دکمه‌های فروشگاه با استایل درون‌خطی نوشته شده‌اند (عین طرح)، پس هاورشان
   با انتخاب‌گرِ همان استایل درون‌خطی سوار می‌شود:
   • اصلی (پس‌زمینه‌ی برند) → var(--brand7)؛ همان چیزی که طرح در
     .hh-hero-cta و «افزودن سریع» کارت هم دارد.
   • ثانویه (قاب bd2/brand، پس‌زمینه‌ی شفاف) → قاب و متن برند؛ همان الگوی
     تراشه‌ها و صفحه‌بندی طرح.
   بدون این‌ها، لینک‌های دکمه‌نما هیچ بازخورد هاوری نداشتند («دکمه‌ها
   فاجعه است»). */
.store a[style*="background:var(--brand)"]:hover,
.store button[style*="background:var(--brand)"]:not(:disabled):hover{background:var(--brand7)!important;color:#fff}
.store a[style*="background:var(--sale)"]:hover,
.store button[style*="background:var(--sale)"]:not(:disabled):hover{filter:brightness(.92)}
.store a[style*="background:var(--dang)"]:hover,
.store button[style*="background:var(--dang)"]:not(:disabled):hover{filter:brightness(.92)}
.store a[style*="border:1px solid var(--bd2)"][style*="background:transparent"]:hover,
.store button[style*="border:1px solid var(--bd2)"][style*="background:transparent"]:not(:disabled):hover{border-color:var(--brand)!important;color:var(--brand7)!important}
.store a[style*="border:1px solid var(--brand)"][style*="background:transparent"]:hover,
.store button[style*="border:1px solid var(--brand)"][style*="background:transparent"]:not(:disabled):hover{background:var(--brand05)!important}
input,textarea,select{transition:border-color .15s ease}
img{content-visibility:auto}
input:focus,textarea:focus,select:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px var(--brand05)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes softPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes mBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes mBlink{0%,90%,96%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}}
@keyframes mPop{0%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.1,.86) rotate(-3deg)}52%{transform:scale(.94,1.08) rotate(2.5deg)}76%{transform:scale(1.03,.97) rotate(-1deg)}100%{transform:scale(1) rotate(0deg)}}
@keyframes mWig{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-4deg)}70%{transform:rotate(4deg)}}
@keyframes mSway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(-4.5deg)}}
@keyframes mSigh{0%,100%{transform:scaleY(1)}55%{transform:scaleY(.965)}}
@keyframes mTear{0%{transform:translateY(0) scale(.3);opacity:0}18%{transform:translateY(1px) scale(.8);opacity:1}60%{transform:translateY(8px) scale(1);opacity:.95}85%{transform:translateY(15px) scale(1.05);opacity:0}100%{transform:translateY(15px) scale(.3);opacity:0}}
@keyframes mJoy{0%,100%{transform:translateY(0) scale(1)}12%{transform:translateY(1px) scale(1.05,.93)}30%{transform:translateY(-4px) scale(.97,1.05)}45%{transform:translateY(0) scale(1.02,.98)}58%{transform:translateY(0) scale(1)}}
@keyframes mConf{0%,100%{transform:translateY(0);opacity:.95}50%{transform:translateY(-4px);opacity:.45}}
[data-anim="off"],[data-anim="off"] *{animation:none!important}
.store{
--brand:#2F7C72;--brand-vivid:#3DA194;--brand7:#276B62;--brand8:#2A6D64;--brand9:#123B36;--brand5:#5FB5AA;--brand3:#9CD3CB;--brand1:#DDF0ED;--brand05:#F1F9F8;
--n0:#FFFFFF;--n25:#FCFBF8;--n50:#F7F4EE;--n100:#F0EBE2;--n200:#E4DED2;--n300:#CCC4B5;--n400:#A69C8B;--n500:#7C7365;--n600:#5C554B;--n700:#3E3A33;--n900:#1B1917;
--ok:#1E7A4C;--ok50:#E9F6EF;--warn:#9A6413;--warn50:#FBF2E3;--dang:#C0362C;--dang50:#FBECE9;--info:#2C5AA0;--info50:#EDF0F7;--sale:#C0362C;--sale50:#FAEEEA;--gold:#917226;--gold-vivid:#A8842C;
--page:#FFFFFF;--surf:#FFFFFF;--surf2:#F7F4EE;--bd:#EFEAE1;--bd2:#E4DED2;--tx:#1B1917;--tx2:#5C554B;--mut:#6B6255;
--r-sm:8px;--r-md:14px;--r-lg:18px;--r-pill:999px;
--sh-xs:0 1px 2px rgba(40,30,16,.05);--sh-sm:0 2px 10px rgba(40,30,16,.06);--sh-md:0 8px 24px rgba(40,30,16,.07);--sh-lg:0 16px 40px rgba(40,30,16,.10);--sh-up:0 -8px 24px rgba(40,30,16,.07);
}
.store[data-theme="dark"]{--page:#121110;--surf:#1A1917;--surf2:#22201D;--bd:#2E2B27;--bd2:#3D3933;--tx:#F4F2EF;--tx2:#ADA79E;--mut:#8E877D;--brand:#3E9A75;--brand7:#4FB187;--brand05:#17241E;--brand1:#1E3A2E;--n0:#1A1917;--n25:#181614;--n50:#22201D;--n100:#2E2B27;--n200:#3D3933;--n300:#5A554D;--n400:#736D64;--sale:#E4675C;--ok:#43A776;--dang:#E4675C;--warn:#D0954A;--sale50:#2A1D1B;--ok50:#16281F;--warn50:#2A2318;--info50:#1A1F2A;--dang50:#2A1D1B;}
*{box-sizing:border-box}
.store{margin:0;font-family:Lahzeh,Vazirmatn,system-ui,Tahoma,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 0}
img{display:block;max-width:100%}
button{font-family:inherit}
a{color:var(--brand);text-decoration:none}
a:where(:not([class])):hover{color:var(--brand7);text-decoration:underline}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#CCC4B5;border-radius:0}
::-webkit-scrollbar-track{background:transparent}
.noscroll::-webkit-scrollbar{display:none}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(61,161,148,.35)}70%{box-shadow:0 0 0 8px rgba(61,161,148,0)}100%{box-shadow:0 0 0 0 rgba(61,161,148,0)}}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ── شخصیت تیشرت همهمه (صفحه‌ی ورود) ─────────────────────────────────
   عیناً کی‌فریم‌های فایل طرح. mBob تنفسِ آرام، mBlink پلک‌زدن،
   mPop جهش موقع بالا آوردن دست‌ها، mWig تکان دادن دست‌ها.
   ⚠️ data-anim="off" همه را خاموش می‌کند — همان قلاب طرح، و همان چیزی
   که prefers-reduced-motion لازم دارد. */
@keyframes hhMBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2.5px) } }
@keyframes hhMBlink { 0%, 90%, 96%, 100% { transform: scaleY(1) } 93% { transform: scaleY(.08) } }
@keyframes hhMPop {
  0% { transform: scale(1) rotate(0deg) }
  25% { transform: scale(1.1, .86) rotate(-3deg) }
  52% { transform: scale(.94, 1.08) rotate(2.5deg) }
  76% { transform: scale(1.03, .97) rotate(-1deg) }
  100% { transform: scale(1) rotate(0deg) }
}
@keyframes hhMWig { 0%, 100% { transform: rotate(0deg) } 30% { transform: rotate(-4deg) } 70% { transform: rotate(4deg) } }

.hh-mascot { margin: 0 auto 12px; display: block }
.hh-mascot__body { animation: hhMBob 3.4s ease-in-out infinite; transform-origin: 60px 56px }
.hh-mascot__eyes { animation: hhMBlink 4.6s ease-in-out 1.2s infinite; transform-origin: 60px 49px; transition: opacity .12s ease }
.hh-mascot__lids, .hh-mascot__smile { transition: opacity .12s ease }
.hh-mascot__hands {
  opacity: 0; transform: translateY(24px) scale(.55); transform-origin: 60px 52px;
  transition: opacity .28s ease, transform .5s cubic-bezier(.3, 1.65, .5, 1);
}
.hh-mascot__lids, .hh-mascot__blush { opacity: 0 }

/* حالت «چشم‌هایش را گرفته» */
.hh-mascot.is-covering .hh-mascot__pop { animation: hhMPop .6s ease both; transform-origin: 60px 54px }
.hh-mascot.is-covering .hh-mascot__eyes,
.hh-mascot.is-covering .hh-mascot__smile { opacity: 0 }
.hh-mascot.is-covering .hh-mascot__lids,
.hh-mascot.is-covering .hh-mascot__blush { opacity: 1 }
.hh-mascot.is-covering .hh-mascot__hands { opacity: 1; transform: translateY(0) scale(1) }
.hh-mascot.is-covering .hh-mascot__hand-a { animation: hhMWig 2.4s ease-in-out .7s infinite; transform-origin: 53px 49px }
.hh-mascot.is-covering .hh-mascot__hand-b { animation: hhMWig 2.4s ease-in-out 1.9s infinite; transform-origin: 67px 49px }

.hh-mascot[data-anim="off"], .hh-mascot[data-anim="off"] * { animation: none !important }
@media (prefers-reduced-motion: reduce) {
  .hh-mascot, .hh-mascot * { animation: none !important; transition: none !important }
}