/* ==========================================================================
   REFEE | ريفي للصناعات الغذائية
   نظام التصميم البصري 2026 — مبني على دليل الهوية (Refee Guidelines 2026)
   هذا الملف هو نفسه styles.txt الموجود بجانب صفحات الموقع، احتفظ به لتطبيقه
   لاحقاً كـ CSS مخصص على قالب Salla عند تجهيزه.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) الخطوط
   English: Poppins (Light / Regular / Medium / SemiBold / Bold) — ملفات مرخّصة محلية
   Arabic : HT Rakik "اتش تي رقيق" — ملفات مرخّصة محلية (assets/fonts)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'HT Rakik';
  src: url('../fonts/arabic/HTRakik-Light.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'HT Rakik';
  src: url('../fonts/arabic/HTRakik-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'HT Rakik';
  src: url('../fonts/arabic/HTRakik-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'HT Rakik';
  src: url('../fonts/arabic/HTRakik-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'HT Rakik';
  src: url('../fonts/arabic/HTRakik-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/english/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/english/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/english/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/english/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/english/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2) متغيرات الهوية البصرية (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* -- الألوان الأساسية (Main color palette / 60-20-20) -- */
  --refee-blue: #1548BA;        /* Royal Blue   - PANTONE 2132 C */
  --refee-blue-dark: #0F3689;
  --refee-blue-light: #E7ECFA;
  --refee-amber: #FFB830;       /* Golden Amber - PANTONE 123 C  */
  --refee-amber-dark: #E39F1C;
  --refee-cream: #F5F3EF;       /* Warm Sand    - PANTONE 7527 C */
  --refee-black: #1A1A1A;       /* Deep Black */
  --refee-white: #FFFFFF;

  /* -- الألوان الثانوية (منتجات) -- */
  --refee-kleija: #D1B475;
  --refee-kleija-dark: #8D7440;
  --refee-kleija-light: #F7CA74;
  --refee-maamoul: #CB8251;
  --refee-maamoul-dark: #775036;
  --refee-maamoul-light: #EE8B46;
  --refee-kunafa: #A4D9D4;
  --refee-kunafa-dark: #35A997;
  --refee-kunafa-light: #7ACBC5;
  --refee-sambousa: #BEB5D9;
  --refee-sambousa-dark: #3D51A2;

  /* -- نسبة استخدام الألوان الموصى بها: 60% كريمي / 20% كحلي / 20% ذهبي -- */

  /* -- الخطوط -- */
  --font-en: 'Poppins', sans-serif;
  --font-ar: 'HT Rakik', sans-serif;

  /* -- المسافات وقياسات الشبكة (Grid: 80px digital margins) -- */
  --container-max: 1280px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;

  /* -- الانحناءات (يعكس شكل الشعار العضوي المستدير) -- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 32px;
  --radius-blob: 45% 55% 60% 40% / 50% 45% 55% 50%;

  /* -- ظلال -- */
  --shadow-sm: 0 2px 10px rgba(21, 72, 186, 0.08);
  --shadow-md: 0 10px 30px rgba(21, 72, 186, 0.12);
  --shadow-lg: 0 20px 45px rgba(21, 72, 186, 0.16);

  --transition: 0.25s ease;
}

/* --------------------------------------------------------------------------
   3) إعادة الضبط الأساسية (Reset)
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ar);
  color: var(--refee-black);
  background: var(--refee-white);
  line-height: 1.7;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

body.en, .en { direction: ltr; font-family: var(--font-en); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* أيقونة الريال السعودي المضمَّنة (بدل كلمة "ريال"/"ر.س") — تأخذ لون
   النص المحيط بها تلقائياً عبر fill:currentColor بدل لون ثابت. */
.sar-icon {
  display: inline-block;
  width: 0.62em;
  height: 0.7em;
  fill: currentColor;
  vertical-align: -0.05em;
  margin-inline-start: 2px;
  flex-shrink: 0;
}

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

section { padding-block: var(--space-8); }
@media (max-width: 768px) { section { padding-block: var(--space-6); } }

/* --------------------------------------------------------------------------
   4) الطباعة (Typography Hierarchy — English: Poppins / Arabic: HT Rakik)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 { font-family: var(--font-ar); font-weight: 700; color: var(--refee-blue); line-height: 1.3; }
.en h1, .en h2, .en h3, .en h4, .en h5, [lang="en"] { font-family: var(--font-en); }

h1 { font-size: clamp(32px, 4vw, 58px); font-weight: 800; }
h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 800; }
h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; }
p  { font-size: 16px; color: #4b4b4b; }
small, .text-sm { font-size: 13px; }

.eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--refee-amber-dark);
  background: #FFF4DE;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}

.section-title { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-6); }
.section-title p { margin-top: var(--space-2); }

/* قسم "انضم إلى فريقنا" (فرص العمل): النص باليمين وزر الانضمام باليسار،
   بدلاً من التمركز الافتراضي لـ .section-title. */
.jobs-cta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.jobs-cta-text { text-align: right; max-width: 640px; }
.jobs-cta-text p { margin-top: var(--space-2); }
.jobs-cta-btn { flex-shrink: 0; }
@media (max-width: 768px) {
  .jobs-cta-row { flex-direction: column; align-items: center; text-align: center; }
  .jobs-cta-text { text-align: center; max-width: none; }
}

/* الخط المتموج الذي يظهر أسفل عبارات الهوية (طعم يجمع الكل) */
.swoosh-underline { position: relative; display: inline-block; }
.swoosh-underline svg { position: absolute; inset-inline-start: 0; bottom: -10px; width: 100%; height: 14px; }

/* --------------------------------------------------------------------------
   5) الأزرار
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn-primary { background: var(--refee-blue); color: var(--refee-white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--refee-blue-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-amber { background: var(--refee-amber); color: var(--refee-black); }
.btn-amber:hover { background: var(--refee-amber-dark); transform: translateY(-2px); }

.btn-outline { background: transparent; border: 1.5px solid var(--refee-blue); color: var(--refee-blue); }
.btn-outline:hover { background: var(--refee-blue); color: var(--refee-white); }

.btn-white { background: var(--refee-white); color: var(--refee-blue); }
.btn-white:hover { background: var(--refee-cream); }

.btn-sm { padding: 9px 20px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--refee-cream); display: flex; align-items: center; justify-content: center; }
.btn-icon:hover { background: var(--refee-blue-light); }

/* --------------------------------------------------------------------------
   6) الشريط العلوي (Top bar)
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--refee-black);
  color: var(--refee-cream);
  font-size: 13px;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; padding-block: 8px; }
.topbar-links { display: flex; align-items: center; gap: var(--space-4); }
.topbar-links a:hover { color: var(--refee-amber); }
.topbar-email { display: flex; align-items: center; gap: 6px; direction: ltr; }
.topbar-msg { display: none; }
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--refee-cream);
  opacity: .85;
  direction: ltr;
}
.lang-toggle:hover { opacity: 1; }
.lang-toggle .lang-opt { transition: color var(--transition); }
.lang-toggle .lang-sep { opacity: .5; }
html.lang-ar .lang-toggle [data-lang-opt="ar"],
html.lang-en .lang-toggle [data-lang-opt="en"] {
  color: var(--refee-amber);
}
/* على خلفية بيضاء (الصفحات بلا Topbar، داخل header-actions) يكون لون
   الكريم شبه غير مرئي — نستخدم لون أزرق الهوية بدل الكريم في هذا السياق. */
.header-actions .lang-toggle { color: var(--refee-blue); opacity: 1; }
.header-actions .lang-toggle:hover { opacity: .7; }

/* --------------------------------------------------------------------------
   7) الهيدر / التنقل
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--refee-white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), box-shadow var(--transition);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: 14px;
  position: relative;
}
/* الشعار مثبّت في منتصف الهيدر تماماً (بغض النظر عن اختلاف عرض القائمتين
   على جانبيه)، بينما تبقى القائمة الرئيسية بجانبيها في تدفّق الصفحة
   الطبيعي، فوقه أفقياً فقط دون أي تأثير على تموضعها. */
.site-header .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; z-index: 2; }
.logo img { height: 56px; width: auto; }
.logo .logo-alt { position: absolute; inset-inline-start: 0; top: 0; opacity: 0; transition: opacity var(--transition); }

/* هيدر أكبر قليلاً في الكمبيوتر (لا يمس شاشات الجوال) لإظهار الشعار
   بحجم أكبر، بنفس التصميم والتمركز الحاليين تماماً — يبقى الشعار مركّزاً
   عمودياً تلقائياً لأنه يعتمد على transform بحسب حجمه الفعلي. */
@media (min-width: 993px) {
  .site-header .container { padding-block: 20px; }
  .logo img { height: 74px; }
}

/* حالة التمرير: الهيدر يتحول لأزرق الهوية، الشعار يتبدل للنسخة الفاتحة، والنصوص تتغير للكريمي */
.site-header.scrolled {
  background: linear-gradient(135deg, var(--refee-blue) 0%, var(--refee-blue-dark) 100%);
  box-shadow: var(--shadow-md);
}
.site-header.scrolled .logo .logo-default { opacity: 0; }
.site-header.scrolled .logo .logo-alt { opacity: 1; }
.site-header.scrolled .main-nav > ul > li > a { color: var(--refee-cream); }
.site-header.scrolled .main-nav > ul > li > a:hover { color: var(--refee-amber); }
.site-header.scrolled .search-box { background: rgba(255, 255, 255, .15); }
.site-header.scrolled .search-box input { color: var(--refee-white); }
.site-header.scrolled .search-box input::placeholder { color: rgba(255, 255, 255, .7); }
.site-header.scrolled .btn-icon { background: rgba(255, 255, 255, .15); }
.site-header.scrolled .btn-icon:hover { background: rgba(255, 255, 255, .3); }

/* القائمة الرئيسية مقسومة لمجموعتين (كل واحدة <ul> مستقلة) داخل نفس
   العنصر <nav class="main-nav">: تمتد على كامل عرض الهيدر خلف الشعار
   المثبّت في المنتصف فوقها، وتتوزّع المجموعتان لطرفي الهيدر عبر
   justify-content: space-between. على الجوال (is-open) تُعرض المجموعتان
   كقائمة عمودية واحدة متتالية كما كانت سابقاً، دون أي تغيير. */
.main-nav { display: flex; align-items: center; gap: var(--space-5); flex: 1; justify-content: space-between; }
.main-nav > ul { display: flex; gap: var(--space-4); }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  font-weight: 600;
  font-size: 15px;
  padding: 10px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition);
}
.main-nav > ul > li > a:hover { color: var(--refee-blue); }
.main-nav > ul > li.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--refee-white);
  min-width: 220px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition);
}
.dropdown li a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; }
.dropdown li a:hover { background: var(--refee-blue-light); color: var(--refee-blue); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.search-box {
  display: flex;
  align-items: center;
  background: var(--refee-cream);
  border-radius: 999px;
  padding: 8px 18px;
  gap: 8px;
  min-width: 220px;
}
.search-box input { background: transparent; border: none; outline: none; width: 100%; font-size: 14px; }

.cart-btn { display: none; position: relative; }
.cart-count {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  background: var(--refee-amber);
  color: var(--refee-black);
  font-size: 11px;
  font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.burger { display: none; }

@media (max-width: 992px) {
  .main-nav, .search-box { display: none; }
  .burger { display: flex; }

  /* قائمة التنقل في الجوال: تنسدل أسفل الهيدر مباشرة عند فتحها بالضغط على
     زر ☰ (لم يكن لها أي شكل ظاهر سابقاً لأن الزر كان بلا أي تفاعل مطلقاً).
     .site-header ثابت (sticky) لذا يُنشئ سياق تموضع صالح للقائمة المطلقة. */
  .main-nav.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    background: var(--refee-white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .main-nav.is-open > ul { flex-direction: column; gap: 0; width: 100%; }
  .main-nav.is-open > ul > li > a { padding: 14px 4px; border-bottom: 1px solid #EFEDE8; }
  .main-nav.is-open .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    display: none;
    padding-inline-start: var(--space-3);
  }
  .site-header.scrolled .main-nav.is-open { background: var(--refee-white); }
  .site-header.scrolled .main-nav.is-open > ul > li > a { color: var(--refee-black); }
}

/* --------------------------------------------------------------------------
   8) الهيرو (Hero)
   -------------------------------------------------------------------------- */
.hero {
  background: var(--refee-blue-dark);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
}
.hero .container {
  position: relative;
  z-index: 4;
  width: 100%;
  padding-block: var(--space-6);
}
.hero-content { max-width: 560px; }
.hero-content h1 { color: var(--refee-white); }
.hero-content p { color: var(--refee-cream); opacity: .9; max-width: 460px; margin-block: var(--space-3) var(--space-5); }
.hero-actions { display: flex; gap: var(--space-3); }

/* -------------------- سلايدر خلفية الهيرو (فيديو + صور) --------------------
   في الكمبيوتر: الفيديو/الصورة تملأ كامل القسم (object-fit: cover) خلف
   النص. لا يوجد أي تظليل/شادو فوق الفيديو أو الصورة بناءً على طلب العميل. */
.hero-slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--refee-blue-dark); }
.hero-slider-track { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide img, .hero-slide video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* شفافية 70% لشرائح الفيديو تحديداً (الصور تبقى بشفافية كاملة) حتى تظهر
   خلفية الشريحة (لون خلفية الشريحة نفسها إن حُدِّد، أو لون خلفية قسم
   الهيرو، أو التدرّج الافتراضي) بشكل خفيف خلف الفيديو. */
.hero-slide video { opacity: .7; }
.hero-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.16);
  color: var(--refee-white);
  font-size: 24px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background .2s ease, transform .2s ease;
}
.hero-slider-arrow:hover { background: rgba(255,255,255,.3); }
.hero-slider-prev { inset-inline-start: var(--space-4); }
.hero-slider-next { inset-inline-end: var(--space-4); }
.hero-slider-dots {
  position: absolute; bottom: var(--space-3); inset-inline: 0;
  z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.hero-slider-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hero-slider-dot.is-active { background: var(--refee-white); transform: scale(1.3); }

@media (max-width: 860px) {
  /* في الجوال: يأخذ القسم ارتفاعه من مقاس الصورة/الفيديو نفسه (بدل تثبيت
     ارتفاع وقص/تكبير المحتوى داخله) — الصورة تُعرض بحجمها الطبيعي كاملاً
     أعلى القسم، ثم النص أسفلها مباشرة قريباً من الهيدر بدل التمركز عمودياً
     فوق الصورة كما في الكمبيوتر. */
  .hero { min-height: 0; display: flex; flex-direction: column; align-items: stretch; }
  .hero-slider { position: static; height: auto; }
  .hero-slider-track { position: static; }
  .hero-slide { position: static; display: none; opacity: 1; transition: none; }
  .hero-slide.is-active { display: block; }
  .hero-slide img, .hero-slide video { position: static; width: 100%; height: auto; object-fit: initial; display: block; }
  .hero-slider-dots { position: static; margin-top: 8px; padding-bottom: 4px; }
  .hero .container { position: static; text-align: center; padding-block: var(--space-4) var(--space-6); }
  .hero-content { max-width: none; margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-content p { margin-inline: auto; }
  .hero-slider-arrow { display: none; }
}

/* --------------------------------------------------------------------------
   9) شريط الفئات (Category pills / icons)
   -------------------------------------------------------------------------- */
.cat-strip { padding-block: var(--space-7); }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-5);
}
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
}
.cat-card:hover .cutout-img,
.cat-card:hover .cat-emoji { transform: translateY(-8px) scale(1.04); }
.cat-card:hover .cat-label { color: var(--refee-blue); }
.cat-card:hover .cat-label::after { width: 28px; }

.cat-label {
  font-weight: 700;
  font-size: 16px;
  color: var(--refee-black);
  transition: color var(--transition);
  position: relative;
  padding-bottom: 10px;
}
.cat-label::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 0;
  height: 2px;
  background: var(--refee-amber);
  transition: width var(--transition);
}

/* صور مفرغة (Cutout graphics) — بدون صندوق أو قص، الشكل العضوي كما هو */
.cutout-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(26, 26, 26, .14));
  transition: transform var(--transition);
}
.cat-cutout {
  height: 170px;
  margin-inline: auto;
  margin-bottom: var(--space-2);
}

/* الأقسام بدون صورة منتج حقيقية: توهج لوني ناعم بدل الأيقونة المربعة */
.cat-emoji {
  --glow: var(--refee-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px; height: 170px;
  margin-inline: auto;
  margin-bottom: var(--space-2);
  font-size: 76px;
  line-height: 1;
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
  filter: drop-shadow(0 10px 14px rgba(26, 26, 26, .12));
  transition: transform var(--transition);
}

@media (max-width: 860px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-3); }
  .cat-cutout, .cat-emoji { height: 140px; }
  .cat-emoji { width: 140px; font-size: 64px; }
}
@media (max-width: 620px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-7); column-gap: var(--space-4); }
  .cat-cutout, .cat-emoji { height: 190px; }
  .cat-emoji { width: 190px; font-size: 84px; }
  .cat-label { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   10) بطاقات المنتجات
   -------------------------------------------------------------------------- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 992px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .products-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); } }

.product-card {
  background: var(--refee-white);
  border: 1px solid #EFEDE8;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.product-thumb { position: relative; aspect-ratio: 1/1; background: var(--refee-cream); overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-badge {
  position: absolute; top: 12px; inset-inline-start: 12px;
  background: var(--refee-amber); color: var(--refee-black);
  font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
}
.product-badge.sale { background: var(--refee-blue); color: var(--refee-white); }
.product-fav {
  position: absolute; top: 12px; inset-inline-end: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
}
.product-body { padding: var(--space-4); }
.product-cat { font-size: 12px; color: var(--refee-blue); font-weight: 700; margin-bottom: 4px; display: block; }
.product-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; min-height: 42px; }
.product-rating { color: var(--refee-amber); font-size: 13px; margin-bottom: 8px; }
.product-price-row { display: flex; align-items: center; justify-content: space-between; }
.price { font-weight: 800; color: var(--refee-blue); font-size: 17px; }
.price-old { text-decoration: line-through; color: #b6b6b6; font-size: 13px; margin-inline-start: 6px; font-weight: 400; }
.add-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--refee-blue); color: var(--refee-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: background var(--transition);
}
.add-btn:hover { background: var(--refee-amber); color: var(--refee-black); }

/* اسم المنتج أكبر قليلاً في قسم "الأكثر مبيعاً" تحديداً (بعد حذف السعر
   وزر الإضافة للسلة من بطاقاته) — لا يؤثر على بطاقات المنتج في أي صفحة
   أخرى لأنه مقيّد بمعرّف القسم #best-sellers. */
#best-sellers .product-title { font-size: 17px; }

/* --------------------------------------------------------------------------
   11) بانرات ترويجية
   -------------------------------------------------------------------------- */
/* شبكة عمودين — بانران بجانب بعض في كل صف بدل قسم كامل العرض لكل بانر */
.promo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 860px) { .promo-grid { grid-template-columns: 1fr; } }

/* مربع خلفية مستطيل الشكل: النص والزر باليمين، والصورة باليسار (في
   المتصفح RTL، أول عنصر في شبكة CSS Grid يقع تلقائياً في أقصى اليمين) */
.promo-banner {
  border-radius: var(--radius-lg);
  background: var(--refee-amber);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
  min-height: 240px;
}
.promo-banner .promo-text { padding: var(--space-5); align-self: center; }
.promo-banner .promo-text h2 { color: var(--refee-black); font-size: 20px; }
/* دفع الزر قليلاً للأسفل مقارنة بنص الوصف مباشرة أعلاه، لمسافة أهدأ وأوضح */
.promo-banner .promo-text .btn { margin-top: 10px; }
.promo-banner .promo-media { display: flex; align-items: center; justify-content: center; padding: var(--space-4); overflow: hidden; }
.promo-banner .promo-media .cutout-img { max-width: 160px; filter: drop-shadow(0 16px 24px rgba(0,0,0,.18)); transition: transform .4s ease; }
.promo-banner .promo-media:hover .cutout-img { transform: scale(1.06); }
.promo-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .promo-banner { grid-template-columns: 1fr; min-height: 0; }
  .promo-banner .promo-text { order: 1; }
  .promo-banner .promo-media { order: 2; padding-bottom: var(--space-5); }
}

/* عند وجود عدد فردي من البانرات، آخر بانر يبقى وحيداً في آخر صف بنصف
   العرض وفراغ فارغ بجانبه — هذا يمدّده ليأخذ الصف كاملاً ويكبّر محتواه
   بتناسب، ليبدو مقصوداً ومرتباً بدل الظهور ناقصاً. مخصص للكمبيوتر فقط
   (الجوال أصلاً عمود واحد بعرض كامل لكل بانر). */
@media (min-width: 861px) {
  .promo-grid .promo-banner:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    min-height: 280px;
  }
  .promo-grid .promo-banner:last-child:nth-child(odd) .promo-text h2 { font-size: 24px; }
  .promo-grid .promo-banner:last-child:nth-child(odd) .promo-media .cutout-img { max-width: 220px; }
}

/* حركة تعويم لطيفة لصور البانرات الترويجية */
.promo-float { animation: promoFloat 4.5s ease-in-out infinite; }
@keyframes promoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .promo-float { animation: none; } }

/* ظهور تدريجي عند التمرير (Scroll reveal) */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   12) المزايا (شحن سريع / الجودة / شحن مجاني) — بطاقات بهوية ريفي، بنفس
   لغة بطاقات "من نحن" (.vision-card): خلفية بيضاء وحدود وظل خفيف وارتفاع
   عند التحويم، مع أيقونة داخل شارة "بلوب" ملوّنة بألوان الهوية بدل التوهج
   الشفاف السابق، لتبدو أكثر بروزاً وجمالاً وتحمل نصوصاً أطول بارتياح.
   -------------------------------------------------------------------------- */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); text-align: center; }
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--refee-white);
  border: 1px solid #EFEDE8;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-4);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--refee-blue-light);
}
.feature-icon {
  --glow: var(--refee-cream);
  width: 96px; height: 96px;
  margin-inline: auto;
  margin-bottom: var(--space-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
  background: var(--glow);
  border-radius: var(--radius-blob);
  filter: drop-shadow(0 8px 12px rgba(26, 26, 26, .10));
  transition: border-radius var(--transition);
}
.feature-icon svg { width: 40px; height: 40px; }
.feature-item:hover .feature-icon { border-radius: 50%; }
.features-grid h4 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: var(--space-2);
  font-size: 18px;
}
.features-grid h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 0;
  height: 2px;
  background: var(--refee-amber);
  transition: width var(--transition);
}
.feature-item:hover h4::after { width: 28px; }
.features-grid p { max-width: 280px; margin-inline: auto; color: #666; font-size: 14px; line-height: 1.8; }
@media (max-width: 768px) {
  .features-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .feature-icon { width: 110px; height: 110px; font-size: 48px; }
  .feature-icon svg { width: 46px; height: 46px; }
  .features-grid p { max-width: 320px; }
}

/* --------------------------------------------------------------------------
   13) آراء العملاء (شريط متحرك وقابل للسحب تفاعلياً)
   -------------------------------------------------------------------------- */
.reviews-marquee-viewport {
  --review-card-width: 300px;
  --reviews-gap: 20px;
  overflow: hidden;
  position: relative;
  padding-block: var(--space-2);
  cursor: grab;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to left, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.reviews-marquee-viewport.is-dragging { cursor: grabbing; }
.reviews-marquee-track {
  display: flex;
  direction: ltr;
  gap: var(--reviews-gap);
  width: max-content;
  will-change: transform;
  user-select: none;
}

.reviews-marquee-track .review-card {
  direction: rtl;
  text-align: right;
  flex: 0 0 auto;
  width: var(--review-card-width);
  background: var(--refee-white);
  border: 1px solid #EFEDE8;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .45s ease;
}
.reviews-marquee-track .review-card:hover {
  transform: translateY(-12px) scale(1.15);
  box-shadow: var(--shadow-lg);
  border-color: var(--refee-blue-light);
  z-index: 3;
}
.reviews-marquee-track .review-card.is-spotlight {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg);
  border-color: var(--refee-amber);
  z-index: 2;
}
.review-stars { color: var(--refee-amber); margin-bottom: var(--space-2); }

@media (max-width: 992px) { .reviews-marquee-viewport { --review-card-width: 320px; } }
@media (max-width: 560px) { .reviews-marquee-viewport { --review-card-width: 84vw; } }

/* --------------------------------------------------------------------------
   14) الفوتر
   -------------------------------------------------------------------------- */
.site-footer { background: var(--refee-blue); color: var(--refee-cream); padding-top: var(--space-7); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); padding-bottom: var(--space-6); }
.footer-logo img { height: 60px; margin-bottom: var(--space-3); }
.footer-grid h4 { color: var(--refee-white); margin-bottom: var(--space-3); font-size: 15px; }
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid ul li a:hover { color: var(--refee-amber); }
.footer-social { display: flex; gap: 10px; margin-top: var(--space-3); }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--refee-white);
}
.footer-social a svg { width: 18px; height: 18px; display: block; }
.footer-social a:hover { background: var(--refee-amber); color: var(--refee-black); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-block: var(--space-4);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
  opacity: .85;
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ---------- شريط روابط التواصل الاجتماعي (أسفل الصفحة تماماً) ---------- */
.social-links-bar { background: var(--refee-blue-dark); padding-block: var(--space-4); }
.social-links-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.social-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--refee-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.social-icon-btn svg { width: 19px; height: 19px; display: block; }
.social-icon-btn:hover { background: var(--refee-amber); color: var(--refee-blue-dark); transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   15) صفحة التصنيف (Category / Listing)
   -------------------------------------------------------------------------- */
.breadcrumb { font-size: 13px; color: #888; padding-block: var(--space-3); }
.breadcrumb a:hover { color: var(--refee-blue); }
.category-hero {
  background: var(--refee-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  text-align: start;
}
.category-hero .cutout-img { max-width: 150px; flex-shrink: 0; }
@media (max-width: 768px) { .category-hero { flex-direction: column; text-align: center; } }
.listing-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-6); align-items: start; }
.filter-box { background: var(--refee-white); border: 1px solid #EFEDE8; border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.filter-box h4 { margin-bottom: var(--space-3); }
.filter-box label { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; color: #555; }
.listing-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.sort-select { border: 1px solid #E3E1DB; border-radius: 999px; padding: 8px 16px; font-size: 14px; }
@media (max-width: 860px) { .listing-layout { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   16) صفحة المنتج
   -------------------------------------------------------------------------- */
.product-page { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.gallery-main { background: var(--refee-cream); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1/1; margin-bottom: var(--space-3); }
.gallery-thumbs { display: flex; gap: var(--space-2); }
.gallery-thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; }
.gallery-thumbs img.active { border-color: var(--refee-blue); }
.pd-title { margin-bottom: var(--space-2); }
.pd-price { font-size: 30px; font-weight: 800; color: var(--refee-blue); margin-block: var(--space-3); }
.pd-desc { color: #555; margin-bottom: var(--space-4); }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid #E3E1DB; border-radius: 999px; overflow: hidden; }
.qty-stepper button { width: 40px; height: 44px; font-size: 18px; }
.qty-stepper input { width: 44px; text-align: center; border: none; font-weight: 700; }
.pd-actions { display: flex; gap: var(--space-3); margin-block: var(--space-5); }
.pd-meta { display: flex; gap: var(--space-5); font-size: 13px; color: #777; border-top: 1px solid #EFEDE8; padding-top: var(--space-4); flex-wrap: wrap; }
.pd-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.pd-meta-icon { display: inline-flex; color: var(--refee-blue); }
.pd-meta-icon svg { width: 16px; height: 16px; }
.tabs-nav { display: flex; gap: var(--space-5); border-bottom: 1px solid #EFEDE8; margin-top: var(--space-7); }
.tabs-nav button { padding-bottom: var(--space-3); font-weight: 700; color: #999; border-bottom: 2px solid transparent; }
.tabs-nav button.active { color: var(--refee-blue); border-color: var(--refee-blue); }
.tab-panel { padding-block: var(--space-5); color: #555; display: none; white-space: pre-line; line-height: 1.9; }
.tab-panel.active { display: block; }

/* الوصف العربي (أسفل الصورة) والمواصفات (بالجانب) — تُعرَض دائماً بلا
   تبويبات، كل واحدة في كتلة مستقلة بعنوان صغير بهوية ريفي. */
.pd-desc-block { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid #EFEDE8; }
.pd-desc-heading {
  font-size: 15px; font-weight: 800; color: var(--refee-blue);
  margin-bottom: var(--space-3); display: flex; align-items: center; gap: 8px;
}
.pd-desc-heading::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--refee-amber); display: inline-block; }
.pd-desc-content { color: #555; line-height: 1.9; white-space: pre-line; }
.pd-desc-image-wrap { margin-top: var(--space-4); }
.pd-desc-image-wrap img { width: 100%; border-radius: var(--radius-md); display: block; }
@media (max-width: 860px) { .product-page { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ---------- صفحة معاينة منتج واحد (product.html?id=..) ---------- */
.pd-specs-list { display: flex; flex-direction: column; gap: 10px; }
.pd-specs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: 10px;
  border-bottom: 1px dashed #EFEDE8;
  font-size: 14px;
}
.pd-specs-label { color: #888; font-weight: 700; }
.pd-specs-value { color: #333; font-weight: 600; }
.pd-buy-btn.is-disabled { pointer-events: none; opacity: .5; }
.pd-not-found { text-align: center; padding-block: var(--space-8); }
.pd-not-found h1 { margin-bottom: var(--space-3); }
.pd-not-found p { color: #777; margin-bottom: var(--space-5); }

/* --------------------------------------------------------------------------
   17) السلة (Cart)
   -------------------------------------------------------------------------- */
.cart-card { background: var(--refee-white); border: 1px solid #EFEDE8; border-radius: var(--radius-md); padding: var(--space-5); }
.cart-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.cart-card-header h3 { margin: 0; }
.cart-item-count { font-size: 13px; color: #999; }
.cart-table-wrap { overflow-x: auto; }
.cart-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.cart-table th { text-align: start; font-size: 13px; color: #999; padding-block: var(--space-3); border-bottom: 1px solid #EFEDE8; white-space: nowrap; }
.cart-table td { padding-block: var(--space-4); border-bottom: 1px solid #EFEDE8; vertical-align: middle; }
.cart-table tr:last-child td { border-bottom: none; }
.cart-item { display: flex; align-items: center; gap: var(--space-3); }
.cart-item img { width: 74px; height: 74px; border-radius: var(--radius-sm); object-fit: cover; background: var(--refee-cream); flex-shrink: 0; }
.cart-remove { color: #C0392B; font-size: 13px; white-space: nowrap; }
.cart-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6); align-items: start; }
.summary-box { background: var(--refee-cream); border-radius: var(--radius-md); padding: var(--space-5); position: sticky; top: 100px; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: var(--space-3); font-size: 14px; }
.summary-row.total { font-weight: 800; font-size: 18px; color: var(--refee-blue); border-top: 1px dashed #ddd; padding-top: var(--space-3); }
@media (max-width: 860px) { .cart-layout { grid-template-columns: 1fr; } .summary-box { position: static; } }
@media (max-width: 640px) { .cart-table .hide-sm { display: none; } .cart-table { min-width: 0; } .cart-item img { width: 58px; height: 58px; } }

/* --------------------------------------------------------------------------
   18) المدونة
   -------------------------------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.blog-card { border-radius: var(--radius-md); overflow: hidden; background: var(--refee-white); border: 1px solid #EFEDE8; }
.blog-card img { aspect-ratio: 16/10; object-fit: cover; }
.blog-card-body { padding: var(--space-4); }
.blog-date { font-size: 12px; color: var(--refee-amber-dark); font-weight: 700; margin-bottom: 6px; display: block; }
.blog-article { max-width: 760px; margin-inline: auto; }
.blog-article img { border-radius: var(--radius-lg); margin-block: var(--space-5); }
.blog-article p { margin-bottom: var(--space-4); font-size: 17px; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   18ب) آخر الأخبار — بطاقة الخبر (تُستخدم في شريط الصفحة الرئيسية المتحرك
   وفي شبكة صفحة المدونة الثابتة على حدٍ سواء)
   -------------------------------------------------------------------------- */
.news-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--refee-white);
  border: 1px solid #EFEDE8;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .45s ease;
}
.news-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
/* انميشن بسيط عند الضغط على الخبر — إحساس لمسي فوري قبل الانتقال للصفحة */
.news-card:active { transform: scale(.94); transition: transform .15s ease; }
.news-card-media { position: relative; aspect-ratio: 1/1; overflow: hidden; }
/* -webkit-user-drag: none هو الحاجز الفعلي لسحب الصور الأصلي في المتصفح
   (خاصية draggable على عنصر <img> نفسه هي الحل الأساسي المطبَّق من JS،
   وهذا احتياط إضافي على مستوى CSS لضمان نفس السلوك حتى لو أُضيفت صورة
   لاحقاً بدون ضبط draggable). */
.news-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; -webkit-user-drag: none; user-drag: none; }
.news-card:hover .news-card-media img { transform: scale(1.08); }
.news-card-date {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 12px;
  background: var(--refee-blue);
  color: var(--refee-white);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.news-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card-body h3 {
  font-size: 17px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-body p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--refee-amber-dark); }
.news-card-more svg { transition: transform .3s ease; }
.news-card:hover .news-card-more svg { transform: translateX(-4px); }

/* --------------------------------------------------------------------------
   18ج) المدونة (مواضيع) — نظام مستقل بالكامل عن آخر الأخبار: شارة القسم/
   التصنيف على بطاقة الموضوع وفي صفحة تفاصيل الموضوع topic.html.
   -------------------------------------------------------------------------- */
.blog-card-cat {
  display: inline-block;
  align-self: flex-start;
  background: var(--refee-blue-light);
  color: var(--refee-blue-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}
.blog-topic-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.blog-topic-meta .blog-date { margin-bottom: 0; }

/* "أبرز اللحظات" — الخبر الأحدث يظهر ثابتاً وبحجم أكبر أعلى القسم دائماً
   (بلا أي حركة)، يليه شبكة أخبار صغيرة تتبدّل تلقائياً كل 5 ثوانٍ (انظر
   buildNewsRotatingGrid في news-engine.js)، بألوان هوية ريفي (الأزرق
   الملكي والعنبري الذهبي). هيكل واحد مشترك للكمبيوتر والجوال معاً. */
.news-showcase { display: flex; flex-direction: column; gap: var(--space-6); }

.news-featured-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  background: var(--refee-white);
  border: 1px solid #EFEDE8;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.news-featured-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.news-featured-media { position: relative; min-height: 280px; overflow: hidden; }
.news-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
}
.news-featured-badge {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  background: var(--refee-amber);
  color: var(--refee-black);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.news-featured-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: center;
}
.news-featured-date {
  color: var(--refee-blue);
  font-weight: 700;
  font-size: 13px;
}
.news-featured-body h3 { font-size: 26px; line-height: 1.4; }
.news-featured-body p { color: #666; font-size: 15px; line-height: 1.8; margin-block: var(--space-1) var(--space-2); }
.news-featured-cta { align-self: flex-start; margin-top: var(--space-1); }

/* شبكة الأخبار الصغيرة أسفل الخبر المميّز — 5 خانات بجانب بعض في صف واحد
   بالكمبيوتر، بمسافة مريحة بين كل بطاقة وأخرى (نفس مسافة شريط الأقسام
   .cat-grid)، وتتقلّص لـ3 أعمدة في الأجهزة اللوحية وعمودين في الجوال. */
.news-showcase-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }

/* كل خانة تحتوي بطاقة خبر واحدة ويُستبدل محتواها كل 5 ثوانٍ (بالتناوب،
   خانة واحدة كل مرة) عبر news-engine.js — تأثير تلاشٍ ناعم بدل تغيير
   مفاجئ عند كل استبدال. */
.news-rotate-cell { transition: opacity .4s ease, transform .4s ease; }
.news-rotate-cell.news-rotate-out { opacity: 0; transform: translateY(8px); }

@media (max-width: 980px) {
  .news-featured-card { grid-template-columns: 1fr; }
  .news-featured-media { min-height: 220px; }
  .news-showcase-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .news-showcase-grid { grid-template-columns: repeat(2, 1fr); }
}

/* شبكة كاملة لكل الأخبار (صفحة المدونة blog.html) — عرض ثابت بلا حركة */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 860px) { .news-grid { grid-template-columns: 1fr; } }

/* زر تبديل اللغة (عربي/إنجليزي) في صفحة تفاصيل الخبر */
.news-lang-toggle { display: inline-flex; gap: 6px; background: var(--refee-blue-light); padding: 4px; border-radius: 999px; margin-bottom: var(--space-4); }
.news-lang-toggle button {
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 7px 18px; border-radius: 999px; color: var(--refee-blue);
  transition: background .25s ease, color .25s ease;
}
.news-lang-toggle button.active { background: var(--refee-blue); color: var(--refee-white); }

/* صور المقال الداخلية في صفحة تفاصيل الخبر — تظهر الواحدة أسفل الأخرى
   (عمود واحد) بدل شبكة متعددة الأعمدة، لكل الأخبار على حدٍ سواء. */
.news-detail-gallery { display: flex; flex-direction: column; gap: var(--space-4); margin-block: var(--space-5); }
.news-detail-gallery img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-md); }

/* --------------------------------------------------------------------------
   19) صفحات المحتوى (سياسات / أسئلة شائعة)
   -------------------------------------------------------------------------- */
.content-page { max-width: 820px; margin-inline: auto; }
.content-page h2 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.content-page p, .content-page li { color: #4b4b4b; margin-bottom: var(--space-3); }
.content-page ul { list-style: disc; padding-inline-start: 22px; }

.faq-item { border-bottom: 1px solid #EFEDE8; padding-block: var(--space-4); }
.faq-q { display: flex; align-items: center; justify-content: space-between; font-weight: 700; cursor: pointer; }
.faq-a { color: #666; margin-top: var(--space-2); display: none; }
.faq-item.open .faq-a { display: block; }

.store-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.store-card { background: var(--refee-cream); border-radius: var(--radius-md); padding: var(--space-4); }
.store-card h4 { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.store-card-icon { display: inline-flex; color: var(--refee-blue); }
.store-card-icon svg { width: 18px; height: 18px; }
@media (max-width: 768px) { .store-list { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   20) نموذج تواصل
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; }
.form-group input, .form-group textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid #E3E1DB; outline: none; font-size: 14px;
  transition: border-color var(--transition);
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--refee-blue); }

.form-group select {
  width: 100%; padding: 14px 44px 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid #E3E1DB; outline: none; font-size: 14px; font-weight: 600;
  color: var(--refee-black); background: var(--refee-white);
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer; transition: border-color var(--transition), background var(--transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231548BA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 16px;
}
.form-group select:hover { border-color: var(--refee-blue-light); background-color: var(--refee-cream); }
.form-group select:focus { border-color: var(--refee-blue); }

/* --------------------------------------------------------------------------
   صفحة الوظائف (careers.html — انضم إلينا)
   -------------------------------------------------------------------------- */
/* قائمة الوظائف: كل وظيفة أسفل الأخرى (صف مستقل بعرض كامل) بدل الشبكة
   السابقة (3 أعمدة)، وزر "تقدّم لهذه الوظيفة" يظهر بجانب محتوى كل وظيفة
   مباشرة (يمين/يسار حسب الاتجاه) عبر flex-direction: row. */
.jobs-grid { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-2); }
.jobs-empty { text-align: center; color: #777; padding: var(--space-6) 0; }
.job-card {
  background: var(--refee-white); border: 1px solid #EFEDE8; border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); padding: var(--space-5);
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-5);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.job-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--refee-blue-light); }
.job-card-info { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 0; }
.job-card h3 { font-size: 17px; }
.job-card-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.job-card-meta span {
  font-size: 12px; font-weight: 700; color: var(--refee-blue);
  background: var(--refee-blue-light); padding: 4px 10px; border-radius: 999px;
}
.job-card p { color: #666; font-size: 14px; line-height: 1.8; margin: 0; }
.job-card .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .job-card { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .job-card .btn { align-self: stretch; text-align: center; }
}

.apply-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); max-width: 900px; margin-inline: auto; }
.apply-form .form-group.full-width { grid-column: 1 / -1; }
@media (max-width: 640px) { .apply-form { grid-template-columns: 1fr; } }

.cv-upload-field { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cv-upload-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 12px 20px; border-radius: var(--radius-sm); border: 1px dashed #C9C6BE;
  color: var(--refee-blue); font-weight: 700; font-size: 14px;
  background: var(--refee-cream); transition: border-color var(--transition), background var(--transition);
}
.cv-upload-btn:hover { border-color: var(--refee-blue); background: var(--refee-blue-light); }
.cv-file-name { font-size: 13px; color: #555; }

.cv-consent-row {
  display: flex; align-items: flex-start; gap: 8px; margin-top: var(--space-3);
  font-size: 13px; color: #555; line-height: 1.7; cursor: pointer;
}
.cv-consent-row input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--refee-blue); cursor: pointer; }

.form-message { margin-top: var(--space-3); padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; }
.form-message.is-success { background: #E7F7EE; color: #1E8A4C; }
.form-message.is-error { background: #FDEAEA; color: #C23B3B; }

/* ---------- لوحة التحكم: قائمة "الطلبات الواردة" (تُعرض في admin.js) ---------- */
.application-row.is-reviewed { opacity: .7; }
.application-status-tag {
  display: inline-block; margin-inline-start: 8px; font-size: 11px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px; background: var(--refee-amber); color: var(--refee-black);
  vertical-align: middle;
}
.application-row.is-reviewed .application-status-tag { background: #E1F5F2; color: #1E8A4C; }
.application-message { font-style: italic; color: #777; }

/* --------------------------------------------------------------------------
   صفحة الشهادات والجوائز (certificates.html)
   -------------------------------------------------------------------------- */
.cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-bottom: var(--space-2); }
.cert-empty { text-align: center; color: #777; padding: var(--space-6) 0; }
.cert-card {
  background: var(--refee-white); border: 1px solid #EFEDE8; border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.cert-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--refee-blue-light); }
.cert-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--refee-cream); }
.cert-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-drag: none; }
.cert-card-badge {
  position: absolute; top: 14px; inset-inline-start: 14px;
  background: var(--refee-amber); color: var(--refee-black);
  font-size: 12px; font-weight: 800; padding: 6px 14px;
  border-radius: 999px; box-shadow: var(--shadow-sm);
}
.cert-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.cert-card-body h3 { font-size: 18px; line-height: 1.4; }
.cert-card-body p { color: #666; font-size: 14px; line-height: 1.8; flex: 1; }
.cert-card-video { align-self: flex-start; margin-top: var(--space-1); }
@media (max-width: 768px) { .cert-grid { grid-template-columns: 1fr; } }

/* شريط أيقونات الشهادات المعتمدة (شعارات كبيرة أعلى الصفحة، مثل ISO
   وهيئة الغذاء والدواء وغيرها) — منفصل عن بطاقات الشهادات التفصيلية،
   يُخفى تلقائياً (مع عنوان القسم إن وُجد) إن لم يضِف المشرف أي شعار من
   لوحة التحكم. */
.cert-badges-block { margin-bottom: var(--space-2); }
.cert-badges-title { margin-bottom: var(--space-5); }
.cert-badges-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: start;
  gap: var(--space-7); margin-bottom: var(--space-7); padding: var(--space-5) 0;
}
/* الكمبيوتر: نفس التنسيق الأصلي (عرض ثابت لكل شعار، يلتف الصف تلقائياً
   بحسب المساحة المتاحة) مع توسيط دائم بفضل justify-content:center أعلاه. */
.cert-badge {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  width: 170px;
}
.cert-badge img { width: 130px; height: 130px; object-fit: contain; }
.cert-badge span { font-size: 15px; font-weight: 700; color: #555; line-height: 1.4; }
@media (max-width: 640px) {
  .cert-badges-strip { gap: var(--space-5) var(--space-3); }
  /* الجوال: 3 شعارات بالضبط بكل صف (basis محسوب بحيث يطرح نصيب هذا
     العنصر من الفراغات الأفقية بين الأعمدة)، مع توسيط الصف الأخير تلقائياً
     إن كان عدد الشعارات غير مضاعف لـ3 بفضل justify-content:center أعلاه. */
  .cert-badge { width: auto; flex-basis: calc((100% - 2 * var(--space-3)) / 3); max-width: 118px; gap: 10px; }
  .cert-badge img { width: 92px; height: 92px; }
}

/* --------------------------------------------------------------------------
   21) شارة واتساب عائمة
   -------------------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   22) أدوات مساعدة عامة
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.bg-cream { background: var(--refee-cream); }
.bg-blue { background: var(--refee-blue); color: var(--refee-white); }

/* --------------------------------------------------------------------------
   23) قسم الموزعين ونقاط البيع (نص + خريطة جنباً إلى جنب)
   -------------------------------------------------------------------------- */
.map-section-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.map-section-text { text-align: start; }
.map-section-text .eyebrow { display: inline-block; margin-bottom: var(--space-2); }
.map-section-text h2 { margin-bottom: var(--space-3); }

/* لوحة خلفية مزخرفة تغطي القسم كاملاً (النص + مربع الخريطة معاً) — تدرج
   أزرق من هوية ريفي بنفس أسلوب زخرفة الهيرو أعلى الصفحة، مع دائرتين
   زخرفيتين (كهرمانية أسفل يسار القسم، وبيضاء شفافة أعلى يمينه)، ومربع
   الخريطة يبقى بلون فاتح ليعطي إحساس "عائم" فوق خلفية الهوية. ألوان نص
   العنوان والوصف عُدِّلت لتقرأ بوضوح فوق الخلفية الزرقاء الغامقة. */
.map-section-decor {
  position: relative;
  background: linear-gradient(135deg, var(--refee-blue) 0%, var(--refee-blue-dark) 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.map-section-decor::before {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  background: var(--refee-amber);
  opacity: .3;
  border-radius: var(--radius-blob);
  bottom: -120px;
  inset-inline-start: -90px;
  z-index: 0;
}
.map-section-decor::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
  top: -70px;
  inset-inline-end: -60px;
  z-index: 0;
}
.map-section-decor .container { position: relative; z-index: 1; }
.map-section-decor .map-section-text h2 { color: var(--refee-white); }
.map-section-decor .map-section-text p { color: var(--refee-cream); opacity: .9; }

.pos-map-embed {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--refee-cream);
  min-height: 340px;
  box-shadow: var(--shadow-lg);
}
.pos-map-embed iframe { display: block; width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }
@media (max-width: 860px) {
  .map-section-layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .map-section-text { text-align: center; }
  .pos-map-embed { min-height: 280px; }
}
.rounded-blob { border-radius: var(--radius-blob); }

/* --------------------------------------------------------------------------
   24) رؤيتنا / رسالتنا / هدفنا / أين نحن (بطاقات "من نحن")
   -------------------------------------------------------------------------- */
.vision-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.vision-card {
  background: var(--refee-white);
  border: 1px solid #EFEDE8;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.vision-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--refee-blue-light);
}
/* أيقونة كل بطاقة الآن شكل "بلوب" عضوي (نفس هوية الموقع البصرية المستخدمة
   في الهيرو وغيره — var(--radius-blob)) بلون خلفية مميز لكل بطاقة من لوحة
   ألوان ريفي الكاملة، مع أيقونة SVG داخلية ملونة بالكامل (full color) بدل
   الإيموجي الافتراضي، بحيث تكون كل أيقونة مميزة ومرتبطة بصرياً بمعنى
   قسمها (عين للرؤية، ورقة للرسالة، هدف للهدف، دبوس موقع لأين نحن). */
.vision-icon {
  width: 96px;
  height: 96px;
  margin-inline: auto;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-blob);
  filter: drop-shadow(0 8px 12px rgba(26, 26, 26, .10));
  transition: border-radius var(--transition);
}
.vision-card:hover .vision-icon { border-radius: 50%; }
.vision-card h3 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: var(--space-2);
  font-size: 19px;
}
.vision-card h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--refee-amber);
}
.vision-card p { font-size: 14px; line-height: 1.8; color: #666; }
@media (max-width: 992px) {
  .vision-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .vision-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   25) قسم "عملاؤنا" — رقم إحصائي كبير في وسط الصفحة بشكل زخرفي من الهوية
   -------------------------------------------------------------------------- */
.customers-stat-section {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.customers-stat-blob {
  position: absolute;
  border-radius: var(--radius-blob);
  z-index: 0;
}
.customers-stat-blob-a {
  width: 280px;
  height: 280px;
  background: var(--refee-blue-light);
  top: -60px;
  inset-inline-start: -60px;
}
.customers-stat-blob-b {
  width: 220px;
  height: 220px;
  background: var(--refee-amber);
  opacity: .18;
  bottom: -70px;
  inset-inline-end: -40px;
}
.customers-stat-decor { position: relative; z-index: 1; }
.customers-stat-label {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--refee-amber-dark);
  background: #FFF4DE;
  padding: 6px 20px;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}
.customers-stat-number {
  font-size: clamp(56px, 11vw, 130px);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--refee-blue) 0%, var(--refee-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   26) صفحة "عن ريفي" — نبذة تعريفية + إحصائيات مصغّرة (منتجاتنا/موزعين/عملاؤنا)
   -------------------------------------------------------------------------- */
.about-intro-section .container { max-width: 820px; text-align: center; }
.about-intro-section h1 { margin-bottom: var(--space-4); }
.about-intro-section p { color: #555; line-height: 1.9; font-size: 15px; margin-bottom: var(--space-3); }
.about-intro-section p:last-child { margin-bottom: 0; }

.about-stats-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5);
  margin-top: var(--space-6);
}
.about-stat-card {
  background: var(--refee-white);
  border: 1px solid #EFEDE8;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  flex: 1 1 220px;
  max-width: 260px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.about-stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.about-stat-label { display: block; font-size: 16px; font-weight: 700; color: #555; margin-bottom: 10px; }
.about-stat-number {
  display: block;
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--refee-blue) 0%, var(--refee-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--space-4);
}
.about-stat-card .btn { margin-top: 2px; }

/* --------------------------------------------------------------------------
   27) نقاط البيع والموزعين (points-of-sale.html) — أكورديون منطقة ← مدينة
   ← فرع (بنفس فكرة صفحة فروع باجة)، الضغط على المدينة يفتح فروعها، والضغط
   على الفرع يفتح خريطة Google المضمّنة الخاصة به. مبني بالكامل من
   stores-engine.js اعتماداً على بيانات لوحة التحكم.
   -------------------------------------------------------------------------- */
.pos-stores-root { margin-top: var(--space-2); }
.pos-empty { text-align: center; color: #777; padding: var(--space-6) 0; }
.pos-region { margin-bottom: var(--space-7); }
.pos-region-title { color: var(--refee-blue-dark); font-size: 22px; margin-bottom: var(--space-4); }
.pos-city-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
  align-items: start;
}
@media (max-width: 768px) { .pos-city-grid { grid-template-columns: 1fr; } }

.pos-city {
  background: var(--refee-white); border: 1px solid #EFEDE8; border-radius: var(--radius-sm);
  overflow: hidden; align-self: start;
}
.pos-city-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--refee-blue-dark); color: var(--refee-white);
  border: none; cursor: pointer; font-weight: 700; font-size: 15px; font-family: inherit;
}
.pos-chevron { transition: transform var(--transition); font-size: 18px; line-height: 1; }
.pos-city.is-open > .pos-city-header .pos-chevron { transform: rotate(-90deg); }

.pos-branch-list { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.pos-city.is-open > .pos-branch-list { max-height: 3000px; }

.pos-branch { border-top: 1px solid #F0EEE8; }
.pos-branch-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: #F7F5F0; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #333; font-family: inherit;
}
.pos-branch.is-open > .pos-branch-header .pos-chevron { transform: rotate(-90deg); }
.pos-branch-body { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.pos-branch.is-open > .pos-branch-body { max-height: 500px; }
.pos-branch-address { padding: 12px 18px 0; font-size: 13px; color: #666; margin: 0; }
.pos-branch-map { padding: 10px 18px 16px; }
.pos-branch-map iframe { width: 100%; height: 260px; border: 0; border-radius: var(--radius-sm); display: block; }
.pos-branch-map-placeholder {
  background: var(--refee-cream); border-radius: var(--radius-sm); padding: 40px 16px;
  text-align: center; color: #999; font-size: 13px;
}