/* ===== خط الهيدر والقوائم: Almarai (عربي هندسي حديث) ===== */
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
/* ===== خط كوفي للـ ticker ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700;800;900&display=swap');

/* ===== خط Cairo (لباقي الموقع) ===== */
@font-face{
  font-family: Cairo;
  src: url("../fonts/Cairo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block; /* منع layout shift */
}
@font-face{
  font-family: Cairo;
  src: url("../fonts/Cairo-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block; /* منع layout shift */
}

:root{
  --white:#ffffff;
  --offwhite:#f6f6f6;
  --gold:#c9a24d;
  --green:#1f6b4a;
  --dark:#2e2e2e;
  --muted:#666666;
  --line:#e3e3e3;
  --Blue:#00027c;
 --lightBlue:#6dd8f3;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.06);

  /* ===== تحكم في هيدر كل الصفحات (ارتفاع + حجم الخط + وزن الخط) ===== */
  --sub-top-height: 42px;
  --sub-top-padding: 8px 16px; /* padding: 8px top/bottom, 16px left/right */
  --sub-top-font: 15px; /* حجم خط هيدر التواصل الاجتماعي */
  --sub-top-font-weight: 500; /* وزن خط هيدر التواصل الاجتماعي */
  --sub-main-height: 82px;
  --sub-brand-title: 24px; /* حجم خط عنوان البراند */
  --sub-brand-title-weight: 800; /* وزن خط عنوان البراند */
  --sub-brand-sub: 15px; /* حجم خط العنوان الفرعي */
  --sub-brand-sub-weight: 600; /* وزن خط العنوان الفرعي */
  --sub-nav-font: 16px; /* حجم خط القوائم */
  --sub-nav-font-weight: 600; /* وزن خط القوائم */
  --sub-login-font: 16px; /* حجم خط زرار تسجيل الدخول */
  --sub-login-font-weight: 700; /* وزن خط زرار تسجيل الدخول */

  /* ===== WHY BOX LED FRAME ===== */
  --whyFrameColor: #1082ec; /* لون الفريم الأساسي (fallback) */
  --whyFrameSize: 3px;      /* سمك الفريم */
  --whyLed1: #ffffff;       /* أبيض صريح */
  --whyLed2: #030847;       /* أزرق */
  --whyLed3: #1082ec;       /* أزرق فاتح */
  --whyLedSpeed: 50s;       /* زمن دورة الأنيميشن */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: Cairo, Poppins, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background:var(--white);
  color:var(--white);
  line-height:1.2;
}

.container{
  width:100%;
  max-width:92%;
  margin:auto;
}
/* ===== فك ربط الكونتينر في صفحات المنتجات عن القاعدة العامة ===== */
.mid-frame .container{
  max-width: none !important;
  width: 100% !important;
}
/* ===== الكونتينر في الصفحات الفرعية فقط - لا يؤثر على الرئيسية ===== */
/* استثناء صفحة خامات أولية من هذه القاعدة العامة */
.mid-frame section:not(:has(.cards-main)):not(:has(.cards-nine)) .container{
  max-width: 1800px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
/* ===== FORCE SAME CONTAINER WIDTH ON ALL PAGES ===== */
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 18px;     /* حجم البادچ */
  border-radius: 30px;
  background: #fff;
  border: 1px solid var(--line);

  font-size: 16px;        /* حجم الخط */
  font-weight: 700;       /* البولد */
  color: #1082ec;            /* لون الخط */
  line-height: 1.2;
}
.hero-content .badge{
  display: block;
  width: fit-content;
  margin: 0 auto;
}
.hero .hero-content{ min-width: 0; }
.hero .hero-content .ticker{ width:100%; max-width:100%; }
.hero .hero-content .ticker-track{
  display: inline-flex;
  white-space: nowrap;
}

.hero-content .badge{
  margin-bottom: 24px;   /* زوّد أو قلّل الرقم براحتك */
}

/* ===== MAIN BUTTON STYLE ===== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 📐 الحجم */
  padding: 8px 8px;     /* كبر/صغر الزر */
  
  /* 🎨 الخلفية */
  background-color: #ffffff;   /* ← لون خلفية الزر */
  
  /* 📝 الخط */
  color: #1082ec;         /* ← لون الخط */
  font-size: 16px;        /* ← حجم الخط */
  font-weight: 700;       /* ← درجة البولد */

  border-radius: 20px;
  border: 1px solid #ddd;

  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;

  transition: all .2s ease;
}

.hero-actions{
  display: flex;
  justify-content: center;   /* ← السنترة الأفقية */
  gap: 16px;
  margin-top: 24px;

  /* عشان السنترة تكون داخل جزء الكتابة فقط */
  width: 100%;
}
.btn.green{
  background:var(--green);
}
.btn.small{padding:7px 14px;font-size:13px;font-weight:600}

hr.sep{border:none;border-top:1px solid var(--line);margin:24px 0}

.navbar{
  height: var(--sub-main-height) !important;
  min-height: var(--sub-main-height) !important;
  max-height: var(--sub-main-height) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-sizing: border-box;
}
.brand{
  display: flex;
  align-items: center;
  gap: 5px;
}
.brand .title{
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand .title strong{
  font-size: var(--sub-brand-title) !important;
  font-weight: var(--sub-brand-title-weight) !important;
  color: var(--white);
  line-height: 1.2 !important;
}
.brand .title .brand-company{
  font-size: var(--sub-brand-sub) !important;
  font-weight: var(--sub-brand-sub-weight) !important;
  color: var(--white);
  opacity: 0.95;
  line-height: 1.2 !important;
}
.brand .title span:not(.brand-company){
  font-size: var(--sub-brand-sub) !important;
  font-weight: var(--sub-brand-sub-weight) !important;
  color: var(--white);
  line-height: 1.2 !important;
}

.nav-right{
  display:flex;align-items:center;gap:3px;
}

.menu{
  list-style:none;
  display:flex;align-items:center;gap:30px;
}
/* إخفاء القائمة الافتراضية على الموبايل */
@media (max-width: 1023px){
  .nav-right .menu:not(.open){
    display: none !important;
  }
}
.menu > li{position:relative}
.menu a.link,
.menu a.link span{
  font-size: var(--sub-nav-font) !important;
  font-weight: var(--sub-nav-font-weight) !important;
}
.menu a.link{
  padding: 10px 6px;
  position: relative;
  white-space: nowrap;
}
.menu a.link::after{
  content:"";
  position:absolute;
  left:0;bottom:3px;
  width:0;height:2px;background:#030847;
  transition:width .2s ease;
}
.menu a.link:hover::after{width:100%}

/* تحميل الكتالوج — مسافة عن تسجيل الدخول */
.menu .link-catalog{
  margin-inline-start:1.25rem;
}

/* Dropdown */
.dropdown-toggle{
  display:flex;align-items:center;gap:15px;
}
.caret{font-size:32px;color:#030847}
.menu > li.has-dropdown{
  position:relative;
  z-index:1;
}
.menu > li.has-dropdown:hover{
  z-index:5;
}
.dropdown{
  position:absolute;
  top:100%;
  margin-top:2px;
  left:0;
  right:auto;
  width:max-content;
  min-width:min-content;
  background:#f5f7fa;
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(3,8,71,.15);
  padding:6px 4px;
  display:none;
  z-index:5;
}
html[dir="rtl"] .menu > li.has-dropdown .dropdown{
  left:auto;
  right:0;
}
.dropdown a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  margin-bottom:4px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  color:#0d2137;
  white-space:nowrap;
}
.dropdown a:last-child{
  margin-bottom:0;
}
.dropdown a:hover{
  background:rgba(16,130,236,.08);
  color:#030847;
}
.menu > li:hover .dropdown{display:block}

/* ===== خط الهيدر والقوائم: Almarai فقط ===== */
.top-header,
.site-header,
.navbar,
.nav-right,
.menu,
.menu a,
.menu a.link,
.brand,
.brand .title,
.user-area,
.user-area a,
.lang-btn,
.lang-btn .lang-btn-text,
.dropdown,
.dropdown a{
  font-family: Almarai, Cairo, sans-serif;
}

/* Language Button – علم + نص (عربي / EN) */
.lang-btn{
  border:none;
  background:transparent;
  color:#fff;
  padding:4px 8px;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  margin-right:48px;
  margin-left:20px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.lang-btn .flag-icon{
  width:40px;
  height:30px;
  border-radius:2px;
  flex-shrink:0;
}
.lang-btn .lang-btn-text{
  color:#fff;
  font-size:15px;
  font-weight:600;
}
.lang-btn:hover{
  opacity:0.9;
}
/* ===== زر العودة للرئيسية - في موضعه الطبيعي في section-head ===== */
.back-home-btn{
  /* لا توجد قواعد خاصة - يستخدم القواعد الافتراضية لـ .section-head .btn.secondary */
}

/* Mobile menu button */
.burger{
  display:none;
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}
.burger span{
  display:block;width:20px;height:2px;background:var(--dark);
  margin:5px auto;border-radius:2px;
}

/* ===== Sections ===== */
section{padding:10px 0}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  margin-bottom:10px;
  position: relative;
}
html[dir="ltr"] .section-head:not(.mid-frame section:has(.cards-main) .section-head){
  flex-direction: row-reverse;
}
/* ===== فصل section-head في الصفحات الفرعية - حدود واضحة ===== */
/* صفحة خامات أولية - section-head مع فراغ 300px */
.mid-frame section:has(.cards-nine) .section-head{
  max-width: 1800px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 300px !important;
  padding-right: 300px !important;
  box-sizing: border-box !important;
  position: relative !important;
  margin-bottom: 5px !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}
.mid-frame section:has(.cards-nine) .section-head-buttons{
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
/* ===== أزرار العودة في صفحة خامات أولية - بعد آخر صورة في الصف الأول يمين ===== */
.mid-frame section:has(.cards-nine) .section-head-title-wrap{
  position: relative !important;
  margin-right: auto !important;
  margin-left: calc(50% - (300px * 3 + 16px * 2) / 2) !important;
  width: fit-content !important;
}
html[dir="rtl"] .mid-frame section:has(.cards-nine) .section-head-title-wrap{
  margin-right: calc(50% - (300px * 3 + 16px * 2) / 2) !important;
  margin-left: auto !important;
}
.mid-frame section:has(.cards-nine) .section-head-buttons{
  position: absolute !important;
  right: calc(50% + (300px * 3 + 16px * 2) / 2) !important;
  left: auto !important;
  margin: 0 !important;
}
html[dir="rtl"] .mid-frame section:has(.cards-nine) .section-head-buttons{
  right: calc(50% + (300px * 3 + 16px * 2) / 2) !important;
  left: auto !important;
}
html[dir="ltr"] .mid-frame section:has(.cards-nine) .section-head-buttons{
  right: auto !important;
  left: calc(50% + (300px * 3 + 16px * 2) / 2) !important;
}
@media (max-width: 1400px){
  .mid-frame section:has(.cards-nine) .section-head-title-wrap{
    margin-left: 0 !important;
  }
  html[dir="rtl"] .mid-frame section:has(.cards-nine) .section-head-title-wrap{
    margin-right: 0 !important;
  }
  .mid-frame section:has(.cards-nine) .section-head-buttons{
    right: calc(50% + (300px * 3 + 16px * 2) / 2) !important;
  }
  html[dir="ltr"] .mid-frame section:has(.cards-nine) .section-head-buttons{
    right: auto !important;
    left: calc(50% + (300px * 3 + 16px * 2) / 2) !important;
  }
}
.mid-frame section:has(.cards-nine) .section-head .btn.secondary,
.mid-frame section:has(.cards-nine) .section-head-buttons .btn.secondary{
  font-size: 15px !important;
  padding: 10px 22px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* عنوان الصفحة بمحاذاة أزرار العودة — في منتصف الصفحة بنفس تنسيق الزر */
.section-head-with-title{
  align-items:center;
  gap: 20px;
}
.section-head-with-title .section-head-title-wrap{
  flex-shrink: 0;
}
.section-head-buttons{
  display:flex;
  gap:10px;
  align-items:center;
  flex-shrink:0;
}
.section-head-with-title .back-home-btn{
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin-left: 20px !important;
}
html[dir="ltr"] .section-head-with-title .back-home-btn{
  margin-left: 0 !important;
  margin-right: 20px !important;
}
.section-head-with-title .section-head-title-wrap{
  flex: 0 0 auto;
  text-align:start;   /* عنوان المنتج أقصى اليمين — محاذاة رأسية مع أول صورة */
  min-width:0;
}
/* ===== محاذاة عنوان الصفحة مع بداية أول صورة في صفحة المنتجات الرئيسية ===== */
.mid-frame section:has(.cards-main) .section-head{
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html[dir="ltr"] .mid-frame section:has(.cards-main) .section-head{
  flex-direction: row !important;
}
.mid-frame section:has(.cards-main) .section-head-title-wrap{
  flex: 0 0 auto !important;
  margin-right: 0 !important;
}
.section-head-with-title .section-head-title{
  display:inline-block;
  background: transparent;
  color: #C7703F;
  text-shadow: 0 1px 0 #A85A35;
  font-size:19.5px;   /* تصغير 25% من 26px */
  font-weight:800;
  padding:0;
  border-radius:0;
  margin:0;
  width:auto;
  min-width:0;
  box-sizing:border-box;
  text-align:start;
  letter-spacing:0;
  position:relative;
  z-index:2;
  box-shadow: none;
  border: none;
}

/* ===== Ticker للعناوين الفرعية في صفحة المنتجات الرئيسية ===== */
.section-head-with-title .products-ticker{
  flex: 0 0 950px;
  overflow: hidden;
  margin: 0;
  margin-left: 570px;
  height: 30px;
  display: flex;
  align-items: center;
  width: 950px;
  max-width: 950px;
  min-width: 950px;
  position: relative;
}
html[dir="ltr"] .section-head-with-title .products-ticker{
  margin-left: 0 !important;
  margin-right: 570px !important;
}

.section-head-with-title .products-ticker::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
  z-index: 10;
  pointer-events: none;
}
html[dir="ltr"] .section-head-with-title .products-ticker::before{
  left: auto;
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

.section-head-with-title .products-ticker::after{
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
  z-index: 10;
  pointer-events: none;
}
html[dir="ltr"] .section-head-with-title .products-ticker::after{
  right: auto;
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

.section-head-with-title .products-ticker-track{
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  animation: productsTickerLoop 20s linear infinite;
  height: 30px;
}

.section-head-with-title .products-ticker-item{
  display: inline-block;
  padding: 0 18px;
  margin: 0 14px;
  white-space: nowrap;
  color: #030847 !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.section-head-with-title .products-ticker-item:nth-child(1),
.section-head-with-title .products-ticker-item:nth-child(6){
  color: #0a0a66 !important;
}
.section-head-with-title .products-ticker-item:nth-child(2),
.section-head-with-title .products-ticker-item:nth-child(4),
.section-head-with-title .products-ticker-item:nth-child(7),
.section-head-with-title .products-ticker-item:nth-child(9){
  color: #2a2aa8 !important;
}
.section-head-with-title .products-ticker-item:nth-child(3),
.section-head-with-title .products-ticker-item:nth-child(5),
.section-head-with-title .products-ticker-item:nth-child(8),
.section-head-with-title .products-ticker-item:nth-child(10){
  color: #1082ec !important;
}

html[dir="rtl"] .section-head-with-title .products-ticker-track{
  animation-name: productsTickerLoopRTL;
}
html[dir="ltr"] .section-head-with-title .products-ticker-track{
  animation-name: productsTickerLoop;
}

@keyframes productsTickerLoop{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}

@keyframes productsTickerLoopRTL{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(50%,0,0); }
}

.section-head-with-title .products-ticker:hover .products-ticker-track{
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce){
  .section-head-with-title .products-ticker-track{ animation: none; }
}

.hero{
  position: relative;
  padding: 50px 0;
  background: linear-gradient(to right, #1082ec, #1082ec);
  color: rgb(251, 251, 252);
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}
/* ===== فك ربط mid-frame عن hero وجميع القيود ===== */
.mid-frame,
.mid-frame *{
  max-width: none !important;
}
.mid-frame:not(.hero){
  max-width: none !important;
}
/* إزالة أي قيود من العناصر الأب */
body:has(.mid-frame) .mid-frame,
html:has(.mid-frame) .mid-frame{
  max-width: none !important;
  width: 100% !important;
}

.hero h1{font-size:27px;line-height:1.8}

/* ===== HERO SUB TEXT (FRAME + ANIMATION) ===== */
/* ===== HERO NEWS TICKER ===== */
/* الفريم */
/* Frame */
.hero .hero-content .ticker{
  width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(16,130,236,.25);
  border-radius: 16px;
  padding: 12px 0;
  margin: 18px 0 28px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* Track */
.hero .hero-content .ticker-track{
  display: flex;
  width: max-content;
  will-change: transform;

  /* يمنع الومضة */
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;

  animation: tickerLoop 14s linear infinite;
}

/* Each half must be identical */
.hero .hero-content .ticker-group{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* “التقاطر” بين الجُمل */
.hero .hero-content .ticker-item{
  display: inline-block;
  padding: 0 18px;
  margin: 0 14px;           /* بدل gap لتقليل مشاكل القياس */
  white-space: nowrap;

  color: #1082ec;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

/* حركة سلسة بدون نبضة */
@keyframes tickerLoop{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}

/* RTL: خلي الحركة يمين->شمال (العادي في العربي) */
html[dir="rtl"] .hero .hero-content .ticker-track{
  animation-name: tickerLoopRTL;
}

@keyframes tickerLoopRTL{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(50%,0,0); }
}

/* وقف عند الهوفر */
.hero .hero-content .ticker:hover .ticker-track{
  animation-play-state: paused;
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .hero .hero-content .ticker-track{ animation: none; }
}

.blue-line{width:140px;height:1.8px;background:var(--lightBlue);margin:0 0 20px;border-radius:999px}
.hero h1{
  margin-top: 30px;      /* مسافة إضافية لو حابب */
}

.hero-content{
  text-align: right; /* يخلي باقي النص RTL طبيعي */
}

.hero h1{
  text-align: center;
  margin-bottom: 18px;
}

/* ===== WHY HEAD (separated controls) ===== */
.why-head{
  margin-bottom: 18px;
  justify-content: flex-start; /* بدل space-between */
}

.why-text{
  width:100%;
  text-align:center;
}

.why-title{
  display: block;
  width: fit-content;
  margin: 0 auto 12px;
  font-size: 30px;
  font-weight: 900;
  color: #0d3c94;
}

.why-desc{
  display: block;
  width: fit-content;
  margin: 0 auto 8px;
  font-size: 24px;
  font-weight: 700;
  color: #1082ec;
  white-space: nowrap;
}

.why-note{
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-size: 20px;
  font-weight: 500;
  color: #0d3c94;
  white-space: nowrap;
}

.p-body{
  padding: 14px 14px 18px;
  text-align: center;     /* سنترة الكلام */
}



/* LTR */
html[dir="ltr"] .p-body{ text-align:left; }

/* Product page */
.product-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:start;
  margin-top:32px;  /* مسافة تحت أزرار العودة */
}
/* ===== الصفحات الفرعية: نفس عرض وتنسيق الرئيسية ===== */
.mid-frame{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow-x: visible !important;
  position: relative !important;
}
.mid-frame section{
  padding: 20px 24px;
  overflow-x: visible !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
/* ===== فصل section في الصفحات الفرعية عن الرئيسية ===== */
.mid-frame section:has(.cards-nine),
.mid-frame section:has(.cards-main){
  padding: 10px 0 !important;
  display: flex !important;
  justify-content: center !important;
}
/* ===== تقليل الفراغ بين الهيدر وأول صف صور في صفحة المنتجات الرئيسية ===== */
/* ===== عنوان الصفحة - محاذاة مع بداية أول صورة (مثبت - لا تغيير) ===== */
.mid-frame section:has(.cards-main) .section-head{
  margin-bottom: 5px !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  position: relative !important;
}
.mid-frame section:has(.cards-main) .section-head-with-title{
  justify-content: flex-start !important;
}
.mid-frame section:has(.cards-main) .section-head-title-wrap{
  position: relative !important;
  margin-right: auto !important;
  margin-left: calc(50% - (400px * 3 + 32px * 2) / 2) !important;
  width: fit-content !important;
}
html[dir="rtl"] .mid-frame section:has(.cards-main) .section-head-title-wrap{
  margin-right: calc(50% - (400px * 3 + 32px * 2) / 2) !important;
  margin-left: auto !important;
}
html[dir="ltr"] .mid-frame section:has(.cards-main) .section-head-title-wrap{
  margin-left: calc(50% - (400px * 3 + 32px * 2) / 2) !important;
  margin-right: auto !important;
}
@media (max-width: 1400px){
  .mid-frame section:has(.cards-main) .section-head-title-wrap{
    margin-left: 0 !important;
  }
  html[dir="rtl"] .mid-frame section:has(.cards-main) .section-head-title-wrap{
    margin-right: 0 !important;
  }
}
/* ===== زر العودة للرئيسية - مربوط بنهاية آخر صورة من اليمين ===== */
.mid-frame section:has(.cards-main) .back-home-btn{
  position: absolute !important;
  right: calc(50% + (400px * 3 + 32px * 2) / 2) !important;
  left: auto !important;
  margin: 0 !important;
}
html[dir="rtl"] .mid-frame section:has(.cards-main) .back-home-btn{
  right: calc(50% + (400px * 3 + 32px * 2) / 2) !important;
  left: auto !important;
}
html[dir="ltr"] .mid-frame section:has(.cards-main) .back-home-btn{
  right: auto !important;
  left: calc(50% + (400px * 3 + 32px * 2) / 2) !important;
}
@media (max-width: 1400px){
  .mid-frame section:has(.cards-main) .back-home-btn{
    right: calc(50% + (400px * 3 + 32px * 2) / 2) !important;
  }
  html[dir="ltr"] .mid-frame section:has(.cards-main) .back-home-btn{
    right: auto !important;
    left: calc(50% + (400px * 3 + 32px * 2) / 2) !important;
  }
}
.mid-frame section:has(.cards-main) .container{
  padding-top: 0 !important;
}
.mid-frame .container{
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: visible !important;
  position: relative !important;
}
/* استثناء صفحة خامات أولية من padding: 0 - قاعدة أكثر تحديداً */
.mid-frame section:has(.cards-nine) .container{
  padding-left: 300px !important;
  padding-right: 300px !important;
  max-width: 1800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
}

/* ===== Grid الكروت (صفحة المنتجات) ===== */
.cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  align-items:stretch;
}

/* ===== الكارت الموحد: صورة مربعة + نص ربع المساحة + خطوط وأزرار موحدة ===== */
/* ملاحظة: القواعد الأساسية فقط - كل صفحة تحدد حجمها وقياساتها الخاصة */
.card{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 0;
}
/* ===== إزالة القواعد العامة التي تؤثر على جميع الصفحات ===== */
.card:not(.cards-main .card):not(.cards-nine .card){
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}

/* صورة مربعة — قواعد أساسية فقط */
/* ملاحظة: كل صفحة تحدد حجم الصورة و aspect-ratio بنفسها */
.card img{
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  flex-shrink: 0;
}

/* جسم الكارت: ربع المساحة — مساحة كافية لظهور الخط 1 والخط 2 كاملين */
.card .body{
  padding: 10px 10px 8px;
  text-align: center;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.card .actions{
  display: flex;
  justify-content: center;
  margin-top: auto;
  margin-bottom: 8px;
  flex-shrink: 0;
  padding-top: 6px;
}

/* أزرار موحدة — تصغير بسيط */
.card .actions .btn,
.card .actions .btn.small{
  background: #030847;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.card .actions .btn:hover,
.card .actions .btn.small:hover{
  background: #051a6e;
}


/* الزرارين اللي فوق */
.section-head .btn.secondary{
  background:#030847;   /* لون الزر */
  color:#fff;           /* لون الخط */
  font-size:15px;       /* حجم الخط */
  padding:10px 22px;    /* حجم الزر */
  border-radius:4px;
}
html[dir="ltr"] .section-head:not(.mid-frame section:has(.cards-main) .section-head) > div:last-child{
  order: -1;
}

/* خط 1 (العنوان): قواعد افتراضية - كل صفحة تحدد حجمها ووزنها */
.card .body h3{
  color: #030847;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 3px;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* خط 2 (الوصف): قواعد افتراضية - كل صفحة تحدد حجمها ووزنها */
.card .body p{
  color: #1082ec;
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== فصل كل صفحة عن الأخرى - قواعد منفصلة لكل صفحة ===== */

/* ===== فصل الكونتينر لكل صفحة - مع حدود واضحة ===== */
/* صفحة خامات أولية (cards-nine) - صف 3 صور */
.mid-frame section:has(.cards-nine) .container{
  max-width: 1800px !important;
  width: 100% !important;
  padding-left: 300px !important;
  padding-right: 300px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
/* ===== إزالة قيود container في صفحة المنتجات الرئيسية ===== */
.mid-frame section:has(.cards-main) .container{
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* ===== فصل قواعد cards العامة - كل صفحة لها قواعدها الخاصة ===== */
.mid-frame .cards:not(.cards-main):not(.cards-nine){
  justify-content: center;
  width: auto !important;
  max-width: fit-content !important;
  min-width: fit-content !important;
  overflow: visible !important;
  margin: 0 auto !important;
  box-sizing: content-box !important;
}

/* ===============================
   MOBILE ROOT FIX (CRITICAL)
   =============================== */
@media (max-width: 1024px){
  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* كسر أي كونتينر ثابت */
  .container,
  .wrapper,
  .main,
  .content,
  .page,
  section,
  article{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  /* منع تصغير الصفحة */
  body{
    zoom:1 !important;
    transform:none !important;
  }
}

/* ===== قواعد الموبايل - تطبق على جميع الأجهزة المحمولة (iPhone, Samsung, Pro Max, والشاشات الأصغر) ===== */
@media (max-width: 1023px){
  /* إلغاء قواعد الشاشات الكبيرة على الموبايل */
  .cards-main{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 0 12px !important;
  }
  .cards-main .card{
    width: calc((100% - 16px) / 2) !important;
    max-width: calc((100% - 16px) / 2) !important;
    min-width: 0 !important;
    flex: 0 0 calc((100% - 16px) / 2) !important;
  }
  .cards-main .card img{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    object-fit: cover !important;
  }
  .cards-nine{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 0 12px !important;
  }
  .cards-nine .card{
    width: calc((100% - 16px) / 2) !important;
    max-width: calc((100% - 16px) / 2) !important;
    min-width: 0 !important;
    flex: 0 0 calc((100% - 16px) / 2) !important;
  }
  .cards-nine .card img{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }
  .raw-materials-ticker{
    display: none !important;
  }
  .product-hero-texapon{
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 16px !important;
  }
  .product-hero-texapon .product-hero-image .gallery-single img{
    height: auto !important;
    max-height: 300px !important;
    width: 100% !important;
  }
  .product-hero-texapon .product-box-texapon{
    min-height: auto !important;
  }
  /* إلغاء قواعد الشاشات الكبيرة للـ section-head - إصلاح نهائي للأزرار */
  .mid-frame section:has(.cards-main) .section-head,
  .mid-frame section:has(.cards-nine) .section-head,
  .mid-frame section .section-head,
  .section-head{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 0 12px !important;
    width: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
    position: static !important;
  }
  /* إلغاء position absolute للأزرار على الموبايل - إصلاح نهائي */
  .mid-frame section:has(.cards-main) .back-home-btn,
  .mid-frame section:has(.cards-nine) .back-home-btn,
  .mid-frame section:has(.cards-nine) .section-head-buttons,
  .mid-frame section .back-home-btn,
  .mid-frame section .section-head-buttons,
  .back-home-btn,
  .section-head-buttons,
  .section-head .back-home-btn,
  .section-head .section-head-buttons{
    position: static !important;
    right: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* إلغاء أي calc() للأزرار على الموبايل */
  .mid-frame section:has(.cards-main) .back-home-btn[style*="left"],
  .mid-frame section:has(.cards-main) .back-home-btn[style*="right"],
  .mid-frame section:has(.cards-nine) .back-home-btn[style*="left"],
  .mid-frame section:has(.cards-nine) .back-home-btn[style*="right"]{
    left: auto !important;
    right: auto !important;
  }
  /* إلغاء padding-left/right الكبير على الموبايل */
  .mid-frame section:has(.cards-nine) .container,
  .mid-frame section:has(.cards-nine) .section-head,
  .mid-frame section .container{
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
  }
  /* إلغاء margin-left/right الكبير على الموبايل */
  .mid-frame section:has(.cards-nine) .section-head-title-wrap,
  .mid-frame section .section-head-title-wrap{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    position: static !important;
  }
  .section-head-with-title .products-ticker{
    display: none !important;
  }
  /* منع overflow-x على الموبايل */
  body,
  html{
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .mid-frame,
  .mid-frame section,
  .mid-frame .container,
  .container{
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  /* إلغاء أي قواعد absolute أو fixed للـ section-head على الموبايل - إصلاح نهائي */
  .mid-frame section .section-head,
  .mid-frame section .section-head *,
  .mid-frame section .back-home-btn,
  .mid-frame section .section-head-buttons,
  .mid-frame section .section-head-title-wrap{
    position: static !important;
  }
  /* إصلاح نهائي: إلغاء جميع قواعد position absolute للأزرار على الموبايل */
  .back-home-btn,
  .section-head-buttons,
  .section-head .btn,
  .section-head a.btn{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
  /* إصلاح نهائي: جعل section-head-buttons في flexbox عادي */
  .section-head-buttons{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .section-head-buttons .btn,
  .section-head-buttons a{
    width: 100% !important;
    text-align: center !important;
  }
}

/* ===== إصلاح الأزرار على الموبايل - إصلاح نهائي للفراغ الأبيض ===== */
@media (max-width: 768px){
  /* الأزرار الفعلية في الموقع - إلغاء position absolute نهائياً */
  .back-home-btn,
  .section-head-buttons,
  .back-buttons,
  .side-buttons,
  .page-actions,
  .mid-frame section .back-home-btn,
  .mid-frame section .section-head-buttons{
    position:static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width:100% !important;
    max-width: 100% !important;
    display:flex !important;
    flex-direction: column !important;
    justify-content:center !important;
    gap:10px !important;
    margin:15px 0 !important;
    padding: 0 12px !important;
  }

  .back-home-btn a,
  .section-head-buttons a,
  .back-buttons a,
  .side-buttons a,
  .section-head-buttons .btn{
    width:100% !important;
    max-width: 100% !important;
    min-width:auto !important;
    text-align:center !important;
    display: block !important;
  }
  
  /* إصلاح نهائي: إلغاء أي calc() للأزرار */
  .mid-frame section:has(.cards-main) .back-home-btn,
  .mid-frame section:has(.cards-nine) .back-home-btn,
  .mid-frame section:has(.cards-nine) .section-head-buttons{
    position: static !important;
    left: auto !important;
    right: auto !important;
  }
}

/* ===== قواعد للشاشات الصغيرة جداً (أقل من 480px) - كارت واحد في الصف ===== */
@media (max-width: 480px){
  /* الكروت: كارت واحد في الصف */
  .cards-main .card,
  .cards-nine .card,
  .features-section .cards .p-card{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  
  /* الهيدر أصغر */
  .top-header{
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
  .top-header .social-icons i,
  .top-header .social-icons .social-haraj{
    font-size: 16px !important;
  }
  .brand .title strong{
    font-size: 16px !important;
  }
  .brand .title span{
    font-size: 11px !important;
  }
  
  /* النصوص أصغر */
  .hero-content h1{
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
  }
  .product-box h1{
    font-size: 20px !important;
  }
  .section-head-title{
    font-size: 16px !important;
  }
  
  /* الأزرار أصغر */
  .btn{
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
  #loginLink{
    font-size: 12px !important;
    padding: 5px 10px !important;
  }
  
  /* المسافات أصغر */
  .mid-frame section{
    padding: 12px 8px !important;
  }
  .container{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ===== صفحة المنتجات الرئيسية (cards-main) - قواعد منفصلة - للشاشات الكبيرة فقط ===== */
@media (min-width: 1024px){
  .cards-main{
    display: grid;
    grid-template-columns: repeat(3, 400px);
    column-gap: 32px;
    row-gap: 16px;
    max-width: fit-content !important;
    width: fit-content !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .cards-main .card{
    width: 400px !important;
    max-width: 400px !important;
    min-width: 400px !important;
    flex: none !important;
  }
  .cards-main .card img{
    width: 100% !important;
    aspect-ratio: auto !important;
    height: 350px !important;
    object-fit: cover;
    object-position: center;
  }
  .cards-main .card .body{
    padding: 10px 10px 8px !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .cards-main .card .actions{
    margin-top: auto !important;
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
  }
  .cards-main .card .actions .btn{
    font-size: 13px !important;
    padding: 7px 14px !important;
  }
  .cards-main .card:nth-child(1),
  .cards-main .card:nth-child(2),
  .cards-main .card:nth-child(3){
    width: 400px !important;
    max-width: 400px !important;
    min-width: 400px !important;
    flex: none !important;
    grid-column: auto !important;
  }
  .cards-main .card:nth-child(1){ grid-column: 1 !important; }
  .cards-main .card:nth-child(2){ grid-column: 2 !important; }
  .cards-main .card:nth-child(3){ grid-column: 3 !important; }
  /* الصف الثاني: غلاف يضم الصورتين 4 و 5 فقط ويوسّطهما معاً في منتصف الصفحة */
  .cards-main .cards-main-row2{
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: nowrap;
  }
  .cards-main .cards-main-row2 .card{
    flex: 0 0 400px;
    width: 400px;
    max-width: 400px;
    min-width: 400px;
  }
  /* ===== ضمان أن جميع صور صفحة المنتجات الرئيسية 400x350 ===== */
  .cards-main .card{
    width: 400px !important;
    max-width: 400px !important;
    min-width: 400px !important;
    height: auto;
  }
  .cards-main .card img{
    width: 100% !important;
    height: 350px !important;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }
  /* ===== تكبير خط 1 وخط 2 في صفحة المنتجات الرئيسية ===== */
  .cards-main .card .body h3{
    font-size: 20px !important;
    font-weight: 800 !important;
  }
  .cards-main .card .body p{
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  /* ===== تثبيت زر عرض المنتجات في أسفل الكارت ===== */
  .cards-main .card{
    min-height: fit-content;
  }
  .cards-main .card .body{
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .cards-main .card .actions{
    margin-top: auto !important;
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
    padding-top: 6px !important;
  }
}


/* ===== صفحة خامات أولية (cards-nine) - قواعد منفصلة - للشاشات الكبيرة فقط ===== */
@media (min-width: 1024px){
  .cards-nine{
    display: grid !important;
    grid-template-columns: repeat(3, 300px) !important;
    column-gap: 16px !important;
    row-gap: 16px !important;
    justify-content: center !important;
    max-width: fit-content !important;
    width: fit-content !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  /* تأكيد أن الكروت 300px عرض و 250px ارتفاع للصور */
  .cards-nine .card{
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    flex: none !important;
    box-sizing: border-box !important;
  }
  .cards-nine .card img{
    width: 100% !important;
    max-width: 300px !important;
    aspect-ratio: auto !important;
    height: 250px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  .cards-nine .card .body{
    padding: 10px 10px 8px !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .cards-nine .card .body h3{
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  .cards-nine .card .body p{
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1082ec !important;
  }
  .cards-nine .card .actions{
    margin-top: auto !important;
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
  }
  .cards-nine .card .actions .btn{
    font-size: 13px !important;
    padding: 7px 14px !important;
  }
}

/* صفحة خامات أولية فقط: إخفاء السطر 2 (الوصف) من كل الكروت */
body.page-raw .card .body p{
  display: none !important;
}

/* ===== صفحة خامات أولية - إزالة جميع القواعد المتعلقة بالهيدر ===== */
/* لا نضيف قواعد خاصة للهيدر في صفحة خامات أولية - نترك القواعد العامة من الصفحة الرئيسية تعمل */
/* الأزرار */
body.page-raw .btn{
  zoom: 1 !important;
  transform: none !important;
  font-size: 16px !important;
  padding: 8px 8px !important;
}
body.page-raw .btn.secondary{
  font-size: 15px !important;
  padding: 10px 22px !important;
}
body.page-raw .btn.small{
  font-size: 13px !important;
  padding: 7px 14px !important;
}
body.page-raw .section-head .btn.secondary{
  font-size: 15px !important;
  padding: 10px 22px !important;
}
/* الصور - استثناء زر الواتساب */
body.page-raw img:not(.whatsapp-float img){
  zoom: 1 !important;
  transform: none !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
}
body.page-raw .cards-nine .card img{
  width: 100% !important;
  height: 250px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}
/* إصلاح زر الواتساب في صفحة خامات أولية */
body.page-raw .whatsapp-float{
  zoom: 1 !important;
  transform: none !important;
  height: 48px !important;
  padding: 0 12px !important;
  min-width: auto !important;
  width: auto !important;
  max-width: none !important;
}
body.page-raw .whatsapp-float img{
  zoom: 1 !important;
  transform: none !important;
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
}
body.page-raw .wa-text{
  zoom: 1 !important;
  transform: none !important;
  font-size: 15px !important;
}
/* الكونتينر والـ mid-frame - إزالة القواعد المتعارضة */
/* نترك القواعد العامة تعمل */
/* الكروت */
body.page-raw .cards-nine{
  zoom: 1 !important;
  transform: none !important;
}
body.page-raw .cards-nine .card{
  zoom: 1 !important;
  transform: none !important;
  width: 300px !important;
  max-width: 300px !important;
  min-width: 300px !important;
}
body.page-raw .cards-nine .card .body h3{
  font-size: 15px !important;
  font-weight: 700 !important;
}
body.page-raw .cards-nine .card .actions .btn{
  font-size: 13px !important;
  padding: 7px 14px !important;
}

/* ===== Loop عرض أسماء الخامات في الفراغ الشمال - جميع الصفحات الفرعية - للشاشات الكبيرة فقط ===== */
@media (min-width: 1024px){
  .raw-materials-ticker{
    position: fixed !important;
    left: 75px !important;
    top: 50vh !important;
    transform: translateY(-50%) !important;
    width: 250px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    z-index: 9999 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }
  html[dir="rtl"] .raw-materials-ticker{
    left: auto !important;
    right: 75px !important;
    justify-content: flex-end !important;
    padding-right: 0 !important;
  }
  .raw-materials-ticker .ticker-item{
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out, transform 0.6s ease-in-out;
    font-size: 25.2px;
    font-weight: 800;
    font-family: 'Noto Kufi Arabic', 'Arial', 'Tahoma', sans-serif;
    text-align: left;
    white-space: nowrap;
    line-height: 1.3;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    color: #1082ec;
  }
  .raw-materials-ticker .ticker-item.active{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .raw-materials-ticker .ticker-item.prev{
    opacity: 1;
    visibility: visible;
    transform: translateY(-100px);
  }
  html[dir="rtl"] .raw-materials-ticker .ticker-item{
    text-align: right;
  }
  .raw-materials-ticker .ticker-item.active{
    opacity: 1;
    visibility: visible;
  }
}
@media (max-width: 1400px){
  .raw-materials-ticker{
    display: none;
  }
}

/* صفحة العناية الشخصية فقط: إخفاء السطر 2 بالكامل من كل الكروت */
body.page-cosmetics .card .body p{
  display: none !important;
}




/* زر واتساب */
.btn.green{
  background:#030847;
  color:#fff;
  font-size:14px;
  padding:10px 20px;
  border-radius:4px;
}

/* زر الكتالوج */
.btn.secondary{
  background:#030847;
  color:#fff;
  font-size:14px;
  padding:10px 20px;
  border-radius:4px;
}

/* Hover */
.btn.green:hover{
  background:#1ebe5d;
}

.btn.secondary:hover{
  background:#030847;
}




/* Hover */
.section-head .btn.secondary:hover{
  background:#030847;
}

/* ===== إطار وميض لأزرار العودة (2 ثانية، أزرق #1082ec، رفيع 2px) ===== */
a.btn.secondary[data-ar^="العودة"]{
  position:relative;
}
a.btn.secondary[data-ar^="العودة"]::before{
  content:"";
  position:absolute;
  inset:-5px;
  border:2px solid #1082ec;
  border-radius:6px;
  pointer-events:none;
  animation: backBtnFlash 2s ease-in-out infinite;
}
@keyframes backBtnFlash{
  0%, 100%{ opacity:0.25; }
  50%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  a.btn.secondary[data-ar^="العودة"]::before{ animation:none; opacity:0.6; }
}


.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.gallery img{
  height:350px;
  width:250px;          /* العرض */
  max-width:520px;     /* صغّر/كبّر حسب ما تحب */
  object-fit:cover;
  border-radius:16px;
  border:1px solid var(--line);
}


/* صندوق المنتج */
.product-box{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  background:#1082ec;        /* خلفية الصندوق */
  box-shadow:var(--shadow);
}

/* اسم المنتج */
.product-box h1{
  font-size:34px;
  line-height:1.2;
  color:#ffffff;            /* مهم: علشان يظهر */
  margin:0;
}

/* وصف مختصر */
.product-box .sub{
  color:white;            /* أفتح من الأبيض */
  margin-top:10px;
  font-size:20px;
}

/* جدول المواصفات */
.product-spec{
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* كارت المواصفة */
.spec{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:#ffffff;       /* فصل عن الأزرق */
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* عنوان المواصفة */
.spec strong{
  display:block;
  font-size:20px;
  color:#030847;
  margin-bottom:4px;
}

/* قيمة المواصفة */
.spec span{
  color:#1082ec;
  font-size:20px;
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
.product-box h1{
  font-weight:800;
}

.product-box,
.product-box *{
  font-weight:700;
}

.product-box{
  max-width:400px;   /* قلّل/زوّد */
  width:100%;
}
.product-spec{
  grid-template-columns:1fr;
  max-width:300px;
  margin:20px auto;
}

/* ===== الصفحة الرئيسية للمنتج (كليرون جل): فريم الكلام بمحاذاة الصور + خطوط أصغر ===== */
.product-hero:has(.gallery){
  align-items:stretch;
  margin-top:16px;  /* أقل من الفرعية علشان الفرعيات تظهر بدون سكرول */
}
.product-hero:has(.gallery) .gallery img{
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
}
.product-hero:has(.gallery) .product-box{
  max-height: 280px;
  max-width: 280px;
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.product-hero:has(.gallery) .product-box h1{
  font-size:22px;
  line-height:1.25;
}
.product-hero:has(.gallery) .product-box .sub{
  font-size:14px;
  margin-top:6px;
}
.product-hero:has(.gallery) .product-spec{
  margin-top:8px;
  gap:6px;
  max-width:100%;
}
.product-hero:has(.gallery) .spec{
  padding:8px 10px;
}
.product-hero:has(.gallery) .spec strong{
  font-size:14px;
  margin-bottom:2px;
}
.product-hero:has(.gallery) .spec span{
  font-size:14px;
}
.product-hero:has(.gallery) .product-box hr.sep{
  margin:8px 0;
}
.product-hero:has(.gallery) .product-box .btn{
  font-size:13px;
  padding:6px 14px;
}

/* ===== تنسيق الـ 3 بنود (صورة + حاوية كلام + جدول) — الجدول ينتهي عند الصورة مش عند زرار العودة - للشاشات الكبيرة فقط ===== */
@media (min-width: 1024px){
  .page-frame section .container:has(.product-hero-texapon){
    min-width: 1000px;
  }
  .product-hero-texapon{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    max-width: 1012.5px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  /* الصف الأول: حاوية الكلام (يمين) + الصورة (شمال) — عرضين متساويين. لا تغيير يحرك الصورة أو الجدول. */
  .product-hero-texapon .product-box-texapon{
    width: 100%;
    max-width: 100%;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .product-hero-texapon .product-hero-image{
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: flex-start;
    justify-content: stretch;
    box-sizing: border-box;
  }
  .product-hero-texapon .gallery-single{
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .product-hero-texapon .gallery-single img{
    width: 100%;
    max-width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    border: 1px solid var(--line);
  }
  /* الجدول: بداية الجدول مع بداية حاوية الكلام — عرض مستقل عن الكونتينر. لا تغيير. */
  .product-hero-texapon .technical-data-table{
    grid-column: 1 / -1;
    margin-top: 20px;
    margin-inline-end: auto;  /* يلصق الجدول ببداية حاوية الكلام (يمين في RTL) */
    width: 100%;
    max-width: 790px;
    box-sizing: border-box;
    min-width: 0;
  }
}
/* جدول البيانات الفنية — واضح وكبير ومقروء */
.technical-data-table{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 0;
}
.product-hero-texapon .technical-data-table .mds-title{
  font-size: 1.35rem;
  font-weight: 700;
  color: #030847;
  margin: 0 0 14px 0;
  padding: 0;
  text-align: center;
}
.mds-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
  line-height: 1.5;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.mds-table thead{
  background: #030847;
  color: #fff;
}
.mds-table th{
  padding: 14px 18px;
  text-align: right;
  font-weight: 700;
  font-size: 1.1rem;
}
.mds-table td{
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  color: #2e2e2e;
}
.mds-table tbody tr:last-child td{
  border-bottom: none;
}
.mds-table tbody tr:nth-child(even){
  background: #f8f9fa;
}
.mds-table tbody tr:hover{
  background: #e8f4fd;
}
/* تقليل المسافة فوق أزرار الفرعيات */
.page-frame section:has(.sub-products-section) .sub-products-section{
  margin-top:20px;
  padding-top:16px;
}
.page-frame section:has(.sub-products-section) .sub-products-section h3{
  font-size:1.1rem;
  margin-bottom:8px;
}
.page-frame section:has(.sub-products-section) .sub-products-list .btn{
  font-size:13px;
  padding:6px 14px;
}

/* منطقة صورة المنتج + نص العبوة (صفحات المنتجات الفرعية) */
.product-image-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  max-width:520px;
  width:100%;
}
.product-image-block img{
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}
.product-pack{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#030847;
  text-align:center;
}
/* الصفحات الفرعية: إنزال الفوتر (فقط صفحات المنتج الفرعي) */
.page-frame section:has(.product-hero){
  padding-bottom:56px;
}
/* ===== قواعد product-hero للموبايل - تطبق على جميع الأجهزة المحمولة ===== */
@media (max-width: 1023px){
  .product-hero{
    grid-template-columns: 1fr !important;
    margin-top: 24px !important;
    gap: 16px !important;
  }
  .product-hero-texapon{
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }
  .product-hero-texapon .product-hero-image .gallery-single img{
    height: auto !important;
    max-height: 300px !important;
    width: 100% !important;
  }
  .product-hero-texapon .product-box-texapon{
    min-height: auto !important;
  }
  .product-image-block{
    order: -1;  /* الصورة فوق على الموبايل */
  }
  .product-image-block img{
    max-width: 100% !important;
    width: 100% !important;
    aspect-ratio: 1;
  }
  .product-hero:has(.gallery){
    grid-template-columns: 1fr !important;
  }
  .product-hero:has(.gallery) .gallery img{
    max-width: 100% !important;
    width: 100% !important;
  }
  .product-hero:has(.gallery) .product-box{
    max-width: 100% !important;
    max-height: none !important;
  }
}

.video{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:visible;background:#fff;box-shadow:var(--shadow);
  padding:15px;
}
.video iframe{width:100%;height:320px;border:0;border-radius:var(--radius);}
.video h3{
  margin-top:15px;
  margin-bottom:0;
  font-size:1.1em;
  color:var(--text);
  text-align:center;
  font-weight:600;
}
.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:20px;
  margin-top:30px;
}
@media (max-width:768px){
  .media-grid{
    grid-template-columns:1fr;
  }
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.gallery-grid img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  border: 1px solid var(--line);
}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
/* العناوين والرؤوس فقط: لون خط = لون خلفية الهيدر (من نحن، المنتجات) */
.contact-card h3,
.contact-map-section h3,
.contact-grid .contact-card:first-child p strong,
.contact-grid .contact-card:first-child .contact-company-info p strong,
.contact-card .field label{
  color: #030847;
}
.contact-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  background:#fff;
  box-shadow:var(--shadow);
  color:var(--dark);
}
.contact-card a{
  color:#1082ec;
}
.contact-card a:hover{
  text-decoration:underline;
}
.contact-card .contact-phone-line .fa-phone{
  margin-left: 0.25em;
  font-size: 0.95em;
}
/* الفريم الأيمن (بيانات التواصل): خط أصغر + مسافة بين الكلمة والإيميل، المحتوى يبدأ من أول الفريم */
.contact-grid .contact-card:first-child{
  font-size: 0.9rem;
}
.contact-grid .contact-card:first-child p a{
  color: #1082ec;
  font-weight: 700;
  margin-inline-start: 1.5em;
}
.contact-grid .contact-card:first-child p a[href^="mailto"]{
  font-weight: 700;
}
/* البلوك الأول: الإيميلات والتواصل — المسافات البينية فقط */
.contact-grid .contact-card:first-child > p{
  margin-top: 0.4em;
  margin-bottom: 0.4em;
  line-height: 1.55;
}
.contact-grid .contact-card:first-child > p:first-of-type{
  margin-top: 0.75rem;
}
/* فاصل ثابت بين البلوكين: بلوك الإيميلات والتواصل ← بلوك معلومات الشركة */
.contact-grid .contact-card:first-child .contact-company-info{
  margin-top: 2.5rem;
  margin-bottom: 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.contact-grid .contact-card:first-child .contact-company-info p{
  margin-top: 0.4em;
  margin-bottom: 0.4em;
  line-height: 1.55;
}
.contact-grid .contact-card:first-child .contact-company-info p:last-child{
  margin-bottom: 0;
}
/* اسم الشركة: مسافة كبيرة قبل ":- " واسم الشركة بفونط تقيل وأزرق الهيدر */
.contact-label-sep{
  margin-inline-start: 1.2em;
}
.contact-company-name{
  font-weight: 700;
  color: #1082ec;
}
.form-msg{
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.form-msg.success{
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.form-msg.error{
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

.contact-map-section{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--dark);
}
.contact-map-section h3{
  color: #030847;
  margin-bottom: 8px;
  font-size: 1.35rem;
}
.contact-address{
  margin-bottom: 16px;
  color: var(--muted);
}
.contact-map-wrap{
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto 12px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.contact-map-label{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 8px 14px;
  background: #fff;
  color: #030847;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  border: 1px solid var(--line);
}
[dir="rtl"] .contact-map-label{ right: auto; left: 12px; }
.contact-map{
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}
.contact-map-hint{
  font-size: 0.85rem;
  color: var(--muted);
}

.sub-products-section{
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--dark);
}
.sub-products-section h3{
  margin-bottom: 12px;
  font-size: 1.25rem;
  color: #030847;
}
.sub-products-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sub-products-list li{
  margin: 0;
}

.field{
  display:flex;flex-direction:column;gap:8px;margin-bottom:12px;
}
.contact-card .field label{
  color:#030847;
  font-family: Almarai, Cairo, sans-serif;
  font-size: 18px;
  font-weight: 700;
}
/* الفريم الشمال (نموذج رسالة): بونط واحد لكل المحتوى */
.contact-grid .contact-card:has(form){
  font-size: 0.9rem;
}
.contact-grid .contact-card:has(form) .field label,
.contact-grid .contact-card:has(form) select,
.contact-grid .contact-card:has(form) select option{
  font-size: 1em;
}
input, textarea, select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  outline:none;
}
.contact-card select,
.contact-card select option{
  color:#030847;
  font-family: Almarai, Cairo, sans-serif;
  font-size: 18px;
  font-weight: 700;
}
select{
  cursor:pointer;
  appearance:auto;
}
textarea{min-height:140px;resize:vertical}

/* زر إرسال النموذج: خلفية زرقاء وحجم خط مثل باقي الفريم */
.contact-card form .btn[type="submit"],
.contact-card button.btn[type="submit"]{
  background-color: #1082ec;
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  padding: 10px 20px;
  border: none;
  margin-top: 4px;
}
.contact-card form .btn[type="submit"]:hover,
.contact-card button.btn[type="submit"]:hover{
  background-color: #0a6bc7;
  color: #fff;
}

/* Footer */
footer{
  padding:20px 0;
  background:var(--offwhite);
  border-top:2px solid var(--gold);
  text-align:center;
  color:var(--muted);
}

/* RTL/LTR polish */
html[dir="rtl"] .menu{direction:rtl}
html[dir="ltr"] .menu{direction:ltr}
html[dir="ltr"] .navbar,
html[dir="ltr"] .nav-right,
html[dir="ltr"] .user-area{
  direction:ltr;
}

.site-footer{
  background: var(--white);
  border-top: 2px solid var(--gold);
  padding: 26px 0;
}
.footer-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}
.footer-img{
  max-width: 100%;
  max-height: 100px; 
  display:block;
}

/* ===== WhatsApp Button Fix ===== */
.whatsapp-float{
  position: fixed;
  right: 170px;
  bottom: 24px;

  height: 48px;
  padding: 0 12px;
  min-width: auto;
  width: auto;

  background: #0ab71c;
  color: #f7faf9;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;                  /* مسافة صغيرة بين النص واللوجو */
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 1200;
  text-decoration: none;
  white-space: nowrap;
}

.whatsapp-float img{
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.wa-text{
  font-size: 15px;
  font-weight: 700;
}

/* ==============================
   SOLID TRIPLE FRAME (NO GRADIENT)
   Gold | Green | Gold
   ============================== */

/* عرض الكونتينر المستخدم عندك */

/* ===== Header layout ===== */

.site-header .navbar,
.navbar{
  height: var(--sub-main-height) !important;
  min-height: var(--sub-main-height) !important;
  max-height: var(--sub-main-height) !important;
  box-sizing: border-box !important;
  max-width:1200px;   /* نفس إحساس الرئيسية */
  margin:0 auto;      /* توسيط */
  padding:0 24px;     /* نفس المسافة الجانبية */
}


/* ===== توحيد هيدر الموقع (كل الصفحات) ===== */
.site-header{
  position: sticky;
  top: var(--sub-top-height);
  width: 100%;
  background: #030847;
  height: var(--sub-main-height) !important;
  min-height: var(--sub-main-height) !important;
  max-height: var(--sub-main-height) !important;
  z-index: 99;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
#loginLink{
  color:#ffffff;      /* لون الخط */
  font-size: var(--sub-login-font) !important;     /* حجم الخط */
  font-weight: var(--sub-login-font-weight) !important;
  text-decoration:none;

  position:relative;
  top:-2px;
}
#loginLink:hover{
  color:#8cbc3f;
}

.user-area{
  margin-left:auto;   /* يروح أقصى اليمين داخل الهيدر */
  margin-right:30px;  /* مسافة من اليمين */
}

/* ===== Header must be relative ===== */

/* ===== توحيد هيدر التواصل الاجتماعي (كل الصفحات) - قواعد نهائية موحدة ===== */
.top-header{
  position:relative;
  z-index:9999;
}
.top-header{
  background:#1082ec !important;
  z-index: 100 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: var(--sub-top-height) !important;
  height: var(--sub-top-height) !important;
  max-height: var(--sub-top-height) !important;
  padding: var(--sub-top-padding) !important;
  padding-top: var(--sub-top-padding) !important;
  padding-bottom: var(--sub-top-padding) !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  display:flex !important;
  justify-content:space-between;
  align-items:center !important;
  color:#fff;
  font-size: var(--sub-top-font) !important;
  font-weight: var(--sub-top-font-weight) !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}



html, body { zoom: 1; }
.mid-frame { transform: none !important; }


/* Grid: media (left 1/3) + content (right 2/3) */
.hero-grid{
  display: grid;
  grid-template-columns: 1fr 2fr; /* يسار صورة | يمين نص */
  gap: 14px;
  align-items: start;
}

/* RTL: خلي النص يمين والصورة شمال */
html[dir="rtl"] .hero-grid{
  direction: rtl;
}
html[dir="rtl"] .hero-content{ direction: rtl; }
html[dir="rtl"] .hero-media{ direction: ltr; } /* عشان السلايدر مايتلخبطش */

/* الصورة: تاخد تلت السكشن، وفوق فقط */
.hero-media{
  width: 100%;        /* ✅ لازم */
  max-width: 100%;
  min-width: 0;
}

/* فريم الصورة */
.hero-slider{
  position: relative;
  border: 2px solid var(--gold);
  border-radius: 18px;
  background: #fff;
  padding: 10px;
  overflow: hidden;

  height: 340px;         /* <= ده اللي يتحكم في ارتفاع منطقة الصورة */
}

/* Slides */
.hero-slide{
  position: absolute;
  inset: 10px;           /* نفس padding */
  opacity: 0;
  transition: opacity .50s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slide.active{
  opacity: 1;
  z-index: 1;
}

/* الصورة: بدون قص ولا ضغط */
.hero-slide img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* ✅ احتياطي */
  display: block;
}

/* caption */
.hero-caption{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;

  background: #1082ec;
  color: #fff;

  padding: 6px 10px;
  border-radius: 12px;

  font-size: 18px;
  font-weight: 700;   /* ✅ بدل 1,2 */
  line-height: 1.2;
  text-align: center;
}


/* ===== ensure next section not blue ===== */
.hero + section,
.hero + .features-section{
  background: #fff;
}

/* ===== عرض الكونتينر في قسم المميزات = الإطار المتقطع + الكروت ===== */
.features-section .container {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
  box-sizing: border-box;
}

:root{
  --whyFrameColor: #1082ec; /* غيّر اللون براحتك */
  --whyFrameSize: 3px;      /* سمك الفريم */
  --whyLed1: #ffffff;       /* LED color 1 (White) */
  --whyLed2: #030847;       /* LED color 2 (Blue) */
  --whyLed3: #1082ec;       /* LED color 3 */
  --whyLedSpeed: 50s;       /* سرعة الحركة */
}

/* يسمح بتحريك زاوية الـ conic-gradient بسلاسة */
@property --whyLedAngle{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.why-box{
  width: 100%;
  margin: 18px auto 22px;
  padding: 22px 18px;
  background: #fff;
  border-radius: 18px;

  /* فريم مقطع - تم إزالته */
  border: none;

  /* سنترة مضمون */
  text-align: center !important;
  direction: rtl; /* خلي العربي طبيعي */

  position: relative;
}

/* LED running border (3 colors) فوق الفريم الحالي */
.why-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  /* سماكة الإطار */
  padding: var(--whyFrameSize);

  /* نمط لمبات/نقط تتكرر حول الإطار */
  background: repeating-conic-gradient(
    from var(--whyLedAngle),
    var(--whyLed1) 0 8deg,
    transparent 8deg 16deg,
    var(--whyLed2) 16deg 24deg,
    transparent 24deg 32deg,
    var(--whyLed3) 32deg 40deg,
    transparent 40deg 48deg
  );

  /* إظهار الإطار فقط بدون تغطية المحتوى */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;

  animation: whyLedRun var(--whyLedSpeed, 50s) linear infinite;
}

.why-box > *{
  position: relative;
  z-index: 1;
}

@keyframes whyLedRun{
  to{ --whyLedAngle: 360deg; }
}

@media (prefers-reduced-motion: reduce){
  .why-box::before{ animation: none; }
}

/* كل سطر لوحده وسنتر */
.why-box .why-title,
.why-box .why-desc,
.why-box .why-note{
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
}

/* ==============================
   PRODUCT CARD + SLIDER (NO JUMP)
   ============================== */
.p-card{
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}

/* مساحة ثابتة للصور */
.p-card .p-slider{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.265;   /* زيادة الطول 26.5% (15% + 10%) مع الحفاظ على العرض */
  flex-shrink: 0;
  overflow: hidden;
  background: #fff;
  line-height: 0;
}

/* ===== الرئيسية: 4 كروت جنب بعض، مربعة، ضمن عرض الكونتينر ===== */
.features-section .cards{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.features-section .cards .p-card{
  width: 200px;
  max-width: 200px;
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.features-section .p-card .p-slider{
  flex: 0 0 auto;
  width: 100%;
}

.features-section .p-card .p-body{
  flex-shrink: 0;
}

/* التراك ثابت + سنترة */
.p-card .p-track{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* الصور: مربع مع قص لتعبئة المساحة */
.p-card .p-track > img.p-slide{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  /* يمنع أي قواعد عامة */
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;

  display: none;              /* ✅ بدل opacity */
}

/* الظاهرة فقط */
.p-card .p-track > img.p-slide.active{
  display: block;
}


/* الأسهم */
.p-card .p-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #1082ec;
  cursor: pointer;
  font-size: 22px;
    line-height: 1;
}
.p-card .p-nav{
  color:#fff;
}

.p-card .p-nav.prev{ left: 6px; }
.p-card .p-nav.next{ right: 6px; }

/* نص الكارت: ربع المساحة + تصغير بسيط للخطوط */
.p-card .p-body{
  padding: 8px 10px;
  text-align: center;
  flex: 0 0 auto;
  max-height: 80px;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.p-card .p-name{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 3px;
  color: #030847;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-card .p-sub{
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  max-width: 100%;
  color: #1082ec;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* المقاس */
.hero-frame-left,
.hero-frame-right{
  position:absolute;
  top:50%;
  width:250px;
  height:200px;
  overflow:hidden;
  right: 0;
  left: auto;
}

/* اطلعهم برّه الهيرو */
.hero-frame-left{ left:0;  transform:translate(-120%, -50%); }
.hero-frame-right{ 
  transform:translate(120%, -50%);
}

.hero-frame-left img,
.hero-frame-right img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

/* Animation للوجو - 3 ثواني يمين، 1 ثانية اختفاء، 3 ثواني شمال، 1 ثانية اختفاء */
/* الدورة الكاملة: 8 ثواني */
@keyframes logoMoveFade {
  0% {
    opacity: 0;
    right: 0;
    left: auto;
    transform: translate(120%, -50%);
  }
  2% {
    opacity: 1;
    right: 0;
    left: auto;
    transform: translate(120%, -50%);
  }
  37.5% {
    opacity: 1;
    right: 0;
    left: auto;
    transform: translate(120%, -50%);
  }
  39.5% {
    opacity: 0;
    right: 0;
    left: auto;
    transform: translate(120%, -50%);
  }
  50% {
    opacity: 0;
    right: auto;
    left: 0;
    transform: translate(-120%, -50%);
  }
  52% {
    opacity: 1;
    right: auto;
    left: 0;
    transform: translate(-120%, -50%);
  }
  87.5% {
    opacity: 1;
    right: auto;
    left: 0;
    transform: translate(-120%, -50%);
  }
  89.5% {
    opacity: 0;
    right: auto;
    left: 0;
    transform: translate(-120%, -50%);
  }
  100% {
    opacity: 0;
    right: 0;
    left: auto;
    transform: translate(120%, -50%);
  }
}

.hero-frame-right {
  animation: logoMoveFade 8s infinite;
}

.hero-frame-right img {
  opacity: 1;
}

/* ===== توحيد هيدر التواصل (كل الصفحات) - تم نقل القواعد أعلاه ===== */

.top-left,
.top-right{
  display:flex;
  align-items:center;
  gap:12px;
}
.social-icons .fa-facebook-f,
.social-icons .fa-instagram,
.social-icons .fa-x-twitter,
.social-icons .fa-linkedin-in,
.social-icons .social-haraj{
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
}
.social-icons i{
  font-size: 22px;
}
.social-icons .social-haraj span{
  font-size: inherit;
  font-weight: inherit;
}
.social-icons{
  display:flex;
  gap:18px;   /* المسافة بين الأيقونات */
}


.social-icons a{
  color:#fff;
  font-size: 22px;
  text-decoration:none;
}
/* تكبير أيقونات التواصل في الهيدر حتى مع استخدام --sub-top-font */
.top-header .social-icons a,
.top-header .social-icons i,
.top-header .social-icons .social-haraj{
  font-size: 22px !important;
}

body{ overflow-x:hidden; }

/* ===== هيدر الصفحات الفرعية فقط: التحكم من المتغيرات في :root ===== */
body:has(.mid-frame) .top-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: var(--sub-top-height) !important;
  height: var(--sub-top-height) !important;
  max-height: var(--sub-top-height) !important;
  padding: var(--sub-top-padding) !important;
  padding-top: var(--sub-top-padding) !important;
  padding-bottom: var(--sub-top-padding) !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  font-size: var(--sub-top-font) !important;
  font-weight: var(--sub-top-font-weight) !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
body:has(.mid-frame) .top-header .social-icons a,
body:has(.mid-frame) .top-header .social-icons i,
body:has(.mid-frame) .top-header .social-icons .social-haraj{
  font-size: 22px !important;
  font-weight: var(--sub-top-font-weight) !important;
  line-height: 1.4 !important;
}
body:has(.mid-frame) .top-header span,
body:has(.mid-frame) .top-header a,
body:has(.mid-frame) .top-left,
body:has(.mid-frame) .top-right{
  font-size: var(--sub-top-font) !important;
  font-weight: var(--sub-top-font-weight) !important;
  line-height: 1.4 !important;
}
body:has(.mid-frame) .site-header{
  position: sticky;
  top: var(--sub-top-height);
  z-index: 99;
  height: var(--sub-main-height) !important;
  min-height: var(--sub-main-height) !important;
  max-height: var(--sub-main-height) !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
body:has(.mid-frame) .site-header .navbar,
body:has(.mid-frame) .navbar{
  height: var(--sub-main-height) !important;
  min-height: var(--sub-main-height) !important;
  max-height: var(--sub-main-height) !important;
  box-sizing: border-box !important;
}
body:has(.mid-frame) .brand .title strong{
  font-size: var(--sub-brand-title) !important;
  font-weight: var(--sub-brand-title-weight) !important;
  line-height: 1.2 !important;
}
body:has(.mid-frame) .brand .title span{
  font-size: var(--sub-brand-sub) !important;
  font-weight: var(--sub-brand-sub-weight) !important;
  line-height: 1.2 !important;
}
body:has(.mid-frame) .menu a.link,
body:has(.mid-frame) .menu a.link span{
  font-size: var(--sub-nav-font) !important;
  font-weight: var(--sub-nav-font-weight) !important;
}
body:has(.mid-frame) #loginLink{
  font-size: var(--sub-login-font) !important;
  font-weight: var(--sub-login-font-weight) !important;
}

/* ===== هيدر صفحات المنتجات التي تستخدم .page-frame (product-alternatives, product-concentrates, product-special-concentrates) ===== */
body:has(.page-frame) .top-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: var(--sub-top-height) !important;
  height: var(--sub-top-height) !important;
  max-height: var(--sub-top-height) !important;
  padding: var(--sub-top-padding) !important;
  padding-top: var(--sub-top-padding) !important;
  padding-bottom: var(--sub-top-padding) !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  font-size: var(--sub-top-font) !important;
  font-weight: var(--sub-top-font-weight) !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
body:has(.page-frame) .top-header .social-icons a,
body:has(.page-frame) .top-header .social-icons i,
body:has(.page-frame) .top-header .social-icons .social-haraj{
  font-size: 22px !important;
  font-weight: var(--sub-top-font-weight) !important;
  line-height: 1.4 !important;
}
body:has(.page-frame) .top-header span,
body:has(.page-frame) .top-header a,
body:has(.page-frame) .top-left,
body:has(.page-frame) .top-right{
  font-size: var(--sub-top-font) !important;
  font-weight: var(--sub-top-font-weight) !important;
  line-height: 1.4 !important;
}
body:has(.page-frame) .site-header{
  position: sticky;
  top: var(--sub-top-height);
  z-index: 99;
  height: var(--sub-main-height) !important;
  min-height: var(--sub-main-height) !important;
  max-height: var(--sub-main-height) !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
body:has(.page-frame) .site-header .navbar,
body:has(.page-frame) .navbar{
  height: var(--sub-main-height) !important;
  min-height: var(--sub-main-height) !important;
  max-height: var(--sub-main-height) !important;
  box-sizing: border-box !important;
}
body:has(.page-frame) .brand .title strong{
  font-size: var(--sub-brand-title) !important;
  font-weight: var(--sub-brand-title-weight) !important;
  line-height: 1.2 !important;
}
body:has(.page-frame) .brand .title span{
  font-size: var(--sub-brand-sub) !important;
  font-weight: var(--sub-brand-sub-weight) !important;
  line-height: 1.2 !important;
}
body:has(.page-frame) .menu a.link,
body:has(.page-frame) .menu a.link span{
  font-size: var(--sub-nav-font) !important;
  font-weight: var(--sub-nav-font-weight) !important;
}
body:has(.page-frame) #loginLink{
  font-size: var(--sub-login-font) !important;
  font-weight: var(--sub-login-font-weight) !important;
}

/* ===== هيدر الصفحة الرئيسية (index.html) - sticky behavior ===== */
body:not(:has(.mid-frame)):not(:has(.page-frame)) .top-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}
body:not(:has(.mid-frame)):not(:has(.page-frame)) .site-header{
  position: sticky;
  top: var(--sub-top-height);
  z-index: 99;
}

/* ===== توحيد الهيدر في كل الصفحات (كروم + إيدج + غيره) من المتغيرات أعلاه ===== */
/* ===== توحيد هيدر التواصل - تم نقل القواعد أعلاه ===== */
.top-header .social-icons a,
.top-header .social-icons i,
.top-header .social-icons .social-haraj{
  font-size: 22px !important;
  font-weight: var(--sub-top-font-weight) !important;
  line-height: 1.4 !important;
}
.top-header span,
.top-header a,
.top-left,
.top-right{
  font-size: var(--sub-top-font) !important;
  font-weight: var(--sub-top-font-weight) !important;
  line-height: 1.4 !important;
}
.top-header .social-icons a,
.top-header .social-icons i,
.top-header .social-icons .social-haraj{
  font-size: 22px !important;
  font-weight: var(--sub-top-font-weight) !important;
  line-height: 1.4 !important;
}
.site-header{
  height: var(--sub-main-height) !important;
  min-height: var(--sub-main-height) !important;
  max-height: var(--sub-main-height) !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
.site-header .navbar,
.navbar{
  height: var(--sub-main-height) !important;
  min-height: var(--sub-main-height) !important;
  max-height: var(--sub-main-height) !important;
  box-sizing: border-box !important;
}
.brand .title strong{
  font-size: var(--sub-brand-title) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.brand .title span{
  font-size: var(--sub-brand-sub) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
.menu a.link,
.menu a.link span{
  font-size: var(--sub-nav-font) !important;
  font-weight: 600 !important;
}
#loginLink{
  font-size: var(--sub-login-font) !important;
  font-weight: 700 !important;
}

.page-frame{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== Responsive: قواعد موحدة وشاملة للموبايل (جميع الأجهزة المحمولة) ===== */
@media (max-width: 1023px){
  /* ===== الهيدر والتنقل ===== */
  .nav-right{
    position: relative;
  }
  /* تصغير زر تسجيل الدخول وإبعاده عن القائمة على الموبايل */
  .user-area{
    margin-left: auto !important;
    margin-right: 6px !important;
    order: -1;
    z-index: 999;
    flex-shrink: 0;
  }
  #loginLink{
    font-size: 9px !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    line-height: 1.2 !important;
  }
  /* إظهار زر القائمة على الموبايل */
  .burger{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    position: relative;
    cursor: pointer;
    margin-left: 8px;
  }
  /* إخفاء القائمة الافتراضية على الموبايل */
  .nav-right .menu{
    display: none !important;
    position: fixed !important;
    top: calc(var(--sub-top-height) + var(--sub-main-height)) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    flex-direction: column;
    background: #030847;
    padding: 12px;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1000 !important;
    overflow-y: auto;
    max-height: calc(100vh - var(--sub-top-height) - var(--sub-main-height));
  }
  /* ضمان أن زر تسجيل الدخول لا يتداخل مع القائمة */
  .user-area{
    z-index: 998 !important;
    position: relative;
  }
  .site-header .navbar{
    position: relative;
    z-index: 999;
  }
  /* إظهار القائمة عند الضغط على الزر */
  .nav-right .menu.open{
    display: flex !important;
  }
  /* روابط القائمة على الموبايل */
  .nav-right .menu a{
    color: #fff !important;
    padding: 10px 12px;
    display: block;
    width: 100%;
    text-align: right;
  }
  html[dir="ltr"] .nav-right .menu a{
    text-align: left;
  }
  .menu > li.has-dropdown .dropdown{
    position: static;
    box-shadow: none;
    background: rgba(255,255,255,.08);
    margin-top: 6px;
    display: none;
    padding-left: 20px;
  }
  .menu > li.has-dropdown.open .dropdown{
    display: block;
  }
  .menu > li.has-dropdown .dropdown a{
    padding: 8px 12px;
    font-size: 14px;
  }
  
  /* ===== الهيدر العلوي (التواصل الاجتماعي) ===== */
  .top-header{
    flex-wrap: wrap;
    padding: 8px 12px !important;
    gap: 8px;
  }
  .top-header .top-left,
  .top-header .top-right{
    font-size: 12px !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .top-header .social-icons{
    gap: 8px;
  }
  .top-header .social-icons i,
  .top-header .social-icons .social-haraj{
    font-size: 18px !important;
  }
  
  /* ===== الهيدر الرئيسي ===== */
  .site-header{
    padding: 0 8px !important;
  }
  .site-header .navbar{
    gap: 6px !important;
    padding: 8px 4px !important;
  }
  /* تصغير البراند نيم على الموبايل */
  .brand{
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 120px);
    overflow: hidden;
  }
  .brand .title{
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
  }
  .brand .title strong{
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
  }
  .brand .title span,
  .brand .title .brand-company{
    font-size: 8px !important;
    line-height: 1.1 !important;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand .title span:not(.brand-company){
    font-size: 7px !important;
  }
  .menu a.link,
  .menu a.link span{
    font-size: 14px !important;
  }
  /* تصغير زر تسجيل الدخول على الموبايل */
  .user-area{
    margin-right: 4px !important;
    margin-left: auto !important;
    order: -1;
    flex-shrink: 0;
    min-width: fit-content;
  }
  #loginLink{
    font-size: 9px !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    display: inline-block !important;
    font-weight: 600 !important;
  }
  /* تحسين التخطيط لمنع التداخل */
  .nav-right{
    flex-shrink: 0;
    gap: 4px !important;
  }
  .burger{
    flex-shrink: 0;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
  }
  
  /* ===== الكونتينر العام ===== */
  .container{
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* ===== الصفحة الرئيسية ===== */
  .hero-grid{
    grid-template-columns: 1fr;
  }
  .hero-frame-left,
  .hero-frame-right{
    display: none;
  }
  .hero-content h1{
    font-size: clamp(1.25rem, 5vw, 2rem);
  }
  .hero-content .badge{
    font-size: 14px;
    padding: 10px 14px;
  }
  .features-section .container{
    padding-left: 12px;
    padding-right: 12px;
  }
  .why-box{
    padding: 16px 12px;
  }
  .cards .card{
    max-width: 100%;
    flex: 1 1 100%;
  }
  /* الرئيسية: في الموبايل كروتين في الصف، مربعين */
  .features-section .cards{
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .features-section .cards .p-card{
    flex: 0 0 calc((100% - 12px) / 2);
    width: calc((100% - 12px) / 2);
    max-width: calc((100% - 12px) / 2);
  }
  
  /* ===== صفحات المنتجات (mid-frame) ===== */
  .mid-frame{
    padding: 0 !important;
  }
  .mid-frame .container{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .mid-frame section{
    padding: 16px 12px !important;
  }
  .mid-frame section:not(:has(.cards-nine)) .container,
  .mid-frame section:has(.cards-nine) .container{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* ===== section-head على الموبايل ===== */
  .section-head{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 0 12px !important;
    width: 100% !important;
  }
  .mid-frame section:has(.cards-main) .section-head,
  .mid-frame section:has(.cards-nine) .section-head,
  .mid-frame section:not(:has(.cards-nine)) .section-head{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 0 12px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .section-head-title-wrap{
    width: 100% !important;
  }
  .section-head-title{
    font-size: 18px !important;
  }
  .section-head-buttons{
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .back-home-btn,
  .mid-frame section:has(.cards-main) .back-home-btn,
  .mid-frame section:has(.cards-nine) .back-home-btn{
    position: static !important;
    right: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
  .section-head-with-title .products-ticker{
    display: none !important;
  }
  
  /* ===== الكروت في صفحات المنتجات ===== */
  /* القواعد موجودة في @media (max-width: 1023px) أعلاه */
  
  /* ===== صفحات المنتجات الفرعية (product-hero) ===== */
  /* القواعد موجودة في @media (max-width: 1023px) أعلاه */
  
  /* ===== واتساب ===== */
  .whatsapp-float{
    right: 16px;
    bottom: 16px;
    padding: 0 10px;
    height: 44px;
  }
  .whatsapp-float img{
    width: 28px;
    height: 28px;
  }
  .wa-text{
    font-size: 14px;
  }
  
  /* ===== جداول البيانات ===== */
  .technical-data-table,
  .mds-table{
    font-size: 14px !important;
    overflow-x: auto;
  }
  .mds-table th,
  .mds-table td{
    padding: 10px 8px !important;
    font-size: 13px !important;
  }
  
  /* ===== product-box على الموبايل ===== */
  .product-box{
    max-width: 100% !important;
    padding: 16px !important;
  }
  .product-box h1{
    font-size: 24px !important;
  }
  .product-box .sub{
    font-size: 16px !important;
  }
  .product-spec{
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 10px !important;
  }
  .spec{
    padding: 12px !important;
  }
  .spec strong{
    font-size: 16px !important;
  }
  .spec span{
    font-size: 15px !important;
  }
  
  /* ===== gallery ===== */
  .gallery{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .gallery img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .gallery-grid{
    grid-template-columns: 1fr !important;
  }
  
  /* ===== contact ===== */
  .contact-grid{
    grid-template-columns: 1fr !important;
  }
  
  /* ===== videos ===== */
  .video iframe{
    height: 200px !important;
  }
}

/* ===== الهيدر موحّد لجميع الصفحات (الرئيسية والفرعية) من المتغيرات أعلاه ===== */


/* =======================================================================
   MOBILE FIX PACK (non-destructive: affects MOBILE only)
   هدفه: منع التبعثر/الـ overflow على الموبايل بدون لمس قواعد الديسكتوب
   ======================================================================= */

@media (max-width: 1023px){

  /* منع أي سكرول أفقي بسبب عناصر بعرض ثابت */
  html, body{
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* أي عنصر يخرج بره الشاشة */
  img, video, iframe, table{
    max-width: 100% !important;
  }

  /* الكونتينر: عرض كامل + padding مريح */
  .container,
  .mid-frame .container{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* الأقسام */
  section,
  .mid-frame section{
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* الهيدر: خلي كل شيء يلف بدل ما يتزاحم */
  .navbar{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }

  .brand{
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .brand .title{
    min-width: 0 !important;
  }
  .brand .title strong{
    font-size: 18px !important;
    line-height: 1.15 !important;
  }
  .brand .title span,
  .brand .title .brand-company{
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  /* زر اللغة */
  .lang-btn{
    margin: 0 !important;
    padding: 4px 6px !important;
    gap: 6px !important;
  }
  .lang-btn .flag-icon{
    width: 32px !important;
    height: 24px !important;
  }
  .lang-btn .lang-btn-text{
    font-size: 13px !important;
  }

  /* القائمة: لفّ العناصر + تصغير الخط + منع overflow */
  .menu{
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .menu a.link,
  .menu a.link span{
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .menu a.link{
    padding: 8px 4px !important;
    white-space: normal !important;
  }

  /* الدروب داون: حوله لعرض طبيعي على الموبايل لتجنب الطيران خارج الشاشة */
  .dropdown{
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 8px !important;
    display: none !important; /* افتراضي مخفي - يظهر عند hover إن متاح */
    background: transparent !important;
    border: 0 !important;
  }
  .menu > li:hover .dropdown{
    display: block !important;
  }
  .dropdown a{
    width: 100% !important;
    white-space: normal !important;
  }

  /* الهيرو */
  .hero{
    max-width: 100% !important;
    padding: 28px 0 !important;
  }
  .hero h1{
    font-size: clamp(1.2rem, 4.2vw, 1.6rem) !important;
    line-height: 1.6 !important;
  }
  .hero .hero-content .ticker{
    border-radius: 14px !important;
    padding: 10px 0 !important;
  }
  .hero .hero-content .ticker-item{
    font-size: 14px !important;
    padding: 0 12px !important;
    margin: 0 10px !important;
  }

  /* العناوين الطويلة: اسمح باللف */
  .why-desc,
  .why-note{
    white-space: normal !important;
    text-align: center !important;
  }

  /* الجاليري */
  .gallery{
    grid-template-columns: 1fr !important;
  }
  .gallery img{
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    border-radius: 14px !important;
  }
  .gallery-grid{
    grid-template-columns: 1fr !important;
  }

  /* صفحات المنتجات: البوكس + الجدول */
  .product-box{
    max-width: 100% !important;
    width: 100% !important;
  }
  .product-box h1{
    font-size: 24px !important;
  }
  .product-box .sub{
    font-size: 16px !important;
  }
  .product-spec{
    max-width: 100% !important;
    width: 100% !important;
  }
  .spec strong,
  .spec span{
    font-size: 16px !important;
  }

  /* جدول البيانات الفنية: خلي السحب أفقي داخل الجدول فقط */
  .technical-data-table{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .mds-table{
    min-width: 620px !important; /* يمنع تكسير الأعمدة - بدل كده سحب أفقي */
  }

  /* الكروت العامة: منع أي عرض ثابت يسبب بعثرة */
  .cards,
  .cards-main,
  .cards-nine{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .card{
    min-width: 0 !important;
  }

  /* صفحة تواصل */
  .contact-grid{
    grid-template-columns: 1fr !important;
  }
  .contact-map{
    height: 280px !important;
  }

  /* عناصر ثابتة/تحويم ممكن تعمل مشاكل على الموبايل */
  .raw-materials-ticker{
    display: none !important;
  }
}

/* شاشات أصغر جداً */
@media (max-width: 480px){
  .top-header{
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
  .menu{
    gap: 8px !important;
  }
  .menu a.link,
  .menu a.link span{
    font-size: 13px !important;
  }
  .btn{
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  .section-head .btn.secondary{
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
}



/* =======================================================================
   ✅ إصلاح تداخل نصوص الهيدر + هيدر التواصل على الموبايل فقط
   (لا يؤثر على الديسكتوب)
   ======================================================================= */
@media (max-width: 1023px){
  /* صغّر متغيرات الهيدر على الموبايل */
  :root{
    --sub-top-height: auto;
    --sub-top-padding: 8px 10px;
    --sub-top-font: 13px;
    --sub-top-font-weight: 600;

    --sub-main-height: auto;
    --sub-brand-title: 18px;
    --sub-brand-sub: 12px;
    --sub-nav-font: 14px;
    --sub-login-font: 14px;
  }

  /* منع overflow أفقي بسبب الهيدر */
  .site-header, .top-header{ width:100% !important; max-width:100% !important; }
  .site-header *{ min-width:0; }

  /* ===== هيدر التواصل (Top Header) ===== */
  .top-header{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: var(--sub-top-padding) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1.4 !important;
  }
  .top-header .top-left,
  .top-header .top-right{
    flex: 1 1 100% !important;
    width: 100% !important;
    text-align: center !important;
    font-size: var(--sub-top-font) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  .top-header .social-icons{
    flex: 0 0 auto !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .top-header .social-icons a,
  .top-header .social-icons i{
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* ===== الهيدر الرئيسي (Navbar) ===== */
  .site-header{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .site-header .navbar,
  .navbar{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  /* البراند */
  .brand{ flex: 1 1 auto !important; max-width: 100% !important; }
  .brand .title strong{
    font-size: clamp(16px, 4.6vw, var(--sub-brand-title)) !important;
    line-height: 1.15 !important;
  }
  .brand .title span{
    font-size: clamp(11px, 3.4vw, var(--sub-brand-sub)) !important;
    line-height: 1.15 !important;
  }

  /* القوائم */
  .menu{
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding-top: 6px !important;
  }
  .menu a.link,
  .menu a.link span{
    font-size: clamp(12px, 3.6vw, var(--sub-nav-font)) !important;
    padding: 8px 6px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* يمين الهيدر (أزرار/تسجيل دخول/أيقونات) */
  .nav-right{
    flex: 0 0 auto !important;
    gap: 8px !important;
  }
  #loginLink{
    font-size: clamp(12px, 3.6vw, var(--sub-login-font)) !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }
}

/* موبايلات صغيرة جدًا */
@media (max-width: 480px){
  :root{
    --sub-top-font: 12px;
    --sub-brand-title: 16px;
    --sub-brand-sub: 11px;
    --sub-nav-font: 13px;
    --sub-login-font: 13px;
  }
  .site-header .navbar, .navbar{ padding: 10px 10px !important; }
  .top-header{ padding: 8px 8px !important; }
  .top-header .social-icons a, .top-header .social-icons i{ font-size: 18px !important; }
}

/* =========================================================
   MOBILE HEADER COMPACT PATCH (PORTRAIT + LANDSCAPE)
   - fixes oversized header height + overlapping text
   - MOBILE ONLY (no desktop impact)
   ========================================================= */

/* General mobile: make header auto-height + compact spacing */
@media (max-width: 1023px){
  /* If your header wrapper uses one of these common classes */
  header, .header, .site-header, .topbar, .navbar, .nav, .nav-wrap{
    height:auto !important;
    min-height:unset !important;
  }

  /* Navbar row */
  .navbar{
    padding:10px 10px !important;
    gap:10px !important;
    height:auto !important;
    align-items:center !important;
  }

  /* Brand / logo block */
  .brand{
    gap:8px !important;
    align-items:center !important;
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  .brand img, .brand .logo, .logo img{
    max-height:34px !important;
    height:auto !important;
    width:auto !important;
  }

  /* Brand text (title/subtitle) */
  .brand .title{
    min-width:0 !important;
  }
  .brand .title strong{
    font-size:clamp(16px, 4.2vw, 20px) !important;
    line-height:1.05 !important;
    letter-spacing:.2px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .brand .title span{
    font-size:clamp(12px, 3.2vw, 14px) !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    opacity:.95 !important;
  }

  /* Right side */
  .nav-right{
    gap:8px !important;
    flex:0 0 auto !important;
    align-items:center !important;
  }

  /* Menu: allow wrapping into 2 rows + smaller text */
  .menu{
    gap:12px !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    width:100% !important;
    padding-top:8px !important;
    margin-top:6px !important;
  }
  .menu a.link{
    font-size:clamp(13px, 3.6vw, 16px) !important;
    font-weight:800 !important;
    padding:8px 6px !important;
    line-height:1.05 !important;
  }

  /* If you have a contact header bar (common names) */
  .contact-header, .header-contact, .top-contact, .contact-bar{
    padding:10px 10px !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    height:auto !important;
  }
  .contact-header *, .header-contact *, .top-contact *, .contact-bar *{
    max-width:100% !important;
  }
  .contact-header, .header-contact, .top-contact, .contact-bar{
    font-size:clamp(12px, 3.2vw, 14px) !important;
    line-height:1.2 !important;
  }
  .contact-header a, .header-contact a, .top-contact a, .contact-bar a{
    font-size:inherit !important;
    line-height:inherit !important;
  }
}

/* Portrait phones: compress more (this is your main issue) */
@media (max-width: 600px) and (orientation: portrait){
  .navbar{
    padding:8px 10px !important;
    gap:8px !important;
  }

  /* Make the first row (brand + buttons) stay compact */
  .brand img, .brand .logo, .logo img{ max-height:30px !important; }

  .brand .title strong{
    font-size:clamp(15px, 4.6vw, 18px) !important;
  }
  .brand .title span{
    font-size:clamp(11px, 3.4vw, 13px) !important;
  }

  .menu{
    padding-top:6px !important;
    margin-top:4px !important;
    gap:10px !important;
  }
  .menu a.link{
    font-size:clamp(12px, 3.7vw, 15px) !important;
    padding:7px 6px !important;
  }

  /* Prevent header taking a big chunk of the screen */
  header, .header, .site-header{
    padding-bottom:6px !important;
  }
}

/* Very small phones */
@media (max-width: 380px){
  .menu a.link{
    font-size:12px !important;
    padding:6px 5px !important;
  }
  .brand .title strong{ font-size:15px !important; }
  .brand .title span{ font-size:11px !important; }
}