/* woocommerce/taxonomy-product_cat.php */
/* همون کلاسِ tf-kicker که تو صفحه‌ی اصلی هست، اینجا هم رو breadcrumb
   سوار می‌شه (نگاه کن به تابع tf_breadcrumb_kicker_class تو inc/shop.php) */
.tf-kicker{display:flex;align-items:center;gap:10px;color:var(--orange-light);font-size:12px;}
.tf-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tf-c-red-deep);box-shadow:0 0 0 4px rgba(216,75,61,.09);flex-shrink:0;}

/* هدر/توضیحِ دسته — فاصله‌ی کمتر از breadcrumb تا تیتر */
.tf-s-hero{padding:24px 0 60px;}
.tf-s-hero h1{font-size:clamp(28px,5vw,46px);font-weight:900;margin-bottom:16px;}
.tf-s-hero-desc{max-width:none;color:var(--text-muted);font-size:16px;line-height:1.8;}
.tf-s-hero-desc p{margin:0 0 12px;}

.tf-section{padding:0 0 60px;}
.tf-sec-head{margin-bottom:36px;}

/* گرید «چند نمونه از نزدیک» — کارت‌ها همون tf-poster-card هستن (بیشترِ
   استایلش سراسری تعریف شده)، فقط چیدمانش با گرید ووکامرس (ul.products)
   قاطی نشه یه اسم جدا داره. تصویر/ویدیوی همه‌ی کارت‌ها یه نسبتِ یکسان
   (۱۶:۹) دارن، و کپشنِ هرکدوم با فلکس کِش میاد تا اگه یکی از کارت‌ها
   تیترش کوتاه‌تر بود، به‌جای یه فضای خاکستریِ لخت، همون رنگِ پس‌زمینه‌ی
   خودِ کارت اون فضا رو پر کنه. */
.tf-featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 20px;}
.tf-featured-grid .tf-poster-card,
.tf-featured-grid .tf-video-card{display:flex;flex-direction:column;height:100%;}
.tf-featured-grid .cap{flex:1 0 auto;}
.tf-featured-grid .tf-poster-card .thumb{aspect-ratio:16/9;}

/* کارتِ ویدیوییِ همین بخش — برای محصولاتی که فیلم/ویدیو دارن، به‌جای
   پوسترِ ساده، خودِ ویدیو همینجا قابل پخشه */
.tf-video-card{background:var(--surface);}
.tf-video-card video,
.tf-video-embed{width:100%;display:block;aspect-ratio:16/9;background:#000;border:0;}
.tf-video-card .cap{padding:18px 20px;}
.tf-video-card h3{font-size:16px;font-weight:700;margin:0 0 10px;color:var(--text);}
.tf-featured-grid .cap a{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--orange-light);text-decoration:none;}
.tf-featured-grid .cap a:hover{color:var(--text);}
.tf-featured-grid .tf-poster-card .cap h3{margin:0 0 10px;}

@media(max-width:860px){
  .tf-featured-grid{grid-template-columns:1fr 1fr;}
}