/*
Theme Name:  AirCare Store
Theme URI:   https://store.aircare-co.com
Description: قالب متجر عناية الهواء — قالب فرعي لـTwenty Twenty-Five، عربي RTL، بألوان الشعار وخط الهوية.
Author:      Air Care
Template:    twentytwentyfive
Version:     0.1.0
Requires at least: 6.5
Tested up to:      7.0
Requires PHP:      7.4
Text Domain: aircare-store
*/

/* ──────────────────────────────────────────────────────────────
   الرموز تأتي من theme.json. هذا الملف للمكوّنات التي لا يغطّيها.
   ملاحظة RTL: نستعمل الخصائص المنطقية حصراً (inline/block) لا left/right.
   ────────────────────────────────────────────────────────────── */

/* 🔑🔑🔑 الألوان من دليل الهوية الرسمي (BRAND-IDENTITY.pdf، صفحة «ألوان البراند»)
   لا من عيّنات مسحوبة من صورة. القيم المعتمدة الأربع:
   ذهبي #f0ab1d · أزرق فاتح #23b5e8 · أزرق غامق #1289a7 · برتقالي #ff9c00
   و`--ac-blue-d` مشتقّ أغمق (#0D6B82) لأن #1289a7 مع الأبيض = 4.11 فقط،
   دون عتبة AA للنصّ الصغير؛ المشتقّ يعطي 6.10. */
:root{
  --ac-blue:      var(--wp--preset--color--brand-blue,   #1289A7);
  --ac-blue-2:    var(--wp--preset--color--brand-blue-2, #23B5E8);
  --ac-blue-d:    var(--wp--preset--color--brand-blue-d, #0D6B82);
  /* لون الرابط عند المرور. الأساس `--ac-blue-d` نفسه (ينقلب مع الوضع)،
     وهذا وحده يحتاج قيمةً لكل وضع لأن اتجاه «زيادة التباين» يختلف:
     في الفاتح يُعتِم وفي الغامق يُفتِح. */
  --ac-link-hover: var(--wp--preset--color--brand-blue, #1289A7);
  --ac-orange:    var(--wp--preset--color--brand-orange, #FF9C00);
  --ac-gold:      var(--wp--preset--color--brand-gold,   #F0AB1D);
  --ac-on-brand:  var(--wp--preset--color--on-brand,     #062434);
  --ac-surface:   var(--wp--preset--color--surface,      #FFFFFF);
  --ac-line:      var(--wp--preset--color--line,         #E3E8EF);
  --ac-muted:     var(--wp--preset--color--muted,        #5B6878);
  --ac-ok:        var(--wp--preset--color--ok,           #1F9D77);
  --ac-danger:    var(--wp--preset--color--danger,       #C42B2B);
  /* ── رموز تحمل الانقلاب بين الوضعين (أُضيفت 15/08/2026) ────────────── */
  --ac-bg:        var(--wp--preset--color--base,          #F6F8FB);
  --ac-text:      var(--wp--preset--color--text,          #0B1524);
  --ac-accent:    var(--wp--preset--color--brand-blue-d,  #0D6B82);
  --ac-cta-bg:    #11819D;   /* أدنى تغميق يجتاز AA مع الأبيض (4.52) */
  --ac-cta-fg:    #FFFFFF;
  --ac-tile:      #FFFFFF;   /* بلاطة صورة المنتج — لا تنقلب: كل صورنا مربّعات بيضاء صلبة */
  --ac-tile-dim:  1;         /* معامل سطوع حاوية البلاطة — يصير .92 في الغامق */
  --ac-radius:    14px;
  --ac-shadow:    0 6px 24px rgba(11,21,36,.07);
  --ac-img-ring:  rgba(6,16,36,.08);
}

/* الأرقام بعرض ثابت حتى لا ترقص الأسعار في الشبكة */
.woocommerce-Price-amount,
.wc-block-formatted-money-amount,
.ac-num{ font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }

/* ── شبكة المنتجات ───────────────────────────────────────────── */
.woocommerce ul.products{
  display:grid; gap:18px; margin:0; padding:0; list-style:none;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1000px){ .woocommerce ul.products{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){  .woocommerce ul.products{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){  .woocommerce ul.products{ grid-template-columns:1fr;} }

/* 🔴 نفس جذر عطل بطاقة البلوكات: ووكومرس يضبط `width:22.05%` (وأخواتها
   لكل عدد أعمدة) على `li.product` لتخطيط عائم. داخل شبكة CSS تُحتسب النسبة
   من عرض العمود لا الصفّ، فتنكمش البطاقة إلى ~60px ويتكسّر نصّ الزرّ.
   شوهد حيّاً في «قد يعجبك أيضاً» 03/08. إبطال قيود العرض إلزامي. */
.woocommerce ul.products li.product{
  background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:var(--ac-radius); overflow:hidden;
  margin:0 !important; padding:0;
  inline-size:100% !important; max-inline-size:100% !important;
  width:100% !important; max-width:100% !important;
  float:none !important; clear:none !important;
  display:flex; flex-direction:column; position:relative;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .2s ease;
}
/* الأزرار لا تتكسّر داخل بطاقة ضيّقة */
.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px); box-shadow:var(--ac-shadow);
  border-color:color-mix(in srgb, var(--ac-blue) 45%, transparent);
}

/* صور المنتجات مصوَّرة على أبيض ⇒ بلاطة بيضاء صريحة تمنع الحواف الناصعة */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img{
  background:var(--ac-tile); border-radius:12px; margin:10px 10px 0; width:auto;
  aspect-ratio:1/.86; object-fit:contain; padding:14px;
  box-shadow:inset 0 0 0 1px var(--ac-img-ring);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:.875rem; font-weight:600; line-height:1.55; padding:12px 14px 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:3.1em;
}
.woocommerce ul.products li.product .price{
  /* 🔑 نُزع `margin-block-start:auto` 28/08: هذا هو الترميز الكلاسيكيّ
     `ul.products`، وسطحه الوحيد الحيّ هو شريط الكاروسيل — وفيه الدفع على
     الزرّ (`> .button`) و«قارن» أصلاً. فبقاؤه هنا **فخٌّ نائم**: يكفي أن
     يلفّ أيُّ قالبٍ الشريطَ بحاوية `.woocommerce` ليصير للسعر وللزرّ هامشا
     `auto` في العمود نفسه فينقسم الفراغ بينهما — وهو بعينه العطب الذي
     أُصلح اليوم في بطاقة الأرشيف. تُحقّق: الشريط بلا سلف `.woocommerce`
     (مقيسٌ حيّاً)، فالنزع صفرُ أثرٍ بصريّ — و72 بطاقة شهدت بذلك.
     🔑 والقاعدة العامّة: **هامش `auto` واحد في العمود، وعلى آخر عنصرٍ فيه.** */
  padding:6px 14px 0; font-size:1.15rem; font-weight:800; color:inherit;
}
.woocommerce ul.products li.product .price del{
  font-size:.82rem; font-weight:500; color:var(--ac-muted); margin-inline-start:8px;
}
.woocommerce ul.products li.product .button{ margin:12px 14px 14px; display:block; text-align:center; }

/* ── الشارات: لا تتراكب أبداً ─────────────────────────────────── */
.woocommerce span.onsale,
.woocommerce ul.products li.product .ac-badge{
  position:absolute; inset-block-start:18px; inset-inline-start:18px; z-index:2;
  min-width:0; min-height:0; padding:4px 11px; border-radius:999px;
  font-size:.72rem; font-weight:800; line-height:1.6;
  background:var(--ac-orange); color:var(--ac-on-brand);
}
/* نفاد المخزون يُلغي شارة الخصم حتى لا تُقرأ شارتان فوق بعضهما */
.woocommerce li.product.outofstock span.onsale{ display:none; }
/* 🔑 هذه القاعدة **حيّة** على بطاقة البلوكات (لا تشترط `ul.products` الميت)،
   ولهذا هي مصدر لون الشارة الوحيد — لا تُكرّره في قسم البطاقة أسفل الملف.
   🔴 كانت وردية بحدّ أحمر: نداء بلون الخطر لحالة ليست خطأً، ويصطدم بالبطاقة
      الهادئة. الأحمر محجوز للتنبيه (`--ac-danger`). النفاد يُقرأ من قرص داكن
      عالي التباين + صورة مُخفتة، وهو أوضح من الوردي وأقلّ صراخاً. */
.woocommerce li.product.outofstock .ac-badge-out{
  background:color-mix(in srgb, var(--ac-text) 88%, transparent);
  color:var(--ac-surface); border:0;
}

/* ── التوفّر ─────────────────────────────────────────────────── */
.woocommerce .stock.in-stock{ color:var(--ac-ok-ink); font-weight:600; }
.woocommerce .stock.out-of-stock{ color:var(--ac-danger); font-weight:600; }

/* ── الأزرار ─────────────────────────────────────────────────── */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.wc-block-components-button{
  background:var(--ac-cta-bg); color:var(--ac-cta-fg);
  border-radius:11px; font-weight:700; border:1px solid transparent;
  padding:11px 22px; transition:background .18s ease, transform .18s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.wc-block-components-button:hover{ background:var(--ac-blue-d); transform:translateY(-2px); }
.woocommerce a.button.alt, .woocommerce button.button.alt{
  background:var(--ac-cta-bg); color:var(--ac-cta-fg);
}
.woocommerce .button:disabled, .woocommerce .button.disabled{
  background:var(--ac-line); color:var(--ac-muted); transform:none; cursor:not-allowed;
}

/* ── صفحة المنتج ─────────────────────────────────────────────── */
.woocommerce div.product .product_title{ font-size:1.7rem; line-height:1.4; font-weight:700; }
.woocommerce div.product p.price{ font-size:2.1rem; font-weight:800; letter-spacing:-.5px; }
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--ac-muted); line-height:1.8;
}
/* السمات كرقائق بدل جدول باهت */
.woocommerce div.product .woocommerce-product-attributes-item{
  display:inline-flex; margin:0 0 8px; margin-inline-end:8px;
}
.woocommerce div.product .woocommerce-product-attributes-item td,
.woocommerce div.product .woocommerce-product-attributes-item th{
  border:1px solid var(--ac-line); background:var(--ac-surface);
  padding:6px 13px; border-radius:9px; font-size:.8rem; color:var(--ac-muted);
}

/* ── تنبيهات ووكومرس ─────────────────────────────────────────── */
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  border-radius:12px; border:1px solid var(--ac-line); border-block-start-width:1px;
  background:var(--ac-surface); padding:14px 18px;
}
.woocommerce-message::before{ color:var(--ac-ok); }
.woocommerce-info::before{ color:var(--ac-blue); }
.woocommerce-error::before{ color:var(--ac-danger); }

/* ── الوصول ─────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--ac-blue); outline-offset:2px; border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}


/* ══ قوالب البلوكات (front-page / header / footer) ══════════════ */

/* ══ الهيدر بأربعة صفوف — معيار إكسترا ═════════════════════════
   شريط خدمة داكن → هوية وبحث كبير وسلة → فئات بمنسدلات → شريط مزايا.
   ────────────────────────────────────────────────────────────── */

/* ١ · شريط الخدمة */
/* 🔴 موضع هذه الكتلة مقصود: **قبل** قواعد المكوّنات لا بعدها.
   كانت في ذيل الورقة، وانتقائيّتها (0,2,0) تساوي `.ac-util a` — فغلبتها
   بالترتيب وحده، فصار هاتف الشريط العلويّ سماويّاً على أرضٍ فيروزية
   (2.13:1) بعد أن كان أبيض. قاعدةٌ عامّة تسبق الخاصّة، لا العكس.
   وهي تغلب قاعدة ووردبريس المولَّدة (0,1,0) في أي ترتيب، فلا تخسر شيئاً. */
/* ══════════════════════════════════════════════════════════════
   لون الروابط — تصحيح جذريّ للوضع الغامق (2026-08-16)
   🔴🔴🔴 `theme.json` يلوّن كل رابط بـ`--wp--preset--color--brand-blue-d`،
      وهي قيمة ووردبريس **لا تنقلب** مع وضعنا الغامق — بينما رمزنا
      `--ac-blue-d` ينقلب (#0D6B82 ⇄ #23B5E8) وصُمّم لذلك أصلاً
      («حبرٌ في 70 موضعاً — روابط وعناوين وأسعار»، DARK-MAP.txt).
      فكان **كل رابط محتوى في الموقع** يبقى #0D6B82 على خلفية غامقة.
      قِيس على اسم المنتج في السلة الحيّة الممتلئة: **3.07:1** والعتبة 4.5.
      ولم يكن هذا عيب السلة — كان عيب كل صفحة، وظهر في السلة أوّلاً فقط.
   🔑 الوضع الفاتح لا يتغيّر بكسلاً: `--ac-blue-d` معرَّف أصلاً بأنه
      `var(--wp--preset--color--brand-blue-d, #0D6B82)` — نفس القيمة حرفياً.
   🔴 كانت `:root:root` — وهو خطأ حساب: انتقائيّتها (0,2,0) بينما قاعدة
      مكوّنٍ مثل `.ac-util a` (0,1,1)، فكانت **تغلبها** لا تخسر أمامها،
      فصار هاتف الشريط العلويّ أزرقَ على أرضٍ فيروزية (1.39:1 في الفاتح).
      الصواب `:root` = (0,1,0): تغلب قاعدة ووردبريس `a:where(…)` = (0,0,1)
      في أي ترتيب، وتخسر أمام أي قاعدة مكوّنٍ كما يجب.
      🔑 «ارفع الانتقائية» ليست علاجاً عامّاً — الدرجة الزائدة تكسر التخصيص.
   🔴 المرور محصورٌ في `@media (hover:hover)` كبقيّة الورقة — الجوّال يُثبّت
      `:hover` بعد اللمس فيعلق لون المرور على الرابط الملموس.
   ═══════════════════════════════════════════════════════════ */
:root :where(a:where(:not(.wp-element-button))){ color:var(--ac-blue-d); }
@media (hover:hover){
  :root :where(a:where(:not(.wp-element-button))):hover{ color:var(--ac-link-hover); }
}
:root :where(a:where(:not(.wp-element-button))):focus-visible{ color:var(--ac-link-hover); }

.ac-util{ background:var(--ac-band-strong); color:var(--ac-cta-fg); font-size:.8rem; }
.ac-util-in{
  max-inline-size:1200px; margin-inline:auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-block-size:38px; flex-wrap:wrap;
}
.ac-util a{
  /* 🔴 كان 90% من الأبيض — فسقط التباين إلى 4.43 على أرض الشريط الفيروزية
     في الغامق، دون 4.5 بفارقٍ ضئيل لا يُرى بالعين ويُرى بالقياس. الأبيض
     الكامل يرفعه إلى 5.05 بلا أي فرق بصريّ يُذكر. */
  color:var(--ac-cta-fg); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; padding-block:9px;
}
.ac-util a:hover{ color:var(--ac-cta-fg); }
.ac-util-a, .ac-util-b{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.ac-util-a a{ font-weight:600; font-variant-numeric:tabular-nums; }
.ac-util svg{ opacity:.85; }
@media (max-width:700px){ .ac-util-b{ display:none; } }

/* ── زرّ التبديل الثلاثيّ (مهمّة 11، 2026-08-16) ──────────────────
   داخل `.ac-util` عمداً لا الصفّ الرئيسي — قرار المالك 15/08: `.ac-util-b`
   يُخفى تحت 700px فيترك نصف الشريط فارغاً على الجوّال (مكانٌ جاهز بلا
   ازدحام)، والتبديل إعداد لا فعلٌ شرائيّ فلا يزاحم البحث والسلة.
   خلفية `.ac-util` لا تنقلب (--ac-band-strong ثابت اللهجة الداكنة في
   الوضعين)، فحبر الزرّ يتبع `--ac-cta-fg` الأبيض كبقية روابط الشريط —
   لا `--ac-text`/`--ac-surface` (تلك تخصّ سطح الصفحة لا لهجة الشريط). */
.ac-theme{ position:relative; flex:0 0 auto; }
.ac-theme-btn{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:30px; block-size:30px; border-radius:9px; padding:0;
  background:transparent; color:var(--ac-cta-fg); cursor:pointer;
  /* 🔴 كانت 35% ⇒ حافّة 1.86:1 على أرض الترويسة، دون عتبة 3:1 لعنصر تحكّم.
     أيقونته البيضاء تُعرّفه، لكن الحافّة هي ما يقول «هذا زرّ يُضغط». */
  border:1px solid color-mix(in srgb, var(--ac-cta-fg) 62%, transparent);
  transition:background-color .16s ease, border-color .16s ease;
}
.ac-theme-btn:hover{ background:color-mix(in srgb, var(--ac-cta-fg) 14%, transparent); }
.ac-theme-btn:focus-visible{ outline:none; box-shadow:var(--ac-ring); }
.ac-theme-menu{
  position:absolute; inset-inline-end:0; inset-block-start:calc(100% + 8px);
  background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:11px; box-shadow:var(--ac-shadow); padding:4px;
  min-inline-size:152px; z-index:80;
}
.ac-theme-menu button{
  display:block; inline-size:100%; text-align:start; padding:9px 12px;
  background:transparent; border:0; border-radius:8px; color:var(--ac-text);
  font:inherit; font-size:.85rem; cursor:pointer;
}
.ac-theme-menu button:hover{ background:var(--ac-surface-2); }
.ac-theme-menu button:focus-visible{ outline:none; box-shadow:var(--ac-ring); }
.ac-theme-menu button[aria-current="true"]{ color:var(--ac-accent); font-weight:700; }

/* ٤ · شريط المزايا — بنمط الهوية الحقيقي خلفه.
   النمط (خطوط متموّجة + أيقونات أجهزة) مستخرج من BRAND-IDENTITY.pdf، وهو كثيف
   عند الحواف ويصفو في الوسط — نفس منطق استعماله في الدليل نفسه. */
.ac-svc{
  position:relative; background:var(--ac-tint);
  border-block-end:1px solid var(--ac-line);
}
.ac-svc::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url(assets/img/ac-brand-pattern.png) no-repeat center top;
  background-size:100% auto;
  opacity:.55;
}
.ac-svc > *{ position:relative; }
.ac-svc-in{
  max-inline-size:1200px; margin-inline:auto; padding:12px 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px 24px;
}
.ac-svc div{ display:flex; align-items:center; gap:10px; min-inline-size:0; }
.ac-svc svg{ flex:0 0 auto; color:var(--ac-blue-d); }
.ac-svc span{ display:flex; flex-direction:column; font-size:.85rem; font-weight:700; line-height:1.4; min-inline-size:0; }
.ac-svc b{ font-weight:500; font-size:.76rem; color:var(--ac-muted); }
@media (max-width:900px){ .ac-svc-in{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .ac-svc-in{ grid-template-columns:1fr; padding-inline:16px; } }

/* ── الهيدر ─────────────────────────────────────────────────── */
.ac-header{ padding-block:14px; }
.ac-header-row{ gap:clamp(16px,3vw,40px); }
.ac-brand{ flex:0 0 auto; }
/* الشعار الرسمي يحمل اسم الشركة والسطر التعريفي، فلا نكرّره نصّاً بجانبه */
/* الشعار الرسمي عمودي (علامة + اسم عربي + إنجليزي + سطر تعريفي)؛ دون ~84px
   يصير النصّ داخله غير مقروء. */
.ac-header{ padding-block:10px; }

/* ── V4: الترويسة تلتصق — صفر تحريك لخاصية تخطيط (مهمّة V4، 2026-08-16) ──
   🔴 درسٌ مدفوع (المعاينة المعتمَدة): تحريك `padding` لتقليص الترويسة يُجبر
      إعادة حساب التخطيط ويُزيح محتوى الصفحة كلّه.
   🔑 الحلّ: `.ac-util` يبقى في تدفّقه الطبيعيّ (غير ملتصق) فينزلق خارجاً
      بالتمرير العادي وحده؛ `.ac-header` وحدها sticky عند top:0، فتثبت فور
      وصول حافتها للقمّة — أي فور اكتمال خروج `.ac-util` (لا فجوة بينهما في
      الترميز). صفر padding متحرّك، صفر إعادة حساب تخطيط.
   بوّابة القبول: ارتفاع `.ac-header` (getBoundingClientRect) لا يتغيّر
   بكسلاً قبل التمرير وبعده — هذه القاعدة لا تمسّ الارتفاع إطلاقاً. */
.ac-header{
  position:sticky; inset-block-start:0; z-index:70;
  border-block-end:1px solid transparent;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.ac-header.is-stuck{
  box-shadow:var(--ac-shadow);
  border-block-end-color:var(--ac-line);
}
.ac-header .ac-logo img{ block-size:84px; inline-size:auto; }
.ac-header .wp-block-site-title{ position:absolute; inline-size:1px; block-size:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:600px){ .ac-header .ac-logo img{ block-size:58px; } }

/* البحث يأخذ المساحة الوسطى — هو الأداة الأهمّ في متجر بـ1,082 صنفاً.
   🔴 `min-inline-size:0` إلزامي: بدونه لا ينكمش عنصر flex دون محتواه،
   فيفيض الهيدر أفقياً على الجوّال ويخرج زرّ السلة من الشاشة (قيس: عرض
   المحتوى 480px داخل منفذ 390، والسلة عند −90). */
.ac-header .ac-search{ flex:1 1 auto; min-inline-size:0; max-inline-size:560px; margin:0; }
.ac-header-row{ flex-wrap:wrap; }
.ac-header .wc-block-mini-cart{ flex:0 0 auto; }
.ac-header .ac-search .wp-block-search__inside-wrapper{
  border:1.5px solid var(--ac-blue); border-radius:999px; background:var(--ac-surface);
  padding:0; overflow:hidden;
}
.ac-header .ac-search .wp-block-search__input{
  border:0; background:none; padding:13px 20px; font:inherit; font-size:.96rem;
}
.ac-header .ac-search .wp-block-search__input::placeholder{ color:var(--ac-muted); }
.ac-header .ac-search .wp-block-search__button{
  background:var(--ac-cta-bg); color:var(--ac-cta-fg); border:0; border-radius:999px;
  margin:4px; padding:9px 18px; min-inline-size:0;
}
.ac-header .ac-search .wp-block-search__button:hover{ background:var(--ac-blue-d); }

.ac-header .wc-block-mini-cart__button{ font-weight:600; font-size:.9rem; }

/* ══════════════════════════════════════════════════════════════
   الترويسة — وزن السلة وارتفاع الجوال (2026-08-18)
   ══════════════════════════════════════════════════════════════ */

/* 🔑 السلة كانت نصّاً صغيراً في الطرف («🛒 0.00») وهي نقطة تحويلٍ رئيسية —
      صارت زرّاً له حدٌّ وحشوٌ ووزن، بلا تغيير سلوكها ولا ترميزها. */
.ac-header .wc-block-mini-cart__button{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border:1px solid var(--ac-line); border-radius:11px;
  background:var(--ac-tint-hover, transparent);
  font-weight:700; font-size:.9rem; min-block-size:44px;
}
@media (hover:hover){
  .ac-header .wc-block-mini-cart__button:hover{
    border-color:var(--ac-blue); color:var(--ac-blue-d);
  }
}

@media (max-width:782px){
  /* 🔴 قِيس 18/08: الترويسة تأكل **415px من 844** = 49% من الشاشة قبل أوّل
        منتج. وشريط الخدمة وحده 111px، ومحتواه الأربعة مكرَّرٌ في `ac-assure`
        داخل صفحة المنتج — حيث القرار يُتّخذ فعلاً. فيبقى على سطح المكتب
        (مساحته هناك رخيصة) ويُخفى على الجوال. */
  .ac-svc{ display:none; }

  /* الشعار كان يأخذ سطراً كاملاً وحده فوق البحث */
  .ac-header-row{ flex-wrap:nowrap; gap:10px; }
  .ac-header .ac-brand{ flex:0 0 auto; }
  .ac-header .ac-search{ flex:1 1 auto; min-inline-size:0; }

  /* 🔴 قِيس بعد النشر: الصفّ الواحد ضغط حقل البحث حتى انقطع نصّه المساعد عند
        «ابحث باسم ا‌ل». المبلغ في زرّ السلة هو الفائض: «0.00» على سلّةٍ فارغة
        معلومةٌ صفرية تأخذ ~55px، والأيقونة وشارة العدد تكفيان — والعدد يظهر
        وحده حين يصير للسلة محتوى. */
  .ac-header .wc-block-mini-cart__button{ padding:9px 10px; gap:0; }
  .ac-header .wc-block-mini-cart__amount,
  .ac-header .wc-block-mini-cart__tax-label{ display:none; }
}

/* ── شريط الفئات ────────────────────────────────────────────── */
.ac-catbar{
  background:var(--ac-surface);
  border-block:1px solid var(--ac-line);
  position:relative; z-index:20;      /* المنسدلات تعلو ما بعدها */
}
.ac-catbar-inner{ max-inline-size:1200px; margin-inline:auto; padding-inline:24px; }
/* 🔴 كان هنا `overflow-x:auto` على سطح المكتب — والمتصفح يحسب `overflow-y`
   تلقائياً عندها، فيقصّ المنسدلة كلياً (قيس: محتوى 905px داخل حاوية 53px)
   أي أن شجرة التصنيفات كانت مبنيّة وغير مرئية. التمرير الأفقي للجوّال وحده. */
.ac-catbar-list{
  display:flex; gap:4px; list-style:none; margin:0; padding:0;
  flex-wrap:wrap;
}
.ac-catbar-list::-webkit-scrollbar{ display:none; }
.ac-cat{ position:relative; flex:0 0 auto; }

.ac-cat-top{
  display:block; padding:13px 14px; text-decoration:none;
  font-size:.94rem; font-weight:600; color:var(--ac-text);
  white-space:nowrap; border-block-end:2px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.ac-cat:hover > .ac-cat-top,
.ac-cat:focus-within > .ac-cat-top{
  color:var(--ac-blue-d); border-block-end-color:var(--ac-blue);
}

.ac-cat-panel{
  position:absolute; inset-block-start:100%; inset-inline-start:0;
  min-inline-size:290px; padding:8px;
  background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:0 0 14px 14px; border-block-start:0;
  box-shadow:var(--ac-shadow-panel);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s cubic-bezier(.22,1,.36,1),
             transform .18s cubic-bezier(.22,1,.36,1), visibility .18s;
}
.ac-cat:hover > .ac-cat-panel,
.ac-cat:focus-within > .ac-cat-panel{ opacity:1; visibility:visible; transform:none; }

.ac-cat-panel ul{ list-style:none; margin:0; padding:0; }
.ac-cat-panel a{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:9px 12px; border-radius:9px; text-decoration:none;
  color:var(--ac-text); font-size:.9rem;
}
.ac-cat-panel a b{
  font-weight:500; font-size:.82rem; color:var(--ac-muted);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.ac-cat-panel a:hover, .ac-cat-panel a:focus-visible{ background:var(--ac-tint-hover); color:var(--ac-blue-d); }

/* المستوى الثالث داخل المنسدلة: المقاسات والماركات كرقائق صغيرة تحت النوع.
   🔴 كان `.ac-cat-l3` يُولَّد في functions.php بلا أي CSS، فيبدو كالمستوى الثاني. */
.ac-cat-panel .ac-cat-l3{
  display:flex; flex-wrap:wrap; gap:5px;
  padding:2px 12px 9px;
}
.ac-cat-panel .ac-cat-l3 a{
  display:inline-block; padding:3px 9px; border-radius:7px;
  background:var(--ac-chip-bg); color:var(--ac-muted);
  font-size:.76rem; font-weight:500; line-height:1.6;
}
.ac-cat-panel .ac-cat-l3 a:hover,
.ac-cat-panel .ac-cat-l3 a:focus-visible{ background:var(--ac-tint-strong); color:var(--ac-blue-d); }

/* على الجوّال: تمرير أفقي للشريط، والمنسدلات مُعطّلة (اللمس ينتقل للفئة) */
@media (max-width:860px){
  .ac-catbar-inner{ padding-inline:16px; }
  .ac-catbar-list{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .ac-cat-panel{ display:none; }
  .ac-cat-top{ padding:11px 12px; font-size:.9rem; }
}

/* ملاحظة: أنماط البانر الثابت القديم (.ac-hero / .ac-eyebrow / .ac-accent)
   حُذفت 2026-08-03 حين استبدله السلايدر. لا تُعِدها إلا مع ترميزها. */

/* شريط الفئات */
.ac-cats ul{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; list-style:none;
  margin:0; padding:0; }
.ac-cats li{ background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:var(--ac-radius); padding:16px 12px; text-align:center;
  transition:transform .18s ease, border-color .18s ease; }
.ac-cats li:hover{ transform:translateY(-3px); border-color:var(--ac-blue); }
.ac-cats li a{ font-weight:600; font-size:.85rem; text-decoration:none; }
.ac-cats .count{ display:block; font-size:.72rem; color:var(--ac-muted); }
@media (max-width:900px){ .ac-cats ul{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .ac-cats ul{ grid-template-columns:repeat(2,1fr); } }

/* شريط الثقة */
.ac-trust p{ flex:1 1 180px; margin:0; }

/* ══ السلايدر والبنرات ═════════════════════════════════════════
   قاعدة التباين: النصّ الأبيض يُوضع فوق التدرّج الغامق وحده.
   #0A6A91 مع الأبيض = 6.05:1 · #0A5468 مع الأبيض = 10.3:1 (كلاهما AA).
   الأزرق الفاتح #0E87B9 يعطي 4.06:1 فقط ⇒ لا يُستعمل خلفيةً لنصّ صغير.
   ────────────────────────────────────────────────────────────── */

.ac-band{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:18px; color:var(--ac-cta-fg);
  background:linear-gradient(135deg, var(--ac-blue-d) 0%, var(--ac-band-strong) 100%);
}
/* 🔴 2026-08-03: أُزيل النمط الدائري — تبيّن أنه نمط «يوم التأسيس» لا نمط هوية
   عناية الهواء. لا تُعِده. الحقول اللونية تعتمد على التدرّج وحده. */
.ac-band a{ color:var(--ac-cta-fg); }

/* ── السلايدر ───────────────────────────────────────────────── */
/* 🔴 `position:relative` إلزامي: أزرار التحكّم `position:absolute` وبدون أب
   مموضع كانت تُحسب من الحاوية الأولية فتهبط في منتصف الصفحة (قيس على
   ثلاثة أعراض: موضعها = ارتفاع المنفذ − 32). */
.ac-slider{ display:grid; position:relative; }
.ac-slide{
  grid-area:1/1; display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,40%);
  gap:36px; padding:44px 48px 60px;
  opacity:0; visibility:hidden;
  transition:opacity .45s cubic-bezier(.22,1,.36,1);
}
/* الشريحة الأولى ظاهرة بالـCSS وحده: لو تعطّل السكربت يبقى بانر واحد
   مقروءاً بدل صفحة فارغة. الحركة تُحسّن حالةً قائمة لا تُنشئها. */
.ac-slide:first-child{ opacity:1; visibility:visible; }
.ac-slide.is-active{ opacity:1; visibility:visible; }
.ac-slider.is-live .ac-slide:not(.is-active){ opacity:0; visibility:hidden; }

.ac-slide h2{ margin:0 0 12px; font-size:clamp(1.5rem,3.4vw,2.35rem); line-height:1.3; color:var(--ac-cta-fg); }
.ac-slide p{ margin:0 0 22px; max-width:46ch; line-height:1.85; color:color-mix(in srgb, var(--ac-cta-fg) 88%, transparent); }

.ac-slide .ac-live-price{
  display:block; margin:0 0 20px; font-size:1.6rem; font-weight:800;
  font-variant-numeric:tabular-nums; color:var(--ac-cta-fg);
}
.ac-slide .ac-live-price del{ font-size:.95rem; font-weight:500; opacity:.62; margin-inline-end:10px; }
.ac-slide .ac-live-price ins{ text-decoration:none; }

.ac-slide .wp-block-button__link{
  background:var(--ac-surface); color:var(--ac-blue-d); border:1px solid transparent;
}
.ac-slide .wp-block-button__link:hover{ background:var(--ac-tint-hover); color:var(--ac-cta-hover-strong); }
.ac-slide .is-style-outline .wp-block-button__link{
  background:transparent; color:var(--ac-cta-fg); border:1px solid color-mix(in srgb, var(--ac-cta-fg) 55%, transparent);
}
.ac-slide .is-style-outline .wp-block-button__link:hover{ background:color-mix(in srgb, var(--ac-surface) 12%, transparent); }

/* صور المنتجات مصوَّرة على أبيض ⇒ بلاطة بيضاء صريحة (نفس قاعدة الشبكة) */
.ac-slide-media{
  background:var(--ac-tile); border-radius:16px; padding:16px;
  display:grid; place-items:center;
  box-shadow:var(--ac-shadow-tile);
}
.ac-slide-media img{
  display:block; width:100%; height:auto; margin:0;
  aspect-ratio:1/.84; object-fit:contain;
}

/* ── تحكّم السلايدر ─────────────────────────────────────────── */
.ac-slider-nav{
  position:absolute; inset-block-end:18px; inset-inline-start:48px;
  display:flex; align-items:center; gap:10px; z-index:2;
}
.ac-slider-arrow, .ac-slider-play{
  inline-size:32px; block-size:32px; padding:0; border-radius:999px; cursor:pointer;
  display:grid; place-items:center; font-size:1.15rem; line-height:1;
  background:color-mix(in srgb, var(--ac-surface) 14%, transparent); border:1px solid color-mix(in srgb, var(--ac-surface) 30%, transparent); color:var(--ac-cta-fg);
  transition:background .18s ease;
}
.ac-slider-arrow:hover, .ac-slider-play:hover{ background:color-mix(in srgb, var(--ac-surface) 28%, transparent); }

/* الأيقونات SVG مرسومة داخل السكربت بسمك حدّ واحد */
.ac-slider-arrow svg, .ac-slider-play svg{ display:block; }
/* السهم في RTL يشير للاتجاه الصحيح دون قلب يدوي: المسار مرسوم لكل زر على حدة */

.ac-dots{ display:flex; gap:7px; }
.ac-dot{
  inline-size:9px; block-size:9px; padding:0; border-radius:999px; cursor:pointer;
  background:color-mix(in srgb, var(--ac-surface) 38%, transparent); border:0;
  transition:background .18s ease, inline-size .18s ease;
}
.ac-dot.is-active{ background:var(--ac-surface); inline-size:24px; }

.ac-slider :focus-visible,
.ac-band :focus-visible{ outline:2px solid var(--ac-cta-fg); outline-offset:2px; }

/* ── الشريط العلوي ──────────────────────────────────────────── */
.ac-strip{
  border-radius:0; text-align:center;
  font-size:.83rem; font-weight:600;
}
.ac-strip::before{ background-size:220px auto; background-position:left -60px top -70px; opacity:.10; }
.ac-strip .ac-slide{
  grid-template-columns:1fr; gap:0; padding:9px 16px; justify-items:center;
}
.ac-strip .ac-slide p{ margin:0; max-width:none; color:var(--ac-cta-fg); font-size:inherit; }

/* ── البنران النصفيّان ──────────────────────────────────────── */
.ac-half{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ac-half .ac-band{ padding:30px 32px; display:grid; align-content:center; min-block-size:180px; }
.ac-half h3{ margin:0 0 6px; font-size:1.3rem; color:var(--ac-cta-fg); }
.ac-half p{ margin:0 0 16px; color:color-mix(in srgb, var(--ac-cta-fg) 85%, transparent); font-size:.9rem; }
.ac-half .wp-block-button__link{ background:var(--ac-surface); color:var(--ac-blue-d); }

/* البنر الثاني بلون مغاير حتى لا يبدوا نسخة واحدة مكرّرة */
.ac-half > .ac-band:nth-child(2){
  background:linear-gradient(135deg,var(--ac-band-alt-start) 0%,var(--ac-band-alt-end) 100%);
}

/* ── البنر العريض ──────────────────────────────────────────── */
.ac-wide{
  padding:46px 48px; text-align:center;
  display:grid; justify-items:center; gap:6px;
}
.ac-wide::before{
  background-size:520px auto; background-position:center center; opacity:.07;
}
.ac-wide h2{ margin:0; font-size:clamp(1.4rem,3vw,2rem); color:var(--ac-cta-fg); }
.ac-wide p{ margin:0 0 8px; color:color-mix(in srgb, var(--ac-cta-fg) 86%, transparent); max-width:56ch; }
.ac-wide .wp-block-button__link{ background:var(--ac-orange); color:var(--ac-on-brand); }
.ac-wide .wp-block-button__link:hover{ background:var(--ac-orange-d); }

/* ── الاستجابة ─────────────────────────────────────────────── */
@media (max-width:860px){
  .ac-slide{ grid-template-columns:1fr; gap:24px; padding:32px 26px 58px; }
  .ac-slide-media{ order:-1; max-inline-size:280px; justify-self:center; }
  .ac-slider-nav{ inset-inline-start:26px; }
  .ac-half{ grid-template-columns:1fr; }
  .ac-wide{ padding:36px 24px; }
}
@media (max-width:480px){
  .ac-slide{ padding:26px 20px 56px; }
  .ac-slide p{ font-size:.92rem; }
  .ac-slider-nav{ inset-inline-start:20px; }
}

/* الحركة تخدم الفهم فقط */
@media (prefers-reduced-motion:reduce){
  .ac-slide{ transition:none; }
}

/* ══ عالم «الفهرس الصريح» ═══════════════════════════════════════
   الرئيسية فهرس كتالوج مطبوع لا واجهة عرض. المدى نفسه هو الحجّة:
   كل نوع باسمه وعدده الحقيقي، بطباعة كشف مواصفات وأرقام جدولية.
   ────────────────────────────────────────────────────────────── */

/* ── الافتتاح: بيان لا بانر ─────────────────────────────────── */
.ac-open{
  padding-block:clamp(40px,7vw,84px) clamp(28px,4vw,44px);
  border-block-end:2px solid var(--ac-blue);
}
.ac-open h1{
  margin:0 0 18px;
  /* كان 4.15rem فابتلع العنوانُ الشاشةَ كاملةً على سطح المكتب */
  font-size:clamp(1.75rem,4vw,2.9rem);
  line-height:1.2; letter-spacing:-.02em; font-weight:700;
  text-wrap:balance;
}
.ac-open .ac-count{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  color:var(--ac-blue-d);
}
.ac-open p{
  margin:0; max-width:58ch; color:var(--ac-muted);
  font-size:clamp(.98rem,1.6vw,1.12rem); line-height:1.85;
  text-wrap:pretty;
}
.ac-open .ac-where{
  margin-block-start:22px; display:flex; flex-wrap:wrap; gap:8px 20px;
  font-size:.9rem; font-weight:500; color:var(--ac-text);
}
.ac-open .ac-where span{ display:inline-flex; align-items:center; gap:8px; }
.ac-open .ac-where span::before{
  content:""; inline-size:6px; block-size:6px; border-radius:50%;
  background:var(--ac-orange);
}

/* ── الفهرس ─────────────────────────────────────────────────── */
.ac-index{ padding-block:clamp(32px,5vw,60px); }
.ac-index-group + .ac-index-group{ margin-block-start:clamp(34px,5vw,60px); }

.ac-index-group > h2{
  margin:0 0 4px; font-size:1.06rem; font-weight:700; letter-spacing:-.01em;
}
.ac-index-group > h2 + .ac-index-note{
  margin:0 0 16px; font-size:.84rem; color:var(--ac-muted);
}

.ac-index-list{ list-style:none; margin:0; padding:0; }
.ac-index-list li{ border-block-start:1px solid var(--ac-line); }
.ac-index-list li:last-child{ border-block-end:1px solid var(--ac-line); }

.ac-index-list a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:14px; padding-block:13px; text-decoration:none; color:inherit;
}
.ac-index-name{ font-weight:500; font-size:1rem; }
/* خطّ القيادة كما في فهرس مطبوع — يمتدّ عند المرور */
.ac-index-lead{
  border-block-end:1px dotted var(--ac-line);
  transform:translateY(-4px);
  transition:border-color .22s cubic-bezier(.22,1,.36,1);
}
.ac-index-count{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  font-size:.94rem; color:var(--ac-muted);
  transition:color .22s cubic-bezier(.22,1,.36,1);
}
.ac-index-list a:hover .ac-index-lead,
.ac-index-list a:focus-visible .ac-index-lead{ border-block-end-color:var(--ac-blue); }
.ac-index-list a:hover .ac-index-name,
.ac-index-list a:focus-visible .ac-index-name{ color:var(--ac-blue-d); }
.ac-index-list a:hover .ac-index-count,
.ac-index-list a:focus-visible .ac-index-count{ color:var(--ac-blue-d); }

/* عمودان على الشاشات الواسعة — الفهرس يُقرأ لا يُمرَّر.
   أعمدة CSS لا شبكة: المجموعات تتدفّق فتتوازن الأطوال تلقائياً بدل أن
   يفرض أطولُ مجموعةٍ ارتفاعَ صفٍّ كامل ويترك فراغاً تحت أقصرها. */
@media (min-width:900px){
  .ac-index-cols{ columns:2; column-gap:clamp(32px,5vw,72px); }
  .ac-index-cols > .ac-index-group{ break-inside:avoid; }
  .ac-index-cols > .ac-index-group:first-child{ margin-block-start:0; }
}

/* ── بيان الخدمة: حقل لوني كامل، لا بطاقات ──────────────────── */
.ac-claim{
  padding:clamp(34px,5.5vw,64px) clamp(24px,4vw,56px);
  border-radius:18px;
}
.ac-claim h2{
  margin:0 0 14px; color:var(--ac-cta-fg); font-size:clamp(1.4rem,3.2vw,2.1rem);
  line-height:1.28; letter-spacing:-.02em; text-wrap:balance;
}
.ac-claim p{
  margin:0; max-width:62ch; color:color-mix(in srgb, var(--ac-cta-fg) 88%, transparent); line-height:1.85;
}
.ac-claim .ac-claim-facts{
  margin-block-start:26px; padding-block-start:22px;
  border-block-start:1px solid color-mix(in srgb, var(--ac-cta-fg) 22%, transparent);
  display:flex; flex-wrap:wrap; gap:10px 34px;
  font-size:.9rem; font-weight:500; color:var(--ac-cta-fg);
}

/* ── شريط الصور ─────────────────────────────────────────────── */
/* البنرات مصمَّمة لمتجر سلة ويظهر في أسفلها نطاقه — يُقصّ بصرياً
   دون المساس بالملف الأصلي (قابل للتراجع بسطر). */
/* شرائح صور خالصة: بلا شبكة عمودين وبلا حشو داخلي */
.ac-slider--images{ background:none; }
.ac-slider--images::before{ display:none; }
.ac-slider--images .ac-slide{
  display:block; padding:0 0 44px; grid-template-columns:none;
}
.ac-strip-figure{ margin:0; }
.ac-strip-figure img{
  display:block; inline-size:100%; block-size:auto; border-radius:14px;
  /* 🔴 لا قصّ. 11.6% كانت تأكل صفّ «ضمان معتمد · منتجات أصلية · خدمة ما بعد
     البيع» لا شريط النطاق وحده. البانر يُعرض كاملاً كما صُمِّم؛ وشريط النطاق
     المطبوع يُعالَج بإعادة تصدير من المصمّم لا بقصّ يفسد التصميم. */
}
/* التحكّم يجلس تحت الصورة لا فوقها — الصورة تصميم كامل لا خلفية */
.ac-slider--images .ac-slider-nav{ inset-block-end:0; inset-inline-start:0; }
.ac-slider--images .ac-slider-arrow,
.ac-slider--images .ac-slider-play{
  background:var(--ac-surface); border-color:var(--ac-line); color:var(--ac-blue-d);
}
.ac-slider--images .ac-slider-arrow:hover,
.ac-slider--images .ac-slider-play:hover{ background:var(--ac-tint-hover); }
.ac-slider--images .ac-dot{ background:var(--ac-line); }
.ac-slider--images .ac-dot.is-active{ background:var(--ac-blue); }
.ac-slider--images :focus-visible{ outline-color:var(--ac-blue); }

/* ── الإغلاق ────────────────────────────────────────────────── */
.ac-close{ padding-block:clamp(34px,5vw,60px); border-block-start:1px solid var(--ac-line); }
.ac-close h2{ margin:0 0 10px; font-size:1.2rem; }
.ac-close p{ margin:0; color:var(--ac-muted); max-width:60ch; line-height:1.8; }

/* ══ الشكل المألوف بإتقان (قرار المالك 03/08) ═══════════════════
   بنر عريض ← شريط مزايا ← شبكة فئات بصور ← منتجات ← بنرات ← منتجات.
   معيار الحرفة المستهدَف: إكسترا/جرير محلياً وCurrys عالمياً.
   ────────────────────────────────────────────────────────────── */

/* عنوان الصفحة الرئيسي — هادئ بصرياً لأن البنر هو البطل، لكنه h1 حقيقي */
.ac-h1{
  margin:clamp(18px,3vw,28px) 0 0;
  font-size:clamp(1.05rem,1.9vw,1.32rem); font-weight:700;
  letter-spacing:-.01em; line-height:1.5; color:var(--ac-text);
  text-wrap:balance;
}

/* ── رقائق الوصول السريع ───────────────────────────────────── */
.ac-chips{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding-block:14px; margin:0;
}
.ac-chips::-webkit-scrollbar{ display:none; }
.ac-chips a{
  flex:0 0 auto; text-decoration:none; white-space:nowrap;
  padding:8px 15px; border-radius:999px;
  border:1px solid var(--ac-line); background:var(--ac-surface);
  font-size:.85rem; font-weight:600; color:var(--ac-text);
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.ac-chips a:hover, .ac-chips a:focus-visible{
  background:var(--ac-cta-bg); border-color:var(--ac-blue); color:var(--ac-cta-fg);
}
.ac-chips a.is-hot{ border-color:var(--ac-orange); color:var(--ac-chip-hot-fg); background:var(--ac-chip-hot-bg); }
.ac-chips a.is-hot:hover{ background:var(--ac-orange); border-color:var(--ac-orange); color:var(--ac-on-brand); }

/* ── البنر الرئيسي ──────────────────────────────────────────── */
.ac-hero{ margin-block-start:0; }
.ac-hero .ac-slide{ padding:0 0 42px; display:block; grid-template-columns:none; }
.ac-hero figure{ margin:0; }
.ac-hero img{
  display:block; inline-size:100%; block-size:auto;
  border-radius:16px; background:var(--ac-surface);
}
.ac-hero .ac-slider-nav{ inset-block-end:0; inset-inline-start:0; }
.ac-hero .ac-slider-arrow, .ac-hero .ac-slider-play{
  background:var(--ac-surface); border-color:var(--ac-line); color:var(--ac-blue-d);
}
.ac-hero .ac-slider-arrow:hover, .ac-hero .ac-slider-play:hover{ background:var(--ac-tint-hover); }
.ac-hero .ac-dot{ background:var(--ac-line); }
.ac-hero .ac-dot.is-active{ background:var(--ac-blue); }
.ac-hero :focus-visible{ outline-color:var(--ac-blue); }

/* ── شريط المزايا ──────────────────────────────────────────── */
.ac-feat{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--ac-line); border-radius:14px;
  background:var(--ac-surface); overflow:hidden;
}
.ac-feat div{
  display:flex; align-items:center; gap:11px;
  padding:16px 18px; font-size:.88rem; font-weight:600; line-height:1.5;
}
.ac-feat div + div{ border-inline-start:1px solid var(--ac-line); }
.ac-feat svg{ flex:0 0 auto; color:var(--ac-blue); }
@media (max-width:900px){
  .ac-feat{ grid-template-columns:repeat(2,1fr); }
  .ac-feat div:nth-child(3){ border-inline-start:0; }
  .ac-feat div:nth-child(n+3){ border-block-start:1px solid var(--ac-line); }
}
@media (max-width:520px){
  .ac-feat{ grid-template-columns:1fr; }
  .ac-feat div + div{ border-inline-start:0; border-block-start:1px solid var(--ac-line); }
}

/* ── ترويسة القسم ──────────────────────────────────────────── */
.ac-row-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-block:clamp(38px,5vw,64px) 18px;
}
.ac-row-head h2{ margin:0; font-size:clamp(1.15rem,2.2vw,1.5rem); letter-spacing:-.01em; }
.ac-row-head a{
  font-size:.88rem; font-weight:600; text-decoration:none;
  color:var(--ac-blue-d); white-space:nowrap;
}
/* محصورٌ في أجهزة المرور — الجوّال يُثبّت :hover بعد اللمس فيعلق التسطير (16/08) */
@media (hover:hover){
  .ac-row-head a:hover{ text-decoration:none; }
}

/* ── شبكة الفئات ───────────────────────────────────────────── */
.ac-catgrid{ display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px){ .ac-catgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px){  .ac-catgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* بلاطة الفئة: خلفية مزرقّة تعطي طاقة لونية وتُبرز الصورة البيضاء
   (كما تفعل إكسترا) بدل بطاقة بيضاء على خلفية بيضاء. */
.ac-catgrid a{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--ac-catgrid-bg); border:1px solid transparent;
  border-radius:16px; overflow:hidden; padding:10px;
  transition:transform .2s cubic-bezier(.22,1,.36,1),
             box-shadow .2s ease, border-color .2s ease;
}
.ac-catgrid a:hover, .ac-catgrid a:focus-visible{
  transform:translateY(-3px); box-shadow:var(--ac-shadow);
  border-color:color-mix(in srgb, var(--ac-blue) 45%, transparent);
}
/* 🔑 نسبة الصندوق كانت 1/.78 (أعرض من ارتفاعه) والمنتجات هنا طويلة —
   ثلاجات وفريزرات ومكيفات دولابي — فتُحشر رأسياً وتبدو صغيرة داخل صندوق واسع.
   صندوق أطول قليلاً + حشو أقلّ = المنتج يملأ مكانه.
   (جرّبتُ قصّ الهوامش البيضاء من الصور نفسها فكانت النتيجة أسوأ: اللوحة
   المربّعة تُضيف هوامش جانبية للمنتج الطويل. المشكلة في الصندوق لا الصورة.) */
.ac-catgrid img{
  display:block; inline-size:100%; block-size:auto;
  aspect-ratio:1/1.06; object-fit:contain; padding:8px;
  background:var(--ac-tile); border-radius:11px;
}
.ac-catgrid .ac-catgrid-b{
  padding:12px 6px 4px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.ac-catgrid strong{ font-size:.94rem; font-weight:700; }
.ac-catgrid span{
  font-size:.8rem; color:var(--ac-muted);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}

/* ══ بطاقة المنتج — ترميز البلوكات ══════════════════════════════
   🔴 بلوك `woocommerce/product-new` يُخرج `.wc-block-grid__product`
   لا `ul.products li.product`. القواعد القديمة أعلاه كانت للترميز القديم
   ولم تُطبَّق إطلاقاً، فظهرت البطاقة بالافتراضي: عنوان ضخم مسطّر أزرق،
   وسطر ضريبة يأكل سطرين. (شوهد حيّاً 03/08/2026.)
   ────────────────────────────────────────────────────────────── */

.wc-block-grid__products{
  display:grid !important; gap:16px; margin:0; padding:0; list-style:none;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1000px){ .wc-block-grid__products{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){  .wc-block-grid__products{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* 🔴 ووكومرس يضبط `width/max-width/flex-basis: 25%` على البطاقة لتخطيطه flex.
   حين تصير الحاوية شبكةً تُحتسب النسبة من عمود الشبكة لا من الصفّ، فتنكمش
   البطاقة إلى رُبع الرُبع (~110px) ويتكسّر النصّ داخل الزرّ. (شوهد حيّاً 03/08.)
   العلاج: إبطال قيود العرض الثلاثة صراحةً. */
.wc-block-grid__product{
  position:relative; margin:0; padding:0;
  inline-size:100% !important; max-inline-size:100% !important;
  width:100% !important; max-width:100% !important;
  flex:none !important;
  background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:var(--ac-radius); overflow:hidden;
  display:flex; flex-direction:column; text-align:start;
  transition:transform .2s cubic-bezier(.22,1,.36,1),
             box-shadow .2s ease, border-color .2s ease;
}
.wc-block-grid__product:hover{
  transform:translateY(-3px); box-shadow:var(--ac-shadow);
  border-color:color-mix(in srgb, var(--ac-blue) 42%, transparent);
}

/* بلاطة بيضاء صريحة: صور المنتجات مصوَّرة على أبيض */
.wc-block-grid__product-image{ display:block; margin:0; padding:12px 12px 0; }
/* نفس السبب: صندوق أطول وحشو أقلّ حتى تملأ الأجهزة الطويلة مكانها */
.wc-block-grid__product-image img{
  display:block; inline-size:100%; block-size:auto;
  aspect-ratio:1/1.04; object-fit:contain;
  background:var(--ac-tile); border-radius:11px; padding:8px;
  box-shadow:inset 0 0 0 1px var(--ac-img-ring);
}

/* العنوان: سطران، بلا تسطير، بلون النصّ لا بالأزرق */
.wc-block-grid__product-title{
  margin:12px 14px 0; padding:0;
  font-size:.86rem; font-weight:600; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-block-size:2.7em;
}
.wc-block-grid__product-title a,
.wc-block-grid__product-link{ color:var(--ac-text); text-decoration:none; }
.wc-block-grid__product:hover .wc-block-grid__product-title a{ color:var(--ac-blue-d); }

/* السعر: الحالي بارز، والمشطوب صغير رمادي بجانبه */
.wc-block-grid__product-price{
  margin:8px 14px 0; padding:0; margin-block-start:auto;
  font-size:1.06rem; font-weight:800;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px;
}
.wc-block-grid__product-price del,
.wc-block-grid__product-price .wc-block-grid__product-price__regular{
  order:2; font-size:.78rem; font-weight:500; color:var(--ac-muted); opacity:1;
}
.wc-block-grid__product-price ins,
.wc-block-grid__product-price .wc-block-grid__product-price__value{
  order:1; text-decoration:none; color:var(--ac-text);
}
/* سطر «شامل ضريبة القيمة المضافة 15%» كان يأكل سطرين داخل البطاقة */
.wc-block-grid__product-price .woocommerce-Price-taxLabel,
.wc-block-grid__product-price small{
  order:3; flex-basis:100%; font-size:.7rem; font-weight:400;
  color:var(--ac-muted); margin:2px 0 0;
}

/* الزرّ: بعرض البطاقة، بحجم معقول */
.wc-block-grid__product-add-to-cart{ margin:12px 14px 14px; }
.wc-block-grid__product-add-to-cart .wp-block-button__link{
  display:block; inline-size:100%; text-align:center;
  padding:10px 14px; font-size:.9rem; font-weight:700; border-radius:10px;
  background:var(--ac-cta-bg); color:var(--ac-cta-fg);
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover{ background:var(--ac-blue-d); }

/* شارة «سعر العرض»: رقاقة صغيرة لا مستطيل بحدّ.
   نغطّي التسميتين لأن الإصدارات تختلف بينهما. */
.wc-block-grid__product .onsale,
.wc-block-grid__product-onsale{
  position:absolute; inset-block-start:16px; inset-inline-start:16px; z-index:2;
  margin:0; padding:4px 11px; border-radius:999px; border:0;
  background:var(--ac-orange) !important; color:var(--ac-on-brand) !important;
  font-size:.7rem; font-weight:800; line-height:1.6;
  inline-size:auto; min-inline-size:0; min-block-size:0; white-space:nowrap;
}

.wc-block-grid__product-rating{ margin:6px 14px 0; }

/* ══ خيارات التركيب والضمان (صفحة المنتج) ══════════════════════
   الفارق التنافسي الوحيد الذي لا يقلّده أحد: نبيع الجهاز ونركّبه.
   فيأخذ موضعاً بارزاً فوق زرّ الشراء لا سطراً في وصف منسيّ.
   ────────────────────────────────────────────────────────────── */

.ac-addons{ margin:22px 0 20px; }

.ac-addon{
  border:1px solid var(--ac-line); border-radius:14px;
  margin:0 0 12px; padding:14px 16px 12px; background:var(--ac-surface);
}
.ac-addon legend{
  padding:0 6px; font-size:.9rem; font-weight:700; color:var(--ac-blue-d);
}

/* مجموعة مطويّة — الملخّص يحمل العنوان وأرخص سعر، فيبقى العرض مرئياً وهو مطويّ */
.ac-addon-fold{ padding:0; }
.ac-addon-fold > summary{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; cursor:pointer; list-style:none;
  font-size:.9rem; font-weight:700; color:var(--ac-blue-d);
}
.ac-addon-fold > summary::-webkit-details-marker{ display:none; }
.ac-addon-fold > summary::after{
  content:""; inline-size:8px; block-size:8px; margin-inline-start:auto;
  border-inline-end:2px solid var(--ac-muted); border-block-end:2px solid var(--ac-muted);
  transform:rotate(45deg); transition:transform .18s ease;
}
.ac-addon-fold[open] > summary::after{ transform:rotate(-135deg); }
.ac-addon-fold[open] > summary{ border-block-end:1px solid var(--ac-line); }
.ac-addon-fold > *:not(summary){ margin-inline:16px; }
.ac-addon-fold > summary + *{ margin-block-start:12px; }
.ac-addon-fold > *:last-child{ margin-block-end:12px; }
.ac-fold-h{
  margin-inline-start:auto; font-weight:600; font-size:.82rem;
  color:var(--ac-muted); font-variant-numeric:tabular-nums;
}

.ac-addon-opt{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"radio title price" ".  hint  price";
  align-items:center; gap:2px 11px;
  padding:11px 12px; border-radius:11px; cursor:pointer;
  border:1px solid transparent;
  transition:background .16s ease, border-color .16s ease;
}
.ac-addon-opt:hover{ background:var(--ac-surface-hover); }
.ac-addon-opt input{ grid-area:radio; inline-size:18px; block-size:18px; accent-color:var(--ac-blue); margin:0; }
.ac-addon-opt input:checked ~ .ac-addon-t{ color:var(--ac-blue-d); }
.ac-addon-opt:has(input:checked){ background:var(--ac-tint); border-color:var(--ac-blue); }

.ac-addon-t{ grid-area:title; font-size:.95rem; font-weight:600; }
.ac-addon-h{ grid-area:hint;  font-size:.79rem; color:var(--ac-muted); line-height:1.5; }
.ac-addon-opt b{
  grid-area:price; font-size:.95rem; font-weight:800; white-space:nowrap;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  color:var(--ac-text);
}

.ac-addon-note{
  margin:0; font-size:.78rem; color:var(--ac-muted); line-height:1.7;
  padding-inline-start:2px;
}

.ac-addons :focus-visible{ outline:2px solid var(--ac-blue); outline-offset:2px; }

/* ══ صفحة المنتج ═══════════════════════════════════════════════
   القالب من ووكومرس (`single-product` مصدره plugin) ونحن ننسّقه فقط.
   ────────────────────────────────────────────────────────────── */

/* صور المنتج مصوَّرة على أبيض ⇒ بلاطة بيضاء صريحة كما في الشبكة */
.woocommerce-product-gallery{ background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:16px; padding:14px; }
.woocommerce-product-gallery__image img{ border-radius:11px; background:var(--ac-tile); }
.woocommerce-product-gallery__wrapper{ margin:0; }

.wp-block-woocommerce-product-price .wc-block-components-product-price{
  font-size:1.9rem; font-weight:800; letter-spacing:-.4px;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.wp-block-woocommerce-product-price del{ font-size:1rem; font-weight:500; color:var(--ac-muted); }
.wp-block-woocommerce-product-price ins{ text-decoration:none; }
.woocommerce-price-suffix{ display:block; font-size:.76rem; font-weight:400; color:var(--ac-muted); }

.wc-block-breadcrumbs{ font-size:.83rem; color:var(--ac-muted); margin-block:14px 6px; }
.wc-block-breadcrumbs a{ color:var(--ac-muted); text-decoration:none; }
/* محصورٌ في أجهزة المرور — الجوّال يُثبّت :hover بعد اللمس فيعلق التسطير (16/08) */
@media (hover:hover){
  .wc-block-breadcrumbs a:hover{ color:var(--ac-blue-d); text-decoration:none; }
}

.wc-block-add-to-cart-form .quantity input{
  border:1px solid var(--ac-line); border-radius:10px; padding:10px; font:inherit;
}
.wc-block-add-to-cart-form button[type="submit"]{
  background:var(--ac-blue-d); color:var(--ac-cta-fg); border:0; border-radius:11px;
  padding:13px 28px; font-weight:700; font-size:1rem;
}
.wc-block-add-to-cart-form button[type="submit"]:hover{ background:var(--ac-band-strong); }

/* ── تخطيط صفحة المنتج ─────────────────────────────────────── */
.ac-single{ padding-block-end:clamp(40px,6vw,72px); }
.ac-single-top{ margin-block:8px clamp(28px,4vw,48px); }

.ac-prod-title{
  margin:0 0 10px; font-size:clamp(1.25rem,2.4vw,1.75rem);
  line-height:1.45; font-weight:700; letter-spacing:-.01em; text-wrap:balance;
}
.ac-single-sum .wc-block-components-product-rating{ margin-block-end:8px; }

/* شريط الطمأنة أسفل زرّ الشراء */
.ac-assure{
  list-style:none; margin:20px 0 0; padding:16px 18px;
  border:1px solid var(--ac-line); border-radius:14px; background:var(--ac-panel-tint);
  display:grid; gap:11px;
}
.ac-assure li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.87rem; font-weight:500; line-height:1.6;
}
.ac-assure svg{ flex:0 0 auto; margin-block-start:1px; color:var(--ac-blue-d); }

.ac-prod-details{ margin-block-start:clamp(32px,5vw,56px); }
.ac-related{ margin-block-start:clamp(36px,5vw,64px); }
.ac-related h2{ font-size:clamp(1.1rem,2.1vw,1.4rem); margin-block-end:16px; }

@media (max-width:820px){
  .ac-single-top{ gap:24px; }
  .ac-single-top .wp-block-column{ flex-basis:100% !important; }
}

/* ══ صفحة الفئة/المتجر ═════════════════════════════════════════ */
.ac-archive{ padding-block-end:clamp(40px,6vw,72px); }
.ac-archive-title{
  margin:14px 0 6px; font-size:clamp(1.3rem,2.6vw,1.9rem);
  font-weight:700; letter-spacing:-.02em;
}
.ac-archive-desc{ margin:0 0 18px; color:var(--ac-muted); max-width:70ch; line-height:1.8; }

.ac-archive-cols{ margin-block-start:18px; align-items:flex-start; }
.ac-filters{ position:sticky; top:12px; }
.ac-filters .wp-block-woocommerce-product-filters{
  border:1px solid var(--ac-line); border-radius:14px;
  background:var(--ac-surface); padding:14px 16px;
}
.ac-filters .ac-f + .ac-f{
  margin-block-start:14px; padding-block-start:14px;
  border-block-start:1px solid var(--ac-line);
}
.ac-filters h3, .ac-filters legend{
  font-size:.88rem; font-weight:700; color:var(--ac-blue-d); margin:0 0 8px;
}

.ac-archive-bar{
  margin-block-end:16px; padding-block-end:12px;
  border-block-end:1px solid var(--ac-line);
  font-size:.88rem; color:var(--ac-muted);
}
.ac-archive-bar select{
  border:1px solid var(--ac-line); border-radius:10px;
  padding:8px 12px; font:inherit; font-size:.88rem; background:var(--ac-surface);
}

/* 🔑 ترميز ثالث للمنتجات (product-collection) — نفس درس البطاقة:
   لا نفرض شبكة تصطدم بعرض العنصر، بل نضبط أعمدة الشبكة الأصلية. */
.ac-archive .wc-block-product-template{
  display:grid !important; gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none; margin:0; padding:0;
}
.ac-archive .wc-block-product-template__responsive-wrapper,
.ac-archive .wc-block-product-template li{
  inline-size:100% !important; max-inline-size:100% !important;
  width:100% !important; max-width:100% !important;
  margin:0 !important;
  background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:var(--ac-radius); overflow:hidden; padding:10px;
  display:flex; flex-direction:column;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .2s ease;
}
.ac-archive .wc-block-product-template li:hover{
  transform:translateY(-3px); box-shadow:var(--ac-shadow);
  border-color:color-mix(in srgb, var(--ac-blue) 42%, transparent);
}
.ac-archive .wc-block-product-template img{
  inline-size:100%; block-size:auto; aspect-ratio:1/1.04;
  object-fit:contain; background:var(--ac-tile); border-radius:11px; padding:8px;
}
.ac-archive .wc-block-product-template .wp-block-post-title{
  font-size:.86rem; font-weight:600; line-height:1.55; margin:10px 4px 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-block-size:2.7em;
}
.ac-archive .wc-block-product-template .wp-block-post-title a{ text-decoration:none; color:inherit; }
/* 🔴🔴🔴 انحدارٌ عاد بعد إصلاحه — `margin-block-start:auto` نُزع من هنا 28/08.
   القصّة: 07/08 وُضع الدفع على **السعر** وحده، ثم 16/08 وُضع على **الزرّ**
   (سطر «order:5; margin-block-start:auto» أدناه) — ولم يُنزع الأوّل.
   وهامشا `auto` في عمودٍ مرن **يتقاسمان الفراغ الحرّ بالتساوي**، فانفتحت
   فجوتان متساويتان: واحدةٌ **فوق السعر** تفصله عن هوية المنتج، وأخرى فوق الزرّ.
   قِيس حيّاً 28/08 على مكيّف سبلت: 37.84px لكلٍّ — وهو نفسه الرقم الذي
   وثّقته ملاحظة 07/08 (38.86px) حين شُخّص العطب أوّل مرّة.
   ⇒ الدفع على الزرّ وحده: السعر يلتصق بالرقاقات فوقه، والفراغ كلّه أسفل
   تسلسل القراءة لا وسطه. 🔑 والقاعدة: هامش `auto` واحد في العمود.
   🔑 وهذه القاعدة كانت تغلب لاحقتَها بالتخصيص (0,3,0 مقابل 0,2,0) فلم يُجدِ
      `margin-block-start:8px` أدناه شيئاً — التخصيص لا الترتيب. */
.ac-archive .wc-block-product-template .wp-block-woocommerce-product-price{
  margin:8px 4px 0;
  font-size:1.02rem; font-weight:800;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.ac-archive .wc-block-product-template .wp-block-woocommerce-product-button a{
  display:block; text-align:center; margin:10px 4px 4px;
  background:var(--ac-blue-d); color:var(--ac-cta-fg); border-radius:10px;
  padding:10px; font-weight:700; font-size:.9rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media (max-width:1000px){
  .ac-archive .wc-block-product-template{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px){
  .ac-archive-cols{ display:block; }
  .ac-filters{ position:static; flex-basis:auto !important; margin-block-end:18px; }
}

/* حالة فارغة لبلوكات المنتجات: لا تترك فراغاً صامتاً */
.wc-block-grid__products:empty::after,
.ac-products .wc-block-grid__products:empty::after{
  content:"لا توجد منتجات لعرضها بعد."; display:block; text-align:center;
  color:var(--ac-muted); padding:36px 16px; border:1px dashed var(--ac-line);
  border-radius:var(--ac-radius);
}

/* ── العنوان الوطني في صفحة الدفع ──
   تحذير لا خطأ: العميل يمضي رغمه. اللون تنبيه لا خطر، لأن 4.7% من العناوين
   الحقيقية تخالف القاعدة وهي صحيحة لأصحابها. */
.ac-na-warn{
  display:flex; gap:8px; align-items:flex-start;
  margin:6px 0 0; padding:8px 10px;
  font-size:.8125rem; line-height:1.55;
  color:var(--ac-warn-fg); background:var(--ac-warn-bg);
  border:1px solid var(--ac-warn-border); border-radius:8px;
}
.ac-na-warn::before{ content:"⚠"; flex:none; font-size:.95em; line-height:1.6; }

@media (prefers-color-scheme: dark){
  .ac-na-warn{ color:var(--ac-warn-fg-dark); background:var(--ac-warn-bg-dark); border-color:var(--ac-warn-border-dark); }
}

/* ══ قالوا عنّا ═════════════════════════════════════════════════
   كاروسيل اقتباسات يعيد استعمال مكوّن `.ac-slider` القائم (تلاشٍ لا
   تمرير · إيقاف تلقائي · prefers-reduced-motion) ويُلغي عنه تنسيق
   البانر ذا العمودين والنصّ الأبيض — هنا خلفية فاتحة واقتباس واحد.
   يتبع سابقة `.ac-slider--images` في تفتيح أزرار التحكّم.
   ────────────────────────────────────────────────────────────── */

.ac-voices{ margin-block:48px; }

.ac-voices-head{
  padding-block-end:16px; margin-block-end:24px;
  border-block-end:2px solid var(--ac-blue);
}
.ac-voices-head h2{
  margin:0 0 8px; font-size:clamp(1.5rem,3.4vw,2.2rem); font-weight:700;
  color:var(--ac-blue-d); line-height:1.25;
}
.ac-voices-score{
  margin:0 0 8px; font-weight:700; color:var(--ac-on-brand);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.ac-voices-note{
  margin:0; max-width:68ch; font-size:.86rem; line-height:1.8; color:var(--ac-muted);
}

/* الشريحة هنا اقتباس واحد لا بانر بعمودين */
.ac-voices-slider{ background:none; }
.ac-voices-slider::before{ display:none; }
.ac-voices-slider > .ac-slide{
  grid-template-columns:minmax(0,1fr);
  gap:16px; align-content:center; text-align:center;
  padding:32px 24px 56px; min-block-size:196px;
  background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:var(--ac-radius);
}
.ac-voices-slider blockquote{
  margin:0; padding:0; border:0; max-inline-size:58ch; margin-inline:auto;
  font-size:clamp(1.02rem,2.1vw,1.3rem); line-height:1.9; color:var(--ac-on-brand);
}
/* 🔴 حارس: لو لفّ `wpautop` النصّ في <p> ورثَ لون البانر الأبيض واختفى.
   لا تحذف هذا السطر ولو بدا زائداً — هو ما يمنع اقتباساً أبيض على أبيض. */
.ac-voices-slider blockquote p{
  margin:0; color:inherit; font-size:inherit; line-height:inherit; max-inline-size:none;
}
.ac-voices-slider br{ display:none; }
.ac-voice-mark{
  color:var(--ac-blue); font-weight:700; font-size:1.7em;
  line-height:0; vertical-align:-.3em; margin-inline-end:6px;
}
.ac-voices-slider figcaption{
  display:flex; justify-content:center; align-items:baseline;
  gap:10px; flex-wrap:wrap; font-size:.82rem; color:var(--ac-muted);
}
.ac-voice-n{ font-weight:600; color:var(--ac-blue-d); }
.ac-voice-d{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.ac-voice-r{
  display:inline-flex; align-items:center; gap:4px; font-weight:700;
  color:var(--ac-on-brand); font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.ac-voice-star{ inline-size:12px; block-size:12px; fill:var(--ac-gold); }

/* التحكّم على خلفية فاتحة — نفس معالجة `.ac-slider--images` */
.ac-voices-slider .ac-slider-nav{ inset-block-end:14px; inset-inline-start:24px; }
.ac-voices-slider .ac-slider-arrow,
.ac-voices-slider .ac-slider-play{
  background:var(--ac-surface); border-color:var(--ac-line); color:var(--ac-blue-d);
}
.ac-voices-slider .ac-slider-arrow:hover,
.ac-voices-slider .ac-slider-play:hover{ background:var(--ac-tint-hover); }
.ac-voices-slider .ac-dot{ background:var(--ac-line); }
.ac-voices-slider .ac-dot.is-active{ background:var(--ac-blue); }
.ac-voices-slider :focus-visible{ outline-color:var(--ac-blue); }

@media (max-width:820px){
  .ac-voices{ margin-block:32px; }
  .ac-voices-slider > .ac-slide{ padding:24px 16px 52px; }
  .ac-voices-slider .ac-slider-nav{ inset-inline-start:16px; }
}

/* ══ حاسبة السعة ═══════════════════════════════════════════════
   نموذج طباعي لا بطاقة: حقلان وأربعة تحقّقات، والنتيجة تحتها فوراً.
   الحقول باستدارة 18px كما في عقد القالب، والأرقام جدولية.
   ────────────────────────────────────────────────────────────── */

.ac-calc{ margin-block:48px; }
/* 🔴 حارس ضدّ `wpautop`: أي <br> يتسرّب داخل الشبكة يحتلّ خانة ويكسر الأعمدة. */
.ac-calc br{ display:none; }

.ac-calc-head{
  padding-block-end:16px; margin-block-end:24px;
  border-block-end:2px solid var(--ac-blue);
}
.ac-calc-head h2{
  margin:0 0 8px; font-size:clamp(1.5rem,3.4vw,2.2rem); font-weight:700;
  color:var(--ac-blue-d); line-height:1.25;
}
.ac-calc-note{ margin:0; max-width:68ch; font-size:.86rem; line-height:1.8; color:var(--ac-muted); }

.ac-calc-form{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 24px; align-items:start;
}
.ac-calc-row{ display:grid; gap:8px; }
.ac-calc-row label{ font-size:.88rem; font-weight:600; color:var(--ac-blue-d); }
.ac-calc-row input{
  inline-size:100%; padding:12px 14px; font:inherit; font-size:1rem;
  border:1px solid var(--ac-line); border-radius:18px; background:var(--ac-surface);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.ac-calc-row input:focus-visible{ outline:2px solid var(--ac-blue); outline-offset:2px; }

/* 🔴 الشبكة على `.ac-calc-checks-grid` لا على `fieldset`: الـfieldset لا يقبل
   `grid-template-columns` بموثوقية فتنهار الخيارات إلى عمود واحد. */
.ac-calc-checks{ grid-column:1/-1; margin:0; padding:0; border:0; }
.ac-calc-checks-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px;
}
.ac-calc-checks legend{
  padding:0; margin-block-end:8px; font-size:.88rem; font-weight:600; color:var(--ac-blue-d);
}
.ac-calc-checks label{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.92rem; line-height:1.6; cursor:pointer;
}
.ac-calc-checks input{
  inline-size:18px; block-size:18px; margin:2px 0 0; accent-color:var(--ac-blue); flex:none;
}

.ac-calc-out{
  display:block; margin-block-start:24px; padding-block-start:16px;
  border-block-start:1px solid var(--ac-line);
}
.ac-calc-btu{
  margin:0 0 4px; font-size:1.5rem; font-weight:800; color:var(--ac-on-brand);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.ac-calc-btu span{ font-size:1rem; font-weight:600; color:var(--ac-muted); }
.ac-calc-pick{ margin:0 0 12px; font-size:1.05rem; color:var(--ac-blue-d); }
.ac-calc-pick strong{ font-weight:800; }
.ac-calc-go{
  display:inline-block; padding:11px 20px; border-radius:11px;
  background:var(--ac-blue-d); color:var(--ac-cta-fg); text-decoration:none; font-weight:700; font-size:.95rem;
}
.ac-calc-go:hover{ background:var(--ac-cta-hover-strong); color:var(--ac-cta-fg); }
.ac-calc-big{ margin:0 0 8px; line-height:1.8; color:var(--ac-on-brand); }
.ac-calc-why{
  margin:16px 0 0; padding-inline-start:18px;
  font-size:.84rem; line-height:1.9; color:var(--ac-muted);
}
.ac-calc-fine{
  margin:12px 0 0; font-size:.78rem; line-height:1.8; color:var(--ac-muted); max-width:70ch;
}

@media (max-width:820px){
  .ac-calc{ margin-block:32px; }
  .ac-calc-form, .ac-calc-checks-grid{ grid-template-columns:minmax(0,1fr); }
}

/* تنبيه موعد التركيب — «تفضيل لا حجز» */
.ac-book-note{
  margin:6px 0 14px; font-size:.8rem; line-height:1.7; color:var(--ac-muted);
}

/* ══ صفحة الدفع — إدخالها في نظام القالب ═══════════════════════
   السجل هنا **product**: التصميم يخدم إتمام المهمة لا يزاحمها.
   ووكومرس يصيّر الدفع ببلوكاته الافتراضية (حدّ أسود 80% · استدارة 4px ·
   ملخّص عارٍ)، بينما الأزرار كانت منسّقة — فبدت الصفحة نصف مبنيّة.
   لا نغيّر ترميزاً ولا سلوكاً: قشرة بصرية فقط على رموز theme.json.
   ────────────────────────────────────────────────────────────── */

/* ── الحقول ─────────────────────────────────────────────────── */
.wc-block-checkout .wc-block-components-text-input input[type="text"],
.wc-block-checkout .wc-block-components-text-input input[type="email"],
.wc-block-checkout .wc-block-components-text-input input[type="tel"],
.wc-block-checkout .wc-block-components-text-input input[type="number"],
.wc-block-checkout .wc-block-components-textarea,
.wc-block-checkout .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-checkout .wc-block-components-select .wc-block-components-select__container,
.wc-block-checkout select{
  border:1px solid var(--ac-line);
  border-radius:18px;
  background:var(--ac-surface);
  color:var(--ac-text);
  box-shadow:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.wc-block-checkout .wc-block-components-text-input input:hover,
.wc-block-checkout .wc-block-components-select__container:hover{ border-color:var(--ac-line-hover); }

/* حلقة تركيز واحدة واضحة بدل ظلّ ووكومرس الداخلي */
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-textarea:focus,
.wc-block-checkout select:focus,
.wc-block-checkout .wc-block-components-combobox-control input:focus{
  border-color:var(--ac-blue);
  box-shadow:var(--ac-ring);
  outline:none;
}

/* التسمية العائمة: رمادية ساكنة، زرقاء عند التركيز — لا تنافس القيمة */
.wc-block-checkout .wc-block-components-text-input label{ color:var(--ac-muted); }
.wc-block-checkout .wc-block-components-text-input.is-active label{
  color:var(--ac-blue-d); font-weight:600;
}

/* خطأ الحقل: الحدّ واللون معاً — اللون وحده لا يكفي لمن لا يميّزه */
.wc-block-checkout .wc-block-components-text-input.has-error input{
  border-color:var(--ac-danger);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ac-danger) 12%, transparent);
}
.wc-block-checkout .wc-block-components-validation-error{
  color:var(--ac-danger); font-size:.8rem; line-height:1.7; margin-block-start:4px;
}

/* ── عناوين الأقسام: درجة واضحة فوق النصّ العادي ─────────────── */
.wc-block-checkout .wc-block-components-checkout-step__heading,
.wc-block-checkout .wc-block-components-title{
  font-size:1.06rem; font-weight:700; color:var(--ac-blue-d); line-height:1.4;
}
.wc-block-checkout .wc-block-components-checkout-step{
  padding-block-end:24px; margin-block-end:24px;
  border-block-end:1px solid var(--ac-line);
}
.wc-block-checkout .wc-block-components-checkout-step:last-of-type{
  border-block-end:0; margin-block-end:0;
}
.wc-block-checkout .wc-block-components-checkout-step__description{
  color:var(--ac-muted); font-size:.86rem; line-height:1.8;
}

/* ── ملخّص الطلب: لوحة لا عمود عارٍ ─────────────────────────── */
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-sidebar{
  background:var(--ac-surface);
  border:1px solid var(--ac-line);
  border-radius:var(--ac-radius);
  padding:24px;
}
.wc-block-checkout .wc-block-components-order-summary__title{
  font-size:1rem; font-weight:700; color:var(--ac-blue-d);
}
.wc-block-checkout .wc-block-components-order-summary-item{
  padding-block:16px; border-block-end:1px solid var(--ac-line);
}
.wc-block-checkout .wc-block-components-order-summary-item:last-child{ border-block-end:0; }

/* الأرقام جدولية في كل الملخّص — الأعمدة تصطفّ بلا اهتزاز */
.wc-block-checkout .wc-block-components-totals-item,
.wc-block-checkout .wc-block-components-formatted-money-amount,
.wc-block-checkout .wc-block-components-product-price{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.wc-block-checkout .wc-block-components-totals-footer-item{
  font-size:1.12rem; font-weight:800; color:var(--ac-on-brand);
  padding-block-start:16px; border-block-start:1px solid var(--ac-line);
}

/* ── خيارات الشحن والدفع: صفوف قابلة للنقر بحدّ واحد ────────── */
/* 🔴 لا تضبط الحشو الجانبي هنا: ووكومرس يحجز به مكان زرّ الاختيار المطلق،
   وإلغاؤه يجعل الزرّ يركب أول الكلمة فيُقرأ «وم التوصيل» بدل «رسوم التوصيل».
   وقع فعلاً 2026-08-04. المحور الكتلي وحده لنا. */
.wc-block-checkout .wc-block-components-radio-control__option{
  border:1px solid var(--ac-line); border-radius:var(--ac-radius);
  padding-block:14px; margin-block-end:8px; background:var(--ac-surface);
  transition:border-color .16s ease, background .16s ease;
}
.wc-block-checkout .wc-block-components-radio-control__option:hover{ background:var(--ac-surface-hover); }
.wc-block-checkout .wc-block-components-radio-control__option--checked{
  border-color:var(--ac-blue); background:var(--ac-tint);
}
.wc-block-checkout .wc-block-components-radio-control__input{ accent-color:var(--ac-blue); }

/* ── القسيمة: لوحة مطويّة لا صندوق غريب ─────────────────────── */
.wc-block-checkout .wc-block-components-panel__button{
  font-weight:600; color:var(--ac-blue-d);
}

/* ── التنبيهات ─────────────────────────────────────────────── */
.wc-block-checkout .wc-block-components-notice-banner{
  border-radius:var(--ac-radius); border-width:1px;
  font-size:.9rem; line-height:1.8;
}

@media (min-width:1024px){
  /* الملخّص يرافق التمرير: العميل يرى ما يدفعه وهو يملأ عنوانه */
  .wc-block-checkout__sidebar{ position:sticky; top:16px; align-self:start; }
}
@media (max-width:781px){
  .wc-block-checkout .wc-block-components-sidebar{ padding:16px; }
}

/* ── فاحص التوصيل على صفحة المنتج ──────────────────────────── */
.ac-ship{ margin-block:16px 4px; }
.ac-ship label{
  display:block; margin-block-end:8px;
  font-size:.86rem; font-weight:600; color:var(--ac-blue-d);
}
.ac-ship-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ac-ship-row input{
  inline-size:9ch; padding:10px 14px; font:inherit; font-size:.95rem;
  border:1px solid var(--ac-line); border-radius:18px; background:var(--ac-surface);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.ac-ship-row input:focus-visible{ outline:2px solid var(--ac-blue); outline-offset:2px; }
.ac-ship-out{ font-size:.86rem; line-height:1.7; color:var(--ac-muted); }
.ac-ship-out.is-free{ color:var(--ac-ok); font-weight:600; }
.ac-ship-out.is-paid{ color:var(--ac-on-brand); font-weight:600; }

/* 🔴 شريط الفئات يمرّر أفقياً عمداً (محتواه 638 في 358)، لكن ستة بكسلات
   تتسرّب إلى المستند فتهتزّ الصفحة جانبياً على الجوال بلا فائدة.
   `clip` لا `hidden`: الأخير يكسر `position:sticky` في الأسلاف. */
@media (max-width:820px){
  html, body{ overflow-x:clip; }
}

/* ── أقصى موعد للتسليم (م8) ────────────────────────────────── */
.ac-eta-note{
  margin:10px 0 0; font-size:.82rem; line-height:1.75; color:var(--ac-muted);
  max-width:62ch;
}
.ac-eta-order{
  margin:16px 0 0; padding:14px 16px; line-height:1.9;
  border:1px solid var(--ac-line); border-radius:var(--ac-radius);
  background:var(--ac-surface);
}
.ac-eta-order strong{ color:var(--ac-blue-d); }
.ac-eta-order span{ font-size:.82rem; color:var(--ac-muted); }

/* حجز مسبق — تمييز بصري هادئ لا صارخ: هو حالة لا تحذير */
.ac-eta-note.is-preorder{
  padding:12px 14px; border:1px solid var(--ac-line); border-radius:var(--ac-radius);
  background:var(--ac-surface); color:var(--ac-text);
}
.ac-eta-note.is-preorder strong{ color:var(--ac-blue-d); }
.ac-eta-order.is-preorder strong{ color:var(--ac-blue-d); }

/* ══ نظام اللون والخط — طبقة توحيد ═════════════════════════════
   تُقرأ آخراً فتغلب ما سبقها. الغرض: توحيد المتجر على ألوان الهوية
   الرسمية وخطّ واحد بأربعة أدوار، على قماشة فاتحة.

   🔴 الأزرق `#1289A7` تباينه مع الأبيض 4.11 فقط ⇒ لا يصلح خلفيةً لنصّ
      صغير ولا لوناً لنصّ صغير على أبيض. المشتقّ `#0D6B82` (6.05) هو لون
      النصّ، و`#08536A` نهاية التدرّج.
   🔑 الذهبي والبرتقالي **علامة لا زينة**: سعر، عرض، تقييم — لا مساحات.
   ────────────────────────────────────────────────────────────── */

:root{
  --ac-surface-2: var(--wp--preset--color--surface-2, #F2F7FB);
  --ac-blue-xd:   var(--wp--preset--color--brand-blue-xd, #08536A);

  /* ── رموز المهمّة ٥: أسطح المجموعة أ — كل قيمة أدناه لا رمز مطابق لها
     سلفاً، فأُفردت باسمٍ دلاليّ بدل إلحاقها بأقرب رمز (قرار المالك).

     🧭 دليل مهمّة ٩ (الانقلاب) — قسمان صريحان يفصلان بينهما التعليقات أدناه:
     • «ينقلب» = ستُعاد كتابة قيمته داخل كتلة الوضع الغامق لاحقاً؛ الاسم دورٌ
       وظيفيّ لا درجة ظلّ، لأن الظلّ نفسه سيتغيّر.
     • «مُجمَّد» = يبقى بقيمته الحالية في الوضعين، وسبب التجميد مكتوب بكلمتين.
     مرجع من مهمّة ٤ (لم يُنشأ هنا): --ac-tile مُجمَّد (صورة منتج) ·
     --ac-cta-fg مُجمَّد (نصّ ثابت). ── */

  /* ينقلب — تلوينات فاتحة (سطح/رقاقة/تحويم) */
  --ac-tint:          #EAF4FA;  /* تلوين خفيف — شريط المزايا وحالات الاختيار */
  --ac-tint-hover:    #EAF6FC;  /* تحويم الروابط/الأزرار الفاتحة */
  --ac-tint-strong:   #DCEEF6;  /* تركيز أعمق داخل المنسدلة الفرعية */
  --ac-chip-bg:       #F1F5F9;  /* رقاقة المستوى الثالث — راحة */
  --ac-surface-hover: #F3F8FB;  /* تحويم صفّ اختيار (إضافة/راديو) */
  --ac-catgrid-bg:    #E8F1F8;  /* بلاطة شبكة الفئات المزرقّة */
  --ac-panel-tint:    #F7FBFD;  /* صندوق شريط الطمأنة */
  --ac-chip-hot-bg:   #FFF4E6;  /* رقاقة «الأكثر طلباً» */
  --ac-warn-bg:       #FFF6E6;  /* تحذير العنوان الوطني — فاتح */

  /* ينقلب — لهجات العلامة الغامقة وتحويماتها (سُمّيت بالدور لا بعمق الظلّ،
     جولة إصلاح ١: --ac-blue-deep/xxd/xxxd/alt/alt-d القديمة استُبدلت) */
  --ac-band-strong:      #0A5468;  /* لهجة قويّة: شريط الخدمة + نهاية تدرّج
                                       البانر + تحويم زرّ الشراء. تنقلب فعلاً —
                                       تفتح إلى #12798F بقرار المالك (مهمّة ٩) */
  --ac-cta-hover:        #06455F;  /* تحويم أزرار الدخول بالجوال/تتبّع الطلب/
                                       قنوات الصيانة (ثلاثة مواضع) */
  --ac-cta-hover-strong: #063D55;  /* تحويم زرّ حاسبة السعة — درجة أغمق
                                       ومستقلّة عن --ac-cta-hover */
  --ac-band-alt-start:   #0B5E6E;  /* بداية تدرّج البنر الثاني (يغاير الأول
                                       عمداً حتى لا يبدو نسخة مكرّرة) */
  --ac-band-alt-end:     #07414C;  /* نهاية نفس التدرّج */
  --ac-orange-d:         #E67A02;  /* تحويم زرّ برتقاليّ */
  --ac-danger-d:         #A82222;  /* تحويم زرّ خطر */

  /* ينقلب — رموز المهمّة ٦: نصوص تقترن بخلفيات مُعلَّمة "ينقلب" أعلاه، فتنقلب
     معها حتى لا يبقى نصّ داكن فوق سطح صار غامقاً (مهمّة ٩ تحسم درجاتها) */
  --ac-ink-2:      #33505D;  /* فقرة نصّ ثانوية تحت عنوان الشريحة الرئيسية —
                                 كانت تعتمد على fallback غير مُعرَّف، عُرِّفت هنا */
  --ac-chip-hot-fg: #8A4A00; /* نصّ رقاقة «الأكثر طلباً» فوق --ac-chip-hot-bg */
  --ac-warn-fg:     #7A4A00; /* نصّ تحذير العنوان الوطني فوق --ac-warn-bg */

  /* ينقلب — رموز المهمّة ٧: حدود وظلال فوق أسطح مُعلَّمة "ينقلب" (--ac-surface/
     --ac-warn-bg)، فتتبع أمّها ولا تكتفي بصيغة شفّافة تلقائية — الظلال خصوصاً
     ستُعاد كتابتها كاملة في مهمّة ٩ (ظلّ أسود على أسود لا يُرى)، والحدّان
     الصلبان أدناه يتبعان خلفيتيهما "الينقلب" بنفس المنطق. */
  --ac-shadow-panel:        0 14px 34px rgba(11,21,36,.13);  /* ظلّ منسدلة الفئات — سطح المكتب */
  --ac-shadow-panel-mobile: 0 18px 40px rgba(11,21,36,.22);  /* نفس المنسدلة — الشكل الثابت بالجوال */
  --ac-shadow-card:         0 1px 2px rgba(11,21,36,.04), 0 4px 12px rgba(11,21,36,.05);  /* بطاقة شبكة WooCommerce — سكون */
  --ac-shadow-card-hover:   0 2px 4px rgba(11,21,36,.06), 0 12px 28px rgba(11,21,36,.10); /* نفس البطاقة — تحويم/تركيز */
  --ac-shadow-card-glow:    0 6px 22px rgba(6,69,95,.10);    /* توهّج تحويم بطاقة الشكل «مرتّبة» */
  --ac-shadow-card-glow-sm: 0 4px 16px rgba(6,69,95,.09);    /* نفس التوهّج — الشكل «مضغوطة» */
  --ac-shadow-suggest:      0 10px 28px rgba(8,83,106,.14);  /* ظلّ قائمة اقتراحات البحث */
  --ac-warn-border:  #F5D48A;  /* حدّ تحذير العنوان الوطني — فوق --ac-warn-bg الينقلب */
  --ac-line-hover:   #CBD5E1;  /* حدّ حقل الدفع عند التحويم — فوق --ac-surface الينقلب */

  /* ينقلب — فئة «شفّاف يتكيّف» (قرار المالك، جولة إصلاح ١): الحبر الصلب فوق
     خلفية color-mix(…, transparent)/rgba() لا يتكيّف تلقائياً كما تتكيّف
     خلفيته — يسقط تباينه إلى ~2.3 إن بقي مُجمَّداً فوق أرضية غامقة، فينقلب
     دائماً ولو بقيت قيمة أساس الخلفية المُختلَط ثابتة (أدناه، مُجمَّد كما هو). */
  --ac-ok-ink:      #0B6B54;  /* نصّ حالة «مكتمل» + رسالة نجاح OTP — خلفيته شفّافة ⇒ الحبر ينقلب */
  --ac-neutral-ink: #4A5560;  /* نصّ حالة «ملغاة» — خلفيته شفّافة ⇒ الحبر ينقلب */
  --ac-amber-ink:   #7A5200;  /* نصّ حالة «مسترجَع» + تحذير الطلب القديم +
                                  رقاقة المواصفات — خلفيته شفّافة ⇒ الحبر ينقلب */

  /* مُجمَّد — أساسات حالة تُستهلَك دائماً عبر color-mix(…, transparent):
     الشفافية نفسها تتكيّف مع أي خلفية خلفها فلا تحتاج قيمة غامقة منفصلة
     (حبرها فوقها مختلفٌ: ينقلب — انظر الفئة أعلاه) */
  --ac-ok-2:      #2DD4A7;  /* أخضر ساطع — حالة طلب مكتمل/رسالة نجاح */
  --ac-neutral:   #8B98A5;  /* رمادي محايد — حالة طلب ملغى */
  --ac-warn:      #FFB020;  /* كهرماني — حالة طلب مسترجَع */
  --ac-danger-2:  #FF4D4D;  /* أحمر ساطع — رسالة خطأ OTP */

  /* مُجمَّد — رموز المهمّة ٦: نصّ فوق علامة ثابتة صلبة (لا color-mix) — تبقى
     بقيمتها الحالية في الوضعين. راجع المسطرة في تقرير المهمّة ٦ (جولة إصلاح ١):
     خلفية صلبة من لون علامة ⇒ الحبر مُجمَّد؛ خلفية شفّافة ⇒ الحبر ينقلب. */
  --ac-gold-ink:    #3A2A00;  /* نصّ شارة «توفير» فوق --ac-gold الصلب (background:var(--ac-gold) لا color-mix) */

  /* مُجمَّد — رمز المهمّة ٧: ظلّ فوق --ac-tile الأبيض الدائم (بلاطة صورة
     السلايدر) — الأرضية لا تنقلب فلا داعي لإعادة كتابة الظلّ في مهمّة ٩. */
  --ac-shadow-tile: 0 14px 38px rgba(3,20,32,.32);

  /* مُجمَّد — استثناء صريح: تحمل قيمة قاعدة prefers-color-scheme:dark أصيلة
     كانت في الملف قبل هذا المشروع بالكامل؛ لا تخضع لنظام انقلابنا ولا تُقلَّد
     كنمط لرمز جديد آخر — راجع تقرير المهمّة ٥ لسبب الاستثناء. */
  --ac-warn-bg-dark:  #3A2A05;
  --ac-warn-fg-dark:  #FFD79A;  /* نفس الاستثناء — نصّ .ac-na-warn داخل نفس
                                    القاعدة الأصيلة (مهمّة ٦) */
  --ac-warn-border-dark: #7A5A12;  /* نفس الاستثناء — حدّ .ac-na-warn داخل نفس القاعدة (مهمّة ٧) */

  /* تدرّجات بأدوار لا زخرفة */
  /* 🔴 يبدأ من `#0D6B82` لا `#1289A7`: الأخير يعطي الأبيض **4.07** فقط ⇒ تسقط
     فقرات البانر دون حدّ 4.5. المدى هنا 6.10 → 8.55 → 10.3، كلّه آمن للنصّ
     العادي مع بقاء عمق مرئي. قِيس 2026-08-04 لا قُدِّر. */
  --ac-grad-brand: linear-gradient(135deg, #0D6B82 0%, #08536A 55%, #06455F 100%);
  --ac-grad-soft:  linear-gradient(180deg, #FFFFFF 0%, #F2F7FB 100%);
  --ac-grad-gold:  linear-gradient(135deg, #F0AB1D 0%, #FF9C00 100%);

  /* ينقلب — حلقة التركيز (مهمّة ٨ب): اللون مفصول عن الشكل ليقلبه الوضع الغامق
     وحده. القيمة السابقة كانت rgba(18,137,167,.16) مباشرة داخل --ac-ring —
     بعد المزج مع أرضية الصفحة: 1.21 على الفاتح · 1.19 على الغامق، كلاهما دون
     3:1 (عيبٌ في الوضعين لا في الغامق وحده). مهمّة ٩ تضيف قيمة الغامق
     #23B5E8 (7.89) هنا. */
  --ac-ring-color: #0D6B82;   /* الفاتح — 5.73 */
  --ac-ring:       0 0 0 3px var(--ac-ring-color);
}

/* ── الخط: أربعة أوزان لأربعة أدوار ───────────────────────── */
body{
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  font-weight:400;
  line-height:1.85;                 /* العربي يحتاج تنفّساً أكثر من اللاتيني */
  letter-spacing:0;                 /* لا تتبّع سالب على العربي — يلصق الحروف */
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,
.wp-block-heading{
  font-weight:700;
  line-height:1.3;
  letter-spacing:-0.01em;           /* على اللاتيني وحده يظهر أثره */
}
h1,.ac-open h1{ line-height:1.18; }

/* الأدوار الثانوية: وزن لا حجم — الحجم مشغول بالهرمية */
.ac-voices-score,
.ac-calc-row label,
.ac-calc-checks legend,
.ac-ship label,
.wc-block-checkout .wc-block-components-checkout-step__heading{ font-weight:600; }

.ac-voice-d, .ac-eta-note, .ac-calc-fine, .ac-voices-note,
.ac-calc-note, .ac-addon-h, .ac-ship-out{ font-weight:400; }

/* الأرقام جدولية أينما قورنت — الأسعار والمواعيد والعدادات */
.woocommerce-Price-amount, .wc-block-components-formatted-money-amount,
.ac-calc-btu, .ac-voices-score, .ac-cat-panel b{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}

/* ── الحقول اللونية: تدرّج الهوية الرسمي ───────────────────── */
.ac-band{ background-image: var(--ac-grad-brand); }

/* ── الأسطح المرتفعة: تدرّج همسي يرفعها عن القماشة ────────── */
.ac-voices-slider > .ac-slide,
.ac-eta-order,
.ac-addon,
.wc-block-checkout .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-radio-control__option{
  background-image: var(--ac-grad-soft);
}

/* ── الذهبي: نادر ومقصود ──────────────────────────────────── */
.ac-voice-star{ fill:url(#ac-gold) var(--ac-gold); }
.onsale, .wc-block-components-product-badge{
  background-image: var(--ac-grad-gold);
  color:var(--ac-on-brand); border:0; font-weight:700;
}

/* ── التركيز: حلقة واحدة في كل المتجر ─────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--ac-blue);
  outline-offset:2px;
  border-radius:6px;
}

/* 🔴🔴 شريط الخدمة: كان مكتوباً `display:grid` وله قاعدتا استجابة (900px و520px)
   **لم تعملا يوماً** — ووردبريس يضع `is-layout-flex` على العنصر نفسه فيغلب
   الإعلان، فيبقى أربعة أعمدة حتى على 390px وتنكسر «قطع غيار أصلية» ثلاثة
   أسطر. نعيد الشبكة بمحدّد أعلى (`.ac-svc .ac-svc-in`) فتحيا القاعدتان.
   وصفّان أفضل من عمود واحد على الجوال: أربعة صفوف تدفع المحتوى بعيداً. */
.ac-svc .ac-svc-in{ display:grid; }
@media (max-width:520px){
  .ac-svc .ac-svc-in{ grid-template-columns:repeat(2,1fr); row-gap:14px; }
}
@media (max-width:360px){
  .ac-svc .ac-svc-in{ grid-template-columns:1fr; }
}

/* ══ بطاقة المنتج — أرضية الصنعة ════════════════════════════════
   البطاقة مبنيّة جيداً سلفاً؛ هذه الطبقة تسدّ ما ينقصها لا تعيد بناءها.
   ────────────────────────────────────────────────────────────── */

/* ١) ارتفاع عند السكون: البطاقة البيضاء على قماشة فاتحة بحدّ 1px تبدو
   مرسومة لا موضوعة. ظلّان بإزاحة وضبابية — لا هالة بلا إزاحة. */
.wc-block-grid__product{
  box-shadow:var(--ac-shadow-card);
}
.wc-block-grid__product:hover{
  box-shadow:var(--ac-shadow-card-hover);
}

/* ٢) 🔴 التركيز: لم تكن للبطاقة أي معالجة — من ينتقل بلوحة المفاتيح
   لا يعرف أين هو. `:focus-within` يعطيها نفس وضوح المرور، والحلقة
   على الرابط نفسه تبقى لمن يحتاج حدّاً صريحاً. */
.wc-block-grid__product:focus-within{
  transform:translateY(-3px);
  border-color:var(--ac-blue);
  box-shadow:var(--ac-shadow-card-hover);
}
.wc-block-grid__product a:focus-visible{
  outline:2px solid var(--ac-blue); outline-offset:2px; border-radius:8px;
}

/* ٣) حارس الحركة يغطّي البطاقة صراحةً: الرفع حركة، ومن طلب تقليلها
   يجب ألا تُفرض عليه — يبقى التمييز باللون والظلّ وحدهما. */
@media (prefers-reduced-motion:reduce){
  .wc-block-grid__product,
  .wc-block-grid__product:hover,
  .wc-block-grid__product:focus-within{ transform:none; transition:none; }
}

/* روابط التذييل: قائمة بلا نقاط، بلون النصّ الثانوي وتوضّح عند المرور */
.ac-foot-links{ list-style:none; margin:0; padding:0; }
.ac-foot-links li{ margin:0; }
.ac-foot-links a{ color:var(--ac-muted); text-decoration:none; }
.ac-foot-links a:hover{ color:var(--ac-blue-d); text-decoration:none; }
.ac-foot-links a:focus-visible{ color:var(--ac-blue-d); text-decoration:underline; }

/* ── خصوصية الحساب ─────────────────────────────────────────── */
.ac-priv h3{ font-size:1.05rem; font-weight:700; color:var(--ac-blue-d); margin:0 0 8px; }
.ac-priv hr{ border:0; border-block-start:1px solid var(--ac-line); margin-block:28px; }
.ac-priv-check{ display:flex; align-items:flex-start; gap:10px; margin-block-end:8px; cursor:pointer; }
.ac-priv-check input{ inline-size:18px; block-size:18px; margin:3px 0 0; accent-color:var(--ac-blue); flex:none; }
.ac-priv-note{ margin:0 0 14px; font-size:.85rem; line-height:1.85; color:var(--ac-muted); max-width:70ch; }
.ac-priv-note strong{ color:var(--ac-text); }
.ac-priv-danger{ background:var(--ac-danger) !important; color:var(--ac-cta-fg) !important; }
.ac-priv-danger:hover{ background:var(--ac-danger-d) !important; }

/* ══ الدخول بالجوال ═════════════════════════════════════════════ */
.ac-otp{
  max-inline-size:520px; margin-block-end:32px; padding:24px;
  border:1px solid var(--ac-line); border-radius:var(--ac-radius);
  background-image:var(--ac-grad-soft);
}
.ac-otp h2{ margin:0 0 6px; font-size:1.15rem; font-weight:700; color:var(--ac-blue-d); }
.ac-otp-note{ margin:0 0 18px; font-size:.86rem; line-height:1.8; color:var(--ac-muted); }
.ac-otp label{ display:block; margin-block-end:8px; font-size:.88rem; font-weight:600; color:var(--ac-blue-d); }
.ac-otp input{
  inline-size:100%; padding:12px 16px; font:inherit; font-size:1.05rem;
  border:1px solid var(--ac-line); border-radius:18px; background:var(--ac-surface);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; letter-spacing:.04em;
}
.ac-otp input:focus-visible{ outline:2px solid var(--ac-blue); outline-offset:2px; }
#ac-otp-code{ text-align:center; font-size:1.5rem; letter-spacing:.5em; padding-inline-start:.5em; }
.ac-otp button{
  margin-block-start:12px; padding:12px 22px; border:0; border-radius:11px; cursor:pointer;
  font:inherit; font-weight:700; background:var(--ac-blue-d); color:var(--ac-cta-fg);
}
.ac-otp button:hover{ background:var(--ac-cta-hover); }
.ac-otp button:disabled{ opacity:.6; cursor:progress; }
.ac-otp .ac-otp-back{ background:transparent; color:var(--ac-muted); font-weight:500; padding-inline:10px; }
/* محصورٌ في أجهزة المرور — الجوّال يُثبّت :hover بعد اللمس فيعلق التسطير (16/08) */
@media (hover:hover){
  .ac-otp .ac-otp-back:hover{ background:transparent; color:var(--ac-blue-d); text-decoration:none; }
}
.ac-otp-msg{ margin:14px 0 0; font-size:.88rem; line-height:1.8; min-block-size:1.4em; }
.ac-otp-msg.is-error{ color:var(--ac-danger); font-weight:600; }
.ac-otp-msg.is-ok{ color:var(--ac-ok); font-weight:600; }

/* ══ الطلبات التاريخية المستوردة ═══════════════════════════════ */
.ac-ostatus{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:.8rem; font-weight:600; line-height:1.6;
  background:var(--ac-surface-2); color:var(--ac-blue-d);
  border:1px solid var(--ac-line);
}
.ac-ostatus--completed{ background:color-mix(in srgb, var(--ac-ok-2) 12%, transparent); color:var(--ac-ok-ink); border-color:color-mix(in srgb, var(--ac-ok-2) 35%, transparent); }
.ac-ostatus--cancelled{ background:color-mix(in srgb, var(--ac-neutral) 14%, transparent); color:var(--ac-neutral-ink); }
.ac-ostatus--refunded { background:color-mix(in srgb, var(--ac-warn) 14%, transparent);  color:var(--ac-amber-ink); border-color:color-mix(in srgb, var(--ac-warn) 35%, transparent); }
.ac-ostatus--processing,
.ac-ostatus--on-hold,
.ac-ostatus--pending  { background:color-mix(in srgb, var(--ac-blue-2) 12%, transparent); color:var(--ac-blue-d); border-color:color-mix(in srgb, var(--ac-blue-2) 35%, transparent); }

.ac-oldorder{
  margin-block-end:28px; padding:18px 20px;
  border:1px solid var(--ac-line); border-radius:var(--ac-radius);
  background-image:var(--ac-grad-soft);
}
.ac-oldorder-note{ margin:0 0 14px; font-size:.86rem; line-height:1.8; color:var(--ac-muted); }
.ac-oldorder-grid{
  display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:0;
  font-size:.9rem; align-items:baseline;
}
.ac-oldorder-grid dt{ font-weight:600; color:var(--ac-muted); }
.ac-oldorder-grid dd{ margin:0; color:var(--ac-text); font-variant-numeric:tabular-nums; }
.ac-oldorder-warn{
  margin:14px 0 0; padding-block-start:12px; border-top:1px solid var(--ac-line);
  font-size:.84rem; line-height:1.8; color:var(--ac-amber-ink);
}
@media (max-width:520px){
  .ac-oldorder-grid{ grid-template-columns:1fr; gap:2px 0; }
  .ac-oldorder-grid dd{ margin-block-end:10px; }
}

/* ══ تتبّع الطلب ═══════════════════════════════════════════════ */
.ac-track{ max-inline-size:760px; margin-inline:auto; }
.ac-track-form{
  padding:24px; border:1px solid var(--ac-line); border-radius:var(--ac-radius);
  background-image:var(--ac-grad-soft);
}
.ac-track-fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ac-track-fields label{ display:block; margin-block-end:8px; font-size:.88rem; font-weight:600; color:var(--ac-blue-d); }
.ac-track-fields input{
  inline-size:100%; padding:12px 16px; font:inherit; font-size:1.02rem;
  border:1px solid var(--ac-line); border-radius:18px; background:var(--ac-surface);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.ac-track-fields input:focus-visible{ outline:2px solid var(--ac-blue); outline-offset:2px; }
.ac-track-form button{
  margin-block-start:18px; padding:12px 26px; border:0; border-radius:11px; cursor:pointer;
  font:inherit; font-weight:700; background:var(--ac-blue-d); color:var(--ac-cta-fg);
}
.ac-track-form button:hover{ background:var(--ac-cta-hover); }
.ac-track-msg{ margin:14px 0 0; font-size:.9rem; line-height:1.8; }
.ac-track-msg.is-error{ color:var(--ac-danger); font-weight:600; }
.ac-track-hint{ margin:16px 0 0; font-size:.84rem; line-height:1.8; color:var(--ac-muted); }

.ac-track-card{
  padding:24px; border:1px solid var(--ac-line); border-radius:var(--ac-radius); background:var(--ac-surface);
}
.ac-track-head{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding-block-end:18px; margin-block-end:18px; border-bottom:1px solid var(--ac-line);
}
.ac-track-label{ display:block; font-size:.8rem; color:var(--ac-muted); }
.ac-track-no{ font-size:1.35rem; font-weight:700; color:var(--ac-blue-d); font-variant-numeric:tabular-nums; }
.ac-track-grid{
  display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:0 0 24px;
  font-size:.92rem; align-items:baseline;
}
.ac-track-grid dt{ font-weight:600; color:var(--ac-muted); }
.ac-track-grid dd{ margin:0; color:var(--ac-text); font-variant-numeric:tabular-nums; }
.ac-track-sub{ margin:0 0 12px; font-size:1rem; font-weight:700; color:var(--ac-blue-d); }
.ac-track-items{ margin:0 0 20px; padding:0; list-style:none; }
.ac-track-items li{
  display:flex; gap:12px; align-items:baseline; justify-content:space-between;
  padding-block:11px; border-bottom:1px solid var(--ac-line); font-size:.92rem;
}
.ac-track-items li:last-child{ border-bottom:0; }
.ac-track-item-name{ flex:1; line-height:1.7; }
.ac-track-qty{ color:var(--ac-muted); font-variant-numeric:tabular-nums; }
.ac-track-amt{ font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ac-track-ship .ac-track-item-name{ color:var(--ac-muted); }
.ac-track-total{
  display:flex; gap:12px; align-items:baseline; justify-content:space-between;
  margin:0; padding-block-start:16px; border-top:2px solid var(--ac-blue-d); font-size:1.05rem;
}
.ac-track-total strong{ font-size:1.2rem; color:var(--ac-blue-d); }
.ac-track-note{
  margin:20px 0 0; padding:14px 16px; border-radius:12px;
  background:var(--ac-surface-2); font-size:.87rem; line-height:1.8; color:var(--ac-muted);
}
.ac-track-again{ margin:20px 0 0; font-size:.9rem; }
@media (max-width:560px){
  .ac-track-fields{ grid-template-columns:1fr; }
  .ac-track-grid{ grid-template-columns:1fr; gap:2px 0; }
  .ac-track-grid dd{ margin-block-end:10px; }
}

/* ══ الصيانة وما بعد البيع ═════════════════════════════════════ */
.ac-sv{ max-inline-size:820px; margin-inline:auto; }
.ac-sv-block{
  margin-block-end:24px; padding:24px;
  border:1px solid var(--ac-line); border-radius:var(--ac-radius); background:var(--ac-surface);
}
.ac-sv-block h2{ margin:0 0 12px; font-size:1.2rem; font-weight:700; color:var(--ac-blue-d); }
.ac-sv-fam{ margin:20px 0 8px; font-size:.95rem; font-weight:700; color:var(--ac-text); }
.ac-sv-fam:first-of-type{ margin-block-start:4px; }
.ac-sv-lead{ margin:0 0 12px; font-size:.96rem; line-height:1.9; }
.ac-sv-fine{ margin:14px 0 0; font-size:.84rem; line-height:1.85; color:var(--ac-muted); }
.ac-sv-prices{ margin:0; padding:0; list-style:none; }
.ac-sv-prices li{
  display:flex; gap:14px; align-items:baseline; justify-content:space-between;
  padding-block:12px; border-bottom:1px solid var(--ac-line);
}
.ac-sv-prices li:last-child{ border-bottom:0; }
.ac-sv-name{ flex:1; font-size:.94rem; line-height:1.7; }
.ac-sv-name small{ display:block; margin-block-start:3px; font-size:.8rem; color:var(--ac-muted); }
.ac-sv-price{ font-weight:700; white-space:nowrap; color:var(--ac-blue-d); font-variant-numeric:tabular-nums; }
.ac-sv-cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.ac-sv-cols h3{ margin:0 0 6px; font-size:.95rem; font-weight:700; color:var(--ac-text); }
.ac-sv-cta{ background-image:var(--ac-grad-soft); }
.ac-sv-chan{ display:flex; flex-wrap:wrap; gap:12px; margin-block-start:16px; }
.ac-sv-btn{
  padding:12px 22px; border-radius:11px; font-weight:700; font-size:.94rem;
  background:var(--ac-blue-d); color:var(--ac-cta-fg); text-decoration:none;
}
.ac-sv-btn:hover{ background:var(--ac-cta-hover); color:var(--ac-cta-fg); }
.ac-sv-btn--alt{ background:var(--ac-surface); color:var(--ac-blue-d); border:1px solid var(--ac-blue-d); }
.ac-sv-btn--alt:hover{ background:var(--ac-surface-2); color:var(--ac-blue-d); }
@media (max-width:560px){
  .ac-sv-cols{ grid-template-columns:1fr; gap:20px; }
  .ac-sv-chan .ac-sv-btn{ flex:1 1 100%; text-align:center; }
}
.ac-track-sums{ margin:0 0 4px; padding:0; list-style:none; }
.ac-track-sums li{
  display:flex; gap:12px; justify-content:space-between;
  padding-block:7px; font-size:.9rem; color:var(--ac-muted);
}
.ac-track-sums li span:last-child{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ══ صفحة «حسابي» — مقياس واحد ومسار واحد ══════════════════════ */
/* 🔴 كانت البطاقة 520px والنموذج القياسي 1000px مكدَّسين، فانكسر الإيقاع
   وبقي 430px فراغاً إلى جانب البطاقة. القياس الآن واحد والعمود موسَّط. */
/* 🔴 ووكومرس يفرض 1000px في woocommerce-blocktheme-rtl.css عبر
   `.woocommerce-account main .woocommerce` — نوعيّتها (0,2,1) فتغلب (0,2,0).
   نضمّ صنفَي الجسم معاً لنبلغ (0,3,1) ونغلبها بلا !important. */
.ac-login-page.woocommerce-account main .woocommerce,
.ac-login-page.woocommerce-account .wp-block-post-title{
  max-inline-size:560px; margin-inline:auto;
}
.ac-login-page.woocommerce-account .wp-block-post-title{ margin-block-end:28px; }
.ac-otp{ max-inline-size:none; margin-inline:0; }

/* المطويّة: المسار البديل حاضر لا مزاحم */
.ac-alt{
  margin-block-start:20px; border:1px solid var(--ac-line);
  border-radius:var(--ac-radius); background:var(--ac-surface); overflow:hidden;
}
.ac-alt > summary{
  padding:15px 20px; cursor:pointer; list-style:none;
  font-size:.9rem; font-weight:600; color:var(--ac-muted);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.ac-alt > summary::-webkit-details-marker{ display:none; }
.ac-alt > summary::after{
  content:"⌄"; font-size:1.1rem; line-height:1; color:var(--ac-muted);
  transition:transform .18s ease;
}
.ac-alt[open] > summary::after{ transform:rotate(180deg); }
.ac-alt > summary:hover{ color:var(--ac-blue-d); background:var(--ac-surface-2); }
.ac-alt > summary:focus-visible{ outline:2px solid var(--ac-blue); outline-offset:-2px; }
.ac-alt-in{ padding:4px 20px 20px; border-top:1px solid var(--ac-line); }

/* 🔑 العنوان «تسجيل الدخول» صار داخل المطويّة — يُخفى لأن الملخّص يقوم مقامه */
.ac-alt-in > h2:first-child,
.ac-alt-in + h2{ display:none; }
.ac-alt .woocommerce-form-login{
  border:0; padding:0; margin:0;
}
.ac-alt .form-row{ margin-block:14px 0; padding:0; }
.ac-alt label{ display:block; margin-block-end:7px; font-size:.86rem; font-weight:600; color:var(--ac-blue-d); }
.ac-alt input[type="text"],
.ac-alt input[type="email"],
.ac-alt input[type="password"]{
  inline-size:100%; padding:11px 15px; font:inherit; font-size:1rem;
  border:1px solid var(--ac-line); border-radius:16px; background:var(--ac-surface);
}
.ac-alt input:focus-visible{ outline:2px solid var(--ac-blue); outline-offset:2px; }
.ac-alt .woocommerce-form-login__rememberme{ font-size:.86rem; color:var(--ac-muted); font-weight:500; }
.ac-alt button[type="submit"]{
  inline-size:100%; margin-block-start:16px; padding:12px 22px; border:0; border-radius:11px;
  cursor:pointer; font:inherit; font-weight:700; background:var(--ac-surface-2); color:var(--ac-blue-d);
  border:1px solid var(--ac-line);
}
.ac-alt button[type="submit"]:hover{ background:var(--ac-line); }
.ac-alt .lost_password{ margin-block-start:12px; font-size:.85rem; }

/* البطاقة الأساسية: نَفَس أوسع وتراتب أوضح */
.ac-otp h2{ font-size:1.25rem; }
.ac-otp-note{ margin-block-end:22px; }
/* 🔴 `display` من المؤلِّف يُبطل خاصية hidden (تنسيق المتصفح display:none نوعيّته أدنى).
   بلا هذا السطر تبقى خطوة الجوال ظاهرة بعد إرسال الرمز فيرى العميل حقلين معاً. */
.ac-otp-step[hidden]{ display:none; }
.ac-otp-step{ display:grid; gap:0; }
.ac-otp .ac-otp-send,
.ac-otp .ac-otp-verify{ inline-size:100%; margin-block-start:16px; padding-block:13px; }
.ac-otp-step[data-step="code"]{ grid-template-columns:1fr auto; align-items:end; column-gap:12px; }
.ac-otp-step[data-step="code"] label{ grid-column:1 / -1; }
.ac-otp-step[data-step="code"] #ac-otp-code{ grid-column:1; }
.ac-otp-step[data-step="code"] .ac-otp-verify{ grid-column:2; inline-size:auto; padding-inline:26px; margin-block-start:0; }
.ac-otp-step[data-step="code"] .ac-otp-back{ grid-column:1 / -1; margin-block-start:10px; justify-self:start; padding-inline:0; }
.ac-otp-msg:empty{ display:none; }
.ac-otp-msg{
  margin-block-start:16px; padding:11px 14px; border-radius:12px;
  background:var(--ac-surface-2); border:1px solid var(--ac-line);
}
.ac-otp-msg.is-ok{ background:color-mix(in srgb, var(--ac-ok-2) 10%, transparent); border-color:color-mix(in srgb, var(--ac-ok-2) 35%, transparent); color:var(--ac-ok-ink); }
.ac-otp-msg.is-error{ background:color-mix(in srgb, var(--ac-danger-2) 8%, transparent); border-color:color-mix(in srgb, var(--ac-danger-2) 30%, transparent); }
@media (max-width:560px){
  .ac-otp-step[data-step="code"]{ grid-template-columns:1fr; }
  .ac-otp-step[data-step="code"] .ac-otp-verify{ grid-column:1; inline-size:100%; margin-block-start:14px; }
}

/* ══ شارات التوفير ═════════════════════════════════════════════ */
.ac-save{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin-block-start:8px;
}
.ac-save-amt,
.ac-save-pct{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:.78rem; font-weight:700; line-height:1.7; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* 🔑 الذهبي من دليل الهوية (#f0ab1d) — النصّ داكن لأن الأبيض عليه يسقط دون 3:1 */
/* 🔴 داخل شبكة المنتجات: التوفير معروضٌ سلفاً كشارة حمراء على الصورة
   (`.ac-badge-save`)، فسطرُه هنا تكرارٌ يُضعف الاثنين — رُصد على الحيّ 16/08.
   يبقى ظاهراً في صفحة المنتج المفردة حيث لا شارة. */
.wc-block-product-template li .ac-save{ display:none; }
.ac-save-amt{ background:var(--ac-gold); color:var(--ac-gold-ink); }
.ac-save-pct{ background:var(--ac-surface-2); color:var(--ac-blue-d); border:1px solid var(--ac-line); }
.ac-save .woocommerce-Price-amount{ font-weight:700; }
.ac-save--single{ margin-block:12px 4px; }
.ac-save--single .ac-save-amt,
.ac-save--single .ac-save-pct{ font-size:.88rem; padding:5px 13px; }

/* السعر قبل التخفيض — مشطوب وهادئ، لا يزاحم السعر الحالي */
.woocommerce ul.products li.product del,
.woocommerce div.product p.price del{
  opacity:1; color:var(--ac-muted); font-weight:500; font-size:.86em;
  margin-inline-end:8px; text-decoration-thickness:1px;
}
.woocommerce ul.products li.product ins,
.woocommerce div.product p.price ins{
  text-decoration:none; font-weight:800; color:var(--ac-blue-d);
}


/* ══ بطاقة المنتج ══════════════════════════════════════════════ */
.ac-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-block:8px 6px; }
.ac-chip{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:.73rem; font-weight:600; line-height:1.75; white-space:nowrap;
  border:1px solid var(--ac-line); background:var(--ac-surface-2); color:var(--ac-muted);
}
.ac-chip--brand{ color:var(--ac-blue-d); border-color:color-mix(in srgb, var(--ac-blue) 30%, transparent); background:color-mix(in srgb, var(--ac-blue-2) 9%, transparent); }
.ac-chip--spec { color:var(--ac-amber-ink); border-color:color-mix(in srgb, var(--ac-gold) 40%, transparent); background:color-mix(in srgb, var(--ac-gold) 12%, transparent); }
.ac-stock--out{
  margin:6px 0 0; font-size:.78rem; font-weight:700; color:var(--ac-danger);
}

/* ── الشكل «مرتّبة ومتساوية» ─────────────────────────────────── */
body.ac-preview-roomy .ac-products .wc-block-product-template,
.ac-cards--roomy .wc-block-product-template{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; gap:20px; margin:0; padding:0; list-style:none;
}
body.ac-preview-roomy .ac-products .wc-block-product-template li,
.ac-cards--roomy .wc-block-product-template li{
  display:flex; flex-direction:column; margin:0; padding:16px;
  border:1px solid var(--ac-line); border-radius:var(--ac-radius); background:var(--ac-surface);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
body.ac-preview-roomy .ac-products .wc-block-product-template li:hover,
.ac-cards--roomy .wc-block-product-template li:hover{
  border-color:color-mix(in srgb, var(--ac-blue) 35%, transparent); box-shadow:var(--ac-shadow-card-glow); transform:translateY(-2px);
}
body.ac-preview-roomy .ac-products .wc-block-components-product-image,
.ac-cards--roomy .wc-block-components-product-image{ margin:0 0 12px; }
body.ac-preview-roomy .ac-products .wc-block-components-product-image img,
.ac-cards--roomy .wc-block-components-product-image img{
  aspect-ratio:1/1; width:100%; height:auto; object-fit:contain;
  background:var(--ac-surface-2); border-radius:12px; padding:8px;
}
body.ac-preview-roomy .ac-products .wp-block-post-title,
.ac-cards--roomy .wp-block-post-title{
  margin:0; font-size:.95rem; font-weight:600; line-height:1.65; min-block-size:3.3em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body.ac-preview-roomy .ac-products .wc-block-components-product-price,
.ac-cards--roomy .wc-block-components-product-price{ margin-block:10px 0; font-size:1.3rem; font-weight:800; }
body.ac-preview-roomy .ac-products .ac-save,
.ac-cards--roomy .ac-save{ margin-block:10px 0; }
body.ac-preview-roomy .ac-products .wp-block-woocommerce-product-button,
.ac-cards--roomy .wp-block-woocommerce-product-button{ margin-block-start:auto; padding-block-start:14px; }
body.ac-preview-roomy .ac-products .wp-block-woocommerce-product-button .wp-block-button__link,
.ac-cards--roomy .wp-block-woocommerce-product-button .wp-block-button__link{ inline-size:100%; text-align:center; }

/* ── الشكل «مضغوطة» ──────────────────────────────────────────── */
body.ac-preview-compact .ac-products .wc-block-product-template,
.ac-cards--compact .wc-block-product-template{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:1fr; gap:14px; margin:0; padding:0; list-style:none;
}
body.ac-preview-compact .ac-products .wc-block-product-template li,
.ac-cards--compact .wc-block-product-template li{
  display:flex; flex-direction:column; margin:0; padding:11px;
  border:1px solid var(--ac-line); border-radius:14px; background:var(--ac-surface);
  transition:box-shadow .18s ease, border-color .18s ease;
}
body.ac-preview-compact .ac-products .wc-block-product-template li:hover,
.ac-cards--compact .wc-block-product-template li:hover{
  border-color:color-mix(in srgb, var(--ac-blue) 35%, transparent); box-shadow:var(--ac-shadow-card-glow-sm);
}
body.ac-preview-compact .ac-products .wc-block-components-product-image,
.ac-cards--compact .wc-block-components-product-image{ margin:0 0 9px; }
body.ac-preview-compact .ac-products .wc-block-components-product-image img,
.ac-cards--compact .wc-block-components-product-image img{
  aspect-ratio:4/3; width:100%; height:auto; object-fit:contain;
  background:var(--ac-surface-2); border-radius:10px; padding:6px;
}
body.ac-preview-compact .ac-products .wp-block-post-title,
.ac-cards--compact .wp-block-post-title{
  margin:0; font-size:.85rem; font-weight:600; line-height:1.6; min-block-size:2.7em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body.ac-preview-compact .ac-products .ac-chips,
.ac-cards--compact .ac-chips{ margin-block:6px 4px; gap:4px; }
body.ac-preview-compact .ac-products .ac-chip,
.ac-cards--compact .ac-chip{ font-size:.68rem; padding:1px 7px; }
body.ac-preview-compact .ac-products .wc-block-components-product-price,
.ac-cards--compact .wc-block-components-product-price{ margin-block:7px 0; font-size:1.08rem; font-weight:800; }
body.ac-preview-compact .ac-products .ac-save,
.ac-cards--compact .ac-save{ margin-block:7px 0; gap:4px; }
body.ac-preview-compact .ac-products .ac-save-amt,
.ac-cards--compact .ac-save-amt,
body.ac-preview-compact .ac-products .ac-save-pct,
.ac-cards--compact .ac-save-pct{ font-size:.7rem; padding:2px 8px; }
body.ac-preview-compact .ac-products .wp-block-woocommerce-product-button,
.ac-cards--compact .wp-block-woocommerce-product-button{ margin-block-start:auto; padding-block-start:10px; }
body.ac-preview-compact .ac-products .wp-block-woocommerce-product-button .wp-block-button__link,
.ac-cards--compact .wp-block-woocommerce-product-button .wp-block-button__link{ inline-size:100%; text-align:center; font-size:.85rem; padding-block:9px; }

@media (max-width:900px){
  body.ac-preview-roomy .ac-products .wc-block-product-template,
.ac-cards--roomy .wc-block-product-template{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.ac-preview-compact .ac-products .wc-block-product-template,
.ac-cards--compact .wc-block-product-template{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:560px){
  body.ac-preview-roomy .ac-products .wc-block-product-template,
.ac-cards--roomy .wc-block-product-template,
  body.ac-preview-compact .ac-products .wc-block-product-template,
.ac-cards--compact .wc-block-product-template{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  body.ac-preview-roomy .ac-products .wc-block-product-template li,
.ac-cards--roomy .wc-block-product-template li{ padding:11px; }
}

/* ── صفّ رئيسيّة بأربعة أعمدة ─────────────────────────────────
   صفوف الرئيسية («أحدث ما وصل» و«عليها تخفيض») تعرض أربعة في السطر كما
   كانت مع البلوكات المهجورة، بينما الأرشيف يبقى على ثلاثة الأوسع.
   🔑 يُستعمل مع `.ac-cards--roomy` لا بدلاً منها — تلك تحمل شكل البطاقة
      كاملاً وهذه تُغيّر عدد الأعمدة وحده.
   🔴 موضعه **بعد** استعلامات `roomy` عمداً، ويحمل استعلاماته بنفسه بدل
      الاتّكال عليها — ولو وُضع قبلها لدهست قاعدة 900px قاعدتَه في كل عرض. */
.ac-cards--row4 .wc-block-product-template{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1100px){
  .ac-cards--row4 .wc-block-product-template{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  .ac-cards--row4 .wc-block-product-template{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .ac-cards--row4 .wc-block-product-template{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}

/* ══════════════════════════════════════════════════════════════
   بطاقة المنتج — توحيد التشريح (2026-08-06)
   🔴 الشبكة الحيّة هي `Product Collection` (`.ac-cards--roomy
      .wc-block-product-template li`) لا `ul.products li.product`.
      قواعد `ul.products` أعلاه ميتة على صفحة المتجر — تُركت لأن
      بلوكات أخرى قد تستعملها. أي قاعدة بطاقة جديدة تُكتب هنا.
   المشكلة المقيسة: تفاوت المحتوى (رقاقة/شارة/حالة مخزون) يوقع
   الأسعار والأزرار على ارتفاعات متباينة فيبدو الصفّ مكسوراً.
   ══════════════════════════════════════════════════════════════ */

/* ── صفّ الرقاقات: يُطبع دائماً ويحجز ارتفاعه ولو خلا ─────────── */
.ac-card-chips{
  display:flex; flex-wrap:nowrap; gap:6px; overflow:hidden;
  margin-block:8px 2px; min-block-size:26px; align-items:center;
}
.ac-chip{
  flex:0 0 auto; max-inline-size:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
  font-size:.7rem; font-weight:700; line-height:1.7;
  padding:1px 9px; border-radius:999px; border:1px solid var(--ac-line);
  color:var(--ac-muted); background:var(--ac-surface);
}
.ac-chip--brand{ color:var(--ac-blue-d); border-color:color-mix(in srgb, var(--ac-blue) 34%, transparent); }
.ac-chip--spec{ color:var(--ac-on-brand); background:color-mix(in srgb, var(--ac-gold) 17%, var(--ac-surface));
                border-color:color-mix(in srgb, var(--ac-gold) 42%, transparent); }
.ac-chip--muted{ color:var(--ac-muted); }
.ac-cards--compact .ac-card-chips{ margin-block:6px 2px; gap:4px; min-block-size:22px; }
.ac-cards--compact .ac-chip{ font-size:.68rem; padding:1px 7px; }

/* ── حالة المخزون: سطر بارتفاع محجوز فوق السعر ──────────────── */
.ac-cards--roomy .ac-stock,
.ac-cards--compact .ac-stock{
  margin:0; font-size:.74rem; font-weight:700; line-height:1.7; min-block-size:1.7em;
}
.ac-stock--out{ color:var(--ac-danger); }

/* ── الزرّ: ارتفاع واحد ونصّ لا يتكسّر ───────────────────────── */
.ac-cards--roomy .wp-block-woocommerce-product-button .wp-block-button__link,
.ac-cards--compact .wp-block-woocommerce-product-button .wp-block-button__link{
  min-block-size:44px; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* «قراءة المزيد» تصفّح لا شراء ⇒ درجة ثانية محدَّدة */
.ac-cards--roomy .wp-block-woocommerce-product-button .wp-block-button__link:not(.add_to_cart_button),
.ac-cards--compact .wp-block-woocommerce-product-button .wp-block-button__link:not(.add_to_cart_button){
  background:transparent; color:var(--ac-blue-d);
  border:1px solid color-mix(in srgb, var(--ac-blue) 40%, transparent);
}
.ac-cards--roomy .wp-block-woocommerce-product-button .wp-block-button__link:not(.add_to_cart_button):hover{
  background:color-mix(in srgb, var(--ac-blue) 8%, var(--ac-surface)); border-color:var(--ac-blue); transform:none;
}

/* ── نائب الصورة: هادئ بالهوية لا أيقونة رمادية عامة ────────── */
.ac-cards--roomy .wc-block-components-product-image img[src*="woocommerce-placeholder"],
.ac-cards--compact .wc-block-components-product-image img[src*="woocommerce-placeholder"]{
  object-fit:contain; padding:26px; opacity:.25; background:var(--ac-surface-2);
}

@media (max-width:460px){
  .ac-card-chips{ min-block-size:24px; }
}

/* ── صفحة المنتج: عمود الصورة يرافق التمرير ─────────────────────
   المشكلة المقيسة 06/08: عمود الصورة ينتهي عند ثلث الصفحة بينما
   عمود الشراء (السعر · التركيب · الإضافات · فاحص التوصيل · الطمأنة)
   يمتدّ لضعفه ⇒ فراغ طويل تحت الصورة. اللصق يملأه بلا زيادة محتوى،
   ويُبقي الصورة أمام العين وهو يختار التركيب والإضافات.
   🔑 `align-self:flex-start` إلزامي: العمود في flex يتمدّد افتراضياً
      لارتفاع الصفّ فلا يعمل sticky إطلاقاً. */
@media (min-width:821px){
  .ac-single-top .wp-block-column:has(.woocommerce-product-gallery){
    position:sticky; inset-block-start:16px; align-self:flex-start;
  }
}

/* ══ جدول مواصفات المنتج ══════════════════════════════════════ */
.ac-specs{
  margin-block:22px 4px; padding:18px 20px;
  border:1px solid var(--ac-line); border-radius:var(--ac-radius);
  background-image:var(--ac-grad-soft);
}
.ac-specs-h{
  margin:0 0 14px; font-size:1rem; font-weight:700; color:var(--ac-blue-d);
  padding-block-end:10px; border-bottom:1px solid var(--ac-line);
}
/* الرقاقات داخل الكتلة — انتقلت من فوق السعر 17/08 فلا تُقال الحقيقة مرّتين */
.ac-sp-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-block-end:14px; }

/* ── بطاقات القرار ───────────────────────────────────────────────
   🔑 auto-fit بحدٍّ أدنى 96px: تلتفّ وحدها من ثلاثٍ إلى اثنتين إلى واحدة
      بلا نقطة كسر مكتوبة — والعمود هنا يضيق بالتخطيط لا بعرض الشاشة،
      فنقطة الكسر بالميديا كانت ستخطئ داخل عمود الملخّص. */
.ac-sp-tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:10px; margin:0 0 14px;
}
.ac-sp-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:13px 8px 11px; text-align:center;
  background:var(--ac-surface); border:1px solid var(--ac-line); border-radius:11px;
}
/* 🔑 بطاقةٌ وحيدة لا تُمطّ عرض الصندوق — 948 منتجاً له مواصفة قرارية واحدة،
      و1fr يجعلها شريطاً ممتدّاً لا بطاقة. تُقاس بمحتواها وتُحاذي البداية.
      وغياب :has() في متصفّح قديم يُعيدها ممتدّة — تدهورٌ مقبول لا كسر. */
.ac-sp-tiles:has(.ac-sp-tile:only-child){ grid-template-columns:auto; justify-content:start; }
.ac-sp-tiles:has(.ac-sp-tile:only-child) .ac-sp-tile{ min-inline-size:124px; padding-inline:24px; }

.ac-sp-num{ margin:0; display:flex; flex-direction:column; align-items:center; gap:1px; }
.ac-sp-val{
  font-size:1.45rem; font-weight:700; line-height:1.15; color:var(--ac-blue-d);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  /* 🔑 الحروف العربية تتّصل — لا تباعد سالب عليها مهما كبر القياس */
  letter-spacing:0;
}
.ac-sp-unit{ font-size:.78rem; font-weight:600; color:var(--ac-text); opacity:.85; }
.ac-sp-key{
  margin-block-start:5px; font-size:.72rem; font-weight:600;
  color:var(--ac-muted); line-height:1.35;
}

/* ── سطر الهوية ──────────────────────────────────────────────────
   🔴 **بلا فاصل مرسوم عمداً.** جُرِّب فاصلٌ رأسيّ بـ::before فظهر **يتيماً في
      أوّل السطر** كلّما التفّ السطر — وCSS لا تعرف «بداية سطر» في حاوية
      ملتفّة، فلا شرط يُخفيه. والتباين بين التسمية الخافتة والقيمة الثقيلة
      يفصل الأزواج وحده؛ وعلامةٌ تنكسر أسوأ من لا علامة.
   🔑 والفجوة الأفقية (20px) أوسع من الرأسية (5px) فتُقرأ الأزواج صفّاً لا عموداً. */
.ac-sp-facts{ display:flex; flex-wrap:wrap; gap:5px 20px; margin:0; font-size:.85rem; line-height:1.7; }
.ac-sp-fact{ display:inline-flex; align-items:baseline; gap:6px; }
.ac-sp-fact dt{ margin:0; font-weight:500; color:var(--ac-muted); }
.ac-sp-fact dd{ margin:0; font-weight:600; color:var(--ac-text); font-variant-numeric:tabular-nums; }

/* ── القائمة البديلة: أقلّ من بطاقتين قراريّتين ──────────────────
   بطاقةٌ وحيدة وسط فراغٍ تبدو عطلاً لا تصميماً، فتنزل الصفوف كلّها قائمة. */
.ac-sp-list{ display:flex; flex-direction:column; font-size:.9rem; }
.ac-sp-row{ display:flex; align-items:baseline; gap:8px; padding-block:9px; }
.ac-sp-row + .ac-sp-row{ border-block-start:1px solid var(--ac-line); }
.ac-sp-rk{ color:var(--ac-muted); font-weight:600; white-space:nowrap; }
.ac-sp-dots{ flex:1 1 auto; border-block-end:1.5px dotted var(--ac-line); transform:translateY(-3px); }
.ac-sp-rv{ font-weight:700; color:var(--ac-text); font-variant-numeric:tabular-nums; }

/* 🔑 العَلم يرث `.ac-flag` العامّة — لا صنف ثانٍ يكرّر تنسيق الشيء نفسه */

@media (prefers-reduced-motion:no-preference){
  .ac-sp-tile{ transition:border-color .18s ease; }
}

/* ── شريط العلامات ─────────────────────────────────────────────
   🔴 أصول سلة متفاوتة الأبعاد بشدّة (260×78 نسبة 3.3 → 2560×997).
      العلبة ذات الارتفاع الثابت + object-fit:contain هي ما يوحّد
      الوزن البصري. لا تُزل الارتفاع الثابت ولا تستبدله بـauto. */
.ac-brands{
  display:grid; gap:10px; margin-block:14px 0;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
}
/* 🔴🔴🔴 نطاقٌ إلزاميّ `.ac-brands .ac-brand` لا `.ac-brand` وحدها.
   الصنف مستعملٌ **لشيئين**: بلاطة شعارٍ في هذا الشريط، ومجموعة الهوية في
   الترويسة (`.ac-header .ac-brand`). وبلا النطاق كانت قواعد البلاطة تلتقط
   الترويسة فتسحق شعارها من 84px إلى 42 (و34 على الجوال) وتلفّه بصندوقٍ أبيض
   بحدّ واستدارة — انحدارٌ قائمٌ منذ إضافة الشريط 07/08 لم ينتبه له أحد،
   وتعليقُنا فوق `.ac-header .ac-logo img` يقول إن النصّ داخله يصير غير مقروء
   دون 84px. قِيس 18/08: 32×42 بالضبط = سقف البلاطة. */
.ac-brands .ac-brand{
  display:grid; place-items:center; block-size:74px; padding:10px 14px;
  background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:12px; text-decoration:none; overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ac-brands .ac-brand img{
  max-block-size:42px; max-inline-size:100%; inline-size:auto;
  object-fit:contain; display:block;
  transition:filter .18s ease, opacity .18s ease;
}
/* 🔑 بديل نصّي حين ينقص شعار — يحفظ ارتفاع الصفّ فلا يختلّ */
.ac-brand__txt{
  font-size:.82rem; font-weight:700; color:var(--ac-muted);
  text-align:center; line-height:1.4;
}
.ac-brands .ac-brand:hover{
  border-color:color-mix(in srgb, var(--ac-blue) 45%, transparent);
  box-shadow:var(--ac-shadow); transform:translateY(-2px);
}
.ac-brands .ac-brand:focus-visible{ outline:3px solid color-mix(in srgb, var(--ac-blue-2) 60%, transparent); outline-offset:2px; }

/* رمادية: توحّد الصفّ بصرياً وتتلوّن عند المرور */
.ac-brands--grey .ac-brand img{ filter:grayscale(1); opacity:.66; }
.ac-brands--grey .ac-brand:hover img{ filter:none; opacity:1; }

/* ملوّنة كما هي */
.ac-brands--color .ac-brand img{ filter:none; opacity:1; }

/* تسميات المعاينة (?ac_brands=both) — لا تظهر في الوضع العادي */
.ac-brands-lbl{
  margin:22px 0 0; font-size:.85rem; font-weight:700; color:var(--ac-blue-d);
}
.ac-brands-preview .ac-brands-lbl:first-child{ margin-block-start:0; }

@media (max-width:640px){
  .ac-brands{ grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px; }
  .ac-brands .ac-brand{ block-size:64px; padding:8px 10px; }
  .ac-brands .ac-brand img{ max-block-size:34px; }
}
@media (prefers-reduced-motion:reduce){
  .ac-brands .ac-brand, .ac-brands .ac-brand img{ transition:none; }
  .ac-brands .ac-brand:hover{ transform:none; }
}

/* ── رأس أرشيف العلامة ─────────────────────────────────────── */
.ac-brand-head{
  display:flex; align-items:center; gap:16px;
  margin-block:4px 18px; padding:14px 18px;
  background:var(--ac-surface); border:1px solid var(--ac-line); border-radius:14px;
}
.ac-brand-head__logo{
  display:grid; place-items:center; block-size:56px; min-inline-size:120px;
  padding:6px 12px; background:var(--ac-surface);
  border-inline-end:1px solid var(--ac-line);
}
.ac-brand-head__logo img{ max-block-size:44px; max-inline-size:150px; inline-size:auto; object-fit:contain; display:block; }
.ac-brand-head__meta{ font-size:.92rem; font-weight:700; color:var(--ac-muted); font-variant-numeric:tabular-nums; }
@media (max-width:520px){
  .ac-brand-head{ padding:12px 14px; gap:12px; }
  .ac-brand-head__logo{ block-size:44px; min-inline-size:92px; }
  .ac-brand-head__logo img{ max-block-size:34px; max-inline-size:110px; }
}

/* ── شعار العلامة فوق عنوان المنتج ─────────────────────────── */
.ac-pbrand{
  display:inline-flex; align-items:center; gap:10px;
  margin-block-end:10px; padding:6px 12px 6px 6px;
  background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:999px; text-decoration:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.ac-pbrand img{ max-block-size:26px; max-inline-size:82px; inline-size:auto; object-fit:contain; display:block; }
.ac-pbrand__txt{ font-size:.85rem; font-weight:800; color:var(--ac-blue-d); }
.ac-pbrand__go{ font-size:.78rem; font-weight:600; color:var(--ac-muted); }
.ac-pbrand:hover{ border-color:color-mix(in srgb, var(--ac-blue) 45%, transparent); box-shadow:var(--ac-shadow); }
.ac-pbrand:hover .ac-pbrand__go{ color:var(--ac-blue-d); }
.ac-pbrand:focus-visible{ outline:3px solid color-mix(in srgb, var(--ac-blue-2) 60%, transparent); outline-offset:2px; }

/* ══════════════════════════════════════════════════════════════
   بطاقة المنتج — تسلسل القرار (2026-08-07)

   مقيس على Best Buy: السعر هناك 24px مقابل نصّ 13px (1.85×) فهو المرساة
   البصرية الوحيدة، وتحته ثلاثة أسطر وفاء بوزن 600 أعرض من اسم المنتج.
   نقلنا البنية لا الألوان: نداء الخصم مخفوض عمداً (81% من الكتالوج «مخفَّض»
   ⇒ الإشارة ميتة) ومكانه أخذته كتلة «متى يصلني ومن يركّبه».

   🔴 كان السعر والزر كلاهما `margin-block-start:auto` فينقسم الفراغ بينهما
      (قِيس حيّاً 38.86px لكلٍّ) وتتفكّك البطاقة. الآن الدفع على السعر وحده،
      فتلتصق كتلة القرار كاملةً بأسفل البطاقة وتتحاذى عبر الصفّ.
   🔑 الترتيب بـ`order` لا بالترميز: مخرَج خطّاف
      `woocommerce_after_shop_loop_item_title` يقع بين العنوان والسعر، ونريده
      تحته. (تُحقّق 07/08: الخطّاف حيّ داخل بلوك `product-template`؛ الميت هو
      ترميز `ul.products` الكلاسيكي وحده.)
   ══════════════════════════════════════════════════════════════ */

/* 🔴🔴 لا تُقيَّد بـ`.ac-archive`. قِيس حيّاً 07/08: صفحة **البحث** تعرض نفس
   بلوك `product-template` بلا ذلك الصنف (قالب `search` لا `archive-product`)،
   فوقعت كتلة الوفاء فوق السعر هناك بينما ضُبطت في الفئة. المشترك الوحيد
   بين كل الأسطح هو `li` داخل `.wc-block-product-template` — فهو المرساة. */
/* 🔴🔴🔴 شرط `order` أن تكون الحاوية flex. البطاقة على قالب **الفئة** كانت
   flex بقاعدة `.ac-archive`، أمّا على **البحث** فبقيت `display:list-item`
   فحُسبت قيم `order` وأُهملت تماماً — ووقع الوفاء فوق السعر بلا أي خطأ ظاهر.
   قِيس حيّاً 07/08. الحاوية تُعلَن هنا، مع الترتيب، فلا ينفصلان مرّة أخرى. */
.wc-block-product-template li{
  display:flex; flex-direction:column; position:relative;
  /* 🆕 مهمّة V2 (16/08): يتيح ارتفاع البطاقة عند hover/focus-within أدناه —
     غير مقيَّد بـ.ac-archive عمداً، كي يعمل على صفحة البحث أيضاً. */
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .2s ease;
}

/* ── «نفد المخزون» ────────────────────────────────────────────
   🔴 كانت `.ac-badge` مُصمَّمة على `.woocommerce ul.products li.product`
      — الترميز الكلاسيكي **الميت** — فوصلت البطاقةَ الحيّة بلا تنسيق: `span`
      سطريّ بحشو صفر وخطّ 16px موروث، فبدت مستطيلاً وردياً معلّقاً تحت الصورة.
   🔑 والحقيقة نفسها كانت تُقال مرّتين بصيغتين: «نفد المخزون» شارةً و«غير
      متوفّر حالياً» سطراً أحمر. إشارة واحدة لحقيقة واحدة — الشارة، لأن
      موضعها على الصورة يسبق القراءة. */
.wc-block-product-template li > .ac-badge-out{
  position:absolute; inset-block-start:16px; inset-inline-start:16px; z-index:2;
  display:inline-flex; align-items:center;
  padding:5px 11px; border-radius:999px;
  font-size:.72rem; font-weight:700; line-height:1;
  /* اللون مصدره القاعدة الحيّة أعلى الملف (`li.product.outofstock`) — لا يُكرَّر */
}
/* ── «سعر العرض» ──────────────────────────────────────────────
   نفس علّة شارة النفاد: القالب يصمّم `span.onsale` الكلاسيكية، والبلوكات
   تُخرِج `.wc-block-components-product-sale-badge` — فوصلت بلا حشو ولا استدارة
   وبخطّ 16px موروث. تُنقل نيّة القالب (`--ac-orange` + `--ac-on-brand`، 6.68:1)
   إلى الترميز الحيّ، وتُوضع في ركن الصورة كقرص النفاد نفسه. */
/* 🆕 مهمّة V2 (16/08): أُلغيت لصالح شارة حمراء بمبلغ التوفير الفعليّ
   (`.ac-badge-save` أدناه) — نفس الركن، فشارتان معاً تعنيان تكراراً بصيغتين
   مختلفتين لحقيقة واحدة (نفس درس «نفد المخزون» أسفل هذا القسم). */
.wc-block-product-template .wc-block-components-product-sale-badge{ display:none; }
/* 🔑 نصّ قارئ الشاشة داخل الشارة يُخفى بالقصّ لا بإزاحة ضخمة —
   `left:-99999px` في RTL يُبيّض لقطات Playwright. */
.wc-block-components-product-sale-badge .screen-reader-text{
  position:absolute; inline-size:1px; block-size:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
/* شارتان فوق بعضهما ممنوعتان: النفاد يُلغي العرض (نُقلت للترميز الحيّ) */
.woocommerce li.product.outofstock .wc-block-components-product-sale-badge{ display:none; }

/* الصورة تخفت فيُقرأ النفاد قبل أن تُقرأ الشارة */
.wc-block-product-template li.outofstock .wp-block-woocommerce-product-image img{ opacity:.45; }
/* 🔑 مقصوصة لا مخفيّة: `display:none` يحجبها عن قارئ الشاشة أيضاً، فيسمع
   اسم المنتج بلا حالته. القصّ يُبقيها منطوقة مرّة واحدة بجوار العنوان،
   والشارة البصرية `aria-hidden` فلا يتكرّر الإعلان. */
.wc-block-product-template li.outofstock .ac-stock--out{
  position:absolute; inline-size:1px; block-size:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* 🔴 الدفع لأسفل على **الزر** وحده، لا على السعر.
   لمّا كان على السعر انفتحت فجوة بين الرقاقة والسعر في البطاقات القصيرة
   (الباقات والخدمات لا كتلة وفاء لها) — شوهدت حيّاً 07/08. تثبيت الزر يحاذي
   نداء الفعل عبر الصفّ ويترك الفراغ قبله لا وسط تسلسل القراءة. */
.wc-block-product-template li > .wp-block-woocommerce-product-price{
  order:1; margin-block-start:8px;
}
.wc-block-product-template li > .ac-save{ order:2; margin-block-start:6px; }
/* 🆕 مهمّة V2 (16/08): المخزون الحقيقي وشريط نسبته — بين شارتَي التوفير والوفاء */
.wc-block-product-template li > .ac-stockgauge{ order:3; margin-block-start:6px; }
.wc-block-product-template li > .ac-fulfil{ order:4; }
.wc-block-product-template li > .wp-block-button,
.wc-block-product-template li > .wc-block-components-product-button{
  order:5; margin-block-start:auto; padding-block-start:12px;
}

/* المرساة: السعر وحده يكبر — لا عنوان ضخم ينافسه */
.wc-block-product-template .wc-block-components-product-price{
  font-size:1.42rem; font-weight:800; line-height:1.25; color:var(--ac-text);
}
.wc-block-product-template .wc-block-components-product-price ins{ text-decoration:none; }
.wc-block-product-template .wc-block-components-product-price del{
  font-size:.78rem; font-weight:500; color:var(--ac-muted); opacity:1;
}

/* التوفير: باقٍ للصدق، مخفوضٌ للمعنى — لا أحمر صارخ */
.wc-block-product-template .ac-save{
  display:flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600;
}
/* 🔴 الرقاقة القائمة مملوءة بالذهبي (سطر ~1831). تغييرُ لون النصّ وحده يترك
   رمادياً على ذهبي — تباين مكسور. فإمّا تُترك كما هي أو تُفرَّغ كاملةً.
   المعتمد: تُفرَّغ. `PRODUCT.md` يقيس 881 من 1,082 «عليها تخفيض» ⇒ نداء بحجم
   المرساة على 81% من الرفّ ليس نداءً، وهو ما تلاحقه وزارة التجارة. */
.wc-block-product-template .ac-save-amt{
  background:none; border:0; padding:0;
  color:var(--ac-muted); font-weight:600;
}
.wc-block-product-template .ac-save-pct{
  color:var(--ac-blue-d); background:var(--ac-surface-2);
  border-radius:999px; padding:1px 8px;
}

/* ── كتلة الوفاء: التوفّر · التركيب · التوصيل ────────────────── */
.ac-fulfil{
  margin:10px 4px 0; padding-block-start:9px; padding-inline:0;
  border-block-start:1px solid var(--ac-line);
  display:flex; flex-direction:column; gap:5px;
}
.ac-fulfil-row{
  display:flex; align-items:flex-start; gap:7px;
  font-size:.76rem; line-height:1.45; color:var(--ac-muted);
}
.ac-fulfil-row strong{ font-weight:700; color:var(--ac-text); }
.ac-fulfil-row.is-ok strong{ color:var(--ac-ok-ink); }
.ac-fulfil-i{
  inline-size:14px; block-size:14px; flex:0 0 14px;
  margin-block-start:2px; opacity:.7;
}
.ac-fulfil-row.is-ok .ac-fulfil-i{ color:var(--ac-ok); opacity:1; }
/* السعر داخل السطر يرث وزن `strong` ولا يقفز */
.ac-fulfil .woocommerce-Price-amount{ font-weight:700; white-space:nowrap; }

.ac-cards--compact .ac-fulfil{ margin-block-start:8px; gap:4px; }
.ac-cards--compact .ac-fulfil-row{ font-size:.71rem; }

/* ══════════════════════════════════════════════════════════════
   بطاقة المنتج — معالجة «هـ» (مهمّة V2، 2026-08-16)
   معتمَدة من المالك في `store-motion.html`: شارة التوفير · رقاقة السعة ·
   المخزون الحقيقي · اللمعة على الصورة · ارتفاع البطاقة عند المرور/التركيز.
   🔴 غير مقيَّدة بـ.ac-archive — نفس درس كتلة الوفاء أعلاه: صفحة البحث تعرض
   بلوك product-template بلا ذلك الصنف. المرساة `.wc-block-product-template li`
   وحدها في كل قاعدة هنا.
   ══════════════════════════════════════════════════════════════ */

/* ── شارة التوفير: ركن الصورة، محلّ شارة «Sale!» الافتراضية المُلغاة أعلاه ── */
.wc-block-product-template li > .ac-badge-save{
  position:absolute; z-index:2;
  inset-block-start:16px; inset-inline-start:16px;
  margin:0; padding:5px 11px; border-radius:999px;
  font-size:.72rem; font-weight:800; line-height:1;
  background:var(--ac-danger); color:var(--ac-surface);
  font-variant-numeric:tabular-nums;
}
/* نفس درس «نفد المخزون» فوق شارة الخصم: لا تُقرأ شارتان في ركن واحد */
.wc-block-product-template li.outofstock > .ac-badge-save{ display:none; }

/* ── رقاقة السعة: «يكفي غرفة حتى N م² تقديريّاً» — تحت العنوان مباشرةً ──
   نفس زوج ألوان `.ac-chip--feat` القائمة (حبر --ac-blue-d فوق صبغة خفيفة
   من --ac-blue-2) — لا رمز جديد، تطبيق فقط. */
/* 🔑 وُسّع النطاق ليشمل صفحة المنتج (16/08): الرقاقة كانت مقيَّدة ببطاقة
   الشبك وحدها، فظهرت على صفحة المنتج نصّاً عارياً بلا حبّة ولا لون —
   والصفحة هي موضع القرار. القيم لم تُمسّ فلا يتغيّر بكسل في البطاقة. */
.wc-block-product-template li > .ac-fit,
.ac-single-sum > .ac-fit{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  margin-block:6px 0; padding:5px 9px; border-radius:8px;
  font-size:.73rem; font-weight:600; line-height:1.4;
  color:var(--ac-blue-d);
  background:color-mix(in srgb, var(--ac-blue-2) 12%, transparent);
}
.ac-fit-i{ inline-size:14px; block-size:14px; flex:0 0 14px; }

/* ── المخزون الحقيقي + شريط نسبته ─────────────────────────────
   `order` مضبوط أعلاه مع بقيّة تسلسل القرار. لا حركة على الشريط — عرضه
   يصل صحيحاً من أوّل رسم (`ac_card_stock_html` في PHP)، فلا `transition`
   بلا مُشغِّل (V3 تتكفّل بالدخول المتحرّك). */
.ac-stockgauge{ display:flex; flex-direction:column; gap:4px; }
.ac-stockgauge-line{ margin:0; font-size:.74rem; font-weight:700; line-height:1.5; font-variant-numeric:tabular-nums; }
.ac-stockgauge--low .ac-stockgauge-line{ color:var(--ac-danger); }
.ac-stockgauge--ok  .ac-stockgauge-line{ color:var(--ac-ok-ink); }
/* 🔴 الشريط **للنقص وحده**. ملؤه بالأخضر عند «متوفّر» يُقرأ مؤشّرَ تقدّمٍ
   لا حالةَ توفّر، ويسرق نظراً تستحقّه الحالة النادرة فعلاً. رُصد على الحيّ 16/08. */
.ac-stockgauge--ok .ac-stockgauge-track{ display:none; }
.ac-stockgauge-track{ block-size:3px; border-radius:99px; background:var(--ac-line); overflow:hidden; }
.ac-stockgauge-track i{ display:block; block-size:100%; border-radius:99px; inline-size:var(--ac-gauge-w, 0%); }
.ac-stockgauge--low .ac-stockgauge-track i{ background:var(--ac-danger); }
.ac-stockgauge--ok  .ac-stockgauge-track i{ background:var(--ac-ok); }

/* ── اللمعة + تكبير خفيف على صورة المنتج عند المرور/التركيز ─────
   الحاوية `.wc-block-components-product-image` — لا `img` مباشرة، فقاعدة
   `.ac-archive .wc-block-product-template img` (والمُعاد ضبطها لرقاقات
   العلامة/العلم أعلاه) تفرض هيئتها على أي img؛ الحاوية عنصر مستقلّ لا
   يصطدم بتلك القاعدة، فلا إعادة ضبط لازمة. */
.wc-block-product-template li .wc-block-components-product-image{
  position:relative; overflow:hidden;
}
.wc-block-product-template li .wc-block-components-product-image img{
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.wc-block-product-template li:hover .wc-block-components-product-image img,
.wc-block-product-template li:focus-within .wc-block-components-product-image img{
  transform:scale(1.05);
}
.wc-block-product-template li .wc-block-components-product-image::after{
  content:""; position:absolute; inset-block:-40%; inline-size:40%;
  inset-inline-start:-58%; transform:skewX(-18deg); opacity:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 0%,
    color-mix(in srgb, var(--ac-blue-2) 22%, transparent) 42%,
    color-mix(in srgb, var(--ac-surface) 85%, transparent) 50%,
    color-mix(in srgb, var(--ac-blue-2) 22%, transparent) 58%, transparent 100%);
}
.wc-block-product-template li:hover .wc-block-components-product-image::after,
.wc-block-product-template li:focus-within .wc-block-components-product-image::after,
.wc-block-product-template li.ac-sheen .wc-block-components-product-image::after{
  animation:ac-card-sheen .85s cubic-bezier(.4,0,.2,1) forwards;
}
/* 🔴 اللمعة كانت مربوطة بـ`:hover` وحده — **والجوّال لا يعرف المرور**،
   فلم يرها أغلب الزوّار إطلاقاً. رصده المالك على جوّاله 16/08.
   الحلّ: صنف `ac-sheen` يضيفه `ac-motion.js` **مرّة واحدة** حين تدخل
   البطاقة الشاشة على الأجهزة اللمسية وحدها (`hover:none`)، فلا تتكرّر
   اللمعة مع كل تمرير فتصير إزعاجاً. */
@media (hover:hover){
  /* على أجهزة المرور تبقى اللمعة للمرور وحده — لا تنطلق تلقائياً */
  .wc-block-product-template li.ac-sheen:not(:hover):not(:focus-within)
    .wc-block-components-product-image::after{ animation:none; }
}
@keyframes ac-card-sheen{
  0%{ inset-inline-start:-58%; opacity:0; }
  12%{ opacity:1; }
  86%{ opacity:1; }
  100%{ inset-inline-start:118%; opacity:0; }
}

/* ── ارتفاع البطاقة عند المرور والتركيز (`transition` على السطر ~2284) ──
   🔴 لم تكن للبطاقة أي رفع خارج `.ac-archive` (شوهد 16/08) — والمعادلة نفسها
   موجودة هناك مكرَّرة أدناه فقط لتغطية صفحة البحث؛ القيم متطابقة عمداً
   فلا يظهر فرق بصريّ على الأرشيف نفسه، النطاق الإضافي وحده هو الجديد. */
.wc-block-product-template li:hover,
.wc-block-product-template li:focus-within{
  transform:translateY(-3px);
  box-shadow:var(--ac-shadow-card-hover);
  border-color:color-mix(in srgb, var(--ac-blue) 42%, transparent);
}

@media (prefers-reduced-motion:reduce){
  .wc-block-product-template li,
  .wc-block-product-template li:hover,
  .wc-block-product-template li:focus-within,
  .wc-block-product-template li .wc-block-components-product-image img{
    transform:none; transition:none;
  }
  .wc-block-product-template li .wc-block-components-product-image::after{
    animation:none; opacity:0;
  }
}

/* ══════════════════════════════════════════════════════════════
   V3: الحركات الأربع (مهمّة V3، 2026-08-16) — `assets/js/ac-motion.js`
   الحالة الابتدائية والانتقال لدخول البطاقات يُداران بجافاسكربت مباشرة
   (`style.opacity/transform`) لا بصنف CSS يُخفي افتراضياً — فبطاقات ما
   فوق الطيّة، أو أي صفحة تعطّل فيها السكربت، تبقى ظاهرة دوماً بلا شرط.
   `.ac-in` نفسها لا تفعل شيئاً بصرياً (الإظهار عبر مسح `style.opacity`
   مباشرة) — الصنف علامة حالة للاختبارات السلوكية وحدها.
   🔴 `prefers-reduced-motion` تُلغي الحركة كلّها عبر القاعدة العامّة أعلى
   الملف (`*,*::before,*::after{transition:none!important;...}`) — لا حاجة
   لتكرارها هنا؛ الأسعار لا تُصفَّر أصلاً حين RM (مُتحقَّق في JS).
   ══════════════════════════════════════════════════════════════ */

/* ── تأكيد الإضافة للسلة: أخضر + علامة صحّ — بلا لمس نصّ الزرّ ────
   🔴 لا يُستبدَل نصّ الزرّ (React/بلوكات ووكومرس تُدير محتواه) — التأكيد
   بصريّ محض: تلوين الخلفية + علامة صحّ مرسومة بحدَّين مُدارَين، فلا حاجة
   لصورة أو SVG جديد. */
.wc-block-components-button,
.add_to_cart_button,
.single_add_to_cart_button{ position:relative; }

.ac-added{
  background:var(--ac-ok) !important; color:var(--ac-cta-fg) !important;
}
.ac-added::after{
  content:''; position:absolute; inset-inline-end:14px; inset-block-start:50%;
  inline-size:5px; block-size:10px;
  border-inline-end:2px solid var(--ac-cta-fg); border-block-end:2px solid var(--ac-cta-fg);
  transform:translateY(-70%) rotate(35deg);
}

/* ── نبضة عدّاد السلة المصغّرة عند نجاح الإضافة فعلاً ─────────── */
@keyframes ac-bump{ 0%{ transform:scale(1); } 38%{ transform:scale(1.45); } 100%{ transform:scale(1); } }
.wc-block-mini-cart__badge.ac-bump,
.wc-block-mini-cart__quantity-badge.ac-bump{ animation:ac-bump .42s cubic-bezier(.22,1,.36,1); }

/* ── استجابة مرور/لمس للرقاقات — CSS خالص ─────────────────────── */
.ac-card-chips .ac-chip{
  transition:transform .14s cubic-bezier(.22,1,.36,1), border-color .16s ease;
}
.ac-card-chips .ac-chip:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--ac-blue-2) 45%, var(--ac-line));
}
/* استجابة لمس للأزرار — التحويم (رفع + تغميق) معرَّف أصلاً أعلى الملف */
.woocommerce a.button:active, .woocommerce button.button:active,
.woocommerce input.button:active, .wc-block-components-button:active{
  transform:scale(.97);
}

/* 🔑 قصّ العنوان سطرين — كان مقيَّداً بـ`.ac-archive` فبقيت عناوين البحث بلا
   قصّ (قِيس 390px: خمسة أسطر تدفع السعر خارج الشاشة). سطران عند Best Buy
   أيضاً، وسببهما أن أسماء المكيفات تحمل الموديل كاملاً. */
.wc-block-product-template .wp-block-post-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:760px){
  .wc-block-product-template .wc-block-components-product-price{ font-size:1.24rem; }
  .ac-fulfil-row{ font-size:.73rem; }
}

/* ══ رمز الريال السعودي ══════════════════════════════════════
   يُرسم من `assets/img/sar.svg` بـ`mask` ولون `currentColor`، فيرث لون
   السعر ووزنه في كل موضع. النسبة 1124.14 ÷ 1256.39 = 0.895 تحدّد العرض.
   🔑 النصّ البديل «ر.س» داخل العنصر يُخفى بالقصّ لا بإزاحة ضخمة —
      `left:-99999px` في RTL يُبيّض لقطات Playwright. وحيث لا CSS
      (رسائل الطلبات والفواتير) يظهر هو وحده فلا تختفي العملة.
   ══════════════════════════════════════════════════════════ */
.ac-sar{
  display:inline-block; block-size:.86em; inline-size:.77em;
  vertical-align:-.06em;
  background-color:currentColor;
  -webkit-mask:url('assets/img/sar.svg') no-repeat center / contain;
          mask:url('assets/img/sar.svg') no-repeat center / contain;
}
.ac-sar-t{
  position:absolute; inline-size:1px; block-size:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
/* المشطوب: الخطّ يمرّ فوق الرقم والرمز معاً، فيبقى الرمز بنفس الخفوت */
del .ac-sar{ opacity:1; }

/* ══ رقاقات البطاقة: شعار العلامة وعلم بلد الصنع (2026-08-07) ══
   🔑 الشعار في علبة ثابتة الارتفاع لا بعرضه الخام — شعارات سلة تتراوح نسبها
      من 2.6 إلى 3.3 (قِيس 07/08)، وعرضها كما هي يجعل كل بطاقة بوزن مختلف.
   🔑 العَلم `object-fit:cover` باستدارة 2px: نسب الأعلام 4:3 وقصّها لمستطيل
      موحّد أنظف من احترام نسبة كل علم على حدة في صفّ رقاقات.
   ═══════════════════════════════════════════════════════════ */
.ac-card-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }

.ac-chip--logo{
  display:inline-flex; align-items:center; padding:3px 8px;
  background:var(--ac-surface); border-color:var(--ac-line);
}

/* 🔴🔴🔴 إعادة ضبط إلزامية. قاعدة البطاقة `.ac-archive .wc-block-product-template img`
   تفرض على **كل** صورة داخل البطاقة هيئة صورة المنتج: عرض 100% ونسبة 1:1.04
   وحشو 8px وخلفية بيضاء. فظهر العَلم بحجم الصورة الكاملة وسط البطاقة —
   شوهد حيّاً 07/08. التخصيص هنا (صنفان + عنصران) يتجاوزها، والإعادة صريحة
   لا جزئية: أي خاصية تتركها تلك القاعدة تبقى مطبَّقة. */
.wc-block-product-template li .ac-card-chips img{
  aspect-ratio:auto; padding:0; background:none; border-radius:0;
  inline-size:auto; block-size:18px; max-inline-size:72px;
  object-fit:contain; display:block;
}
.wc-block-product-template li .ac-card-chips .ac-flag{
  inline-size:15px; block-size:11px; object-fit:cover; border-radius:2px;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ac-text) 10%, transparent);
}

.ac-chip--made{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--ac-muted); background:var(--ac-surface-2);
}
.ac-flag{
  display:block; inline-size:15px; block-size:11px;
  object-fit:cover; border-radius:2px;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ac-text) 10%, transparent);
}

/* رقاقات المزايا: واي فاي · بلوتوث · إنفرتر · 4K */
.ac-chip--feat{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--ac-blue-d);
  border-color:color-mix(in srgb, var(--ac-blue) 30%, transparent);
  background:color-mix(in srgb, var(--ac-blue-2) 9%, transparent);
}
.ac-feat-i{ inline-size:13px; block-size:13px; flex:0 0 13px; display:block; }

/* ── الشريحة: صورة خلفية + نصّ فوقها (2026-08-07) ───────────────
   🔴 البنرات الجديدة صور مشهدية كاملة العرض، لا منتج مقصوص على بلاطة.
      فالنموذج تغيّر: الصورة تصير **خلفية** والنصّ يعلوها.
   🔑 الموضوع في الصور يقع يساراً والفراغ يميناً — وهي جهة بدء القراءة
      بالعربية، فيقع النصّ في العمود الأول (اليمين في RTL) طبيعياً.
   🔴 نصّ الشريحة كان أبيض (لخلفية زرقاء داكنة). صورنا فاتحة ⇒ الأبيض
      يختفي. النصّ داكن، ومعه طبقة تفتيح تضمن القراءة مهما تغيّرت الصورة. */
.ac-slide{ position:relative; border-radius:16px; overflow:hidden; }
.ac-slide > figure{
  position:absolute; inset:0; margin:0; padding:0; z-index:0;
}
.ac-slide > figure picture,
.ac-slide > figure img{ display:block; inline-size:100%; block-size:100%; }
.ac-slide > figure img{ object-fit:cover; border-radius:0; box-shadow:none; }

/* طبقة تفتيح على جهة النصّ وحدها */
.ac-slide::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to left, color-mix(in srgb, var(--ac-surface) 93%, transparent) 0%,
             color-mix(in srgb, var(--ac-surface) 80%, transparent) 34%, color-mix(in srgb, var(--ac-surface) 28%, transparent) 58%, transparent 78%);
}
.ac-slide-copy{ position:relative; z-index:2; grid-column:1; max-inline-size:44ch; }
.ac-slide .ac-slide-copy h2{
  color:var(--ac-text); margin:0 0 10px; text-wrap:balance;
  font-size:clamp(1.45rem,3.2vw,2.25rem); line-height:1.32; font-weight:800;
}
.ac-slide .ac-slide-copy p{
  color:var(--ac-ink-2); margin:0 0 20px; font-size:1rem; line-height:1.8;
}
.ac-slide .ac-slide-copy .ac-cta{
  display:inline-block; background:var(--ac-cta-bg); color:var(--ac-cta-fg); text-decoration:none;
  font-weight:700; font-size:.98rem; padding:13px 26px; border-radius:11px;
  transition:background .18s ease, transform .18s ease;
}
.ac-slide .ac-slide-copy .ac-cta:hover{ background:var(--ac-blue-d); transform:translateY(-2px); }
.ac-slide .ac-slide-copy .ac-cta:focus-visible{ outline:3px solid color-mix(in srgb, var(--ac-blue-2) 60%, transparent); outline-offset:3px; }

@media (max-width:860px){
  .ac-slide{ grid-template-columns:1fr; padding:34px 24px 56px; }
  .ac-slide::after{
    background:linear-gradient(to bottom, color-mix(in srgb, var(--ac-surface) 90%, transparent) 0%,
               color-mix(in srgb, var(--ac-surface) 72%, transparent) 46%, color-mix(in srgb, var(--ac-surface) 30%, transparent) 74%, transparent 100%);
  }
  .ac-slide-copy{ max-inline-size:none; }
  .ac-slide .ac-slide-copy p{ font-size:.95rem; margin-block-end:16px; }
}
@media (prefers-reduced-motion:reduce){
  .ac-slide .ac-slide-copy .ac-cta:hover{ transform:none; }
}

/* ══ سطرا «قبل الخصم» و«وفّرت» في ملخّص السلة (2026-08-07) ══
   يرثان صنف `wc-block-components-totals-item` فيأخذان تباعد ووكومرس نفسه.
   🔑 «وفّرت» أخضر (`--ac-ok`) لا أحمر: الأحمر محجوز للتنبيه، والتوفير مكسب.
   🔑 «قبل الخصم» رمادي بوزن عادي كي لا ينافس «المجموع» تحته.
   ═══════════════════════════════════════════════════════════ */
.wc-block-components-totals-item.ac-before{ color:var(--ac-muted); }
.wc-block-components-totals-item.ac-before .wc-block-components-totals-item__value{
  font-weight:400; text-decoration:line-through; text-decoration-thickness:1px;
}
/* لون التوفير = أحمر (قرار المالك 07/08). كان أخضر لأن الأحمر محجوز
   للتنبيه؛ والمعتمد الآن طقم التوفير: أحمر · ذهبي · أبيض —
   وهو ما تستعمله Best Buy في سلتها (قرص أحمر بنصّ أبيض). */
.wc-block-components-totals-item.ac-saved{ color:var(--ac-danger); }
.wc-block-components-totals-item.ac-saved .wc-block-components-totals-item__label,
.wc-block-components-totals-item.ac-saved .wc-block-components-totals-item__value{
  font-weight:700; color:var(--ac-danger);
}

/* شارة «وفّر X» على بند السلة — أحمر · أبيض · حلقة ذهبية */
.wc-block-components-sale-badge{
  background:var(--ac-danger); color:var(--ac-surface);
  border:0; border-radius:999px; padding:3px 10px;
  font-size:.74rem; font-weight:800; line-height:1.5;
  /* 🔑 ذهبي كامل لا ممزوج: المزج بالشفاف فوق خلفية بيضاء يُفتّحه فينزل
     تبايُنه مع الأحمر إلى ما دون الرؤية. وحتى بكامل قوّته هو 2.83:1 —
     مقبول لأنه **زخرفي بحت** (المعنى في النصّ الأبيض 5.63:1) وهو لونك المعتمد. */
  box-shadow:0 0 0 2px var(--ac-gold);
}
.wc-block-components-sale-badge .wc-block-formatted-money-amount,
.wc-block-components-sale-badge *{ color:inherit; }

/* ══ إزالة تسطير الروابط (قرار المالك 07/08) ══════════════════
   🔑 التسطير يبقى عند المرور والتركيز البؤري: إزالته نهائياً تحذف الإشارة
      الوحيدة التي تميّز الرابط عن النصّ لمن لا يميّز الألوان — والاحتفاظ به
      في الحالتين يرضي الطلب دون فقد الدلالة.
   🔑 `:focus-visible` لا `:focus` كي لا يظهر التسطير عند النقر بالفأرة.
   🔴 والمرور محصورٌ في `@media (hover:hover)` — **الجوّال يُثبّت حالة `:hover`
      بعد اللمس** فيبقى التسطير عالقاً تحت النصّ بعد رفع الإصبع، ولا يزول إلا
      بلمس مكانٍ آخر. رصده المالك على جوّاله 16/08: «ليش يظهر خط الهايبر لنك
      لما اضغط على اي نص». الأجهزة اللمسية لا تحتاج إشارة المرور أصلاً — لا
      مؤشّر فيها يحوم قبل النقر — فحصرُها لا يفقدها شيئاً.
   ═══════════════════════════════════════════════════════════ */
a{ text-decoration:none; }

@media (hover:hover){
  /* بطلب المالك 30/08: لا تسطير عند مرور المؤشّر.
     :focus-visible أدناه يبقى — وهو دليل مستخدم لوحة المفاتيح لا زينة. */
  a:hover{ text-decoration:none; }
}
a:focus-visible{ text-decoration:underline; }

/* بنود السلة والدفع: العنوان رابط لكنه عنوانٌ في القراءة، فلا يُسطَّر أصلاً */
.wc-block-components-product-name,
.wc-block-components-product-name:hover,
.wp-block-woocommerce-cart .wc-block-cart-item__wrap a,
.wp-block-woocommerce-cart .wc-block-cart-item__wrap a:hover{ text-decoration:none; }

/* ══ صفحة المنتج: المزايا والعلم — نفس تمثيل البطاقة ══════════
   🔑 قاعدة `.ac-flag` الأساسية عامّة هنا لأن قاعدة البطاقة مقيَّدة بـ
      `.wc-block-product-template li` فلا تصل صفحة المنتج.
   ═══════════════════════════════════════════════════════════ */
.ac-flag{
  inline-size:15px; block-size:11px; object-fit:cover; border-radius:2px;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ac-text) 10%, transparent); display:inline-block;
  vertical-align:-1px; margin-inline-end:6px;
}
.ac-chips--single{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin-block:12px 4px;
}

/* ══ حقنٌ آمن مع React (2026-08-07) ═══════════════════════════
   🔴🔴🔴 القاعدة: **نُضيف ولا نحذف ولا نُدرج في الوسط.** أي حذف أو إزاحة
      داخل شجرة تُديرها React يُفشل مصالحتها بـ`removeChild` — وهذه أسطح مال.
   ═══════════════════════════════════════════════════════════ */

/* سطرا التوفير يُضافان في الذيل، ويُرفعان بصرياً بـ`order` */
/* حيلة `order` أُزيلت: الإدراج صار في موضعه الصحيح في DOM، فترتيب القراءة
   يطابق الترتيب البصري ولا يحتاج قلباً بصرياً (WCAG 1.3.2). */

/* نصّ «ر.س» يبقى في مكانه ويُخفى — والرمز يُضاف بعده بمقاس بكسلي صريح */
.woocommerce-Price-currencySymbol.ac-sar-host{ font-size:0; }

/* ══ الطباعة ووضع التباين القسري ══════════════════════════════
   🔴 الرمز رسمٌ بـ`mask` على لون خلفية — والطباعة تُسقط رسوم الخلفية،
      و`forced-colors` يُبدّل الألوان. فلولا هذا لاختفت العملة من الفاتورة
      تماماً، وهو نقيض ما بُني لأجله النصّ البديل أصلاً.
   🔑 يُطفأ القناع فيظهر النصّ البديل «ر.س» بمقاسه المضبوط من الجافاسكربت،
      وتبقى حاوية `wc_price` بـ`font-size:0` فلا يتكرّر الرمز مرّتين.
   ═══════════════════════════════════════════════════════════ */
@media print, (forced-colors: active){
  .ac-sar{
    background:none !important;
    -webkit-mask:none !important; mask:none !important;
    inline-size:auto !important; block-size:auto !important;
  }
  .ac-sar-t{
    position:static; inline-size:auto; block-size:auto;
    overflow:visible; clip-path:none; white-space:normal;
  }
}

/* ══ روابط داخل النصّ الجاري تُسطَّر (WCAG 1.4.1) ══════════════
   إزالة التسطير عامّة مقبولة لروابط التنقّل والبطاقات، لكن الرابط داخل فقرة
   يحتاج إشارة غير لونية: فرق `#0D6B82` عن نصّ الجسم 3.00:1 بالكاد، وكثير من
   الروابط `color:inherit` ⇒ صفر فرق لوني وصفر تسطير.
   ═══════════════════════════════════════════════════════════ */
.entry-content p a,
.wp-block-post-content p a,
.ac-prod-details p a,
.woocommerce-terms-and-conditions a,
.wc-block-components-checkout-policies a{ text-decoration:none; /* بطلب المالك 01/09: لا تسطير على روابط النصّ في أيّ مكان (رُوجعت مقايضة WCAG) */ }

/* ══ شريط الفئات — إعادة بناء 2026-08-07 ═══════════════════════
   قسم مُلحق يتجاوز قسم «شريط الفئات» الأصلي (سطر 260) ولا يعدّله.
   خمسة أعطال مقيسة حيّاً قبل هذا القسم:
   1) 🔴🔴🔴 المنسدلة كانت `display:none` تحت 860px ⇒ 129 من 135 رابطاً (95%)
      غير موجودة على الجوّال، وهو الوسيط الأول لمتجر جوّال أولاً.
   2) 🔴🔴🔴 تُفتح بالمرور وحده ⇒ صفر منسدلة على أي جهاز لمسي مهما اتّسع
      (آيباد 1024 قِيس: اللوحة مبنيّة و`display:block` ولا سبيل لفتحها).
   3) 🔴🔴 لوحة «المكيفات» ارتفاعها 873px داخل منفذ 900 وأعلاها عند 193
      ⇒ 165px مقصوصة أسفل الشاشة، بلا `max-height` ولا تمرير داخلي.
   4) 🔴🔴 Escape لا يُغلق (قِيس: `visibility:visible` بعده) — WCAG 1.4.13.
   5) 🔴 عند 390px: محتوى الصفّ 594px داخل 358 ⇒ ثلاث فئات من ستّ خارج
      الشاشة، و`scrollbar-width:none` يمحو الإشارة الوحيدة أنها موجودة.
   ═══════════════════════════════════════════════════════════ */

/* نصّ لقارئ الشاشة وحده — الزرّ يحمل أيقونة، واسمه يجب أن يُنطق. */
.ac-catbar .ac-sr{
  position:absolute; inline-size:1px; block-size:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* العنصر صار (رابط انتقال + زرّ كشف) فيلزم صفّاً */
.ac-cat{ display:flex; align-items:stretch; }

.ac-cat-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:32px; min-block-size:44px;
  margin:0; margin-inline-start:-6px; padding:0;
  background:none; border:0; border-block-end:2px solid transparent;
  border-radius:11px 11px 0 0; cursor:pointer; color:var(--ac-muted);
  transition:color .16s ease, border-color .16s ease;
}
.ac-cat-toggle svg{ transition:transform .18s cubic-bezier(.22,1,.36,1); }
.ac-cat.is-open > .ac-cat-toggle svg{ transform:rotate(180deg); }
.ac-cat:hover > .ac-cat-toggle,
.ac-cat.is-open > .ac-cat-toggle{ color:var(--ac-blue-d); border-block-end-color:var(--ac-blue); }

/* الصفحة الحالية تُعلَن للعين كما تُعلَن لقارئ الشاشة بـ`aria-current` */
.ac-cat.is-current > .ac-cat-top{ color:var(--ac-blue-d); border-block-end-color:var(--ac-blue); }
.ac-cat.is-current > .ac-cat-toggle{ border-block-end-color:var(--ac-blue); }
.ac-cat-panel a[aria-current]{ background:var(--ac-tint-hover); color:var(--ac-blue-d); font-weight:700; }

/* ── اللوحة: مقاس محدود وتمرير داخلي بدل القصّ ────────────────── */
.ac-cat-panel{
  inline-size:340px; min-inline-size:0; max-inline-size:calc(100vw - 32px);
  max-block-size:min(70vh, 620px);
  overflow-y:auto; overscroll-behavior:contain;
}
.ac-cat-panel > ul{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px; align-content:start; }
.ac-cat-panel a > span{ min-inline-size:0; }
.ac-cat-panel a b{ flex:0 0 auto; }

/* عمودان فوق 1100px وحدها: «المكيفات» 34 قسماً و«الأجهزة الكبيرة» 16.
   دون ذلك تُقصّ لوحة 640px عند الحافة (قيس على 900px: الحافة عند −44). */
@media (min-width:1100px){
  .ac-cat-panel--2col{ inline-size:min(640px, calc(100vw - 32px)); }
  .ac-cat-panel--2col > ul{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 8px; }
}

/* ── من يفتح اللوحة ──────────────────────────────────────────
   بلا جافاسكربت: المرور و`:focus-within` (قواعد القسم الأصلي، تبقى كما هي).
   مع جافاسكربت: المرور للفأرة، والزرّ للوحة المفاتيح واللمس — و`:focus-within`
   يُبطَل حتى لا تنفتح اللوحة لمجرّد وصول Tab إلى الزرّ فتُقفل بـEsc ثم تُفتح ثانيةً.
   ═════════════════════════════════════════════════════════ */
.ac-catbar.ac-js .ac-cat:focus-within > .ac-cat-panel{
  opacity:0; visibility:hidden; transform:translateY(-6px);
}
.ac-catbar.ac-js .ac-cat:hover > .ac-cat-panel,
.ac-catbar.ac-js .ac-cat.is-open > .ac-cat-panel{
  opacity:1; visibility:visible; transform:none;
}
/* اللمس لا يُنتج `:hover` حقيقياً — وحيثما أنتجه زائفاً بقيت اللوحة معلّقة */
@media (hover:none){
  .ac-catbar.ac-js .ac-cat:hover > .ac-cat-panel{
    opacity:0; visibility:hidden; transform:translateY(-6px);
  }
  .ac-catbar.ac-js .ac-cat.is-open > .ac-cat-panel{
    opacity:1; visibility:visible; transform:none;
  }
}
/* Escape يصرف اللوحة دون تحريك الفأرة (WCAG 1.4.13 «قابل للصرف») */
.ac-catbar.ac-js.ac-hover-off .ac-cat:hover > .ac-cat-panel{
  opacity:0; visibility:hidden; transform:translateY(-6px);
}

/* ── الجوّال والتابلت (≤860px) ─────────────────────────────────
   اللوحة كانت محذوفة هنا. تعود **صحيفة بعرض الشاشة** لا منسدلة تحت العنصر:
   🔑 `position:fixed` لأن صفّ الفئات `overflow-x:auto`، وأي لوحة مطلقة داخله
      تُقصّ. الثابت يفلت من قصّ الأسلاف، و`--ac-cbb` يأتي من الجافاسكربت
      (أسفل الشريط لحظة الفتح) فتلتصق الصحيفة به عند التمرير.
   ═════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .ac-catbar-inner{ position:relative; }

  .ac-cat-panel{
    display:block;                       /* يُبطل `display:none` القديم */
    position:fixed; inset-inline:0;
    inset-block-start:var(--ac-cbb, 152px);
    inline-size:auto; max-inline-size:none;
    max-block-size:min(62vh, calc(100vh - var(--ac-cbb, 152px) - 16px));
    padding:8px 16px 16px;
    border-inline:0; border-radius:0 0 14px 14px;
    box-shadow:var(--ac-shadow-panel-mobile);
  }
  .ac-cat-panel--2col > ul{ grid-template-columns:minmax(0,1fr); }

  /* أهداف لمس ≥44px */
  .ac-cat-panel a{ padding-block:12px; }
  .ac-cat-panel .ac-cat-l3 a{ padding:8px 11px; }
  .ac-cat-top{ padding-inline-end:4px; }
  .ac-cat-toggle{ inline-size:36px; }

  /* تلاشٍ عند حافة الصفّ يعلن أن خلفه فئات — الصنف من الجافاسكربت */
  .ac-catbar.is-scrollable .ac-catbar-inner::after{
    content:""; position:absolute; inset-block:0; inset-inline-end:0;
    inline-size:36px; pointer-events:none; z-index:1;
    background:linear-gradient(to right, transparent, var(--ac-surface));
  }
  [dir="rtl"] .ac-catbar.is-scrollable .ac-catbar-inner::after{
    background:linear-gradient(to left, transparent, var(--ac-surface));
  }
}

/* ══ خدمات ما بعد البيع — صفحة الطلب ══════════════════════════ */

.ac-aftersale{
  margin-block:28px; padding:18px 20px;
  border:1px solid var(--ac-line); border-radius:var(--ac-radius);
  background-image:var(--ac-grad-soft);
}
.ac-aftersale-title{ margin:0 0 6px; font-size:1.15rem; }
.ac-aftersale-note{ margin:0 0 16px; font-size:.86rem; line-height:1.8; color:var(--ac-muted); }
.ac-aftersale-item{
  padding-block:14px; border-top:1px solid var(--ac-line);
}
.ac-aftersale-item:last-child{ padding-block-end:0; }
.ac-aftersale-device{ margin:0 0 10px; font-size:.95rem; line-height:1.7; }
.ac-aftersale-form{ margin:0 0 10px; }
.ac-aftersale-form:last-child{ margin-block-end:0; }
.ac-aftersale-label{
  display:block; margin-block-end:6px;
  font-size:.86rem; font-weight:600; color:var(--ac-muted);
}
.ac-aftersale-ctl{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ac-aftersale-ctl select{
  flex:1 1 260px; max-width:100%; padding:10px 14px;
  border:1px solid var(--ac-line); border-radius:11px;
  background:var(--ac-surface); font-size:.9rem;
  font-variant-numeric:tabular-nums;
}
.ac-aftersale-ctl .button{ flex:0 0 auto; }
.ac-aftersale-hint{ margin:8px 0 0; font-size:.82rem; line-height:1.8; color:var(--ac-muted); }
@media (max-width:520px){
  .ac-aftersale{ padding:14px 16px; }
  .ac-aftersale-ctl{ flex-direction:column; align-items:stretch; }
  /* 🔑 في العمود يصير أساس flex ارتفاعاً — 260px جعلت القائمة برجاً فارغاً */
  .ac-aftersale-ctl select{ flex:0 0 auto; }
  .ac-aftersale-ctl .button{ width:100%; text-align:center; }
}

/* ══ الفوتر: شريط التواصل والساعات + السطر القانوني (08-08) ═══ */

.ac-foot-band{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-block-end:32px; padding:18px 20px;
  border:1px solid var(--ac-line); border-radius:var(--ac-radius);
  background-image:var(--ac-grad-soft);
}
.ac-foot-band h4{ margin:0 0 10px; font-size:.92rem; }
.ac-foot-contact a{
  display:inline-flex; align-items:center; gap:7px;
  margin-inline-end:22px; color:var(--ac-blue-d); font-weight:700;
  font-size:.92rem; text-decoration:none; font-variant-numeric:tabular-nums;
}
.ac-foot-contact a:hover{ text-decoration:none; }
.ac-foot-contact a:focus-visible{ text-decoration:underline; }
.ac-foot-hours dl{
  display:grid; grid-template-columns:auto 1fr; gap:4px 18px; margin:0;
  font-size:.86rem; align-items:baseline;
}
.ac-foot-hours dt{ font-weight:600; color:var(--ac-muted); }
.ac-foot-hours dd{ margin:0; font-variant-numeric:tabular-nums; }
.ac-foot-legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
}
.ac-foot-legal p{ margin:0; font-size:.8rem; color:var(--ac-muted); }
.ac-foot-pay span{ font-weight:700; }
@media (max-width:640px){
  .ac-foot-band{ grid-template-columns:1fr; gap:18px; padding:14px 16px; }
  .ac-foot-contact a{ display:flex; margin-inline-end:0; margin-block-end:8px; }
  .ac-foot-legal{ flex-direction:column; }
}

/* ══════════════════════════════════════════════════════════════
   الفوتر — الشعارات ومساحات النقر (2026-08-17) · parts/footer.html
   ══════════════════════════════════════════════════════════════ */

/* 🔴 قِيس 17/08: 17 من 20 رابطاً مساحة نقره <24px — دون حدّ WCAG 2.2 (2.5.8).
      `inline-block` شرطُ أن يُحتسب الحشو الرأسيّ على عنصرٍ سطريّ. */
.ac-foot-links a{
  display:inline-block; padding-block:5px; min-block-size:24px;
}
.ac-foot-contact a{ padding-block:4px; }

/* الشعار: صورةٌ لا نصّ — والحدّ الأقصى يمنع تمدّده لو رُفع شعارٌ أكبر */
.ac-foot-logo img{ max-inline-size:132px; block-size:auto; }

/* 🔑 أرقام السجلّ والضريبة لا تُكسر عبر سطرين — رقمٌ منقطع يُقرأ خطأً */
.ac-nb{ white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ── شارة التوثيق ── */
.ac-foot-badge{
  display:flex; align-items:flex-start; gap:9px; margin-block-start:14px;
  padding:10px 12px; border:1px solid var(--ac-line); border-radius:11px;
  background:color-mix(in srgb, var(--ac-ok) 7%, transparent);
  font-size:.78rem; line-height:1.7; color:var(--ac-muted);
}
.ac-foot-badge svg{ flex:none; color:var(--ac-ok); margin-block-start:1px; }
.ac-foot-badge strong{ color:var(--ac-text); font-weight:700; }

/* ختم المركز السعودي — داخل الفوتر لا عائماً (قرار المالك 28/08).
   🔑 الإطار يأتي بمقاسٍ من الجهة (120×44 ثم يُراسِل مقاسه الحقيقيّ عبر
      `postMessage`) فلا نفرض له عرضاً — نضبط الحيّز حوله فقط.
   🔑 والحاوية بعرضٍ محدودٍ كي لا يتمدّد الإطار على سطر الفوتر كلّه. */
.ac-foot-seal{ margin-block-start:10px; max-inline-size:200px; }
.ac-foot-seal iframe{ display:block; border:0; }
/* شبكة الأمان (صفحةٌ بلا شارة فوتر): تُوسَّط ولا تلتصق بالحافّة */
.ac-foot-seal-fallback{ display:flex; justify-content:center; padding-block:18px; }

/* ── صفّ وسائل الدفع ──
   🔑🔑🔑 علبةٌ موحّدة الارتفاع مع `contain` — نفس درس شريط العلامات: شعارات
      الدفع متفاوتة الأبعاد (من 844 بايت إلى 45KB ومن نسبةٍ عريضة إلى مربّعة)،
      وعرضها خاماً يجعل كل شعارٍ بوزنٍ بصريّ مختلف فيبدو الصفّ مبعثراً.
   🔑 وبلاطة بيضاء صريحة: شعارات الدفع مرسومة لخلفيةٍ فاتحة، وعلى الغامق
      تختفي حوافُها بلا بلاطة. */
.ac-foot-payrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
}
.ac-foot-paylbl{ font-size:.8rem; font-weight:700; color:var(--ac-text); }
.ac-pay-logos{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  list-style:none; margin:0; padding:0;
}
.ac-pay-logo{ margin:0; }
.ac-pay-logo img{
  display:block; inline-size:38px; block-size:24px; object-fit:contain;
  background:var(--ac-tile); border:1px solid var(--ac-line);
  border-radius:5px; padding:2px; box-sizing:border-box;
}
/* 🔴 قِيس 17/08: شعار STC Pay مربّع 113×113 و**حبره 8% فقط** — الباقي حشوٌ
      داخل الملفّ نفسه، فيتضاءل إلى علامةٍ لا تُقرأ داخل علبةٍ عريضة (مدى وفيزا
      وماستركارد عريضة بنسبة 2.8–3.1 وحبرها 59–78%). التكبير داخل العلبة يقصّ
      حشو الملفّ لا الشعار. */
.ac-pay-logo:has(img[alt="STC Pay"]){ overflow:hidden; border-radius:5px; }
.ac-pay-logo img[alt="STC Pay"]{ transform:scale(1.85); }
.ac-pay-text{ font-size:.78rem; color:var(--ac-muted); }

/* ── شريط العلامات في الفوتر ──
   🔴 يُخفى على الرئيسية: الشريط موجودٌ فيها أصلاً بـ24 علامة، وتكراره في
      الصفحة نفسها ضجيجٌ لا ثقة. */
.ac-foot-brands{ margin-block:22px 4px; }

/* ── أعمدة قابلة للطيّ (18/08) ──
   تُكتب <details open> ويُزال `open` على الجوال بسكربتٍ سطريّ — فبلا جافاسكربت
   يبقى كل شيء ظاهراً. وعلى سطح المكتب يُخفى المثلّث ويصير العنوان عنواناً. */
.ac-foot-col{ margin:0; }
.ac-foot-col > summary{
  list-style:none; cursor:default;
  display:flex; align-items:center; justify-content:space-between;
}
.ac-foot-col > summary::-webkit-details-marker{ display:none; }
.ac-foot-col > summary h4{
  margin:0; font-size:.92rem; font-weight:700;
}

/* ── كتلة الثقة: الشارة ثم الدفع ثم الاسترجاع في موضعٍ واحد ── */
.ac-foot-assure{
  margin:8px 0 0; font-size:.78rem; line-height:1.7; color:var(--ac-muted);
}
.ac-foot-payrow{ margin-block-start:12px; }

/* 🔬 قِيس 18/08 ولم يُكتب له كود: **صفحة الدفع بلا فوترٍ إطلاقاً**
   (`document.querySelectorAll('footer').length === 0`) — قالب الدفع بالكتل لا
   يستدعي جزء الفوتر. فقواعدُ إخفائه هناك كانت ستكون كوداً ميّتاً يوهم بأثرٍ لا
   يقع، وحُذفت. إن ظهر الفوتر في الدفع يوماً فأعد النظر — لا قبله. */
.home .ac-foot-brands, .front-page .ac-foot-brands{ display:none; }

@media (max-width:600px){
  /* 🔑 عمودان بدل عمود: الفوتر كان 1,285px على الجوال — أطول من ثلاث شاشات.
        العمودان يقصّانه دون طيّاتٍ تُخفي الروابط عن محرّكات البحث. */
  .ac-foot-links{ columns:2; column-gap:14px; }
  .ac-foot-links li{ break-inside:avoid; }
  .ac-foot-payrow{ gap:6px 10px; }

  /* 🔴 قِيس بعد النشر: الشريط شبكةٌ ثلاثية × خمسة صفوف ⇒ ~500px وحده، فارتفع
        الفوتر إلى 1,874px بدل أن ينخفض. صفٌّ واحد يُمرَّر أفقياً يُبقي العلامات
        الأربع عشرة كلّها في المتناول بنحو 90px — الشريط مرجعُ ثقةٍ يُلمح لا
        فهرسٌ يُقرأ سطراً سطراً. */
  .ac-foot-brands .ac-brands{
    display:flex; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x proximity;
    padding-block-end:6px; -webkit-overflow-scrolling:touch;
  }
  .ac-foot-brands .ac-brand{ flex:0 0 96px; scroll-snap-align:start; }
  /* شريط تمرير خفيف — إخفاؤه كلياً يُضيّع الإشارة إلى وجود المزيد */
  .ac-foot-brands .ac-brands::-webkit-scrollbar{ block-size:4px; }
  .ac-foot-brands .ac-brands::-webkit-scrollbar-thumb{
    background:var(--ac-line); border-radius:4px;
  }
  /* الشعار أهدأ على الجوال — كان يأخذ ربع الشاشة */
  .ac-foot-logo img{ max-inline-size:104px; }
}

/* عنصر «العروض» في شريط الفئات — علامة برتقالية لا زينة */
/* 🔴 `--ac-orange` حبراً على الفاتح قِيس **2.10** (المطلوب 4.5) — نفس علّة
   `--ac-ok` الموثّقة أعلاه. فحبرٌ أغمق مشتقّ للنصّ وحده، والعلامة تبقى
   برتقاليّة في الخلفيات والمتدرّجات كما هي. وينقلب في الغامق لأن الأرضية انقلبت.
   قِيس 28/08: 2.10 ⇒ **4.88** على الأبيض · و**10.57** للفاتح على أرضية الغامق. */
:root{ --ac-orange-ink:#A85F00; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ac-orange-ink:#FFB35C; } }
:root[data-theme="dark"]{ --ac-orange-ink:#FFB35C; }
.ac-cat-top--offers{ color:var(--ac-orange-ink); font-weight:800; }
.ac-cat:hover > .ac-cat-top--offers,
.ac-cat:focus-within > .ac-cat-top--offers{ color:var(--ac-orange-ink); }
.ac-cat-top--offers::before{
  content:""; display:inline-block; inline-size:7px; block-size:7px;
  border-radius:50%; background:var(--ac-orange); margin-inline-end:7px;
  vertical-align:2px;
}

/* حالة «متاح للطلب — حجز مسبق»: محايدة لا خضراء (08-08) */
p.stock.ac-preorder-stock{ color:var(--ac-blue-d); font-weight:600; }

/* ══ اقتراحات البحث (08-08) ═══════════════════════════════════ */
.ac-suggest{
  position:absolute; inset-inline:0; inset-block-start:calc(100% + 6px);
  z-index:60; margin:0; padding:6px; list-style:none;
  background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:var(--ac-radius);
  box-shadow:var(--ac-shadow-suggest);
  max-block-size:min(60vh, 420px); overflow-y:auto;
}
.ac-suggest li{ margin:0; }
.ac-suggest a{
  display:block; padding:10px 12px; border-radius:9px;
  color:inherit; text-decoration:none; font-size:.9rem; line-height:1.7;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.ac-suggest a:hover,
.ac-suggest a:focus-visible,
.ac-suggest li.is-active a{ background:color-mix(in srgb, var(--ac-blue-2) 12%, transparent); color:var(--ac-blue-d); }
.ac-suggest-all a{
  border-top:1px solid var(--ac-line); border-radius:0 0 9px 9px;
  margin-block-start:4px; padding-block-start:12px;
  font-weight:700; color:var(--ac-blue-d);
}

/* 🔑 غلاف البحث يقصّ حواف الحبة بـoverflow:hidden — يبتلع قائمة الاقتراحات.
   يُفكّ القصّ لحظة انفتاحها فقط، فيبقى شكل الحقل كما هو سائر الوقت. */
/* التخصيص يطابق قاعدة القصّ الأصلية (سطر 244) زائد الصنف — فيغلبها بلا !important */
.ac-header .ac-search .wp-block-search__inside-wrapper.ac-sg-open{ overflow:visible; }

/* ═══ الوضع الغامق (مهمّة ٩) ═════════════════════════════════════════
   ثلاث طبقات: الأساس فاتح · الميديا تتبع النظام · [data-theme] يتجاوز.
   ترتيبها هنا مقصود — تلي كتلتَي :root كلتيهما وكل قاعدة تحويل سابقة.
   القيم مُتحقَّق من تباينها بحساب WCAG يدويّ (راجع tools/DARK-MAP.txt
   للتصنيف الكامل ولقرار --ac-blue-d المحوريّ) — لا تغيّرها بلا إعادة حساب.
   🔴 القواعد أدناه مكرَّرة عمداً بين الطبقتين: لا يمكن وضع @media داخل
   قائمة مُحدِّدات، فكل قاعدة غامقة تُكتب مرّتين (ميديا + data-theme). */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* ── عائلات ①–⑤ عبر متغيّرات ووردبريس المشتركة ───────────────── */
    --wp--preset--color--base:     #0B1220;
    --wp--preset--color--text:     #E8EFF6;
    --wp--preset--color--surface:  #131C2B;
    --wp--preset--color--surface-2:#1B2637;
    --wp--preset--color--muted:    #94A3B4;
    --wp--preset--color--line:     rgba(255,255,255,.10);
    --wp--preset--color--ok:       #2DD4A7;
    --wp--preset--color--danger:   #FF6B6B;

    /* ── استثناءات مُقرَّرة فرادى ─────────────────────────────────── */
    --ac-accent:      #23B5E8;
    --ac-tint:        #0F2A38;  /* شريط المزايا — يبقى مُلوَّناً لا رمادياً */
    --ac-ring-color:  #23B5E8;
    --ac-band-strong: #12798F;  /* تمايز عن الترويسة 2.02→3.38 */
    --ac-tile-dim:    .92;

    /* ── قرار محوريّ: --ac-blue-d ينقلب (حبرٌ في 70 موضعاً — روابط/عناوين/
       أسعار/أيقونات/رقاقة «قيد الانتظار») — راجع الملحق في DARK-MAP.txt.
       الاستعمالات العشرة كخلفيةٍ لا حبر مُستثناة أدناه بقواعد مُوجَّهة. */
    --ac-blue-d:      #23B5E8;
    --ac-link-hover:  #6ECFF6;  /* أفتح لا أغمق — الاتجاه معكوس في الغامق */

    /* ── عائلة ③ سطح مرتفع — تلوينات فاتحة تنقلب فرادى ─────────────── */
    --ac-tint-hover:    #1B2637;
    --ac-tint-strong:   #24334A;
    --ac-chip-bg:       #1B2637;
    --ac-surface-hover: #1B2637;
    --ac-catgrid-bg:    #16293A;
    --ac-panel-tint:    #131C2B;
    --ac-grad-soft:     linear-gradient(180deg, #131C2B 0%, #1B2637 100%);

    /* ── عائلة ④ نصّ — حبر ثانويّ ورقاقة «الأكثر طلباً» ─────────────── */
    --ac-ink-2:        #94A3B4;
    --ac-chip-hot-bg:  #2D2013;
    --ac-chip-hot-fg:  #FFB020;

    /* ── أحبار الرقاقات — الحبر = لون الرقاقة نفسه بكامل الإشباع ────── */
    --ac-ok-ink:       #2DD4A7;  /* 8.03 */
    --ac-amber-ink:    #FFB020;  /* 8.00 */
    --ac-neutral-ink:  #94A3B4;  /* 5.89 */
    /* حبر «قيد الانتظار» = --ac-blue-d أعلاه ⇒ 6.54، بلا رمز إضافي */

    /* ── عائلة ⑤ حدّ وظلّ ───────────────────────────────────────────── */
    --ac-line-hover:  rgba(255,255,255,.18);
    --ac-shadow:      0 6px 24px rgba(0,0,0,.45);
    --ac-shadow-sm:   0 2px 8px rgba(0,0,0,.35);
    --ac-shadow-lg:   0 12px 32px rgba(0,0,0,.55);
    --ac-img-ring:    rgba(255,255,255,.10);
    --ac-shadow-panel:        0 14px 34px rgba(0,0,0,.45);
    --ac-shadow-panel-mobile: 0 18px 40px rgba(0,0,0,.50);
    --ac-shadow-card:         0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.35);
    --ac-shadow-card-hover:   0 2px 4px rgba(0,0,0,.40), 0 12px 28px rgba(0,0,0,.45);
    --ac-shadow-card-glow:    0 6px 22px rgba(0,0,0,.40);
    --ac-shadow-card-glow-sm: 0 4px 16px rgba(0,0,0,.35);
    --ac-shadow-suggest:      0 10px 28px rgba(0,0,0,.45);

    color-scheme: dark;
  }
}

:root[data-theme="dark"]{
  --wp--preset--color--base:     #0B1220;
  --wp--preset--color--text:     #E8EFF6;
  --wp--preset--color--surface:  #131C2B;
  --wp--preset--color--surface-2:#1B2637;
  --wp--preset--color--muted:    #94A3B4;
  --wp--preset--color--line:     rgba(255,255,255,.10);
  --wp--preset--color--ok:       #2DD4A7;
  --wp--preset--color--danger:   #FF6B6B;

  --ac-accent:      #23B5E8;
  --ac-tint:        #0F2A38;
  --ac-ring-color:  #23B5E8;
  --ac-band-strong: #12798F;
  --ac-tile-dim:    .92;

  --ac-blue-d:      #23B5E8;
  --ac-link-hover:  #6ECFF6;  /* أفتح لا أغمق — الاتجاه معكوس في الغامق */

  --ac-tint-hover:    #1B2637;
  --ac-tint-strong:   #24334A;
  --ac-chip-bg:       #1B2637;
  --ac-surface-hover: #1B2637;
  --ac-catgrid-bg:    #16293A;
  --ac-panel-tint:    #131C2B;
  --ac-grad-soft:     linear-gradient(180deg, #131C2B 0%, #1B2637 100%);

  --ac-ink-2:        #94A3B4;
  --ac-chip-hot-bg:  #2D2013;
  --ac-chip-hot-fg:  #FFB020;

  --ac-ok-ink:       #2DD4A7;
  --ac-amber-ink:    #FFB020;
  --ac-neutral-ink:  #94A3B4;

  --ac-line-hover:  rgba(255,255,255,.18);
  --ac-shadow:      0 6px 24px rgba(0,0,0,.45);
  --ac-shadow-sm:   0 2px 8px rgba(0,0,0,.35);
  --ac-shadow-lg:   0 12px 32px rgba(0,0,0,.55);
  --ac-img-ring:    rgba(255,255,255,.10);
  --ac-shadow-panel:        0 14px 34px rgba(0,0,0,.45);
  --ac-shadow-panel-mobile: 0 18px 40px rgba(0,0,0,.50);
  --ac-shadow-card:         0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.35);
  --ac-shadow-card-hover:   0 2px 4px rgba(0,0,0,.40), 0 12px 28px rgba(0,0,0,.45);
  --ac-shadow-card-glow:    0 6px 22px rgba(0,0,0,.40);
  --ac-shadow-card-glow-sm: 0 4px 16px rgba(0,0,0,.35);
  --ac-shadow-suggest:      0 10px 28px rgba(0,0,0,.45);

  color-scheme: dark;
}

/* ── البطاقة تُرى بطبقتين: فرق السطح + حدّ 1px — الظلّ لا يعمل على الداكن.
   🔴 لا تُقيَّد بـ.ac-archive — البحث يعرض نفس البلوك بلا ذلك الصنف؛
   المرساة li داخل .wc-block-product-template وحدها. ────────────────── */
:root[data-theme="dark"] .wc-block-product-template li{
  border:1px solid var(--wp--preset--color--line);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wc-block-product-template li{
    border:1px solid var(--wp--preset--color--line);
  }
}

/* ── رقاقات شعارات العلامات: خلفية فاتحة مُجمَّدة تحت الجميع ──────────
   قياس على 5 عيّنات: 3 مربّعات بيضاء صلبة و2 شفّافة بحبر أسود ⇒ الرقاقة
   الفاتحة وحدها تخدم النوعين. تُعاد استعمال --ac-tile (بلاطة الصورة
   المُجمَّدة أصلاً) بدل اختراع رمز جديد لنفس القيمة.
   🔴 `.ac-brands .ac-brand` لا `.ac-brand` وحدها — الصنف `.ac-brand` نفسه
   يُستعمل أيضاً غلافاً لشعار الترويسة (`.ac-header .ac-brand`، سطر 235)
   بلا علاقة بشعارات الموردين؛ اكتُشف بصرياً أن المُحدِّد المطلق كان يكسو
   شعار الترويسة بصندوق أبيض غير مقصود. ─────────────────────────────── */
:root[data-theme="dark"] .ac-chip--logo,
:root[data-theme="dark"] .ac-brands .ac-brand,
:root[data-theme="dark"] .ac-brand-head__logo,
:root[data-theme="dark"] .ac-pbrand{
  background:var(--ac-tile);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ac-chip--logo,
  :root:not([data-theme="light"]) .ac-brands .ac-brand,
  :root:not([data-theme="light"]) .ac-brand-head__logo,
  :root:not([data-theme="light"]) .ac-pbrand{
    background:var(--ac-tile);
  }
}

/* ── الشعار والنمط: الأصلي في الفاتح، الشفّاف في الغامق ───────────────
   الترميز الحيّ صورة واحدة (wp:site-logo) لا صنفين، فالتبديل بـcontent:url()
   لا بإظهار/إخفاء عنصرين. 🔴 لا تستبدل الأصلَين aircare-logo.png/
   ac-brand-pattern.png — يعتمد عليهما الفاتح وبوّابة المطابقة تحرسهما.
   🔑 مُحدِّدان لا واحد: `.ac-header .ac-logo img` (الصنف على غلافٍ يحوي
   img، اتفاق بلوك site-logo الموثَّق بقاعدة الحجم القائمة سطر 240) **و**
   `.ac-header img.ac-logo` (الصنف على img مباشرةً — بنية صفحة القياس
   الفعلية، تحقّقتُ بصرياً أن الأولى وحدها لا تُطبَّق عليها فيبقى شعارٌ
   أبيض شارد في الغامق بلا هذا الاحتياط). ─────────────────────────────── */
:root[data-theme="dark"] .ac-header .ac-logo img,
:root[data-theme="dark"] .ac-header img.ac-logo{
  content:url("assets/img/aircare-logo-transparent.png");
}
:root[data-theme="dark"] .ac-svc::before{
  background-image:url("assets/img/ac-brand-pattern-transparent.png");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ac-header .ac-logo img,
  :root:not([data-theme="light"]) .ac-header img.ac-logo{
    content:url("assets/img/aircare-logo-transparent.png");
  }
  :root:not([data-theme="light"]) .ac-svc::before{
    background-image:url("assets/img/ac-brand-pattern-transparent.png");
  }
}

/* 🔑 صفحة القياس وحدها: قسمها التوضيحيّ «الشعار» يحمل نسختين ثابتتين
   (.ac-logo--light/--dark) بترميز غير متّصل بأي قاعدة إنتاج حقيقية —
   `<style>` صفحة القياس نفسها يُخفي --dark دوماً بقرارٍ سابق («لا علاقة
   لهذا بـCSS الوضع الغامق»). هذه القاعدة تجاوزه بخصوصية أعلى فقط في
   الغامق حتى لا يبقى شعارٌ فاتح شارد بجانب شعار الترويسة المُصلَح أعلاه —
   لا تُغيّر شيئاً في الفاتح (الصفة الأصلية display:none تبقى نافذة هناك). */
:root[data-theme="dark"] .ac-logo-wrap .ac-logo--light{ display:none; }
:root[data-theme="dark"] .ac-logo-wrap .ac-logo--dark{ display:inline-block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ac-logo-wrap .ac-logo--light{ display:none; }
  :root:not([data-theme="light"]) .ac-logo-wrap .ac-logo--dark{ display:inline-block; }
}

/* ── أثر جانبيّ لانقلاب --ac-blue-d: عشرة مواضع تستهلكه خلفيةً (لا حبراً)
   مع نصّ أبيض --ac-cta-fg فوقها — كانت تجتاز AA على الفاتح (6.05) وتسقط
   إلى 2.23 لو انقلبت الخلفية معها. تُعاد توجيه الخلفية وحدها هنا؛ لا تُمسّ
   تعريف --ac-blue-d نفسه ولا بقيّة استعمالاته كحبر. ─────────────────── */
:root[data-theme="dark"] .wc-block-add-to-cart-form button[type="submit"],
:root[data-theme="dark"] .ac-archive .wc-block-product-template .wp-block-woocommerce-product-button a,
:root[data-theme="dark"] .ac-calc-go,
:root[data-theme="dark"] .ac-otp button,
:root[data-theme="dark"] .ac-track-form button,
:root[data-theme="dark"] .ac-sv-btn{
  background:var(--ac-cta-bg);
}
/* حالات التحويم لأربعة من "الستّة" التي وجّهتها مهمّة 8ب لـ--ac-cta-bg في
   السكون — نُكمل نفس القرار لحالة التحويم بدل توهّجها ببريق --ac-blue-d. */
:root[data-theme="dark"] .wc-block-components-button:hover,
:root[data-theme="dark"] .ac-header .ac-search .wp-block-search__button:hover,
:root[data-theme="dark"] .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
:root[data-theme="dark"] .ac-slide .ac-slide-copy .ac-cta:hover{
  background:var(--ac-cta-hover);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wc-block-add-to-cart-form button[type="submit"],
  :root:not([data-theme="light"]) .ac-archive .wc-block-product-template .wp-block-woocommerce-product-button a,
  :root:not([data-theme="light"]) .ac-calc-go,
  :root:not([data-theme="light"]) .ac-otp button,
  :root:not([data-theme="light"]) .ac-track-form button,
  :root:not([data-theme="light"]) .ac-sv-btn{
    background:var(--ac-cta-bg);
  }
  :root:not([data-theme="light"]) .wc-block-components-button:hover,
  :root:not([data-theme="light"]) .ac-header .ac-search .wp-block-search__button:hover,
  :root:not([data-theme="light"]) .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
  :root:not([data-theme="light"]) .ac-slide .ac-slide-copy .ac-cta:hover{
    background:var(--ac-cta-hover);
  }
}

/* ── جولة إصلاح ١، بند ١: زرّ شريحة قديم غير مقروء عند التحويم في الغامق ──
   .ac-slide .wp-block-button__link:hover يستهلك --ac-cta-hover-strong
   (مُجمَّد #063D55) حبراً فوق --ac-tint-hover التي تنقلب (#1B2637 في
   الغامق) — 1.31:1 محسوباً، غير مرئيّ عملياً لا ضعيفاً فقط. الحبر يجب أن
   ينقلب مع خلفيته: --ac-accent يعطي 6.41:1 على #1B2637 (يجتاز AA بمسافة).
   لا تُمسّ --ac-cta-hover-strong نفسه — يُستهلك بأمان خلفيةً (لا حبراً) في
   .ac-calc-go:hover، وتغييره العامّ كان سيفتح فخّاً جديداً هناك. */
:root[data-theme="dark"] .ac-slide .wp-block-button__link:hover{
  color:var(--ac-accent);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ac-slide .wp-block-button__link:hover{
    color:var(--ac-accent);
  }
}

/* ── أثر جانبيّ ثانٍ: --ac-on-brand (#062434) مُجمَّد بوصفه حبراً فوق شارات
   بلون علامة صلب (النِسبة الغالبة من استعمالاته) — لكن ثمانية مواضع تستهلكه
   حبراً عاماً فوق سطح/خلفية صفحة **بلا** خلفية علامة صلبة تحته، فيسقط إلى
   شبه اختفاء (نصّ داكن ~#062434 فوق سطح داكن). اكتُشف بصرياً أثناء فحص لقطة
   الغامق («قالوا عنّا» كان اقتباسها غير مقروء). الشارات (خلفية برتقالي/ذهبي
   صلبة) لا تُمسّ — تبقى --ac-on-brand فيها كما هي، تجتاز التباين بلا تغيير. */
:root[data-theme="dark"] .ac-voices-score,
:root[data-theme="dark"] .ac-voices-slider blockquote,
:root[data-theme="dark"] .ac-voice-r,
:root[data-theme="dark"] .ac-calc-btu,
:root[data-theme="dark"] .ac-calc-big,
:root[data-theme="dark"] .wc-block-checkout .wc-block-components-totals-footer-item,
:root[data-theme="dark"] .ac-ship-out.is-paid,
:root[data-theme="dark"] .ac-chip--spec{
  color:var(--ac-text);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ac-voices-score,
  :root:not([data-theme="light"]) .ac-voices-slider blockquote,
  :root:not([data-theme="light"]) .ac-voice-r,
  :root:not([data-theme="light"]) .ac-calc-btu,
  :root:not([data-theme="light"]) .ac-calc-big,
  :root:not([data-theme="light"]) .wc-block-checkout .wc-block-components-totals-footer-item,
  :root:not([data-theme="light"]) .ac-ship-out.is-paid,
  :root:not([data-theme="light"]) .ac-chip--spec{
    color:var(--ac-text);
  }
}

/* ═══ خريطة أقسام المنزل — قسم «تسوّق حسب الفئة» (16/08/2026) ═══════════
   استبدلت شبكةً من سبع بلاطات متساوية. سببان مقيسان:
   ① سبع فئات بوزنٍ واحد تُجبر العميل على قراءتها كلّها قبل أن يعرف أين يبدأ؛
     والمجموعة تعطيه مدخلاً يعرفه سلفاً («أبرّد» · «مطبخي»).
   ② 🔴 البلاطة القديمة كانت خلفيتها مزرقّة تحت صورةٍ **بيضاء صلبة**
     (كل صور الفئات صفر شفافية) ⇒ تظهر الصورة قصاصةً مقصوصة، وأوضحُ ما
     يكون ذلك في الوضع الغامق. البلاطة هنا **بيضاء صريحة** كبلاطة المنتج.
   🔑 الصورة داخل `<span>` لا `<li>`/`<img>` عارٍ — قواعد شبكة المنتجات
     تلتقط أي `img` وتفرض عليها هيئتها، وهذه خارج تلك الشبكة أصلاً لكن
     الاحتياط مقصود: أي عنصر جديد يُعطى ترميزاً لا يصطدم بقاعدة قائمة. */
.ac-zones{
  display:grid; gap:20px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-block-start:14px;
}
@media (max-width:900px){ .ac-zones{ grid-template-columns:1fr; gap:16px; } }

.ac-zone{
  background:var(--ac-surface);
  border:1px solid var(--ac-line);
  border-radius:16px;
  padding:14px 12px 12px;
  display:flex; flex-direction:column; gap:6px;
}
.ac-zone-h{
  margin:0 4px 4px; font-size:.9rem; font-weight:700;
  color:var(--ac-blue-d);
}

/* الصفّ: رابطٌ واحد بمساحة لمسٍ لا تقلّ عن 48px */
.ac-zone-i{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:12px;
  min-block-size:64px; padding:8px 10px;
  border-radius:12px; text-decoration:none; color:inherit;
  border:1px solid transparent;
  transition:background .16s ease, border-color .16s ease, transform .16s cubic-bezier(.22,1,.36,1);
}
.ac-zone-i:hover{
  background:var(--ac-surface-2);
  border-color:var(--ac-blue-2);
  transform:translateY(-1px);
}
.ac-zone-i:focus-visible{ outline:none; box-shadow:var(--ac-ring); }

/* البلاطة بيضاء في الوضعين — الصور مربّعات بيضاء صلبة */
.ac-zone-t{
  inline-size:56px; block-size:56px; flex:none;
  background:var(--ac-tile); border-radius:10px;
  display:grid; place-items:center; overflow:hidden;
  filter:brightness(var(--ac-tile-dim));
}
.ac-zone-t img{
  inline-size:100%; block-size:100%; object-fit:contain;
  padding:5px; display:block;
}
.ac-zone-x{ display:flex; flex-direction:column; min-inline-size:0; }
.ac-zone-x strong{ font-size:.88rem; font-weight:600; line-height:1.5; }
.ac-zone-x span{
  font-size:.74rem; color:var(--ac-muted);
  font-variant-numeric:tabular-nums;
}
.ac-zone-a{
  inline-size:18px; block-size:18px; flex:none; color:var(--ac-blue-d);
  transition:transform .18s cubic-bezier(.22,1,.36,1);
}
.ac-zone-i:hover .ac-zone-a{ transform:translateX(3px); }

/* «كل المنتجات» بلا صورة — يملأ مكان البلاطة بمسافة مكافئة */
.ac-zone-i--all{ grid-template-columns:1fr auto; }
.ac-zone-i--all .ac-zone-x strong{ color:var(--ac-blue-d); }

@media (prefers-reduced-motion:reduce){
  .ac-zone-i,.ac-zone-a{ transition:none; }
  .ac-zone-i:hover{ transform:none; }
  .ac-zone-i:hover .ac-zone-a{ transform:none; }
}

/* المجموعة الثالثة فئةٌ واحدة (أجهزة صغيرة) — لكنّها **أكبر فئات المتجر**
   (137 منتجاً). صفٌّ نحيل بجوار عمودين ممتلئين يجعلها تبدو هامشية، وهي
   عكس ذلك. فتُعطى معالجةً مبرَزة: صورة أكبر ونصّ أوضح تملأ ارتفاع أختيها. */
.ac-zone--feature{ justify-content:flex-start; }
.ac-zone--feature .ac-zone-i:not(.ac-zone-i--all){
  grid-template-columns:1fr; justify-items:center; text-align:center;
  gap:10px; padding:18px 12px; min-block-size:0;
}
.ac-zone--feature .ac-zone-i:not(.ac-zone-i--all) .ac-zone-t{
  inline-size:104px; block-size:104px; border-radius:14px;
}
.ac-zone--feature .ac-zone-i:not(.ac-zone-i--all) .ac-zone-x{ align-items:center; }
.ac-zone--feature .ac-zone-i:not(.ac-zone-i--all) .ac-zone-x strong{ font-size:1rem; }
.ac-zone--feature .ac-zone-i:not(.ac-zone-i--all) .ac-zone-a{ display:none; }
.ac-zone--feature .ac-zone-i--all{ margin-block-start:auto; }
@media (max-width:900px){
  /* على الجوّال تعود صفّاً عاديّاً — البروز يخدم توازن الأعمدة لا الجوّال */
  .ac-zone--feature .ac-zone-i:not(.ac-zone-i--all){
    grid-template-columns:auto 1fr auto; justify-items:start; text-align:start;
    padding:8px 10px; min-block-size:64px;
  }
  .ac-zone--feature .ac-zone-i:not(.ac-zone-i--all) .ac-zone-t{ inline-size:56px; block-size:56px; border-radius:10px; }
  .ac-zone--feature .ac-zone-i:not(.ac-zone-i--all) .ac-zone-x{ align-items:flex-start; }
  .ac-zone--feature .ac-zone-i:not(.ac-zone-i--all) .ac-zone-x strong{ font-size:.88rem; }
  .ac-zone--feature .ac-zone-i:not(.ac-zone-i--all) .ac-zone-a{ display:block; }
}

/* ══════════════════════════════════════════════════════════════
   البنر السينمائيّ — زحفٌ بطيء وشريط تقدّم (المعالجة «ب»، 16/08)
   قرار المالك: أوضح إشارةً للجوّال، وأقرب لروح متجر أجهزة.
   🔑 الزحف على `img` وحدها لا على الشريحة: الشريحة تحمل النصّ والتدرّج،
      وتكبيرها كان يُكبّر الخطّ ويُزحزح الزرّ.
   🔴 `will-change` على العنصر النشط وحده — وضعُه على كل الشرائح يحجز
      طبقةً لكلٍّ منها في الذاكرة بلا داعٍ.
   🔴 كل الحركة هنا تُلغى مع `prefers-reduced-motion`، والشريط يبقى ظاهراً
      ساكناً ممتلئاً فلا تختفي إشارة «هناك شرائح أخرى».
   ═══════════════════════════════════════════════════════════ */
/* 🔴 لا `will-change:transform` هنا: يرفع الصورة إلى طبقة تركيب مستقلّة
   **دائماً** — حتى مع «تقليل الحركة» حين لا تكون هناك حركة أصلاً — فيتغيّر
   تنعيم حوافّها وتختلف عن اللقطة المرجعية في 158 ألف بكسل بلا سبب مرئيّ.
   حركةُ `transform` تُركَّب على وحدة الرسم تلقائياً بلا هذا التلميح. */
.ac-slider.is-live .ac-slide.is-active > figure img{
  animation:ac-kenburns 7.6s cubic-bezier(.33,0,.2,1) forwards;
}
/* 🔑 يبدأ من `scale(1)` بالضبط لا من 1.005: الإطار الساكن يبقى **مطابقاً
   بكسلاً** لبنر اليوم — فمن عطّل الحركة، ومن التقط لقطةً، ومن فتح الصفحة
   قبل أن تبدأ الحركة، يرى ما كان يراه تماماً. الزحف يُضاف فوق حالةٍ قائمة
   ولا يُغيّرها. (بداية 1.005 كانت تُغيّر 158 ألف بكسل في اللقطة الساكنة.) */
@keyframes ac-kenburns{
  from{ transform:scale(1); }
  to  { transform:scale(1.062) translate3d(-1.1%,-0.7%,0); }
}

/* ── شريط التقدّم ───────────────────────────────────────────── */
.ac-slider-bar{
  position:absolute; inset-inline:0; inset-block-end:0; z-index:2;
  block-size:3px; overflow:hidden; pointer-events:none;
  background:color-mix(in srgb, var(--ac-surface) 22%, transparent);
}
.ac-slider-bar i{
  display:block; block-size:100%; inline-size:100%;
  background:var(--ac-blue-2);
  transform-origin:inline-start center; /* RTL: يمتلئ من جهة بدء القراءة */
  transform:scaleX(0);
}
/* الامتلاء يُقاد بالصنف لا بوجود العنصر — كي يُعاد تشغيله بحذفه وإضافته */
.ac-slider-bar.is-running i{
  animation:ac-bar-fill var(--ac-bar-ms,6000ms) linear forwards;
}
.ac-slider-bar.is-paused i{ animation-play-state:paused; }
/* أوقفه المستخدم: يبقى ممتلئاً ساكناً — الشريط دلالةُ موضع لا عدّاد وحسب */
.ac-slider-bar.is-off i{ animation:none; transform:scaleX(1); opacity:.5; }
@keyframes ac-bar-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@media (prefers-reduced-motion:reduce){
  .ac-slider.is-live .ac-slide.is-active > figure img{ animation:none; }
  .ac-slider-bar i{ animation:none !important; transform:scaleX(1); }
}
/* الزحف يتجمّد مع الشريط: مرورُ الفأرة أو إيقاف الزائر يوقف كل حركة في البنر */
.ac-slider.is-halted .ac-slide.is-active > figure img{ animation-play-state:paused; }

/* ══════════════════════════════════════════════════════════════
   مقارنة المنتجات (2026-08-16)
   🔴 لا `:hover` في أي مسارٍ لازم: كل تفاعل بالنقر/اللمس. المرور زينةٌ
      فوق حالةٍ تعمل بدونه — ثلاثة أعطال في يوم واحد سببها عكس ذلك.
   🔑 الشريط السفليّ يرفع أسفل الصفحة بمقدار ارتفاعه فلا يحجب آخر بطاقة.
   ═══════════════════════════════════════════════════════════ */

/* ── الزرّ على البطاقة ───────────────────────────────────────── */
.ac-cmp-btn{
  order:99; /* البطاقة عمود مرن ⇒ يقع الزرّ آخرها مهما كان موضع طباعته */
  display:flex; align-items:center; justify-content:center; gap:6px;
  inline-size:100%; margin-block-start:8px; padding:8px 10px;
  font:inherit; font-size:.82rem; font-weight:600; line-height:1;
  color:var(--ac-muted); background:transparent;
  /* 🔴 لا `--ac-line` هنا: قِيس على الفاتح فأعطى **1.23:1** مقابل خلفية
     البطاقة — والحدّ الأدنى لحافّة عنصر تحكّم 3:1 (WCAG 1.4.11). حدُّ الشعرة
     يصلح فاصلاً بين محتويات، لا حافّةً تُعرِّف زرّاً. المزيج من `--ac-muted`
     يرفعه فوق العتبة في الوضعين معاً. */
  border:1px solid color-mix(in srgb, var(--ac-muted) 78%, transparent);
  border-radius:10px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.ac-cmp-i{ inline-size:15px; block-size:15px; flex:none; }
.ac-cmp-btn.is-on{
  color:var(--ac-blue-d); border-color:var(--ac-blue);
  background:color-mix(in srgb, var(--ac-blue) 9%, transparent);
}
/* ممتلئ: يبقى قابلاً للنقر ليشرح السبب — لا يُعطَّل بلا تفسير */
.ac-cmp-btn.is-full{ opacity:.55; }
.ac-cmp-btn.is-warn{ border-color:var(--ac-warn); color:var(--ac-warn-fg); }
@media (hover:hover){
  .ac-cmp-btn:hover{ color:var(--ac-blue-d); border-color:var(--ac-line-hover); }
}

/* ── الشريط السفليّ ─────────────────────────────────────────── */
.ac-cmp-bar{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:60;
  display:flex; align-items:center; gap:10px;
  padding:10px clamp(12px,3vw,28px);
  background:var(--ac-surface); border-block-start:1px solid var(--ac-line);
  box-shadow:var(--ac-shadow-panel);
}
body.ac-cmp-open{ padding-block-end:64px; } /* لا تُحجب آخر بطاقة */
.ac-cmp-count{ font-size:.86rem; font-weight:700; color:var(--ac-muted); margin-inline-end:auto; }
.ac-cmp-go, .ac-cmp-clear{
  font:inherit; font-size:.86rem; font-weight:700; padding:9px 16px;
  border-radius:10px; cursor:pointer; border:1px solid transparent;
}
.ac-cmp-go{ background:var(--ac-blue-d); color:var(--ac-cta-fg); }
.ac-cmp-go[disabled]{ opacity:.45; cursor:not-allowed; }
/* نفس علّة الحافّة: الشريط عنصر تحكّم لا فاصل محتوى */
.ac-cmp-clear{
  background:transparent; color:var(--ac-muted);
  border-color:color-mix(in srgb, var(--ac-muted) 78%, transparent);
}

/* ── اللوحة والجدول ─────────────────────────────────────────── */
.ac-cmp-panel{
  position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  padding:clamp(10px,3vw,32px);
  background:color-mix(in srgb, var(--ac-text) 55%, transparent);
}
body.ac-cmp-lock{ overflow:hidden; }
.ac-cmp-box{
  inline-size:min(1100px,100%); max-block-size:92dvh;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:16px; box-shadow:var(--ac-shadow-lg);
}
.ac-cmp-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-block-end:1px solid var(--ac-line);
}
.ac-cmp-head h2{ margin:0; font-size:1.05rem; }
.ac-cmp-x{
  font:inherit; font-size:1rem; line-height:1; padding:8px 11px; cursor:pointer;
  background:transparent; color:var(--ac-muted);
  border:1px solid color-mix(in srgb, var(--ac-muted) 78%, transparent);
  border-radius:9px;
}
.ac-cmp-body{ padding:16px 18px 20px; overflow:auto; }
.ac-cmp-load, .ac-cmp-err{ margin:0; color:var(--ac-muted); font-size:.9rem; }
.ac-cmp-err{ color:var(--ac-danger); }
.ac-cmp-note{ margin:14px 0 0; font-size:.79rem; line-height:1.9; color:var(--ac-muted); }

/* الجدول عريض بطبعه — يُمرَّر داخل حاويته لا بالصفحة كلّها */
.ac-cmp-scroll{ overflow-x:auto; }
.ac-cmp-table{ inline-size:100%; border-collapse:collapse; font-size:.86rem; }
.ac-cmp-table th, .ac-cmp-table td{
  padding:10px 12px; text-align:start; vertical-align:middle;
  border-block-end:1px solid var(--ac-line);
}
.ac-cmp-table thead th, .ac-cmp-table tr:first-child th{ vertical-align:top; }
.ac-cmp-table tr:first-child th img{
  display:block; inline-size:78px; block-size:78px; object-fit:contain;
  background:var(--ac-tile); border-radius:10px; padding:5px; margin-block-end:8px;
}
.ac-cmp-table tr:first-child th a{
  display:block; max-inline-size:180px; font-size:.82rem; font-weight:600;
  line-height:1.6; color:inherit;
}
.ac-cmp-rowhead{
  inline-size:150px; font-weight:700; color:var(--ac-muted);
  background:var(--ac-surface-2); white-space:nowrap;
}
/* 🔑 سببُ وجود الجدول: إبراز ما يختلف. المتطابق يخفت ولا يُحذف — العميل
   يحتاج أن يرى أنهما تساويا فيه، لا أن يظنّ الصفّ ناقصاً. */
.ac-cmp-table tr.is-diff td{ font-weight:700; color:var(--ac-text); }
.ac-cmp-table tr.is-same td{ color:var(--ac-muted); }
.ac-cmp-table tr.is-diff .ac-cmp-rowhead{
  color:var(--ac-blue-d); background:color-mix(in srgb, var(--ac-blue) 8%, transparent);
}
.ac-cmp-na{ color:var(--ac-muted); font-weight:400; font-style:normal; }

/* رسالة الحالة لقارئ الشاشة — مرئيّة للجميع أسفل الشاشة */
.ac-cmp-live{
  position:fixed; inset-block-end:76px; inset-inline-end:16px; z-index:61;
  margin:0; padding:9px 14px; max-inline-size:min(320px,86vw);
  font-size:.82rem; line-height:1.7;
  background:var(--ac-warn-bg); color:var(--ac-warn-fg);
  border:1px solid var(--ac-warn-border); border-radius:10px;
}
.ac-cmp-live:empty{ display:none; }

/* ══════════════════════════════════════════════════════════════
   شريط الشراء اللاصق — صفحة المنتج على الجوال · inc/buy-bar.php
   🔴 جارُه `.ac-cmp-bar` يشغل القاع نفسه بـz-index:60 — فهذا 59
      ويرتفع فوقه بارتفاعه حين يُفتح، ولا يزاحمه في المكان.
   ══════════════════════════════════════════════════════════════ */
.ac-buybar{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:59;
  background:var(--ac-surface); border-block-start:1px solid var(--ac-line);
  box-shadow:var(--ac-shadow-panel);
  padding:8px clamp(12px,3vw,20px);
  padding-block-end:calc(8px + env(safe-area-inset-bottom, 0px));
}
.ac-buybar[hidden]{ display:none; }
.ac-buybar-in{
  display:flex; align-items:center; gap:10px;
  max-inline-size:1200px; margin-inline:auto;
}
/* 🔴 قِيس 17/08: بمُحدِّدٍ من صنفٍ واحد جاءت الصورة 54×21 — قاعدةُ صورٍ عامّة
   في القالب تغلبه فتفرض نسبة المصدر (500×146). المحدِّد هنا من صنفين
   و`aspect-ratio` يمنع أي عودة إلى نسبة الملف. */
.ac-buybar .ac-bb-img{
  inline-size:46px; block-size:46px; aspect-ratio:1; flex:none;
  object-fit:contain; background:var(--ac-tile);
  border:1px solid var(--ac-line); border-radius:9px; padding:3px;
  margin:0; max-inline-size:46px;
  box-sizing:border-box;   /* بدونه: 46 + حشو 6 + حافّة 2 = 54 مقيسة */
}
/* min-inline-size:0 شرطُ عمل القصّ داخل flex */
.ac-bb-txt{ display:grid; gap:1px; min-inline-size:0; margin-inline-end:auto; }
.ac-bb-name{
  font-size:.78rem; line-height:1.4; color:var(--ac-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ac-bb-price{ font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; }
.ac-bb-price del{ display:none; }   /* القاع ضيّق: السعر النافذ وحده */
.ac-bb-price ins{ text-decoration:none; }
/* لاحقة «شامل ضريبة القيمة المضافة» تضيف سطراً ثانياً فيصير الشريط 88px.
   السعر المعروض هنا شاملٌ كما هو أعلى الصفحة — واللاحقة كاملةً باقية هناك
   تحت السعر الرئيسي، فلا يُحجب إفصاح، وإنما لا يُكرَّر في شريط تحكّم. */
.ac-bb-price .woocommerce-price-suffix{ display:none; }
.ac-bb-go{
  font:inherit; font-size:.92rem; font-weight:700;
  padding:11px 18px; flex:none; cursor:pointer;
  border:1px solid transparent; border-radius:11px;
  background:var(--ac-cta-bg); color:var(--ac-cta-fg);
}
.ac-bb-go[disabled]{ opacity:.45; cursor:not-allowed; }

/* لا تُحجب آخر كتلة في الصفحة */
body.ac-bb-on{ padding-block-end:var(--ac-bb-h,68px); }
body.ac-cmp-open .ac-buybar{ inset-block-end:64px; }
body.ac-cmp-open.ac-bb-on{ padding-block-end:calc(64px + var(--ac-bb-h,68px)); }

/* سطح المكتب: الزرّ الأصلي بجانب المعرض اللاصق، فلا حاجة لبديلٍ عنه */
@media (min-width:783px){ .ac-buybar{ display:none; } }

@media (max-width:560px){
  .ac-cmp-rowhead{ inline-size:110px; white-space:normal; }
  .ac-cmp-table tr:first-child th img{ inline-size:56px; block-size:56px; }
  .ac-cmp-table tr:first-child th a{ max-inline-size:120px; font-size:.78rem; }
}


/* AC-CHECKOUT-DARK:START — مولَّد، لا تُحرّر يدوياً */

/* ══════════════════════════════════════════════════════════════
   الوضع الغامق لصفحتَي السلة وإتمام الطلب — مولَّد آلياً (2026-08-16)
   🔴 لا تُحرّر هنا: المصدر `tools/checkout-dark.src.css` والمولّد
      `tools/build-checkout-dark.js`. النسختان أدناه من مصدرٍ واحد،
      فلا تفترق حالةُ «اخترتُ الغامق» عن حالة «نظامي غامق».
   ═══════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark){
  /* tools/checkout-dark.css — مسوّدة الطبقة الغامقة لصفحتَي السلة وإتمام الطلب.
     تُحقن على الصفحة الحيّة للقياس قبل أي نشر، ثم تُنقل إلى style.css مكرَّرةً
     بين طبقتَي `@media` و`[data-theme]` كما تفرض بنية الورقة.
  
     القياس الذي بنى هذا الملف (الحيّ، 16/08، الغامق):
       .wc-block-components-checkout-step  bg=rgb(255,255,255)  ⇐ **بيضاء**
       label.wc-block-components-radio-control__option  color=rgb(23,32,42)
         على bg=rgb(19,28,43)  ⇒ 1.04:1  — داكنٌ على داكن، خيارُ دفعٍ بلا اسم
       .wc-block-components-text-input label  color=rgb(148,163,180) ⇒ 2.57:1
       .wc-block-components-checkout-step__title  cyan على أبيض ⇒ 2.37:1
     أي أن الصفحة **نصف مقلوبة**: الخلفية انقلبت والبطاقات لا. */
  /* البطاقات نفسها — أصل العلّة: بيضاء داخل صفحة غامقة */
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-checkout-step,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-sidebar,
  :root:not([data-theme="light"]) .wp-block-woocommerce-cart .wc-block-components-sidebar,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-panel,
  :root:not([data-theme="light"]) .wp-block-woocommerce-cart .wc-block-components-panel{
    background:var(--ac-surface);
    border-color:var(--ac-line);
    color:var(--ac-text);
  }
  
  /* عناوين الحقول — رمادي ووكومرس مضبوطٌ لخلفية بيضاء */
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-text-input label,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-blocks-components-select__label,
  :root:not([data-theme="light"]) .wp-block-woocommerce-cart .wc-block-components-text-input label{
    color:var(--ac-muted);
  }
  
  /* الحقول والقوائم — حبرٌ فاتح وحافّة تُرى (عنصر تحكّم ⇒ 3:1) */
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-text-input input,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout select.wc-blocks-components-select__select,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout textarea,
  :root:not([data-theme="light"]) .wp-block-woocommerce-cart .wc-block-components-text-input input,
  :root:not([data-theme="light"]) .wp-block-woocommerce-cart textarea{
    background:var(--ac-surface-2);
    color:var(--ac-text);
    border-color:color-mix(in srgb, var(--ac-muted) 78%, transparent);
  }
  
  /* أسماء وسائل الدفع ووصفها — أخطر ما رُصد: 1.04:1 */
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-radio-control__option,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-radio-control__label,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-radio-control__description,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .moyasar-blocks-label,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-content{
    color:var(--ac-text);
  }
  
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-radio-control__option{
    border-color:color-mix(in srgb, var(--ac-muted) 60%, transparent);
  }
  
  /* نصوص ثانوية داخل الصفحتين */
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-checkout-step__description,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-validation-error,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout small,
  :root:not([data-theme="light"]) .wp-block-woocommerce-cart .wc-block-components-checkout-step__description{
    color:var(--ac-muted);
  }
  
  /* حقول بوابة الدفع (ميسر) — ترسمها الإضافة بخلفيتها الفاتحة */
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .moyasar-blocks-container input,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .moyasar-blocks-container select{
    background:var(--ac-surface-2);
    color:var(--ac-text);
    border-color:color-mix(in srgb, var(--ac-muted) 78%, transparent);
  }
  
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .moyasar-blocks-container label{ color:var(--ac-muted); }
  
  /* ── جولة ثانية: ما بقي بعد أوّل قياس ───────────────────────────
     🔴 قواعد ووكومرس للحقول أعلى انتقائيةً من قاعدتي الأولى
        (`input:not([type=checkbox]):not([type=radio])`) فلم تُطبَّق حافّتي —
        قِيست 1.3:1 بعد الحقن. أُطابق انتقائيّتها وأزيد. */
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]),
  :root:not([data-theme="light"]) .wp-block-woocommerce-cart .wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]),
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout .wc-blocks-components-select__select,
  :root:not([data-theme="light"]) .wp-block-woocommerce-checkout textarea{
    background:var(--ac-surface-2) !important;
    color:var(--ac-text) !important;
    border-color:color-mix(in srgb, var(--ac-muted) 78%, transparent) !important;
  }
  
  /* 🔴 عناوين القوائم المنسدلة خارج غلاف `wp-block-woocommerce-checkout`
     (بلوك «معلومات الطلب الإضافية» عندنا) — فلا يطالها النطاق. تُستهدف
     بصنفها وحده داخل الصفحة الغامقة. */
  :root:not([data-theme="light"]) .wc-blocks-components-select__label,
  :root:not([data-theme="light"]) .wc-block-components-checkbox__label,
  :root:not([data-theme="light"]) .wc-block-components-checkbox__label a{
    color:var(--ac-text);
  }
  
  /* ملخّص الطلب في العمود الجانبيّ — الأصناف والأسعار بحبر ووكومرس الداكن.
     🔴 كُتبت أوّلاً بأصنافٍ مجرَّدة، فسرت `.wc-block-formatted-money-amount`
        إلى **كل بطاقات المتجر** وحوّلت «وفّرت 310 ر.س» من الأحمر الدالّ إلى
        الأبيض. أسقطتها لقطة الغامق. اللونُ الدالّ ليس زينةً تُوحَّد.
        كل قاعدة هنا مقيَّدة بحاوية تخصّ السلة/إتمام الطلب وحدها. */
  /* 🔴 `:not(.ac-saved)` ليس زينة: صفّ «وفّرت» في السلة يحمل `.ac-saved`
     ولونه الأحمر الدالّ من القالب — وقاعدتي دهسته فصار أبيض كبقيّة المجاميع،
     أي فقدَ معناه. أسقطته لقطةُ الغامق، وحدّدته `elementFromPoint` عند
     إحداثيّات الفرق بالضبط بدل الاستنتاج.
     القاعدة العامّة: لا تُوحِّد لوناً يحمل معنى. */
  :root:not([data-theme="light"]) .wc-block-components-order-summary .wc-block-components-order-summary-item__description,
  :root:not([data-theme="light"]) .wc-block-components-order-summary .wc-block-components-order-summary-item__individual-prices,
  :root:not([data-theme="light"]) .wc-block-components-order-summary .wc-block-components-product-name,
  :root:not([data-theme="light"]) .wc-block-components-order-summary .wc-block-components-product-metadata,
  :root:not([data-theme="light"]) .wc-block-components-order-summary .wc-block-components-product-price__value,
  :root:not([data-theme="light"]) .wc-block-components-order-summary .wc-block-formatted-money-amount,
  :root:not([data-theme="light"]) .wc-block-components-totals-item:not(.ac-saved) .wc-block-components-totals-item__label,
  :root:not([data-theme="light"]) .wc-block-components-totals-item:not(.ac-saved) .wc-block-components-totals-item__value,
  :root:not([data-theme="light"]) .wc-block-components-totals-item:not(.ac-saved) .wc-block-formatted-money-amount{
    color:var(--ac-text);
  }
  
  :root:not([data-theme="light"]) .wc-block-components-order-summary .wc-block-components-product-price__regular,
  :root:not([data-theme="light"]) .wc-block-components-order-summary .wc-block-components-product-metadata__description,
  :root:not([data-theme="light"]) .wc-block-components-totals-item .wc-block-components-totals-footer-item-tax{
    color:var(--ac-muted);
  }
  
  /* ── جولة ثالثة: تتبّع الخلفية البيضاء إلى مصدرها ────────────────
     🔑 لم يكن الحبر هو المشكلة بل ما تحته: قِيست سلسلة الأسلاف فظهر
        `.wc-block-components-order-summary` بخلفية rgb(248,250,251)
        و`.wc-blocks-components-select__container` بخلفية بيضاء —
        فالحبر الفاتح الذي وضعتُه صار فاتحاً على فاتح (1.11:1).
        تتبّعُ الخلفية أصدق من تخمين أن العلّة في اللون. */
  :root:not([data-theme="light"]) .wc-block-components-order-summary,
  :root:not([data-theme="light"]) .wc-blocks-components-select__container,
  :root:not([data-theme="light"]) .wc-block-components-order-summary__button{
    background:var(--ac-surface-2);
    border-color:var(--ac-line);
  }
  
  /* عنوان القائمة: قاعدة ووكومرس أعلى انتقائيةً — نُطابقها بجدّها */
  :root:not([data-theme="light"]) .wc-blocks-components-select .wc-blocks-components-select__label,
  :root:not([data-theme="light"]) .wc-blocks-components-select__container .wc-blocks-components-select__label{
    color:var(--ac-muted);
  }
  
  :root:not([data-theme="light"]) /* ── تصحيح انحدارٍ صنعتُه بنفسي ─────────────────────────────────
     🔴 قاعدة `.wc-block-formatted-money-amount{color:var(--ac-text)}
  
  :root:not([data-theme="light"]) ` أعلاه
        داست حبر **شارة الخصم** أيضاً: خلفيتها `#FF6B6B` صلبة، فصار الحبر
        الفاتح فوق أحمر فاتح ⇒ 2.39:1.
     🔑 القاعدة التي تحكم: حبرٌ فوق لونٍ صلبٍ لا يتبع الصفحة — يتجمّد على ما
        يقرأ على ذلك اللون بعينه. لا يُقلَب ولا يُترك لوراثة عامّة. */
  .wc-block-components-order-summary .wc-block-components-sale-badge,
  :root:not([data-theme="light"]) .wc-block-components-order-summary .wc-block-components-sale-badge .wc-block-formatted-money-amount,
  :root:not([data-theme="light"]) .wc-block-components-order-summary .wc-block-components-product-badge{
    color:var(--ac-on-brand);
  }
  
  /* ── درج السلة المصغّرة ─────────────────────────────────────────
     🔴 رصده جرد الغامق: `wc-block-mini-cart__drawer` خلفيته بيضاء 480×1100
        داخل صفحة غامقة، ونصّ «سلة مشترياتك فارغة» عليه بتباين 1.09:1.
        نفس عائلة عطل إتمام الطلب: لوحةُ بلوكٍ لم يُصمَّم عليها الغامق.
     🔑 نطاقه الدرج نفسه لا الصفحة — فلا يمسّ زرّ السلة في الترويسة. */
  /* 🔴 لون هذا العنصر يأتي من **نمطٍ سطريّ** يكتبه ووكومرس على الوسم نفسه
     (`style="background-color: rgb(246,248,251)"`) — قرأتُه من `getAttribute`
     بعد أن فشلت قاعدةٌ بانتقائية (0,3,0). النمط السطريّ لا تغلبه انتقائية
     مهما ارتفعت، فـ`!important` هنا ليست تجاوزاً بل الوسيلة الوحيدة.
     🔑 ولذلك رُفعت وحدها إلى قاعدة مستقلّة: لا تُعمَّم على بقيّة الطبقة. */
  :root:not([data-theme="light"]) .wc-block-mini-cart__template-part .wp-block-woocommerce-mini-cart-contents{
    background-color:var(--ac-surface) !important;
    color:var(--ac-text);
  }
  
  :root:not([data-theme="light"]) .wc-block-mini-cart__drawer,
  :root:not([data-theme="light"]) .wp-block-woocommerce-mini-cart-contents,
  :root:not([data-theme="light"]) .wp-block-woocommerce-empty-mini-cart-contents-block,
  :root:not([data-theme="light"]) .wc-block-mini-cart__drawer .wc-block-components-drawer,
  :root:not([data-theme="light"]) .wc-block-mini-cart__drawer .wc-block-components-drawer__screen-overlay{
    background:var(--ac-surface);
    color:var(--ac-text);
    border-color:var(--ac-line);
  }
  
  :root:not([data-theme="light"]) .wc-block-mini-cart__drawer .wc-block-mini-cart__title,
  :root:not([data-theme="light"]) .wc-block-mini-cart__drawer .wc-block-components-product-name,
  :root:not([data-theme="light"]) .wc-block-mini-cart__drawer .wc-block-components-product-price__value,
  :root:not([data-theme="light"]) .wc-block-mini-cart__drawer .wc-block-formatted-money-amount,
  :root:not([data-theme="light"]) .wc-block-mini-cart__drawer p{
    color:var(--ac-text);
  }
  
  :root:not([data-theme="light"]) .wc-block-mini-cart__drawer .wc-block-components-product-metadata,
  :root:not([data-theme="light"]) .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions{
    color:var(--ac-muted);
  }
  
  /* ── نموذج الحساب الكلاسيكيّ ────────────────────────────────────
     🔴 حقول تسجيل الدخول ليست بلوكات: `woocommerce-Input` ترسمها ووكومرس
        بخلفية **بيضاء ثابتة** وحبرٍ أسود وحدٍّ أحمر داكن — لا تنقلب إطلاقاً.
        فتظهر صناديق بيضاء صارخة داخل صفحة غامقة. نفس عائلة عطل إتمام الطلب،
        وأفلتت من الكاشفين معاً: تباين حبرها 21:1 (فلا نصّ يُبلَّغ)، وحجمها
        دون عتبة «البطاقة الفاتحة».
     🔑 الحبر يُقلب مع الخلفية معاً — قلبُ أحدهما وحده يصنع أسودَ على غامق. */
  :root:not([data-theme="light"]) .woocommerce-Input,
  :root:not([data-theme="light"]) .woocommerce-form input[type="text"],
  :root:not([data-theme="light"]) .woocommerce-form input[type="email"],
  :root:not([data-theme="light"]) .woocommerce-form input[type="password"],
  :root:not([data-theme="light"]) .woocommerce-form input[type="tel"]{
    background-color:var(--ac-surface-2);
    color:var(--ac-text);
    border-color:color-mix(in srgb, var(--ac-muted) 78%, transparent);
  }
  
  :root:not([data-theme="light"]) .woocommerce-form label,
  :root:not([data-theme="light"]) .woocommerce-form-login__rememberme,
  :root:not([data-theme="light"]) .woocommerce-LostPassword{
    color:var(--ac-muted);
  }
  
  /* ── أيقونة «إظهار كلمة المرور» ─────────────────────────────────
     🔴 انحدارٌ صنعتُه: تغميق حقل كلمة المرور جعل أيقونة العين سوداء على
        غامق. مقيسٌ بالبكسل المرسوم: **18.88 في الفاتح · 1.24 في الغامق**.
     🔴🔴 ولولا فتح الطيّة لما رأيتُه: النموذج داخل `<details class="ac-alt">`
        **مغلقة**، فقياسي الأول أعطى 1.00 في الوضعين معاً واستنتجتُ خطأً أن
        الزرّ بلا أيقونة وأن العيب من ووكومرس لا منّي. محتوىً غير مرسوم يعطي
        رقماً متساوياً في كل الأوضاع — وهو إنذارُ «لم أقس» لا «لا فرق».
     🔑 الأيقونة صورةُ SVG في `background-image` على `::before` بلونٍ ثابت،
        فلا يقودها `color`. القلب اللونيّ يصلحها أيّاً كانت طريقة رسمها. */
  :root:not([data-theme="light"]) .show-password-input{ filter:invert(1); opacity:.85; }
}

/* tools/checkout-dark.css — مسوّدة الطبقة الغامقة لصفحتَي السلة وإتمام الطلب.
   تُحقن على الصفحة الحيّة للقياس قبل أي نشر، ثم تُنقل إلى style.css مكرَّرةً
   بين طبقتَي `@media` و`[data-theme]` كما تفرض بنية الورقة.

   القياس الذي بنى هذا الملف (الحيّ، 16/08، الغامق):
     .wc-block-components-checkout-step  bg=rgb(255,255,255)  ⇐ **بيضاء**
     label.wc-block-components-radio-control__option  color=rgb(23,32,42)
       على bg=rgb(19,28,43)  ⇒ 1.04:1  — داكنٌ على داكن، خيارُ دفعٍ بلا اسم
     .wc-block-components-text-input label  color=rgb(148,163,180) ⇒ 2.57:1
     .wc-block-components-checkout-step__title  cyan على أبيض ⇒ 2.37:1
   أي أن الصفحة **نصف مقلوبة**: الخلفية انقلبت والبطاقات لا. */
/* البطاقات نفسها — أصل العلّة: بيضاء داخل صفحة غامقة */
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-checkout-step,
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-sidebar,
:root[data-theme="dark"] .wp-block-woocommerce-cart .wc-block-components-sidebar,
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-panel,
:root[data-theme="dark"] .wp-block-woocommerce-cart .wc-block-components-panel{
  background:var(--ac-surface);
  border-color:var(--ac-line);
  color:var(--ac-text);
}

/* عناوين الحقول — رمادي ووكومرس مضبوطٌ لخلفية بيضاء */
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-text-input label,
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-blocks-components-select__label,
:root[data-theme="dark"] .wp-block-woocommerce-cart .wc-block-components-text-input label{
  color:var(--ac-muted);
}

/* الحقول والقوائم — حبرٌ فاتح وحافّة تُرى (عنصر تحكّم ⇒ 3:1) */
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-text-input input,
:root[data-theme="dark"] .wp-block-woocommerce-checkout select.wc-blocks-components-select__select,
:root[data-theme="dark"] .wp-block-woocommerce-checkout textarea,
:root[data-theme="dark"] .wp-block-woocommerce-cart .wc-block-components-text-input input,
:root[data-theme="dark"] .wp-block-woocommerce-cart textarea{
  background:var(--ac-surface-2);
  color:var(--ac-text);
  border-color:color-mix(in srgb, var(--ac-muted) 78%, transparent);
}

/* أسماء وسائل الدفع ووصفها — أخطر ما رُصد: 1.04:1 */
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-radio-control__option,
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-radio-control__label,
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-radio-control__description,
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option,
:root[data-theme="dark"] .wp-block-woocommerce-checkout .moyasar-blocks-label,
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-content{
  color:var(--ac-text);
}

:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option,
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-radio-control__option{
  border-color:color-mix(in srgb, var(--ac-muted) 60%, transparent);
}

/* نصوص ثانوية داخل الصفحتين */
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-checkout-step__description,
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-validation-error,
:root[data-theme="dark"] .wp-block-woocommerce-checkout small,
:root[data-theme="dark"] .wp-block-woocommerce-cart .wc-block-components-checkout-step__description{
  color:var(--ac-muted);
}

/* حقول بوابة الدفع (ميسر) — ترسمها الإضافة بخلفيتها الفاتحة */
:root[data-theme="dark"] .wp-block-woocommerce-checkout .moyasar-blocks-container input,
:root[data-theme="dark"] .wp-block-woocommerce-checkout .moyasar-blocks-container select{
  background:var(--ac-surface-2);
  color:var(--ac-text);
  border-color:color-mix(in srgb, var(--ac-muted) 78%, transparent);
}

:root[data-theme="dark"] .wp-block-woocommerce-checkout .moyasar-blocks-container label{ color:var(--ac-muted); }

/* ── جولة ثانية: ما بقي بعد أوّل قياس ───────────────────────────
   🔴 قواعد ووكومرس للحقول أعلى انتقائيةً من قاعدتي الأولى
      (`input:not([type=checkbox]):not([type=radio])`) فلم تُطبَّق حافّتي —
      قِيست 1.3:1 بعد الحقن. أُطابق انتقائيّتها وأزيد. */
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="dark"] .wp-block-woocommerce-cart .wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="dark"] .wp-block-woocommerce-checkout .wc-blocks-components-select__select,
:root[data-theme="dark"] .wp-block-woocommerce-checkout textarea{
  background:var(--ac-surface-2) !important;
  color:var(--ac-text) !important;
  border-color:color-mix(in srgb, var(--ac-muted) 78%, transparent) !important;
}

/* 🔴 عناوين القوائم المنسدلة خارج غلاف `wp-block-woocommerce-checkout`
   (بلوك «معلومات الطلب الإضافية» عندنا) — فلا يطالها النطاق. تُستهدف
   بصنفها وحده داخل الصفحة الغامقة. */
:root[data-theme="dark"] .wc-blocks-components-select__label,
:root[data-theme="dark"] .wc-block-components-checkbox__label,
:root[data-theme="dark"] .wc-block-components-checkbox__label a{
  color:var(--ac-text);
}

/* ملخّص الطلب في العمود الجانبيّ — الأصناف والأسعار بحبر ووكومرس الداكن.
   🔴 كُتبت أوّلاً بأصنافٍ مجرَّدة، فسرت `.wc-block-formatted-money-amount`
      إلى **كل بطاقات المتجر** وحوّلت «وفّرت 310 ر.س» من الأحمر الدالّ إلى
      الأبيض. أسقطتها لقطة الغامق. اللونُ الدالّ ليس زينةً تُوحَّد.
      كل قاعدة هنا مقيَّدة بحاوية تخصّ السلة/إتمام الطلب وحدها. */
/* 🔴 `:not(.ac-saved)` ليس زينة: صفّ «وفّرت» في السلة يحمل `.ac-saved`
   ولونه الأحمر الدالّ من القالب — وقاعدتي دهسته فصار أبيض كبقيّة المجاميع،
   أي فقدَ معناه. أسقطته لقطةُ الغامق، وحدّدته `elementFromPoint` عند
   إحداثيّات الفرق بالضبط بدل الاستنتاج.
   القاعدة العامّة: لا تُوحِّد لوناً يحمل معنى. */
:root[data-theme="dark"] .wc-block-components-order-summary .wc-block-components-order-summary-item__description,
:root[data-theme="dark"] .wc-block-components-order-summary .wc-block-components-order-summary-item__individual-prices,
:root[data-theme="dark"] .wc-block-components-order-summary .wc-block-components-product-name,
:root[data-theme="dark"] .wc-block-components-order-summary .wc-block-components-product-metadata,
:root[data-theme="dark"] .wc-block-components-order-summary .wc-block-components-product-price__value,
:root[data-theme="dark"] .wc-block-components-order-summary .wc-block-formatted-money-amount,
:root[data-theme="dark"] .wc-block-components-totals-item:not(.ac-saved) .wc-block-components-totals-item__label,
:root[data-theme="dark"] .wc-block-components-totals-item:not(.ac-saved) .wc-block-components-totals-item__value,
:root[data-theme="dark"] .wc-block-components-totals-item:not(.ac-saved) .wc-block-formatted-money-amount{
  color:var(--ac-text);
}

:root[data-theme="dark"] .wc-block-components-order-summary .wc-block-components-product-price__regular,
:root[data-theme="dark"] .wc-block-components-order-summary .wc-block-components-product-metadata__description,
:root[data-theme="dark"] .wc-block-components-totals-item .wc-block-components-totals-footer-item-tax{
  color:var(--ac-muted);
}

/* ── جولة ثالثة: تتبّع الخلفية البيضاء إلى مصدرها ────────────────
   🔑 لم يكن الحبر هو المشكلة بل ما تحته: قِيست سلسلة الأسلاف فظهر
      `.wc-block-components-order-summary` بخلفية rgb(248,250,251)
      و`.wc-blocks-components-select__container` بخلفية بيضاء —
      فالحبر الفاتح الذي وضعتُه صار فاتحاً على فاتح (1.11:1).
      تتبّعُ الخلفية أصدق من تخمين أن العلّة في اللون. */
:root[data-theme="dark"] .wc-block-components-order-summary,
:root[data-theme="dark"] .wc-blocks-components-select__container,
:root[data-theme="dark"] .wc-block-components-order-summary__button{
  background:var(--ac-surface-2);
  border-color:var(--ac-line);
}

/* عنوان القائمة: قاعدة ووكومرس أعلى انتقائيةً — نُطابقها بجدّها */
:root[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__label,
:root[data-theme="dark"] .wc-blocks-components-select__container .wc-blocks-components-select__label{
  color:var(--ac-muted);
}

:root[data-theme="dark"] /* ── تصحيح انحدارٍ صنعتُه بنفسي ─────────────────────────────────
   🔴 قاعدة `.wc-block-formatted-money-amount{color:var(--ac-text)}

:root[data-theme="dark"] ` أعلاه
      داست حبر **شارة الخصم** أيضاً: خلفيتها `#FF6B6B` صلبة، فصار الحبر
      الفاتح فوق أحمر فاتح ⇒ 2.39:1.
   🔑 القاعدة التي تحكم: حبرٌ فوق لونٍ صلبٍ لا يتبع الصفحة — يتجمّد على ما
      يقرأ على ذلك اللون بعينه. لا يُقلَب ولا يُترك لوراثة عامّة. */
.wc-block-components-order-summary .wc-block-components-sale-badge,
:root[data-theme="dark"] .wc-block-components-order-summary .wc-block-components-sale-badge .wc-block-formatted-money-amount,
:root[data-theme="dark"] .wc-block-components-order-summary .wc-block-components-product-badge{
  color:var(--ac-on-brand);
}

/* ── درج السلة المصغّرة ─────────────────────────────────────────
   🔴 رصده جرد الغامق: `wc-block-mini-cart__drawer` خلفيته بيضاء 480×1100
      داخل صفحة غامقة، ونصّ «سلة مشترياتك فارغة» عليه بتباين 1.09:1.
      نفس عائلة عطل إتمام الطلب: لوحةُ بلوكٍ لم يُصمَّم عليها الغامق.
   🔑 نطاقه الدرج نفسه لا الصفحة — فلا يمسّ زرّ السلة في الترويسة. */
/* 🔴 لون هذا العنصر يأتي من **نمطٍ سطريّ** يكتبه ووكومرس على الوسم نفسه
   (`style="background-color: rgb(246,248,251)"`) — قرأتُه من `getAttribute`
   بعد أن فشلت قاعدةٌ بانتقائية (0,3,0). النمط السطريّ لا تغلبه انتقائية
   مهما ارتفعت، فـ`!important` هنا ليست تجاوزاً بل الوسيلة الوحيدة.
   🔑 ولذلك رُفعت وحدها إلى قاعدة مستقلّة: لا تُعمَّم على بقيّة الطبقة. */
:root[data-theme="dark"] .wc-block-mini-cart__template-part .wp-block-woocommerce-mini-cart-contents{
  background-color:var(--ac-surface) !important;
  color:var(--ac-text);
}

:root[data-theme="dark"] .wc-block-mini-cart__drawer,
:root[data-theme="dark"] .wp-block-woocommerce-mini-cart-contents,
:root[data-theme="dark"] .wp-block-woocommerce-empty-mini-cart-contents-block,
:root[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-drawer,
:root[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-drawer__screen-overlay{
  background:var(--ac-surface);
  color:var(--ac-text);
  border-color:var(--ac-line);
}

:root[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-mini-cart__title,
:root[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-product-name,
:root[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-product-price__value,
:root[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-formatted-money-amount,
:root[data-theme="dark"] .wc-block-mini-cart__drawer p{
  color:var(--ac-text);
}

:root[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-product-metadata,
:root[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions{
  color:var(--ac-muted);
}

/* ── نموذج الحساب الكلاسيكيّ ────────────────────────────────────
   🔴 حقول تسجيل الدخول ليست بلوكات: `woocommerce-Input` ترسمها ووكومرس
      بخلفية **بيضاء ثابتة** وحبرٍ أسود وحدٍّ أحمر داكن — لا تنقلب إطلاقاً.
      فتظهر صناديق بيضاء صارخة داخل صفحة غامقة. نفس عائلة عطل إتمام الطلب،
      وأفلتت من الكاشفين معاً: تباين حبرها 21:1 (فلا نصّ يُبلَّغ)، وحجمها
      دون عتبة «البطاقة الفاتحة».
   🔑 الحبر يُقلب مع الخلفية معاً — قلبُ أحدهما وحده يصنع أسودَ على غامق. */
:root[data-theme="dark"] .woocommerce-Input,
:root[data-theme="dark"] .woocommerce-form input[type="text"],
:root[data-theme="dark"] .woocommerce-form input[type="email"],
:root[data-theme="dark"] .woocommerce-form input[type="password"],
:root[data-theme="dark"] .woocommerce-form input[type="tel"]{
  background-color:var(--ac-surface-2);
  color:var(--ac-text);
  border-color:color-mix(in srgb, var(--ac-muted) 78%, transparent);
}

:root[data-theme="dark"] .woocommerce-form label,
:root[data-theme="dark"] .woocommerce-form-login__rememberme,
:root[data-theme="dark"] .woocommerce-LostPassword{
  color:var(--ac-muted);
}

/* ── أيقونة «إظهار كلمة المرور» ─────────────────────────────────
   🔴 انحدارٌ صنعتُه: تغميق حقل كلمة المرور جعل أيقونة العين سوداء على
      غامق. مقيسٌ بالبكسل المرسوم: **18.88 في الفاتح · 1.24 في الغامق**.
   🔴🔴 ولولا فتح الطيّة لما رأيتُه: النموذج داخل `<details class="ac-alt">`
      **مغلقة**، فقياسي الأول أعطى 1.00 في الوضعين معاً واستنتجتُ خطأً أن
      الزرّ بلا أيقونة وأن العيب من ووكومرس لا منّي. محتوىً غير مرسوم يعطي
      رقماً متساوياً في كل الأوضاع — وهو إنذارُ «لم أقس» لا «لا فرق».
   🔑 الأيقونة صورةُ SVG في `background-image` على `::before` بلونٍ ثابت،
      فلا يقودها `color`. القلب اللونيّ يصلحها أيّاً كانت طريقة رسمها. */
:root[data-theme="dark"] .show-password-input{ filter:invert(1); opacity:.85; }
/* AC-CHECKOUT-DARK:END */

/* ══════════════════════════════════════════════════════════════
   صفحات المحتوى: السياسات والشكاوى والاتصال (2026-08-16)
   🔴 قِيس على `/shipping-policy/`: الفقرة تمتدّ **98 محرفاً في السطر**
      (820px بخطّ 16px) — والمدى المريح للقراءة 65–75. سطرٌ بهذا الطول
      يُفقد العينَ بدايةَ السطر التالي، وهذه صفحات يقرأها من يشكو أو يريد
      أن يعرف حقّه قبل الشراء، لا صفحات يُمرّ عليها.
   🔑 مقيَّدة بـ`body.page` وحدها ومستثنيةٌ صفحات ووكومرس (السلة وإتمام
      الطلب وحسابي تحمل `woocommerce-page`) — فلا يضيق تخطيطٌ صُمّم عريضاً.
   🔑 و`alignwide`/`alignfull` داخل المحتوى تبقى على سعتها: الجداول والصور
      العريضة تحتاج مداها، والقيد للنصّ الجاري وحده.
   ═══════════════════════════════════════════════════════════ */
body.page:not(.woocommerce-page) .entry-content.wp-block-post-content > *{
  /* 🔑 63ch لا 72ch: وحدة `ch` تقيس عرض الرقم «0»، والحرف العربي أضيق منه —
     فـ72ch أعطت **82 محرفاً** مقيسة لا 72. الرقم مضبوطٌ بالقياس على الحيّ
     (691px ⇒ 82 محرفاً، فالنسبة تعطي ~63ch للوصول إلى ~72). */
  max-inline-size:63ch;
  margin-inline:auto;
}
body.page:not(.woocommerce-page) .entry-content.wp-block-post-content > .alignwide{
  max-inline-size:1100px;
}
body.page:not(.woocommerce-page) .entry-content.wp-block-post-content > .alignfull{
  max-inline-size:none;
}
/* جداول السياسات تُمرَّر داخل حاويتها لا بالصفحة */
body.page:not(.woocommerce-page) .entry-content table{
  inline-size:100%; display:block; overflow-x:auto;
}

/* ══════════════════════════════════════════════════════════════
   صفحة 404 (2026-08-16)
   🔑 يصلها العميل من رابطٍ قديم أو خطأ كتابة — فالمطلوب أن يجد طريقاً لا
      أن يُخبَر بأنه ضلّ. البحث أوّلاً، ثم الأقسام، ثم قنوات من له طلبٌ قائم.
   ═══════════════════════════════════════════════════════════ */
.ac-404{ padding-block:clamp(48px,8vw,88px) clamp(56px,9vw,96px); text-align:center; }
.ac-404-code{
  display:inline-block; margin:0 0 14px; padding:3px 12px;
  font-size:.78rem; font-weight:700; color:var(--ac-muted);
  border:1px solid var(--ac-line); border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.ac-404-title{ margin:0 0 10px; font-size:clamp(1.35rem,4.2vw,1.9rem); line-height:1.4; }
.ac-404-lead{ margin:0 auto 26px; max-inline-size:46ch; color:var(--ac-muted); }
.ac-404 .wp-block-search{ max-inline-size:520px; margin-inline:auto; }

.ac-404-cats{
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-block-start:26px;
}
.ac-404-cats a{
  text-decoration:none; font-size:.88rem; font-weight:600;
  padding:9px 15px; border-radius:999px;
  color:var(--ac-ink); background:var(--ac-surface);
  border:1px solid color-mix(in srgb, var(--ac-muted) 45%, transparent);
  transition:border-color .18s ease, color .18s ease;
}
@media (hover:hover){
  .ac-404-cats a:hover{ color:var(--ac-blue-d); border-color:var(--ac-blue); }
}
.ac-404-help{
  margin-block-start:28px; padding-block-start:20px;
  border-block-start:1px solid var(--ac-line);
  font-size:.88rem; color:var(--ac-muted); line-height:2.1;
}
.ac-404-help a{ font-weight:700; }

/* ── صفحة المنتج: زرّ المقارنة تحت أزرار الشراء ──────────────────
   🔑 الزرّ نفسه من البطاقة، لكن سياقه هنا عمودٌ عريض لا بطاقة ضيّقة —
      فيُحدّ عرضه ولا يُمطّ على عرض العمود كلّه. */
.ac-cmp-single{ margin-block-start:10px; }
.ac-cmp-single .ac-cmp-btn{ order:0; max-inline-size:100%; }

/* ═══ مراجعات المنتجات ═══
   المصدر `assets/product-reviews.json` (مصدَّر من HUB بعد اعتماد المالك).
   🔴 غير `.ac-voices` — تلك تقييمات المتجر والشحن، وهذه لمنتجٍ بعينه. */
.ac-prv-stars{ display:inline-flex; gap:2px; vertical-align:-2px; }
.ac-prv-star{ width:15px; height:15px; fill:var(--ac-line); flex:0 0 auto; }
.ac-prv-star.on{ fill:var(--ac-gold); }

.ac-prv-brief{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 10px; font-size:.92rem;
}
.ac-prv-avg{ font-weight:700; font-variant-numeric:tabular-nums; }
.ac-prv-jump{ color:var(--ac-muted); text-underline-offset:3px; }
.ac-prv-jump:hover{ color:var(--ac-link-hover); }

.ac-prv-h{ font-size:1.15rem; margin:0 0 14px; }
.ac-prv-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:0 0 12px; border-block-end:1px solid var(--ac-line); margin:0 0 14px;
}
.ac-prv-score{ font-size:1.9rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.ac-prv-of, .ac-prv-n{ color:var(--ac-muted); font-size:.88rem; }
.ac-prv-note, .ac-prv-empty{ color:var(--ac-muted); font-size:.88rem; line-height:1.8; margin:0 0 16px; }

.ac-prv-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ac-prv-item{
  background:var(--ac-surface); border:1px solid var(--ac-line);
  border-radius:12px; padding:14px 16px;
}
.ac-prv-text{ margin:8px 0 10px; line-height:1.85; overflow-wrap:anywhere; }
.ac-prv-by{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0; font-size:.82rem; color:var(--ac-muted);
}
.ac-prv-who{ font-weight:600; color:var(--ac-text); }
/* 🔑 الشارة خضراء لأنها تقرير حالة لا نداء انتباه: الأخضر لغة «موثَّق» في
   بقيّة المتجر (`.stock.in-stock`)، والبرتقاليّ محجوز للعروض.
   🔴 و`--ac-ok` نفسه لا يكفي حبراً على الفاتح: قِيس **2.95** على تدرّجه
   (المطلوب 4.5). فحبرٌ أغمق مشتقّ — القاعدة نفسها التي أنتجت `--ac-blue-d`.
   وفي الغامق يعود `--ac-ok` لأنّ الأرضية انقلبت. */
:root{ --ac-ok-ink:#0F6047; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ac-ok-ink:var(--ac-ok); } }
:root[data-theme="dark"]{ --ac-ok-ink:var(--ac-ok); }
.ac-prv-badge{
  background:color-mix(in srgb, var(--ac-ok) 13%, transparent);
  color:var(--ac-ok-ink); border:1px solid color-mix(in srgb, var(--ac-ok) 34%, transparent);
  border-radius:7px; padding:2px 8px; font-size:.76rem; font-weight:600;
}
.ac-prv-date{ margin-inline-start:auto; font-variant-numeric:tabular-nums; unicode-bidi:plaintext; }

/* ══════════════════════════════════════════════════════════════
   🔴🔴🔴 السلة — إعادة زرّ «المتابعة لإتمام الطلب» على سطح المكتب
   ══════════════════════════════════════════════════════════════
   قِيس 18/08 على الحيّ: **لا سبيل مرئيّ إلى الدفع من صفحة السلة على سطح
   المكتب.** الرابط الوحيد إلى `/checkout/` كان 0×0.

   السبب — وليس من كودنا: ووكومرس تُصيّر حاوية زرٍّ **واحدة** وهي النسخة
   اللاصقة `--sticky`، وقاعدتها في `cart-rtl.css` تُخفيها فوق 783px **عن قصد**
   لأن المفروض أن تُصيَّر النسخة غير اللاصقة لسطح المكتب — وهي **غائبة عن
   الصفحة إطلاقاً** (قِيس: حاوية واحدة فقط في الـDOM).

   فالعلاج إظهارُ اللاصقة على سطح المكتب **كعنصرٍ عاديّ في التدفّق** لا
   ملتصقاً: `position:static` ونزع زخرفة الشريط اللاصق.

   🔑 ولا يُمسّ الجوال إطلاقاً — هناك تعمل النسخة اللاصقة كما صُمّمت (قِيس
      358×50 ظاهراً). القاعدة داخل `min-width:783px` وحدها.
   ⏳ وهذا **تخفيفٌ لا إصلاحُ جذر**: يبقى السؤال لماذا لا تُصيَّر النسخة غير
      اللاصقة. إن أصلحته ووكومرس فستظهر حاويتان — عندها احذف هذه الكتلة.
*/
@media (min-width:783px){
  .wc-block-cart .wc-block-cart__submit-container--sticky{
    display:block; position:static; inset:auto;
    box-shadow:none; background:transparent; border:0;
    padding:0; margin-block-start:14px;
  }
}

/* ══════════════════════════════════════════════════════════════
   صفحة الفئة — مساحات النقر (2026-08-18)
   ══════════════════════════════════════════════════════════════
   قِيس على `/product-category/ac/`: أرقام الصفحات **9×21 حتى 17×21** — وفي
   هذه الفئة وحدها **21 صفحة** (323 منتجاً ÷ 16). رقمٌ بعرض تسعة بكسلات هدفٌ
   يخطئه الإبهام، ودون حدّ WCAG 2.2 §2.5.8 (24×24) بكثير.

   🔑 وفرزٌ متعمَّد: **عناوين البطاقات ومسار التنقّل لم تُمسّ** — روابط نصّية
      داخل السطر، والمعيار يستثنيها صراحةً. توسيعها كان سيكسر تدفّق النصّ
      ويصنع فجواتٍ في البطاقة بلا مكسبٍ وصوليّ.
*/
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers > *{
  display:inline-flex; align-items:center; justify-content:center;
  min-inline-size:40px; min-block-size:40px; padding-inline:6px;
  border-radius:9px; text-decoration:none;
}
.wp-block-query-pagination .page-numbers.current{
  background:var(--ac-tint-strong); font-weight:700;
}
@media (hover:hover){
  .wp-block-query-pagination a:hover{ background:var(--ac-tint-hover); }
}

/* أزرار «عرض N المزيد» في الفلاتر — عنصر تحكّم لا نصّ داخل سطر */
.wc-block-product-filter-checkbox-list__show-more-button,
.wc-block-product-filter-checkbox-list__show-less-button{
  display:inline-flex; align-items:center;
  min-block-size:32px; padding:4px 8px; border-radius:8px;
}

/* ══════════════════════════════════════════════════════════════
   صفحة الدخول — صيانة 2026-08-19 · inc/login-page.php
   ══════════════════════════════════════════════════════════════
   قِيس: الصفحة 1,829px لبطاقةٍ 291px، وعنوانٌ ضخم لا يخدم المهمّة،
   ومربّع «تذكّرني» 13×13 وزرّ إظهار كلمة المرور 22×22.
*/

/* العنوان: صار نصّه «الدخول إلى حسابك»، وحجمه يناسب مهمّةً لا إعلاناً */
.ac-login-page .wp-block-post-title,
.ac-login-page h1.entry-title{
  font-size:clamp(1.4rem,3.4vw,1.9rem); margin-block-end:6px;
}

/* 🔑 الفراغ كان تحت البطاقة لا حولها — تُقلَّص حشوة المحتوى على هذه الصفحة
      وحدها، فلا تضيق صفحاتٌ أخرى. */
.ac-login-page main{ padding-block-end:24px; }

/* ── ما ينتظرك في حسابك ── */
.ac-login-why{
  max-inline-size:560px; margin-inline:auto; margin-block-start:22px;
  padding-block-start:18px; border-block-start:1px solid var(--ac-line);
}
.ac-login-why h2{
  margin:0 0 12px; font-size:.95rem; font-weight:700; color:var(--ac-text);
}
.ac-login-why ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ac-login-why li{ display:flex; align-items:flex-start; gap:10px; margin:0; }
.ac-why-i{
  flex:none; inline-size:34px; block-size:34px; border-radius:9px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--ac-blue) 9%, transparent);
  color:var(--ac-blue-d);
}
.ac-why-t{ display:grid; gap:1px; }
.ac-why-t strong{ font-size:.9rem; font-weight:700; color:var(--ac-text); }
.ac-why-t span{ font-size:.82rem; line-height:1.7; color:var(--ac-muted); }
.ac-login-back{ margin:16px 0 0; font-size:.86rem; }
.ac-login-back a{ color:var(--ac-blue-d); }

/* ── مساحات النقر داخل المطويّة ──
   🔑 المربّع نفسه لا يُكبَّر بـtransform: يشوّه العلامة داخله ويكسر محاذاته.
      الحلّ حجمٌ حقيقيّ ومحاذاةٌ مع سطر النصّ. */
.ac-login-page input[type="checkbox"]#rememberme{
  inline-size:20px; block-size:20px; margin-inline-end:8px;
  vertical-align:middle; accent-color:var(--ac-blue-d);
}
.ac-login-page label.woocommerce-form-login__rememberme,
.ac-login-page .woocommerce-form-login__rememberme{
  display:inline-flex; align-items:center; min-block-size:32px;
}
/* زرّ إظهار كلمة المرور — كان 22×22.
   🔴 صُحّح 19/08: كتبتُ له `background-position/size` وهما **كودٌ ميّت** —
      العنصر تحقنه جافاسكربت ووكومرس وأيقونته عنصرٌ زائف لا خلفية
      (قِيس: `background-image: none`). المقاس وحده كان يعمل. */
.ac-login-page .show-password-input{
  inline-size:32px; block-size:32px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── المطويّة: مسارٌ ثانويّ يبقى ثانويّاً ──
   🔴🔴 قِيس 19/08 أن قاعدتين مكتوبتين بنيّةٍ صحيحة **لم تعملا قطّ**:

   ① `.ac-alt-in > h2:first-child{display:none}` لم تطابق أبداً — الابن الأوّل
      هو `div.woocommerce-notices-wrapper` (ارتفاعه صفر فلا يُرى) والعنوان
      **ثانٍ**. فبقي «تسجيل الدخول» ظاهراً بـ33.6px، أكبر من عنوان الصفحة
      (30.4) وأكبر بـ68% من عنوان بطاقة الجوال (20).
      ⇒ المحدِّد صار `> h2` بلا `:first-child`. والملخّص «أو ادخل بالبريد
        وكلمة المرور» يسمّي القسم أصلاً، فعنوانٌ ثانٍ تكرارٌ لا رتبة.

   ② `.ac-alt .woocommerce-form-login{border:0;padding:0}` غُلبت — النموذج
      بقي `1px` و`padding:20px`، فظهر **إطارٌ داخل إطار** المطويّة.
      ⇒ رُفعت الانتقائية بـ`.ac-login-page` + الوسم. */
.ac-login-page .ac-alt-in > h2{ display:none; }
.ac-login-page .ac-alt form.woocommerce-form-login{
  border:0; padding:0; margin:0; background:transparent;
}

/* 🟡 والزرّ تباينه 5.66 (يجتاز AA) لكنه بخلفيةٍ شبه بيضاء وحدٍّ رمادي **يبدو
      معطّلاً**. يبقى ثانويّاً — لا يزاحم «أرسل الرمز» — لكن بحدٍّ من لون
      العلامة يقول إنه قابل للنقر. */
/* 🔴 الانتقائية: كُتبت أوّلاً `.ac-login-page .woocommerce-form-login__submit`
      = (0,2,0) فغلبتها `.ac-alt button[type="submit"]` = (0,2,1) — صنفٌ ونوعٌ
      وسِمة — رغم أن قاعدتي بعدها في الملفّ. **الترتيب لا ينفع إن نقصت الرتبة.**
      والمحدِّد هنا (0,3,1) فيغلب بلا `!important`. */
.ac-login-page .ac-alt button.woocommerce-form-login__submit{
  border:1.5px solid var(--ac-blue-d);
  background:transparent; color:var(--ac-blue-d); font-weight:700;
}
@media (hover:hover){
  .ac-login-page .ac-alt button.woocommerce-form-login__submit:hover{
    background:color-mix(in srgb, var(--ac-blue) 10%, transparent);
  }
}

/* ── صفحة الدخول: اتّساق الحقل والزرّ + تخطيط عمودين للمكتب ─ 2026-08-21 ──
   🔴 ما قِيس على الحيّ 21/08: حقل الجوال يتجاوز بطاقته 34px من جهةٍ واحدة
      (16+16 حشو + 1+1 حدّ) لأن `.ac-otp input` بلا box-sizing. واستدارة
      الحقل 18px والزرّ 11px وكلاهما يخالف --ac-radius:14px. و.ac-otp عرضه
      520 بينما .ac-login-why 560.
   🔑 النطاق مقصورٌ على .ac-otp فلا يمسّ حقول المتجر الأخرى.
   🔑 والتخطيط يستعمل مرساة القالب نفسها `.ac-login-page … .woocommerce`
      (لا رفعَ انتقائية) لأنها هي التي تفرض 560px على هذه الصفحة وحدها. */
.ac-otp input,
.ac-otp button { box-sizing: border-box; }

.ac-otp input {
	border-radius: var(--ac-radius);
	font-size: 1rem;
	padding: 14px 16px;
}

.ac-otp .ac-otp-send,
.ac-otp .ac-otp-verify {
	border-radius: var(--ac-radius);
	padding: 14px 22px;
	inline-size: 100%;
}

.ac-login-why { max-inline-size: 520px; }

/* عمودان من 1024px: النموذج في الابتداء والفوائد في الانتهاء، فتُرى بلا تمرير.
   وتحت ذلك يعود العمود الواحد تلقائياً (لا قاعدة تُلغى). */
@media ( min-width: 1024px ) {
	.ac-login-page.woocommerce-account main .woocommerce {
		max-inline-size: 1000px;
		display: grid;
		grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, .95fr );
		gap: 40px;
		align-items: start;
	}
	.ac-login-page.woocommerce-account .wp-block-post-title { max-inline-size: 1000px; }
	.ac-login-page main .woocommerce > .ac-otp { grid-column: 1; grid-row: 1; margin-block-end: 14px; max-inline-size: none; }
	.ac-login-page main .woocommerce > .ac-alt { grid-column: 1; grid-row: 2; margin-block-start: 0; }
	.ac-login-page main .woocommerce > .ac-login-why {
		grid-column: 2;
		grid-row: 1 / span 2;
		max-inline-size: none;
		margin-block-start: 0;
		margin-inline: 0;
		padding-block-start: 0;
		border-block-start: 0;
		border-inline-start: 1px solid var(--ac-line);
		padding-inline-start: 36px;
	}
}

/* ── شعار التذييل في الغامق ─────────────────────────── 2026-08-21 ──
   🔴 أصول العلامة مربّعات بيضاء صلبة (فُحصت بـPIL 15/08) فتظهر رقعةً
      بيضاء على الأرضية الغامقة. النسخة الشفّافة بُدّلت للترويسة يومها
      و**نُسي التذييل** — فبقي المربّع ظاهراً حتى 21/08.
   🔑 القاعدتان مزدوجتان كنظيرتيهما في الترويسة: واحدة لاختيار المستخدم
      الصريح، وأخرى لتفضيل النظام مع استثناء من اختار الفاتح. */
:root[data-theme="dark"] .ac-foot-logo img {
	content: url( "assets/img/aircare-logo-transparent.png" );
}

@media ( prefers-color-scheme: dark ) {
	:root:not( [data-theme="light"] ) .ac-foot-logo img {
		content: url( "assets/img/aircare-logo-transparent.png" );
	}
}
/* ==========================================================================
   رقعة بصرية — 2026-08-26
   تُلحَق بآخر themes/aircare-store/style.css
   المصدر: تدقيقٌ بصريّ حيّ (25 لقطة، 1440px و390px)
   كل قاعدة هنا تعالج عطباً مقيساً — لا صقلَ تخمينيّاً.
   ========================================================================== */

/* ---------------------------------------------------------------- ب-1
   قائمة الترتيب في صفحة البحث `<select class="orderby">` تُرسم خاماً
   بحدود المتصفّح الافتراضية وعرض 162px، بينما صفحة التصنيف تعرض عنصر
   البلوك المصمَّم (.wp-block-woocommerce-catalog-sorting). صفحتان
   متجاورتان بمظهرين.
   قِيس 26/08: appearance:auto + حدود النظام على /?s=مكيف
   الحلّ: تنسيقٌ واحد للاثنين، مع سهمٍ مرسوم يحترم RTL.
   🔑 لا توجد أي قاعدة سابقة لـ orderby في هذا الملفّ — تحقّقتُ بالبحث. */
select.orderby,
.wp-block-woocommerce-catalog-sorting select {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-size: .95rem;
	color: var( --ac-text );
	background-color: var( --ac-surface );
	border: 1px solid var( --ac-line );
	border-radius: 10px;
	padding-block: 10px;
	padding-inline: 14px 38px; /* فسحة السهم على الجانب الابتدائي (يسار في RTL) */
	min-inline-size: 208px;
	max-inline-size: 100%;
	cursor: pointer;
	line-height: 1.3;
	/* سهمٌ مرسوم بـSVG مضمّن — يتموضع بخاصّية منطقية فيتبع الاتجاه */
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23667' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-size: 12px 8px;
	background-position: left 14px center;
	transition: border-color .18s ease, box-shadow .18s ease;
}

select.orderby:hover,
.wp-block-woocommerce-catalog-sorting select:hover {
	border-color: var( --ac-blue );
}

/* WCAG 2.4.7 — تركيزٌ ظاهرٌ صريح، لا اعتماد على افتراضي المتصفّح */
select.orderby:focus-visible,
.wp-block-woocommerce-catalog-sorting select:focus-visible {
	outline: 3px solid color-mix( in srgb, var( --ac-blue-2 ) 60%, transparent );
	outline-offset: 2px;
	border-color: var( --ac-blue );
}

/* ---------------------------------------------------------------- ب-4
   نصّ حقل البحث الإرشادي ينقطع على الجوال في منتصف الكلمة.
   النصّ الحيّ: «ابحث باسم الجهاز أو رقم الموديل» (٣٤ محرفاً).
   قِيس 26/08 على 390px: ينقطع قبل نهايته.
   الحلّ: تصغيرٌ متدرّج للخطّ + قصٌّ نظيف بثلاث نقاط بدل القطع الأعمى.
   ملاحظة: الحشوة الأصلية 13px/20px — أقلّلها أفقياً فقط لكسب ~14px،
   والارتفاع يبقى كما هو فلا يصغر هدف اللمس (WCAG 2.5.8). */
@media ( max-width: 520px ) {
	.ac-header .ac-search .wp-block-search__input {
		font-size: .86rem;
		padding-inline: 13px;
		text-overflow: ellipsis;
	}

	.ac-header .ac-search .wp-block-search__input::placeholder {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	/* الزرّ يبقى ≥44px ارتفاعاً — هدف لمسٍ مطابق لـWCAG 2.5.8 */
	.ac-header .ac-search .wp-block-search__button {
		padding-inline: 14px;
		min-block-size: 44px;
	}
}

/* ---------------------------------------------------------------- ب-5
   معرض المنتج: بخمس صور تُرسم أربعٌ في صفّ وخامسةٌ وحيدة تترك ثلاث
   خاناتٍ فارغة، والمصغّرات تهبط تحت الطيّة لأن الصورة الرئيسية
   بارتفاع ~490px مع حشوة 14px.
   قِيس 26/08 على منتج TCL بخمس صور.
   الحلّ: سقفُ ارتفاعٍ للصورة الرئيسية يرفع المصغّرات فوق الطيّة،
   وشبكةُ مصغّراتٍ تتدفّق بلا خاناتٍ يتيمة. */
.woocommerce-product-gallery {
	padding: 12px;
}

.woocommerce-product-gallery__image img {
	/* 🔑 قِيس 26/08 بعد الرفعة الأولى: بلا border-box كان الارتفاع الفعلي
	   408px لا 380 — لأن `max-block-size` تنطبق على صندوق المحتوى وحده
	   فتُضاف إليه 28px حشوةً وحدّاً. الالتزام بالرقم يستوجب التصريح. */
	box-sizing: border-box;
	max-block-size: 380px;
	inline-size: 100%;
	object-fit: contain;
}

/* المصغّرات: تدفّقٌ مرنٌ بدل شبكةٍ رباعيةٍ صارمة تخلّف فراغاً */
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 1 auto;
	inline-size: clamp( 56px, 18%, 84px );
	margin: 0;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 8px;
	background: var( --ac-tile );
	border: 1px solid var( --ac-line );
	cursor: pointer;
	transition: border-color .18s ease, opacity .18s ease;
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	border-color: var( --ac-blue );
	opacity: 1;
}

/* WCAG — المصغّرة هدفُ نقرٍ فليكن تركيزها ظاهراً */
.woocommerce-product-gallery .flex-control-thumbs img:focus-visible {
	outline: 3px solid color-mix( in srgb, var( --ac-blue-2 ) 60%, transparent );
	outline-offset: 2px;
}

@media ( max-width: 560px ) {
	.woocommerce-product-gallery__image img {
		max-block-size: 300px;
	}

	.woocommerce-product-gallery .flex-control-thumbs li {
		inline-size: clamp( 52px, 22%, 72px );
	}
}

/* ---------------------------------------------------------------- WCAG
   صقلٌ عامّ — تركيزٌ ظاهرٌ موحّد على العناصر التفاعلية التي تفتقده.
   لا يمسّ العناصر التي لها قاعدة تركيزٍ خاصّة أصلاً (شارات العلامات
   مثلاً لها واحدة في السطر 2411) — الانتقائية هنا أدنى فلا تطغى. */
:where( a, button, [role="button"], summary, [tabindex]:not( [tabindex="-1"] ) ):focus-visible {
	outline: 3px solid color-mix( in srgb, var( --ac-blue-2 ) 60%, transparent );
	outline-offset: 2px;
	border-radius: 6px;
}

/* احترام تفضيل تقليل الحركة — يشمل ما أضفناه أعلاه */
@media ( prefers-reduced-motion: reduce ) {
	select.orderby,
	.wp-block-woocommerce-catalog-sorting select,
	.woocommerce-product-gallery .flex-control-thumbs img {
		transition: none;
	}
}

/* ---------------------------------------------------------------- ب-3
   شارة حالة المخزون فوق الطيّة (يرافقها مرشِّح render_block في
   functions.php — بلا ذاك المرشِّح هذه القواعد ميتةٌ بلا ضرر).
   قِيس 26/08: «غير متوفر في المخزون» تلزمها ~900px تمرير، بينما
   السعر ظاهرٌ على أوّل شاشة ⇒ العميل يقرأ سعراً لصنفٍ لا يُباع. */
.ac-stock-flag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-block: 8px 0;
	padding-block: 6px;
	padding-inline: 12px;
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 700;
	line-height: 1.35;
	color: var( --ac-danger );
	background: color-mix( in srgb, var( --ac-danger ) 10%, transparent );
	border: 1px solid color-mix( in srgb, var( --ac-danger ) 32%, transparent );
}

/* نقطةٌ ملوّنة — إشارةٌ لا تعتمد على اللون وحده (WCAG 1.4.1: النصّ يحمل المعنى) */
.ac-stock-flag::before {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

/* الحجز المسبق ليس عطباً بل حالةٌ مقبولة ⇒ كهرماني لا أحمر */
.ac-stock-flag--backorder {
	color: var( --ac-amber-ink );
	background: color-mix( in srgb, var( --ac-amber-ink ) 10%, transparent );
	border-color: color-mix( in srgb, var( --ac-amber-ink ) 32%, transparent );
}

/* ==========================================================================
   نموذج إرفاق إيصال الحوالة — يرافق `inc/bacs-receipt.php`.
   يتبع أعراف `.ac-track-*` القائمة حرفياً: نفس الرموز والحشوات والاستدارات،
   فلا يبدو غريباً داخل بطاقة التتبّع.
   ========================================================================== */
.ac-rcpt {
	margin-block-start: 24px;
	padding-block-start: 20px;
	border-block-start: 1px solid var( --ac-line );
}

.ac-rcpt-form {
	padding: 20px;
	border: 1px solid var( --ac-line );
	border-radius: var( --ac-radius );
	background-image: var( --ac-grad-soft );
}

.ac-rcpt-row {
	margin: 0 0 16px;
}

.ac-rcpt-row label {
	display: block;
	margin-block-end: 8px;
	font-size: .88rem;
	font-weight: 600;
	color: var( --ac-blue-d );
}

.ac-rcpt-row input[type="tel"],
.ac-rcpt-row select,
.ac-rcpt-row input[type="file"] {
	inline-size: 100%;
	max-inline-size: 100%;
	padding: 12px 16px;
	font: inherit;
	font-size: 1.02rem;
	border: 1px solid var( --ac-line );
	border-radius: 18px;
	background: var( --ac-surface );
	color: var( --ac-text );
}

.ac-rcpt-row input[type="tel"] {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* 🔑 حقل الملفّ: زرّ المتصفّح داخله لا يُنسَّق، فنُبقي حشوةً أصغر رأسياً
   حتى لا يبدو الصندوق مضخّماً حول زرٍّ صغير. */
.ac-rcpt-row input[type="file"] {
	padding-block: 10px;
	font-size: .92rem;
	cursor: pointer;
}

.ac-rcpt-row input:focus-visible,
.ac-rcpt-row select:focus-visible {
	outline: 2px solid var( --ac-blue );
	outline-offset: 2px;
}

.ac-rcpt-hint {
	display: block;
	margin-block-start: 6px;
	font-size: .82rem;
	color: var( --ac-muted );
}

.ac-rcpt-btn {
	padding: 12px 26px;
	border: 0;
	border-radius: 11px;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	background: var( --ac-blue-d );
	color: var( --ac-cta-fg );
	min-block-size: 44px; /* هدف لمسٍ مطابق لـWCAG 2.5.8 */
}

.ac-rcpt-btn:hover {
	background: var( --ac-cta-hover );
}

.ac-rcpt-btn:focus-visible {
	outline: 3px solid color-mix( in srgb, var( --ac-blue-2 ) 60%, transparent );
	outline-offset: 2px;
}

/* رسالة النتيجة — النصّ يحمل المعنى، واللون تعزيزٌ لا بديل (WCAG 1.4.1) */
.ac-rcpt-msg {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: .92rem;
	line-height: 1.8;
	font-weight: 600;
}

.ac-rcpt-msg--ok {
	color: var( --ac-ok-ink );
	background: color-mix( in srgb, var( --ac-ok-ink ) 10%, transparent );
	border: 1px solid color-mix( in srgb, var( --ac-ok-ink ) 30%, transparent );
}

.ac-rcpt-msg--err {
	color: var( --ac-danger );
	background: color-mix( in srgb, var( --ac-danger ) 10%, transparent );
	border: 1px solid color-mix( in srgb, var( --ac-danger ) 30%, transparent );
}

.ac-rcpt-done {
	margin: 0 0 14px;
	font-size: .9rem;
	font-weight: 600;
	color: var( --ac-ok-ink );
}

.ac-rcpt-note {
	margin: 14px 0 0;
	font-size: .84rem;
	line-height: 1.8;
	color: var( --ac-muted );
}

@media ( max-width: 560px ) {
	.ac-rcpt-form { padding: 16px; }
	.ac-rcpt-btn  { inline-size: 100%; }
}

/* ==========================================================================
   بحثٌ بلا نتائج — يرافق `snippet-search-empty.php`.
   ========================================================================== */
.ac-search-empty {
	font-size: 1.02rem;
	font-weight: 600;
	color: var( --ac-text );
	margin-block-end: 20px;
}

.ac-searchhelp {
	margin-block-start: 8px;
	padding: 20px;
	border: 1px solid var( --ac-line );
	border-radius: var( --ac-radius );
	background-image: var( --ac-grad-soft );
}

.ac-searchhelp-t {
	margin: 0 0 12px;
	font-size: .9rem;
	font-weight: 700;
	color: var( --ac-blue-d );
}

.ac-searchhelp ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ac-searchhelp li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 9px;
	padding-inline: 14px;
	min-block-size: 44px; /* هدف لمسٍ مطابق لـWCAG 2.5.8 */
	box-sizing: border-box;
	border: 1px solid var( --ac-line );
	border-radius: 999px;
	background: var( --ac-surface );
	color: var( --ac-text );
	text-decoration: none;
	font-size: .92rem;
	font-weight: 600;
	transition: border-color .18s ease, background .18s ease;
}

.ac-searchhelp li a:hover {
	border-color: var( --ac-blue );
	background: var( --ac-tile );
}

.ac-searchhelp li a span {
	font-size: .82rem;
	font-weight: 500;
	color: var( --ac-muted );
	font-variant-numeric: tabular-nums;
}

.ac-searchhelp-call {
	margin: 16px 0 0;
	font-size: .88rem;
	color: var( --ac-muted );
}

.ac-searchhelp-call a {
	font-weight: 700;
	color: var( --ac-blue-d );
	font-variant-numeric: tabular-nums;
}

/* 🔑 «البحث البحث» — تسمية الحقل وزرّه تحملان النصّ نفسه، فيُقرأ مكرّراً.
   نُخفي التسمية **بصرياً فقط** (تبقى لقارئ الشاشة) بدل حذفها. */
body.search-no-results .wp-block-search__label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

@media ( max-width: 560px ) {
	.ac-searchhelp { padding: 16px; }
	.ac-searchhelp li a { inline-size: 100%; justify-content: space-between; }
}

/* ==========================================================================
   كاروسيل المنتجات — يرافق `inc/product-carousels.php`.
   🔑 `.ac-slider` القائم شرائحُ تلاشٍ لا صفٌّ أفقيّ، فهذا نظامٌ منفصل.
   🔑 `scroll-snap` يعمل باللمس والفأرة بلا JS؛ الأسهم تحسينٌ يسقط بأمان.
   ========================================================================== */
.ac-carousel { margin-block: 40px; }

.ac-carousel-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; margin-block-end: 16px;
}
.ac-carousel-t { margin: 0; font-size: 1.35rem; font-weight: 800; color: var( --ac-blue-d ); }
.ac-carousel-all { font-size: .9rem; font-weight: 700; color: var( --ac-blue ); text-decoration: none; }
.ac-carousel-all:hover { text-decoration: none; color: var( --ac-blue-d ); }

.ac-carousel-wrap { position: relative; }

.ac-carousel-rail {
	display: flex; gap: 16px; margin: 0; padding: 4px 0 12px; list-style: none;
	overflow-x: auto; overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory; scrollbar-width: thin;
}
/* 🔑 عرضٌ ثابت للبطاقة: بلا هذا تنكمش داخل flex فتفقد تناسبها */
.ac-carousel-rail > li {
	flex: 0 0 auto; inline-size: clamp( 200px, 23%, 280px );
	margin: 0; scroll-snap-align: start;
}
.ac-carousel-rail::-webkit-scrollbar { block-size: 6px; }
.ac-carousel-rail::-webkit-scrollbar-thumb { background: var( --ac-line ); border-radius: 999px; }

.ac-carousel-nav {
	position: absolute; inset-block-start: 40%; z-index: 2;
	inline-size: 44px; block-size: 44px; /* هدف لمسٍ WCAG 2.5.8 */
	display: grid; place-items: center; cursor: pointer;
	font-size: 1.6rem; line-height: 1; font-family: inherit;
	border: 1px solid var( --ac-line ); border-radius: 999px;
	background: var( --ac-surface ); color: var( --ac-blue-d );
	box-shadow: 0 2px 10px rgb( 0 0 0 / 8% );
}
.ac-carousel-nav.is-prev { inset-inline-start: -8px; }
.ac-carousel-nav.is-next { inset-inline-end: -8px; }
.ac-carousel-nav:hover { border-color: var( --ac-blue ); }
.ac-carousel-nav:focus-visible {
	outline: 3px solid color-mix( in srgb, var( --ac-blue-2 ) 60%, transparent ); outline-offset: 2px;
}

@media ( max-width: 780px ) {
	.ac-carousel-nav { display: none; } /* اللمس يكفي، والأسهم تزاحم البطاقات */
	.ac-carousel-rail > li { inline-size: clamp( 190px, 62%, 250px ); }
	.ac-carousel-t { font-size: 1.15rem; }
}

/* ── إصلاح كاروسيلات 27/08 — بعد تدقيقٍ بصريّ حيّ ────────────────────────── */

/* 🔴🔴🔴 تجاوز أفقي 2,060px على 1440 (قِيس: scrollWidth 3500 مقابل 1440،
   وإخفاء الرفّ وحده يُعيده إلى 1440 فوراً). السبب: `min-inline-size:auto`
   الافتراضي لعناصر flex/grid — العنصر لا ينكمش دون محتواه فيتمدّد الرفّ
   بدل أن يُحتوى، رغم أن `overflow-x:auto` عليه. التصريح بالصفر يُطلق الانكماش.
   🔑 وظهر على 1440 دون 390 لأن الحاوية هناك أضيق من مجموع البطاقات أصلاً. */
.ac-carousel,
.ac-carousel-wrap,
.ac-carousel-rail {
	min-inline-size: 0;
	max-inline-size: 100%;
}

/* حزامٌ ثانٍ: أي تسرّبٍ متبقٍّ يُقصّ عند حدّ القسم.
   🔑 `clip` لا `hidden` — `hidden` يصنع سياق تمريرٍ يكسر `position:sticky`
   في الترويسة. والأسهم نُقلت للداخل أدناه فلا تُقصّ. */
.ac-carousel { overflow-x: clip; }

/* ── توحيد العرض: الكاروسيلات داخل عمود المحتوى — 28/08 ─────────────────────
   قِيس على 1920 (بلاغ المالك بلقطةٍ من الوضع الغامق): أقسام المحتوى والصندوقان
   الترويجيّان وقسم «لسنا متجراً على الإنترنت فقط» كلّها **1200px** (تبدأ من 360)،
   بينما ستّة كاروسيلات **1872px** (تبدأ من 24) — فارقُ **672px** في صفحةٍ واحدة،
   فتبدو أشرطة المنتجات ممتدّةً من حافةٍ إلى حافة والمحتوى محبوساً في عمودٍ ضيّق.
   🔑 السبب أن `.ac-carousel` سقفها `100%` من `main` (بعد 24px حشوٍ جانبيّ)
      ولا سقفَ محتوًى لها، بينما أقسام المحرّر تأخذ `max-width:1200px` من القالب.
   🔑 على 1440 الفارق 192px فيمرّ، وعلى 1920 يصرخ — **عيبٌ يتضخّم بعرض الشاشة**.
   ⇒ السقف على القسم وحده؛ و`wrap` و`rail` تبقيان `100%` منه فيبقى التمرير
     الأفقيّ وقصّ التسرّب والأسهم كما هي بلا مساس. */
.ac-carousel { max-inline-size: 1200px; margin-inline: auto; }

.ac-carousel-nav.is-prev { inset-inline-start: 4px; }
.ac-carousel-nav.is-next { inset-inline-end: 4px; }

/* 🔴🔴 صورة 300px داخل بطاقة 276px بـ`max-width:none` ⇒ تتجاوز وتُقصّ
   (قِيس 20–24 صورة في كل قسم · شعار AIR CARE مقطوعٌ في لقطة 390). */
.ac-carousel-rail li.product img {
	max-inline-size: 100%;
	block-size: auto;
}

/* 🔴 ارتفاع البطاقة 1086–1429px لعرض 276px (نسبة تصل 1:5.2) — الصورة أكبر
   مسبّب. سقفٌ لها داخل الكاروسيل وحده، فلا تتأثّر بطاقات الشبكة العادية. */
.ac-carousel-rail li.product img {
	max-block-size: 190px;
	object-fit: contain;
}

@media ( max-width: 780px ) {
	.ac-carousel-rail li.product img { max-block-size: 160px; }
}

/* ── جولة ٢ من إصلاح الكاروسيلات — بعد تحقّقٍ بصريّ ثانٍ 27/08 ───────────── */

/* 🔴 شعار العلامة `span` لا `img` فأفلت من إصلاح الصور: ٦٧ من ٧٠ شعاراً
   يتجاوز بـ**18px ثابتة** (حشوة + حدّ بلا `box-sizing`) — 298px داخل بطاقة
   280px، و230 داخل 212 على الجوال. وهو ثاني أكبر مساهمٍ في طول البطاقة. */
.ac-carousel-rail .ac-chip,
.ac-carousel-rail .ac-chip--logo {
	box-sizing: border-box;
	max-inline-size: 100%;
}

.ac-carousel-rail .ac-chip--logo img {
	max-block-size: 34px;
	inline-size: auto;
}

/* 🔴 العنوان 262px (٤–٥ أسطر) وهو أكبر مساهمٍ منفرد في طول البطاقة.
   🔑 القصّ في الكاروسيل وحده — بطاقات الشبكة العادية تبقى بعنوانها كاملاً،
   ولا نمسّ النصّ نفسه فيبقى لقارئ الشاشة ومحرّكات البحث. */
.ac-carousel-rail .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* كتلة الشارات 173px — سقفٌ يمنع تضخّمها بلا إخفاء معلومة. */
.ac-carousel-rail .ac-card-chips {
	max-block-size: 84px;
	overflow: hidden;
}

/* ── جولة ٣ — بعد لقطةٍ من المالك 27/08 كشفت ما فات القياس ──────────────── */

/* 🔴🔴🔴 شعارات العلامة ضخمةٌ ومتجاوزة داخل الكاروسيل (AUX · Midea · airfel).
   سقف `.ac-chip--logo img` وحده لم يُطبَّق — قواعد `.ac-brands`/`.ac-chip`
   في الملفّ الأصلي أعلى انتقائيةً. نرفع الانتقائية ونقيّد الحاوية والصورة معاً.
   🔑 `!important` هنا مقصودة ومحصورةٌ في نطاق الكاروسيل وحده — لا تتسرّب
   لبطاقات الشبكة العادية ولا لشريط العلامات. */
.ac-carousel-rail li.product .ac-chip--logo {
	box-sizing: border-box !important;
	max-inline-size: 100% !important;
	block-size: 40px !important;
	padding: 4px 8px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
}

.ac-carousel-rail li.product .ac-chip--logo img {
	max-block-size: 26px !important;
	max-inline-size: 100% !important;
	inline-size: auto !important;
	block-size: auto !important;
	object-fit: contain !important;
}

/* الشعار يقع بين العنوان والسعر فيقطع تسلسل القراءة — نُصغّر أثره ونضبط الصفّ */
.ac-carousel-rail li.product .ac-card-chips {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	max-block-size: 44px !important;
	overflow: hidden;
}

/* 🔴 قِيس 27/08 بلقطةٍ وتقرير: الشعار كان يبتلع شريط الشارات كلّه (280px =
   عرض البطاقة)، فاختفت **السعة في ٣٢ بطاقة** و«إنفرتر» في ٢٦ و«واي فاي» في ٢٢.
   المشتري يقارن بالسعة لا بالماركة ⇒ **الشعار يُقيَّد عرضاً لا ارتفاعاً فقط**،
   ويُترك للمواصفات صفّان. (العلاج بتصغير الشعار لا برفع السقف — توصية التدقيق.) */
.ac-carousel-rail li.product .ac-chip--logo {
	max-inline-size: 104px !important;
	flex: 0 0 auto !important;
}

.ac-carousel-rail li.product .ac-card-chips {
	max-block-size: 76px !important; /* صفّان: الشعار + المواصفات */
	row-gap: 4px;
}

/* ── جولة ٣ من إصلاح الكاروسيلات — اصطفاف البطاقة 27/08 ──────────────────
   قِيس على 1440 قبل الإصلاح (٧٢ بطاقة في ٦ أقسام):
     ارتفاع البطاقة  813  تباين 0   ← الرفّ يمدّدها فعلاً، هذا سليم
     ارتفاع الصورة   136←190 (54)   عيب
     بداية العنوان   203←257 (54)   عيب
     موضع الزرّ      587←774 (187)  عيب جسيم؛ والفراغ أسفله −9←178 ⊙ بعضها يفيض
   بعد الإصلاح مقيساً على الأقسام الستّة: التباين **صفر** في الأربعة،
   وصفر بطاقة تفيض، وعرض المستند باقٍ 1440 (لا تجاوز جديد). */

/* السبب الأوّل — الرابط اللافّ `display:inline` وهو يحوي محتوًى كتليّاً.
   صندوقٌ سطريّ لا هندسة له: `getBoundingClientRect().top` للصورة أعطى −169
   داخله. وما دام سطريّاً فلا `flex` ولا `margin-block-start:auto` يعمل، ولهذا
   فشلت جولتا الإصلاح السابقتان في تحريك الزرّ.
   ⊙ البطاقة عمودٌ مرن، والرابط عمودٌ يتمدّد، والزرّ يُدفع إلى القاع. */
.ac-carousel-rail > li.product {
	display: flex;
	flex-direction: column;
	position: relative; /* مرجعٌ للشارات المطلقة أدناه */
}

.ac-carousel-rail > li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-block-size: 0; /* بلا هذا لا ينكمش العمود دون محتواه */
}

/* زرّ «قارن» آخر أبناء الرابط؛ بلا هذا يطفو مع نهاية المحتوى
   فيتباين موضعه بين البطاقات — رُصِد بصريّاً بعد أن استقام زرّ الشراء وحده. */
.ac-carousel-rail > li.product > a.woocommerce-loop-product__link > .ac-cmp-btn {
	margin-block-start: auto;
}

/* الزرّ إلى القاع دائماً — لا حيث انتهى المحتوى. */
.ac-carousel-rail > li.product > .button {
	flex: 0 0 auto;
	margin-block-start: auto;
}

/* السبب الثاني — الشارة العلوية في التدفّق (`position:static` · 24px)
   فتُزيح كل ما تحتها 27px في بطاقةٍ دون أخرى. مقيس: من ٧٢ بطاقة ٦٤
   تحمل `.onsale` و٦ تحمل `.ac-badge-out` و٢٠ تبدأ بالصورة مباشرةً.
   القصر على هاتين وحدهما: `.ac-badge-save` («وفّر 1,550») تقع في المواضع
   3–4 من جسم البطاقة ويجب أن تبقى في التدفّق — إخراجها يطمس معلومة سعر. */
.ac-carousel-rail > li.product > a.woocommerce-loop-product__link > .onsale,
.ac-carousel-rail > li.product > a.woocommerce-loop-product__link > .ac-badge-out {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 2;
	margin: 0;
}

/* السبب الثالث — للصورة سقفٌ لا ارتفاع: `max-block-size:190` وحده يترك
   الصورة العريضة (المكيّفات) تنكمش إلى 136 والمربّعة تبلغ 190 ⊙ 54px تنتقل
   إلى العنوان وما بعده. صندوقٌ ثابت يجعل كل العناوين تبدأ من موضعٍ واحد.
   `contain` باقٍ فلا تُقصّ صورة ولا تتشوّه نسبتها. */
.ac-carousel-rail li.product img.attachment-woocommerce_thumbnail {
	flex: 0 0 auto;
	block-size: 190px;
	inline-size: 100%;
	object-fit: contain;
}

@media ( max-width: 780px ) {
	.ac-carousel-rail li.product img.attachment-woocommerce_thumbnail { block-size: 160px; }
}

/* ── جولة ٤ من إصلاح الكاروسيلات — الفجوة والصور 28/08 ────────────────────
   بلاغُ المالك: «الكاروسيل يحتاج إصلاح». القياس فسّره:
     · فجوةٌ مفردة **153px** داخل بطاقتين قبل زرّ «قارن» — خلّفها
       `margin-block-start:auto` الذي أضافته جولة ٣: البطاقات متساوية
       الارتفاع، فالأقلّ محتوًى تُخلّف حفرةً بحجم الفارق كلّه (176px).
     · سهما التنقّل يركبان فوق **نصّ** البطاقات (`inset-block-start:40%`
       من 797px = 319px، أي في منطقة العنوان).
     · والصور مستطيلاتٌ بيضاء **متفاوتة** على بطاقةٍ داكنة: خلفيّاتها
       بيضاء مخبوزة بنسبٍ مختلفة، فتبدو رقعاً غير مستوية — وهذا ما لا
       يكشفه رقمٌ ويكشفه النظر. */

/* ① الفائض يُقسَّم بالتساوي على ثلاثة فواصل **أسفل** العنوان، فتبقى
      الصورة والعنوان ملتصقَين في الأعلى ويبقى الزرّان في القاع.
      🔑 هوامش `auto` المتعدّدة في عمودٍ مرن تتقاسم الفراغ الحرّ بالتساوي.
      مقيس: أكبر فجوة **153 ← 51px**، وصفر فجوةٍ تتجاوز 60،
      وتباين (الصورة · العنوان · «قارن» · الشراء) = **صفر في الأربعة**. */
.ac-carousel-rail > li.product > a.woocommerce-loop-product__link {
	justify-content: flex-start;
}
.ac-carousel-rail > li.product > a.woocommerce-loop-product__link > .ac-card-chips,
.ac-carousel-rail > li.product > a.woocommerce-loop-product__link > .price,
.ac-carousel-rail > li.product > a.woocommerce-loop-product__link > .ac-fulfil {
	margin-block-end: auto;
}
/* يُلغي دفعَ «قارن» وحده الذي صنع الحفرة في جولة ٣. */
.ac-carousel-rail > li.product > a.woocommerce-loop-product__link > .ac-cmp-btn {
	margin-block-start: 0;
}

/* ② السهمان يطفوان فوق **الصورة** لا فوق النصّ (نصف ارتفاع اللوح). */
.ac-carousel-nav { inset-block-start: 95px; }

/* ③ لوحٌ أبيض موحّد: كل بطاقة مستطيلٌ واحد بنفس المقاس والمنتج يتوسّطه
      بنسبته الصحيحة، فلا تُقصّ صورة ولا تتشوّه.
      🔑 `box-sizing:border-box` ضروري — بدونه صار اللوح 300×210 داخل
      بطاقة 280 (الحشوة تُضاف للعرض)، وهو ما قِيس قبل الضبط. */
.ac-carousel-rail li.product img.attachment-woocommerce_thumbnail {
	box-sizing: border-box;
	background: #fff;
	border-radius: 10px;
	padding: 10px;
	inline-size: 100%;
	block-size: 190px;
	object-fit: contain;
}

@media ( max-width: 780px ) {
	.ac-carousel-rail li.product img.attachment-woocommerce_thumbnail {
		block-size: 160px;
		padding: 8px;
	}
}

/* ── جولة ٥ — حجم عنوان المنتج في الكاروسيل 28/08 ────────────────────────
   بلاغ المالك: «الواجهة مشوّهة» على عرضٍ واسع. القياس فسّره:
   **خطّ العنوان محسوبٌ 33.6px (2.1rem) داخل بطاقة عرضها 280px** — ضِعفا خطّ
   الجسم — فيبتلع البطاقة ويُجبر كل عنوانٍ على ثلاثة أسطر (131px).

   🔑🔑🔑 السبب أن الكاروسيل مُحقَنٌ **خارج غلاف `.woocommerce`**، فقاعدة القالب
   `.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.875rem}`
   لا تنطبق عليه أصلاً، ويرث العنوان حجم `h2` العامّ من ووردبريس.
   ⇒ العلاج تصريحٌ مباشر بمحدّد الكاروسيل، لا مصارعةُ أولويّات.

   🔑 و`min-block-size` لثلاثة أسطر ضروريّ: بلا الخطّ الكبير لم تعد كل العناوين
   تبلغ الحدّ الأقصى، فتفاوتت الارتفاعات وانكسر الاصطفاف الذي بنته الجولة ٤.
   مقيس بعد الإصلاح: ارتفاع البطاقة 797 ← 625–704، وتباين
   (الصورة · العنوان · «قارن» · الشراء) = **صفر في الأقسام الستّة**. */
.ac-carousel-rail li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	line-height: 1.45;
	font-weight: 700;
	min-block-size: calc( 1.45em * 3 );
}

/* ── جولة ٦ — سلّم مقاسٍ منتظم لبطاقة الكاروسيل 28/08 ─────────────────────
   بلاغ المالك: «المقاسات مو متناسقة». القياس أعطاه رقماً:
     أحجام الخطّ داخل البطاقة الواحدة: **11.2 · 11.8 · 12.2 · 13.1 · 16**
     — أربعةٌ منها محشورةٌ في 1.9px، فتُقرأ عشوائيّةً لا سلّماً.
     والاستدارات: 2 · **10 · 11** · 999 — وفرقُ البكسل بين 10 و11 يُرى ولا يُبرَّر.
   ⇒ سلّمٌ من ثلاث درجات: **12 (ثانويّ) · 14 (سعر وأزرار) · 16 (عنوان)**.
   🔑 المصادر حُدِّدت بالقياس لا بالتخمين: `.ac-chip`=11.2 ·
      `.ac-stockgauge-line`=11.8 · `.woocommerce-price-suffix`=12.2 · `.price`=13.1.
   ⚠️ `.ac-sar-t` (رمز الريال) يُترك ليتناسب مع رقم السعر — رموز العملة أصغر عمداً. */
.ac-carousel-rail li.product .ac-chip,
.ac-carousel-rail li.product .ac-stockgauge-line,
.ac-carousel-rail li.product .woocommerce-price-suffix {
	font-size: 12px;
}

.ac-carousel-rail li.product .price,
.ac-carousel-rail li.product .ac-cmp-btn,
.ac-carousel-rail li.product > .button {
	font-size: 14px;
}

/* استدارةٌ واحدة للشرائح بدل 10 و11 معاً. */
.ac-carousel-rail li.product .ac-chip {
	border-radius: 10px;
}

/* ── جولة ٧ — شبكة مسافاتٍ من 4px لبطاقة الكاروسيل 28/08 ─────────────────
   تكملة «المقاسات مو متناسقة»: بعد ضبط سلّم الخطّ بقيت المسافات.
   قِيس داخل البطاقة الواحدة **إحدى عشرة قيمة**:
     1 · 4 · 5 · 6 · 7 · 8 · 9 · 10 · 12 · 13 · 51
   أغلبها يفترق ببكسلٍ واحد، فيُقرأ ارتجالاً لا نظاماً.
   ⇒ شبكة **4 / 8 / 12**. مقيسٌ بعد الضبط: **ثلاث قيمٍ لا إحدى عشرة**،
   والاصطفاف باقٍ صفراً في الأقسام الستّة، وصفر تجاوز.
   🔑 المصادر حُدِّدت بالقياس: `.ac-chip`(1,5) · `.ac-cmp-btn`(6) ·
      `.ac-fulfil-row`(7) · `.ac-fulfil`(9,10) · العنوان(13) · لوح الصورة(10).
   ⚠️ القيمة 51 تُترك: ليست تصميماً بل الفائض الذي توزّعه هوامش `auto`
      في الجولة ٤ — وهي التي تُبقي الزرّين في القاع. */
.ac-carousel-rail li.product .ac-chip {
	padding-block: 4px;
	gap: 4px;
}

.ac-carousel-rail li.product .ac-fulfil {
	gap: 4px;
	padding-block-start: 8px;
	margin-block-start: 8px;
}

.ac-carousel-rail li.product .ac-fulfil-row,
.ac-carousel-rail li.product .ac-cmp-btn {
	gap: 8px;
}

.ac-carousel-rail li.product .woocommerce-loop-product__title {
	margin-block: 12px;
}

.ac-carousel-rail li.product img.attachment-woocommerce_thumbnail {
	padding: 8px;
}

/* ── جولة ٨ — تراتب البطاقة 28/08 ────────────────────────────────────────
   بعد ضبط الخطّ والمسافات بقي التراتب. القياس داخل البطاقة الواحدة:
   **ستّة عناصر من تسعة بوزن 700** — «صنع في تايوان» و«متوفّر» و«متوفّر لدينا»
   و«مجاني» كلّها تصرخ. وحين يبرز كلّ شيءٍ لا يبرز شيء.
   🔑🔑🔑 والأهمّ ما لم يكن في القائمة: **السعر لم يكن عريضاً** — الرقم الذي
      يقرّر الشراء كان أخفتَ من شارة بلد الصنع. تراتبٌ مقلوب.
   ⇒ ثلاثة عناصر عريضة فقط: **العنوان · السعر · زرّ الشراء**، وما عداها
     ينزل إلى 500/600. مقيس: 6 ← 3، والسلّم والاصطفاف باقيان كما هما. */
.ac-carousel-rail li.product .price {
	font-size: 16px;
	font-weight: 700;
}

/* السعر المشطوب مرجعٌ لا بطل. */
.ac-carousel-rail li.product .price del {
	font-weight: 400;
	opacity: .65;
}

.ac-carousel-rail li.product .ac-chip { font-weight: 500; }
.ac-carousel-rail li.product .ac-fulfil strong { font-weight: 600; }
.ac-carousel-rail li.product .ac-stockgauge-line { font-weight: 600; }

/* ── ختم المركز السعودي للأعمال يغطّي زرّ إتمام الطلب في السلة — 28/08 ────────
   الختم إطارٌ خارجيّ (`iframe.sbc-seal-frame`) يحقنه سكربت الجهة الحكومية
   `position:fixed` عند `bottom:18px` بـ`z-index:2147483000` (أقصى ما يمكن).
   وسلة ووكومرس على الجوال تثبّت شريط الإرسال `.wc-block-cart__submit-container`
   **ثابتاً بارتفاع 82px عند القاع** ⇒ يجلس الختم فوق الزرّ.
   قِيس حيّاً 28/08 على 390px: تغطية **30% من مساحة الزرّ** — الثلث المحاذي
   للطرف (٣ من ٩ نقاط عيّنة محجوبة) والنصّ يختفي خلف الشارة. وليست حالةَ تمرير
   عابرة: الشريط مثبَّتٌ دائماً، فالتصادم دائم.
   🔑 والزرّ يبقى قابلاً للنقر من وسطه — فالعطب **بصريّ وثقة** قبل أن يكون منعاً،
      وهو على أقرب سطحٍ إلى الريال ⇒ يُعالَج لا يُؤجَّل.
   ⇒ يُرفع الختم فوق الشريط على السلة وحدها (الدفع لا شريط ثابت فيه — قِيس،
     وزرّ «تقديم طلب» قابلٌ للنقر في نقاطه الثلاث). و`!important` ضرورةٌ لا ترفٌ:
     المنافس نمطٌ **سطريّ** من طرفٍ ثالث لا نملك تعديله.
   
⚠️ **بطل مفعولها 28/08**: الختم صار داخل الفوتر (`position:static`) بقرار المالك،
   والإزاحة لا تنطبق على عنصرٍ غير مُموضَع ⇒ القاعدة **خاملة**، تُركت شبكةَ أمانٍ
   وحدها لو أُعيد `data-position` العائم في `aircare-sbc-seal.php`. */
@media (max-width:780px){
  body.woocommerce-cart .sbc-seal-frame{ inset-block-end:94px !important; }
}

/* ══════════════════════════════════════════════════════════════
   الفوتر — إعادة تصميمٍ موحّدة من جديد (بطلب المالك 01/09) · مساحة acf-*
   نمطٌ واحد: كل الأقسام مسطّحة على سطح الفوتر تفصلها خطوطٌ وتباعدٌ منتظم.
   البلاطات البيضاء الوحيدة = شعارات الدفع والعلامات (تحتاج خلفيةً بيضاء).
   يُبقي عناصر الامتثال: ختم SBC · روابط السياسات · [ac_pay_line] · [ac_brands].
   ══════════════════════════════════════════════════════════════ */
.acf-footer{ color:var(--ac-text); position:relative; }
.acf-footer::before{ content:""; position:absolute; inset-inline:0; inset-block-start:0; block-size:3px;
  background:linear-gradient(90deg, var(--ac-band-strong,#0A5468), var(--ac-blue,#1289A7)); }
.acf-footer a{ text-decoration:none; }

/* شبكة الأعمدة */
.acf-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr; gap:32px; align-items:start; }
.acf-footer h4{ margin:0 0 16px; font-size:.95rem; font-weight:800; color:var(--ac-text);
  position:relative; padding-block-end:10px; }
.acf-footer h4::after{ content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  inline-size:26px; block-size:2px; border-radius:2px; background:var(--ac-blue); }

/* عمود العلامة */
.acf-brand .acf-logo{ display:block; block-size:auto; max-inline-size:150px; margin-block-end:16px; }
.acf-addr{ margin:0 0 18px; font-size:.85rem; line-height:1.95; color:var(--ac-muted); }
.acf-nb{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.acf-reach{ display:flex; flex-direction:column; gap:11px; }
.acf-reach a{ display:inline-flex; align-items:center; gap:9px; font-size:.9rem; font-weight:700;
  color:var(--ac-blue-d); font-variant-numeric:tabular-nums; width:fit-content; }
.acf-reach a svg{ flex:none; color:var(--ac-blue); }
.acf-reach a:hover{ color:var(--ac-blue); }

/* روابط الأعمدة */
.acf-col ul{ list-style:none; margin:0; padding:0; }
.acf-col li{ margin:0; }
.acf-col li a{ display:inline-block; padding-block:6px; min-block-size:24px; font-size:.88rem;
  color:var(--ac-muted); transition:color .15s, transform .15s; }
.acf-col li a:hover{ color:var(--ac-blue-d); transform:translateX(-5px); }

/* الساعات */
.acf-hours dl{ margin:0; display:flex; flex-direction:column; gap:13px; }
.acf-hours dl > div{ display:flex; flex-direction:column; gap:2px; }
.acf-hours dt{ font-size:.82rem; color:var(--ac-muted); }
.acf-hours dd{ margin:0; font-size:.88rem; font-weight:700; color:var(--ac-text); font-variant-numeric:tabular-nums; }

/* شريط الثقة — ثلاثة عناصر متّسقة يفصلها خطّ علويّ وسفليّ */
.acf-trust{ display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center;
  margin-block-start:38px; padding-block:24px; border-block:1px solid var(--ac-line); }
.acf-trust-item{ display:flex; align-items:center; gap:12px; font-size:.82rem; line-height:1.65; color:var(--ac-muted); }
.acf-badge svg{ flex:none; color:var(--ac-ok); }
.acf-badge strong{ color:var(--ac-text); font-weight:800; }
.acf-return{ justify-self:end; }
.acf-return svg{ flex:none; color:var(--ac-blue); }

/* سطر الدفع [ac_pay_line] — بلاطاتٌ بيضاء موحّدة (والختم الحيّ يبقى تحتها) */
.acf-pay{ flex-direction:column; align-items:center; gap:10px; justify-self:center; }
.acf-pay .ac-foot-payrow{ margin:0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; }
.acf-pay .ac-foot-paylbl{ font-size:.82rem; font-weight:700; color:var(--ac-text); }
.acf-pay .ac-pay-logos{ display:flex; gap:7px; list-style:none; margin:0; padding:0; flex-wrap:wrap; justify-content:center; }
.acf-pay .ac-pay-logo{ margin:0; }
.acf-pay .ac-pay-logo img{ display:block; inline-size:46px; block-size:29px; object-fit:contain;
  background:#fff; border:1px solid var(--ac-line); border-radius:7px; padding:3px; box-sizing:border-box; box-shadow:0 1px 2px rgba(11,21,36,.06); }
.acf-pay .ac-pay-logo:has(img[alt="STC Pay"]){ overflow:hidden; }
.acf-pay .ac-pay-logo img[alt="STC Pay"]{ transform:scale(1.85); }
.acf-pay .ac-pay-text{ font-size:.76rem; color:var(--ac-muted); text-align:center; }
.acf-pay .ac-foot-seal{ margin:0; max-inline-size:180px; }
.acf-pay .ac-foot-seal iframe{ display:block; border:0; }

/* شريط العلامات — بلاطاتٌ بيضاء متّسقة */
.acf-brands{ margin-block-start:34px; }
.acf-brands .ac-brands{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; grid-template-columns:none; }
.acf-brands .ac-brand{ flex:0 0 auto; inline-size:112px; block-size:66px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--ac-line); border-radius:12px; padding:10px 12px; margin:0;
  box-shadow:0 1px 3px rgba(11,21,36,.05); transition:transform .15s, box-shadow .15s; }
.acf-brands .ac-brand:hover{ transform:translateY(-2px); box-shadow:var(--ac-shadow, 0 6px 24px rgba(11,21,36,.1)); }
.acf-brands .ac-brand img{ max-inline-size:100%; max-block-size:100%; object-fit:contain; }

/* القاع الحقوقيّ */
.acf-legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  margin-block-start:30px; padding-block-start:20px; border-block-start:1px solid var(--ac-line); }
.acf-legal p{ margin:0; font-size:.8rem; color:var(--ac-muted); }
.acf-legal p:first-child{ font-weight:700; color:var(--ac-text); }

/* استجابة */
@media (max-width:1000px){
  .acf-grid{ grid-template-columns:1fr 1fr 1fr; gap:28px; }
  .acf-brand{ grid-column:1 / -1; }
  .acf-hours{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .acf-grid{ grid-template-columns:1fr 1fr; }
  .acf-trust{ grid-template-columns:1fr; gap:20px; justify-items:center; text-align:center; }
  .acf-return{ justify-self:center; }
  .acf-legal{ flex-direction:column; align-items:center; text-align:center; }
}
@media (max-width:460px){
  .acf-grid{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════
   الترويسة — تجديد بصريّ شامل (بطلب المالك 01/09). يُبقي كلّ الوظائف
   (زرّ المظهر · البحث · السلة · [ac_catbar]) ويرفع الشكل. مُلحقٌ آخِراً.
   ══════════════════════════════════════════════════════════════ */
/* ١ · الشريط العلويّ — تدرّجٌ خفيف */
.ac-util{ background:linear-gradient(180deg, var(--ac-band-strong), color-mix(in srgb, var(--ac-band-strong) 86%, #000)); }
.ac-util-in{ padding-block:8px; }
.ac-util a{ opacity:.92; transition:opacity .15s; }
.ac-util a:hover{ opacity:1; }
.ac-util-a a svg, .ac-util-b a svg{ opacity:.8; }

/* ٢ · الهيدر — شعارٌ أكبر وبحثٌ وسلّةٌ أرقى */
.ac-header .ac-logo img{ block-size:96px; }
@media (max-width:600px){ .ac-header .ac-logo img{ block-size:60px; } }
.ac-header .ac-search .wp-block-search__inside-wrapper{
  border-width:1.5px; border-color:var(--ac-line); border-radius:14px;
  box-shadow:0 1px 3px rgba(11,21,36,.05); transition:border-color .15s, box-shadow .15s;
}
.ac-header .ac-search:focus-within .wp-block-search__inside-wrapper{
  border-color:var(--ac-blue); box-shadow:0 0 0 3px rgba(18,137,167,.13);
}
.ac-header .ac-search .wp-block-search__button{ border-radius:11px; margin:5px; }
.ac-header .wc-block-mini-cart__button{ border-radius:14px; border-color:var(--ac-line); }
.ac-header .wc-block-mini-cart__button:hover{ border-color:var(--ac-blue); background:rgba(18,137,167,.05); }

/* ٣ · شريط الفئات — خلفيةٌ لطيفة عند المرور */
.ac-cat:hover > .ac-cat-top, .ac-cat:focus-within > .ac-cat-top{ background:rgba(18,137,167,.06); }

/* ٤ · شريط المزايا — نقشةٌ أهدأ وأيقوناتٌ في مربّعاتٍ لطيفة */
.ac-svc::before{ opacity:.20; }
.ac-svc-in{ padding-block:16px; }
.ac-svc div{ gap:12px; }
.ac-svc svg{
  inline-size:40px; block-size:40px; padding:9px; box-sizing:border-box; border-radius:12px;
  background:color-mix(in srgb, var(--ac-blue) 10%, transparent); color:var(--ac-blue-d);
}
.ac-svc span{ font-size:.86rem; }

/* ══ الأكثر مبيعاً (شورت-كود [products]) — تنظيف الماركب الكلاسيكيّ (بطلب المالك 01/09) ══
   الثيم يُنسّق رقاقات البطاقة للبلوك لا لقائمة ul.products الكلاسيكيّة، فشعار العلامة
   يتضخّم بلا قيد. نُخفي الرقاقات هنا فقط (لا يمسّ بطاقات البلوك) فتبقى البطاقة نظيفة. */
.woocommerce ul.products li.product .ac-card-chips{ display:none; }