/* ============================================================
   قاب مخملی تیترها — «.velvet-title» (۲۰۲۶-۱۰-۲۱، Claude Code)
   فایل جدا، لود شده بعد از style.css/weekly-picks.css/outfit.css/related.css/
   reviews.css در هر صفحه؛ هیچ خطی از آن فایل‌ها و هیچ‌کدام از قانون‌های
   قبلی‌شان (page-title، wp-title، outfit-head h2، related-head h2،
   reviews-head h2) ویرایش یا حذف نشده — فقط اینجا، با کلاس اضافه‌ی
   «velvet-title» (+ «vt-text» داخلش)، override می‌شود.

   فقط روی ۱۰ تیتر مشخص (صفحه اصلی: منتخب این هفته / فروش ویژه آقایان و
   خانم‌ها [همون h2.page-title در men/women موقع onSale=1] / تازه‌ترین
   کالکشن‌ها، صفحه‌های دسته‌بندی: محصولات زنانه/مردانه/بچگانه، صفحه محصول:
   ست کامل با این محصول / شاید اینها را هم بپسندید / نظرات خریداران) در
   HTML/JS همین پروژه اضافه شده؛ کلاس «page-title» در صفحه‌های دیگر
   (علاقه‌مندی‌ها، جستجو، پروفایل، درباره ما، پیگیری سفارش، پرداخت) دست‌نخورده
   می‌ماند چون این فایل روی آن صفحه‌ها لود نمی‌شود.

   فونت: فقط var(--font-main) (قانون قفل فونت) — letter-spacing: normal
   صریح روی vt-text (مستقل از letter-spacing منفی‌ای که .related-head h2
   از قبل دارد و ارث می‌رسید).
   ============================================================ */

.velvet-title {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: clamp(260px, 80vw, 300px);
  max-width: 100%;
  aspect-ratio: 640 / 198;
  margin: 0 auto;
  background-image: url('/images/velvet-plaque.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

@media (min-width: 900px) {
  .velvet-title { width: 340px; }
}

.velvet-title .vt-text {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  display: inline-block;
  max-width: 82%;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-main);
  font-weight: 900;
  letter-spacing: normal;
  line-height: 1;
  color: #e4c57a;
  text-shadow: 0 1px 2px rgba(48, 24, 0, 0.55), 0 0 1px rgba(48, 24, 0, 0.3);
  font-size: clamp(1.15rem, 1rem + 1vw, 1.45rem);
}
.velvet-title--sm .vt-text { font-size: clamp(0.95rem, 0.82rem + 0.8vw, 1.2rem); }
.velvet-title--xs .vt-text { font-size: clamp(0.8rem, 0.7rem + 0.65vw, 1.0rem); }

/* خنثی‌سازی قاب/خط/الماسِ h2.page-title (و حالت onSale آن) زیر قاب مخملی.
   باگ قاب نصفه: h1.page-title/h2.page-title (و .luxy-cat-head h2.page-title)
   در style.css با background:var(--nx-surface...)/background:none (شورت‌هند)
   تعریف شده‌اند که از این‌جا مشخص‌تر هستند، پس repeat/size/position را هم به
   مقدار اولیه (repeat/auto/0% 0%) برمی‌گردانند؛ فقط ست‌کردن background-image
   کافی نبود — همان سه زیرخاصیت اینجا صریح دوباره ست می‌شوند. */
h1.page-title.velvet-title,
h2.page-title.velvet-title,
.luxy-cat-head h1.page-title.velvet-title,
.luxy-cat-head h2.page-title.velvet-title {
  width: clamp(260px, 80vw, 300px);
  max-width: 100%;
  margin: 28px auto 20px;
  padding: 0;
  background-color: transparent;
  background-image: url('/images/velvet-plaque.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  box-shadow: none;
  border-radius: 0;
  font-size: inherit;
  line-height: inherit;
}
@media (min-width: 900px) {
  h1.page-title.velvet-title,
  h2.page-title.velvet-title,
  .luxy-cat-head h1.page-title.velvet-title,
  .luxy-cat-head h2.page-title.velvet-title { width: 340px; }
}
/* داخل ردیف flex «فروش ویژه» (h2 + ویدیوی گربه)، فاصله را خودِ ردیف می‌گیرد
   نه h2 (که عضو flex است)؛ پایین همان ۲۰px قبلی luxy-banner.css را دارد. */
.luxy-cat-head { margin-top: 28px; }
.luxy-cat-head h2.page-title.velvet-title { margin: 0 auto; }
h1.page-title.velvet-title::before,
h2.page-title.velvet-title::before,
h1.page-title.velvet-title::after,
h2.page-title.velvet-title::after { content: none; }

/* خنثی‌سازی رنگ/خطوط طلایی دو طرفِ «منتخب این هفته» (wp-title) زیر قاب مخملی */
.wp-title.velvet-title::before,
.wp-title.velvet-title::after { content: none; }
.wp-title.velvet-title .wp-title-1,
.wp-title.velvet-title .wp-title-2 { color: inherit; }

/* سرتیتر/شمارنده‌های کناری زیرِ قاب و کوچیک — ردیف‌های flex قبلی ستونی می‌شوند */
.outfit-head:has(.velvet-title),
.related-head:has(.velvet-title),
.reviews-head:has(.velvet-title) {
  display: block;
  text-align: center;
}
.outfit-head:has(.velvet-title) .outfit-sub:not([hidden]),
.related-head:has(.velvet-title) .related-count:not([hidden]),
.reviews-head:has(.velvet-title) .reviews-head-sub:not([hidden]) {
  display: block;
  margin: 6px 0 0;
  text-align: center;
}

/* باگ: خودِ h2.velvet-title زیر «.outfit-head h2» / «.related-head h2» /
   «.reviews-head h2» (فایل‌های outfit.css/related.css که margin:0 یا margin:0 0 4px
   می‌دهند) با specificity برابر (یک class + یک type) قرار می‌گرفت، پس حاشیهٔ
   افقی auto پایهٔ .velvet-title (بالا) اثر نمی‌کرد و قاب مخملی به‌جای وسط‌چین،
   به یک طرف می‌چسبید؛ :has() بالا فقط parent و زیرتیتر را درست می‌کرد، نه خودِ
   h2 را. این سلکتور (کلاس + کلاس + تگ) specificity بالاتری دارد و همیشه برنده
   است — بدون دست‌زدن به آن سه فایل. */
.outfit-head h2.velvet-title,
.related-head h2.velvet-title,
.reviews-head h2.velvet-title {
  margin-inline: auto;
}