/* خاصية hidden لا تتغلّب تلقائيًا على أي display صريح آخر بقاعدة أكثر تخصيصًا —
   قاعدة عامة تمنع تكرار هذا الخلل مع أي عنصر يُخفى/يُظهر ديناميكيًا عبر el.hidden */
[hidden] { display: none !important; }

/* ============ الخط: LANTX (هوية العميل) ============ */
@font-face {
  font-family: "LANTX";
  src: url("../assets/fonts/LANTX-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LANTX";
  src: url("../assets/fonts/LANTX-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "LANTX";
  src: url("../assets/fonts/LANTX-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LANTX";
  src: url("../assets/fonts/LANTX-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "LANTX";
  src: url("../assets/fonts/LANTX-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ============ إعداد عام ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #1F3C61;
  --blue: #4271A5;
  --bg-light: #F0F5F7;
  --border: #D8DEE9;
  --white: #FFFFFF;
  --text: #23334A;
  --radius: 0px;
  --container: 1400px;
}

html { scroll-behavior: auto; }

html, body {
  background: var(--bg-light);
  color: var(--text);
  font-family: "LANTX", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-weight: 300; /* اللايت هو الوزن الافتراضي للنصوص الصغيرة؛ العناوين/الأزرار تحدد وزنها الخاص فوق هذا */
  direction: rtl;
  line-height: 1.75;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

section { position: relative; }

/* تنعيم Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============ الهيدر ============ */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1), opacity 0.4s ease;
}

/* يمنع أي انتقال مؤقتًا — يُستخدم لظهور فوري بلا تلاشي عند أول تحميل للصفحة فقط */
.site-header.no-transition {
  transition: none;
}

/* يظهر فورًا في كل الصفحات، بما فيها فوق سكرول-الفيديو بالرئيسية */
.site-header.is-visible {
  transform: translateY(0);
  opacity: 1;
}


/* همبرغر أقصى اليسار / شعار في المنتصف الحقيقي / أدوات أقصى اليمين — بمعزل عن اتجاه rtl العام.
   الشعار موضّع absolute في منتصف الشريط الكامل تمامًا، بمعزل عن تفاوت عرض الهمبرغر عن مجموعة الأدوات
   (لو اعتمدنا على توزيع flex/grid عادي لانحرف المنتصف البصري كلما اختلف عرض الطرفين). */
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px; /* ثابت — لا يكبر مع الشعار */
  padding-inline: 28px;
  direction: ltr;
}

.site-header__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}

.site-header__logo img {
  height: 42px; /* الشعار الأفقي (نص + أيقونة جنبًا لجنب) — نسبة عرض/ارتفاع كبيرة، فارتفاع أقل من النسخة المكدّسة السابقة */
  width: auto;
}

/* القائمة (الرئيسية/من نحن/...) أصبحت قائمة منسدلة يفتحها الهمبرغر دائمًا، لا شريطًا ظاهرًا.
   تبقى في الـ DOM دومًا (position:absolute) وتتحرك بـ opacity/transform بدل display:none
   المفاجئ، كي يظهر انتقال انزلاق وتلاشٍ بسيط عند الفتح/الإغلاق. */
.site-nav {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--white);
  padding: 12px 0 20px;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.site-nav a {
  padding: 10px 16px;
  font-weight: 500;
  font-size: 15px;
  color: var(--navy);
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-nav a:hover {
  background: var(--navy);
  color: var(--white);
}

.site-header.is-open .site-nav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* مجموعة الأدوات اليمنى: بحث / الكتالوج / الفروع / طلب عرض سعر / اللغة */
.site-header__utility {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-self: end;
  direction: rtl; /* يعيد ترتيب العناصر عربيًا داخل المجموعة رغم أن الحاوية الأم ltr */
}

.site-header__utility a {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.site-header__utility a:hover { color: var(--blue); }

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy);
  padding: 4px;
  transition: color 0.2s ease;
}
.icon-btn:hover { color: var(--blue); }
.icon-btn svg { width: 19px; height: 19px; }

/* ============ قائمة الاهتمام (شبه سلة) — أيقونة بالهيدر + قائمة منسدلة تُرسل رسالة واتساب واحدة ============ */
.cart-toggle { position: relative; }
.cart-toggle__badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -6px;
  background: var(--blue);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.cart-toggle__badge[hidden] {
  display: none;
}

.cart-panel {
  position: fixed;
  top: 78px;
  inset-inline-end: 20px;
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  padding: 18px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 150;
}
.cart-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cart-panel__header {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}
.cart-panel__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.cart-panel__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: #3A4A60;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cart-panel__item:last-child { border-bottom: none; padding-bottom: 0; }
.cart-panel__item-remove {
  background: none;
  border: none;
  color: #B0392F;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.cart-panel__empty {
  font-size: 13px;
  color: #8FA0B8;
  text-align: center;
  padding: 8px 0 14px;
}
.cart-panel__send { width: 100%; justify-content: center; }

/* زر "أضف لاهتمامي" فوق صورة بطاقة المنتج بالكتالوج */
.product-card { position: relative; }
.product-card__link { display: block; color: inherit; }
.product-card__interest {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  color: #8FA0B8;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.product-card__interest svg,
.product-tile__interest svg { width: 16px; height: 16px; }
.product-card__interest:hover,
.product-tile__interest:hover { color: var(--blue); border-color: var(--blue); }
.product-card__interest.is-active,
.product-tile__interest.is-active { background: var(--blue); border-color: var(--blue); color: var(--white); }
.product-tile { position: relative; }
.product-tile__interest {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  color: #8fa0b8;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

/* زر "أضف لاهتمامي" في صفحة تفاصيل المنتج */
.btn-outline-navy { background: transparent; border: 1.5px solid var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }
.btn-outline-navy.is-active { background: var(--blue); border-color: var(--blue); color: var(--white); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.lang-switch a { color: inherit; }
.lang-switch a:hover { color: var(--blue); }
.lang-switch__divider { color: var(--border); }

/* SVG بدل عناصر div — يضمن سماكة خط متطابقة تمامًا للأشرطة الثلاثة (رسم متجهي بلا تفاوت تقريب بكسل) */
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy);
  padding: 6px;
}
.nav-toggle svg {
  width: 24px;
  height: 16px;
}

/* ============ الهيرو / سكرول-فيديو ============ */
/* بدّلنا نظام "مسافة سكرول طويلة" بنظام "محطات" يتحكم به الكود مباشرة عبر أحداث
   العجلة/اللمس بدل موضع السكرول — لذا القسم لم يعد يحتاج ارتفاعًا طويلاً. */
.scroll-video {
  position: relative;
  height: 100vh;
}

/* تُضاف الفئة html.skip-intro بسكربت مُضمَّن متزامن في <head> (قبل أي رسم) عند فتح الرئيسية عبر
   أيقونة المنزل بالهيدر (?skip-intro=1#brief) — القسم نفسه يبقى موجودًا وفعّالًا (حلقة الذهاب-الإياب
   تعمل خلفه إن رجع الزائر للأعلى لاحقًا)، فقط شريط التحميل لا يظهر إطلاقًا كي لا يومض على الشاشة
   قبل أن يقفز المتصفح تلقائيًا (ميزة متصفح أصلية بلا أي جافاسكربت) إلى #brief عبر رابط الأنكر.*/
html.skip-intro .loader { display: none !important; }
#brief { scroll-margin-top: 68px; } /* ارتفاع الهيدر الثابت — كي لا يختفي أعلى القسم خلفه عند القفز إليه عبر #brief */

.scroll-video__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1F3C61; /* letterboxing بلون الهوية الكحلي */
}

#frame-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(31, 60, 97, 0.92);
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 3;
}
.loader.is-hidden { opacity: 0; }
.loader__bar {
  width: 220px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}
.loader__fill {
  height: 100%;
  width: 0%;
  background: var(--white);
  transition: width 0.15s ease-out;
}
.loader__text {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.75);
}

/* ============ أقسام عامة ============ */
.section { padding: 90px 0; }
.section--tight { padding: 60px 0; }
.section--navy { background: var(--navy); color: var(--white); }
.section--white { background: var(--white); }

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blue);
  margin-bottom: 12px;
}
.section--navy .eyebrow { color: #9FC1E6; }

.section-head h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 14px;
}
.section--navy .section-head h2 { color: var(--white); }

.section-head p {
  color: #52627A;
  font-size: 16px;
}
.section--navy .section-head p { color: #C6D4E5; }

/* ============ نبذة الرئيسية ============ */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.about-grid p {
  color: #45536A;
  font-size: 16px;
  margin-bottom: 16px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.stat-card {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}

.stat-card strong {
  display: block;
  font-size: 26px;
  color: var(--navy);
  margin-bottom: 4px;
}

.stat-card span {
  font-size: 13px;
  color: #5C6C82;
}

.about-visual {
  background: linear-gradient(160deg, var(--navy), var(--blue));
  border-radius: 0;
  padding: 40px;
  color: var(--white);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.about-visual h3 { font-size: 22px; font-weight: 700; }
.about-visual p { color: #DCE6F1; font-size: 15px; }

/* ============ شريط الرعايات/الشركاء — تمرير أفقي مستمر بلا توقف ============ */
/* الاتجاه LTR على الحاوية الخارجية بالكامل (لا الشريط الداخلي فقط) — لو بقيت الحاوية rtl
   (موروثة من الصفحة) بينما الشريط الداخلي ltr، يحسب المتصفح نقطة البداية من يمين الحاوية
   بدل يسارها، فيُقصّ معظم محتوى الشريط خارج منطقة الرؤية (overflow:hidden) ولا يظهر سوى
   جزء صغير من إحدى المجموعتين. توحيد الاتجاه من الجذر يحل المشكلة جذريًا. */
.sponsors-marquee {
  background: var(--navy); /* الشعارات بيضاء شفافة — تحتاج خلفية داكنة لتكون مرئية */
  overflow: hidden;
  padding-block: 48px;
  direction: ltr;
}
.sponsors-marquee__track {
  display: flex;
  width: max-content;
  animation: sponsors-scroll 26s linear infinite; /* أُبطئت قليلًا بعد التكبير كي لا تبدو متسارعة أكثر من اللازم */
}
.sponsors-marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.sponsors-marquee__group img {
  height: 100px; /* مكبَّرة — تعرض تقريبًا 4-5 شعارات فقط ضمن عرض الشاشة في اللحظة الواحدة */
  width: auto;
  margin-inline: 55px;
  opacity: 0.9;
}
@keyframes sponsors-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* نصف العرض بالضبط = عرض مجموعة واحدة، لضمان تكرار سلس بلا قفزة */
}

/* ============ بطاقات التخصص ============ */
.specialty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.specialty-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.specialty-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(31, 60, 97, 0.12);
  border-color: var(--blue);
}

.specialty-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-light);
}

.specialty-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.specialty-card h3 {
  font-size: 18px;
  color: var(--navy);
  margin: 18px 24px 10px;
  font-weight: 700;
}

.specialty-card p {
  font-size: 14.5px;
  color: #5A6A80;
  margin: 0 24px 24px;
}

/* ============ رأس صفحة الكتالوج — أبيض بسيط بلا شريط ملوّن، مطابق لصفحة Hilti المرجعية ============ */
.catalog-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 130px 0 22px; /* تعويض ارتفاع الهيدر الثابت فوقه */
}
.catalog-header h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
}
.breadcrumb--light {
  justify-content: flex-start;
  color: #8FA0B8;
}
.breadcrumb--light a { color: #5A6A80; }
.breadcrumb--light a:hover { color: var(--navy); }
.breadcrumb--light span:last-child { color: var(--navy); }

.catalog-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
}

/* ============ خدمات مفصّلة (صفحة المنتجات) — بنمط Hilti الفعلي: قائمة جانبية + شبكة بطاقات 3 أعمدة ============ */
.catalog-layout {
  display: grid;
  grid-template-columns: 220px 1fr; /* أول عمود (يمين في rtl) = القائمة الجانبية، ثاني عمود (يسار) = الشبكة */
  gap: 40px;
  align-items: start;
}

.catalog-sidebar {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 84px; /* تحت الهيدر الثابت */
  border-inline-start: 1px solid var(--border);
  padding-inline-start: 18px;
}
.catalog-sidebar__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
}
.catalog-sidebar a {
  font-size: 14px;
  color: #52627A;
  padding: 9px 0;
  border-inline-start: 2px solid transparent;
  margin-inline-start: -19px;
  padding-inline-start: 17px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.catalog-sidebar a:hover { color: var(--navy); }
.catalog-sidebar a.is-active {
  color: var(--navy);
  font-weight: 700;
  border-inline-start-color: var(--blue);
}

/* أيقونة بحث مجردة مطابقة لنمط .icon-btn السابق بالهيدر — تفتح حقل إدخال بحركة انزلاق عند الضغط،
   بدل صندوق بحث دائم الظهور بإطار وخلفية */
.catalog-search {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.catalog-search__input {
  width: 0;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--navy);
  padding: 4px 0;
  opacity: 0;
  margin-inline-start: 0;
  transition: width 0.25s ease, opacity 0.2s ease, margin-inline-start 0.25s ease;
}
.catalog-search__input::placeholder { color: #9FB0C4; }
.catalog-search.is-open .catalog-search__input {
  width: 150px;
  opacity: 1;
  margin-inline-start: 8px;
}

/* gap:1px + خلفية بلون الحدود = خطوط فاصلة رفيعة متلاصقة بين كل البطاقات، بلا فراغات — تمامًا كشبكة Hilti.
   عمودان لا ثلاثة: فئاتنا 4 بالضبط فتملأ شبكة 2×2 كاملة دون خلايا فارغة (بخلاف Hilti بعشرات الفئات). */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.category-card {
  background: var(--white);
  scroll-margin-top: 84px; /* كي لا يختفي أعلى البطاقة خلف الهيدر الثابت عند القفز إليها من القائمة الجانبية */
}

.category-card__image {
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
}
.category-card__image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* الصورة كاملة متمركزة بلا اقتصاص، بخلاف الأسلوب full-bleed السابق */
}

.category-card__body { padding: 20px; }

.category-card h3 {
  font-size: 17px;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 12px;
}

.category-card ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.category-card ul li a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--blue);
  transition: color 0.2s ease;
}
.category-card ul li a:hover { color: var(--navy); }
.category-card ul li a::before {
  content: "‹"; /* سهم صغير — يشير لليسار في rtl بدل ›  المستخدم بمواقع ltr */
  font-weight: 700;
  color: var(--blue);
}

/* ============ من نحن ============ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 10px;
}
.value-card {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 20px;
}
.value-card strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
  margin-bottom: 8px;
}
.value-card span { color: #5A6A80; font-size: 14px; }

.timeline-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 24px;
}
.timeline-note span.dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
}

/* ============ CTA ============ */
.cta-banner {
  background: linear-gradient(135deg, var(--navy), var(--blue));
  border-radius: 0;
  padding: 56px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-banner h2 { font-size: 26px; margin-bottom: 8px; }
.cta-banner p { color: #DCE6F1; font-size: 15px; }
/* شكل متوازي أضلاع مائل بدل الشكل الدائري — الصندوق مائل بزاوية أوضح، والنص بداخله
   يُعاكَس جزئيًا فقط (لا بالكامل) ليبقى مائلًا قليلًا كما طُلب، لا مستقيمًا تمامًا. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 0;
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  transform: skewX(-12deg);
}
.btn > * { display: inline-block; transform: skewX(8deg); }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { transform: skewX(-12deg) translateY(-2px); }
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--white);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--navy); }

/* ============ صفحة التواصل ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px;
}

.contact-card h3 {
  color: var(--navy);
  font-size: 20px;
  margin-bottom: 22px;
  font-weight: 700;
}

.form-row { margin-bottom: 18px; }
.form-row label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.form-row input,
.form-row textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 13px 15px;
  font-size: 14.5px;
  font-family: inherit;
  background: var(--bg-light);
  color: var(--text);
  resize: vertical;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--white);
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 26px;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.contact-info-item__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 0;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 18px;
}
.contact-info-item strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  margin-bottom: 3px;
}
.contact-info-item span, .contact-info-item a { font-size: 14px; color: #5A6A80; }

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: var(--white) !important;
  padding: 14px 26px;
  border-radius: 0;
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.2s ease;
  transform: skewX(-12deg);
}
.whatsapp-btn > * { display: inline-block; transform: skewX(8deg); }
.whatsapp-btn:hover { transform: skewX(-12deg) translateY(-2px); }

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 26px;
  height: 280px;
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ============ الفوتر ============ */
.site-footer {
  background: var(--navy);
  color: #C6D4E5;
  padding: 60px 0 26px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-logo img { height: 34px; margin-bottom: 16px; }
.footer-grid p { font-size: 14px; color: #A9BBD3; line-height: 1.9; }
.footer-col h4 {
  color: var(--white);
  font-size: 15px;
  margin-bottom: 16px;
  font-weight: 700;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: #A9BBD3; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-size: 13px;
  color: #8FA3C0;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============ صفحات داخلية: هيدر بسيط ============ */
.page-hero {
  background: var(--navy);
  color: var(--white);
  padding: 150px 0 64px; /* تعويض ارتفاع الهيدر الثابت (fixed) فوقه */
  text-align: center;
}
.page-hero .eyebrow { color: #9FC1E6; }
.page-hero h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  margin-bottom: 12px;
}
.page-hero p { color: #C6D4E5; max-width: 560px; margin-inline: auto; }

/* ============ مسار التنقّل (breadcrumb) ============ */
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #9FC1E6;
  margin-bottom: 16px;
}
.breadcrumb a { color: #C6D4E5; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span:last-child { color: var(--white); font-weight: 600; }

/* ============ استجابة الشاشات ============ */
@media (max-width: 980px) {
  .about-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .specialty-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* الكتالوج: القائمة الجانبية تصبح شريطًا أفقيًا أعلى الشبكة بدل عمود جانبي لاصق */
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 20px;
    border-inline-start: none;
    border-bottom: 1px solid var(--border);
    padding-inline-start: 0;
    padding-bottom: 16px;
    margin-bottom: 8px;
  }
  .catalog-sidebar__title { width: 100%; }
  .catalog-search { width: 100%; margin-bottom: 10px; }
  .catalog-sidebar a {
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-inline-start: none;
  }
  .catalog-sidebar a.is-active { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 5px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  /* على الجوال: تبقى أيقونة البحث ظاهرة، وتُخفى النصوص الأخرى في مجموعة الأدوات لضيق المساحة */
  .site-header__utility a,
  .lang-switch { display: none; }
  .cart-panel { inset-inline-end: 12px; width: calc(100vw - 24px); max-width: 320px; }
  .specialty-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; text-align: center; }
  .cta-banner .btn { width: 100%; justify-content: center; }
  .category-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-detail { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ============ كتالوج المنتجات — مجموعات الفئات وشبكة المنتجات (بيانات إكسل الكتالوج، بلا صور فعلية بعد) ============ */
.category-group { margin-bottom: 48px; }
.category-group:last-child { margin-bottom: 0; }
.category-group .catalog-section-title {
  scroll-margin-top: 100px; /* كي لا يختفي عنوان القسم خلف الهيدر الثابت عند القفز إليه من القائمة الجانبية */
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* حدود على كل بطاقة بدل خلفية الحاوية (كما في .category-grid) — لأن أقسامًا كثيرة هنا لا
   تملأ صفًا كاملًا (مثل 5 أصناف ÷ 3 أعمدة)، وخلفية الحاوية كانت تُظهر الخلية الفارغة كمربع مصمت. */
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  height: 360px;
}
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(31, 60, 97, 0.08);
  border-color: var(--blue);
}
.product-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card__image {
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 70%;
  min-height: 0;
}
.product-card__image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.product-card__body {
  padding: 12px 18px;
  flex: 0 0 30%;
  min-height: 0;
  overflow: hidden;
}
.product-card__body h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__body p {
  font-size: 13px;
  color: #5A6A80;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* مكان صورة محجوز — يُستخدم في بطاقة المنتج (نسخة صغيرة) وصفحة تفاصيل المنتج (نسخة كبيرة) لحين توفّر صور فعلية */
.product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-light);
  color: #8FA0B8;
  text-align: center;
}
.product-placeholder svg { width: 30px; height: 30px; }
.product-placeholder span { font-size: 12px; }
.product-placeholder--sm svg { width: 22px; height: 22px; }
.product-placeholder--sm span { font-size: 11px; }

/* ============ صفحة تفاصيل منتج واحد ============ */
.page-hero--product { text-align: start; padding-bottom: 48px; }
.page-hero--product .breadcrumb { justify-content: flex-start; }

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.product-detail__image .product-placeholder {
  min-height: 340px;
  border: 1px solid var(--border);
}
.product-detail__image .product-placeholder svg { width: 46px; height: 46px; }
.product-detail__image .product-placeholder span { font-size: 14px; }

/* معرض صور منتج — صورة رئيسية كبيرة + صف مصغّرات للتبديل بينها (يُستخدم فور توفّر صور فعلية للمنتج) */
.product-gallery__main {
  border: 1px solid var(--border);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.product-gallery__main img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}
.product-gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.product-gallery__thumb {
  width: 64px;
  height: 64px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-gallery__thumb:hover,
.product-gallery__thumb.is-active { border-color: var(--blue); }

.product-detail__body h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.product-detail__body h2:not(:first-child) { margin-top: 26px; }
.product-detail__body p {
  font-size: 15px;
  color: #52627A;
  line-height: 1.7;
}
.product-variants__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.variant-chip {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.variant-chip:hover { border-color: var(--blue); }
.variant-chip.is-selected {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.product-detail__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.back-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  transition: color 0.2s ease;
}
.back-link:hover { color: var(--navy); }

/* ============ صفحة الأقسام الرئيسية الجديدة (services-new.html) — هيرو + بحث عام + شبكة أقسام ============ */
.catalog-hero {
  position: relative;
  margin-top: 68px; /* ارتفاع الهيدر الثابت */
  height: 520px;
  overflow: hidden;
}
.catalog-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalog-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--white) 0%, rgba(255, 255, 255, 0.85) 25%, rgba(255, 255, 255, 0) 60%);
}
.catalog-hero__content { position: absolute; inset: 0; }
.catalog-hero__content h1 {
  position: absolute;
  right: 48px;
  left: 24px;
  bottom: 40px;
  max-width: 760px;
  font-size: 84px;
  font-weight: 800;
  color: var(--navy);
  text-align: right;
}

.catalog-hero-search {
  position: relative;
  max-width: 520px;
  margin: 0 auto 40px;
  color: #8fa0b8;
}
.catalog-hero-search__icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.catalog-hero-search input {
  width: 100%;
  padding: 14px 46px 14px 18px;
  font-family: inherit;
  font-size: 15px;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--border);
  outline: none;
  transition: border-color 0.2s ease;
}
.catalog-hero-search input:focus { border-color: var(--blue); }
.catalog-hero-search input::placeholder { color: #9fb0c4; }

/* شبكة المنتجات (شبكة البحث العام + شبكة منتجات القسم الواحد) بطراز "صورة كاملة + شريط اسم بسهم" —
   خطوط فاصلة رفيعة متلاصقة بين البطاقات (gap:1px بلون الحدود) بدل فراغات بينها. */
.product-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.product-tile { background: var(--white); }
.product-tile__image { height: 190px; overflow: hidden; padding: 28px; }
.product-tile__image img { width: 100%; height: 100%; object-fit: contain; }
.product-tile__body { padding: 14px 16px; border-top: 1px solid var(--border); }
.product-tile__body h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}
.product-tile__body h3::before {
  content: "‹"; /* سهم صغير يشير لليسار في rtl */
  font-weight: 700;
  color: var(--blue);
}
.product-tile__link { display: block; color: inherit; }

/* شبكة الأقسام الرئيسية (services-new.html) — كل قسمين جنبًا لجنب بصورة عريضة تمتد لحافة الشاشة
   (بلا قيد عرض الحاوية)، مع تلاشٍ والعنوان مدموج فوق الصورة، بنفس أسلوب الهيرو لكن مصغّرًا لكل بطاقة. */
.category-banner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  background: var(--bg-light);
}
.category-banner {
  position: relative;
  display: block;
  height: 400px;
  overflow: hidden;
  box-shadow: inset 0 0 0 0 rgba(31, 60, 97, 0.18);
  transition: box-shadow 0.3s ease;
}
.category-banner:hover {
  box-shadow: inset 0 0 0 3px rgba(66, 113, 165, 0.5);
}
.category-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.category-banner:hover .category-banner__img { transform: scale(1.06); }
.category-banner__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--white) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0) 55%);
  transition: background 0.3s ease;
}
.category-banner:hover .category-banner__fade {
  background: linear-gradient(to top, var(--white) 0%, rgba(255, 255, 255, 0.82) 32%, rgba(255, 255, 255, 0) 60%);
}
.category-banner__text {
  position: absolute;
  right: 28px;
  left: 24px;
  bottom: 24px;
  transition: transform 0.3s ease;
}
.category-banner:hover .category-banner__text { transform: translateY(-4px); }
.category-banner__text h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
}
.category-banner__text h3::before {
  content: "‹";
  color: var(--blue);
  font-weight: 700;
  transition: transform 0.3s ease;
  display: inline-block;
}
.category-banner:hover .category-banner__text h3::before { transform: translateX(-5px); }
.category-banner__text span {
  display: block;
  font-size: 13px;
  color: #52627a;
  margin-top: 4px;
  margin-inline-start: 18px;
}
.category-banner--full { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .catalog-hero { height: 340px; }
  .catalog-hero__content h1 { font-size: 48px; bottom: 24px; right: 24px; max-width: 90%; }
  .product-tile-grid { grid-template-columns: repeat(2, 1fr); }
  .category-banner-grid { grid-template-columns: 1fr; }
  .category-banner { height: 280px; }
}
@media (max-width: 480px) {
  .product-tile-grid { grid-template-columns: 1fr; }
}

/* ============ هيرو صفحة القسم الواحد (category.html) — صورة كاملة ممتدة خلف النص بالكامل
   مع تلاشٍ تدريجي نحو جهة النص، بدل عمود صورة منفصل (مطابق لمثال "مواد التشطيب" المرجعي) ============ */
.category-hero {
  position: relative;
  margin-top: 68px; /* ارتفاع الهيدر الثابت */
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 50px 0;
}
.category-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.category-hero__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* أبيض كامل عند النص (يمين، start) يتلاشى تدريجيًا نحو الصورة (يسار) */
  background: linear-gradient(to left, var(--white) 0%, rgba(255, 255, 255, 0.9) 38%, rgba(255, 255, 255, 0) 70%);
}
.category-hero__grid {
  position: relative;
  z-index: 2;
}
.category-hero__text { max-width: 560px; }
.category-hero__text .back-link { display: inline-block; margin-bottom: 18px; }
.category-hero__text h1 {
  font-size: 40px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 14px;
}
.category-hero__text p {
  font-size: 15px;
  color: #52627a;
  margin-bottom: 30px;
}
.category-hero__features {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 22px;
  margin-bottom: 34px;
}
.category-hero__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  max-width: 100px;
}
.category-hero__feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}
.category-hero__feature-icon svg { width: 20px; height: 20px; }
.category-hero__feature span { font-size: 12px; font-weight: 600; color: var(--navy); }
.category-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 900px) {
  .category-hero { min-height: 0; padding: 130px 0 40px; }
  .category-hero__fade { background: linear-gradient(to top, var(--white) 0%, rgba(255, 255, 255, 0.92) 45%, rgba(255, 255, 255, 0.55) 75%); }
  .category-hero__text { max-width: 100%; }
  .category-hero__features { grid-template-columns: repeat(2, auto); }
}