/* =========================================================
   خط Cairo — self-hosted (variable woff2, الأوزان 400–900).
   3 نطاقات فرعية فقط: عربي / لاتيني موسّع / لاتيني.
   المسار نسبي لموقع هذا الملف (assets/css/base/ → ../../fonts/).
   font-display: swap لتفادي حجب العرض (CLS/LCP).
   ========================================================= */

/* عربي — الأهم (preload في class-performance) */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("https://akiraq.store/wp-content/themes/mobile-shop-theme/assets/fonts/cairo-arabic.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

/* لاتيني موسّع */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("https://akiraq.store/wp-content/themes/mobile-shop-theme/assets/fonts/cairo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* لاتيني أساسي + أرقام */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("https://akiraq.store/wp-content/themes/mobile-shop-theme/assets/fonts/cairo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Design Tokens — هوية «تكسفير / TEK» (معتمدة 2026-06-25).
   مأخوذة من تصميم الهاندأوف: كحلي عميق + سماوي (Sky) متوهّج.
   الهوية «داكنة أولاً» (Dark-first) — وهي الافتراضي، مع وضع
   فاتح اختياري عبر [data-theme="light"]. الأسماء الدلالية ثابتة.
   ========================================================= */
:root {
  color-scheme: dark;

  /* ===== لون الهوية: السماوي المتوهّج (Sky) ===== */
  --sky:   #38d6ff;
  --sky2:  #0aa3ff;
  --navy:  #081138;
  --grad-primary: linear-gradient(135deg, #38d6ff, #0aa3ff);
  --grad-fresh:   linear-gradient(135deg, #36e6d0, #0aa3ff);
  --glow-primary: 0 8px 26px rgba(56, 214, 255, .40);
  --glow-soft:    0 14px 36px rgba(56, 214, 255, .18);

  /* ===== الألوان الدلالية (Dark — الافتراضي) ===== */
  --color-primary:      #38d6ff;
  --color-primary-dark: #0aa3ff;
  --color-secondary:    #081138;
  --color-accent:       #38d6ff;
  --color-text:         #eaf2ff;
  --color-text-muted:   #93a7d4;
  --color-page:         #070b1c;  /* خلفية الصفحة */
  --color-bg:           #0d1736;  /* الأسطح/البطاقات */
  --color-surface:      #0d1736;
  --color-bg-soft:      #122149;  /* سطح ثانوي */
  --color-surface-2:    #122149;
  --color-border:       rgba(120, 170, 255, .16);
  --color-header:       rgba(8, 12, 30, .72);  /* خلفية الهيدر الزجاجي */
  --color-success:      #16A34A;
  --color-warning:      #F59E0B;
  --color-error:        #ff5c6c;
  --color-on-primary:   #04142e;  /* نص داكن فوق السماوي */
  --color-on-accent:    #04142e;

  /* ===== تدرّجات اللون الرئيسي (سماوي) ===== */
  --primary-50:  #0e2148;  --primary-100: #122a5c;  --primary-300: #2f7fd6;
  --primary-500: #38d6ff;  --primary-600: #0aa3ff;  --primary-700: #0883d4;
  --primary-900: #06325e;

  /* ===== تدرّجات اللون الثانوي (كحلي) ===== */
  --secondary-100: #1a2a55;  --secondary-300: #2c3d6b;  --secondary-500: #122149;
  --secondary-700: #0c1736;  --secondary-800: #081138;  --secondary-900: #050b22;

  /* ===== تدرّجات اللون المميّز (سماوي/برتقالي للعروض) ===== */
  --accent-50:  #0e2148;  --accent-100: #122a5c;  --accent-300: #7fe4ff;
  --accent-500: #38d6ff;  --accent-600: #0aa3ff;  --accent-700: #38d6ff;
  --accent-900: #06325e;
  --offer:      #ff8a4c;  /* شارة «عرض» */

  /* ===== الحياد ===== */
  --n0:#0d1736; --n50:#0f1a3e; --n100:#122149; --n200:#1a2a55; --n300:#2c3d6b;
  --n400:#5a6a98; --n500:#93a7d4; --n600:#b3c2e6; --n700:#cdd9f2; --n800:#e0e9fb;
  --n900:#eaf2ff;

  /* ===== ألوان الحالة (خلفية/نص) ===== */
  --success-bg:#102a1c; --success-fg:#4ade80;
  --warning-bg:#2c2008; --warning-fg:#fbbf24;
  --error-bg:#2e1414;   --error-fg:#ff8a96;

  /* ===== شارات المخزون ===== */
  --color-stock-high: #16A34A;
  --color-stock-low:  #F59E0B;
  --color-stock-out:  #ff5c6c;

  /* ===== الخطوط — Cairo ===== */
  --font-primary:  'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-size-xs:   0.8125rem;  /* 13 */
  --font-size-sm:   0.875rem;   /* 14 */
  --font-size-base: 1rem;       /* 16 */
  --font-size-lg:   1.125rem;   /* 18 */
  --font-size-xl:   1.25rem;    /* 20 */
  --font-size-2xl:  1.625rem;   /* 26 */
  --font-size-3xl:  2.125rem;   /* 34 */
  --font-size-4xl:  2.875rem;   /* 46 */
  --line-base: 1.7;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900;

  /* ===== المسافات ===== */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;   --space-8: 2rem;    --space-12: 3rem;    --space-16: 4rem;

  /* ===== نصف القطر (أكبر كما في التصميم) ===== */
  --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 18px;  --radius-xl: 24px;  --radius-full: 9999px;

  /* ===== الظلال ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, .30);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .45);

  /* ===== الانتقالات ===== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ===== تخطيط ===== */
  --container: 1280px;
  --header-h:  72px;
}

/* =========================================================
   الوضع الفاتح — اختياري عبر [data-theme="light"] على <html>.
   (الهوية داكنة أولاً؛ المستخدم يبدّل للفاتح يدوياً.)
   ========================================================= */
:root[data-theme="light"] {
  color-scheme: light;

  --color-text:         #0a1530;
  --color-text-muted:   #52648a;
  --color-page:         #eef3fc;
  --color-bg:           #ffffff;
  --color-surface:      #ffffff;
  --color-bg-soft:      #eef3fc;
  --color-surface-2:    #eef3fc;
  --color-border:       rgba(20, 60, 140, .14);
  --color-header:       rgba(255, 255, 255, .80);
  --color-secondary:    #0a1838;
  --navy:               #0a1838;
  --color-error:        #DC2626;

  --primary-50:  #eef6ff;  --primary-100: #dbecff;  --primary-300: #8fd4f5;

  --n0:#FFFFFF; --n50:#F7FAFF; --n100:#eef3fc; --n200:#E2E8F4; --n300:#CBD6EA;
  --n400:#9AA8C5; --n500:#52648a; --n600:#3a4a6b; --n700:#26344f; --n800:#16203a;
  --n900:#0a1530;

  --success-bg:#DCFCE7; --success-fg:#15803D;
  --warning-bg:#FEF3C7; --warning-fg:#B45309;
  --error-bg:#FEE2E2;   --error-fg:#B91C1C;

  --color-stock-out:  #DC2626;
  --color-error:      #DC2626;

  --shadow-sm: 0 1px 2px rgba(17, 30, 60, .06);
  --shadow-md: 0 12px 40px rgba(17, 30, 60, .10);
  --shadow-lg: 0 18px 44px rgba(17, 30, 60, .14);
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms;
  }
}

/* Modern CSS Reset (مختصر) */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh;
  line-height: var(--line-base, 1.6);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* أداة إخفاء بصري لنصوص قارئ الشاشة (معيار ووردبريس) — يوفّرها الثيم بعد إزالة
   أنماط WooCommerce، وإلا ظهرت نصوص a11y (مثل وصف السعر) وأفسدت التخطيط. */
.screen-reader-text,
.screen-reader-text span,
.woocommerce-Price-amount .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  word-wrap: normal !important;
}

/* نظام الخطوط — RTL أولاً */
html { direction: rtl; }

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-base);
  color: var(--color-text);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition-base), color var(--transition-base);
}

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; }
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

/* عنوان الصفحة العام (السلة/الدفع/حسابي… المعروضة عبر index.php):
   حجم متجاوب يمنع القصّ على الهاتف + تباعد سفلي يمنع تداخله مع أول عنصر. */
.ms-entry__title {
  font-size: clamp(1.7rem, 5.5vw, var(--font-size-3xl));
  line-height: 1.2;
  margin: 0 0 var(--space-6);
}

a { transition: color var(--transition-fast); }
a:hover { color: var(--color-primary); }

/* =========================================================
   Buttons — أزرار الثيم (BEM, RTL-first, لمس ≥ 44px).
   ========================================================= */
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.ms-btn:active { transform: translateY(1px); }
.ms-btn:disabled,
.ms-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.ms-btn--primary {
  background: var(--grad-primary);
  color: var(--color-on-primary);
  font-weight: 800;
  border-radius: var(--radius-md);
  box-shadow: var(--glow-primary);
}
.ms-btn--primary:hover { filter: brightness(1.06); box-shadow: 0 10px 30px rgba(56, 214, 255, .5); }

.ms-btn--accent {
  background: var(--grad-primary);
  color: var(--color-on-accent);
  font-weight: 800;
  border-radius: var(--radius-md);
  box-shadow: var(--glow-primary);
}
.ms-btn--accent:hover { filter: brightness(1.06); box-shadow: 0 10px 30px rgba(56, 214, 255, .5); }

/* زر شبحي (زجاجي) — كما في «المواصفات» بالهيرو */
.ms-btn--ghost {
  background-color: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .28);
  color: var(--color-text);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ms-btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

.ms-btn--block { width: 100%; }

.ms-btn--whatsapp {
  background-color: #25d366;
  color: #fff;
  width: 100%;
  min-height: 52px;
  font-weight: 800;            /* يطابق وزن «أضف إلى السلة» */
  gap: var(--space-2);
}
.ms-btn--whatsapp:hover { background-color: #1ebe5b; filter: none; box-shadow: 0 10px 26px rgba(37, 211, 102, .35); }
/* الأيقونة تشارك صنف الزر العائم (padding:14px) — نُصفّره هنا وإلا انهارت داخل الـ20px. */
.ms-btn--whatsapp svg { width: 20px; height: 20px; padding: 0; flex: 0 0 auto; }

/* حالة التحميل داخل الزر */
.ms-btn.is-loading { position: relative; color: transparent !important; }
.ms-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-inline-start-color: transparent;
  border-radius: var(--radius-full);
  color: #fff;
  animation: ms-spin .6s linear infinite;
}
@keyframes ms-spin { to { transform: rotate(360deg); } }

/* =========================================================
   Header & Layout — الرأس والشريط العلوي والتخطيط العام.
   ========================================================= */
.ms-container,
.ms-header__inner,
.ms-footer__inner,
.ms-main {
  width: min(var(--container), 100% - (2 * var(--space-4)));
  margin-inline: auto;
}

.ms-main { padding-block: var(--space-6); }

/* الشريط العلوي — توصيل سريع + رقم واتساب (مُتمركز) */
.ms-topbar {
  background: var(--color-secondary);
  color: #fff;
  font-size: var(--font-size-xs);
}
.ms-topbar__inner {
  width: min(var(--container), 100% - (2 * var(--space-4)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 38px;
  flex-wrap: wrap;
  font-weight: var(--fw-semibold);
}
.ms-topbar__highlight { color: var(--accent-300); }
.ms-topbar__sep { opacity: .4; }
.ms-topbar__label { color: rgba(255, 255, 255, .85); }
.ms-topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-weight: var(--fw-black);
  text-decoration: none;
}
.ms-topbar__phone:hover { color: #fff; text-decoration: underline; }
.ms-topbar__wa { flex: 0 0 auto; }

/* الرأس الرئيسي — Sticky زجاجي */
.ms-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 700;
  background: var(--color-header);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-block-end: 1px solid var(--color-border);
  transition: box-shadow var(--transition-fast);
}
.ms-header.is-stuck { box-shadow: var(--shadow-md); }
.ms-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
}
.ms-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.ms-header__brand img { max-height: 48px; width: auto; }

/* ===== الشعار المخصّص (صورة) — نسختان تتبدّلان مع الوضع ===== */
.ms-header__brand--logo { gap: 0; }
.ms-logo { display: block; max-height: 40px; max-width: 178px; width: auto; object-fit: contain; }
/* الافتراضي داكن → أظهر نسخة الخلفية الداكنة وأخفِ نسخة الفاتحة. */
.ms-header__brand--logo .ms-logo--on-light { display: none; }
.ms-header__brand--logo .ms-logo--on-dark  { display: block; }
:root[data-theme="light"] .ms-header__brand--logo .ms-logo--on-dark  { display: none; }
:root[data-theme="light"] .ms-header__brand--logo .ms-logo--on-light { display: block; }
@media (max-width: 560px) { .ms-logo { max-height: 40px; max-width: 170px; } }

/* علامة الشعار — مربّع متدرّج سماوي متوهّج */
.ms-brand-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--grad-primary);
  box-shadow: 0 6px 22px rgba(56, 214, 255, .4);
  flex-shrink: 0;
}
.ms-brand-mark__square {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 3px solid #04142e;
}
.ms-brand-text {
  font-size: 21px;
  font-weight: var(--fw-black);
  letter-spacing: -.5px;
  color: var(--color-text);
}

/* التنقّل (سطح المكتب) */
/* لا تنكمش القائمة (تبقى عناصرها في سطر واحد)؛ البحث المرن يمتصّ الباقي. */
.ms-nav { display: none; flex: 0 0 auto; }
.ms-menu--primary {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ms-menu--primary a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ms-menu--primary a:hover,
.ms-menu--primary .current-menu-item > a { background: var(--color-surface-2); color: var(--color-primary); }
@media (min-width: 992px) { .ms-nav { display: block; } }

.ms-header__actions { display: inline-flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }

/* زر الحساب/الدخول — يظهر على سطح المكتب فقط */
.ms-header__account { display: none; height: 42px; padding-inline: 20px; }
@media (min-width: 768px) { .ms-header__account { display: inline-flex; } }

/* زر السلة في الرأس */
.ms-cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  cursor: pointer;
  color: var(--color-text);
}
.ms-cart-toggle__count {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-start: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--font-size-xs);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* البحث يختفي على الجوال داخل الرأس ويظهر أسفله */
.ms-header .ms-search { display: none; }
@media (min-width: 768px) {
  .ms-header .ms-search { display: block; }
}

/* تذييل داكن كحلي */
.ms-footer {
  margin-block-start: var(--space-12);
  background: var(--navy);
  color: #fff;
  border-block-start: 1px solid var(--color-border);
}
.ms-footer__inner { padding-block: var(--space-8) var(--space-6); }

.ms-footer__grid,
.ms-footer__widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-block-end: var(--space-6);
}
@media (min-width: 768px) {
  .ms-footer__grid,
  .ms-footer__widgets { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.ms-footer__brand-col { grid-column: 1 / -1; }
@media (min-width: 768px) { .ms-footer__brand-col { grid-column: auto; } }

.ms-footer__brand { display: inline-flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-3); }
.ms-footer__brand .ms-brand-text { color: #fff; font-size: var(--font-size-lg); }
.ms-footer__brand--logo { text-decoration: none; }
.ms-footer__logo { max-height: 50px; max-width: 240px; width: auto; object-fit: contain; }
.ms-footer__about {
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: rgba(255, 255, 255, .6);
  margin: 0;
  max-width: 280px;
}
.ms-footer__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: var(--space-4);
  padding: 11px 16px;
  border-radius: var(--radius-md);
  background: #25D366;
  color: #04240f;
  font-weight: 800;
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.ms-footer__wa:hover { color: #04240f; background: #1ebe5b; }

/* طرق الدفع (شارات) */
.ms-footer__pays { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ms-footer__pay {
  padding: 9px 13px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #cfe0ff;
  font-weight: 700;
  font-size: var(--font-size-xs);
}

.ms-footer__heading { font-size: var(--font-size-sm); font-weight: 800; margin: 0 0 var(--space-3); color: #fff; }
.ms-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ms-footer__links li,
.ms-footer__links span { font-size: var(--font-size-xs); color: rgba(255, 255, 255, .6); }
.ms-footer__links a { color: rgba(255, 255, 255, .6); text-decoration: none; transition: color var(--transition-fast); }
.ms-footer__links a:hover { color: #fff; }

/* معلومات التواصل (التذييل) */
.ms-footer__contact li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ms-footer__contact-label { color: rgba(255, 255, 255, .42); flex-shrink: 0; }

.ms-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid rgba(255, 255, 255, .12);
}
.ms-footer__copy { color: rgba(255, 255, 255, .5); font-size: var(--font-size-xs); margin: 0; }
.ms-footer__cod { color: rgba(255, 255, 255, .5); font-size: var(--font-size-xs); }

/* روابط السياسات في الشريط السفلي */
.ms-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.ms-footer__legal a {
  position: relative;
  color: rgba(255, 255, 255, .6);
  font-size: var(--font-size-xs);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.ms-footer__legal a:hover { color: #fff; }
.ms-footer__legal a + a::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--space-2));
  inset-block: 2px;
  width: 1px;
  background: rgba(255, 255, 255, .2);
}

/* قائمة التذييل (إن وُجدت) */
.ms-menu--footer { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; }
.ms-menu--footer a { color: rgba(255, 255, 255, .7); font-size: var(--font-size-sm); }
.ms-menu--footer a:hover { color: #fff; }

/* =========================================================
   التنقّل — أزرار أيقونية + درج جانبي (Off-canvas) + تبديل الوضع.
   الموقع RTL: الدرج ينزلق من اليمين (الجهة البادئة).
   ========================================================= */

/* زر أيقوني موحّد (قائمة / سلة / وضع ليلي) — لمس ≥ 44px */
.ms-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ms-icon-btn:hover { background: var(--color-bg-soft); border-color: var(--color-primary); color: var(--color-primary); }
.ms-icon-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* زر القائمة في الرأس — يختفي على سطح المكتب حيث يظهر التنقّل المضمّن */
.ms-nav-toggle { flex: 0 0 auto; }
@media (min-width: 992px) { .ms-nav-toggle { display: none; } }

/* ===== تبديل الوضع (أيقونة قمر/شمس) — الهوية داكنة أولاً =====
   الافتراضي داكن ⇒ نُظهر الشمس (للتبديل للفاتح). عند [data-theme="light"]
   نُظهر القمر (للعودة للداكن). */
.ms-theme-toggle__moon { display: none; }
.ms-theme-toggle__sun  { display: inline; }
:root[data-theme="light"] .ms-theme-toggle__moon { display: inline; }
:root[data-theme="light"] .ms-theme-toggle__sun  { display: none; }

/* ===== الطبقة المعتمة خلف الدرج ===== */
.ms-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(11, 20, 48, .55);
  opacity: 0;
  pointer-events: none;   /* لا يلتقط النقرات إلا حين يكون فعّالاً — حماية من تجمّد الصفحة */
  transition: opacity var(--transition-base);
}
.ms-nav-overlay.is-active { opacity: 1; pointer-events: auto; }

/* ===== الدرج الجانبي ===== */
.ms-nav-drawer {
  position: fixed;
  inset-block: 0;
  right: 0;                 /* الجهة البادئة في RTL */
  z-index: 950;
  display: flex;
  flex-direction: column;
  width: min(320px, 86vw);
  background: var(--color-surface);
  border-inline-start: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);   /* مخفي إلى اليمين */
  transition: transform var(--transition-base);
  overscroll-behavior: contain;
}
.ms-nav-drawer.is-open { transform: translateX(0); }

/* احترام خاصية hidden (المُحدِّد الصنفي يتغلّب على UA افتراضياً) */
.ms-nav-drawer[hidden],
.ms-nav-overlay[hidden] { display: none; }

.ms-nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}
.ms-nav-drawer__brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; min-width: 0; }
.ms-nav-drawer__brand .ms-brand-text { font-size: var(--font-size-xl); }

/* الشعار المخصّص داخل الدرج — نسختان تتبدّلان مع الوضع (مطابقة للهيدر). */
.ms-nav-drawer__brand--logo { gap: 0; }
.ms-nav-drawer__brand--logo .ms-logo { max-height: 38px; max-width: 200px; }
.ms-nav-drawer__brand--logo .ms-logo--on-light { display: none; }
.ms-nav-drawer__brand--logo .ms-logo--on-dark  { display: block; }
:root[data-theme="light"] .ms-nav-drawer__brand--logo .ms-logo--on-dark  { display: none; }
:root[data-theme="light"] .ms-nav-drawer__brand--logo .ms-logo--on-light { display: block; }

/* البحث داخل الدرج (وصول البحث على الجوال) */
.ms-nav-drawer__search { padding: var(--space-3) var(--space-4) 0; }
.ms-nav-drawer__search .ms-search { display: block; max-width: none; margin: 0; }

.ms-nav-drawer__nav { flex: 1 1 auto; overflow-y: auto; padding: var(--space-2) var(--space-3); }
.ms-nav-drawer__empty { color: var(--color-text-muted); font-size: var(--font-size-sm); padding: var(--space-4); }

/* زر واتساب الدرج — نملأ عرض الدرج عبر تمدّد flex لا عبر width:100%،
   حتى لا تُضيف هوامش الجوانب إلى العرض فيتجاوز الزر حدّ الدرج. */
.ms-nav-drawer__wa {
  width: auto;
  align-self: stretch;
  margin: var(--space-3) var(--space-4) var(--space-4);
}

/* ===== قائمة الدرج (BEM) ===== */
.ms-menu--drawer { list-style: none; margin: 0; padding: 0; }
.ms-menu--drawer li { margin: 0; }
.ms-menu--drawer a {
  display: block;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ms-menu--drawer a:hover,
.ms-menu--drawer .current-menu-item > a { background: var(--primary-50); color: var(--color-primary); }

/* قوائم فرعية (depth 2) */
.ms-menu--drawer .sub-menu { list-style: none; margin: 0; padding-inline-start: var(--space-4); }
.ms-menu--drawer .sub-menu a { font-weight: 400; font-size: var(--font-size-sm); }

/* قفل تمرير الجسم عند فتح الدرج */
body.ms-no-scroll { overflow: hidden; }

/* =========================================================
   السلة الجانبية (Mini Cart Drawer) — هوية كحلي+سماوي، RTL.
   الموقع RTL: الدرج ينزلق من اليمين (الجهة البادئة). الهاتف أولاً.
   ========================================================= */

/* ===== الطبقة المعتمة ===== */
.ms-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 960;
  background: rgba(7, 11, 28, .62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.ms-cart-overlay.is-active { opacity: 1; pointer-events: auto; }
.ms-cart-overlay[hidden] { display: none; }

/* ===== الدرج ===== */
.ms-cart-drawer {
  position: fixed;
  inset-block: 0;
  right: 0;                 /* الجهة البادئة في RTL */
  z-index: 970;
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  max-width: 100%;
  height: 100%;
  height: 100dvh;
  background: var(--color-page);
  border-inline-start: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);   /* مخفي إلى اليمين */
  transition: transform var(--transition-base);
  overscroll-behavior: contain;
}
.ms-cart-drawer.is-open { transform: translateX(0); }
.ms-cart-drawer[hidden] { display: none; }

/* حالة الانشغال أثناء AJAX */
.ms-cart-drawer.is-busy { cursor: progress; }
.ms-cart-drawer.is-busy .ms-cart-drawer__content { opacity: .55; pointer-events: none; }

/* ===== الرأس ===== */
.ms-cart-drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
}
.ms-cart-drawer__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-text);
}
.ms-cart-drawer__title svg { color: var(--color-primary); }
.ms-cart-drawer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--grad-primary);
  color: var(--color-on-primary);
  font-size: var(--font-size-xs);
  font-weight: 800;
  line-height: 1;
}
.ms-cart-drawer__badge[hidden] { display: none; }

/* ===== جسم المحتوى (يملأ المتبقّي، قائمة قابلة للتمرير + تذييل مثبّت) ===== */
.ms-cart-drawer__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: opacity var(--transition-fast);
}

/* ===== قائمة العناصر ===== */
.ms-cart-drawer__items {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  -webkit-overflow-scrolling: touch;
}

.ms-cart-line {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-block-end: 1px solid var(--color-border);
}
.ms-cart-line:last-child { border-block-end: none; }

.ms-cart-line__media {
  flex: 0 0 auto;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
}
.ms-cart-line__img,
.ms-cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ms-cart-line__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ms-cart-line__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.ms-cart-line__name {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.4;
  /* سطران كحدٍّ أقصى */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.ms-cart-line__name:hover { color: var(--color-primary); }

.ms-cart-line__variant {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ms-cart-line__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ms-cart-line__remove:hover { background: var(--error-bg); color: var(--color-error); }
.ms-cart-line__remove:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.ms-cart-line__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* عدّاد الكمية */
.ms-cart-line__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  overflow: hidden;
}
.ms-cart-line__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ms-cart-line__step:hover { background: var(--primary-50); color: var(--color-primary); }
.ms-cart-line__step:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.ms-cart-line__count {
  min-width: 30px;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
}

.ms-cart-line__price {
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--color-text);
  white-space: nowrap;
}
.ms-cart-line__price del { color: var(--color-text-muted); font-weight: 600; margin-inline-end: 4px; }

/* ===== التذييل (المجموع + الأزرار) ===== */
.ms-cart-drawer__footer {
  flex: 0 0 auto;
  padding: var(--space-4);
  padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
}
.ms-cart-drawer__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-1);
}
.ms-cart-drawer__subtotal-label {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
}
.ms-cart-drawer__subtotal-value {
  font-size: var(--font-size-xl);
  font-weight: 900;
  color: var(--color-primary);
}
.ms-cart-drawer__discount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-2);
  color: var(--color-success);
  font-weight: 700;
  font-size: var(--font-size-sm);
}
.ms-cart-drawer__discount-value {
  white-space: nowrap;
}
.ms-cart-drawer__note {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.ms-cart-drawer__actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-2);
}
.ms-cart-drawer__actions .ms-btn { width: 100%; }

/* زر «عرض السلة» — ثانوي يتكيّف مع الوضعين (داكن/فاتح) عبر التوكنز الدلالية */
.ms-cart-drawer__view {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.ms-cart-drawer__view:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ===== حالة الفراغ ===== */
.ms-cart-drawer__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.ms-cart-drawer__empty-icon { color: var(--color-text-muted); opacity: .6; }
.ms-cart-drawer__empty-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-text);
}
.ms-cart-drawer__empty-text {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: 28ch;
}
.ms-cart-drawer__empty .ms-btn { max-width: 260px; }

/* ===== شاشات أكبر: متّسع أكثر قليلاً ===== */
@media (min-width: 480px) {
  .ms-cart-drawer { width: min(440px, 92vw); }
  .ms-cart-line__media { width: 80px; height: 80px; }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .ms-cart-drawer,
  .ms-cart-overlay { transition: none; }
}

/* =========================================================
   Product Card — بطاقة المنتج الموحّدة (BEM, RTL-first).
   ========================================================= */
.ms-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.ms-product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* الوسائط */
.ms-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-soft);
  overflow: hidden;
}
.ms-product-card__link {
  display: block;
  width: 100%;
  height: 100%;
}
.ms-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.ms-product-card:hover .ms-product-card__image { transform: scale(1.05); }

/* زر المعاينة السريعة — يظهر عند المرور / دائماً على اللمس */
.ms-product-card__quick-view {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
  z-index: 2;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, .85);
  color: #fff;
  font-family: var(--font-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.ms-product-card:hover .ms-product-card__quick-view,
.ms-product-card:focus-within .ms-product-card__quick-view {
  opacity: 1;
  transform: translateY(0);
}

/* الجسم — مُحكم ليبدو أقرب للمربّع وأقل طولاً، خاصةً على الهاتف. */
.ms-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  flex: 1;
}
.ms-product-card__condition {
  align-self: flex-start;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.ms-product-card__title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.4;
}
.ms-product-card__title a {
  color: var(--color-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ms-product-card__title a:hover { color: var(--color-primary); }

.ms-product-card__price {
  margin-block-start: auto;
  padding-block-start: var(--space-1);
  font-size: var(--font-size-base);
  font-weight: 800;
  color: var(--accent-700);
}
.ms-product-card__price del { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 400; }
.ms-product-card__price ins { text-decoration: none; color: var(--accent-700); }

/* شارة التوفير داخل البطاقة — مُصغّرة كي لا تُطيل البطاقة. */
.ms-product-card .ms-saving { margin-block: 2px; padding: 2px 8px; font-size: var(--font-size-xs); }

.ms-product-card__actions { margin-block-start: var(--space-2); }
.ms-product-card__actions .ms-btn { width: 100%; }
/* زر «أضف للسلة» باللون المميّز (برتقالي) كما في التصميم */
.ms-product-card__add.ms-btn--primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
}
.ms-product-card__add.ms-btn--primary:hover { background-color: var(--accent-600); }

/* شبكة عرض المنتجات — الهاتف أولاً: عمود كامل، ثم بطاقات متوسّطة تملأ وتتوسّط. */
.ms-products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  justify-content: center;
}

@media (min-width: 560px) {
  .ms-products-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); gap: var(--space-5); }
}
@media (min-width: 992px) {
  .ms-product-card__title { font-size: var(--font-size-base); }
}

/* =========================================================
   Stock Badge — شارة المخزون (متوفر/محدود/نفد).
   ========================================================= */
.ms-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  white-space: nowrap;
}

.ms-stock-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: .9;
}

.ms-stock-badge--high { background-color: var(--color-stock-high); }
.ms-stock-badge--low  { background-color: var(--color-stock-low); }
.ms-stock-badge--out  { background-color: var(--color-stock-out); }

/* موضع الشارة فوق صورة البطاقة */
.ms-product-card__media .ms-stock-badge {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 2;
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   Skeleton Loading — هياكل تحميل (تقليل CLS).
   ========================================================= */
.ms-skeleton {
  position: relative;
  background: var(--color-bg-soft);
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.ms-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .6),
    transparent
  );
  animation: ms-shimmer 1.3s infinite;
}

/* RTL: الوميض يتحرّك من اليمين لليسار */
html[dir="rtl"] .ms-skeleton::after { animation-name: ms-shimmer-rtl; }

@keyframes ms-shimmer { 100% { transform: translateX(100%); } }
@keyframes ms-shimmer-rtl { 100% { transform: translateX(100%); } }

.ms-product-card--skeleton .ms-product-card__media { aspect-ratio: 1 / 1; }
.ms-skeleton--line { height: 14px; margin-block-end: var(--space-2); }
.ms-skeleton--short { width: 55%; }

@media (prefers-reduced-motion: reduce) {
  .ms-skeleton::after { animation: none; }
}

/* =========================================================
   Live Search — حقل البحث وقائمة النتائج المنسدلة.
   ========================================================= */
.ms-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 460px;
  margin-inline: auto;
}
.ms-search__form {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ms-search__form:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(56, 214, 255, .18); }
.ms-search__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: none;
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.ms-search__input::placeholder { color: var(--color-text-muted); font-weight: var(--fw-medium); }
.ms-search__input:focus { outline: none; }
.ms-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 44px;
  border: none;
  background: var(--grad-primary);
  color: var(--color-on-primary);
  cursor: pointer;
}
.ms-search__submit:hover { filter: brightness(1.06); }

/* القائمة المنسدلة */
.ms-search__results {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline: 0;
  z-index: 800;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: none;
}
.ms-search.is-open .ms-search__results { display: block; }

.ms-search__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  border-block-end: 1px solid var(--color-border);
}
.ms-search__item:last-child { border-block-end: none; }
.ms-search__item:hover,
.ms-search__item.is-active { background: var(--color-bg-soft); }

.ms-search__thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.ms-search__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ms-search__name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-search__price { font-size: var(--font-size-xs); color: var(--color-primary); font-weight: 700; }

.ms-search__state {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.ms-search__suggest a { color: var(--color-primary); font-weight: 700; }

/* =========================================================
   Quick View Modal — معاينة سريعة للمنتج.
   ========================================================= */
.ms-quick-view {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.ms-quick-view.is-open { display: flex; }

.ms-quick-view__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .6);
  backdrop-filter: blur(2px);
}

.ms-quick-view__dialog {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: ms-qv-in var(--transition-base) both;
}
@keyframes ms-qv-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ms-quick-view__close {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-bg-soft);
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
}

.ms-quick-view__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-6);
}
.ms-quick-view__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}
.ms-quick-view__title { margin: 0 0 var(--space-2); font-size: var(--font-size-2xl); }
.ms-quick-view__price { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-primary); margin-block-end: var(--space-3); }
.ms-quick-view__desc { color: var(--color-text-muted); line-height: var(--line-base); margin-block-end: var(--space-4); }

@media (min-width: 768px) {
  .ms-quick-view__body { grid-template-columns: 1fr 1fr; align-items: start; padding: var(--space-8); }
}

@media (prefers-reduced-motion: reduce) {
  .ms-quick-view__dialog { animation: none; }
}

/* =========================================================
   أيقونة المحادثة العائمة — ثابتة أسفل اليسار (RTL) بكل الصفحات.
   دائرة نظيفة على الجوال؛ تتمدّد لزرّ بعنوان عند المرور على الدسكتوب.
   ========================================================= */
.ms-whatsapp-float {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);  /* inline-end = اليسار في RTL */
  z-index: 900;
  display: inline-flex;
  align-items: center;
  height: 56px;
  border-radius: var(--radius-full);
  background: #25d366;
  color: #fff;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  animation: ms-wa-pop .4s ease both;
}
.ms-whatsapp-float:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 26px rgba(37, 211, 102, .45);
}

/* النسخة البديلة (لا رقم واتساب) — تدرّج الهوية السماوي. */
.ms-whatsapp-float--chat {
  background: var(--grad-primary);
  color: var(--color-on-primary);
}
.ms-whatsapp-float--chat:hover { box-shadow: 0 12px 26px rgba(56, 214, 255, .45); }

/* الأيقونة داخل مربّع ثابت ⇒ شكل دائري مضبوط افتراضياً. */
.ms-whatsapp-float__icon {
  width: 56px;
  height: 56px;
  padding: 14px;
  box-sizing: border-box;
  flex: 0 0 auto;
}

/* العنوان — مطوي افتراضياً، يتمدّد عند المرور (دسكتوب فقط). */
.ms-whatsapp-float__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-weight: 800;
  font-size: var(--font-size-sm);
  transition: max-width var(--transition-base), opacity var(--transition-fast), padding var(--transition-base);
}

/* حلقة نبض ناعمة خلف الأيقونة لجذب الانتباه. */
.ms-whatsapp-float__pulse {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #25d366;
  animation: ms-wa-pulse 2.4s ease-out infinite;
}
.ms-whatsapp-float--chat .ms-whatsapp-float__pulse { background: var(--color-primary); }

@keyframes ms-wa-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes ms-wa-pulse {
  0%        { transform: scale(1);   opacity: .5; }
  70%, 100% { transform: scale(1.7); opacity: 0;  }
}

/* الدسكتوب (أجهزة بمؤشّر) — توسيع الزر بعنوان عند المرور.
   مسافة على الجهتين: بين النص والأيقونة (start) وعن حافة الزر (end). */
@media (hover: hover) and (pointer: fine) {
  .ms-whatsapp-float:hover .ms-whatsapp-float__label {
    max-width: 220px;
    opacity: 1;
    padding-inline: var(--space-2) var(--space-5);
  }
}

/* الجوال — أصغر قليلاً وبلا عنوان (دائرة مدمجة لا تزاحم المحتوى). */
@media (max-width: 599px) {
  .ms-whatsapp-float {
    inset-block-end: var(--space-4);
    inset-inline-end: var(--space-4);
    height: 50px;
  }
  .ms-whatsapp-float__icon { width: 50px; height: 50px; padding: 13px; }
}

/* عند فتح أي درج جانبي (قائمة/سلة) — يُخفى الزر العائم حتى لا يطفو فوق
   الطبقة المعتمة خارج الدرج. body.ms-no-scroll تُضاف عند فتح الدرج. */
body.ms-no-scroll .ms-whatsapp-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

@media (prefers-reduced-motion: reduce) {
  .ms-whatsapp-float { animation: none; }
  .ms-whatsapp-float__pulse { animation: none; opacity: 0; }
}

/* =========================================================
   Feedback — إشعارات Toast خفيفة.
   ========================================================= */
.ms-toasts {
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}
.ms-toast {
  max-width: calc(100% - 2 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.ms-toast.is-visible { opacity: 1; transform: translateY(0); }
.ms-toast--success { background: var(--color-success); }
.ms-toast--error { background: var(--color-error); }

@media (prefers-reduced-motion: reduce) {
  .ms-toast { transition: opacity var(--transition-fast); transform: none; }
}

/* المكوّن: «اشترِ معاً» (FBT) + شارة التوفير — RTL-first، داكن أولاً.
   ms-saving: «توفّر X» عند الخصم (تُستخدم أيضاً في صفحة المنتج وبطاقاته).
   ms-fbt: قسم المنتجات المتوافقة في صفحة المنتج. */

/* ---------- شارة التوفير ---------- */
.ms-saving {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-block: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-success) 14%, transparent);
	color: var(--color-success);
	font-weight: 700;
	font-size: var(--font-size-sm);
}

.ms-saving__label {
	font-weight: 600;
}

/* ---------- قسم «اشترِ معاً» ---------- */
.ms-fbt {
	margin-top: var(--space-6);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.ms-fbt__head {
	margin-bottom: var(--space-4);
}

.ms-fbt__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--font-size-xl);
	font-weight: 800;
}

.ms-fbt__title-icon {
	flex: 0 0 auto;
	color: var(--color-primary);
}

.ms-fbt__hint {
	margin: var(--space-1) 0 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	line-height: 1.6;
}

/* ---------- الشريط البصري (صور متّصلة بعلامات +) ---------- */
.ms-fbt__visual {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	margin-bottom: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-bg-soft);
}

.ms-fbt__visual-item {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	overflow: hidden;
	transition: opacity var(--transition-base), filter var(--transition-base);
}

.ms-fbt__visual-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ms-fbt__visual-item.is-off {
	opacity: .35;
	filter: grayscale(1);
}

.ms-fbt__visual-plus {
	flex: 0 0 auto;
	color: var(--color-text-muted);
	font-size: var(--font-size-lg);
	font-weight: 700;
	line-height: 1;
}

/* ---------- قائمة العناصر ---------- */
.ms-fbt__list {
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ms-fbt__item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg-soft);
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.ms-fbt__item--main {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-soft));
	border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

/* صف الاكسسوار = label قابل للضغط بالكامل */
.ms-fbt__row {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	cursor: pointer;
	margin: 0;
}

.ms-fbt__item:has( .ms-fbt__check:checked ) {
	border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
	background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-soft));
}

/* خانة التحديد */
.ms-fbt__check {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--color-primary);
	cursor: pointer;
}

.ms-fbt__check--locked {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: var(--grad-primary);
	color: var(--color-on-primary);
	cursor: default;
}

.ms-fbt__item-media {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-surface);
}

.ms-fbt__item-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ms-fbt__item-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ms-fbt__item-name {
	font-weight: 600;
	font-size: var(--font-size-sm);
	line-height: 1.4;
	color: var(--color-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.ms-fbt__item-name:hover {
	color: var(--color-primary);
}

.ms-fbt__item-tag {
	width: fit-content;
	padding: 1px var(--space-2);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-primary) 16%, transparent);
	color: var(--color-primary);
	font-size: var(--font-size-xs);
	font-weight: 700;
}

.ms-fbt__item-price {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: var(--font-size-sm);
	white-space: nowrap;
}

/* ---------- الملخّص (المجموع + زر الإضافة) ---------- */
.ms-fbt__summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px dashed var(--color-border);
}

.ms-fbt__totals {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2) var(--space-3);
}

.ms-fbt__total-label {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.ms-fbt__total {
	font-size: var(--font-size-xl);
	font-weight: 900;
	color: var(--color-primary);
}

.ms-fbt__strike {
	color: var(--color-text-muted);
	text-decoration: line-through;
	font-size: var(--font-size-sm);
}

.ms-fbt__saving {
	margin: 0;
}

.ms-fbt__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	min-height: 52px;
	font-weight: 800;
}

.ms-fbt__add.is-loading {
	opacity: .7;
	pointer-events: none;
}

/* ---------- دسكتوب ---------- */
@media (min-width: 768px) {
	.ms-fbt {
		padding: var(--space-5);
	}

	.ms-fbt__summary {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.ms-fbt__add {
		width: auto;
		min-width: 240px;
	}
}

/* =========================================================
   عدّاد العرض المؤقّت (Countdown) — صفحة المنتج.
   ودجت مدمج بعرض المحتوى (لا يمتدّ كامل العمود) ليتناسق تحت السعر دون
   التأثير على بقية التخطيط. RTL: «يوم» على اليمين.
   ========================================================= */

.ms-offer {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 100%;
  margin-block: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-radius: var(--radius-md);
  background: var(--primary-50);
}

.ms-offer__head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 800;
}
.ms-offer__icon { flex: 0 0 auto; }

.ms-offer__clock {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.ms-offer__sep { display: none; } /* الصناديق تُغني عن الفواصل «:» */

.ms-offer__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.ms-offer__num {
  font-size: var(--font-size-xl);
  font-weight: 900;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.ms-offer__cap {
  margin-block-start: 5px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* حالة الانتهاء (قبل إعادة التحميل) */
.ms-offer.is-ended { opacity: .7; }
.ms-offer.is-ended .ms-offer__clock { display: none; }

/* شاشات ضيّقة جداً: تصغير الصناديق قليلاً */
@media (max-width: 360px) {
  .ms-offer__unit { min-width: 44px; }
  .ms-offer__num { font-size: var(--font-size-lg); }
}

/* =========================================================
   الصفحة الرئيسية — مطابقة لتصميم الهاندأوف «تكسفير».
   هيرو سلايدر · شريط الثقة · براندات · أقسام · صيانة ·
   لماذا · اشتراك · مدونة. Mobile-first / RTL / توكنز الهوية.
   ========================================================= */

/* ===== الحركات ===== */
@keyframes ms-floatY   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes ms-glowPulse{ 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .85; transform: scale(1.14); } }
@keyframes ms-blobA    { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-30px) scale(1.15); } 66% { transform: translate(-30px,25px) scale(.92); } }
@keyframes ms-blobB    { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,30px) scale(1.2); } }
@keyframes ms-introUp  { 0% { opacity: 0; transform: translateY(120px) rotate(-6deg) scale(.88); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }

/* =========================================================
   HERO SLIDER (يكسر حدود الحاوية ليملأ العرض)
   ========================================================= */
.ms-hero {
  position: relative;
  display: grid;          /* كل الشرائح في خلية واحدة ⇒ الارتفاع = أطول شريحة (لا قصّ) */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: calc(-1 * var(--space-6)) 0;
  min-height: 600px;
  overflow: hidden;
  background: var(--color-page);
}
.ms-hero__slide {
  grid-area: 1 / 1;       /* تكديس متطابق */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}
.ms-hero__slide.is-active { opacity: 1; pointer-events: auto; }

.ms-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--hg1, #0a1a4a) 0%, var(--hg2, #0b3170) 100%);
}
.ms-hero__blobs { position: absolute; inset: -10%; }
.ms-hero__blob { position: absolute; border-radius: 50%; }
.ms-hero__blob--a {
  top: 8%; inset-inline-end: 12%;
  width: 46%; height: 60%;
  background: radial-gradient(circle, var(--hglow, #38d6ff), transparent 70%);
  opacity: .35;
  filter: blur(40px);
  animation: ms-blobA 14s ease-in-out infinite;
}
.ms-hero__blob--b {
  bottom: 6%; inset-inline-start: 10%;
  width: 40%; height: 50%;
  background: radial-gradient(circle, var(--hg2, #0b3170), transparent 70%);
  filter: blur(50px);
  animation: ms-blobB 18s ease-in-out infinite;
}
.ms-hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 60%, transparent 40%, rgba(4,8,22,.55) 100%);
}

.ms-hero__inner {
  position: relative;
  z-index: 3;
  width: min(1200px, 100% - 2 * var(--space-6));
  margin-inline: auto;
  padding-block: 88px 64px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.ms-hero__text { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: 460px; }
.ms-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(56,214,255,.12);
  border: 1px solid rgba(56,214,255,.35);
  color: var(--sky);
  font-weight: 700;
  font-size: var(--font-size-sm);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ms-hero__title {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
  margin: 0;
}
.ms-hero__tag {
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: #d3e2ff;
  font-weight: 500;
  margin: 0;
  max-width: 400px;
}
.ms-hero__price { font-weight: 800; font-size: var(--font-size-lg); color: #fff; }
.ms-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.ms-hero__cta { height: 54px; padding-inline: 30px; font-size: var(--font-size-lg); }
.ms-hero__actions .ms-btn--ghost { height: 54px; padding-inline: 26px; color: #fff; }

.ms-hero__device { position: relative; flex-shrink: 0; }
.ms-hero__glow {
  position: absolute; inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hglow, #38d6ff), transparent 65%);
  filter: blur(36px);
  opacity: .9;
  animation: ms-glowPulse 5s ease-in-out infinite;
  z-index: 1;
}
.ms-hero__float { display: block; animation: ms-floatY 6s ease-in-out infinite; }
.ms-hero__img {
  position: relative;
  z-index: 2;
  width: min(74vw, 340px);
  height: auto;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,.55));
  animation: ms-introUp .95s cubic-bezier(.16,1,.3,1) both;
}

.ms-hero__dots {
  position: absolute;
  inset-block-end: 26px;
  inset-inline: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.ms-hero__dot {
  width: 10px; height: 10px;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: width .35s, background .35s;
}
.ms-hero__dot.is-active { width: 30px; background: #fff; }

@media (min-width: 881px) {
  .ms-hero { min-height: 760px; }
  .ms-hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: start;
    gap: var(--space-8);
    padding-block: 96px 70px;
  }
  .ms-hero__text { align-items: flex-start; }
  .ms-hero__actions { justify-content: flex-start; }
  .ms-hero__title { font-size: 54px; letter-spacing: -1.5px; }
  .ms-hero__img { width: clamp(280px, 30vw, 420px); }
}

/* =========================================================
   TRUST BAR (يتداخل أسفل الهيرو)
   ========================================================= */
.ms-trust {
  position: relative;
  z-index: 10;
  margin-block-start: -44px;
  margin-block-end: var(--space-8);
}
.ms-trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 720px) { .ms-trust__grid { grid-template-columns: repeat(3, 1fr); } }
.ms-trust__card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), border-color var(--transition-base);
}
.ms-trust__card:hover { transform: translateY(-4px); border-color: var(--color-primary); }
.ms-trust__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: rgba(56,214,255,.12);
  font-size: 26px;
}
.ms-trust__title { font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text); }
.ms-trust__desc  { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-block-start: 3px; }

/* =========================================================
   ترويسة الأقسام الموحّدة
   ========================================================= */
.ms-section { margin-block-end: var(--space-12); }
.ms-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}
.ms-section__kicker {
  display: block;
  color: var(--color-primary);
  font-weight: 800;
  font-size: var(--font-size-sm);
  letter-spacing: 1px;
  margin-block-end: 6px;
}
.ms-section__title {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  letter-spacing: -.8px;
  color: var(--color-text);
  margin: 0;
}
.ms-section__more {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-decoration: none;
  white-space: nowrap;
}
.ms-section__more:hover { text-decoration: underline; }
.ms-section__empty {
  padding: var(--space-8);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-muted);
  text-align: center;
}

/* =========================================================
   سلايدر المنتجات — أفقي على كل المقاسات (لا التفاف لأسطر):
   الهاتف: بطاقتان ظاهرتان (سحب/مسح)؛ الدسكتوب: ~4 بطاقات
   مع أزرار تنقّل وسحب بالماوس. الباقي ينزلق أفقياً.
   ========================================================= */
.ms-slider { position: relative; }

/* المسار القابل للتمرير */
.ms-product-grid {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--space-1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* إخفاء الشريط (Firefox) */
  padding-block-end: var(--space-2);
}
.ms-product-grid::-webkit-scrollbar { display: none; } /* إخفاء الشريط (WebKit) */
.ms-product-grid.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.ms-product-grid.is-dragging .ms-product-card { pointer-events: none; }

.ms-product-grid > .ms-product-card {
  flex: 0 0 47%;                    /* الهاتف: بطاقتان + لمحة من الثالثة */
  scroll-snap-align: start;
}
@media (min-width: 560px) {
  .ms-product-grid { gap: var(--space-4); }
  .ms-product-grid > .ms-product-card { flex-basis: 30.5%; } /* ~3 بطاقات */
}
@media (min-width: 1024px) {
  .ms-product-grid { gap: var(--space-6); }                  /* مسافة أوسع ومريحة على الدسكتوب */
  .ms-product-grid > .ms-product-card { flex-basis: 22.5%; } /* ~4 بطاقات مع تنفّس بينها */
}

/* أزرار التنقّل — تظهر على الشاشات المؤشّرة فقط (الهاتف يعتمد المسح). */
.ms-slider__nav {
  position: absolute;
  inset-block-start: 38%;           /* بمحاذاة صورة البطاقة تقريباً */
  transform: translateY(-50%);
  z-index: 4;
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  color: var(--color-text);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}
.ms-slider__nav:hover { background: var(--color-primary); color: var(--color-on-primary); }
.ms-slider__nav--prev { inset-inline-start: -10px; }  /* البداية (يمين RTL) */
.ms-slider__nav--next { inset-inline-end: -10px; }    /* النهاية (يسار RTL) */
.ms-slider__nav[disabled] { opacity: 0; pointer-events: none; }
.ms-slider.is-static .ms-slider__nav { display: none !important; }

@media (min-width: 768px) {
  .ms-slider__nav { display: grid; }
}

/* =========================================================
   BRANDS / CATEGORIES (بلاطات)
   ========================================================= */
/* الهاتف: 3 فئات لكل صف؛ ثم تتوسّع تلقائياً على الشاشات الأكبر. */
.ms-brands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (min-width: 560px) {
  /* حدّ أقصى ثابت للبلاطة (170px) مع توسيط — يمنع تمدّد بلاطة واحدة لكامل العرض. */
  .ms-brands { grid-template-columns: repeat(auto-fit, minmax(140px, 170px)); gap: var(--space-4); justify-content: center; }
}

.ms-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform var(--transition-base);
}
.ms-brand:hover { transform: translateY(-5px); }
.ms-brand:hover .ms-brand__img { transform: scale(1.05); }

/* حاوية الصورة — تعرض صورة الفئة الشفّافة (PNG) وحدها بلا خلفية أو إطار. */
.ms-brand__media {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: var(--space-2);
}
.ms-brand__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .32)); /* ظل أرضي ناعم فقط لإبراز الصورة */
  transition: transform var(--transition-base);
}
.ms-brand__mark {                 /* بديل عند غياب صورة الفئة */
  font-weight: 900;
  font-size: clamp(26px, 9vw, 38px);
  color: var(--color-primary);
}
.ms-brand__name { font-weight: 700; font-size: var(--font-size-sm); color: var(--color-text); text-align: center; }

/* =========================================================
   MAINTENANCE
   ========================================================= */
.ms-maint {
  position: relative;
  overflow: hidden;
  margin-block-end: var(--space-12);
  padding: var(--space-12) var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--navy), #0c2b66);
  border: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  text-align: center;                 /* الهاتف: توسيط كامل */
}
@media (min-width: 760px) {
  .ms-maint {
    grid-template-columns: 1fr 1fr;   /* أعمدة متساوية: مساحة أكبر للصورة */
    gap: var(--space-12);
    padding: var(--space-16);
    text-align: start;                /* الدسكتوب: محاذاة للبداية */
  }
}
.ms-maint__glow {
  position: absolute;
  top: -80px; inset-inline-start: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,214,255,.35), transparent 70%);
  filter: blur(20px);
}
.ms-maint__text { position: relative; z-index: 2; }
.ms-maint__title {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1.25;
  margin: 0;
}
@media (min-width: 760px) { .ms-maint__title { font-size: var(--font-size-3xl); } }
.ms-maint__desc {
  font-size: var(--font-size-lg);
  color: #cfe0ff;
  margin: var(--space-4) auto 0;      /* الهاتف: توسيط الفقرة */
  line-height: 1.7;
  max-width: 460px;
}
@media (min-width: 760px) { .ms-maint__desc { margin-inline: 0; } }
.ms-maint__cta {
  margin-block-start: var(--space-6);
  height: 54px;
  padding-inline: 32px;
  background: #fff;
  color: var(--navy);
  font-weight: 800;
  font-size: var(--font-size-lg);
  box-shadow: 0 12px 34px rgba(0,0,0,.3);
}
.ms-maint__cta:hover { background: #fff; filter: brightness(.95); }

/* الوسائط — رسم SVG احترافي (الهاتف: فوق النص وكبير ومتوسّط). */
.ms-maint__media {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  order: -1;
}
@media (min-width: 760px) { .ms-maint__media { order: 0; } }
.ms-maint__art {
  width: min(74vw, 300px);
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45));
  animation: ms-floatY 6s ease-in-out infinite;
}
/* صورة العميل (تستبدل الرسم) — مربّعة (1024×1024) تملأ عمود الوسائط بزوايا ناعمة. */
.ms-maint__photo {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(56, 214, 255, .25);
  box-shadow: 0 30px 50px rgba(0, 0, 0, .45);
}

/* =========================================================
   WHY US
   ========================================================= */
.ms-why { margin-block-end: var(--space-12); }
.ms-why__title {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  letter-spacing: -.8px;
  text-align: center;
  color: var(--color-text);
  margin: 0 0 var(--space-8);
}
.ms-why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 760px) { .ms-why__grid { grid-template-columns: repeat(4, 1fr); } }
.ms-why__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;       /* توسيط المحتوى عمودياً داخل البطاقة */
  text-align: center;
  padding: var(--space-6) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), border-color var(--transition-base);
}
@media (min-width: 760px) { .ms-why__card { padding: var(--space-8) var(--space-6); } }
.ms-why__card:hover { transform: translateY(-4px); border-color: var(--color-primary); }
.ms-why__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-lg);
  background: rgba(56,214,255,.12);
  font-size: 28px;
}
@media (min-width: 760px) { .ms-why__icon { width: 62px; height: 62px; margin-block-end: var(--space-4); font-size: 30px; } }
.ms-why__heading { font-weight: 800; font-size: var(--font-size-base); color: var(--color-text); line-height: 1.3; }
.ms-why__desc { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: var(--space-2) 0 0; line-height: 1.6; }
@media (min-width: 760px) {
  .ms-why__heading { font-size: var(--font-size-lg); }
  .ms-why__desc { font-size: var(--font-size-sm); }
}

/* =========================================================
   EMAIL SIGNUP
   ========================================================= */
.ms-signup { margin-block-end: var(--space-12); }
.ms-signup__inner {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-6);
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(56, 214, 255, .18), transparent 55%),
    linear-gradient(120deg, var(--navy), #0c2b66);
  border: 1px solid var(--color-border);
  text-align: center;
}
@media (min-width: 760px) { .ms-signup__inner { padding: var(--space-16) var(--space-12); } }
/* توهّج سماوي ناعم في الزاوية بدل اللون الفاتح الصريح. */
.ms-signup__inner::before {
  content: "";
  position: absolute;
  inset-block-start: -120px;
  inset-inline-end: -90px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 214, 255, .22), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.ms-signup__title { position: relative; font-size: var(--font-size-2xl); font-weight: 900; color: #fff; letter-spacing: -.8px; margin: 0; }
@media (min-width: 760px) { .ms-signup__title { font-size: var(--font-size-3xl); } }
.ms-signup__desc { position: relative; font-size: var(--font-size-lg); color: #cfe0ff; font-weight: 500; margin: var(--space-3) auto 0; max-width: 460px; }
.ms-signup__form {
  position: relative;
  display: flex;
  gap: var(--space-3);
  max-width: 540px;
  margin: var(--space-8) auto 0;
  flex-wrap: wrap;
}
.ms-signup__input {
  flex: 1;
  min-width: 200px;
  height: 56px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding-inline: var(--space-6);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  background: rgba(8, 17, 56, .55);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ms-signup__input::placeholder { color: var(--color-text-muted); font-weight: 500; }
.ms-signup__input:focus { border-color: var(--color-primary); box-shadow: var(--glow-soft); }
.ms-signup__btn {
  height: 56px;
  padding-inline: 34px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--grad-primary);
  color: var(--color-on-primary);
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: var(--font-size-base);
  cursor: pointer;
  box-shadow: var(--glow-primary);
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.ms-signup__btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
/* الهاتف فقط: الزر أسفل الحقل، متوسّط، وبمسافة مريحة عنه. */
@media (max-width: 559px) {
  .ms-signup__form { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .ms-signup__btn { align-self: center; padding-inline: 52px; }
}

/* =========================================================
   BLOG
   ========================================================= */
.ms-blog {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 680px) { .ms-blog { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.ms-blog__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: transform var(--transition-base), border-color var(--transition-base);
}
.ms-blog__card:hover { transform: translateY(-5px); border-color: var(--color-primary); }
.ms-blog__media {
  aspect-ratio: 16 / 9;
  background: var(--color-bg-soft);
  overflow: hidden;
}
.ms-blog__img { width: 100%; height: 100%; object-fit: cover; }
.ms-blog__media-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 44px;
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-bg-soft));
  opacity: .7;
}
.ms-blog__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); }
.ms-blog__tag { font-size: var(--font-size-xs); color: var(--color-primary); font-weight: 700; }
.ms-blog__heading { font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text); line-height: 1.4; }
.ms-blog__excerpt { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.6; }

/* =========================================================
   WooCommerce — تخطيط صفحات المتجر (override الأنماط الافتراضية).
   ========================================================= */

/* شبكة حلقة المنتجات — تثبيت تخصّص موحّد (.woocommerce ul.products) في كل
   نقاط الكسر لتفادي تغلّب القاعدة الأساسية على media queries.
   الأعمدة والتباعد مطابقة لسلايدر الرئيسية: الهاتف بطاقتان، ثم 3، ثم 4. */
.woocommerce ul.products,
ul.products.ms-products-grid,
ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* الهاتف أولاً: بطاقتان متجاورتان (كما في الرئيسية)، والبقية تنزل أسفلهما. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
/* البطاقة تملأ خليّتها كاملةً ⇒ ارتفاع موحّد لكل بطاقات الصف. */
.woocommerce ul.products li.product,
ul.products li.product { margin: 0; width: auto; float: none; display: flex; }
.woocommerce ul.products li.product > .ms-product-card,
ul.products li.product > .ms-product-card { width: 100%; }

/* اللوحي: 3 بطاقات. */
@media (min-width: 560px) {
  .woocommerce ul.products,
  ul.products.ms-products-grid,
  ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
/* الدسكتوب: 4 بطاقات بتباعد مريح كصفحة الرئيسية. */
@media (min-width: 1024px) {
  .woocommerce ul.products,
  ul.products.ms-products-grid,
  ul.products { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}

/* رأس المتجر: العنوان + الفرز + العدّ */
.woocommerce-products-header { margin-block-end: var(--space-6); }
.woocommerce-products-header__title {
  font-size: var(--font-size-3xl);
  margin: 0 0 var(--space-2);
}
.woocommerce-result-count { color: var(--color-text-muted); font-size: var(--font-size-sm); display: block; margin-block-end: var(--space-3); }
.woocommerce-ordering { display: block; margin-block-end: var(--space-6); }
.woocommerce-ordering select {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-primary);
}
/* مسافة واضحة بين شريط الترتيب وشبكة المنتجات (تمنع التصاق/تداخل البطاقة). */
.woocommerce ul.products,
ul.products.ms-products-grid { margin-block-start: var(--space-4); clear: both; }

/* ترقيم الصفحات */
.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  list-style: none;
  padding: 0;
  margin-block-start: var(--space-8);
}
.woocommerce-pagination a,
.woocommerce-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
}
.woocommerce-pagination .current {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   صفحة المنتج الواحد (PDP) — تخطيط «بِكسل».
   ========================================================= */
.ms-pdp { max-width: 1000px; margin-inline: auto; }
@media (max-width: 767.98px) {
  .single-product .ms-main { padding-block-end: 84px; } /* مساحة للشريط اللاصق */
}

.woocommerce-breadcrumb,
.ms-crumbs {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
}
.ms-crumbs a { color: var(--color-text-muted); text-decoration: none; }
.ms-crumbs a:hover { color: var(--color-primary); }
.ms-crumb-sep { color: var(--color-border); margin-inline: var(--space-1); }

.ms-pdp__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .ms-pdp__layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
}

/* ===== المعرض ===== */
.ms-pdp-gallery__stage {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  aspect-ratio: 1 / 1;
}
.ms-pdp-gallery__stage .ms-pdp-gallery__img,
.ms-pdp-gallery__stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ms-pdp-gallery__badge {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 800;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--grad-primary);
  color: var(--color-on-primary);
}
.ms-pdp-gallery__thumbs { display: flex; gap: var(--space-2); margin-block-start: var(--space-3); flex-wrap: wrap; }
.ms-pdp-gallery__thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  overflow: hidden;
}
.ms-pdp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-pdp-gallery__thumb.is-active { border-color: var(--color-primary); }

/* ===== المعلومات ===== */
.ms-pdp__eyebrow { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-muted); margin-block-end: var(--space-1); }
/* تقييم النجوم */
.ms-pdp__rating { display: inline-flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-4); text-decoration: none; }
.ms-pdp__stars { color: var(--color-border); font-size: 15px; letter-spacing: 1px; line-height: 1; }
.ms-pdp__star.is-filled { color: var(--color-accent); }
.ms-pdp__rating-text { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.ms-pdp__rating--empty { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ===== المراجعات والتقييمات ===== */
.ms-pdp__reviews { margin-top: var(--space-6); }
.ms-pdp__reviews .woocommerce-Reviews-title { display: none; } /* عنوان ووكومرس الافتراضي — نستبدله بملخّصنا */
.ms-reviews__title { margin-block-end: var(--space-5); }

/* مكوّن النجوم — تعبئة كسرية دقيقة (جزيرة LTR) */
.ms-stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; color: var(--color-border); direction: ltr; white-space: nowrap; }
.ms-stars::before { content: "★★★★★"; letter-spacing: 2px; }
.ms-stars__fill { position: absolute; inset-block: 0; inset-inline-start: 0; overflow: hidden; color: #f6b73c; }
.ms-stars__fill::before { content: "★★★★★"; letter-spacing: 2px; }

/* ملخّص: المعدّل + توزيع النجوم */
.ms-reviews__summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding: var(--space-5);
  margin-block-end: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}
@media (min-width: 600px) {
  .ms-reviews__summary { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-8); }
}
.ms-reviews__score { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
@media (min-width: 600px) { .ms-reviews__score { padding-inline-end: var(--space-8); border-inline-end: 1px solid var(--color-border); } }
.ms-reviews__avg { font-size: 3rem; font-weight: 900; line-height: 1; color: var(--color-text); }
.ms-reviews__score .ms-stars { font-size: 1.3rem; }
.ms-reviews__count { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 600; }

.ms-reviews__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms-reviews__bar-row { display: grid; grid-template-columns: 36px 1fr 26px; align-items: center; gap: var(--space-2); }
.ms-reviews__bar-label { display: inline-flex; align-items: center; gap: 3px; justify-content: flex-end; font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-muted); direction: ltr; }
.ms-reviews__bar-star { color: #f6b73c; }
.ms-reviews__bar { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.ms-reviews__bar-fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: var(--radius-full); background: #f6b73c; min-width: 0; }
.ms-reviews__bar-count { font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: start; }

/* الحالة الفارغة */
.ms-reviews__summary--empty { display: block; text-align: center; }
.ms-reviews__summary--empty .ms-stars { font-size: 1.6rem; margin-block-end: var(--space-2); }
.ms-reviews__empty-text { margin: 0; font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text); }
.ms-reviews__empty-sub { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* قائمة المراجعات — بطاقات */
.ms-pdp__reviews .commentlist { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ms-review__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.ms-review__head { display: flex; align-items: center; gap: var(--space-3); }
.ms-review__avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--grad-primary);
  color: var(--color-on-primary);
  font-weight: 800; font-size: var(--font-size-lg);
  text-transform: uppercase;
}
.ms-review__meta { display: flex; flex-direction: column; gap: 2px; margin-inline-end: auto; min-width: 0; }
.ms-review__author { font-weight: 800; color: var(--color-text); display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ms-review__verified { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-size-xs); font-weight: 700; color: var(--color-success); }
.ms-review__date { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ms-review__stars { flex: 0 0 auto; font-size: 0.95rem; }
.ms-review__body { color: var(--color-text); line-height: 1.8; }
.ms-review__body p { margin: 0 0 var(--space-2); }
.ms-review__body > :last-child { margin-block-end: 0; }

/* نموذج إضافة مراجعة */
.ms-pdp__reviews #review_form_wrapper { margin-top: var(--space-2); }
.ms-pdp__reviews .comment-reply-title { display: block; font-size: var(--font-size-lg); font-weight: 800; margin: 0 0 var(--space-2); color: var(--color-text); }
.ms-pdp__reviews .comment-notes { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.ms-pdp__reviews .comment-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 640px; }
.ms-pdp__reviews .comment-form > p { margin: 0; }
.ms-pdp__reviews .comment-form label { display: block; font-weight: 700; font-size: var(--font-size-sm); margin-block-end: var(--space-1); }
.ms-pdp__reviews .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.ms-pdp__reviews .comment-form-cookies-consent label { margin: 0; font-weight: 600; }
.ms-pdp__reviews .comment-form-cookies-consent input { width: auto; min-height: 0; margin-top: 4px; flex: 0 0 auto; }
.ms-pdp__reviews .form-submit { margin: var(--space-1) 0 0; }
.ms-pdp__reviews .form-submit .submit { min-width: 160px; }
.ms-pdp__reviews textarea { min-height: 120px; }

/* ===== تقييم المراجعة: نجوم فعلية قابلة للنقر =====
   خط ووكومرس الافتراضي معطّل في الثيم، فكان حقل «تقييمك» يظهر كنصّ خام
   («1 من أصل 5 نجوم 2 …»). نرسم النجوم بأيقونة ★ يونيكود مستقلّة. */
.ms-pdp__reviews .comment-form-rating label { display: block; margin-block-end: var(--space-2); font-weight: 700; }
.ms-pdp__reviews .comment-form-rating select { display: none; } /* البديل النصّي مخفي؛ النجوم تتولّى الإدخال */
.ms-pdp__reviews p.stars { margin: 0 0 var(--space-4); }
.ms-pdp__reviews p.stars span { display: inline-flex; gap: var(--space-1); }
.ms-pdp__reviews p.stars a {
  position: relative;
  width: 1.7em;
  height: 1.7em;
  font-size: 1.6rem;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
}
.ms-pdp__reviews p.stars a::before {
  content: "★";
  position: absolute;
  inset: 0;
  text-indent: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-border);
  transition: color var(--transition-fast);
}
/* تمرير: تعبئة حتى النجمة المؤشّر عليها وما قبلها */
.ms-pdp__reviews p.stars:hover a::before { color: #f6b73c; }
.ms-pdp__reviews p.stars a:hover ~ a::before { color: var(--color-border); }
/* مختارة: تعبئة حتى النجمة الفعّالة وما قبلها */
.ms-pdp__reviews p.stars.selected a::before { color: #f6b73c; }
.ms-pdp__reviews p.stars.selected a.active ~ a::before { color: var(--color-border); }
.ms-pdp__title { font-size: var(--font-size-3xl); font-weight: 800; line-height: 1.35; margin: 0 0 var(--space-3); color: var(--color-text); }
.ms-pdp__price { font-size: var(--font-size-2xl); font-weight: 900; color: var(--accent-700, var(--color-accent)); margin-block-end: var(--space-3); }
.ms-pdp__price del { font-size: var(--font-size-base); font-weight: 400; color: var(--color-text-muted); margin-inline-start: var(--space-2); }
.ms-pdp__price ins { text-decoration: none; }
.ms-pdp .ms-stock-badge { margin-block-end: var(--space-4); }

.ms-pdp__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-5); }

/* صف الكمية + الإضافة جنباً لجنب (الكمية مدمجة في الزر بصرياً) */
.ms-pdp__buy { display: flex; align-items: stretch; gap: var(--space-3); }
.ms-pdp__buy .ms-pdp__add { flex: 1 1 auto; }

/* عدّاد الكمية — كتلة واحدة متماسكة (سطح موحّد + فواصل رفيعة بين الأجزاء) */
.ms-qty {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.ms-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-height: 52px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ms-qty__btn:hover { background: var(--color-bg-soft); color: var(--color-primary); }
.ms-qty__btn:active { background: color-mix(in srgb, var(--color-primary) 16%, transparent); }
/* رفع التخصيص فوق قاعدة input الافتراضية في WooCommerce (.woocommerce input[type=number] = 0,2,1) */
.ms-pdp .ms-qty .ms-qty__input,
.woocommerce .ms-qty input.ms-qty__input {
  width: 52px;
  min-width: 0;
  min-height: 52px;
  padding: 0;
  border: none;
  border-inline: 1.5px solid var(--color-border);   /* فاصلان رفيعان يوحّدان الأجزاء */
  border-radius: 0;
  text-align: center;
  font-weight: 800;
  font-size: var(--font-size-base);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-primary);
  -moz-appearance: textfield;
  box-shadow: none;
}
.ms-pdp .ms-qty .ms-qty__input:focus,
.woocommerce .ms-qty input.ms-qty__input:focus { outline: none; box-shadow: none; border-inline-color: var(--color-border); }
.ms-qty__input::-webkit-outer-spin-button,
.ms-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ms-pdp__add { min-height: 52px; font-size: var(--font-size-base); }

/* ===== خيارات المنتج: اللون (مرتبط بصورة) + السعة ===== */
.ms-pdp__options { display: flex; flex-direction: column; gap: var(--space-4); margin-block-start: var(--space-5); }
.ms-pdp__option { display: flex; flex-direction: column; gap: var(--space-2); }
.ms-pdp__option-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-muted); }
.ms-pdp__option-label strong { color: var(--color-text); font-weight: 800; }

/* اللون — مربّعات صور قابلة للاختيار */
.ms-pdp-colors__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ms-pdp-color {
  position: relative;
  width: 58px;
  height: 58px;
  padding: 3px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ms-pdp-color img,
.ms-pdp-color__dot { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-md) - 4px); display: block; }
.ms-pdp-color__dot { background: var(--color-bg-soft); }
.ms-pdp-color:hover { border-color: var(--color-primary); }
.ms-pdp-color.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(56, 214, 255, .25); }

/* السعة — أزرار اختيار نصّية */
.ms-pdp-storages__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ms-pdp-storage {
  min-width: 58px;
  padding: 11px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.ms-pdp-storage:hover { border-color: var(--color-primary); }
.ms-pdp-storage.is-active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  color: var(--color-primary);
}

/* شارات الثقة (الدفع عند الاستلام / توصيل سريع / ضمان) — بطاقات متساوية بأيقونة */
.ms-pdp__perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.ms-pdp__perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.35;
}
.ms-pdp__perk-icon { color: var(--color-primary); flex: 0 0 auto; }
.ms-pdp__perk--primary {
  border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
}

/* ===== البطاقات (مواصفات/وصف) ===== */
.ms-pdp__card {
  margin-block-start: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.ms-pdp__card-title { font-size: var(--font-size-lg); font-weight: 800; margin: 0 0 var(--space-4); color: var(--color-text); }
.ms-pdp-specs__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-block-end: 1px solid var(--color-border); }
.ms-pdp-specs__row:last-child { border-block-end: none; }
.ms-pdp-specs__key { color: var(--color-text-muted); font-weight: 600; margin: 0; }
.ms-pdp-specs__val { color: var(--color-text); font-weight: 700; margin: 0; text-align: end; }
.ms-pdp-desc__body { color: var(--color-text); line-height: 1.8; }
.ms-pdp-desc__body > :first-child { margin-block-start: 0; }

/* ===== منتجات مشابهة ===== */
.ms-pdp__related { margin-block-start: var(--space-8); }
.ms-pdp__related-title { font-size: var(--font-size-xl); font-weight: 800; margin: 0 0 var(--space-4); }
.ms-pdp__related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 768px) { .ms-pdp__related-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }

/* ===== شريط «أضف للسلة» اللاصق (جوال فقط) ===== */
.ms-sticky-atc {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 850;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border-block-start: 1px solid var(--color-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
}
.ms-sticky-atc__price { font-weight: 900; color: var(--accent-700, var(--color-accent)); white-space: nowrap; }
.ms-sticky-atc__add { flex: 1 1 auto; min-height: 48px; }
@media (min-width: 768px) { .ms-sticky-atc { display: none; } }

/* =========================================================
   نماذج وأزرار WooCommerce (دخول/تسجيل/حساب/عنوان) — توحيد الهوية.
   ========================================================= */
.woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-end: var(--space-3);
}
.woocommerce form .form-row label,
.woocommerce-account label,
.woocommerce-EditAccountForm label { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text); }

.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce select,
.woocommerce textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.woocommerce textarea { min-height: 110px; padding-block: var(--space-2); line-height: 1.6; }
.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(56, 214, 255, .18);
}
.woocommerce .input-text::placeholder { color: var(--color-text-muted); }

/* سهم مخصّص موحّد للقوائم المنسدلة — يسار في RTL، بدل سهم المتصفّح المتبعثر. */
.woocommerce select,
.woocommerce-ordering select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--space-3) center;
  background-size: 16px 16px;
  padding-left: var(--space-8);
}

/* تظليل ووكومرس (رقم/تاريخ/حالة الطلب) — إزالة الأصفر الافتراضي ومنحه هوية. */
.woocommerce mark,
.woocommerce-account mark,
mark {
  background: transparent;
  color: var(--color-primary);
  font-weight: 700;
}

/* أزرار WooCommerce */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), filter var(--transition-fast);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { border-color: var(--color-primary); color: var(--color-primary); }

.woocommerce .button.alt,
.woocommerce #place_order,
.woocommerce #respond input#submit,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-ResetPassword .button,
.woocommerce-EditAccountForm .button {
  background: var(--grad-primary);
  color: var(--color-on-primary);
  border: none;
  font-weight: 800;
  box-shadow: var(--glow-primary);
}
.woocommerce .button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover { filter: brightness(1.06); color: var(--color-on-primary); }

/* ملاحظة: أنماط بطاقات المصادقة + تنقّل الحساب + بطاقات اللوحة + تخطيط
   صفحة «حسابي» نُقلت كاملةً إلى pages/account.css (إعادة هيكلة 2026-06-26). */
.woocommerce-form-login__rememberme { font-weight: 600; }

/* جداول WooCommerce (الطلبات/التحميلات/العناوين) */
.woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--color-surface);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--color-border);
  text-align: start;
}
.woocommerce table.shop_table thead th { border-block-start: none; color: var(--color-text); font-weight: 800; }

/* بيانات خيارات المنتج (اللون/السعة/الباقة) في السلة/الطلب — قائمة مفتاح:قيمة
   مرتّبة بدل أسطر مكدّسة بلا تنسيق (كانت تبدو متراكبة). تظهر أينما طبع
   WooCommerce العنصر <dl class="variation"> (سلة/دفع/تأكيد الطلب). */
.variation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.variation dt { margin: 0; font-weight: 700; color: var(--color-text-muted); }
.variation dd { margin: 0; color: var(--color-text); font-weight: 600; }
.variation dd > * { margin: 0; }

/* رسائل WooCommerce */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-block-end: var(--space-4);
  font-size: var(--font-size-sm);
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error { border: 1px solid var(--color-border); }
.woocommerce-message { background: var(--success-bg); color: var(--success-fg); border-color: color-mix(in srgb, var(--success-fg) 35%, transparent); }
.woocommerce-info    { background: var(--primary-50); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
.woocommerce-error   { background: var(--error-bg); color: var(--error-fg); border-color: color-mix(in srgb, var(--error-fg) 35%, transparent); }

/* =========================================================
   طبقة التحميل (jQuery blockUI) — WooCommerce تطبّق `background:#fff;opacity:.6`
   على ملخّص الطلب/الدفع/السلة أثناء أجاكس (تحديث الدفع التلقائي عند الفتح،
   تطبيق كوبون، تحديث الكمية). على الثيم الداكن ظهرت **وميضاً أبيض**. نوحّدها
   مع الهوية الداكنة + مؤشّر تحميل دوّار بدل الفلاش. (الأنماط الافتراضية
   لووكومرس مُعطّلة فلا spinner أصلاً.)
   ========================================================= */
.blockUI.blockOverlay {
  background: var(--color-page) !important;
  opacity: .5 !important;
  cursor: progress !important;
}
.blockUI.blockOverlay::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 30px;
  height: 30px;
  margin: auto;
  border: 3px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: ms-block-spin .7s linear infinite;
}
@keyframes ms-block-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .blockUI.blockOverlay::before { animation: none; }
}

/* =========================================================
   صفحة «حسابي» (WooCommerce My Account) — هوية mobile stor.
   Mobile-first · RTL · توكنز الهوية (كحلي + سماوي، داكن أولاً).
   يشمل: التخطيط · التنقّل · اللوحة · الطلبات · العناوين · النماذج · الدخول.
   ملاحظة: محمّل بعد woocommerce.css، فيتغلّب عند الحاجة.
   ========================================================= */

/* ===== توسيع حاوية الحساب (لا نريد عرض «قراءة» ضيّقاً) ===== */
body.woocommerce-account .ms-prose {
  max-width: 1080px;
  font-size: var(--font-size-base);
  line-height: var(--line-base);
}
/* روابط الحساب ليست روابط «مقال» — لا تسطير افتراضي. */
body.woocommerce-account .ms-prose a { text-decoration: none; }
body.woocommerce-account .ms-page-head { margin-block-end: var(--space-8); }
@media (max-width: 560px) {
  body.woocommerce-account .ms-page-head { margin-block: var(--space-2) var(--space-6); }
}

/* صفحات الدخول/الاسترجاع (غير مسجّل الدخول) — حاوية أوسع للوحة الترحيب. */
body.woocommerce-account:not(.logged-in) .ms-prose { max-width: 940px; }

/* =========================================================
   التخطيط العام للوحة (مسجّل الدخول): تنقّل + محتوى.
   ========================================================= */
.woocommerce-account.logged-in .woocommerce {
  display: block;
}
@media (min-width: 860px) {
  .woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--space-8);
    align-items: start;
  }
}

/* =========================================================
   التنقّل (ms-acc-nav) — شريط أفقي على الهاتف، عمود على الدسكتوب.
   ========================================================= */
.ms-acc-nav { margin-block-end: var(--space-6); }
.ms-acc-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block-end: var(--space-1);
}
.ms-acc-nav__list::-webkit-scrollbar { display: none; }

.ms-acc-nav li { margin: 0; flex: 0 0 auto; }

.ms-acc-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background var(--transition-fast), box-shadow var(--transition-fast);
}
.ms-acc-nav__icon { width: 18px; height: 18px; flex: 0 0 auto; }

.ms-acc-nav li.is-active .ms-acc-nav__link,
.ms-acc-nav__link:hover {
  border-color: transparent;
  background: var(--grad-primary);
  color: var(--color-on-primary);
  box-shadow: var(--glow-primary);
}

/* زرّ تسجيل الخروج: لون تحذيري خفيف ليتميّز. */
.ms-acc-nav li.woocommerce-MyAccount-navigation-link--customer-logout .ms-acc-nav__link {
  color: var(--color-error);
}
.ms-acc-nav li.woocommerce-MyAccount-navigation-link--customer-logout .ms-acc-nav__link:hover {
  background: color-mix(in srgb, var(--color-error) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-error) 45%, transparent);
  color: var(--color-error);
  box-shadow: none;
}

/* الدسكتوب: عمود جانبي بروابط بعرض كامل. */
@media (min-width: 860px) {
  .ms-acc-nav {
    margin-block-end: 0;
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
  .ms-acc-nav__list {
    flex-direction: column;
    gap: var(--space-1);
    overflow: visible;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .ms-acc-nav li { flex: 1 1 auto; }
  .ms-acc-nav__link {
    width: 100%;
    border-radius: var(--radius-md);
    border-color: transparent;
    background: transparent;
    padding: 12px 14px;
    font-size: var(--font-size-base);
  }
  .ms-acc-nav li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--color-border);
  }
}

/* =========================================================
   اللوحة (ms-acc-dash): ترحيب + بطاقات + مساعدة.
   ========================================================= */
.ms-acc-dash { display: flex; flex-direction: column; gap: var(--space-5); }

.ms-acc-hello {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 55%),
    var(--color-surface);
}
.ms-acc-hello__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-full);
  background: var(--grad-primary);
  color: var(--color-on-primary);
  box-shadow: var(--glow-primary);
}
.ms-acc-hello__avatar svg { width: 28px; height: 28px; }
.ms-acc-hello__text { min-width: 0; flex: 1 1 auto; }
.ms-acc-hello__title { margin: 0; font-size: var(--font-size-xl); font-weight: 900; color: var(--color-text); }
.ms-acc-hello__sub { margin: 4px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.6; }

.ms-acc-hello__logout {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.ms-acc-hello__logout svg { width: 16px; height: 16px; }
.ms-acc-hello__logout:hover { color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 45%, transparent); }
@media (max-width: 480px) {
  .ms-acc-hello { flex-wrap: wrap; }
  .ms-acc-hello__logout .ms-acc-hello__logout-label,
  .ms-acc-hello__logout span { display: none; }
  .ms-acc-hello__logout { padding: 10px; }
}

/* بطاقات الإجراءات */
.ms-acc-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 480px) { .ms-acc-cards { grid-template-columns: 1fr 1fr; } }

.ms-acc-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ms-acc-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.ms-acc-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--color-primary);
}
.ms-acc-card__icon svg { width: 24px; height: 24px; }
.ms-acc-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ms-acc-card__title { font-weight: 800; font-size: var(--font-size-base); color: var(--color-text); }
.ms-acc-card__desc { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.5; }
.ms-acc-card__arrow { flex: 0 0 auto; color: var(--color-primary); display: grid; place-items: center; }
.ms-acc-card__arrow svg { width: 20px; height: 20px; }

/* بطاقة المساعدة عبر واتساب */
.ms-acc-help {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, #25d366 38%, transparent);
  background: color-mix(in srgb, #25d366 10%, var(--color-surface));
  color: var(--color-text);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ms-acc-help:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ms-acc-help__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background: #25d366;
  color: #fff;
}
.ms-acc-help__icon svg { width: 26px; height: 26px; }
.ms-acc-help__body { display: flex; flex-direction: column; gap: 2px; }
.ms-acc-help__title { font-weight: 800; }
.ms-acc-help__desc { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* =========================================================
   الطلبات — جدول على الدسكتوب، بطاقات على الهاتف.
   ========================================================= */
.woocommerce-orders-table__cell-order-number a { font-weight: 800; color: var(--color-primary); }

/* الحالة كشارة ملوّنة حسب نوع الطلب. */
.woocommerce-orders-table__cell-order-status { font-weight: 800; }
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status { color: var(--warning-fg); }
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: var(--success-fg); }
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status { color: var(--color-primary); }
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status { color: var(--color-error); }

.woocommerce-orders-table__cell-order-actions { text-align: end; }
.woocommerce-orders-table__cell-order-actions .button {
  padding: 8px 16px;
  min-height: 40px;
}

/* الهاتف: تحويل الجدول إلى بطاقات مقروءة. */
@media (max-width: 767px) {
  .woocommerce-orders-table { border: none; background: transparent; }
  .woocommerce-orders-table thead { display: none; }
  .woocommerce-orders-table tbody,
  .woocommerce-orders-table tr,
  .woocommerce-orders-table td,
  .woocommerce-orders-table th { display: block; width: 100%; }

  .woocommerce-orders-table tr.order {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--space-3) var(--space-4);
    margin-block-end: var(--space-3);
  }
  .woocommerce-orders-table td,
  .woocommerce-orders-table th {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px 0;
    border: none;
    border-block-end: 1px dashed var(--color-border);
    text-align: end;
  }
  .woocommerce-orders-table td::before,
  .woocommerce-orders-table th::before {
    content: attr(data-title);
    font-weight: 700;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }
  .woocommerce-orders-table__cell-order-actions {
    border-block-end: none;
    padding-block-end: 0;
  }
  .woocommerce-orders-table__cell-order-actions::before { display: none; }
  .woocommerce-orders-table__cell-order-actions .button { width: 100%; }
}

/* ترقيم الطلبات */
.woocommerce-pagination { margin-block-start: var(--space-5); display: flex; gap: var(--space-3); }

/* =========================================================
   العناوين (ms-acc-addr).
   ========================================================= */
.ms-acc-addr__intro { color: var(--color-text-muted); margin-block-end: var(--space-5); }
.ms-acc-addr {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 520px;
}
.ms-acc-addr__card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-5);
  width: auto;
  float: none;
}
.ms-acc-addr__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}
.ms-acc-addr__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--color-primary);
}
.ms-acc-addr__icon svg { width: 22px; height: 22px; }
.ms-acc-addr__title { margin: 0; font-size: var(--font-size-lg); font-weight: 800; flex: 1 1 auto; }
.ms-acc-addr__edit {
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-primary) !important;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.ms-acc-addr__edit:hover { background: var(--primary-50); }
.ms-acc-addr__body {
  font-style: normal;
  color: var(--color-text);
  line-height: 1.9;
  font-size: var(--font-size-base);
}
.ms-acc-addr__empty { display: block; color: var(--color-text-muted); margin-block-end: var(--space-4); }
.ms-acc-addr__add { background: var(--grad-primary); color: var(--color-on-primary); font-weight: 800; box-shadow: var(--glow-primary); }
.ms-acc-addr__add:hover { filter: brightness(1.06); }

/* =========================================================
   النماذج (تعديل العنوان / تفاصيل الحساب) — توحيد وتجميل.
   ========================================================= */
.woocommerce-account .woocommerce-MyAccount-content form {
  max-width: 640px;
}
.woocommerce-account .woocommerce-MyAccount-content > form > h2,
.woocommerce-EditAccountForm legend {
  font-size: var(--font-size-lg);
  font-weight: 800;
  margin-block-end: var(--space-4);
}

/* اسم أول/أخير جنباً إلى جنب على الشاشات الأوسع. */
@media (min-width: 600px) {
  .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-address-fields .form-row-first { width: calc(50% - var(--space-2)); float: right; clear: right; }
  .woocommerce-EditAccountForm .form-row-last,
  .woocommerce-address-fields .form-row-last { width: calc(50% - var(--space-2)); float: left; clear: left; }
}
.woocommerce-EditAccountForm .clear { clear: both; }

/* وصف اسم العرض كتلميح خفيف. */
#account_display_name_description,
.woocommerce-EditAccountForm em {
  display: block;
  margin-block-start: 6px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: normal;
}

/* قسم تغيير كلمة المرور — بطاقة فرعية واضحة. */
.woocommerce-EditAccountForm fieldset {
  margin-block: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}
.woocommerce-EditAccountForm legend {
  padding: 0;
  margin-block-end: var(--space-2);
}

/* زر الحفظ الأساسي — إصلاح تعارض الأولوية مع .woocommerce button.button. */
.woocommerce-account button.woocommerce-form-login__submit,
.woocommerce-account button.woocommerce-form-register__submit,
.woocommerce .woocommerce-ResetPassword button.button,
.woocommerce-account .woocommerce-EditAccountForm button.button,
.woocommerce-account .woocommerce-address-fields button.button,
.woocommerce-account form button.button[name="save_address"] {
  background: var(--grad-primary);
  color: var(--color-on-primary);
  border: none;
  font-weight: 800;
  box-shadow: var(--glow-primary);
}
.woocommerce-account button.woocommerce-form-login__submit:hover,
.woocommerce-account button.woocommerce-form-register__submit:hover,
.woocommerce .woocommerce-ResetPassword button.button:hover,
.woocommerce-account .woocommerce-EditAccountForm button.button:hover,
.woocommerce-account .woocommerce-address-fields button.button:hover {
  filter: brightness(1.06);
  color: var(--color-on-primary);
}

/* =========================================================
   الدخول / الاسترجاع (ms-auth).
   ========================================================= */
.ms-auth {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  overflow: hidden;
}
@media (min-width: 760px) {
  .ms-auth { grid-template-columns: 1fr 1.05fr; }
}

/* لوحة الترحيب الجانبية */
.ms-auth__aside {
  padding: var(--space-8) var(--space-6);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--color-primary) 26%, transparent), transparent 60%),
    var(--navy);
  color: #eaf2ff;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ms-auth__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--grad-primary);
  color: var(--color-on-primary);
  box-shadow: var(--glow-primary);
}
.ms-auth__mark svg { width: 30px; height: 30px; }
.ms-auth__welcome { margin: 0; font-size: var(--font-size-2xl); font-weight: 900; color: #fff; }
.ms-auth__lead { margin: 0; color: #b9cdf2; line-height: 1.8; }
.ms-auth__perks { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ms-auth__perks li { display: flex; align-items: center; gap: var(--space-2); color: #dbe7fb; font-size: var(--font-size-sm); }
.ms-auth__perks svg {
  width: 18px; height: 18px; flex: 0 0 auto;
  padding: 3px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  color: var(--color-primary);
}

/* لوحة النموذج */
.ms-auth__panel { padding: var(--space-8) var(--space-6); }
.ms-auth__title { margin: 0 0 var(--space-5); font-size: var(--font-size-xl); font-weight: 900; }

.ms-auth .form-row { margin-block-end: var(--space-4); }
.ms-auth__row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ms-auth__row .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; }
.ms-auth__lost { color: var(--color-primary) !important; font-weight: 700; font-size: var(--font-size-sm); }
.ms-auth__submit { width: 100%; min-height: 50px; font-size: var(--font-size-base); }

.ms-auth__guest {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
.ms-auth__guest-text { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ms-auth__guest-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  color: var(--color-primary);
  font-weight: 800;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ms-auth__guest-btn:hover { background: var(--primary-50); border-color: var(--color-primary); color: var(--color-primary); }

/* استرجاع كلمة المرور — توسيط وبطاقة. */
.woocommerce-ResetPassword.lost_reset_password {
  max-width: 460px;
  margin-inline: auto;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.woocommerce-ResetPassword .button { width: 100%; min-height: 48px; }

/* =========================================================
   صفحة السلة (Cart) — تخطيط بطاقات احترافي، RTL، الهاتف أولاً.
   تعمل مع override القالب (woocommerce/cart/cart.php + cart-totals.php):
   قائمة عناصر مرنة (Grid) بدل الجدول الافتراضي الهشّ. على الحاسوب:
   عمودان — قائمة العناصر + بطاقة ملخّص لاصقة.
   ========================================================= */

.woocommerce-cart .ms-main { max-width: 1120px; margin-inline: auto; }

/* صفحة السلة تطبيقية عريضة لا «نثر» مقيّد العرض (760px) — نُلغي الحدّ
   ونزيل تنسيق روابط النثر (تسطير/لون) المتسرّب لأسماء المنتجات. */
.woocommerce-cart .ms-prose { max-width: none; }
.woocommerce-cart .ms-prose > * { margin-block: 0; }
.woocommerce-cart .ms-prose a { text-decoration: none; }
.woocommerce-cart .ms-prose a.ms-cart-item__name { color: var(--color-text); }
.woocommerce-cart .ms-prose a.ms-cart-item__name:hover { color: var(--color-primary); }

/* أعمدة موحّدة بين رأس الجدول وصفوف العناصر (حاسوب):
   صورة | المنتج | الكمية | المجموع | حذف. السعر الإفرادي يُعرض سطراً
   صغيراً تحت الاسم (لا عموداً) لتفادي ازدحام أرقام الدينار الطويلة. */
.ms-cart { --ms-cart-cols: 72px minmax(0, 1fr) 110px 140px 40px; }

/* ===== بطاقة قائمة العناصر ===== */
.ms-cart__items {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* رأس الأعمدة — حاسوب فقط */
.ms-cart__head { display: none; }

/* ===== عنصر السلة (الهاتف أولاً: بطاقة) ===== */
.ms-cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  grid-template-areas:
    "media main remove"
    "media foot foot";
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}
.ms-cart-item:last-child { border-block-end: none; }

/* الصورة — صندوق ثابت لا ينضغط (الإصلاح الجذري: max-width:none) */
.ms-cart-item__media {
  grid-area: media;
  display: block;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}
.ms-cart-item__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* الاسم + الخيارات */
.ms-cart-item__main {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ms-cart-item__name {
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text);
  text-decoration: none;
}
a.ms-cart-item__name:hover { color: var(--color-primary); }

/* السعر الإفرادي — مخفي على الجوال (المجموع يكفي)، يظهر عموداً على الحاسوب */
.ms-cart-item__price { display: none; }

/* عدّاد الكمية + المجموع: صفّ سفلي كامل العرض (الكمية بداية، السعر نهاية)
   حتى يتّسع عمود الاسم فلا يتكسّر لأسطر كثيرة. */
.ms-cart-item__qty { grid-area: foot; align-self: center; justify-self: start; }
.ms-cart-item__qty .quantity { display: inline-flex; }
.ms-cart-item__qty input.qty {
  width: 74px;
  min-height: 44px;
  text-align: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 800;
  -moz-appearance: textfield;
}
.ms-cart-item__qty input.qty::-webkit-outer-spin-button,
.ms-cart-item__qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* المجموع الفرعي للسطر */
.ms-cart-item__subtotal {
  grid-area: foot;
  align-self: center;
  justify-self: end;
  text-align: end;
  font-size: var(--font-size-lg);
  font-weight: 900;
  color: var(--color-text);
  white-space: nowrap;
}
.ms-cart-item__subtotal del { color: var(--color-text-muted); font-weight: 600; font-size: var(--font-size-sm); }

/* زر الحذف */
.ms-cart-item__remove {
  grid-area: remove;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-bg-soft);
  color: var(--color-error) !important;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ms-cart-item__remove:hover { background: var(--color-error); color: #fff !important; }

/* ===== شريط الإجراءات (كوبون + تحديث) — الهاتف: عمودي مرتّب =====
   صفّ الكوبون (إدخال يتمدّد + زر تطبيق) ثم «تحديث السلة» بعرض كامل.
   الدسكتوب: صفّ أفقي (الكوبون يميناً، التحديث في الطرف). */
.ms-cart__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}
.ms-cart__actions .coupon {
  display: flex;
  gap: var(--space-2);
}
.ms-cart__actions .coupon input#coupon_code {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
}
.ms-cart__actions .coupon input#coupon_code:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(56, 214, 255, .18);
}
.ms-cart__actions .button {
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ms-cart__actions .button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ms-cart__actions .coupon .button { flex: 0 0 auto; }
.ms-cart__update { width: 100%; }

@media (min-width: 768px) {
  .ms-cart__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ms-cart__actions .coupon { flex: 1 1 320px; }
  .ms-cart__update { width: auto; margin-inline-start: auto; }
}

/* ===== بطاقة ملخّص السلة ===== */
.ms-cart-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.ms-cart-summary__title { font-size: var(--font-size-lg); font-weight: 800; margin: 0 0 var(--space-4); color: var(--color-text); }
.ms-cart-summary__table { width: 100%; border-collapse: collapse; background: transparent; }
.ms-cart-summary__table th,
.ms-cart-summary__table td {
  padding: var(--space-3) 0;
  border: none;
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  font-weight: 600;
  color: var(--color-text-muted);
  vertical-align: middle;
}
.ms-cart-summary__table td { text-align: end; color: var(--color-text); font-weight: 700; }
.ms-cart-summary__table .order-total th,
.ms-cart-summary__table .order-total td {
  border-block-end: none;
  padding-block-start: var(--space-4);
  font-weight: 900;
  font-size: var(--font-size-xl);
  color: var(--color-text);
}
.ms-cart-summary__table .cart-discount th,
.ms-cart-summary__table .cart-discount td { color: var(--color-success); }

/* زر المتابعة للدفع */
.ms-cart-summary .wc-proceed-to-checkout { margin-block-start: var(--space-5); }
.ms-cart-summary .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  border-radius: var(--radius-md);
  background: var(--grad-primary);
  color: var(--color-on-primary);
  font-weight: 800;
  font-size: var(--font-size-base);
  text-decoration: none;
  box-shadow: var(--glow-primary);
  transition: filter var(--transition-fast);
}
.ms-cart-summary .wc-proceed-to-checkout a.checkout-button:hover { filter: brightness(1.06); }

/* ===== السلة الفارغة ===== */
.ms-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  max-width: 520px;
  margin-inline: auto;
}
.ms-cart-empty__icon { color: var(--color-primary); opacity: .85; }
.ms-cart-empty .cart-empty,
.ms-cart-empty .wc-empty-cart-message {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
}
.ms-cart-empty .return-to-shop { margin: var(--space-2) 0 0; }
.ms-cart-empty .return-to-shop .button {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 var(--space-8);
  border: none;
  border-radius: var(--radius-md);
  background: var(--grad-primary);
  color: var(--color-on-primary);
  font-weight: 800;
  box-shadow: var(--glow-primary);
}

/* =========================================================
   حاسوب: رأس أعمدة + صفوف بمحاذاة + تخطيط عمودين (عناصر | ملخّص)
   ========================================================= */
@media (min-width: 768px) {
  .ms-cart__head {
    display: grid;
    grid-template-columns: var(--ms-cart-cols);
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-soft);
    border-block-end: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: 800;
    color: var(--color-text-muted);
  }
  .ms-cart__head-product { grid-column: 1 / 3; }
  .ms-cart__head-price   { display: none; }
  .ms-cart__head-qty     { grid-column: 3; text-align: center; }
  .ms-cart__head-subtotal{ grid-column: 4; text-align: end; }

  .ms-cart-item {
    grid-template-columns: var(--ms-cart-cols);
    grid-template-areas:
      "media main  qty subtotal remove"
      "media price qty subtotal remove";
    align-items: center;
    gap: var(--space-1) var(--space-4);
  }
  .ms-cart-item__media { width: 64px; height: 64px; align-self: center; }
  .ms-cart-item__main { align-self: end; }
  .ms-cart-item__price {
    grid-area: price;
    display: block;
    align-self: start;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-muted);
  }
  .ms-cart-item__qty { grid-area: qty; justify-self: center; align-self: center; }
  .ms-cart-item__subtotal { grid-area: subtotal; align-self: center; }
  .ms-cart-item__remove { grid-area: remove; justify-self: center; align-self: center; }
}

@media (min-width: 992px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-6);
    align-items: start;
  }
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin: 0; }
  .woocommerce-cart .cart-collaterals { grid-column: 2; width: auto; display: block; }
  .woocommerce-cart .cart-collaterals .ms-cart-summary { width: auto; }
  .woocommerce-cart .ms-cart-summary {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}

/* =========================================================
   صفحة الدفع (Checkout) — تخطيط «بِكسل» للنموذج الكلاسيكي.
   حقول عراقية: اسم كامل + هاتف 07 + محافظة + منطقة + ملاحظات. COD فقط.
   ========================================================= */

.woocommerce-checkout .ms-main,
.woocommerce-checkout-wrapper { max-width: 980px; margin-inline: auto; }

/* صفحة الدفع تطبيقية لا «نثر» مقيّد العرض (760px) — نُلغي الحدّ والتسطير. */
.woocommerce-checkout .ms-prose { max-width: none; }
.woocommerce-checkout .ms-prose > * { margin-block: 0; }
.woocommerce-checkout .ms-prose a { text-decoration: none; }

form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* بطاقات الأقسام — بطاقة بيانات التوصيل بطاقة كاملة، وملخّص الطلب بطاقة
   واحدة متّصلة: العنوان رأسٌ لها (#order_review_heading) ثم الجسم
   (#order_review)، فتتساوى البطاقتان بصرياً في الأعلى. */
#customer_details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.woocommerce-checkout h3 {
  font-size: var(--font-size-lg);
  font-weight: 800;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

/* رأس بطاقة الملخّص */
.woocommerce-checkout #order_review_heading {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
  padding: var(--space-5) var(--space-6) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-block-end: none;
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
}
/* جسم بطاقة الملخّص — متّصل بالرأس (يلغي فجوة الشبكة بينهما) */
.woocommerce-checkout #order_review {
  margin-block-start: calc(-1 * var(--space-6));
  padding: 0 var(--space-6) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-block-start: none;
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}

/* صفوف الحقول */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 600px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr 1fr; }
  .woocommerce-checkout .form-row-wide { grid-column: 1 / -1; }
}
.woocommerce-checkout .form-row { margin: 0; display: flex; flex-direction: column; }
.woocommerce-checkout .form-row label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin-block-end: var(--space-2);
  color: var(--color-text);
}
.woocommerce-checkout .form-row .required { color: var(--color-error); text-decoration: none; }
.woocommerce-checkout .form-row .optional { color: var(--color-text-muted); font-weight: 400; }

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
}
.woocommerce-checkout .form-row textarea {
  min-height: 96px;
  padding: var(--space-3);
  resize: vertical;
}
/* سهم مخصّص لقائمة المحافظة (يسار في RTL، متناسق مع بقية القوائم). */
.woocommerce-checkout .form-row select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--space-3) center;
  background-size: 16px 16px;
  padding-left: var(--space-8);
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--primary-50);
}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select { border-color: var(--color-error); }

/* ===== ملخّص الطلب: قائمة عناصر بصور صغيرة ===== */
.ms-order-review__items {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ms-order-review__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}
.ms-order-review__item:last-child { border-block-end: none; padding-block-end: 0; }

.ms-order-review__media { position: relative; width: 48px; height: 48px; }
.ms-order-review__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}
.ms-order-review__count {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-start: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--grad-primary);
  color: var(--color-on-primary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}
.ms-order-review__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-order-review__name { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text); line-height: 1.4; }
.ms-order-review__total { font-weight: 800; color: var(--color-text); white-space: nowrap; text-align: end; }

/* ===== المجاميع ===== */
.ms-order-review__totals {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  border-block-start: 1px solid var(--color-border);
}
.ms-order-review__totals th,
.ms-order-review__totals td {
  padding: var(--space-2) 0;
  border: none;
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  vertical-align: middle;
}
.ms-order-review__totals td { text-align: end; color: var(--color-text); font-weight: 700; }
.ms-order-review__totals .cart-discount th,
.ms-order-review__totals .cart-discount td { color: var(--color-success); }
.ms-order-review__totals .order-total th,
.ms-order-review__totals .order-total td {
  border-block-end: none;
  padding-block-start: var(--space-3);
  font-weight: 900;
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

/* طرق الدفع — الدفع عند الاستلام */
.woocommerce-checkout #payment {
  background: var(--primary-50);
  border: 1px solid var(--primary-100, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-block-start: var(--space-4);
}
.woocommerce-checkout #payment ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; }
.woocommerce-checkout #payment ul.wc_payment_methods li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.woocommerce-checkout #payment label { font-weight: 800; color: var(--primary-700, var(--color-primary)); margin: 0; }
.woocommerce-checkout #payment .payment_box {
  flex-basis: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-block-start: var(--space-2);
}
.woocommerce-checkout #payment .payment_box p { margin: 0; }

/* زر إتمام الطلب */
.woocommerce-checkout #place_order,
.woocommerce-checkout .place-order button {
  width: 100%;
  min-height: 54px;
  margin-block-start: var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.woocommerce-checkout #place_order:hover { background: var(--accent-600); }

.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-3);
}

/* كوبون */
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-block-end: var(--space-4); }

/* تخطيط عمودين على الحاسوب: التفاصيل | ملخّص الطلب (بطاقتان متساويتا القمّة).
   صفّ ثالث مرن (1fr) يمتصّ فائض ارتفاع بطاقة النموذج الأطول، فلا يتمدّد صفّ
   العنوان ولا يظهر شريط فاصل بين رأس «طلبك» وجسمها. */
@media (min-width: 992px) {
  form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }
  #customer_details { grid-column: 1; grid-row: 1 / -1; }
  .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; }
  .woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; }
}

/* =========================================================
   الصفحات الثابتة — عناصر مشتركة:
   ترويسة الصفحة · المحتوى المنسّق (prose) · ترقيم · المقال/الصفحة المفردة.
   Mobile-first / RTL / توكنز هوية «تكسفير».
   ========================================================= */

/* ===== ترويسة الصفحة الموحّدة ===== */
.ms-page-head {
  text-align: center;
  max-width: 720px;
  margin: var(--space-4) auto var(--space-12);
}
.ms-page-head__kicker {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 800;
  font-size: var(--font-size-sm);
  letter-spacing: 1px;
  margin-block-end: var(--space-3);
}
.ms-page-head__title {
  font-size: var(--font-size-3xl);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0;
}
.ms-page-head__sub {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: var(--space-4) auto 0;
  max-width: 600px;
}

/* ===== محتوى منسّق (prose) — للمقالات والصفحات ===== */
.ms-prose {
  max-width: 760px;
  margin-inline: auto;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  line-height: 1.9;
}
.ms-prose > * { margin-block: 0 var(--space-6); }
.ms-prose > *:last-child { margin-block-end: 0; }
.ms-prose h2 { font-size: var(--font-size-2xl); font-weight: 900; letter-spacing: -.5px; margin-block: var(--space-8) var(--space-4); }
.ms-prose h3 { font-size: var(--font-size-xl); font-weight: 800; margin-block: var(--space-6) var(--space-3); }
.ms-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.ms-prose ul,
.ms-prose ol { padding-inline-start: var(--space-6); }
.ms-prose li { margin-block-end: var(--space-2); }
.ms-prose blockquote {
  margin-inline: 0;
  padding: var(--space-4) var(--space-6);
  border-inline-start: 4px solid var(--color-primary);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.ms-prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.ms-prose code {
  font-family: ui-monospace, monospace;
  background: var(--color-surface-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: .9em;
}

/* ===== رابط رجوع ===== */
.ms-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.ms-back-link:hover { color: var(--color-primary); }

/* ===== ترقيم الصفحات ===== */
.ms-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-12);
}
.ms-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.ms-pagination a.page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ms-pagination .page-numbers.current {
  background: var(--grad-primary);
  color: var(--color-on-primary);
  border-color: transparent;
}
.ms-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* =========================================================
   المقال المفرد (single.php)
   ========================================================= */
.ms-single { max-width: 820px; margin-inline: auto; }
.ms-single__head { text-align: center; margin-block-end: var(--space-8); }
.ms-single__head .ms-back-link { margin-block-end: var(--space-6); }
.ms-single__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-block-end: var(--space-3);
}
.ms-single__tag,
.ms-article-card__tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgba(56, 214, 255, .12);
  color: var(--color-primary);
  font-weight: 800;
  font-size: var(--font-size-xs);
}
.ms-single__title {
  font-size: var(--font-size-3xl);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
}
.ms-single__media {
  margin: 0 0 var(--space-8);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.ms-single__img { display: block; width: 100%; height: auto; }
.ms-single__pages { margin-block-start: var(--space-6); font-weight: 700; }
.ms-single__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-8);
}
.ms-single__tags a {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.ms-single__tags a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ms-single__foot {
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
  text-align: center;
}

/* ===== الصفحة العامة (page.php) ===== */
.ms-page__media {
  max-width: 820px;
  margin: 0 auto var(--space-8);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.ms-page__img { display: block; width: 100%; height: auto; }

@media (min-width: 760px) {
  .ms-page-head__title { font-size: var(--font-size-4xl); }
  .ms-single__title { font-size: var(--font-size-4xl); }
}

/* =========================================================
   صفحة «تم استلام الطلب» (Order received / Thank you) + «عرض الطلب».
   تستبدل جداول WooCommerce الهشّة بتخطيط بطاقات نظيف (RTL، الهاتف أولاً):
   - بطاقة تأكيد بأيقونة صح + قائمة ملخّص (receipt) مرتّبة.
   - عناصر الطلب بطاقات بصور بدل صفوف جدول متراكبة.
   - المجاميع وطريقة الدفع صفوف كاملة العرض (لا تتكسّر لسطرين).
   - عنوان التوصيل بطاقة بأيقونة.
   ملاحظة: قوالب order-details/customer مشتركة مع صفحة «عرض الطلب» في
   الحساب، لذا أصناف البطاقات عامّة (غير مقيّدة بـ body class).
   ========================================================= */

/* احتياط: لو فُتحت الصفحة بلا body class الخاص بالدفع، نُلغي حدّ «النثر». */
.woocommerce-order-received .ms-prose { max-width: none; }
.woocommerce-order-received .ms-prose > * { margin-block: 0; }
.woocommerce-order-received .ms-prose a { text-decoration: none; }

/* ===== بطاقة التأكيد (شكراً لك) ===== */
.ms-thankyou {
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-5);
  margin-block-end: var(--space-6);
}
.ms-thankyou__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-block-end: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--success-bg);
  color: var(--success-fg);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--success-fg) 12%, transparent);
}
.ms-thankyou .woocommerce-thankyou-order-received {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-text);
}

/* قائمة الملخّص (رقم الطلب/التاريخ/البريد/الإجمالي/الدفع) — صفوف فاتورة */
.ms-thankyou .ms-thankyou__overview {
  list-style: none;
  margin: var(--space-6) auto 0;
  padding: 0;
  max-width: 460px;
  text-align: start;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ms-thankyou .ms-thankyou__overview li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border);
}
.ms-thankyou .ms-thankyou__overview li:last-child { border-block-end: none; }
.ms-thankyou__label { color: var(--color-text-muted); font-weight: 600; font-size: var(--font-size-sm); }
.ms-thankyou .ms-thankyou__overview strong {
  color: var(--color-text);
  font-weight: 800;
  text-align: end;
  word-break: break-word;
}

/* ملاحظة الدفع عند الاستلام (تُطبع عبر hook ووكومرس بعد الملخّص) */
.woocommerce-order-received .woocommerce-order > p:not(.woocommerce-notice) {
  margin: var(--space-4) 0 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ===== عناوين الأقسام (تفاصيل الطلب / عنوان التوصيل) ===== */
.ms-order-details .ms-section-title,
.ms-customer-details .ms-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-8) 0 var(--space-4);
  font-size: var(--font-size-xl);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--color-text);
}
.ms-section-title svg { color: var(--color-primary); flex: 0 0 auto; }

/* ===== بطاقة الطلب: عناصر + مجاميع ===== */
.ms-order-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ms-order-card .ms-order-items { list-style: none; margin: 0; padding: 0; }

.ms-order-card .ms-order-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: start;
  margin: 0;
  padding: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}
.ms-order-card .ms-order-item:last-of-type { border-block-end: none; }

.ms-order-item__media {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  overflow: hidden;
}
.ms-order-item__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
.ms-order-item__count {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-start: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--grad-primary);
  color: var(--color-on-primary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}
.ms-order-item__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-order-item__name { font-size: var(--font-size-base); font-weight: 700; line-height: 1.45; color: var(--color-text); }
.ms-order-card .ms-order-item__name a { color: var(--color-text); text-decoration: none; }
.ms-order-card .ms-order-item__name a:hover { color: var(--color-primary); }

/* خيارات منتج الطلب (اللون/السعة) — ووكومرس يطبعها <ul class="wc-item-meta">
   لا <dl class="variation">، فننسّقها قائمةَ مفتاح:قيمة بلا نقاط. */
.ms-order-item__info .wc-item-meta {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.ms-order-item__info .wc-item-meta li { display: contents; margin: 0; }
.ms-order-item__info .wc-item-meta-label { margin: 0; font-weight: 700; color: var(--color-text-muted); }
.ms-order-item__info .wc-item-meta p { margin: 0; color: var(--color-text); font-weight: 600; }
.ms-order-item__total { align-self: start; font-weight: 800; color: var(--color-text); white-space: nowrap; text-align: end; }

.ms-order-card .ms-order-item__note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-soft);
  border-block-end: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.ms-order-card .ms-order-item__note p { margin: 0; }

/* المجاميع — صفوف كاملة العرض (المسمّى بداية، القيمة نهاية) */
.ms-order-totals {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-soft);
  border-block-start: 1px solid var(--color-border);
}
.ms-order-totals th,
.ms-order-totals td {
  padding: var(--space-3) var(--space-4);
  border: none;
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  vertical-align: middle;
}
.ms-order-totals td { text-align: end; color: var(--color-text); font-weight: 700; }
.ms-order-totals tr:last-child th,
.ms-order-totals tr:last-child td { border-block-end: none; }
.ms-order-totals__row--order_total th,
.ms-order-totals__row--order_total td {
  padding-block: var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: 900;
  color: var(--color-text);
}
.ms-order-totals .order-actions--heading { vertical-align: middle; }
.ms-order-totals .order-actions-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}
.ms-order-totals .order-actions-button:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ===== بطاقة عنوان التوصيل ===== */
.ms-customer-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.ms-customer-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--color-primary);
}
.ms-customer-card__body { min-width: 0; }
.ms-customer-card address {
  font-style: normal;
  margin: 0;
  color: var(--color-text);
  line-height: 1.8;
  font-size: var(--font-size-base);
}
.ms-customer-card .woocommerce-customer-details--phone,
.ms-customer-card .woocommerce-customer-details--email {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  word-break: break-word;
}

/* ===== الحاسوب: تفاصيل الطلب وعنوان التوصيل جنباً لجنب ===== */
@media (min-width: 768px) {
  .ms-order-card .ms-order-item { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .ms-order-item__media { width: 64px; height: 64px; }
}

/* =========================================================
   صفحة المقالات (template-articles.php) — شبكة بطاقات.
   ========================================================= */
.ms-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 560px) { .ms-articles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .ms-articles { grid-template-columns: repeat(3, 1fr); } }

.ms-article-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.ms-article-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.ms-article-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-soft);
}
.ms-article-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.ms-article-card:hover .ms-article-card__img { transform: scale(1.05); }
.ms-article-card__ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 44px;
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-bg-soft));
  opacity: .7;
}
.ms-article-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  flex: 1;
}
.ms-article-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.ms-article-card__date { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ms-article-card__title {
  font-size: var(--font-size-lg);
  font-weight: 800;
  line-height: 1.4;
  margin: 0;
}
.ms-article-card__title a { color: var(--color-text); text-decoration: none; }
.ms-article-card__title a:hover { color: var(--color-primary); }
.ms-article-card__excerpt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  margin: 0;
}
.ms-article-card__more {
  margin-block-start: auto;
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.ms-article-card__more:hover { text-decoration: underline; }

/* =========================================================
   التعليقات (comments.php) — قائمة بطاقات + نموذج بهوية الثيم.
   تحاذي عمود قراءة المقال (.ms-single = 820px).
   ========================================================= */
.ms-comments {
  max-width: 820px;
  margin: var(--space-12) auto 0;
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--color-border);
}
.ms-comments__title {
  font-size: var(--font-size-xl);
  font-weight: 900;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}

/* ===== قائمة التعليقات ===== */
.ms-comments__list,
.ms-comments__list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ms-comments__list .comment { margin-block-end: var(--space-4); }
.ms-comments__list .children {
  margin-block-start: var(--space-4);
  margin-inline-start: var(--space-4);
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--color-border);
}

.ms-comments .comment-body {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.ms-comments .comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin-block-end: var(--space-3);
}
.ms-comments .comment-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.ms-comments .comment-author .avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}
.ms-comments .comment-author .fn {
  font-style: normal;
  font-weight: 800;
  color: var(--color-text);
}
.ms-comments .comment-author .fn a { color: var(--color-text); text-decoration: none; }
.ms-comments .comment-author .says { display: none; }
.ms-comments .comment-metadata { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ms-comments .comment-metadata a { color: var(--color-text-muted); text-decoration: none; }
.ms-comments .comment-metadata a:hover { color: var(--color-primary); }
.ms-comments .comment-content {
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: 1.85;
}
.ms-comments .comment-content p { margin: 0 0 var(--space-2); }
.ms-comments .comment-content :last-child { margin-block-end: 0; }
.ms-comments .comment-awaiting-moderation {
  display: inline-block;
  margin-block-start: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--warning-fg, var(--color-text-muted));
}
.ms-comments .reply { margin-block-start: var(--space-3); }
.ms-comments .comment-reply-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-soft);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ms-comments .comment-reply-link:hover { border-color: var(--color-primary); color: var(--color-primary); }

.ms-comments .comment-navigation { margin-block: var(--space-6); display: flex; justify-content: center; gap: var(--space-3); }
.ms-comments .comment-navigation a {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.ms-comments__closed {
  margin: var(--space-6) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* ===== نموذج التعليق ===== */
.ms-comments .comment-respond {
  margin-block-start: var(--space-8);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.ms-comments .children .comment-respond {
  margin-block-start: var(--space-4);
  background: var(--color-bg-soft);
}
.ms-comment-form__title {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.ms-comment-form__title small { font-weight: 600; }
.ms-comment-form__title small a { color: var(--color-primary); text-decoration: none; }

.ms-comment-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.ms-comment-form__row { margin: 0; display: flex; flex-direction: column; grid-column: 1 / -1; }
@media (min-width: 560px) {
  .ms-comment-form__row--half { grid-column: span 1; }
}
.ms-comment-form__row label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-block-end: var(--space-2);
}
.ms-req { color: var(--color-error); }
.ms-field-note { margin-block-start: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); }

.ms-comments .ms-input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
}
.ms-comments .ms-textarea { min-height: 120px; padding: var(--space-3); resize: vertical; line-height: 1.7; }
.ms-comments .ms-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--primary-50);
}

/* صفّ موافقة الكوكيز + رسالة «مسجّل دخول» */
.ms-comments .comment-form-cookies-consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.ms-comments .comment-form-cookies-consent label { margin: 0; font-weight: 600; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ms-comments .logged-in-as {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.ms-comments .logged-in-as a { color: var(--color-primary); text-decoration: none; }

.ms-comment-form__submit { grid-column: 1 / -1; justify-self: start; min-width: 200px; }
.ms-comments .form-submit { margin: 0; grid-column: 1 / -1; }

/* =========================================================
   صفحة الكتالوكات (template-catalogs.php) — شبكة بطاقات الكتالوك.
   ========================================================= */
.ms-catalogs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 620px) { .ms-catalogs { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
@media (min-width: 980px) { .ms-catalogs { grid-template-columns: repeat(4, 1fr); } }

.ms-catalog-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  text-align: center;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.ms-catalog-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.ms-catalog-card__media {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: radial-gradient(circle at 50% 35%, var(--color-surface-2), var(--color-surface));
  overflow: hidden;
}
.ms-catalog-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .32));
  transition: transform var(--transition-base);
}
.ms-catalog-card:hover .ms-catalog-card__img { transform: scale(1.05); }
.ms-catalog-card__mark {
  font-weight: 900;
  font-size: clamp(30px, 9vw, 46px);
  color: var(--color-primary);
}
.ms-catalog-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ms-catalog-card__name {
  font-weight: 800;
  font-size: var(--font-size-base);
  color: var(--color-text);
}
.ms-catalog-card__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* =========================================================
   صفحة الصيانة (template-maintenance.php) — بطاقتا سوفت/هارد وير.
   ========================================================= */
.ms-maint-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 960px;
  margin-inline: auto;
}
@media (min-width: 820px) { .ms-maint-page { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }

.ms-maint-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.ms-maint-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* منطقة الصورة — مكان رفع صورة جمالية (يضعها العميل من المخصِّص). */
.ms-maint-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(56, 214, 255, .16), transparent 60%),
    linear-gradient(135deg, var(--navy), #0c2b66);
}
.ms-maint-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ms-maint-card__ph {
  font-size: 64px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .4));
  opacity: .9;
}

.ms-maint-card__body {
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  flex: 1;
}
.ms-maint-card__kicker {
  color: var(--color-primary);
  font-weight: 800;
  font-size: var(--font-size-sm);
  letter-spacing: 1px;
  margin-block-end: var(--space-2);
}
.ms-maint-card__title {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  letter-spacing: -.6px;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.ms-maint-card__desc {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: 1.8;
  margin: 0 0 var(--space-4);
}
.ms-maint-card__list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ms-maint-card__list li {
  position: relative;
  padding-inline-start: var(--space-6);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: 1.6;
}
.ms-maint-card__list li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 900;
}
.ms-maint-card__cta {
  margin-block-start: auto; /* يثبّت الزر أسفل البطاقة لمحاذاة موحّدة. */
}

/* =========================================================
   خريطة موقع المحل (مشتركة: صفحتا الصيانة وتواصل معنا) — عند ضبط الرابط.
   ========================================================= */
.ms-map {
  max-width: 960px;
  margin: var(--space-12) auto 0;
}
.ms-map__head { text-align: center; margin-block-end: var(--space-6); }
.ms-map__kicker {
  display: block;
  color: var(--color-primary);
  font-weight: 800;
  font-size: var(--font-size-sm);
  letter-spacing: 1px;
  margin-block-end: var(--space-2);
}
.ms-map__title {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  letter-spacing: -.6px;
  color: var(--color-text);
  margin: 0;
}
.ms-map__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}
.ms-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   صفحة تواصل معنا (template-contact.php) — FAQ + معلومات التواصل.
   ========================================================= */

/* ===== الأسئلة الشائعة (أكورديون أصلي details/summary) ===== */
.ms-faq {
  max-width: 760px;
  margin: 0 auto var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ms-faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.ms-faq__item[open] { border-color: var(--color-primary); }

.ms-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  font-weight: 800;
  font-size: var(--font-size-base);
  color: var(--color-text);
  list-style: none;
}
.ms-faq__q::-webkit-details-marker { display: none; }
.ms-faq__q:hover { color: var(--color-primary); }

.ms-faq__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  background: rgba(56, 214, 255, .12);
  color: var(--color-primary);
  transition: transform var(--transition-base);
}
.ms-faq__item[open] .ms-faq__icon { transform: rotate(180deg); }

.ms-faq__a {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: 1.85;
}
/* فقرات جواب المحرّر — ضبط الهوامش كي لا تتباعد عن حدود البطاقة. */
.ms-faq__a > :first-child { margin-block-start: 0; }
.ms-faq__a > :last-child { margin-block-end: 0; }
.ms-faq__a p { margin-block: 0 var(--space-3); }

/* ===== معلومات التواصل ===== */
.ms-contact {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(56, 214, 255, .14), transparent 55%),
    linear-gradient(120deg, var(--navy), #0c2b66);
  border: 1px solid var(--color-border);
}
.ms-contact__title {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  letter-spacing: -.6px;
  color: #fff;
  margin: 0;
}
.ms-contact__lead {
  color: #cfe0ff;
  font-size: var(--font-size-base);
  margin: var(--space-3) auto var(--space-8);
  max-width: 460px;
}
/* ثلاث بطاقات: اتصال · واتساب · بريد — كل منها بزرّ إجراء.
   مرنة ومتوسّطة: تتّزن مع بطاقة واحدة أو اثنتين أو ثلاث (قبل/بعد ضبط الأرقام). */
.ms-contact__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  max-width: 460px;          /* الهاتف: عمود واحد متوسّط */
  margin-inline: auto;
}
.ms-contact__card { flex: 1 1 100%; } /* الهاتف: بطاقة بعرض كامل */
@media (min-width: 720px) {
  .ms-contact__grid { max-width: none; }
  .ms-contact__card { flex: 0 1 240px; } /* الدسكتوب: حتى 3 بطاقات متوسّطة */
}

.ms-contact__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(8, 17, 56, .45);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.ms-contact__card:hover { border-color: var(--color-primary); transform: translateY(-4px); }

.ms-contact__ico {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-block-end: var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(56, 214, 255, .14);
  color: var(--color-primary);
}
.ms-contact__card--wa .ms-contact__ico { background: rgba(37, 211, 102, .16); color: #25d366; }

.ms-contact__label { color: #a9c2f0; font-size: var(--font-size-sm); font-weight: 700; }
.ms-contact__value {
  color: #fff;
  font-weight: 800;
  font-size: var(--font-size-sm);
  letter-spacing: .3px;
  word-break: break-word;
  direction: ltr;
  margin-block-end: var(--space-4);
}

/* الزر يلتصق بأسفل البطاقة ⇒ محاذاة موحّدة لكل الأزرار مهما اختلف طول النص.
   (margin-block-start:auto يتغلّب على margin-top الخاص بـ ms-btn--whatsapp.) */
.ms-contact__btn {
  width: 100%;
  margin-block-start: auto;
  margin-bottom: 0;
}

/* ===== شريط أوقات العمل (أسفل البطاقات) ===== */
.ms-contact__hours {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-8) auto 0;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: rgba(8, 17, 56, .45);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.ms-contact__hours-ico {
  display: grid;
  place-items: center;
  color: var(--color-primary);
}
.ms-contact__hours-label { color: #a9c2f0; font-weight: 700; }
.ms-contact__hours-value { color: #fff; font-weight: 800; }

/* =========================================================
   صفحة من نحن (template-about.php) — مقدّمة · قيم · أرقام · دعوة.
   ========================================================= */
.ms-about__intro {
  text-align: center;
  margin-block-end: var(--space-16);
}
.ms-about__intro p { text-wrap: pretty; }

/* ===== القيم ===== */
.ms-about__values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-block-end: var(--space-16);
}
@media (min-width: 820px) { .ms-about__values { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }

.ms-about__value {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), border-color var(--transition-base);
}
.ms-about__value:hover { transform: translateY(-4px); border-color: var(--color-primary); }
.ms-about__value-icon {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-block-end: var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(56, 214, 255, .12);
  font-size: 30px;
}
.ms-about__value-title { font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text); margin: 0 0 var(--space-2); }
.ms-about__value-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.7; margin: 0; }

/* ===== الأرقام ===== */
.ms-about__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
  margin-block-end: var(--space-16);
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--navy), #0c2b66);
  border: 1px solid var(--color-border);
}
@media (min-width: 760px) { .ms-about__stats { grid-template-columns: repeat(4, 1fr); } }
.ms-about__stat { text-align: center; }
.ms-about__stat-num {
  display: block;
  font-size: var(--font-size-3xl);
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1.1;
}
.ms-about__stat-label { color: #a9c2f0; font-size: var(--font-size-sm); font-weight: 600; }

/* ===== دعوة للتسوّق ===== */
.ms-about__cta {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.ms-about__cta-title {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  letter-spacing: -.6px;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.ms-about__cta-desc {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  line-height: 1.7;
  margin: 0 0 var(--space-6);
}
.ms-about__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.ms-about__cta-actions .ms-btn { height: 52px; padding-inline: 28px; }