/* ==========================================================================
   product-details.css — خاص بصفحة تفاصيل المنتج (single-product)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   يجمّع المكوّنات: gallery + product-summary + price-box + installments +
   product-description + spec-table + product-card (منتجات ذات صلة).
   ========================================================================== */

/* شريط مسار التنقّل */
.breadcrumb-bar {
  padding-block-start: var(--space-24);
}

.product-details {
  padding-block: var(--section-y);
}

/* الشبكة العلوية: المعرض (يمين) + لوحة المعلومات (يسار) */
.product-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;
}
@media (min-width: 1024px) {
  .product-hero {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-48);
  }
}

/* العمود الأيمن: المعرض ثم بطاقة الوصف تحته */
.product-hero__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* ==========================================================================
   قسم المواصفات (Specs tab) — بطاقة بعرض كامل أسفل الشبكة
   ========================================================================== */
.product-specs {
  margin-top: var(--space-32);
  padding-block: var(--space-24);
  padding-inline: var(--space-32);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.product-specs__tab {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  text-align: start; /* start = يمين في RTL */
  margin-bottom: var(--space-24);
}
.product-specs__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.product-specs__group + .product-specs__group {
  margin-top: var(--space-32);
}
.product-specs__group-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-gradient-end);
  text-align: start; /* start = يمين في RTL */
}

/* ==========================================================================
   منتجات ذات صلة (Related products) — تعيد استخدام product-card، تُعرض
   كسلايدر Swiper أفقي (4 أعمدة سطح مكتب → 3 تابلت → عمود ونصف موبايل) بدل
   شبكة عمودية، حتى لا تأخذ مساحة طويلة على الجوال.
   ملاحظة: WooCommerce يُخرج <section class="related products"> (صنفان
   منفصلان)، وليس "related-products" — المحدّد أدناه كان .related-products
   (صنف واحد بواصلة) فلم يكن يُطابق شيئًا فعليًا؛ صُحِّح هنا.
   ========================================================================== */
.related.products {
  margin-top: var(--space-48);
}
/* عنوان القسم — لون وحجم مطابقان لفيجما (node 419-39297)، بمحاذاة .section-title
   الافتراضية (توسيط) لأنها مطابقة أصلًا */
.related.products h2 {
  color: var(--color-heading-alt);
}
@media (min-width: 768px) {
  .related.products h2 {
    font-size: var(--fs-title-md);
  }
}

.related-products-swiper {
  margin-top: var(--space-24);
  padding-block-end: var(--space-8); /* مساحة لظل البطاقة كي لا يُقصّ */
  overflow: hidden;
}
.related-products-swiper .swiper-wrapper {
  align-items: stretch;
}
.related-products-swiper .swiper-slide {
  height: auto;
  display: flex;
}