/* ============================================================
   15_sxo_fixes.css — تحسينات تجربة البحث (SXO) لـ tvdigit.com
   نسخة مُصحَّحة بعد تدقيق عكسي على الموقع الحيّ — 2026-08-29

   يُرفع إلى: catalog/view/theme/journal3/stylesheet/15-sxo-fixes.css
   ويُسجَّل في: Journal 3 ▸ Settings ▸ Custom Code ▸ Header
   بجوار السطر الموجود فعلاً هناك:
     <link rel="stylesheet" href="catalog/view/theme/journal3/stylesheet/tvdigit-com.css?v=4" />
   ملاحظة مؤكَّدة حيّاً: tvdigit-com.css و وسوم hreflang تُحقَن من حقل
   Custom Code ▸ Header لا من ملف header.twig، ولذلك لا حاجة لتعديل نسخة
   OCMOD في storage/modification إلا إذا عُدِّلت header.twig نفسها.

   ثلاثة تصحيحات جوهرية عن النسخة السابقة من هذا الملف:
   1) حُذفت البادئة .route-product-product من كل المحدِّدات.
      السبب: الـ HTML المُخدَّم من السيرفر يصدر وسم body بصنف فارغ على كل
      صفحات الموقع (الرئيسية والقسم والمنتج والمقال وصفحة الوكلاء)،
      فالمحدِّد لم يكن ليطابق أي عنصر إطلاقاً. البديل المؤكَّد:
      #product.product-details و .product-info — ولا يوجد أيٌّ منهما
      إلا في صفحة المنتج وحدها.
   2) تغيّرت بادئة الأصناف من tvd- إلى tvdx- لأن tvd-seo* و tvd-trust*
      و tvd-badges مستعملة فعلاً على الموقع الحيّ داخل tvdigit-com.css v4،
      وكانت النسخة السابقة ستصطدم بها.
   3) أُلغي content-visibility عن .tvd-seo لأن هذه الكتلة تحتوي وسم H1
      الوحيد في الصفحة الرئيسية، وتأجيل تصييرها يضرّ أكثر مما ينفع.

   الهوية تُقرأ من متغيّرات tvdigit-com.css مع قيم احتياطية،
   فلا نعيد تعريف :root ولا نصطدم بالملف الأصلي.
   RTL-safe · يحترم prefers-reduced-motion · بلا أي سعر أو تقييم مُختلق.
   ============================================================ */

/* ------------------------------------------------------------
   0) التوكنات — محلية بالكامل، لا تعيد تعريف :root
   ------------------------------------------------------------ */
.tvdx-hero,
.tvdx-official,
.tvdx-paths,
.tvdx-reseller,
.tvdx-cat-intro,
.tvdx-compare,
.tvdx-post-cta,
.tvdx-answer,
.tvdx-af,
.tvdx-assure,
#product.product-details {
  --tvdx:       var(--tvd,     #0e9f6e);
  --tvdx-d:     var(--tvd-d,   #046c4e);
  --tvdx-ink:   var(--tvd-ink, #03251a);
  --tvdx-gold:  var(--gold,    #f5b40a);
  --tvdx-goldd: var(--gold-d,  #d29a05);
  --tvdx-mint:  var(--mint,    #eef7f2);
  --tvdx-glow:  var(--glow,    rgba(14, 159, 110, .30));
  --tvdx-r:     18px;
  --tvdx-sh:    0 12px 32px rgba(3, 37, 26, .22);
}

/* ============================================================
   1) كتلة فوق الطية للرئيسية (تعمل مع الكتلة A في 15_sxo_fixes.html)
   تعالج: وسم H1 موجود في الرئيسية لكنه يقع عند 93% من عمق الصفحة
          ويسبقه أربعة وسوم h3 — أي أن أول ما يراه الزائر لا يحمل
          عنواناً ولا جملة قيمة ولا زر دعوة.
   ============================================================ */

.tvdx-hero {
  background: linear-gradient(150deg, var(--tvdx-ink) 0%, var(--tvdx-d) 88%);
  border: 1px solid rgba(245, 180, 10, .45);
  border-radius: 26px;
  box-shadow: var(--tvdx-sh);
  padding: 34px 26px;
  margin: 18px 10px 22px;
  color: #eafff5;
  text-align: center;
}

.tvdx-hero h1,
.tvdx-hero .tvdx-hero-title {
  color: #fff !important;
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.5;
  font-weight: 900;
  margin: 0 0 12px;
}

.tvdx-hero .tvdx-hl { color: var(--tvdx-gold) !important; }

.tvdx-hero .tvdx-hero-sub {
  color: #d8f3e7;
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.95;
  max-width: 70ch;
  margin: 0 auto 22px;
}

.tvdx-hero .tvdx-hero-sub strong { color: var(--tvdx-gold); font-weight: 800; }

/* أزرار الدعوة للإجراء */
.tvdx-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 20px;
}

.tvdx-cta-row.tvdx-start { justify-content: flex-start; }

.tvdx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 30px;
  border-radius: 14px;
  border: 2px solid transparent;
  font-weight: 900;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.tvdx-btn-primary {
  background: linear-gradient(135deg, var(--tvdx), var(--tvdx-d));
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(14, 159, 110, .38);
}

.tvdx-btn-primary:hover,
.tvdx-btn-primary:focus {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px var(--tvdx-glow);
  color: #fff !important;
}

.tvdx-btn-gold {
  background: linear-gradient(135deg, var(--tvdx-gold), var(--tvdx-goldd));
  color: #2a1d00 !important;
  box-shadow: 0 10px 26px rgba(245, 180, 10, .34);
}

.tvdx-btn-gold:hover,
.tvdx-btn-gold:focus {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(245, 180, 10, .44);
  color: #2a1d00 !important;
}

.tvdx-btn-ghost {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(245, 180, 10, .55);
  color: #eafff5 !important;
}

.tvdx-btn-ghost:hover,
.tvdx-btn-ghost:focus {
  border-color: var(--tvdx-gold);
  color: var(--tvdx-gold) !important;
}

.tvdx-btn:focus-visible { outline: 3px solid var(--tvdx-gold); outline-offset: 3px; }

/* شارات الطمأنة فوق الطية */
.tvdx-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tvdx-hero-badges li {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(245, 180, 10, .42);
  color: #eafff5;
  padding: 9px 17px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================
   2) شريط إثبات الوكالة الرسمية (الكتلة B)
   ملاحظة: صفحة /الوكلاء-المعتمدين تحتوي فعلاً على روابط الإثبات
   الثلاثة (tornado-pro.store و App Store و Google Play) — هذه الكتلة
   تنقل الإثبات نفسه إلى الرئيسية حيث لا يوجد أي أثر له اليوم.
   ============================================================ */

.tvdx-official {
  background: #fff;
  border: 2px solid rgba(14, 159, 110, .28);
  border-inline-start: 6px solid var(--tvdx-gold);
  border-radius: var(--tvdx-r);
  box-shadow: 0 8px 24px rgba(3, 37, 26, .10);
  padding: 22px 24px;
  margin: 18px 10px;
}

.tvdx-official h2,
.tvdx-official .tvdx-official-title {
  color: var(--tvdx-d) !important;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 900;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tvdx-official .tvdx-seal {
  background: linear-gradient(135deg, var(--tvdx-gold), var(--tvdx-goldd));
  color: #2a1d00;
  font-size: 12.5px;
  font-weight: 900;
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.tvdx-official p { color: #234; line-height: 1.95; margin: 0 0 16px; font-size: 15.5px; }

.tvdx-official-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tvdx-official-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tvdx-mint);
  border: 1px solid rgba(14, 159, 110, .35);
  border-radius: 12px;
  padding: 11px 18px;
  color: var(--tvdx-d) !important;
  font-weight: 800;
  font-size: 14.5px;
  text-decoration: none !important;
  min-height: 44px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.tvdx-official-links a:hover,
.tvdx-official-links a:focus {
  background: #fff;
  border-color: var(--tvdx-gold);
  color: var(--tvdx-ink) !important;
  transform: translateY(-2px);
}

.tvdx-official-links a:focus-visible { outline: 3px solid var(--tvdx-gold); outline-offset: 2px; }

/* ============================================================
   3) البطاقات الثلاث كروابط حقيقية (الكتلة C)
   تعالج: البانرات الثلاثة في الرئيسية كلها href="javascript:open_popup(174)"
          — مؤكَّد حيّاً بثلاث مطابقات في HTML الصفحة الرئيسية،
          وهي ليست روابط قابلة للزحف ولا تمرّر أي وزن داخلي.
   ============================================================ */

.tvdx-paths {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 18px 10px;
}

.tvdx-paths a.tvdx-path {
  display: block;
  background: linear-gradient(150deg, var(--tvdx-d) 0%, var(--tvdx-ink) 85%);
  border: 1px solid rgba(245, 180, 10, .5);
  border-radius: 22px;
  box-shadow: var(--tvdx-sh);
  padding: 24px 22px;
  text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.tvdx-paths a.tvdx-path:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px var(--tvdx-glow);
  border-color: var(--tvdx-gold);
}

.tvdx-paths a.tvdx-path:focus-visible { outline: 3px solid var(--tvdx-gold); outline-offset: 4px; }

/* العنوان والمتن عنصرا span داخل الرابط، لذلك display:block ضروري
   حتى تعمل الهوامش ويصحّ التوزيع الرأسي. */
.tvdx-paths .tvdx-path-title {
  display: block;
  color: var(--tvdx-gold) !important;
  font-weight: 900;
  font-size: 20px;
  margin-bottom: 8px;
}

.tvdx-paths .tvdx-path-body {
  display: block;
  color: #d8f3e7 !important;
  line-height: 1.9;
  font-size: 15px;
}

.tvdx-paths .tvdx-path-body::after {
  content: 'اعرف المزيد ←';
  display: block;
  margin-top: 14px;
  color: var(--tvdx-gold);
  font-weight: 900;
  font-size: 14px;
}

/* ============================================================
   4) صفحة المنتج — رفع صندوق الشراء فوق الوصف
   البنية الحيّة المرصودة داخل #product.product-details بالترتيب:
     .title.page-title
     → .product-blocks.blocks-top      (تبويب الوصف الكامل)
     → .product-stats                  (التوفر + الموديل)
     → .rating.rating-page             (5 نجوم فارغة + «(0 التقييمات)»)
     → .product-price-group            (السعر)
     → .button-group-page              (اضافة للسلة)
     → .product-blocks.blocks-default
   أي أن زر الشراء يقع بعد الوصف كله. الحل: إعادة الترتيب بـ flex order.
   لا بادئة body class — هذه البنية لا توجد إلا في صفحة المنتج.
   ============================================================ */

#product.product-details {
  display: flex;
  flex-direction: column;
}

/* أي عنصر غير مذكور صراحةً يبقى في مؤخّرة الترتيب بدل أن يقفز للأعلى.
   المحدِّدات التالية أعلى نوعيةً منه فتغلبه رغم ورودها بعده. */
#product.product-details > *                              { order: 10; }
#product.product-details > .title.page-title              { order: 1; }
#product.product-details > .tvdx-assure                   { order: 2; }
#product.product-details > .product-stats                 { order: 3; }
#product.product-details > .product-price-group           { order: 4; }
#product.product-details > .button-group-page             { order: 5; }
#product.product-details > .rating.rating-page            { order: 6; }
#product.product-details > .product-blocks.blocks-top     { order: 7; }
#product.product-details > .product-blocks.blocks-default { order: 8; }
#product.product-details > .tags                          { order: 9; }

/* صندوق شراء مميّز بصرياً */
#product.product-details > .product-price-group {
  background: var(--tvdx-mint);
  border: 1px solid rgba(14, 159, 110, .30);
  border-radius: 16px 16px 0 0;
  padding: 16px 18px 10px;
  margin-top: 10px;
}

#product.product-details > .button-group-page {
  background: var(--tvdx-mint);
  border: 1px solid rgba(14, 159, 110, .30);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 6px 18px 18px;
  margin-bottom: 18px;
}

#product.product-details .product-price {
  color: var(--tvdx-d) !important;
  font-weight: 900 !important;
  font-size: clamp(24px, 3vw, 32px) !important;
}

/* شارات الطمأنة أعلى صندوق الشراء.
   كل عبارة فيها منسوخة من نص المنتج الحيّ نفسه — لا وعود جديدة. */
.tvdx-assure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 0;
  list-style: none;
}

.tvdx-assure li {
  background: #fff;
  border: 1px solid rgba(14, 159, 110, .32);
  color: var(--tvdx-d);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.tvdx-assure li.tvdx-gold { border-color: rgba(245, 180, 10, .7); color: var(--tvdx-goldd); }

/* ============================================================
   5) إزالة إشارة الثقة السلبية: خمس نجوم فارغة + «(0 التقييمات)»
   مؤكَّد حيّاً: .rating-stars يحتوي fa-star-o فقط، و .review-links
   يحتوي <a>(0 التقييمات)</a> <b>-</b> <a>كتابة تعليق</a>.
   لا تُختلق تقييمات ولا يُضاف aggregateRating.
   الحارس :has() يُعيد إظهار النجوم تلقائياً يوم يوجد نجم ممتلئ حقيقي.
   ============================================================ */

#product .rating.rating-page:not(:has(.fa-star)) .rating-stars { display: none !important; }

#product .rating.rating-page:not(:has(.fa-star)) .review-links > a:first-of-type,
#product .rating.rating-page:not(:has(.fa-star)) .review-links > b { display: none !important; }

#product .rating.rating-page {
  margin: 6px 0 18px;
  padding: 10px 14px;
  background: rgba(14, 159, 110, .05);
  border: 1px dashed rgba(14, 159, 110, .35);
  border-radius: 12px;
}

#product .rating.rating-page .review-links > a:last-of-type {
  color: var(--tvdx-d) !important;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}

#product .rating.rating-page:not(:has(.fa-star)) .review-links > a:last-of-type::before {
  content: 'كن أول من يقيّم هذا الاشتراك — ';
  font-weight: 700;
  color: #2b4a40;
}

/* متصفحات لا تدعم :has() — لا تُخفى النجوم، تُخفَّف حدّتها البصرية فقط */
@supports not selector(:has(*)) {
  #product .rating.rating-page .rating-stars { opacity: .35; }
}

/* في بطاقات المنتجات داخل الشبكات: تخفيف النجوم الفارغة */
.product-thumb .rating:not(:has(.fa-star)) .rating-stars { opacity: .28; }

/* ============================================================
   6) أزرار الشراء + شريط شراء لاصق على الجوال
   ============================================================ */

.btn.btn-cart,
#button-cart {
  background: linear-gradient(135deg, var(--tvd, #0e9f6e), var(--tvd-d, #046c4e)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  min-height: 54px !important;
  box-shadow: 0 8px 22px rgba(14, 159, 110, .32) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.btn.btn-cart:hover,
#button-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(14, 159, 110, .30) !important;
}

[data-quick-buy] {
  background: linear-gradient(135deg, var(--gold, #f5b40a), var(--gold-d, #d29a05)) !important;
  color: #2a1d00 !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  min-height: 54px !important;
}

.btn.btn-cart:focus-visible,
#button-cart:focus-visible,
[data-quick-buy]:focus-visible { outline: 3px solid var(--gold, #f5b40a); outline-offset: 3px; }

@media (max-width: 991px) {
  /* يلاحق صندوق الشراء القارئ طوال الوصف — CSS خالص بلا جافاسكربت */
  #product.product-details > .button-group-page {
    position: sticky;
    bottom: 0;
    z-index: 60;
    background: linear-gradient(180deg, rgba(238, 247, 242, 0) 0%, var(--tvdx-mint) 26%);
    border: none;
    border-top: 1px solid rgba(14, 159, 110, .28);
    border-radius: 0;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    margin-inline: -12px;
    box-shadow: 0 -8px 24px rgba(3, 37, 26, .12);
  }

  #product.product-details > .product-price-group { border-radius: 16px; }
}

/* ============================================================
   7) تأخير كاروسيل «اشترى الناس أيضا» إلى ما بعد صندوق الشراء (جوال)
   مؤكَّد حيّاً: الكاروسيل داخل .product-left ويسبق .product-right في
   ترتيب الـ DOM، ويعرض أربعة منتجات اثنان منها من علامة فالكون
   المنافسة داخل صفحة منتج تورنيدو.

   تحذير تنفيذي: هذه الكتلة وحدها تعتمد على display:contents.
   اختبرها بصرياً على جهاز حقيقي، وإن اختلّ معرض الصور فاحذف هذه
   الكتلة وحدها دون بقية الملف.
   ============================================================ */

@media (max-width: 991px) {
  .product-info {
    display: flex !important;
    flex-direction: column !important;
  }

  .product-info > .product-left { display: contents !important; }
  .product-info > .product-left > .product-image { order: 1 !important; }
  .product-info > .product-right { order: 5 !important; }
  .product-info > .product-left > .product-blocks.blocks-image { order: 9 !important; }

  .side-products-tabs .nav-tabs > li > a {
    font-size: 15px;
    font-weight: 800;
    color: var(--tvd-d, #046c4e) !important;
  }
}

/* ============================================================
   8) تمهيد القسم + جدول مقارنة المدد (الكتلة F)
   تعالج: قسم /اشتراكات-تورنيدو-iptv يعرض H1 ثم ثلاث بطاقات منتجات
          مباشرةً بلا أي نص قسم فريد — مؤكَّد حيّاً.
   ============================================================ */

.tvdx-cat-intro {
  background: #fff;
  border: 1px solid rgba(14, 159, 110, .25);
  border-inline-start: 6px solid var(--tvdx);
  border-radius: var(--tvdx-r);
  padding: 22px 24px;
  margin: 0 0 22px;
  box-shadow: 0 6px 20px rgba(3, 37, 26, .07);
}

.tvdx-cat-intro p { color: #233; line-height: 2; margin: 0 0 12px; font-size: 15.5px; }
.tvdx-cat-intro p:last-child { margin-bottom: 0; }
.tvdx-cat-intro strong { color: var(--tvdx-d); }

.tvdx-compare { overflow-x: auto; margin: 0 0 22px; -webkit-overflow-scrolling: touch; }

.tvdx-compare table {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--tvdx-r);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(3, 37, 26, .08);
}

.tvdx-compare th {
  background: linear-gradient(135deg, var(--tvdx-ink), var(--tvdx-d));
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  padding: 14px 16px;
  text-align: start;
}

.tvdx-compare td {
  padding: 14px 16px;
  font-size: 15px;
  color: #233;
  border-top: 1px solid rgba(14, 159, 110, .14);
  line-height: 1.85;
}

.tvdx-compare tr:nth-child(even) td { background: rgba(14, 159, 110, .035); }
.tvdx-compare .tvdx-pick { color: var(--tvdx-goldd); font-weight: 900; }
.tvdx-compare a { color: var(--tvdx-d) !important; font-weight: 800; }

/* ============================================================
   9) صندوق الإجابة السريعة + كتلة التحويل داخل المقال (الكتلة G)
   ============================================================ */

.tvdx-answer {
  background: var(--tvdx-mint);
  border: 1px solid rgba(14, 159, 110, .3);
  border-inline-start: 6px solid var(--tvdx-gold);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 26px;
}

.tvdx-answer .tvdx-answer-label {
  display: inline-block;
  background: var(--tvdx-d);
  color: #fff;
  font-size: 12.5px;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.tvdx-answer p { margin: 0; color: #1d3b31; line-height: 2; font-size: 16px; font-weight: 600; }

.tvdx-post-cta {
  background: linear-gradient(150deg, var(--tvdx-ink) 0%, var(--tvdx-d) 88%);
  border: 1px solid rgba(245, 180, 10, .5);
  border-radius: 22px;
  box-shadow: var(--tvdx-sh);
  padding: 26px 24px;
  margin: 32px 0;
  color: #eafff5;
}

.tvdx-post-cta .tvdx-post-cta-title {
  color: var(--tvdx-gold) !important;
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 10px;
}

.tvdx-post-cta p { color: #d8f3e7 !important; line-height: 1.95; margin: 0 0 18px; font-size: 15.5px; }
.tvdx-post-cta .tvdx-cta-row { justify-content: flex-start; margin-bottom: 0; }

/* ============================================================
   10) كتلة الموزّعين (الكتلة E)
   تعالج: /الموزعين تُرجع 404 فعلياً — مؤكَّد حيّاً، وكذلك
          index.php?route=product/category&path=53 و path=59،
          ومنتجات اللوحات 47 و50 و51 تُرجع 404 وليست في السايت ماب.
   ============================================================ */

.tvdx-reseller {
  background: #fff;
  border: 2px solid rgba(245, 180, 10, .45);
  border-radius: var(--tvdx-r);
  padding: 24px;
  margin: 22px 10px;
  box-shadow: 0 8px 24px rgba(3, 37, 26, .10);
}

.tvdx-reseller h2,
.tvdx-reseller .tvdx-reseller-title {
  color: var(--tvdx-d) !important;
  font-size: clamp(19px, 2.3vw, 25px);
  font-weight: 900;
  margin: 0 0 10px;
}

.tvdx-reseller p { color: #233; line-height: 1.95; margin: 0 0 16px; font-size: 15.5px; }

.tvdx-points { overflow-x: auto; margin: 0 0 18px; }
.tvdx-points table { width: 100%; min-width: 420px; border-collapse: separate; border-spacing: 0; }

.tvdx-points th {
  background: var(--tvdx-ink);
  color: var(--tvdx-gold);
  padding: 12px 14px;
  font-size: 14.5px;
  font-weight: 900;
  text-align: start;
}

.tvdx-points td { padding: 12px 14px; font-size: 15px; border-top: 1px solid rgba(14, 159, 110, .15); }
.tvdx-points tbody tr:nth-child(even) td { background: rgba(14, 159, 110, .04); }

/* ============================================================
   11) شريط ثقة فاتح لصفحات المنتج والأقسام وصفحة الوكلاء
   الاسم tvdx-af حتى لا يصطدم بـ tvd-trust الموجود فعلاً في
   tvdigit-com.css v4 (شريط الخصوصية فوق الفوتر).
   ============================================================ */

.tvdx-af {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(14, 159, 110, .24);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 18px;
  box-shadow: 0 4px 14px rgba(3, 37, 26, .06);
}

.tvdx-af span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tvdx-d);
  font-weight: 800;
  font-size: 13.5px;
  background: var(--tvdx-mint);
  border: 1px solid rgba(14, 159, 110, .22);
  padding: 8px 15px;
  border-radius: 999px;
}

.tvdx-af a {
  color: var(--tvdx-goldd) !important;
  font-weight: 900;
  text-decoration: underline;
  font-size: 13.5px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   12) أداء وثبات التخطيط — يخدم LCP و INP و CLS
   قياسات حيّة: الرئيسية 410 KB منها 301 KB من CSS مضمّن داخل HTML،
   وصفحة المنتج 313 KB منها 214 KB مضمّن، وصفر loading="lazy" في
   الصفحتين. الحل الجذري خارج نطاق CSS ويُسلَّم لمهمة الأداء؛
   ما يلي يخفّف الأثر البصري فقط.
   ============================================================ */

/* حجز نسبة أبعاد السلايدر لمنع القفز البصري */
#common-home .module-slideshow img,
.module-slideshow .ms-slide > img {
  aspect-ratio: 5 / 2;
  width: 100%;
  height: auto;
}

/* تأجيل تصيير الكتل البعيدة عن الطية فقط.
   .tvd-seo مستثناة عمداً لأنها تحتوي وسم H1 الوحيد في الرئيسية. */
.tvdx-reseller,
.tvdx-compare,
.tvdx-post-cta {
  content-visibility: auto;
  contain-intrinsic-size: auto 460px;
}

@media (prefers-reduced-motion: reduce) {
  .tvdx-btn,
  .tvdx-paths a.tvdx-path,
  .btn.btn-cart,
  #button-cart,
  .tvdx-official-links a {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   13) الجوال
   ============================================================ */

@media (max-width: 768px) {
  .tvdx-hero { padding: 26px 18px; margin: 12px 6px 18px; border-radius: 20px; }
  .tvdx-hero h1,
  .tvdx-hero .tvdx-hero-title { font-size: 22px; line-height: 1.55; }
  .tvdx-hero .tvdx-hero-sub { font-size: 15px; }
  .tvdx-cta-row .tvdx-btn { width: 100%; padding: 0 18px; }
  .tvdx-official,
  .tvdx-reseller { margin: 14px 6px; padding: 18px 16px; }
  .tvdx-official-links a { width: 100%; justify-content: center; }
  .tvdx-af { gap: 8px; padding: 10px; }
  .tvdx-af span { font-size: 12.5px; padding: 7px 12px; }
  .tvdx-post-cta { padding: 20px 16px; border-radius: 18px; }
}