/* ============================================================
   تاس بریز — صفحه‌ی اصلی
   ============================================================ */

.tb-home {
  --w:        #722F37;
  --w-deep:   #4E1F26;
  --w-tint:   #FBF4F5;
  --cream:    #FDFBF8;
  --ink:      #1A1A1A;
  --ink-2:    #55504A;
  --ink-3:    #8C867D;
  --line:     #EFE7DA;

  direction: rtl;
  font-family: 'Vazirmatn', 'YekanBakh', Tahoma, sans-serif;
  font-feature-settings: 'ss01', 'tnum';
  color: var(--ink);
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}
.tb-home * { box-sizing: border-box; }

/* ════════════════════ اسلایدر ════════════════════
   بدون کتابخانه: اسکرول افقی با scroll-snap. اگر جاوااسکریپت
   هم اجرا نشود، کاربر می‌تواند دستی اسلاید کند.            */
.tb-hero {
  position: relative;
  margin-bottom: 26px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream);
}
.tb-hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tb-hero-track::-webkit-scrollbar { display: none; }

.tb-hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: block;
  line-height: 0;
}
.tb-hero-slide img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}

.tb-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(26,26,26,.4);
  transition: background .2s, transform .15s;
  z-index: 2;
}
.tb-hero-nav svg { width: 20px; height: 20px; }
/* در RTL، inset-inline-start سمت راست است. قبلاً برعکس بود و
   دکمه‌ها جابه‌جا دیده می‌شدند. */
.tb-hero-prev { inset-inline-start: 12px; }
.tb-hero-next { inset-inline-end: 12px; }
@media (hover: hover) and (pointer: fine) {
  .tb-hero-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
}

.tb-hero-dots {
  position: absolute;
  inset-inline: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 2;
}
.tb-hero-dot {
  width: 8px; height: 8px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  padding: 0;
  transition: width .25s, background .25s;
}
.tb-hero-dot.is-active { width: 22px; background: #fff; }

/* ════════════════════ نوار دسته‌بندی ════════════════════
   نسخه‌ی قدیم قرصِ افقی با آیکون گرد بود؛ حالا کاشیِ تصویری.
   قانون‌های قرص پایین‌تر در بخش «کاشی دسته‌بندی» بازنویسی
   می‌شوند — این بلوک فقط برای مرورگرهایی مانده که به هر دلیل
   تصویری ندارند.                                            */
.tb-cats { margin-bottom: 30px; }
.tb-cat {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .2s, color .2s, transform .18s;
}
.tb-cat-img {
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  flex-shrink: 0;
}
.tb-cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) and (pointer: fine) {
  .tb-cat:hover { border-color: var(--w); color: var(--w); transform: translateY(-2px); }
}

/* ════════════════════ ردیف محصولات ════════════════════ */
.tb-row { margin-bottom: 34px; }
.tb-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tb-row-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.9;
}
.tb-row-more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.tb-row-more svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .tb-row-more:hover { color: var(--w); }
}

/* اسکرولر افقی مشترک */
.tb-scroller {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: #E8DED0 transparent;
}
.tb-scroller::-webkit-scrollbar { height: 6px; }
.tb-scroller::-webkit-scrollbar-thumb { background: #E8DED0; border-radius: 999px; }
.tb-scroller::-webkit-scrollbar-track { background: transparent; }

/* ════════════════════ کارت محصول ════════════════════ */
.tb-card {
  flex: 0 0 210px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(26,26,26,.03), 0 10px 26px -18px rgba(26,26,26,.18);
  transition: transform .26s cubic-bezier(.32,.72,0,1), box-shadow .26s, border-color .26s;
}
@media (hover: hover) and (pointer: fine) {
  .tb-card:hover {
    transform: translateY(-4px);
    border-color: rgba(114,47,55,.22);
    box-shadow: 0 2px 4px rgba(26,26,26,.04), 0 18px 36px -18px rgba(114,47,55,.3);
  }
}

.tb-card-img {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream);
  margin-bottom: 10px;
}
.tb-card-img img {
  width: 100%;
  height: 148px;
  object-fit: contain;
  padding: 6px;
  display: block;
  transition: transform .35s cubic-bezier(.32,.72,0,1);
}
@media (hover: hover) and (pointer: fine) {
  .tb-card:hover .tb-card-img img { transform: scale(1.05); }
}

.tb-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 3.5em;
  max-height: 3.5em;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .tb-card:hover .tb-card-title { color: var(--w); }
}

/* ردیف پایین: قیمت راست، دکمه‌ی آیکونی چپ */
.tb-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}
.tb-card-price { flex: 1 1 auto; min-width: 0; text-align: right; }
.tb-card-price-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.tb-card-price del {
  font-size: 11px;
  color: var(--ink-3);
  text-decoration: line-through;
  white-space: nowrap;
}
.tb-card-now,
.tb-card-now .woocommerce-Price-amount {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
/* قیمت خط‌خورده‌ی خودِ ووکامرس داخل price_html تکراری است */
.tb-card-now del { display: none; }
.tb-card-now ins { background: none; text-decoration: none; }
/* نشان درصدی که فیلتر PHP به price_html اضافه می‌کند، اینجا لازم نیست */
.tb-card-now .tb-off { display: none; }

.tb-card-cart {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 13px;
  background: var(--w);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 18px -10px rgba(114,47,55,.8);
  transition: background .2s, transform .12s;
}
.tb-card-cart svg { width: 19px; height: 19px; }
.tb-card-cart.tb-card-cart-view { background: var(--ink-3); }
@media (hover: hover) and (pointer: fine) {
  .tb-card-cart:hover { background: var(--w-deep); color: #fff; }
}
.tb-card-cart:active { transform: translateY(1px); }
.tb-card-cart.loading { opacity: .6; }
.tb-card-cart.added::after { content: none; }
.tb-card .added_to_cart { display: none; }

/* نشان درصد تخفیف */
.tb-home .tb-off {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--w);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
}

/* ════════════════════ بنرهای میانی ════════════════════ */
.tb-promos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}
.tb-promo {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 10px 26px -18px rgba(26,26,26,.3);
  transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.tb-promo img { width: 100%; height: auto; display: block; }
@media (hover: hover) and (pointer: fine) {
  .tb-promo:hover { transform: translateY(-3px); }
}

/* ════════════════════ موبایل ════════════════════ */
@media (max-width: 720px) {
  .tb-home { padding: 12px 12px 50px; }

  .tb-hero { border-radius: 14px; margin-bottom: 20px; }
  .tb-hero-slide img { aspect-ratio: 16 / 9; }
  .tb-hero-nav { display: none; }
  .tb-hero-dots { bottom: 8px; }

  .tb-cats { margin-bottom: 22px; }
  .tb-cat { font-size: 12px; padding: 6px 12px 6px 6px; }
  .tb-cat-img { width: 30px; height: 30px; }

  .tb-row { margin-bottom: 26px; }
  .tb-row-head h2 { font-size: 15.5px; }
  .tb-row-more { font-size: 12px; }

  .tb-scroller { gap: 10px; }
  .tb-card { flex: 0 0 158px; padding: 9px; border-radius: 14px; }
  .tb-card-img img { height: 104px; padding: 4px; }
  .tb-card-title { font-size: 11.5px; margin-bottom: 8px; }
  .tb-card-now,
  .tb-card-now .woocommerce-Price-amount { font-size: 12.5px; }
  .tb-card-price del { font-size: 10px; }
  .tb-home .tb-off { font-size: 9.5px; padding: 1px 6px; }
  .tb-card-cart { width: 36px; height: 36px; border-radius: 11px; }
  .tb-card-cart svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-hero-track { scroll-behavior: auto; }
  .tb-card, .tb-card-img img, .tb-promo, .tb-cat { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   اصلاحات
   ════════════════════════════════════════════════════════════ */

/* ── عرض ثابت کارت ──────────────────────────────────────────
   flex-basis تنها کافی نبود: min-width پیش‌فرضِ آیتم فلکس
   auto است، پس کارتی که محتوایش پهن‌تر بود (مثل کارت تخفیف‌دار
   با نشان درصد) از بقیه گشادتر می‌شد.                        */
.tb-card {
  width: 210px;
  min-width: 210px;
  max-width: 210px;
}
.tb-card-bottom,
.tb-card-price,
.tb-card-price-top { min-width: 0; }
.tb-card-price { overflow: hidden; }
.tb-card-price-top { flex-wrap: nowrap; }
.tb-card-price del { overflow: hidden; text-overflow: ellipsis; }

/* ── اسکرولرها: کشیدنی، بدون نوار اسکرول ──────────────────── */
.tb-scroller {
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  scroll-snap-type: none;   /* با درگ تداخل داشت */
}
.tb-scroller::-webkit-scrollbar { display: none; }
.tb-scroller.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
/* در حال کشیدن، کلیک روی کارت نباید فعال شود */
.tb-scroller.is-dragging a { pointer-events: none; }
.tb-card { scroll-snap-align: none; }

@media (max-width: 720px) {
  .tb-card { width: 158px; min-width: 158px; max-width: 158px; }
}

/* ── حالت کشیدن ─────────────────────────────────────────────
   is-grab لحظه‌ی گرفتن است، is-dragging وقتی واقعاً حرکت کرد.
   تفکیکشان لازم است تا یک کلیک ساده روی کارت نسوزد.        */
.tb-scroller.is-grab { cursor: grabbing; user-select: none; }
.tb-scroller.is-dragging { scroll-behavior: auto; }
.tb-scroller.is-dragging a,
.tb-scroller.is-dragging img { pointer-events: none; }

/* تصویرها نباید با درگِ بومی مرورگر «برداشته» شوند */
.tb-scroller img,
.tb-scroller a {
  -webkit-user-drag: none;
  user-select: none;
}

/* ════════════════════════════════════════════════════════════
   تقویت خاص‌بودن کارت
   ------------------------------------------------------------
   دو قانون بیرونی از سلکتورهای ما خاص‌تر بودند:
     • رنگ لینک قالب  → عنوان کارت صورتی می‌شد
     • .woocommerce a.button ووکامرس → دکمه‌ی سبد خاکستری (#e9e6ed)
   با افزودن نام تگ (a.tb-…) و !important بسته شدند.
   ════════════════════════════════════════════════════════════ */
a.tb-card-title,
.tb-card a.tb-card-title {
  color: #1A1A1A !important;
  text-decoration: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .tb-card:hover a.tb-card-title { color: #722F37 !important; }
}

a.tb-card-cart,
.tb-card a.tb-card-cart,
.tb-card .tb-card-cart.button {
  background-color: #722F37 !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  padding: 0 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
a.tb-card-cart svg { width: 19px !important; height: 19px !important; flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) {
  a.tb-card-cart:hover { background-color: #4E1F26 !important; color: #fff !important; }
}
a.tb-card-cart.tb-card-cart-view { background-color: #8C867D !important; }

@media (max-width: 720px) {
  a.tb-card-cart,
  .tb-card a.tb-card-cart,
  .tb-card .tb-card-cart.button {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
  }
  a.tb-card-cart svg { width: 16px !important; height: 16px !important; }
}

/* ════════════════════════════════════════════════════════════
   دکمه‌های اسلایدر: رنگ ثابت
   ------------------------------------------------------------
   قالب برای button و :hover رنگ خودش را می‌گذارد. نتیجه‌اش دو
   حالت بود: گاهی صورتی می‌شد، و گاهی رنگ به سفید می‌رفت که
   روی پس‌زمینه‌ی سفیدِ دکمه یعنی آیکون کاملاً ناپدید می‌شد
   (SVG با stroke="currentColor" کشیده می‌شود).
   با هگز صریح و !important بسته شد — نه با متغیر، تا اگر جایی
   متغیر تعریف‌نشده بود باز هم درست بماند.
   ════════════════════════════════════════════════════════════ */
.tb-hero .tb-hero-nav,
button.tb-hero-nav {
  background-color: rgba(255,255,255,.9) !important;
  color: #1A1A1A !important;
  border: 1px solid rgba(255,255,255,.7) !important;
}
.tb-hero .tb-hero-nav svg,
button.tb-hero-nav svg {
  stroke: currentColor !important;
  fill: none !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto;
  opacity: 1 !important;
}
@media (hover: hover) and (pointer: fine) {
  .tb-hero .tb-hero-nav:hover,
  button.tb-hero-nav:hover {
    background-color: #ffffff !important;
    color: #722F37 !important;      /* شرابی، نه صورتیِ قالب */
  }
}
.tb-hero .tb-hero-nav:focus,
.tb-hero .tb-hero-nav:active,
button.tb-hero-nav:focus,
button.tb-hero-nav:active {
  color: #722F37 !important;
  background-color: #ffffff !important;
  outline: none;
}

/* ── آیکون داخل دکمه‌ی سبد سرریز نکند ────────────────────────
   بلوک !important قبلی اندازه و رنگ را می‌گرفت ولی display را نه.
   ووکامرس روی .button می‌گذارد display: inline-block و در آن
   حالت align-items/justify-content بی‌اثرند — آیکون از گوشه‌ی
   دکمه بیرون می‌زد.                                          */
a.tb-card-cart,
.tb-card a.tb-card-cart,
.tb-card .tb-card-cart.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  vertical-align: middle;
  text-align: center !important;
}
a.tb-card-cart > svg {
  display: block !important;
  margin: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* ════════════════════════════════════════════════════════════
   ۱) هاور نباید بریده شود
   ------------------------------------------------------------
   اسکرولر overflow-x: auto دارد و این خودبه‌خود overflow-y را هم
   محدود می‌کند. کارت یا قرص دسته‌بندی که با translateY بالا
   می‌پرد، از بالا بریده می‌شد. با فاصله‌ی داخلی، جا برایش باز
   می‌شود.
   ════════════════════════════════════════════════════════════ */
.tb-scroller {
  padding-block: 8px 10px;
  margin-block: -8px -4px;   /* فاصله‌ی بصری دست‌نخورده بماند */
}

/* ════════════════════════════════════════════════════════════
   ۲) انیمیشن افزودن به سبد
   ووکامرس هنگام ارسال درخواست کلاس loading و بعد added را
   روی دکمه می‌گذارد؛ از همان‌ها استفاده می‌کنیم.
   ════════════════════════════════════════════════════════════ */
a.tb-card-cart { position: relative; }

a.tb-card-cart.loading > svg,
a.tb-card-cart.added  > svg { opacity: 0; }

a.tb-card-cart.loading::after {
  content: '';
  position: absolute;
  width: 17px; height: 17px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tbSpin .7s linear infinite;
}
@keyframes tbSpin { to { transform: rotate(360deg); } }

/* تیک موفقیت
   border-left فیزیکی، نه border-inline-start:
   در RTL آن خاصیت به سمت راست نگاشت می‌شود و تیک آینه‌ای
   (برعکس) کشیده می‌شد. */
a.tb-card-cart.added::after {
  content: '';
  position: absolute;
  width: 15px; height: 9px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  border-inline-start: 2.5px solid #fff;
  transform: rotate(-45deg) translateY(-2px);
  animation: tbPop .32s cubic-bezier(.32,.72,0,1);
}
/* در RTL خاصیت منطقی را خنثی کن تا فقط فیزیکی بماند */
[dir="rtl"] a.tb-card-cart.added::after,
html[lang^="fa"] a.tb-card-cart.added::after {
  border-inline-start: none;
  border-left: 2.5px solid #fff;
  border-right: none;
}
@keyframes tbPop {
  from { transform: rotate(-45deg) translateY(-2px) scale(.2); opacity: 0; }
  to   { transform: rotate(-45deg) translateY(-2px) scale(1);  opacity: 1; }
}

/* لینک «مشاهده سبد» که ووکامرس بعد از افزودن می‌سازد */
.tb-card .added_to_cart { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  a.tb-card-cart.loading::after { animation: none; }
  a.tb-card-cart.added::after   { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   کاشی دسته‌بندی
   ------------------------------------------------------------
   تصویرِ دسته‌بندی‌ها بنرِ عریض است. در قابِ گردِ ۳۴ پیکسلیِ قبلی
   عملاً فقط یک لکه‌ی رنگی دیده می‌شد. حالا کلِ کاشی تصویر است و
   نام روی گرادیانِ تیره‌ی پایین می‌نشیند تا روی هر تصویری خوانا
   بماند — بدون اینکه لازم باشد برای هر دسته تصویر تازه بسازی.
   ════════════════════════════════════════════════════════════ */
/* تصویرهای دسته‌بندی ۹۵۰×۶۰۰ هستند (نسبت ۱.۵۸۳).
   قاب دقیقاً همان نسبت را دارد، پس object-fit: cover هیچ‌جا
   نمی‌بُرد و طرح کامل دیده می‌شود. */
.tb-cats .tb-cat {
  position: relative;
  display: block;
  /* ۹۵۰×۶۰۰ ⇒ نسبت ۱.۵۸۳. عرض ۲۲۰ ⇒ ارتفاع ۱۳۹.
     نسبت باید دقیق بماند وگرنه object-fit: cover دوباره
     از یک طرف می‌بُرد. */
  width: 220px;
  min-width: 220px;
  height: 139px;
  padding: 0;
  border-radius: 15px;
  overflow: hidden;
  background-color: var(--w-tint, #FBF4F5);
  border: 1px solid var(--line, #EFE7DA);
  box-shadow: 0 1px 2px rgba(26,26,26,.03), 0 10px 24px -16px rgba(26,26,26,.2);
}
.tb-cat-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s cubic-bezier(.32,.72,0,1);
}
/* بنرها خودشان عنوان دارند؛ برچسبِ ما رویشان تکراری بود و
   نصف تصویر را هم می‌پوشاند. پس فقط برای دسته‌ای که تصویر
   ندارد نمایش داده می‌شود. */
.tb-cats .tb-cat-name { display: none; }

.tb-cats .tb-cat-plain .tb-cat-name {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: var(--w, #722F37);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .tb-cats .tb-cat:hover {
    transform: translateY(-3px);
    border-color: var(--w, #722F37);
    color: inherit;
  }
  .tb-cats .tb-cat:hover .tb-cat-bg { transform: scale(1.07); }
}

/* ════════════════════════════════════════════════════════════
   قیمت: «تومان» نباید به خط دوم بیفتد
   ------------------------------------------------------------
   nowrap روی .tb-card-now بود، ولی مبلغ داخل یک <bdi> تو در تو
   می‌آید و آنجا دوباره به wrap برمی‌گشت. حالا روی خودِ عنصرهای
   داخلی هم گذاشته شده و برای مبلغ‌های بلند، اندازه‌ی متن کمی
   کوچک و فاصله‌ی حروف فشرده می‌شود تا در عرض کارت جا بگیرد.
   ════════════════════════════════════════════════════════════ */
.tb-card-now,
.tb-card-now bdi,
.tb-card-now ins,
.tb-card-now .woocommerce-Price-amount,
.tb-card-now .woocommerce-Price-currencySymbol,
.tb-card-price del,
.tb-card-price del bdi {
  white-space: nowrap !important;
  word-break: keep-all;
}
.tb-card-now .woocommerce-Price-currencySymbol { margin-inline-start: 2px; }

/* ناموجود: به‌جای قیمت */
.tb-card-oos {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3, #8C867D);
  line-height: 1.9;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   پس‌زمینه‌ی کارت سفید
   محصول‌ها PNG شفاف نیستند؛ زمینه‌ی کرم دورِ عکس یک قابِ
   ناخواسته می‌ساخت.
   ════════════════════════════════════════════════════════════ */
.tb-card,
.tb-card-img { background-color: #fff; }

@media (max-width: 720px) {
  /* سه کاشی در عرض گوشی جا شود:
     ۳۵۱ پیکسل فضای داخلی − دو فاصله‌ی ۱۰ = ۳۳۱ ⇒ هر کدام ۱۰۶.
     ارتفاع از همان نسبت ۹۵۰:۶۰۰ درمی‌آید. */
  .tb-cats .tb-cat { width: 106px; min-width: 106px; height: 67px; border-radius: 11px; }
  .tb-cats .tb-cat-plain .tb-cat-name { font-size: 12px; }

  /*
   * حساب عرض: کارت ۱۵۸ − پدینگ ۸×۲ = ۱۴۲ برای محتوا.
   * دکمه ۳۴ + فاصله ۶ = ۴۰ ⇒ ۱۰۲ پیکسل برای قیمت.
   * «۱.۸۵۰.۰۰۰ تومان» در ۱۱.۵px تقریباً ۹۶ پیکسل می‌شود، پس جا
   * می‌گیرد. قبلاً با دکمه‌ی ۳۶ و فونت ۱۲ حدود ۱۰۵ پیکسل لازم
   * داشت و «تومان» زیر overflow: hidden بریده می‌شد.
   */
  .tb-card { padding: 8px; }
  .tb-card-bottom { gap: 6px; }

  .tb-card-now,
  .tb-card-now .woocommerce-Price-amount { font-size: 11.5px; letter-spacing: -.4px; }
  .tb-card-oos { font-size: 12px; }

  /* واحد پول جای کمتری بگیرد — بیشترین صرفه‌جویی همین‌جاست */
  .tb-card-now .woocommerce-Price-currencySymbol {
    font-size: .84em;
    margin-inline-start: 2px;
  }

  a.tb-card-cart,
  .tb-card a.tb-card-cart,
  .tb-card .tb-card-cart.button {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }
  a.tb-card-cart svg { width: 15px !important; height: 15px !important; }
}

@media (max-width: 380px) {
  .tb-card-now,
  .tb-card-now .woocommerce-Price-amount { font-size: 10.5px; letter-spacing: -.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-cats .tb-cat, .tb-cat-bg { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   پیشنهاد شگفت‌انگیز روز
   ============================================================ */
.tb-deal {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 0;
  margin-bottom: 30px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line, #EFE7DA);
  background: #fff;
  box-shadow: 0 1px 2px rgba(26,26,26,.03), 0 14px 30px -20px rgba(114,47,55,.4);
}

.tb-deal-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 14px;
  background: linear-gradient(160deg, var(--w, #722F37), var(--w-deep, #4E1F26));
  color: #fff;
  text-align: center;
}
.tb-deal-kicker { font-size: 12px; font-weight: 600; opacity: .9; line-height: 1.9; }
.tb-deal-off    { font-size: 21px; font-weight: 800; line-height: 1.8; }
.tb-deal-timer {
  margin-top: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  direction: ltr;          /* ساعت همیشه چپ‌به‌راست خوانده می‌شود */
}
.tb-deal-note { font-size: 11px; opacity: .8; line-height: 1.9; }

.tb-deal-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
  min-width: 0;
}
.tb-deal-img {
  flex: 0 0 auto;
  width: 104px; height: 104px;
  border-radius: 13px;
  overflow: hidden;
  background: #fff;
}
.tb-deal-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; }
/* flex: 1 لازم است، وگرنه متن سمت راست جمع می‌شود و بقیه‌ی
   کارت یک فضای سفیدِ بزرگ می‌ماند. */
.tb-deal-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.tb-deal-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--w-tint, #FBF4F5);
  border: 1px solid rgba(114,47,55,.18);
  color: var(--w, #722F37);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.tb-deal-cta svg { width: 15px; height: 15px; flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) {
  .tb-deal-card:hover .tb-deal-cta { background: var(--w, #722F37); color: #fff; }
}
.tb-deal-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.85;
  color: var(--ink, #1A1A1A);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tb-deal-prices { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tb-deal-prices del {
  font-size: 12.5px;
  color: var(--ink-3, #8C867D);
  text-decoration: line-through;
  white-space: nowrap;
}
.tb-deal-prices ins {
  background: none;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  color: var(--w, #722F37);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .tb-deal-card:hover .tb-deal-name { color: var(--w, #722F37); }
}

@media (max-width: 560px) {
  .tb-deal { grid-template-columns: 1fr; }
  .tb-deal-side {
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    text-align: start;
  }
  .tb-deal-note { display: none; }
  .tb-deal-off { font-size: 17px; }
  .tb-deal-timer { margin: 0; font-size: 13px; }
  .tb-deal-img { width: 84px; height: 84px; }
  .tb-deal-name { font-size: 12.5px; }
  .tb-deal-prices ins { font-size: 14px; }
  /* در عرض کم، دکمه فقط جا تنگ می‌کند — کل کارت خودش لینک است */
  .tb-deal-cta { display: none; }
}

/* ════════════════════════════════════════════════════════════
   اینستاگرام — کارت پروفایل
   ------------------------------------------------------------
   چیدمان از خودِ اپ اینستاگرام گرفته شده:
     ردیف بالا  → عکس سمت چپ، کنارش نام و بعد آمار
     زیر آن     → بیو در تمام عرض
   ============================================================ */
.tb-ig { margin: 34px 0 6px; }
.tb-ig-title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.9;
  color: var(--ink, #1A1A1A);
  text-align: center;
}

/* دو ستون: پروفایل سمت راست، پنل دعوت سمت چپ.
   قبلاً کارت تک‌ستونه بود و چون همه‌چیز چپ‌چین شده، نیمه‌ی
   راستش خالی می‌ماند. */
.tb-ig-card {
  display: grid;
  /* ستون اول در RTL سمت راست است: پنل.
     درصد و نه عرض ثابت، تا پنل با کارت بزرگ و کوچک شود و
     بین دو ستون فاصله‌ی خالی نماند. */
  grid-template-columns: 44% minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line, #EFE7DA);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(26,26,26,.03), 0 16px 34px -22px rgba(26,26,26,.28);
}
.tb-ig-profile { min-width: 0; }

/* اسکرین‌شات صفحه — وقتی در پنل تصویری انتخاب شده باشد،
   جای کارتِ ساخته‌شده را می‌گیرد. */
.tb-ig-shot {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line, #EFE7DA);
  line-height: 0;
}
.tb-ig-shot img { width: 100%; height: auto; display: block; }

/* جای هر ستون صریح تعیین می‌شود، نه با order.
   order آیتم‌ها را در ترتیبِ چیده‌شدن جابه‌جا می‌کند، یعنی پنل
   می‌رفت داخل ستون ۱fr و پروفایل داخل ستون ۲۵۰ پیکسلی —
   برای همین آمار دو خط می‌شد و پنل بی‌دلیل پهن.
   grid-column فقط جایگاه را عوض می‌کند، نه اندازه را. */
.tb-ig-side    { grid-column: 1; grid-row: 1; }
.tb-ig-profile { grid-column: 2; grid-row: 1; }

/* ── پنل کناری ─────────────────────────────────────────────
   پس‌زمینه‌ی گرادیانِ اینستاگرام با شفافیت کم؛ روی آن متن
   شرابی هنوز کنتراست کافی دارد. */
.tb-ig-side {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 20px 18px;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(245,133,41,.10), rgba(221,42,123,.10) 45%, rgba(81,91,212,.10));
  border: 1px solid rgba(221,42,123,.14);
}
/* آیکون بزرگِ کم‌رنگ در گوشه — فقط بافت، نه اطلاعات */
.tb-ig-glyph {
  position: absolute;
  inset-block-start: -22px;
  inset-inline-end: -18px;
  color: rgba(221,42,123,.14);
  pointer-events: none;
}
.tb-ig-glyph svg { width: 104px; height: 104px; }

.tb-ig-perks {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.tb-ig-perks li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.85;
  color: var(--ink-2, #55504A);
}
.tb-ig-perks svg {
  width: 14px; height: 14px;
  flex: 0 0 auto;
  margin-top: 5px;
  color: var(--w, #722F37);
}

/* row-reverse: عکس باید سمت چپ بنشیند، مثل خود اینستاگرام.
   در RTL آیتم اول به راست می‌رود، پس معکوسش می‌کنیم. */
.tb-ig-top {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 20px;
  margin-bottom: 14px;
}

/* حلقه‌ی رنگی دور عکس — گرادیان آشنای اینستاگرام، بدون تصویر */
.tb-ig-ava { flex: 0 0 auto; text-decoration: none; }
.tb-ig-ring {
  display: block;
  width: 96px; height: 96px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #F58529, #DD2A7B, #8134AF, #515BD4, #F58529);
}
.tb-ig-ring img,
.tb-ig-ava-fallback {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid #fff;
  background: var(--w-tint, #FBF4F5);
  box-sizing: border-box;
}
.tb-ig-ava-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--w, #722F37);
}
.tb-ig-ava-fallback svg { width: 38px; height: 38px; }

/* کل ستون کنارِ عکس چپ‌چین است، مثل اپ اینستاگرام.
   direction: ltr فقط ترازِ بلوک را تعیین می‌کند؛ خودِ متن با
   unicode-bidi: plaintext جهت طبیعی خودش را نگه می‌دارد، پس
   فارسی راست‌به‌چپ خوانده می‌شود ولی از لبه‌ی چپ شروع. */
.tb-ig-main {
  flex: 1 1 auto;
  min-width: 0;
  direction: ltr;
  text-align: left;
}

.tb-ig-id {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 3px 10px;
  margin-bottom: 10px;
}
.tb-ig-name, .tb-ig-user { unicode-bidi: plaintext; }
.tb-ig-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #1A1A1A);
  line-height: 1.8;
}
.tb-ig-user {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--w, #722F37) !important;
  text-decoration: none !important;
  direction: ltr;
}

/* آمار — چپ‌به‌راست تا ترتیب و اعدادش مثل اینستاگرام باشد */
.tb-ig-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  direction: ltr;
  justify-content: flex-start;
  gap: 30px;
  flex-wrap: wrap;
}
.tb-ig-stats li { display: flex; flex-direction: column; gap: 1px; text-align: center; }
.tb-ig-stats strong {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink, #1A1A1A);
  line-height: 1.5;
  letter-spacing: -.3px;
}
.tb-ig-stats span { font-size: 11.5px; color: var(--ink-3, #8C867D); line-height: 1.8; }

/* بیو در تمام عرض کارت، زیر ردیف بالا */
/* بیو هم چپ‌چین و تمام‌عرض، دقیقاً مثل اینستاگرام.
   plaintext باعث می‌شود خطِ انگلیسی چپ‌به‌راست و خطِ فارسی
   راست‌به‌چپ خوانده شود، ولی هر دو از لبه‌ی چپ شروع کنند. */
.tb-ig-bio {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 2.1;
  color: var(--ink-2, #55504A);
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

/* دکمه هم‌تراز بقیه‌ی ستون */
.tb-ig-card { text-align: left; }
.tb-ig-title { text-align: center; }

.tb-ig-follow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: 12px;
  background: var(--w, #722F37);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color .2s, transform .12s;
}
.tb-ig-follow svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* داخل پنل کناری تمام‌عرض و وسط‌چین */
.tb-ig-side .tb-ig-follow {
  position: relative;
  width: 100%;
  justify-content: center;
  box-shadow: 0 10px 22px -12px rgba(114,47,55,.9);
}
@media (hover: hover) and (pointer: fine) {
  .tb-ig-follow:hover { background: var(--w-deep, #4E1F26); }
}
.tb-ig-follow:active { transform: translateY(1px); }

@media (max-width: 780px) {
  .tb-ig-card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* تک‌ستونه که شد، پروفایل باید اول بیاید */
  .tb-ig-profile { grid-column: 1; grid-row: 1; }
  .tb-ig-side    { grid-column: 1; grid-row: 2; padding: 16px; }
}

@media (max-width: 560px) {
  .tb-ig-card { padding: 18px 16px; border-radius: 18px; }
  .tb-ig-top { gap: 14px; }
  .tb-ig-ring { width: 78px; height: 78px; }
  .tb-ig-name { font-size: 13.5px; }
  .tb-ig-stats { gap: 18px; }
  .tb-ig-stats strong { font-size: 16px; }
  .tb-ig-stats span { font-size: 10.5px; }
  .tb-ig-bio { font-size: 12px; line-height: 2; }
  .tb-ig-title { font-size: 15px; }
  .tb-ig-follow { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   سؤالات پرتکرار
   ------------------------------------------------------------
   روی <details> بومی سوار است: بدون جاوااسکریپت باز و بسته
   می‌شود و محتوایش از همان اول در HTML هست، پس موتور جستجو
   هم می‌بیندش.
   ════════════════════════════════════════════════════════════ */
.tb-faq { margin: 42px 0 10px; }
.tb-faq-title {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.9;
  color: var(--ink, #1A1A1A);
  text-align: center;
}
.tb-faq-list {
  display: grid;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
}

.tb-faq-item {
  background: #fff;
  border: 1px solid var(--line, #EFE7DA);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.tb-faq-item[open] {
  border-color: rgba(114,47,55,.24);
  box-shadow: 0 2px 4px rgba(26,26,26,.03), 0 16px 34px -22px rgba(114,47,55,.35);
}

.tb-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.95;
  color: var(--ink, #1A1A1A);
  cursor: pointer;
  list-style: none;          /* فایرفاکس */
  user-select: none;
}
/* مثلثِ پیش‌فرضِ وبکیت */
.tb-faq-item summary::-webkit-details-marker { display: none; }
.tb-faq-item summary::marker { content: ''; }

/* نشانِ + که هنگام باز شدن به − می‌چرخد.
   دو خط با ::before/::after ساخته می‌شوند تا آیکونی لود نشود. */
.tb-faq-sign {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--w-tint, #FBF4F5);
  border: 1px solid rgba(114,47,55,.16);
}
/* left فیزیکی، نه inset-inline-start.
   در RTL آن خاصیت به right نگاشت می‌شود؛ آن‌وقت translateX(-50%)
   دو خط را به دو اندازه‌ی متفاوت جابه‌جا می‌کرد (چون عرضشان فرق
   دارد) و به‌جای «+» یک «−|» درمی‌آمد. */
.tb-faq-sign::before,
.tb-faq-sign::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--w, #722F37);
  border-radius: 2px;
  transition: transform .24s cubic-bezier(.32,.72,0,1), opacity .2s;
}
.tb-faq-sign::before {           /* خط افقی */
  width: 12px; height: 2px;
  transform: translate(-50%, -50%);
}
.tb-faq-sign::after {            /* خط عمودی */
  width: 2px; height: 12px;
  transform: translate(-50%, -50%);
}
.tb-faq-item[open] .tb-faq-sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.tb-faq-a {
  padding: 0 17px 16px;
  font-size: 13px;
  line-height: 2.2;
  color: var(--ink-2, #55504A);
}

@media (hover: hover) and (pointer: fine) {
  .tb-faq-item:hover { border-color: rgba(114,47,55,.24); }
  .tb-faq-item summary:hover { color: var(--w, #722F37); }
}

@media (max-width: 720px) {
  .tb-faq { margin: 30px 0 6px; }
  .tb-faq-title { font-size: 16.5px; }
  .tb-faq-item summary { padding: 13px 14px; font-size: 12.5px; }
  .tb-faq-a { padding: 0 14px 14px; font-size: 12px; line-height: 2.1; }
  .tb-faq-sign { width: 24px; height: 24px; border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-faq-item, .tb-faq-sign::before, .tb-faq-sign::after { transition: none; }
}