/* =====================================================================
   products.css — أنماط صفحة المنتجات فقط (تعتمد على tokens في base.css)
   ---------------------------------------------------------------------
   01 التنقل اللاصق داخل الصفحة (.subnav)
   02 لوحة الرسم الخطي (.art-panel) + شرائح الأقطار (.chips)
   03 كتل المنتج (.product__block) + ملاحظات الجدول
   04 بطاقات مقاسات البلك (.size-grid / .size-card)
   05 بطاقات صغيرة (.mini) للشبك والعوازل
   06 الأسئلة الشائعة (.faq)
   ===================================================================== */

/* ===== 01 SUBNAV ==================================================== */
.subnav {
  --subnav-h: 56px;
  position: sticky; inset-block-start: var(--header-h); z-index: 90;
  background: var(--white);
  border-block-end: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(29, 21, 18, .02);
}
.subnav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: var(--subnav-h);
}
.subnav__list {
  position: relative;
  display: flex; align-items: stretch; gap: 2px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* تلاشي بسيط على الطرف عشان يفهم المستخدم إن فيه المزيد */
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to left, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list li { flex: none; }
.subnav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--subnav-h); padding-inline: 12px;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); line-height: 1;
  color: var(--steel); white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.subnav__link .icon { font-size: 18px; color: var(--orange-mid); }
.subnav__link::after {
  content: ""; position: absolute; inset-inline: 12px; inset-block-end: -1px; height: 3px;
  background: var(--grad-orange); transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.subnav__link:hover { color: var(--ink); }
.subnav__link.is-active { color: var(--ink); }
.subnav__link.is-active::after { transform: scaleX(1); }
.subnav__link:focus-visible { outline-offset: -3px; }
.subnav__cta { display: none; flex: none; }
@media (min-width: 768px) {
  .subnav__cta { display: inline-flex; }
  .subnav__link { padding-inline: 16px; }
  .subnav__link::after { inset-inline: 16px; }
}

/* مسافة إضافية عند القفز للأقسام بسبب الشريط اللاصق الثاني */
.product { scroll-margin-block-start: var(--subnav-h, 56px); }
#faq { scroll-margin-block-start: 56px; }

/* ===== 02 ART PANEL + CHIPS ======================================== */
.art-panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: start;
  background: var(--graphite); color: var(--on-dark-soft);
  border: 1px solid var(--line-dark); border-radius: var(--r-2);
  box-shadow: var(--sh-3);
}
.art-panel::before {
  /* توهج برتقالي هادئ خلف الرسم */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 70% 30%, rgba(242, 106, 27, .18), transparent 60%);
}
.art-panel__art { aspect-ratio: 4 / 3; padding: 6%; }
.art-panel__art svg { width: 100%; height: 100%; }
.art-panel--compact .art-panel__art { aspect-ratio: 16 / 11; }
.art-panel__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-block-start: 1px solid var(--line-dark);
  background: rgba(29, 21, 18, .35);
}
/* .art-panel__label = نفس نمط العناوين الصغيرة الموحّد في base.css (القسم 17) */
.art-panel--on-dark { border-color: rgba(242, 106, 27, .3); }

/* دوائر الأقطار (.chip) = توأم .dia في الصفحة الرئيسية (base.css القسم 16) — هنا نسختها على لوحة الرسم الداكنة */
.art-panel .chips { flex: 1 1 100%; }
.art-panel .chip { background: rgba(255, 255, 255, .05); color: var(--orange-light); box-shadow: none; }
.art-panel .chip::before { background: linear-gradient(135deg, rgba(242, 106, 27, .95), rgba(255, 179, 71, .55)); }
.art-panel .chip::after { border-color: rgba(255, 179, 71, .16); }
.art-panel .chip:hover {
  background: rgba(242, 106, 27, .16); color: var(--white);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35), 0 0 0 4px rgba(242, 106, 27, .14);
}

/* ===== 03 PRODUCT BLOCKS =========================================== */
.product__intro { align-items: start; }
.product__block { margin-block-start: var(--s-9); }
@media (min-width: 1024px) { .product__block { margin-block-start: var(--s-10); } }
.product__subhead { margin-block-end: var(--s-5); }
.product__subhead > :first-child { max-width: 640px; }
.product__subhead .text-muted { margin-block-start: 4px; font-size: 0.9375rem; }

.spec-table { min-width: 720px; }
.spec-table td:last-child { min-width: 260px; white-space: normal; color: var(--steel); font-size: var(--fs-sm); }
.spec-table tbody th { font-family: var(--font-head); font-size: var(--fs-md); }
.spec-note {
  display: flex; gap: 8px; align-items: flex-start;
  margin-block-start: var(--s-3);
  font-size: 0.8125rem; line-height: 1.6; color: var(--slate);
}
.spec-note .icon { flex: none; font-size: 16px; margin-block-start: 3px; color: var(--orange-mid); }

.mill-strip--start { justify-content: flex-start; }

/* ===== 04 BLOCK SIZES ============================================== */
.size-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .size-grid { gap: var(--s-4); grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .size-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.size-card {
  display: grid; justify-items: center; gap: 2px;
  padding: var(--s-4) var(--s-3) var(--s-4);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-2);
  text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.size-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
.size-card:hover .size-card__dims { color: var(--orange-deep); }
.size-card__dims { transition: color var(--dur) var(--ease); font-variant-numeric: lining-nums tabular-nums; }
.size-card svg { width: 100%; max-width: 168px; height: auto; margin-block-end: var(--s-2); }
.size-card__dims {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; color: var(--ink);
}
@media (min-width: 768px) { .size-card__dims { font-size: var(--fs-xl); } }
.size-card__unit { font-size: var(--fs-xs); font-weight: 600; color: var(--orange-deep); }

/* ===== 05 MINI CARDS =============================================== */
.mini-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.mini {
  display: flex; gap: 12px; align-items: flex-start;
  padding: var(--s-4);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mini:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--sh-2); }
/* صندوق الأيقونة الموحّد من base.css — هنا نسخة أصغر للبطاقة الصغيرة */
.mini__icon { width: 44px; height: 44px; }
.mini__icon .icon { font-size: 22px; }
.mini > div { min-width: 0; }
.mini__title { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base); line-height: 1.35; margin-block-end: 2px; }
.mini__text { font-size: var(--fs-sm); color: var(--steel); line-height: 1.6; }
.section--dark .mini { background: var(--graphite); border-color: var(--line-dark); box-shadow: none; }
.section--dark .mini:hover { border-color: rgba(242, 106, 27, .5); box-shadow: var(--sh-3); }
.section--dark .mini__icon { background: rgba(242, 106, 27, .16); color: var(--orange-light); box-shadow: inset 0 0 0 1px rgba(242, 106, 27, .4); }
.section--dark .mini__title { color: var(--white); }
.section--dark .mini__text { color: var(--on-dark-muted); }
.section--dark .text-muted { color: var(--on-dark-muted); }

/* ===== 06 FAQ ====================================================== */
.faq { display: grid; gap: var(--s-3); }
.faq__item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-2);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq__item[open] { border-color: var(--orange-light); box-shadow: var(--sh-1); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base); line-height: 1.4; color: var(--ink);
  border-radius: var(--r-2);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--orange-deep); }
.faq__q .icon {
  flex: none; font-size: 20px; color: var(--orange-mid);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__q .icon { transform: rotate(45deg); }
.faq__a { padding: 0 var(--s-5) var(--s-5); color: var(--steel); line-height: 1.8; }
.faq__a p { max-width: 68ch; }

/* هيرو الصفحة: تباعد أقل للحقائق على الجوال */
@media (max-width: 479px) {
  .hero__meta { gap: var(--s-2) var(--s-4); }
  /* بلاطات التصنيفات على 360px مربعة صغيرة: نخفي الأيقونة ونصغّر العنوان حتى لا يُقص النص الطويل */
  .cat-tiles .tile__icon { display: none; }
  .cat-tiles .tile__label { font-size: var(--fs-base); line-height: 1.25; }
  .cat-tiles .tile__label::after { margin-block-start: 6px; }
  .cat-tiles .tile__sub { font-size: var(--fs-xs); margin-block-start: 4px; }
  .cat-tiles .tile__body { padding: var(--s-3); }
}

/* ===== 07 MOTION (GSAP) — حالات مساعدة لـ js/motion-products.js ============ */
/* أثناء حركة GSAP فقط: نعطّل انتقالات CSS حتى لا تتنازع مع التحويل المضمّن (تعود بعد finish) */
html.gsap .is-animating { transition: none; }
/* شريط الأقسام اللاصق: ظل خفيف يظهر عند الالتصاق (opacity فقط) */
html.gsap .subnav::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: 0 12px 24px -16px rgba(29, 21, 18, .35);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
html.gsap .subnav.is-stuck::after { opacity: 1; }
/* مؤشر واحد ينزلق بين الروابط (x + scaleX من JS) بدل خط كل رابط */
html.gsap .subnav--ind .subnav__link::after { display: none; }
.subnav__ind {
  position: absolute; left: 0; bottom: 0; width: 100px; height: 3px;
  background: var(--grad-orange); transform-origin: left center;
  pointer-events: none; opacity: 0; will-change: transform;
}
/* الأسئلة الشائعة: أثناء حركة الإغلاق نعيد الأيقونة والإطار لحالة الإغلاق مبكرًا */
html.gsap .faq__item.is-closing { border-color: var(--line); box-shadow: none; }
html.gsap .faq__item.is-closing .faq__q .icon { transform: none; }