/* =====================================================================
   وهج العود — مكتبة المكوّنات
   ⚠️ لا قيمة لون/مسافة/استدارة مكتوبة نصاً هنا. كلها `var(--whj-*)`.
   ⚠️ RTL أصيل: نستخدم الخصائص المنطقية (`inline-start`/`inline-end`)
      لا `left`/`right`، فيعمل التخطيط في الاتجاهين بلا ملف مقلوب منفصل.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--whj-bg);
  color: var(--whj-text);
  font-family: var(--whj-font-ui);
  font-size: var(--whj-text-base);
  line-height: var(--whj-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.whj-container {
  max-inline-size: var(--whj-container);
  margin-inline: auto;
  padding-inline: var(--whj-space-5);
}

/* ── الطباعة ──────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--whj-font-ar);
  line-height: var(--whj-leading-tight);
  color: var(--whj-text);
  margin: 0 0 var(--whj-space-3);
  font-weight: 700;
}
h1 { font-size: var(--whj-text-3xl); }
h2 { font-size: var(--whj-text-2xl); }
h3 { font-size: var(--whj-text-xl); }

.whj-eyebrow {
  font-family: var(--whj-font-en);
  font-size: var(--whj-text-xs);
  letter-spacing: var(--whj-tracking-en);
  text-transform: uppercase;
  color: var(--whj-accent);
}

/* خط ذهبي تحت العنوان — توقيع بصري متكرر للعلامة */
.whj-rule {
  inline-size: 64px; block-size: 2px;
  background: linear-gradient(90deg, var(--whj-accent), transparent);
  border: 0; margin: var(--whj-space-3) 0 var(--whj-space-5);
}
[dir="rtl"] .whj-rule {
  background: linear-gradient(270deg, var(--whj-accent), transparent);
}

/* ── الأزرار ──────────────────────────────────────────────────────── */
.whj-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--whj-space-2);
  padding: var(--whj-space-3) var(--whj-space-6);
  border: 1px solid transparent;
  border-radius: var(--whj-radius-pill);
  font-family: inherit; font-size: var(--whj-text-sm); font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: transform var(--whj-fast) var(--whj-ease),
              box-shadow var(--whj-normal) var(--whj-ease),
              background-color var(--whj-fast) var(--whj-ease);
  /* ⚠️ 44px حد أدنى لمساحة اللمس — توصية WCAG 2.5.5 */
  min-block-size: 44px;
}
.whj-btn--primary {
  background: var(--whj-primary); color: var(--whj-primary-ink);
  box-shadow: var(--whj-shadow-sm);
}
.whj-btn--primary:hover {
  background: var(--whj-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--whj-shadow), var(--whj-glow);   /* وهج الجمر عند التفاعل */
}
.whj-btn--ghost {
  background: transparent; color: var(--whj-primary);
  border-color: var(--whj-border-strong);
}
.whj-btn--ghost:hover { background: var(--whj-surface-alt); }
.whj-btn:active { transform: translateY(0); }
.whj-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ⚠️ حلقة التركيز **لا تُزال أبداً** — إزالتها تُعطّل التنقل بلوحة المفاتيح.
   نستخدم `:focus-visible` فتظهر للوحة المفاتيح لا للفأرة. */
.whj-btn:focus-visible,
.whj-input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--whj-accent);
  outline-offset: 2px;
}

/* ── الحقول ──────────────────────────────────────────────────────── */
.whj-field { display: block; margin-block-end: var(--whj-space-4); }
.whj-label {
  display: block; margin-block-end: var(--whj-space-2);
  font-size: var(--whj-text-sm); font-weight: 600; color: var(--whj-text);
}
.whj-input {
  inline-size: 100%;
  padding: var(--whj-space-3) var(--whj-space-4);
  min-block-size: 44px;
  background: var(--whj-surface);
  border: 1px solid var(--whj-border);
  border-radius: var(--whj-radius-sm);
  color: var(--whj-text); font-family: inherit; font-size: var(--whj-text-base);
  transition: border-color var(--whj-fast) var(--whj-ease),
              box-shadow var(--whj-fast) var(--whj-ease);
}
.whj-input:focus {
  border-color: var(--whj-accent);
  box-shadow: 0 0 0 3px var(--whj-accent-soft);
  outline: none;
}
.whj-input[aria-invalid="true"] { border-color: var(--whj-danger); }
.whj-hint  { font-size: var(--whj-text-xs); color: var(--whj-text-muted); margin-block-start: var(--whj-space-1); }
.whj-error { font-size: var(--whj-text-xs); color: var(--whj-danger); margin-block-start: var(--whj-space-1); }

/* ── البطاقات ────────────────────────────────────────────────────── */
.whj-card {
  background: var(--whj-surface);
  border: 1px solid var(--whj-border);
  border-radius: var(--whj-radius);
  overflow: hidden;
  transition: transform var(--whj-normal) var(--whj-ease-out),
              box-shadow var(--whj-normal) var(--whj-ease-out);
}
.whj-card:hover { transform: translateY(-3px); box-shadow: var(--whj-shadow-lg); }

.whj-product-card__media {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--whj-surface-alt); overflow: hidden;
}
.whj-product-card__media img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform var(--whj-slow) var(--whj-ease-out);
}
.whj-card:hover .whj-product-card__media img { transform: scale(1.05); }

/* وهج الجمر خلف صورة المنتج عند التحويم — خفيف ولا يعيق القراءة */
.whj-product-card__media::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 85%,
              color-mix(in srgb, var(--whj-accent) 22%, transparent), transparent 62%);
  opacity: 0; transition: opacity var(--whj-slow) var(--whj-ease);
  pointer-events: none;
}
.whj-card:hover .whj-product-card__media::after { opacity: 1; }

.whj-product-card__body  { padding: var(--whj-space-4); }
.whj-product-card__title {
  font-family: var(--whj-font-ar); font-size: var(--whj-text-base);
  font-weight: 700; margin: 0 0 var(--whj-space-2);
  /* سطران كحد أقصى — يُبقي شبكة البطاقات متساوية الارتفاع */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.whj-price { font-weight: 800; color: var(--whj-primary); font-size: var(--whj-text-lg); }
.whj-price__old {
  color: var(--whj-text-muted); text-decoration: line-through;
  font-size: var(--whj-text-sm); font-weight: 400; margin-inline-start: var(--whj-space-2);
}

/* ── الشارات ─────────────────────────────────────────────────────── */
.whj-badge {
  display: inline-block; padding: 2px var(--whj-space-3);
  border-radius: var(--whj-radius-pill);
  font-size: var(--whj-text-xs); font-weight: 700;
  background: var(--whj-accent-soft); color: var(--whj-oud-800);
}
.whj-badge--danger  { background: color-mix(in srgb, var(--whj-danger) 14%, var(--whj-tint-base)); color: var(--whj-danger); }
.whj-badge--success { background: color-mix(in srgb, var(--whj-success) 16%, var(--whj-tint-base)); color: var(--whj-success); }

/* ── الجداول ─────────────────────────────────────────────────────── */
.whj-table { inline-size: 100%; border-collapse: collapse; font-size: var(--whj-text-sm); }
.whj-table th {
  background: var(--whj-primary); color: var(--whj-primary-ink);
  padding: var(--whj-space-3) var(--whj-space-4);
  text-align: start; font-weight: 700; white-space: nowrap;
}
.whj-table td {
  padding: var(--whj-space-3) var(--whj-space-4);
  border-block-end: 1px solid var(--whj-border);
}
.whj-table tbody tr:nth-child(even) { background: var(--whj-surface-alt); }
/* ⚠️ الجداول على الجوال: تمرير أفقي بدل ضغط الأعمدة حتى تُقرأ الأرقام */
.whj-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── التصفّح ─────────────────────────────────────────────────────── */
/* ⚠️ التعريف الكامل في آخر الملف تحت `.whj-pagination__link` — أُزيلت النسخة
   القديمة هنا لأنها كانت تُنافسه على نفس الأسماء بقواعد مختلفة (هدف لمس 40px
   مقابل 44px)، وهو بالضبط نوع الازدواج الذي يُنتج فروقاً بصرية غير مفسَّرة. */

/* ── الحالات الفارغة ─────────────────────────────────────────────── */
.whj-empty { text-align: center; padding: var(--whj-space-8) var(--whj-space-5); color: var(--whj-text-muted); }
.whj-empty__title { font-family: var(--whj-font-ar); color: var(--whj-text); margin-block-end: var(--whj-space-2); }

/* ── الهياكل العظمية أثناء التحميل ───────────────────────────────── */
.whj-skeleton {
  background: linear-gradient(90deg, var(--whj-sand-200) 25%,
              var(--whj-sand-100) 37%, var(--whj-sand-200) 63%);
  background-size: 400% 100%;
  animation: whj-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--whj-radius-sm);
}
@keyframes whj-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── ظهور تدريجي عند التمرير ─────────────────────────────────────── */
.whj-reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--whj-slow) var(--whj-ease-out),
              transform var(--whj-slow) var(--whj-ease-out);
}
.whj-reveal.is-visible { opacity: 1; transform: none; }

/* ⚠️ احتياط أساسي: بلا JS يبقى المحتوى **مرئياً** لا مخفياً للأبد. */
.no-js .whj-reveal { opacity: 1; transform: none; }

/* ── تجاوز إلى المحتوى (لوحة المفاتيح وقارئ الشاشة) ──────────────── */
.whj-skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--whj-primary); color: var(--whj-primary-ink);
  padding: var(--whj-space-3) var(--whj-space-5); z-index: var(--whj-z-modal);
}
.whj-skip:focus { inset-inline-start: 0; }

/* يُخفي بصرياً ويُبقي النص لقارئ الشاشة */
.whj-sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── الشبكة ──────────────────────────────────────────────────────── */
.whj-grid { display: grid; gap: var(--whj-space-5); }
.whj-grid--products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ── الجوال أولاً ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --whj-text-3xl: 1.9531rem; --whj-text-2xl: 1.5625rem; }
  .whj-container { padding-inline: var(--whj-space-4); }
  .whj-grid--products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--whj-space-3); }
}

/* ── الطباعة الورقية ─────────────────────────────────────────────── */
@media print {
  .whj-no-print { display: none !important; }
  body { background: var(--whj-surface); }
  .whj-card { box-shadow: none; border-color: var(--whj-border); }
}

/* =====================================================================
   التصفّح — مكوّن واحد لكل قائمة (§15 · §19)
   ⚠️ أهداف اللمس ≥44px: المستخدم على الجوال لا يستطيع إصابة رابط 24px.
   ⚠️ لا لون مكتوب نصاً — كله من الرموز الدلالية.
   ===================================================================== */
.whj-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-block: var(--whj-space-6, 2rem);
}

.whj-pagination__status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--whj-text-muted);
}

.whj-pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.whj-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 0.85rem;
  border: 1px solid var(--whj-border);
  border-radius: calc(var(--whj-radius) / 2);
  background: var(--whj-surface);
  color: var(--whj-text);
  text-decoration: none;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  transition: background var(--whj-fast), border-color var(--whj-fast), color var(--whj-fast);
}

.whj-pagination__link:hover:not(.is-current):not(.is-disabled) {
  border-color: var(--whj-primary);
  color: var(--whj-primary);
}

/* ⚠️ إبراز التركيز إلزامي — بدونه لا يعرف مستخدم لوحة المفاتيح موضعه. */
.whj-pagination__link:focus-visible {
  outline: 2px solid var(--whj-accent);
  outline-offset: 2px;
}

.whj-pagination__link.is-current {
  background: var(--whj-primary);
  border-color: var(--whj-primary);
  color: var(--whj-primary-ink);
  font-weight: 700;
}

/* ⚠️ العنصر المعطَّل ليس رابطاً أصلاً (span) — فلا يستقبل تركيزاً ولا نقرة. */
.whj-pagination__link.is-disabled {
  opacity: 0.45;
  cursor: default;
}

.whj-pagination__gap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.35rem;
  color: var(--whj-text-muted);
}

@media (max-width: 480px) {
  .whj-pagination__link { min-width: 40px; padding-inline: 0.6rem; }
}

/* =====================================================================
   نظام المكوّنات — الدفعة الثانية  (§19)
   =====================================================================
   ⚠️⚠️ الغرض: ألا يخترع 79 قالباً أزرارَه وبطاقاته ونماذجه. كل نمط هنا
      يُبنى من الرموز الدلالية، فيتبع الثيم النشط تلقائياً في المتجر
      والإدارة والبريد والـPDF بلا لون مكتوب نصاً في أي قالب.

   ⚠️ الحركة كلها خفيفة ومحصورة في `transform` و`opacity` — الخصائص التي
      يُحرّكها المتصفح على المُركِّب بلا إعادة تخطيط. لا حركة على `width`
      ولا `top` ولا `box-shadow` في حلقة مستمرة.
   ===================================================================== */

/* ── الأزرار: تنويعات وأحجام ─────────────────────────────────────── */
.whj-btn--accent {
  background: var(--whj-accent);
  color: var(--whj-oud-900, var(--whj-text));
  border-color: var(--whj-accent);
}
.whj-btn--danger {
  background: var(--whj-danger);
  color: var(--whj-primary-ink);
  border-color: var(--whj-danger);
}
.whj-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--whj-text-muted);
}
.whj-btn--quiet:hover { color: var(--whj-primary); background: var(--whj-surface-alt); }

.whj-btn--sm { padding: 0.4rem 0.8rem; font-size: var(--whj-text-xs); min-block-size: 36px; }
.whj-btn--lg { padding: 0.85rem 1.6rem; font-size: var(--whj-text-lg); }
.whj-btn--block { inline-size: 100%; justify-content: center; }

/* ⚠️ حالة الانتظار: نمنع النقر المزدوج على زر دفع/طلب — مصدر شائع لطلب مكرر. */
.whj-btn[aria-busy="true"] { pointer-events: none; opacity: 0.7; }
.whj-btn[aria-busy="true"]::after {
  content: '';
  inline-size: 0.9em; block-size: 0.9em;
  margin-inline-start: 0.5em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: whj-spin 0.7s linear infinite;
}
@keyframes whj-spin { to { transform: rotate(360deg); } }

/* ── حقول النموذج: قائمة منسدلة ونص متعدد الأسطر ─────────────────── */
.whj-select {
  inline-size: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--whj-border);
  border-radius: var(--whj-radius-sm);
  background: var(--whj-surface);
  color: var(--whj-text);
  font: inherit;
  /* ⚠️ السهم مرسوم بـSVG مضمَّن لا صورة خارجية — لا طلب شبكة إضافي. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.75rem center;
  background-size: 12px;
  padding-inline-start: 0.75rem;
  padding-inline-end: 2rem;
  appearance: none;
}
.whj-textarea {
  inline-size: 100%;
  min-block-size: 7rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--whj-border);
  border-radius: var(--whj-radius-sm);
  background: var(--whj-surface);
  color: var(--whj-text);
  font: inherit;
  resize: vertical;
}
.whj-select:focus-visible,
.whj-textarea:focus-visible {
  outline: 2px solid var(--whj-accent);
  outline-offset: 2px;
}

/* ⚠️ الحقل المطلوب يُعلَّم بصرياً **وبرمجياً** — النجمة وحدها لا يقرؤها أحد. */
.whj-label[data-required]::after {
  content: ' *';
  color: var(--whj-danger);
}

/* ── شارات الحالة ────────────────────────────────────────────────── */
.whj-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: var(--whj-text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.whj-status::before {
  content: '';
  inline-size: 0.45rem; block-size: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}
/* ⚠️ اللون **ليس** حامل المعنى الوحيد: النقطة والنص يحملانه أيضاً — شرط
   وصول لمن لا يميّز الألوان. */
.whj-status--pending  { background: color-mix(in srgb, var(--whj-accent) 16%, var(--whj-tint-base));  color: var(--whj-oud-700); }
.whj-status--active   { background: color-mix(in srgb, var(--whj-success) 15%, var(--whj-tint-base)); color: var(--whj-success); }
.whj-status--danger   { background: color-mix(in srgb, var(--whj-danger) 14%, var(--whj-tint-base));  color: var(--whj-danger); }
.whj-status--neutral  { background: var(--whj-surface-alt); color: var(--whj-text-muted); }

/* ── التنبيهات ───────────────────────────────────────────────────── */
.whj-alert {
  display: flex;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border-radius: var(--whj-radius-sm);
  border-inline-start: 3px solid var(--whj-primary);
  background: var(--whj-surface-alt);
  color: var(--whj-text);
  font-size: var(--whj-text-sm);
  line-height: 1.8;
}
.whj-alert--success { border-inline-start-color: var(--whj-success); }
.whj-alert--danger  { border-inline-start-color: var(--whj-danger); }
.whj-alert--warning { border-inline-start-color: var(--whj-accent); }
.whj-alert__title { font-weight: 700; margin: 0 0 0.2rem; }
.whj-alert p { margin: 0; }

/* ── فتات المسار ─────────────────────────────────────────────────── */
.whj-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--whj-text-xs);
  color: var(--whj-text-muted);
  margin-block: var(--whj-space-4);
  padding: 0;
  list-style: none;
}
.whj-breadcrumbs a { color: inherit; text-decoration: none; }
.whj-breadcrumbs a:hover { color: var(--whj-primary); text-decoration: underline; }
.whj-breadcrumbs li + li::before { content: '‹'; margin-inline-end: 0.35rem; opacity: 0.6; }
.whj-breadcrumbs [aria-current="page"] { color: var(--whj-text); font-weight: 600; }

/* ── التبويبات ───────────────────────────────────────────────────── */
.whj-tabs {
  display: flex;
  gap: 0.25rem;
  border-block-end: 1px solid var(--whj-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.whj-tabs::-webkit-scrollbar { display: none; }
.whj-tab {
  padding: 0.6rem 1rem;
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--whj-text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.whj-tab[aria-selected="true"],
.whj-tab.is-active {
  color: var(--whj-primary);
  border-block-end-color: var(--whj-accent);
}
.whj-tab:focus-visible { outline: 2px solid var(--whj-accent); outline-offset: -2px; }

/* ── شريط الفلاتر ────────────────────────────────────────────────── */
.whj-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem;
  padding: 1rem;
  border: 1px solid var(--whj-border);
  border-radius: var(--whj-radius);
  background: var(--whj-surface);
  margin-block-end: var(--whj-space-5);
}
.whj-filters__field { display: flex; flex-direction: column; gap: 0.3rem; min-inline-size: 10rem; flex: 1 1 10rem; }
.whj-filters__actions { display: flex; gap: 0.5rem; }

.whj-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--whj-border);
  border-radius: 999px;
  background: var(--whj-surface);
  color: var(--whj-text);
  font-size: var(--whj-text-xs);
  text-decoration: none;
  min-block-size: 36px;
}
.whj-chip[aria-pressed="true"], .whj-chip.is-active {
  background: var(--whj-primary);
  border-color: var(--whj-primary);
  color: var(--whj-primary-ink);
}

/* ── بطاقة مؤشّر (لوحة الإدارة) ──────────────────────────────────── */
.whj-metric {
  padding: 1rem 1.1rem;
  border: var(--whj-card-border, 1px solid var(--whj-border));
  border-radius: var(--whj-radius);
  background: var(--whj-surface);
  box-shadow: var(--whj-card-shadow, none);
}
.whj-metric__label { font-size: var(--whj-text-xs); color: var(--whj-text-muted); margin: 0 0 0.35rem; }
.whj-metric__value {
  font-size: 1.6rem; font-weight: 800; color: var(--whj-text); margin: 0;
  font-variant-numeric: tabular-nums;   /* ⚠️ أرقام ثابتة العرض: لا يقفز التخطيط عند التحديث */
}
.whj-metric__delta { font-size: var(--whj-text-xs); margin: 0.3rem 0 0; }
.whj-metric__delta--up { color: var(--whj-success); }
.whj-metric__delta--down { color: var(--whj-danger); }

.whj-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
}

/* ── النافذة المنبثقة ────────────────────────────────────────────── */
/* ⚠️ مبنية على <dialog> الأصلي: يتكفّل المتصفح بحبس التركيز ومفتاح Escape
   وطبقة الحجب — تنفيذ يدوي لذلك مصدر دائم لأخطاء وصول. */
.whj-modal {
  border: 0;
  padding: 0;
  max-inline-size: min(32rem, 92vw);
  border-radius: var(--whj-radius);
  background: var(--whj-surface);
  color: var(--whj-text);
  box-shadow: var(--whj-shadow-lg);
}
.whj-modal::backdrop { background: var(--whj-scrim); }
.whj-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.1rem; border-block-end: 1px solid var(--whj-border);
}
.whj-modal__title { margin: 0; font-size: var(--whj-text-lg); }
.whj-modal__body { padding: 1.1rem; }
.whj-modal__foot {
  display: flex; justify-content: flex-start; gap: 0.5rem;
  padding: 0.9rem 1.1rem; border-block-start: 1px solid var(--whj-border);
}

/* ── الإشعارات العابرة ───────────────────────────────────────────── */
.whj-toasts {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  z-index: var(--whj-z-toast);
  pointer-events: none;
}
.whj-toast {
  pointer-events: auto;
  padding: 0.75rem 1rem;
  border-radius: var(--whj-radius-sm);
  background: var(--whj-oud-900);
  color: var(--whj-sand-50);
  font-size: var(--whj-text-sm);
  box-shadow: var(--whj-shadow-lg);
  animation: whj-toast-in var(--whj-normal) var(--whj-ease);
}
@keyframes whj-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ── الحالات الفارغة: نسخة أغنى ──────────────────────────────────── */
.whj-empty__icon { font-size: 2.2rem; opacity: 0.5; margin-block-end: 0.5rem; }
.whj-empty__action { margin-block-start: var(--whj-space-4); }

/* ── هياكل التحميل الجاهزة ───────────────────────────────────────── */
.whj-skeleton--text { block-size: 0.8rem; margin-block-end: 0.5rem; }
.whj-skeleton--title { block-size: 1.2rem; inline-size: 60%; margin-block-end: 0.7rem; }
.whj-skeleton--media { aspect-ratio: 1 / 1; inline-size: 100%; }

/* ⚠️ من يطلب تقليل الحركة لا يرى وميضاً مستمراً — الدوّار والهيكل يتجمّدان. */
@media (prefers-reduced-motion: reduce) {
  .whj-skeleton { animation: none; }
  .whj-btn[aria-busy="true"]::after { animation: none; }
  .whj-toast { animation: none; }
}

/* =====================================================================
   بطاقة المنتج — هوية وهج العود
   =====================================================================
   ⚠️ البطاقة السابقة ورثت شكل المشروع السابق حرفياً، بأيقونة بديلة لا
      علاقة لها بالعطور. أُعيد بناؤها: صورة مربّعة تليق بالقوارير والمباخر، ووهج جمر عند
      التحويم، وسعر بارز، وأزرار بأهداف لمس ≥44 بكسل.
   ⚠️ كل قيمة من الرموز — لا لون ولا مسافة مكتوبة نصاً.
   ===================================================================== */

.whj-product {
  display: flex;
  flex-direction: column;
  background: var(--whj-surface);
  border: var(--whj-card-border, 1px solid var(--whj-border));
  box-shadow: var(--whj-card-shadow, none);
  border-radius: var(--whj-radius);
  overflow: hidden;
  position: relative;
  transition: transform var(--whj-normal, 220ms), box-shadow var(--whj-normal, 220ms);
}

/* ⚠️ الحركة على `transform` وحدها — لا تُعيد تخطيط الصفحة، فلا تكلّف أداءً. */
@media (hover: hover) {
  .whj-product:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgb(var(--whj-shadow-tint, 36 26 18) / 0.16);
  }
  .whj-product:hover .whj-product__img { transform: scale(1.04); }
}

.whj-product__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ⚠️ `:focus-within` على البطاقة: التنقّل بلوحة المفاتيح يجب أن يُظهر الحدود
   بوضوح، لا أن يعتمد على التحويم وحده. */
.whj-product:focus-within {
  outline: 2px solid var(--whj-accent);
  outline-offset: 2px;
}

.whj-product__media {
  position: relative;
  /* ⚠️ النسبة من الرموز — انظر `--whj-product-ratio`. */
  aspect-ratio: var(--whj-product-ratio, 1 / 1);
  background: var(--whj-surface-alt, var(--whj-bg));
  overflow: hidden;
}

.whj-product__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;   /* فوق البديل ما دامت سليمة */
  z-index: 1;
  transition: transform var(--whj-slow, 420ms);
}

/* ⚠️⚠️ **العيب الذي عالجته هذه الطبقة.**
   البديل كان يُرسم **فقط** عند خلوّ `images_json`. أما الحالة الشائعة فعلاً —
   مسار موجود في القاعدة وملف غائب عن `public/uploads/` — فكانت تُنتج
   `<img>` مكسورة: مستطيل شاحب فارغ بارتفاع الصورة، أو أيقونة المتصفح
   المكسورة. أي أن «البديل موجود» كان صحيحاً في الحالة التي لا تقع،
   وغائباً في الحالة التي تقع.

   الآن: البديل **مرسوم دائماً تحت الصورة**. الصورة السليمة تغطّيه، والمكسورة
   تُخفى فيظهر هو. لا وميض، ولا فرق في الارتفاع، ولا سمة `onerror` مضمَّنة
   (ممنوعة بسياسة CSP) — الإخفاء يقع من `public/js/whj-media.js`. */
.whj-product__img.is-broken { display: none; }

/* البديل عند غياب الصورة — رمز محايد من هوية المتجر. */
.whj-product__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--whj-text-muted);
  /* لمسة دخانية خفيفة: مستطيل رمادي فارغ يبدو عطلاً، والتدرّج يبدو مقصوداً. */
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb, var(--whj-accent) 10%, transparent), transparent 70%),
    var(--whj-surface-alt, var(--whj-bg));
}

.whj-product__placeholder svg { width: 38%; height: 38%; opacity: 0.35; }

/* ⚠️ وهج الجمر: تدرّج خفيف أسفل الصورة يربط البطاقة بهوية العود بلا ثقل. */
.whj-product__media::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(to top,
    rgb(var(--whj-shadow-tint, 36 26 18) / 0.16), transparent);
  pointer-events: none;
}

.whj-product__badges {
  position: absolute;
  inset-block-start: var(--whj-space-2, 0.5rem);
  inset-inline-start: var(--whj-space-2, 0.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 1;
}

.whj-product__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--whj-space-3, 0.75rem);
  flex: 1;
}

.whj-product__title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--whj-text);
  /* سطران كحدّ أقصى — يمنع اختلاف ارتفاع البطاقات في الشبكة */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.whj-product__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-start: auto;
}

.whj-product__price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--whj-primary);
}

.whj-product__price-old {
  font-size: 0.85rem;
  color: var(--whj-text-muted);
  text-decoration: line-through;
}

.whj-product__ask {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--whj-text-muted);
}

.whj-product__colors { display: flex; gap: 0.25rem; }

.whj-product__color {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 1px solid var(--whj-border);
}

.whj-product__cta {
  display: flex;
  gap: 0.4rem;
  padding: 0 var(--whj-space-3, 0.75rem) var(--whj-space-3, 0.75rem);
}

/* ⚠️ هدف لمس ≥44 بكسل — معيار وصولية لا تفضيل تصميمي. */
.whj-product__cta > * { min-height: 44px; flex: 1; }

/* ── شبكة المنتجات ────────────────────────────────────────────────── */
/*
  ⚠️⚠️ **§22 — لماذا `auto-fit` بسقف عرض و`justify-content: center`؟**

  الصيغة السابقة `repeat(auto-fill, minmax(200px, 1fr))` فيها عيبان يظهران
  معاً على شاشة عريضة:

    • `auto-fill` **يُبقي المسارات الفارغة قائمة** — بخلاف `auto-fit` الذي
      يطويها. فأربعة منتجات في تسعة مسارات تشغل أربعة وتترك خمسة فارغة.
    • `1fr` بلا سقف يجعل المسار يتمدّد بلا حدّ، فبطاقتان على شاشة عريضة
      تصيران بحجم لوحة إعلانات.

  النتيجة مجتمعة: بطاقات ملتصقة بحافة وفراغ واسع مقابلها.

  الآن: `auto-fit` يطوي الفارغ، والسقف يمنع التمدّد المشوَّه،
  و`justify-content: center` يوزّع الفائض على **الجانبين** لا على جانب واحد.
  فصفّ ناقص يبقى موسَّطاً تحت الصفوف الكاملة بدل أن ينزاح.
*/
.whj-products {
  display: grid;
  gap: var(--whj-space-5, 1.5rem) var(--whj-space-4, 1rem);
  grid-template-columns:
    repeat(auto-fit, minmax(var(--whj-product-min, 200px), var(--whj-product-max, 272px)));
  justify-content: center;
  /* ⚠️ `stretch` صريح: بطاقة أقصر من جارتها كانت تترك فجوة أسفلها في بعض
     المتصفحات عند اختلاف `align-items` الموروث. */
  align-items: stretch;
}

/* ⚠️ عمودان ثابتان على الجوال: `minmax` بسقف يُنتج عموداً واحداً موسَّطاً
   بنصف الشاشة — أسوأ من الشبكة التي نُصلحها. */
@media (max-width: 620px) {
  .whj-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
}

/*
  ⚠️ قشرة الصفحة الموسَّطة — تستعملها الصفحات التي تضع محتواها مباشرة في
  `<main>` بلا أقسام تلفّ نفسها. الحشو العمودي هنا لا في كل صفحة على حدة،
  وإلا عاد الاختلاف الذي نُصلحه.
*/
.whj-shell {
  max-inline-size: var(--whj-container);
  margin-inline: auto;
  padding-inline: var(--whj-space-5);
  padding-block: var(--whj-space-6) var(--whj-space-7);
}

@media (max-width: 620px) {
  .whj-shell { padding-inline: var(--whj-space-4); padding-block: var(--whj-space-5); }
}

.whj-products > .whj-product { height: 100%; }

@media (max-width: 560px) {
  /* ⚠️ عمودان على الجوال لا عمود واحد: التمرير اللانهائي بعمود واحد يُرهق
     التصفّح في متجر كتالوجه بصري. */
  .whj-products { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .whj-product__body { padding: 0.55rem; gap: 0.3rem; }
  .whj-product__title { font-size: 0.85rem; }
  .whj-product__cta { padding: 0 0.55rem 0.55rem; }
}

/* ── قسم في الصفحة ───────────────────────────────────────────────── */
.whj-section { padding-block: var(--whj-space-7, 2.5rem); }

.whj-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block-end: var(--whj-space-5, 1.25rem);
}

.whj-section__title {
  margin: 0;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 800;
  color: var(--whj-text);
}

.whj-section__title::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-block-start: 0.45rem;
  border-radius: 2px;
  background: linear-gradient(to left, var(--whj-accent), transparent);
}

.whj-section__more {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--whj-primary);
  text-decoration: none;
}

.whj-section__more:hover { text-decoration: underline; }

/* ── الواجهة الرئيسية · القصة · النشرة ───────────────────────────── */

.whj-hero { position: relative; }

/* ⚠️ وهج خفيف أسفل الواجهة يربطها بما بعدها بلا خط فاصل قاسٍ. */
.whj-hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(to left, transparent, var(--whj-accent), transparent);
  opacity: 0.7;
}

.whj-story {
  background:
    radial-gradient(120% 100% at 100% 0%,
      color-mix(in srgb, var(--whj-accent) 14%, transparent), transparent 60%),
    var(--whj-surface-alt, var(--whj-bg));
  border-block: 1px solid var(--whj-border);
}

.whj-story__inner { max-width: 46rem; }

.whj-story__text {
  margin-block: 0.75rem 1.25rem;
  line-height: 2;
  color: var(--whj-text-muted);
}

.whj-newsletter {
  background: var(--whj-oud-900);
  color: var(--whj-sand-100);
}

.whj-newsletter .whj-section__title { color: var(--whj-sand-50); }
.whj-newsletter .whj-eyebrow { color: var(--whj-accent); }

.whj-newsletter__inner {
  display: grid;
  gap: 1rem;
  align-items: center;
  grid-template-columns: 1fr auto;
}

.whj-newsletter__form { display: flex; gap: 0.5rem; min-width: min(24rem, 100%); }
.whj-newsletter__form .whj-input { min-height: 44px; }
.whj-newsletter__form .whj-btn { min-height: 44px; white-space: nowrap; }

@media (max-width: 720px) {
  .whj-newsletter__inner { grid-template-columns: 1fr; }
  .whj-newsletter__form { flex-direction: column; }
}

/* ── السلة ───────────────────────────────────────────────────────── */
.whj-cart {
  display: grid;
  gap: var(--whj-space-5, 1.25rem);
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
}

.whj-cart__summary {
  position: sticky;
  /* ⚠️ يلتصق أسفل الترويسة لا أعلى النافذة — وإلا اختفى تحتها. */
  top: 5.5rem;
  background: var(--whj-surface);
  border: 1px solid var(--whj-border);
  border-radius: var(--whj-radius);
  padding: var(--whj-space-4, 1rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.whj-cart__summary-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--whj-text);
}

.whj-cart__row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--whj-text-muted);
}

.whj-cart__row--total {
  border-block-start: 1px solid var(--whj-border);
  padding-block-start: 0.6rem;
  margin-block-start: 0.2rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--whj-text);
}

.whj-cart__summary .whj-btn { margin-block-start: 0.6rem; }

@media (max-width: 860px) {
  .whj-cart { grid-template-columns: 1fr; }
  /* ⚠️ على الجوال الملخّص يلتصق **أسفل** الشاشة: زر الدفع يجب أن يبقى
     في متناول الإبهام بلا تمرير إلى آخر قائمة طويلة. */
  .whj-cart__summary {
    position: sticky;
    top: auto;
    bottom: 0;
    border-radius: var(--whj-radius) var(--whj-radius) 0 0;
    box-shadow: 0 -8px 24px rgb(var(--whj-shadow-tint, 36 26 18) / 0.14);
  }
}

/* ── رقاقة الفلتر النشطة ─────────────────────────────────────────── */
.whj-chip.is-active {
  background: var(--whj-primary);
  color: var(--whj-primary-ink);
  border-color: var(--whj-primary);
}

/* ⚠️ §2 — تخطيط الصفحة كامل العرض. الأقسام تتولّى حدودها بنفسها عبر
   `.whj-container`، فلا تُحصر الواجهة والأقسام الملوّنة داخل حاوية ضيّقة. */
.whj-page { display: block; width: 100%; }

/* ⚠️ §3 — البديل الموحَّد عند غياب الصورة. يتبع الثيم عبر `currentColor`. */
.whj-media-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--whj-text-muted);
}

.whj-icon-bottle { width: 34%; max-width: 5rem; height: auto; opacity: 0.4; }

/* =====================================================================
   صفحة التحقق من الأصالة — نتيجة يراها العميل وهو يحمل المنتج
   =====================================================================
   ⚠️ الأولوية هنا **وضوح الحكم** لا الزخرفة: العميل يريد جواباً في ثانية.
      لذلك البطاقة كبيرة، والنتيجة أول ما يُقرأ، واللون مساند لا حامل وحيد
      للمعنى (رمز + عنوان نصّي مع كل حالة — لا يُعتمد على اللون).
   ===================================================================== */

.whj-verify {
  max-width: 34rem;
  margin-inline: auto;
  padding-block: var(--whj-space-7, 2.5rem);
  text-align: center;
}

.whj-verify__brand { margin-block-end: var(--whj-space-5, 1.25rem); }

.whj-verify__brand-name {
  margin: 0.2rem 0 0;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 800;
  color: var(--whj-primary);
}

.whj-verify__card {
  background: var(--whj-surface);
  border: 1px solid var(--whj-border);
  border-radius: var(--whj-radius);
  padding: var(--whj-space-6, 1.75rem) var(--whj-space-5, 1.25rem);
  box-shadow: var(--whj-card-shadow, none);
}

/* ⚠️ شريط علوي ملوّن **إضافة** للرمز والعنوان، لا بديل عنهما. */
.whj-verify__card { border-block-start-width: 4px; }
.whj-verify__card--ok      { border-block-start-color: var(--whj-success); }
.whj-verify__card--warn    { border-block-start-color: var(--whj-accent); }
.whj-verify__card--bad     { border-block-start-color: var(--whj-danger); }
.whj-verify__card--neutral { border-block-start-color: var(--whj-primary); }

.whj-verify__badge {
  width: 3.4rem;
  height: 3.4rem;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--whj-primary-ink);
  background: var(--whj-primary);
}

.whj-verify__card--ok   .whj-verify__badge { background: var(--whj-success); }
.whj-verify__card--warn .whj-verify__badge { background: var(--whj-accent); color: var(--whj-oud-900); }
.whj-verify__card--bad  .whj-verify__badge { background: var(--whj-danger); }

.whj-verify__title {
  margin: var(--whj-space-4, 1rem) 0 0.4rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--whj-text);
}

.whj-verify__note {
  margin: 0;
  line-height: 2;
  color: var(--whj-text-muted);
}

.whj-verify__facts {
  margin-block: var(--whj-space-5, 1.25rem) 0;
  padding-block-start: var(--whj-space-4, 1rem);
  border-block-start: 1px solid var(--whj-border);
  display: grid;
  gap: 0.5rem;
  text-align: start;
}

.whj-verify__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.92rem;
}

.whj-verify__facts dt { color: var(--whj-text-muted); margin: 0; }
.whj-verify__facts dd { margin: 0; font-weight: 600; color: var(--whj-text); }

.whj-verify__product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: var(--whj-space-4, 1rem);
  padding: 0.6rem;
  border: 1px solid var(--whj-border);
  border-radius: calc(var(--whj-radius) / 2);
  text-decoration: none;
  color: var(--whj-text);
}

.whj-verify__product img {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: cover;
  border-radius: calc(var(--whj-radius) / 3);
}

.whj-verify__form {
  display: flex;
  gap: 0.5rem;
  margin-block: var(--whj-space-4, 1rem) 0.5rem;
}

.whj-verify__form .whj-input { min-height: 46px; text-align: center; letter-spacing: 0.03em; }
.whj-verify__form .whj-btn { min-height: 46px; white-space: nowrap; }

.whj-verify__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-block-start: var(--whj-space-5, 1.25rem);
}

.whj-verify__actions .whj-btn { min-height: 44px; }

.whj-verify__footnote {
  margin-block-start: var(--whj-space-5, 1.25rem);
  font-size: 0.8rem;
  line-height: 1.9;
  color: var(--whj-text-muted);
}

@media (max-width: 520px) {
  .whj-verify__form { flex-direction: column; }
}

/* =====================================================================
   §21 — قشرة المتجر: الترويسة · التذييل · الأقسام · شريط بيئة الاختبار
   =====================================================================
   ⚠️⚠️ **لماذا هذا القسم؟** الصفحة الرئيسية والبطاقات أُعيد بناؤها على نظام
      المكوّنات في دفعة سابقة، بينما بقيت **الترويسة والتذييل وكاروسيل
      الأقسام** على أصناف المشروع السابق (`site-header` · `footer-grid` ·
      `carousel-card`). النتيجة صفحة نصفها على نظام ونصفها على آخر: مسافات
      لا تتفق، وعرض حاوية مختلف بين القشرة والمحتوى، وذهبٌ في المنتصف
      وبنّيٌّ باهت في الأطراف. هذا سبب «عدم اتّساق التخطيط» المشتكى منه،
      لا خلل في بطاقة بعينها.

   ⚠️ كل قيمة من الرموز. وكل خاصية اتجاهية **منطقية** (`inline-start`) لا
      حرفية (`left`) — فالعربية والإنجليزية تعملان بلا ورقة RTL منفصلة.
   ===================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   §22 — شريطا أعلى الصفحة: بيئة الاختبار (إلزامي) · الإعلاني (اختياري)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1) شريط بيئة الاختبار ────────────────────────────────────────────
   ⚠️⚠️ يظهر **من متغيّر بيئة وحده** (`SITE_ENV`). لا إعداد في اللوحة يتحكّم
      به عمداً: شريط «هذه نسخة اختبار» يجب ألا يكون قابلاً للإطفاء بنقرة
      من داخل بيئة الاختبار نفسها، ولا قابلاً للإشعال في الإنتاج بالخطأ.

   ⚠️ **وشكله عولج**: كان مستطيلاً أحمر صارخاً بعرض الشاشة. الأحمر الصريح
      على متجر فاخر يبدو رسالة عطل. الآن سطر داكن متّزن بحدّ سفلي أحمر رفيع
      ونقطة نابضة — يُقرأ فوراً ولا يصرخ. الدلالة محفوظة والضجيج أُزيل. */
.whj-envbar {
  background: var(--whj-oud-900);
  color: var(--whj-sand-100);
  border-block-end: 2px solid var(--whj-danger);
  text-align: center;
  font-family: var(--whj-font-ui);
  font-size: var(--whj-text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.5rem var(--whj-space-4);
  line-height: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.whj-envbar__dot {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: var(--whj-danger);
  flex-shrink: 0;
  /* ⚠️ نبضة بطيئة جداً — تلفت بلا إزعاج، وتتوقف مع تفضيل تقليل الحركة. */
  animation: whj-envpulse 2.8s var(--whj-ease-soft) infinite;
}

@keyframes whj-envpulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

.whj-envbar__tag {
  font-weight: 800;
  letter-spacing: var(--whj-tracking-en);
  color: var(--whj-danger);
}

/* ── 2) الشريط الإعلاني ───────────────────────────────────────────────
   ⚠️⚠️ **لا سمة `style` بقيمة لون، ولا لون لكل رسالة.** النمط صنف واحد من
      قائمة مغلقة في العقد (`announcement_style`)، وكل نمط مشتقّ من رموز
      التصميم — فالتباين مضمون بالبناء لا بحسن نيّة المدير.
      القيمة الوحيدة التي تبقى في `style` هي **مدّة الحركة بالثواني**: رقم
      مُتحقَّق منه في العقد (5..300)، لا لون ولا نص. */
.whj-announce {
  display: flex;
  align-items: center;
  gap: var(--whj-space-4);
  padding-inline: var(--whj-space-4);
  font-family: var(--whj-font-ui);
  font-size: var(--whj-text-xs);
  font-weight: 600;
  min-block-size: 38px;
  overflow: hidden;
}

.whj-announce__viewport { flex: 1; min-inline-size: 0; overflow: hidden; }

.whj-announce__track {
  display: flex;
  inline-size: max-content;
  animation-name: whj-announce-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ⚠️ التمرير في اتجاه القراءة: في RTL يسير من اليسار إلى اليمين. اتجاه
   واحد ثابت كان يجعل النص العربي يدخل من الجهة الخطأ. */
@keyframes whj-announce-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

html[dir="rtl"] .whj-announce__track { animation-name: whj-announce-scroll-rtl; }

@keyframes whj-announce-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

.whj-announce:hover .whj-announce__track { animation-play-state: paused; }

.whj-announce__run { display: inline-flex; align-items: center; white-space: nowrap; }
.whj-announce__item { padding-inline: var(--whj-space-3); }
.whj-announce__sep { opacity: 0.5; }

.whj-announce__cta {
  flex-shrink: 0;
  text-decoration: none;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: var(--whj-radius-pill);
  border: 1px solid currentColor;
  color: inherit;
  transition: background var(--whj-fast), color var(--whj-fast);
}

.whj-announce__cta:hover { background: currentColor; }
.whj-announce__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ⚠️ **أنماط الشريط — القائمة المغلقة.** أي معرّف هنا يجب أن يوجد في
   `ANNOUNCEMENT_STYLES` بالعقد والعكس، وبوابة `whjaloud-banner.js` تتحقق
   من الطرفين: نمط بلا قاعدة يعني شريطاً بلا لون وهو عطل صامت. */
.whj-announce--gold  { background: var(--whj-accent);      color: var(--whj-oud-900); }
.whj-announce--dark  { background: var(--whj-oud-900);     color: var(--whj-ember-100); }
.whj-announce--olive { background: var(--whj-success);     color: var(--whj-sand-50); }
.whj-announce--sand  { background: var(--whj-sand-200);    color: var(--whj-oud-800); }
.whj-announce--alert { background: var(--whj-danger);      color: var(--whj-sand-50); }

@media (max-width: 620px) {
  /* ⚠️ زر الرابط يسبق الشريط المتحرّك على الضيق: وضعه بعده كان يدفعه خارج
     الشاشة فلا يُنقر أبداً. */
  .whj-announce { gap: var(--whj-space-2); padding-inline: var(--whj-space-3); }
  .whj-announce__cta { padding: 0.25rem 0.55rem; font-size: 0.68rem; }
}

/* ── الترويسة ─────────────────────────────────────────────────────── */
.whj-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--whj-z-header, 100);
  background: var(--whj-header-bg);
  color: var(--whj-header-ink);
  box-shadow: var(--whj-shadow-sm);
}

.whj-header a { color: inherit; text-decoration: none; }

.whj-header__bar {
  max-width: var(--whj-container);
  margin-inline: auto;
  padding: var(--whj-header-pad, var(--whj-space-4, 1rem)) var(--whj-space-4, 1rem);
  display: flex;
  align-items: center;
  gap: var(--whj-space-4, 1rem);
}

/* ── العلامة ──────────────────────────────────────────────────────── */
.whj-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--whj-font-ar);
  font-size: var(--whj-text-lg);
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.whj-brand__accent { color: var(--whj-accent); }

/* ── البحث ────────────────────────────────────────────────────────── */
.whj-header__search {
  position: relative;
  flex: 1 1 auto;
  /* ⚠️ `min-width: 0` على عنصر flex مرن يحوي حقلاً: بدونه يرفض الانكماش
     دون عرضه الطبيعي فتفيض الترويسة على الشاشات الضيّقة — وهو سبب
     «الهيدر يطفح على الجوال» بالضبط. */
  min-width: 0;
  max-width: 34rem;
}

.whj-search {
  display: flex;
  align-items: stretch;
  background: var(--whj-surface);
  border-radius: var(--whj-radius-pill);
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color var(--whj-fast), box-shadow var(--whj-fast);
}

.whj-search:focus-within {
  border-color: var(--whj-accent);
  box-shadow: var(--whj-glow);
}

.whj-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--whj-text);
  font-family: inherit;
  font-size: var(--whj-text-sm);
  padding: 0 var(--whj-space-4, 1rem);
  min-height: 44px;
}

.whj-search__input::placeholder { color: var(--whj-text-muted); }
.whj-search__input:focus { outline: none; }

.whj-search__submit {
  border: 0;
  cursor: pointer;
  background: var(--whj-primary);
  color: var(--whj-primary-ink);
  padding-inline: var(--whj-space-4, 1rem);
  display: grid;
  place-items: center;
  min-width: 48px;
  transition: background var(--whj-fast);
}

.whj-search__submit:hover { background: var(--whj-primary-dark); }
.whj-search__submit:focus-visible { outline: 2px solid var(--whj-accent); outline-offset: -3px; }
/* ⚠️ `currentColor` لا لون ثابت: الأيقونة كانت `stroke="white"` نصاً، فتختفي
   على ثيم «رمال نجد» ذي الترويسة الفاتحة. */
.whj-search__submit svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

/* ── أزرار الترويسة ──────────────────────────────────────────────── */
.whj-header__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: auto;
  flex-shrink: 0;
}

.whj-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 0.55rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--whj-text-sm);
  border-radius: var(--whj-radius-sm);
  cursor: pointer;
  transition: background var(--whj-fast), color var(--whj-fast);
}

.whj-iconbtn:hover { background: color-mix(in srgb, var(--whj-accent) 18%, transparent); }
.whj-iconbtn:focus-visible { outline: 2px solid var(--whj-accent); outline-offset: 2px; }
.whj-iconbtn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; }
.whj-iconbtn__text { font-weight: 600; letter-spacing: var(--whj-tracking-en); }

/* عدّاد السلة */
.whj-iconbtn__count {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 0;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.2rem;
  border-radius: var(--whj-radius-pill);
  background: var(--whj-accent);
  color: var(--whj-oud-900);
  font-size: 0.68rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* زر القائمة على الجوال */
.whj-burger { display: none; }
.whj-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.whj-burger span + span { margin-block-start: 4px; }

/* ── شريط الأقسام ────────────────────────────────────────────────── */
.whj-nav {
  border-block-start: 1px solid color-mix(in srgb, var(--whj-header-ink) 14%, transparent);
  /* ⚠️ التعتيم بالمزج مع `--whj-shade-base` لا بلون أسود مكتوب نصاً:
     البوابة تمنع أي سداسي خارج ملف الرموز، ولسبب وجيه — لون شارد هنا
     يعني شريط أقسام لا يتبع الثيم. */
  background: color-mix(in srgb, var(--whj-header-bg) 88%, var(--whj-shade-base));
}

.whj-nav__inner {
  max-width: var(--whj-container);
  margin-inline: auto;
  padding: 0 var(--whj-space-4, 1rem);
  display: flex;
  align-items: center;
  gap: var(--whj-space-4, 1rem);
  /* ⚠️ تمرير أفقي بدل التفاف يكسر الصف: متجر بعشرة أقسام كان يُنتج سطرين
     في الترويسة على الأجهزة اللوحية. */
  overflow-x: auto;
  scrollbar-width: none;
}

.whj-nav__inner::-webkit-scrollbar { display: none; }

.whj-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  font-size: var(--whj-text-sm);
  font-weight: 600;
  color: color-mix(in srgb, var(--whj-header-ink) 82%, transparent);
  transition: color var(--whj-fast);
}

.whj-nav__link:hover,
.whj-nav__link[aria-current="page"] { color: var(--whj-accent); }

.whj-nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--whj-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--whj-normal) var(--whj-ease-out);
}

.whj-nav__link:hover::after,
.whj-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* الترويسة تُلوّن آلية الانسدال المشتركة (`nav-dropdown`) ولا تستبدلها. */
.whj-nav .nav-dropdown-toggle { color: inherit; }
.whj-nav .nav-dropdown-menu { z-index: var(--whj-z-header, 100); }

/* ── الجوال ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .whj-burger { display: inline-flex; flex-direction: column; justify-content: center; }

  .whj-header__bar { flex-wrap: wrap; gap: 0.5rem; padding-inline: 0.75rem; }
  /* الشعار والأزرار في صف، والبحث في صف كامل تحتهما — بدل ثلاثتها مضغوطة. */
  .whj-header__search { order: 3; flex-basis: 100%; max-width: none; }

  .whj-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 100dvh;
    inline-size: min(20rem, 84vw);
    z-index: var(--whj-z-drawer, 90);
    background: var(--whj-header-bg);
    /* ⚠️ `translateX(-100%)` حرفية تكسر RTL. المحوّر المنطقي غير مدعوم على
       نطاق واسع بعد، فنعتمد متغيّراً يقلبه `[dir]` أدناه. */
    transform: translateX(var(--whj-drawer-off, -100%));
    transition: transform var(--whj-normal) var(--whj-ease-out);
    border-block-start: 0;
    box-shadow: var(--whj-shadow-lg);
  }

  html[dir="rtl"] .whj-nav {
    inset-inline-start: auto;
    inset-inline-end: 0;
    --whj-drawer-off: 100%;
  }

  .whj-nav.open { transform: translateX(0); }

  .whj-nav__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    block-size: 100%;
    padding-block: var(--whj-space-6, 2rem);
  }

  .whj-nav__link { min-height: 48px; font-size: var(--whj-text-base); }
  .whj-nav__link::after { display: none; }
  .whj-nav .nav-dropdown { flex-direction: column; align-items: stretch; width: 100%; }
}

.whj-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--whj-scrim);
  z-index: calc(var(--whj-z-drawer, 90) - 1);
}

.whj-scrim.open { display: block; }

/* ── كاروسيل الأقسام ─────────────────────────────────────────────── */
.whj-cats { position: relative; }

.whj-cats__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9.5rem, 1fr);
  gap: var(--whj-space-4, 1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: 0.4rem;
}

.whj-cats__track::-webkit-scrollbar { display: none; }

/* ⚠️ من أربعة أعمدة فأكثر تصير شبكة لا شريط تمرير: الشريط على شاشة عريضة
   يُخفي أقساماً خلف حافة لا يلاحظها أحد. */
@media (min-width: 900px) {
  .whj-cats__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    overflow: visible;
  }
  .whj-cats__arrow { display: none; }
}

.whj-cat {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--whj-surface);
  border: var(--whj-card-border, 1px solid var(--whj-border));
  border-radius: var(--whj-radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform var(--whj-normal) var(--whj-ease-out), box-shadow var(--whj-normal);
}

@media (hover: hover) {
  .whj-cat:hover { transform: translateY(-4px); box-shadow: var(--whj-shadow-lg); }
  .whj-cat:hover .whj-cat__img { transform: scale(1.06); }
}

.whj-cat:focus-visible { outline: 2px solid var(--whj-accent); outline-offset: 2px; }

.whj-cat__media {
  position: relative;
  aspect-ratio: var(--whj-product-ratio, 1 / 1);
  background: var(--whj-surface-alt);
  overflow: hidden;
}

.whj-cat__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform var(--whj-slow) var(--whj-ease-out);
}

.whj-cat__img.is-broken { display: none; }

.whj-cat__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--whj-text-muted);
  background: var(--whj-surface-alt);
}

.whj-cat__name {
  padding: var(--whj-space-3, 0.75rem) var(--whj-space-2, 0.5rem);
  text-align: center;
  font-size: var(--whj-text-sm);
  font-weight: 700;
  color: var(--whj-text);
  line-height: 1.5;
}

.whj-cats__arrow {
  position: absolute;
  inset-block-start: 38%;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--whj-border);
  background: var(--whj-surface);
  color: var(--whj-text);
  font-size: var(--whj-text-lg);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--whj-shadow);
}

.whj-cats__arrow--prev { inset-inline-end: -0.4rem; }
.whj-cats__arrow--next { inset-inline-start: -0.4rem; }
.whj-cats__arrow:focus-visible { outline: 2px solid var(--whj-accent); outline-offset: 2px; }

/* ── التذييل ─────────────────────────────────────────────────────── */
.whj-footer {
  background: var(--whj-footer-bg);
  color: var(--whj-footer-ink);
  padding-block-start: var(--whj-space-7, 3rem);
  margin-block-start: var(--whj-space-7, 3rem);
}

.whj-footer a { color: inherit; text-decoration: none; }
.whj-footer a:hover { color: var(--whj-accent); }

.whj-footer__grid {
  max-width: var(--whj-container);
  margin-inline: auto;
  padding: 0 var(--whj-space-4, 1rem) var(--whj-space-6, 2rem);
  display: grid;
  gap: var(--whj-space-6, 2rem);
  grid-template-columns: 1.6fr repeat(3, 1fr);
}

@media (max-width: 900px) { .whj-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .whj-footer__grid { grid-template-columns: 1fr; gap: var(--whj-space-5, 1.5rem); } }

.whj-footer__title {
  margin: 0 0 var(--whj-space-3, 0.75rem);
  font-size: var(--whj-text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--whj-accent);
}

.whj-footer__text {
  margin: 0 0 var(--whj-space-4, 1rem);
  font-size: var(--whj-text-sm);
  line-height: var(--whj-leading-body);
  color: color-mix(in srgb, var(--whj-footer-ink) 82%, transparent);
  max-width: 30rem;
}

.whj-footer__links { display: flex; flex-direction: column; gap: 0.1rem; }

.whj-footer__links a {
  font-size: var(--whj-text-sm);
  /* هدف لمس مريح في عمود روابط على الجوال */
  padding-block: 0.45rem;
  color: color-mix(in srgb, var(--whj-footer-ink) 86%, transparent);
}

.whj-footer__pay {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block-start: var(--whj-space-3, 0.75rem);
}

.whj-footer__pay span {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: var(--whj-radius-sm);
  border: 1px solid color-mix(in srgb, var(--whj-footer-ink) 26%, transparent);
  color: color-mix(in srgb, var(--whj-footer-ink) 86%, transparent);
}

.whj-footer__pay img { max-width: 100%; height: auto; }

.whj-footer__bar {
  border-block-start: 1px solid color-mix(in srgb, var(--whj-footer-ink) 16%, transparent);
}

.whj-footer__bar-inner {
  max-width: var(--whj-container);
  margin-inline: auto;
  padding: var(--whj-space-4, 1rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--whj-space-4, 1rem);
  align-items: center;
  justify-content: space-between;
  font-size: var(--whj-text-xs);
  color: color-mix(in srgb, var(--whj-footer-ink) 72%, transparent);
}

/* ⚠️ النشرة داخل التذييل تأخذ **عرض التذييل كاملاً** لا عموداً ضيّقاً:
   حقل بريد بعرض 12rem في عمود جانبي هو ما جعل القسم يبدو «ضعيفاً بصرياً». */
.whj-footer .whj-newsletter {
  background: color-mix(in srgb, var(--whj-footer-bg) 86%, var(--whj-shade-base));
  margin: 0;
  padding-block: var(--whj-space-6, 2rem);
  border-block-end: 1px solid color-mix(in srgb, var(--whj-footer-ink) 16%, transparent);
}

/* ⚠️ حالة رسالة النشرة — صنفان بدل `style.color` بقيمة سداسية داخل السكربت.
   اللون الشارد لا يتبع الثيم ويصير غير مقروء على «ليل العود». */
.whj-hint.is-ok  { color: var(--whj-success); font-weight: 600; }
.whj-hint.is-bad { color: var(--whj-danger);  font-weight: 600; }
/* داخل شريط النشرة الداكن يُقلب الدور: الأخضر الداكن لا يُقرأ على خلفية داكنة. */
.whj-newsletter .whj-hint.is-ok  { color: var(--whj-accent-soft); }
.whj-newsletter .whj-hint.is-bad { color: var(--whj-ember-100); }

.whj-footer__pay-img { max-width: 100%; height: auto; display: block; }

/* ⚠️ النشرة داخل التذييل ترث لون التذييل: كانت تُرسم بلون نصّ الصفحة
   فتصير رمادية داكنة على خلفية داكنة. */
.whj-footer .whj-newsletter,
.whj-footer .whj-newsletter .whj-section__title { color: var(--whj-footer-ink); }

/* =====================================================================
   §23 — الطبقة الطباعية الموحَّدة
   =====================================================================
   ⚠️ العناوين بوجه العرض (كوفي)، والنصّ والجداول والأزرار بوجه الواجهة.
      الفصل مقصود: الكوفي فخم في المقاسات الكبيرة و**أقلّ وضوحاً** في
      الصغيرة — وهي مقاسات الجداول والتذييل وأزرار الإدارة.
   ===================================================================== */

h1, h2, h3,
.whj-section__title,
.whj-brand,
.whj-footer__title {
  font-family: var(--whj-font-ar);
  line-height: var(--whj-leading-tight);
  /* ⚠️ العربية بلا `text-wrap: balance` تترك كلمة وحيدة في سطر العنوان. */
  text-wrap: balance;
}

h4, h5, h6 { font-family: var(--whj-font-ar); line-height: var(--whj-leading-tight); }

body, input, select, textarea, button, table {
  font-family: var(--whj-font-ui);
}

/* ⚠️ اللاتيني داخل نص عربي (أرقام الطلبات · SKU · البريد) يُضبط اتجاهه
   ووجهه معاً، وإلا انقلب ترتيبه بصرياً داخل الجملة العربية. */
[dir="ltr"], .whj-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  font-feature-settings: 'tnum' 1;
}

/* ⚠️ أرقام جدولية في كل موضع يُقارَن فيه رقم برقم: بلا `tnum` تختلف عروض
   الأرقام فتهتزّ أعمدة الأسعار والتقارير رأسياً. */
.whj-product__price,
.whj-product__price-old,
.whj-table td,
.whj-metric__value { font-variant-numeric: tabular-nums; }

/* ⚠️ حدّ أدنى للنصّ على الجوال — 16px على الحقول تحديداً يمنع تكبير
   iOS التلقائي عند التركيز، وهو ما يكسر تخطيط الترويسة عند البحث. */
@media (max-width: 620px) {
  input, select, textarea { font-size: max(16px, var(--whj-text-sm)); }
}


/* =====================================================================
   §25 — صفحة المنتج
   ===================================================================== */

.whj-pdp {
  display: grid;
  gap: var(--whj-space-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 900px) { .whj-pdp { grid-template-columns: 1fr; } }

/* ── المعرض ──────────────────────────────────────────────────────── */
.whj-pdp__gallery { position: sticky; inset-block-start: var(--whj-space-6); }

@media (max-width: 900px) { .whj-pdp__gallery { position: static; } }

.whj-pdp__stage {
  position: relative;
  aspect-ratio: var(--whj-product-ratio, 1 / 1);
  background: var(--whj-surface-alt);
  border: 1px solid var(--whj-border);
  border-radius: var(--whj-radius-lg);
  overflow: hidden;
}

.whj-pdp__img {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.whj-pdp__img.is-broken { display: none; }

.whj-pdp__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--whj-text-muted);
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb, var(--whj-accent) 12%, transparent), transparent 70%),
    var(--whj-surface-alt);
}

.whj-pdp__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-block-start: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.whj-pdp__thumbs::-webkit-scrollbar { display: none; }

/* ⚠️ زرّ حقيقي لا صورة قابلة للنقر: يصله التنقّل بلوحة المفاتيح ويُعلن دوره. */
.whj-pdp__thumb {
  flex: 0 0 auto;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--whj-radius-sm);
  background: var(--whj-surface-alt);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--whj-fast), opacity var(--whj-fast);
  opacity: 0.75;
}

.whj-pdp__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.whj-pdp__thumb:hover { opacity: 1; }
.whj-pdp__thumb.is-active { border-color: var(--whj-accent); opacity: 1; }
.whj-pdp__thumb:focus-visible { outline: 2px solid var(--whj-accent); outline-offset: 2px; }

/* ── المعلومات ───────────────────────────────────────────────────── */
.whj-pdp__info { display: flex; flex-direction: column; gap: var(--whj-space-4); }
.whj-pdp__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.whj-pdp__title {
  margin: 0;
  font-size: var(--whj-text-2xl);
  line-height: var(--whj-leading-tight);
  color: var(--whj-text);
}

.whj-pdp__pricebox {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: var(--whj-space-3);
  border-block: 1px solid var(--whj-border);
}

.whj-pdp__price {
  font-size: var(--whj-text-xl);
  font-weight: 800;
  color: var(--whj-primary);
  font-variant-numeric: tabular-nums;
}

.whj-pdp__price-old {
  font-size: var(--whj-text-base);
  color: var(--whj-text-muted);
  text-decoration: line-through;
}

.whj-pdp__ask { font-size: var(--whj-text-lg); font-weight: 700; color: var(--whj-text-muted); }

.whj-pdp__vat {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
  font-size: var(--whj-text-xs);
  color: var(--whj-text-muted);
}

.whj-pdp__label {
  margin: 0 0 0.4rem;
  font-size: var(--whj-text-sm);
  font-weight: 700;
  color: var(--whj-text);
}

.whj-pdp__desc {
  font-size: var(--whj-text-base);
  line-height: var(--whj-leading-body);
  color: var(--whj-text);
}

.whj-pdp__desc p { margin: 0 0 0.8rem; }
.whj-pdp__desc ul, .whj-pdp__desc ol { margin: 0 0 0.8rem; padding-inline-start: 1.3rem; }

.whj-pdp__cta { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.whj-pdp__cta .whj-btn { flex: 1 1 12rem; justify-content: center; min-block-size: 50px; }

/* ⚠️ لون واتساب من رمزه الصريح: مملوك لها وثابت في دليل هويتها، ولا
   يُثيَّم مع المتجر — تغييره يُضعف التعرّف على الزر. */
.whj-btn--whatsapp {
  background: var(--whj-brand-whatsapp);
  color: var(--whj-sand-50);
  border-color: transparent;
}

.whj-btn--whatsapp:hover { background: var(--whj-brand-whatsapp-dark); }

.whj-pdp__trust {
  list-style: none;
  margin: 0;
  padding: var(--whj-space-4);
  background: var(--whj-surface-alt);
  border-radius: var(--whj-radius);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: var(--whj-text-sm);
  color: var(--whj-text-muted);
}

.whj-pdp__trust li { display: flex; align-items: center; gap: 0.5rem; }

.whj-pdp__trust li::before {
  content: '';
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background: var(--whj-accent);
  flex-shrink: 0;
}

.whj-pdp__details {
  margin-block-start: var(--whj-space-7);
  padding: var(--whj-space-5);
  background: var(--whj-surface);
  border: 1px solid var(--whj-border);
  border-radius: var(--whj-radius);
}

.whj-pdp__detailstitle {
  margin: 0 0 var(--whj-space-3);
  font-size: var(--whj-text-lg);
  color: var(--whj-text);
}

/* =====================================================================
   §25 — قشرة الصفحات النصّية (من نحن · السياسات)
   =====================================================================
   ⚠️ عرض قراءة محدود عمداً. كانت الصفحات ترث عرض الحاوية كاملاً، وسطر
      بعرض 1200 بكسل يُتعب العين ويُفقد مكان السطر التالي — والعربية أشدّ
      تأثراً لاتصال حروفها.
   ===================================================================== */

.whj-prose { max-inline-size: 46rem; margin-inline: auto; }

.whj-prose__head {
  margin-block-end: var(--whj-space-5);
  padding-block-end: var(--whj-space-4);
  border-block-end: 1px solid var(--whj-border);
}

.whj-prose__title { margin: 0.2rem 0 0; font-size: var(--whj-text-2xl); color: var(--whj-text); }

.whj-prose__body {
  font-size: var(--whj-text-base);
  line-height: var(--whj-leading-body);
  color: var(--whj-text);
}

.whj-prose__body h2 { margin: var(--whj-space-6) 0 var(--whj-space-3); font-size: var(--whj-text-lg); }
.whj-prose__body h3 { margin: var(--whj-space-5) 0 var(--whj-space-2); font-size: var(--whj-text-base); }
.whj-prose__body p  { margin: 0 0 var(--whj-space-4); }
.whj-prose__body ul, .whj-prose__body ol { margin: 0 0 var(--whj-space-4); padding-inline-start: 1.4rem; }
.whj-prose__body li { margin-block-end: 0.4rem; }
.whj-prose__body a  { color: var(--whj-primary); text-underline-offset: 3px; }
.whj-prose__body img { max-inline-size: 100%; height: auto; border-radius: var(--whj-radius-sm); }

.whj-prose__body blockquote {
  margin: 0 0 var(--whj-space-4);
  padding: var(--whj-space-3) var(--whj-space-4);
  border-inline-start: 3px solid var(--whj-accent);
  background: var(--whj-surface-alt);
  border-radius: var(--whj-radius-sm);
  color: var(--whj-text-muted);
}

/* =====================================================================
   §27 — مسار التنقّل (المُصيِّر الوحيد)
   ===================================================================== */
.whj-breadcrumbs { margin-block-end: var(--whj-space-4); }

.whj-breadcrumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  font-size: var(--whj-text-xs);
  /* ⚠️ كان اللون `--whj-text-muted` على خلفية رملية: 4.1:1 — تحت AA.
     الحدّ الأدنى هنا لون النصّ الأساسي بشفافية مضبوطة، لا الخافت. */
  color: color-mix(in srgb, var(--whj-text) 72%, transparent);
}

.whj-breadcrumbs__list li { display: inline-flex; align-items: center; }

/* ⚠️ الفاصل من `::before` لا عنصر في الترميز: عنصر فارغ يُقرأ في بعض
   القارئات الشاشية، والفاصل زخرفة بحتة. */
.whj-breadcrumbs__list li + li::before {
  content: '‹';
  margin-inline-end: 0.4rem;
  opacity: 0.45;
}

html[dir="ltr"] .whj-breadcrumbs__list li + li::before { content: '›'; }

.whj-breadcrumbs a { color: inherit; text-decoration: none; }
.whj-breadcrumbs a:hover { color: var(--whj-primary); text-decoration: underline; }
.whj-breadcrumbs a:focus-visible { outline: 2px solid var(--whj-accent); outline-offset: 2px; }

.whj-breadcrumbs [aria-current="page"] { color: var(--whj-text); font-weight: 700; }

@media (max-width: 620px) {
  /* ⚠️ مسار طويل على الجوال: يلتفّ ولا يدفع الصفحة أفقياً. */
  .whj-breadcrumbs__list { font-size: 0.72rem; }
}


/* =====================================================================
   §28 — التذييل المدمج: النشرة عمود لا شريط
   ===================================================================== */

.whj-footer__grid {
  /* ⚠️ عمود العلامة أعرض، وعمود النشرة يليه: حقل بريد في عمود بعرض 1fr
     يصير أضيق من أن يُكتب فيه على الشاشات المتوسطة. */
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  /* ⚠️ الحشو العمودي قُلّص: كان التذييل يأخذ ارتفاع شاشة كاملة تقريباً
     بعد شريط النشرة المستقلّ. */
  padding-block-end: var(--whj-space-5);
}

.whj-footer { padding-block-start: var(--whj-space-6); margin-block-start: var(--whj-space-6); }

.whj-footer__text--tight {
  margin-block-end: var(--whj-space-3);
  font-size: var(--whj-text-xs);
}

/* ── نموذج النشرة المضغوط ─────────────────────────────────────────── */
.whj-news {
  display: flex;
  align-items: stretch;
  background: color-mix(in srgb, var(--whj-footer-ink) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--whj-footer-ink) 24%, transparent);
  border-radius: var(--whj-radius-pill);
  overflow: hidden;
  transition: border-color var(--whj-fast), box-shadow var(--whj-fast);
}

.whj-news:focus-within { border-color: var(--whj-accent); box-shadow: var(--whj-glow); }

.whj-news__input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: transparent;
  /* ⚠️⚠️ لون نصّ الحقل **من حبر التذييل** لا من `--whj-text`: التذييل داكن،
     ولون النصّ الافتراضي داكن أيضاً ⇒ كتابة غير مرئية تقريباً. هذا بالضبط
     نوع «النصّ الباهت» المشتكى منه. */
  color: var(--whj-footer-ink);
  font-family: inherit;
  font-size: var(--whj-text-sm);
  padding-inline: var(--whj-space-4);
  min-block-size: 42px;
}

.whj-news__input::placeholder {
  color: color-mix(in srgb, var(--whj-footer-ink) 58%, transparent);
}

.whj-news__input:focus { outline: none; }

.whj-news__btn {
  border: 0;
  cursor: pointer;
  background: var(--whj-accent);
  color: var(--whj-oud-900);
  font-family: inherit;
  font-size: var(--whj-text-xs);
  font-weight: 800;
  padding-inline: var(--whj-space-4);
  white-space: nowrap;
  transition: background var(--whj-fast);
}

.whj-news__btn:hover { background: var(--whj-ember-300); }
.whj-news__btn:focus-visible { outline: 2px solid var(--whj-sand-50); outline-offset: -3px; }

.whj-news__msg { margin-block-start: 0.4rem; min-block-size: 1rem; }
.whj-footer .whj-news__msg.is-ok  { color: var(--whj-accent-soft); }
.whj-footer .whj-news__msg.is-bad { color: var(--whj-ember-100); }

.whj-footer__title--pay { margin-block-start: var(--whj-space-5); }

/* ⚠️ روابط التذييل: كانت بشفافية 86% على خلفية داكنة ⇒ قريبة من حدّ AA.
   رُفعت، والحالة النشطة تُميَّز بالذهب لا بالشفافية وحدها. */
.whj-footer__links a { color: color-mix(in srgb, var(--whj-footer-ink) 94%, transparent); }
.whj-footer__text    { color: color-mix(in srgb, var(--whj-footer-ink) 88%, transparent); }

@media (max-width: 900px) {
  .whj-footer__grid { grid-template-columns: 1fr 1fr; }
  /* عمود العلامة والنشرة يأخذان العرض كاملاً — حقل البريد يحتاجه. */
  .whj-footer__brandcol, .whj-footer__newscol { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .whj-footer__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   §28 — زرّ الحجز عبر واتساب: نصّان لا نصّ مقصوص
   ===================================================================== */
.whj-btn--cta { font-weight: 700; }

/* ⚠️ النصّ الكامل على الشاشات المتّسعة، والقصير على الضيّقة. الاثنان
   `aria-hidden` والاسم الوصولي من `aria-label` بالنصّ الكامل دائماً —
   فلا يسمع مستخدم قارئ الشاشة نصّاً مبتوراً. */
.whj-btn__short { display: none; }

@media (max-width: 900px) {
  .whj-btn__full  { display: none; }
  .whj-btn__short { display: inline; }
}

/* ⚠️ البطاقة الضيّقة: الزرّان فوق بعضهما بدل جوار بعضهما. زرّان بعرض
   نصف بطاقة 160 بكسل يعني أربعة أحرف لكل زرّ. */
@media (max-width: 620px) {
  .whj-product__cta { flex-direction: column; }
  .whj-product__cta > * { inline-size: 100%; }
}