/* ============================================================
   توکن‌های سراسری
   ------------------------------------------------------------
   روی :root تعریف شده‌اند، نه روی یک کلاس صفحه.
   قبلاً داخل .tb-home بودند و کارت محصول که همان متغیرها را
   استفاده می‌کند، در صفحه‌ی فروشگاه (.tb-shop) با متغیر
   تعریف‌نشده روبه‌رو می‌شد؛ کل اعلان بی‌اعتبار می‌شد و رنگ به
   پیش‌فرض قالب (صورتی) برمی‌گشت.
   ============================================================ */
:root {
  --w:        #722F37;
  --w-deep:   #4E1F26;
  --w-soft:   #8A3A43;
  --w-tint:   #FBF4F5;
  --cream:    #FDFBF8;
  --cream-2:  #FDFBF8;
  --gold:     #EFDFBB;
  --ink:      #1A1A1A;
  --ink-2:    #55504A;
  --ink-3:    #8C867D;
  --line:     #EFE7DA;
}

/* ============================================================
   تاس بریز — هدر و فوتر
   یک مارک‌آپ واکنش‌گرا به‌جای سه نسخه‌ی جدا برای هر بریک‌پوینت
   ============================================================ */

.tb-header,
.tb-footer,
.tb-bottombar {
  --w:        #722F37;
  --w-deep:   #4E1F26;
  --w-tint:   #FBF4F5;
  /* همان کرمِ ملایمِ فیلدهای سبد خرید و تسویه حساب.
     قبلاً #FAF6EF بود که کنار کارت‌های سفید زیادی زرد می‌زد. */
  --cream:    #FDFBF8;
  --cream-2:  #FDFBF8;
  --ink:      #1A1A1A;
  --ink-2:    #55504A;
  --ink-3:    #8C867D;
  --line:     #EFE7DA;
  --glass:    rgba(255,255,255,.78);
  --blur:     saturate(180%) blur(20px);

  font-family: 'Vazirmatn', 'YekanBakh', Tahoma, sans-serif;
  font-feature-settings: 'ss01', 'tnum';
  box-sizing: border-box;
}
.tb-header *, .tb-footer *, .tb-bottombar * { box-sizing: border-box; }

/* ════════════════════ هدر ════════════════════ */
.tb-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
}
/* جبران نوار مدیریت وردپرس.
   ۷۸۳px به بالا: نوار ۳۲ پیکسل و fixed
   ۶۰۱ تا ۷۸۲:    نوار ۴۶ پیکسل و fixed
   ۶۰۰ و کمتر:    وردپرس نوار را absolute می‌کند (با اسکرول از
                  صفحه بیرون می‌رود)، پس هدر باید به خودِ لبه
                  بچسبد. بدون این قانون، هدر ۴۶ پیکسل پایین‌تر
                  می‌ماند و «روی هوا» دیده می‌شود.
   فقط برای کاربران وارد‌شده اثر دارد؛ مشتری عادی نوار مدیریت
   ندارد و هیچ‌وقت این را نمی‌دید.                            */
.admin-bar .tb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tb-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .tb-header { top: 0; } }

.tb-header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* لوگو */
.tb-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.tb-logo img { height: 54px; width: auto; display: block; flex: 0 0 auto; }
/* نام سایت کنار لوگو — در RTL سمت چپِ تصویر می‌افتد */
.tb-logo-text {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.7;
  color: var(--w);
  white-space: nowrap;
  letter-spacing: -.2px;
}

/* ناوبری — وسطِ همان ردیف اصلی */
.tb-nav {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.tb-nav a {
  display: block;
  padding: 9px 14px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.tb-nav .current-menu-item > a,
.tb-nav .current_page_item > a { color: var(--w); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .tb-nav a:hover { background: var(--w-tint); color: var(--w); }
}

/* دکمه‌های سمت چپ.
   margin-inline-start: auto لازم است چون در موبایل .tb-nav
   (که flex: 1 دارد) پنهان می‌شود و بدون آن، دکمه‌ها به لوگو
   می‌چسبیدند به‌جای اینکه به لبه‌ی چپ بروند. */
.tb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-inline-start: auto;
}
.tb-icon-btn {
  position: relative;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.7);
  color: var(--ink-2);
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
/* flex-shrink باعث می‌شد SVG داخل دکمه له شود (عرض ۴ پیکسل
   به‌جای ۲۱). عرض و ارتفاع بدون flex: 0 0 auto کافی نیست.  */
.tb-icon-btn svg {
  width: 21px; height: 21px;
  flex: 0 0 auto;
}
@media (hover: hover) and (pointer: fine) {
  .tb-icon-btn:hover { background: var(--w-tint); border-color: var(--w); color: var(--w); }
}
/* ── نوار جستجوی بازشونده ──────────────────────────────────
   بدون جاوااسکریپت باز می‌ماند؛ کلاس tb-js روی <html> است که
   جمعش می‌کند، پس کاربر بدون JS هم جستجو دارد.            */
.tb-searchbar {
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.5);
}
.tb-searchbar-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 16px;
}
.tb-js .tb-searchbar {
  max-height: 0;
  overflow: hidden;
  border-top-color: transparent;
  transition: max-height .3s cubic-bezier(.32,.72,0,1), border-color .3s;
}
.tb-js .tb-searchbar.open {
  max-height: 140px;
  border-top-color: var(--line);
}
.tb-search-toggle[aria-expanded="true"] {
  background: var(--w);
  border-color: var(--w);
  color: #fff;
}

.tb-cart-count {
  position: absolute;
  top: -6px;
  inset-inline-start: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--w);
  color: #fff;
  font-size: 11px; font-weight: 700;
  border: 2px solid #fff;
}

/* ════════════════════ نوار پایین موبایل ════════════════════ */
.tb-bottombar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 890;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-top: 1px solid var(--line);
}
.tb-bottombar ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
}
.tb-bottombar a {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 4px;
  padding: 8px 2px 7px;
  font-size: 10.5px; font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  text-align: center;
  line-height: 1.5;
  transition: color .2s;
}
.tb-bottombar svg { width: 21px; height: 21px; }
.tb-bottombar a.is-active { color: var(--w); }
.tb-bottombar .tb-cart-count {
  top: 2px;
  inset-inline-start: calc(50% + 3px);
  min-width: 17px; height: 17px;
  font-size: 10px;
}

/* خانه — لوگوی دایره‌ای کمی بیرون‌زده */
.tb-bb-home { position: relative; }
.tb-bb-home a { padding-top: 0; }
.tb-bb-logo {
  width: 52px; height: 52px;
  margin-top: -18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--cream-2);
  box-shadow: 0 5px 16px -5px rgba(114,47,55,.35);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.32,.72,0,1);
}
.tb-bb-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 5px;
}
.tb-bb-logo svg { width: 24px; height: 24px; color: var(--w); }
.tb-bb-home a.is-active .tb-bb-logo {
  border-color: var(--w-tint);
  box-shadow: 0 6px 18px -4px rgba(114,47,55,.5);
}
.tb-bb-home a:active .tb-bb-logo { transform: scale(.94); }

/* ════════════════════ فوتر ════════════════════ */
.tb-footer {
  margin-top: 56px;
  background: var(--cream);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.tb-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 16px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.tb-fcol h3 {
  margin: 0 0 16px;
  padding-inline-start: 12px;
  font-size: 15px; font-weight: 800;
  color: var(--ink);
  line-height: 1.9;
  border-inline-start: 3px solid var(--w);
}
.tb-fcol p, .tb-fcol li { font-size: 13.5px; line-height: 2.1; margin: 0; }
.tb-fcol ul { list-style: none; margin: 0; padding: 0; }
.tb-fcol a { color: var(--ink-2); text-decoration: none; transition: color .2s; }
@media (hover: hover) and (pointer: fine) { .tb-fcol a:hover { color: var(--w); } }

.tb-contact-item { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.tb-contact-item svg { width: 18px; height: 18px; color: var(--w); flex-shrink: 0; }
.tb-contact-item span { direction: ltr; unicode-bidi: embed; }

.tb-socials { display: flex; gap: 10px; flex-wrap: wrap; }
/* هاور فقط رنگ و حاشیه را عوض می‌کند، نه پُر شدن کل مربع.
   نسخه‌ی قبلی روی هاور تمام دکمه شرابی می‌شد و شبیه یک بلوک
   توپُر بدون آیکون دیده می‌شد.                                */
.tb-social {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--ink-2);
  transition: color .2s, border-color .2s, transform .18s;
}
.tb-social svg { width: 20px; height: 20px; display: block; }
@media (hover: hover) and (pointer: fine) {
  .tb-social:hover {
    color: var(--w);
    border-color: var(--w);
    transform: translateY(-2px);
  }
}

/* نمادها: شبکه‌ی دو ستونه تا چهار نماد مرتب بنشینند */
.tb-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  max-width: 240px;
}
.tb-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 74px;
  transition: border-color .2s, transform .18s;
}
.tb-badge img,
.tb-badge a img {
  max-width: 100%;
  max-height: 58px;
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}
.tb-badge a { display: flex; align-items: center; justify-content: center; }
/* تا وقتی لوگوی درگاه آپلود نشده، نامش را نشان بده */
.tb-badge-text {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--w);
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .tb-badge:hover { border-color: var(--w); transform: translateY(-2px); }
}
@media (max-width: 720px) {
  .tb-badges { max-width: 260px; gap: 8px; }
  .tb-badge { min-height: 66px; padding: 6px; }
  .tb-badge img { max-height: 50px; }
}

.tb-footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 16px 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ════════════════════ واکنش‌گرایی ════════════════════ */
@media (max-width: 1024px) {
  .tb-nav { display: none; }
}

@media (max-width: 720px) {
  /* هدر موبایل: یک ردیف — لوگو راست، جستجو وسط، پروفایل چپ.
     قبلاً جستجو به خط دوم می‌رفت و هدر دو طبقه و بلند می‌شد؛
     همان فاصله‌ی زیادی بود که بالای صفحه دیده می‌شد.        */
  .tb-header-inner {
    padding: 8px 12px;
    gap: 9px;
    flex-wrap: nowrap;
  }
  .tb-logo img { height: 46px; }
  .tb-logo { gap: 7px; }
  .tb-logo-text { font-size: 16px; }
  .tb-icon-btn { width: 38px; height: 38px; border-radius: 11px; }
  .tb-icon-btn svg { width: 19px; height: 19px; }

  /* سبد در نوار پایین هست، در هدر تکراری می‌شود */
  .tb-cart-btn { display: none; }

  .tb-bottombar { display: block; }
  body { padding-bottom: 74px; }

  .tb-footer { margin-top: 36px; }
  .tb-footer-inner { padding: 32px 16px 20px; gap: 24px; grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .tb-bottombar a { font-size: 9.5px; }
  .tb-bottombar svg { width: 19px; height: 19px; }
  .tb-bb-logo { width: 46px; height: 46px; margin-top: -15px; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tb-header, .tb-bottombar { background: rgba(255,255,255,.97); }
}

@media (prefers-reduced-motion: reduce) {
  .tb-social, .tb-icon-btn, .tb-bb-logo { transition: none; }
}

/* ── تور ایمنی: نوار پایین افزونه‌ی mobile-bottom-nav ────────
   آن افزونه با z-index: 99999 روی نوار ما می‌نشیند. بهترین کار
   غیرفعال کردن خودِ افزونه است؛ این فقط پشتیبان است.        */
.mbn-nav,
#mbn-nav,
nav.mbn-nav { display: none !important; }

/* آیکون‌های نوار پایین هم نباید له شوند */
.tb-bottombar svg { flex: 0 0 auto; }

/* ════════════════════════════════════════════════════════════
   پس‌زمینه‌ی کرمی سراسری
   ------------------------------------------------------------
   همان کرمی که فوتر دارد، روی کل سایت. قبلاً این را در یک فایل
   جدا برای «CSS اضافه» گذاشته بودیم؛ حالا که چایلد تم استایل‌ها
   را خودش لود می‌کند، اینجا جای درست‌تری است و همه‌جا می‌آید.
   ════════════════════════════════════════════════════════════ */
/*
 * #FDFBF8 عملاً سفید بود و از کارت‌های سفید جدا نمی‌شد.
 * #FAF5EE هنوز خیلی روشن است ولی گرمیِ کرم دیده می‌شود.
 * کارت‌ها و جعبه‌ها پایین‌تر سفیدِ خالص می‌مانند تا کنتراست بماند.
 *
 * !important لازم است: «تنظیمات سایت» المنتور رنگ پس‌زمینه‌ی
 * سراسری را روی body می‌نویسد و آن فایل بعد از این استایل لود
 * می‌شود. برگه‌هایی که خودشان در المنتور پس‌زمینه گرفته‌اند
 * (مثل صفحه‌ی دسته‌بندی) کرم می‌شدند و بقیه سفید می‌ماندند —
 * ناهماهنگی از همین‌جا می‌آمد.
 */
html { background-color: #FAF5EE !important; }
body { background-color: #FAF5EE !important; }

/*
 * پوشش‌های تمام‌عرضِ بین body و محتوا هم باید شفاف باشند، وگرنه
 * کرمِ body زیرشان می‌ماند و دیده نمی‌شود.
 */
body #page,
body .site,
body .site-main,
body #content,
body .page-content,
body .elementor-location-single,
body .elementor-location-archive,
body .e-con-inner {
  background-color: transparent !important;
}

/* کارت‌ها و جعبه‌ها سفید بمانند تا از زمینه جدا شوند */
.tb-card,
.tb-card-img,
.wk-card,
.e-loop-item > .elementor-element,
.e-loop-item .elementor-widget-theme-post-featured-image {
  background-color: #fff;
}

/*
 * استثنا: کارت دسته‌بندی.
 * تصویرش خودش یک بنرِ تمام‌رنگ است؛ قابِ سفید دورش فقط یک
 * حاشیه‌ی بی‌ربط می‌ساخت. هم‌رنگِ زمینه که باشد، بنر شناور
 * دیده می‌شود.
 *
 * تشخیص از روی دکمه‌ی «نمایش همه»: کارت دسته‌بندی ویجت دکمه
 * دارد و کارت محصول ندارد. :has در همه‌ی مرورگرهای امروزی هست
 * و اگر جایی پشتیبانی نشود، فقط کارت سفید می‌ماند — یعنی همان
 * حالت قبل، نه چیزی خراب.
 */
.e-loop-item:has(.elementor-widget-button) > .elementor-element {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.e-loop-item:has(.elementor-widget-button) .elementor-widget-theme-post-featured-image {
  background-color: transparent !important;
}

/* ════════════════════════════════════════════════════════════
   فشردگی ارقام قیمت
   ------------------------------------------------------------
   font-feature-settings: 'tnum' همه‌ی ارقام را هم‌عرض می‌کند —
   برای ستون‌بندی خوب است ولی «۱.۴۸۰.۰۰۰» را باز و کشیده نشان
   می‌دهد. کمی letter-spacing منفی جمعش می‌کند بدون اینکه
   هم‌عرضی از بین برود.
   ════════════════════════════════════════════════════════════ */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
.tb-card-now,
.tb-card-price del,
.price bdi,
.price ins,
.price del {
  letter-spacing: -.5px;
}
/* واحد پول نباید به رقم بچسبد */
.woocommerce-Price-currencySymbol {
  letter-spacing: 0;
  margin-inline-start: 3px;
}

/* ── انیمیشن شمارنده‌ی سبد ────────────────────────────────── */
.tb-cart-count {
  transition: transform .18s cubic-bezier(.32,.72,0,1);
}
.tb-cart-count.is-bumped {
  animation: tbBump .5s cubic-bezier(.32,.72,0,1);
}
@keyframes tbBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.55); }
  60%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
/* آیکون سبد هم یک تکان کوچک بخورد */
.tb-icon-btn.is-bumped,
.tb-bottombar a.is-bumped { animation: tbNudge .5s cubic-bezier(.32,.72,0,1); }
@keyframes tbNudge {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .tb-cart-count.is-bumped,
  .tb-icon-btn.is-bumped,
  .tb-bottombar a.is-bumped { animation: none; }
}