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

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

/* ── مسیر راهنما ────────────────────────────────────────── */
.tb-crumbs { font-size: 12.5px; color: var(--ink-3, #8C867D); margin-bottom: 16px; line-height: 2; }
.tb-crumbs a { color: var(--ink-3, #8C867D); text-decoration: none; }
.tb-crumbs a:hover { color: var(--w, #722F37); }

/* ── چیدمان بالا ────────────────────────────────────────── */
.tb-p-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-bottom: 34px;
}

/* ── گالری ──────────────────────────────────────────────── */
.tb-gallery { position: relative; }
/* overflow-x: hidden و نه auto.
   با auto، مرورگر بعد از رها کردن انگشت اینرسی خودش را ادامه
   می‌دهد؛ یک کشیدنِ تند چند اسلاید جلو می‌رفت و روی آخرین
   تصویر می‌ایستاد. حرکت کاملاً به product.js سپرده شده تا هر
   کشیدن دقیقاً یک اسلاید باشد.
   touch-action: pan-y لازم است وگرنه اسکرول عمودیِ صفحه هم
   روی گالری می‌میرد. */
.tb-gal-main {
  display: flex;
  overflow-x: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border: 1px solid var(--line, #EFE7DA);
  border-radius: 20px;
  background: #fff;
  cursor: grab;
}
.tb-gal-main::-webkit-scrollbar { display: none; }
.tb-gal-main.is-grab { cursor: grabbing; user-select: none; }
.tb-gal-main.is-dragging { scroll-behavior: auto; }
.tb-gal-main.is-dragging a { pointer-events: none; }

.tb-gal-slide {
  flex: 0 0 100%;
  display: block;
  line-height: 0;
}
.tb-gal-slide img {
  width: 100%;
  /* ۲۵٪ کوتاه‌تر از مربع: 1/0.75 یعنی همان 4/3 */
  aspect-ratio: 4 / 3;
  /* سقف ارتفاع لازم است: تصویرِ خیلی بلند (مثل تصویر صفحه‌ی
     مونوپولی) با aspect-ratio تنها، کادر را کش می‌آورد و از
     چیدمان بیرون می‌زد. */
  max-height: 420px;
  object-fit: contain;
  padding: 18px;
  display: block;
  -webkit-user-drag: none;
}

.tb-gal-off {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--w, #722F37);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
}

.tb-gal-thumbs {
  display: flex;
  gap: 9px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.tb-gal-thumbs::-webkit-scrollbar { display: none; }
.tb-gal-thumb {
  flex: 0 0 auto;
  /* بندانگشتی‌ها فقط برای پیمایش‌اند. محصولی که ۸ تصویر دارد،
     با ۷۴ پیکسل نوارِ درازی می‌ساخت که از کادر بیرون می‌زد. */
  width: 52px; height: 52px;
  padding: 3px;
  border: 2px solid var(--line, #EFE7DA);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, transform .18s;
}
.tb-gal-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tb-gal-thumb.is-active { border-color: var(--w, #722F37); }
@media (hover: hover) and (pointer: fine) {
  .tb-gal-thumb:hover { border-color: var(--w, #722F37); transform: translateY(-2px); }
}

/* ── ستون اطلاعات ───────────────────────────────────────── */
.tb-p-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.9;
  color: var(--ink, #1A1A1A);
}

.tb-p-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--ink-3, #8C867D);
}
.tb-p-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #B5862B;
  text-decoration: none;
}
.tb-p-rating svg { width: 15px; height: 15px; }
.tb-p-stock.in  { color: #2F6B4F; font-weight: 600; }
.tb-p-stock.out { color: #A33A32; font-weight: 600; }

.tb-p-short {
  font-size: 13.5px;
  line-height: 2.1;
  color: var(--ink-2, #55504A);
  margin-bottom: 18px;
}
.tb-p-short p { margin: 0 0 8px; }

/* جعبه‌ی خرید */
.tb-p-buybox {
  background: #fff;
  border: 1px solid var(--line, #EFE7DA);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(26,26,26,.03), 0 10px 26px -18px rgba(26,26,26,.16);
}
/* ── قیمت ────────────────────────────────────────────────────
   فلکس روی خودِ .tb-p-price، نه روی .price.
   اینجا خروجیِ get_price_html() مستقیم چاپ می‌شود و آن تابع
   پوششِ <p class="price"> ندارد — آن پوشش را قالبِ
   woocommerce_template_single_price اضافه می‌کند که ما
   استفاده‌اش نمی‌کنیم. پس هر قانونی که به .price بسته بود
   هیچ‌وقت اجرا نمی‌شد. .price هم در لیست می‌ماند تا اگر جایی
   با پوشش آمد، باز درست باشد.                                */
.tb-p-price,
.tb-p-price .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, #1A1A1A);
  /* ارقام فارسی با tnum از هم باز می‌افتند */
  letter-spacing: -.6px;
}
.tb-p-price .price { margin-bottom: 0; }

.tb-p-price del,
.tb-p-price del bdi {
  font-size: 14px;
  color: var(--ink-3, #8C867D);
  text-decoration: line-through;
}
.tb-p-price ins { background: none; text-decoration: none; color: var(--ink, #1A1A1A); }
.tb-p-price bdi { white-space: nowrap; }

/* نشان تخفیف به انتهای ردیف رانده می‌شود — در RTL یعنی سمت چپ —
   تا به مبلغ نچسبد. margin منطقی است، پس در LTR هم درست است. */
.tb-p-price .tb-off {
  margin-inline-start: auto;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--w, #722F37);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

/* فرم خرید ووکامرس */
.tb-p-buybox form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.tb-p-buybox .quantity input.qty {
  width: 78px;
  text-align: center;
  background: var(--cream, #FDFBF8) !important;
  border: 1px solid var(--line, #EFE7DA) !important;
  border-radius: 12px !important;
  padding: 12px 8px !important;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink, #1A1A1A);
}
.tb-p-buybox button.single_add_to_cart_button,
.tb-p-buybox .single_add_to_cart_button.button {
  flex: 1 1 190px;
  padding: 14px 24px !important;
  border: none !important;
  border-radius: 13px !important;
  background-color: var(--w, #722F37) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(114,47,55,.8);
  transition: background-color .2s, transform .12s;
}
@media (hover: hover) and (pointer: fine) {
  .tb-p-buybox button.single_add_to_cart_button:hover { background-color: var(--w-deep, #4E1F26) !important; }
}
.tb-p-buybox button.single_add_to_cart_button:active { transform: translateY(1px); }

/* محصولات متغیر */
.tb-p-buybox table.variations { width: 100%; margin: 0 0 12px; border: none; }
.tb-p-buybox table.variations th,
.tb-p-buybox table.variations td { border: none; padding: 5px 0; font-size: 13px; }
.tb-p-buybox select {
  width: 100%;
  background: var(--cream, #FDFBF8);
  border: 1px solid var(--line, #EFE7DA);
  border-radius: 12px;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink, #1A1A1A);
}

.tb-p-cats { margin-top: 14px; font-size: 12.5px; color: var(--ink-3, #8C867D); line-height: 2; }
.tb-p-cats a { color: var(--w, #722F37); text-decoration: none; }

/* ── تب‌ها ──────────────────────────────────────────────── */
.tb-p-tabs { margin-bottom: 40px; }
.tb-tabbar {
  display: flex;
  gap: 5px;
  padding: 5px;
  margin-bottom: 18px;
  background: var(--cream, #FDFBF8);
  border: 1px solid var(--line, #EFE7DA);
  border-radius: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tb-tabbar::-webkit-scrollbar { display: none; }
.tb-tab {
  flex: 1 0 auto;
  min-width: 108px;
  padding: 11px 14px;
  border: none;
  border-radius: 11px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2, #55504A);
  white-space: nowrap;
  cursor: pointer;
  transition: background .22s, color .22s;
}
.tb-tab.is-active { background: var(--w, #722F37); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .tb-tab:hover:not(.is-active) { background: rgba(114,47,55,.06); color: var(--w, #722F37); }
}

.tb-panel {
  display: none;
  background: #fff;
  border: 1px solid var(--line, #EFE7DA);
  border-radius: 18px;
  padding: 22px;
  font-size: 13.5px;
  line-height: 2.2;
  color: var(--ink-2, #55504A);
}
.tb-panel.is-active { display: block; animation: tbFade .26s ease; }
@keyframes tbFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.tb-panel h1, .tb-panel h2, .tb-panel h3 { color: var(--ink, #1A1A1A); line-height: 1.9; }
.tb-panel img { max-width: 100%; height: auto; border-radius: 12px; }

/* مشخصات */
.tb-specs { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 22px; }
/* align-items: center — نه baseline. آیکون قدِ کادرِ عنوان را
   بلندتر می‌کند و با baseline، مقدارِ سمت مقابل پایین‌تر می‌افتاد. */
.tb-spec {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line, #EFE7DA);
}
.tb-spec dt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--ink, #1A1A1A);
  flex: 0 0 auto;
  margin: 0;
}
.tb-spec dd { margin: 0; color: var(--ink-2, #55504A); }
.tb-spec-full { grid-column: 1 / -1; }
.tb-spec-full dd { display: flex; align-items: center; gap: 7px; }

/* آیکون داخل یک مربعِ گِردشده می‌نشیند تا از متن جدا و خواناتر باشد.
   flex: 0 0 auto لازم است، وگرنه در فشار flex پهن‌شدنش را از دست می‌دهد.
   box-sizing هم لازم است تا padding اندازه‌ی ۲۸ را به هم نزند. */
.tb-spec-ico {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 9px;
  background: var(--w-tint, #FBF4F5);
  border: 1px solid rgba(114, 47, 55, .14);
  color: var(--w, #722F37);
}

/* محتویات بازی */
.tb-contents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 22px;
}
.tb-contents li {
  position: relative;
  padding: 10px 26px 10px 0;
  border-bottom: 1px dashed var(--line, #EFE7DA);
  color: var(--ink-2, #55504A);
}
/* نشانِ فهرست — inset-inline-start در RTL یعنی راست، همان جای درست */
.tb-contents li::before {
  content: '';
  position: absolute;
  inset-inline-start: 6px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--w, #722F37);
}
@media (max-width: 600px) {
  .tb-contents { grid-template-columns: 1fr; }
}

/* ویدئو */
.tb-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.tb-video-wrap iframe,
.tb-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
video.tb-video { width: 100%; border-radius: 14px; display: block; background: #000; }

/* نظرات */
.tb-panel #reviews { margin: 0; }
.tb-panel .comment-form input[type=text],
.tb-panel .comment-form input[type=email],
.tb-panel .comment-form textarea {
  width: 100%;
  background: var(--cream, #FDFBF8);
  border: 1px solid var(--line, #EFE7DA);
  border-radius: 12px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 13.5px;
}
.tb-panel .comment-form .submit {
  padding: 12px 26px;
  border: none;
  border-radius: 12px;
  background: var(--w, #722F37);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ── موبایل ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* minmax(0, 1fr) و نه 1fr خالی.
     «1fr» یعنی minmax(auto, 1fr) و آیتمِ گرید حق دارد از عرضِ
     محتوای خود بزرگ‌تر شود. گالری یک فلکس با ۷ اسلایدِ ۱۰۰٪ است،
     پس ستون تا ۷۰۰٪ کش می‌آمد و کلِ صفحه اسکرول افقی می‌گرفت —
     همان چیزی که باعث می‌شد کارت و دکمه از لبه بزنند بیرون. */
  .tb-p-top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* هر دو ستون باید اجازه‌ی کوچک‌شدن داشته باشند */
.tb-gallery,
.tb-p-info { min-width: 0; }

@media (max-width: 600px) {
  .tb-product { padding: 12px 12px 50px; }
  .tb-p-title { font-size: 17px; }
  .tb-gal-main { border-radius: 16px; }
  .tb-gal-slide img { padding: 12px; max-height: 300px; }
  .tb-gal-thumb { width: 46px; height: 46px; border-radius: 10px; }
  .tb-p-price,
  .tb-p-price .price { font-size: 18px; gap: 5px 10px; }
  .tb-p-price del, .tb-p-price del bdi { font-size: 12.5px; }
  .tb-p-buybox { padding: 14px; border-radius: 15px; }
  .tb-panel { padding: 16px; border-radius: 15px; }
  .tb-tab { min-width: 92px; font-size: 12.5px; padding: 10px 11px; }
  .tb-specs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-gal-main { scroll-behavior: auto; }
  .tb-panel.is-active { animation: none; }
  .tb-gal-thumb, .tb-tab { transition: none; }
}