/* =========================================================
   متجر سنيح — مكوّنات التجارة
   الشخصية: «تجزئة واضحة» (قرار المالك 24/08/2026) — السعر أوّل ما تقع عليه العين،
   والخصم مُعلَن لا مُلمَّح، وزرّ الشراء لا يُخطئه أحد.
   يغطّي قوالب كتل ووكومرس (.wc-block-*) والكلاسيكية (.products li.product) معاً.
   ========================================================= */

/* ---------- شبكة الكتالوج ---------- */
.wc-block-product-template,
.wp-block-woocommerce-product-collection ul,
ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 700px)  { .wc-block-product-template, .wp-block-woocommerce-product-collection ul, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
@media (min-width: 1080px) { .wc-block-product-template, .wp-block-woocommerce-product-collection ul, ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- بطاقة المنتج ----------
   🔗 **سطحان بترميزين**: الفئة كتليّة (`li.wc-block-product`) والرئيسية حلقةٌ
      كلاسيكية (`ul.products li.product`) — و**صفحة الفئة لا `ul.products` فيها
      إطلاقاً** (قِيس: صفر عنصر). فالحشو يأتيهما من قاعدتين لا واحدة.
   🔴 فأيّ تعديلٍ هنا يجب أن يقابله مثلُه في القاعدة عالية الخصوصية أسفل الملفّ
      (ابحث عن «سطحان بترميزين») — وإلّا افترق السطحان **بصمت**، وقد وقع ثلاث
      مرّات اليوم (التمرير · `object-fit` · الحشو). */
.wc-block-product,
ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3);
  margin: 0;
  transition: box-shadow .22s cubic-bezier(.16,1,.3,1), border-color .22s, transform .22s cubic-bezier(.16,1,.3,1);
}
.wc-block-product:hover,
ul.products li.product:hover {
  box-shadow: var(--shadow-raised);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.wc-block-product:focus-within,
ul.products li.product:focus-within { box-shadow: var(--shadow-raised); border-color: var(--gold); }

/* الصورة: مربّع ثابت فلا تقفز الشبكة، وخلفية بيضاء تلائم صور الكتالوج */
.wc-block-product .wc-block-components-product-image,
ul.products li.product a img {
  display: block;
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0 0 var(--s2);
}
.wc-block-product .wc-block-components-product-image img,
ul.products li.product a img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--s2);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.035); }

/* العنوان: سطران بالضبط — فالبطاقات تبقى متساوية مهما طال اسم الموديل */
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-title,
ul.products li.product .woocommerce-loop-product__title {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.55;
  margin: 0;
  min-height: calc(2 * 1.55 * .9375rem);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wc-block-product .wp-block-post-title a,
ul.products li.product .woocommerce-loop-product__title { text-decoration: none; color: var(--fg); }
.wc-block-product .wp-block-post-title a:hover { color: var(--gold); text-decoration: underline; }

/* ---------- كتلة السعر: أبرز ما في البطاقة ---------- */
.wc-block-product .wp-block-woocommerce-product-price,
ul.products li.product .price { margin-top: auto; padding-top: var(--s2); }

.wc-block-components-product-price,
ul.products li.product .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.4;
}
/* السعر القديم: مشطوبٌ وباهت — حاضرٌ للمقارنة لا للقراءة */
.wc-block-components-product-price del,
ul.products li.product .price del {
  font-size: .875rem;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 1;
}
.wc-block-components-product-price ins,
ul.products li.product .price ins { text-decoration: none; background: none; color: var(--fg); }

/* ---------- شارة الخصم ---------- */
.wc-block-components-product-sale-badge,
ul.products li.product .onsale {
  position: absolute;
  inset-block-start: var(--s3);
  inset-inline-start: var(--s3);
  z-index: 2;
  margin: 0;
  min-width: auto;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border: none;
  border-radius: 999px;
  padding: .25rem .625rem;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(17,18,20,.12), 0 4px 10px -4px rgba(17,18,20,.3);
}

/* «وفّرت كذا» — الرقم الذي يقنع، لا النسبة وحدها */
.sny-saving {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--fg);
  background: var(--surface-2);
  border-radius: 999px;
  padding: .15rem .55rem;
  white-space: nowrap;
}
.sny-saving::before {
  content: "";
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  align-self: center;
}

/* ---------- زرّ الشراء ---------- */
.wc-block-components-product-button .wc-block-components-product-button__button,
ul.products li.product a.button {
  display: block;
  inline-size: 100%;
  text-align: center;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  border-radius: 10px;
  padding: .7rem 1rem;
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
.wc-block-components-product-button .wc-block-components-product-button__button:hover,
ul.products li.product a.button:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.wc-block-components-product-button .wc-block-components-product-button__button:disabled,
.wc-block-components-product-button .wc-block-components-product-button__button[disabled] {
  background: var(--surface-2); color: var(--muted); border-color: var(--line); cursor: not-allowed;
}
.wc-block-components-product-button .wc-block-components-product-button__button.loading { opacity: .7; cursor: progress; }

/* نفاد المخزون: يُقال صراحةً بدل زرٍّ يخيّب */
.sny-oos {
  display: block; text-align: center;
  padding: .7rem 1rem; border-radius: 10px;
  background: var(--surface-2); color: var(--muted);
  font-size: .9375rem; font-weight: 600;
}

/* ---------- صفحة المنتج المفردة ---------- */
.wp-block-woocommerce-single-product .wp-block-post-title,
.single-product .product_title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  line-height: 1.35;
  margin-block-end: var(--s3);
}
.single-product .wc-block-components-product-price,
.single-product .summary .price { font-size: 1.875rem; }
.single-product .woocommerce-product-gallery,
.wp-block-woocommerce-product-image-gallery {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4);
}
/* جدول المواصفات: البيانات هي المنتج هنا */
.woocommerce-product-attributes,
.wc-block-product-specifications table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td,
.wc-block-product-specifications th,
.wc-block-product-specifications td {
  border-block-end: 1px solid var(--line);
  padding: .7rem .25rem;
  text-align: start;
  vertical-align: top;
}
.woocommerce-product-attributes th,
.wc-block-product-specifications th { color: var(--muted); font-weight: 600; inline-size: 38%; }

/* ---------- السلة والدفع ---------- */
.wc-block-cart, .wc-block-checkout { --wp--style--global--wide-size: 1180px; }
.wc-block-cart-items__row { border-block-end: 1px solid var(--line); }
.wc-block-components-totals-item { font-size: 1rem; }
.wc-block-components-totals-footer-item { font-size: 1.25rem; font-weight: 700; }
.wc-block-components-text-input input,
.wc-block-components-select select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: .7rem .8rem;
  font: inherit;
}
.wc-block-components-text-input input:focus { border-color: var(--gold); }
.wc-block-components-checkout-place-order-button { font-weight: 700; }

/* رسالة الخطأ تسمّي المشكلة والمخرج */
.wc-block-components-validation-error, .woocommerce-error {
  color: #A3261F;                       /* 5.4:1 على العاجي */
  font-size: .875rem;
  font-weight: 600;
}
:root[data-theme="dark"] .wc-block-components-validation-error,
:root[data-theme="dark"] .woocommerce-error { color: #FF8A80; }

/* ---------- الحالة الفارغة ---------- */
.sny-empty {
  text-align: center;
  padding: var(--s16) var(--s4);
  color: var(--muted);
}
.sny-empty h2 { color: var(--fg); margin-block-end: var(--s2); }

/* ---------- شريط الطمأنة تحت الرأس ---------- */
.sny-assure {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s2) var(--s6);
  padding: var(--s2) var(--s4);
  background: var(--surface-2);
  border-block-end: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--fg);
}
.sny-assure span { display: inline-flex; align-items: center; gap: .45em; }
.sny-assure svg { inline-size: 16px; block-size: 16px; flex: none; color: var(--gold); }

/* ---------- زرّ تبديل الوضع ---------- */
.sny-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 38px; block-size: 38px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.sny-theme-toggle:hover { border-color: var(--gold); background: var(--surface-2); }
.sny-theme-toggle svg { inline-size: 18px; block-size: 18px; }
.sny-theme-toggle .sny-icon-sun { display: none; }
:root[data-theme="dark"] .sny-theme-toggle .sny-icon-sun { display: block; }
:root[data-theme="dark"] .sny-theme-toggle .sny-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sny-theme-toggle .sny-icon-sun { display: block; }
  :root:not([data-theme="light"]) .sny-theme-toggle .sny-icon-moon { display: none; }
}

/* =========================================================
   الرأس والتذييل
   ========================================================= */
.sny-header { border-color: var(--line); background: var(--bg); position: sticky; inset-block-start: 0; z-index: 20; }
.sny-header__row { gap: var(--s4); }
.sny-header__brand .wp-block-site-title a { text-decoration: none; }
.sny-header__brand .wp-block-site-title a:hover { color: var(--gold); }

/* البحث يأخذ ما تبقّى — فهو المدخل الأول في متجرٍ بـ1,551 صنفاً */
.sny-header__search { flex: 1 1 auto; min-inline-size: 0; max-inline-size: 520px; }
.sny-header__search .wp-block-search__inside-wrapper {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.sny-header__search .wp-block-search__input {
  border: 0; background: transparent; color: var(--fg);
  padding: .6rem .8rem; font: inherit; font-size: .9375rem; min-inline-size: 0;
}
.sny-header__search .wp-block-search__input::placeholder { color: var(--muted); }
.sny-header__search .wp-block-search__inside-wrapper:focus-within { border-color: var(--gold); }
.sny-header__search .wp-block-search__button { background: transparent; color: var(--fg); border: 0; padding-inline: .7rem; }
.sny-header__search .wp-block-search__button:hover { color: var(--gold); }

.sny-header__tools { gap: var(--s2); }
.sny-header__nav { margin-block-start: var(--s2); }
.sny-header__nav .wp-block-navigation a { text-decoration: none; }
.sny-header__nav .wp-block-navigation a:hover { color: var(--gold); text-decoration: none; }

@media (max-width: 780px) {
  .sny-header__row { flex-wrap: wrap; }
  .sny-header__search { order: 3; flex-basis: 100%; max-inline-size: none; }
}

.sny-footer { border-color: var(--line); }
.sny-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sny-footer__links a { text-decoration: none; color: var(--fg); }
.sny-footer__links a:hover { color: var(--gold); text-decoration: underline; }
.sny-footer__base { border-color: var(--line); gap: var(--s2); }

/* شريط الطمأنة يعلو الرأس اللاصق */
.sny-assure { position: relative; z-index: 21; }

/* =========================================================
   تصحيحات جولة الفحص الأولى (24/08/2026)
   ========================================================= */

/* 🔴 كان: عمودان على سطح المكتب. السبب أن ووكومرس يضبط الشبكة عبر
   `.wc-block-product-template__responsive` بـauto-fill، وقاعدتي كانت بنفس
   الوزن فخسرت الترتيب. الحل رفع الخصوصية بمُحدِّدٍ حقيقي لا بـ!important. */
.wp-block-woocommerce-product-collection ul.wc-block-product-template,
.wp-block-woocommerce-product-template ul.wc-block-product-template,
ul.wc-block-product-template.wc-block-product-template__responsive {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) {
  .wp-block-woocommerce-product-collection ul.wc-block-product-template,
  .wp-block-woocommerce-product-template ul.wc-block-product-template,
  ul.wc-block-product-template.wc-block-product-template__responsive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .wp-block-woocommerce-product-collection ul.wc-block-product-template,
  .wp-block-woocommerce-product-template ul.wc-block-product-template,
  ul.wc-block-product-template.wc-block-product-template__responsive {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* الأرقام: الرقم نفسه في `bdi`، ورمز العملة أصغر وأهدأ منه */
.wc-block-components-product-price .amount,
.wc-block-components-product-price bdi,
.price .amount, .price bdi, .sny-num {
  font-family: Inter, "Noto Sans Arabic", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.woocommerce-Price-currencySymbol {
  font-size: .78em;
  font-weight: 600;
  color: var(--muted);
  margin-inline-start: .12em;
}
.wc-block-components-product-price del .woocommerce-Price-currencySymbol { color: inherit; }

/* بطاقة بلا صورة: مساحة هادئة بدل أيقونة مكسورة */
/* العنصر النائب صار بطاقةً مصمَّمة تقول ما يجري — فلا حاجة لتخفيته ولا لحشوه.
   (كان `opacity:.35` و`padding:22%` لأنّه كان أيقونةً رمادية عامّة.) */
.wc-block-components-product-image img[src*="placeholder"],
ul.products li.product img[src*="placeholder"] {
  opacity: 1;
  padding: 0;
  /* 🔴 بلا هذا السطر تُحسب الحشوة **خارج** العرض (`content-box` من ووكومرس)
     ⇒ 276px تصير 397px وتخرج 108px من بطاقة 302px. */
  box-sizing: border-box;
}

/* المنتج النافد: البطاقة تهدأ فلا تنافس المتاح على الانتباه */
.wc-block-product.outofstock .wc-block-components-product-image { opacity: .6; }
.wc-block-product.outofstock .wc-block-components-product-button__button {
  background: var(--surface-2); color: var(--fg); border-color: var(--line-strong);
}
.wc-block-product.outofstock .wc-block-components-product-button__button:hover {
  background: var(--fg); color: var(--bg); border-color: var(--fg);
}

/* =========================================================
   تصحيحات جولة الفحص الثانية
   ========================================================= */

/* 🔴 كان: العنوان يمتدّ ٣–٤ أسطر فتتفاوت أطوال البطاقات ويتكسّر الصفّ.
   الحدّ لم يُطبَّق لأن أنماط الكتلة تعيد `display` بعد قاعدتي. نرفع الخصوصية. */
.wc-block-product h2.wp-block-post-title,
.wc-block-product h3.wp-block-post-title,
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: calc(2 * 1.55em);
}

/* السعر الجديد يسبق القديم في ترتيب القراءة — هو الرقم الذي يقرّر */
.wc-block-components-product-price del,
ul.products li.product .price del { order: 2; }
.wc-block-components-product-price ins,
.wc-block-components-product-price > .amount,
ul.products li.product .price ins { order: 1; }
.sny-saving { order: 3; flex-basis: 100%; }

/* 🔴🔴🔴 كان هنا `html, body { overflow-x: hidden }` لمنع فيض 10px على الجوال —
   **وهو سببُ تعطّل الرأس اللاصق.** العنصر اللاصق يلتصق بأقرب سلفٍ مُمرِّر، و`overflow`
   على `html`/`body` يجعلهما مُمرِّرين، فيلتصق بهما لا بالنافذة فيبدو كأنّه لا يلتصق.
   أُثبت سببيّاً بتجربةٍ في المتصفّح: `hidden` ⇒ `scrollY=600` والرأس عند **−544**؛
   و`visible` ⇒ الرأس عند **0**.
   🔑 ولم يعد لازماً: الفيض يمنعه حرّاس `max-inline-size` أدناه، والقياس الحيّ يعطي
   `scrollWidth == clientWidth` على 390 و1440 في كل الصفحات. **عالجنا العَرَض بحجبه،
   فحجبنا معه سلوكاً مقصوداً.** */
html, body { max-inline-size: 100%; }
.wp-site-blocks, .wp-block-group, .wc-block-product-template { max-inline-size: 100%; }
img, svg, video { max-inline-size: 100%; block-size: auto; }

/* شريط الطمأنة على الجوال: صفٌّ مضغوط لا ثلاثة أسطر تبتلع الشاشة */
@media (max-width: 600px) {
  .sny-assure { gap: var(--s1) var(--s3); padding: .4rem var(--s3); font-size: .75rem; line-height: 1.5; }
  .sny-assure svg { inline-size: 14px; block-size: 14px; }
  .sny-theme-toggle { inline-size: 32px; block-size: 32px; }
  .sny-theme-toggle svg { inline-size: 16px; block-size: 16px; }
}

/* أرشيف الفئة: العنوان والعدّاد يتنفّسان */
.woocommerce-result-count, .wc-block-product-results-count { color: var(--muted); font-size: .9375rem; }
.woocommerce-breadcrumb, .wp-block-woocommerce-breadcrumbs { font-size: .875rem; color: var(--muted); }
.woocommerce-breadcrumb a, .wp-block-woocommerce-breadcrumbs a { color: var(--muted); }
.woocommerce-breadcrumb a:hover { color: var(--gold); }

/* 🔑 الحدّ يُطبَّق على الرابط داخل العنوان لا على العنوان نفسه:
   `h2.wp-block-post-title` تصله `display:flow-root` من طبقةٍ تغلب `!important`
   (تحقّقتُ: قاعدتي تصل — `-webkit-line-clamp` محسوبةٌ بـ2 — لكن `display` وحدها تُقلَب)،
   و`-webkit-line-clamp` لا يعمل إلا مع `-webkit-box`. الرابط `inline-block` بلا منازع. */
.wc-block-product .wp-block-post-title a,
.wc-block-product .wc-block-components-product-title a,
ul.products li.product .woocommerce-loop-product__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  inline-size: 100%;
}
.wc-block-product .wp-block-post-title { min-block-size: calc(2 * 1.55em); }

/* ضمانٌ لا يعتمد على `-webkit-box`: ارتفاعٌ صريح بسطرين وقطعٌ لما زاد.
   (طبقةٌ في ووردبريس تقلب `display` إلى `flow-root` مهما رفعنا الخصوصية،
   فالحدّ المعتمد على الصندوق غير موثوق هنا — والارتفاع الصريح موثوق دائماً.) */
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-title,
ul.products li.product .woocommerce-loop-product__title {
  line-height: 1.55;
  block-size: calc(2 * 1.55em);
  max-block-size: calc(2 * 1.55em);
  overflow: hidden;
}

/* =========================================================
   صفحة المنتج المفردة — تصحيحات ما كشفته اللقطة
   ========================================================= */

/* 🔴 كان: الصورة تسبح في صندوقٍ فارغ. صور الكتالوج نِسبها شديدة التباين
   (1000×292 إلى 957×1000) فالحاوية الثابتة تُقزّم العريضة. الحلّ: ارتفاع
   أدنى مع `contain` — تكبر الصورة قدر ما تستطيع بلا تشويه ولا قصّ. */
.wp-block-woocommerce-product-image-gallery,
.single-product .woocommerce-product-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s6);
}
.wp-block-woocommerce-product-image-gallery img,
.single-product .woocommerce-product-gallery img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: min(48vh, 420px);
  object-fit: contain;
}
.woocommerce-product-gallery__wrapper { inline-size: 100%; }

/* 🔴 زرّ التكبير في ووكومرس يُخرج الإيموجي 🔍 نصّاً — إيموجي بديلاً عن أيقونة.
   نخفيه: التكبير يعمل بالنقر على الصورة نفسها. */
.woocommerce-product-gallery__trigger { display: none !important; }
.wp-block-woocommerce-product-image-gallery img.emoji,
.single-product .woocommerce-product-gallery img.emoji { display: none !important; }

/* بيانات المنتج أسفل الزرّ: تتنفّس وتُقرأ */
.product_meta { margin-block-start: var(--s6); font-size: .9375rem; line-height: 2; }
.product_meta > span { display: block; }
.product_meta a { color: var(--fg); text-decoration-color: var(--line-strong); }
.product_meta a:hover { color: var(--gold); }

/* رقم الصنف كان يتكسّر حرفاً حرفاً («2000539 / 5») — عمودُه ضيّق وكسرُه على مستوى المحرف.
   نمنع الكسر ونجعل صفّ البيانات يتنفّس بأعمدة تتبع محتواها. */
.wc-block-components-product-sku,
.wc-block-components-product-sku * ,
.wp-block-woocommerce-product-sku,
.wp-block-woocommerce-product-sku * {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.wp-block-woocommerce-product-details ~ * .wp-block-columns,
.wc-block-components-product-sku { min-inline-size: max-content; }

/* صفّ بيانات المنتج: يلتفّ بدل أن يُخنق في أعمدة ضيّقة */
.wp-block-woocommerce-product-meta,
.product_meta,
.wp-block-columns:has(> .wp-block-column .wc-block-components-product-sku) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  align-items: flex-start;
}

/* =========================================================
   السلة والدفع — تصحيحات ما كشفته اللقطات
   ========================================================= */

/* 🔴 الأرقام كانت تلتصق بالكلمات («4,711.30 ر.سحفظ 156.52»):
   كتل ووكومرس تضع العناصر متجاورةً بلا فراغ. نفصلها بالتخطيط لا بالمسافات النصّية. */
.wc-block-components-product-price,
.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-components-totals-footer-item,
.wc-block-components-totals-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45em;
}
.wc-block-components-sale-badge {
  background: var(--surface-2);
  color: var(--fg);
  border-radius: 999px;
  padding: .12rem .5rem;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
}
/* 🔴 كان الهدفُ `…-tax-value` — وهو في ووكومرس **مبلغُ الإجماليّ نفسُه** لا سطرُ الضريبة ⇒
   أهمُّ رقمٍ في الصفحة بـ13px رماديّ تحت مجموعٍ فرعيٍّ بـ16px داكن (مقيسٌ 18/09).
   وسطرُ «شاملة الضريبة» هو `p.…-footer-item-tax`. */
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax,
.wc-block-components-totals-footer-item small { display: block; flex-basis: 100%; color: var(--muted); font-size: .8125rem; }
.wc-block-components-product-price__regular { color: var(--muted); }

/* السلة: صفوفٌ تتنفّس وحدودٌ من لوحتنا */
.wc-block-cart-items__row { padding-block: var(--s4); }
.wc-block-cart-item__image img { border-radius: var(--radius-sm); background: #fff; }
.wc-block-components-totals-wrapper { border-color: var(--line); }

/* الدفع: زرّ الطلب بارز كزرّ الشراء */
.wc-block-components-checkout-place-order-button {
  background: var(--fg); color: var(--bg); border-radius: 10px; font-weight: 700;
}
.wc-block-components-checkout-place-order-button:hover { background: var(--gold); color: var(--ink); }

/* =========================================================
   الصفحة الرئيسية
   ========================================================= */
.sny-hero {
  background: var(--surface-2);
  border-block-end: 1px solid var(--line);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  text-align: center;
}
.sny-hero__title {
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.25;
  margin: 0 0 var(--s3);
}
.sny-hero__sub {
  color: var(--muted);
  font-size: clamp(.95rem, .9rem + .3vw, 1.125rem);
  max-inline-size: 56ch;
  margin: 0 auto var(--s6);
}
.sny-hero__search { max-inline-size: 560px; margin: 0 auto var(--s4); }
.sny-hero__search .wp-block-search__inside-wrapper {
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}
.sny-hero__search .wp-block-search__input {
  border: 0; background: transparent; color: var(--fg);
  padding: .85rem 1rem; font: inherit; min-inline-size: 0;
}
.sny-hero__search .wp-block-search__input::placeholder { color: var(--muted); }
.sny-hero__search .wp-block-search__inside-wrapper:focus-within { border-color: var(--gold); }
.sny-hero__search .wp-block-search__button { background: transparent; color: var(--fg); border: 0; padding-inline: .9rem; }
.sny-hero__cta { justify-content: center; }

.sny-sec { margin-block: var(--s12) var(--s6); text-align: center; }

/* بطاقات الفئات: صورة الفئة + اسمها + عددها الحقيقي */
.sny-cats { flex-wrap: wrap !important; gap: var(--s4); }
.sny-cats > .sny-cat {
  flex-basis: calc(50% - var(--s4)) !important;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3);
  text-align: center;
  transition: box-shadow .22s cubic-bezier(.16,1,.3,1), border-color .22s, transform .22s cubic-bezier(.16,1,.3,1);
}
.sny-cats > .sny-cat:hover { box-shadow: var(--shadow-raised); border-color: var(--line-strong); transform: translateY(-2px); }
@media (min-width: 700px)  { .sny-cats > .sny-cat { flex-basis: calc(33.333% - var(--s4)) !important; } }
/* 🔴 كانت ستّة أعمدة (16.666%) لخمس بطاقات ⇒ عمودٌ سادس فارغ يكسر اتّزان الصفّ.
   خمسةٌ تملأ العرض. وإن أُضيفت فئةٌ سادسة فالسطر يتّسع لها بلا تعديل. */
@media (min-width: 1080px) { .sny-cats > .sny-cat { flex-basis: calc(20% - var(--s4)) !important; } }
.sny-cat__img { margin: 0 0 var(--s2); }
.sny-cat__img img { aspect-ratio: 1/1; object-fit: contain; inline-size: 100%; background: #fff; border-radius: var(--radius-sm); padding: var(--s2); }
.sny-cat__name { margin: 0; font-weight: 700; font-size: .9375rem; line-height: 1.5; }
.sny-cat__name a { color: var(--fg); text-decoration: none; }
.sny-cat__name a:hover { color: var(--gold); text-decoration: underline; }
.sny-cat__count { margin: .15rem 0 0; color: var(--muted); font-size: .8125rem; }

/* 🔑 لا صور للفئات — لا في سنيح ولا في متجر عناية الهواء (151 من 151 بلا صورة).
   فبدل صندوقٍ فارغ يبدو مكسوراً، البطاقة **نصّيةٌ مقصودة**: الاسم يقود والعدد يسنده،
   وخطٌّ ذهبيّ رفيع يعطيها هويّة بلا صورة. */
.sny-cats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
@media (min-width: 700px)  { .sny-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 🔴 كانت ستّة أعمدة لخمس بطاقات ⇒ فراغ 215px في ذيل الصفّ (مقيس).
   🔑 ولا تُصلَح بـ`flex-basis`: `.sny-cats` حاوية **grid** فالخصائص المرنة
      عليها **بلا مفعول** — عدّلتُها مرّةً فلم يتغيّر شيء. */
@media (min-width: 1080px) { .sny-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sny-cats > .sny-cat {
  flex-basis: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-block-size: 116px;
  padding: var(--s4) var(--s3);
  position: relative;
  overflow: hidden;
}
/* الخطّ الذهبي يعلو البطاقة ويمتدّ عند التمرير — حركةٌ واحدة لا زخرفة متناثرة */
.sny-cats > .sny-cat::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  block-size: 3px; inline-size: 28px;
  background: var(--gold);
  border-end-end-radius: 3px;
  transition: inline-size .3s cubic-bezier(.16,1,.3,1);
}
.sny-cats > .sny-cat:hover::before { inline-size: 100%; }
.sny-cat__img { display: none; }
.sny-cat__name { font-size: 1rem; line-height: 1.45; }
.sny-cat__count { font-size: .8125rem; }

/* 🔴 كتل الشورت-كود تُخرج الحلقة الكلاسيكية، وأنماط ووكومرس الافتراضية تفرض
   `float:left` و`width:22.05%` على `li.product` بخصوصية `.woocommerce ul.products li.product`
   — أعلى من شبكتي، فانكسر الصفّ إلى أعمدة نحيلة. نطابق خصوصيتها ونلغي الطفو. */
.woocommerce ul.products,
.woocommerce-page ul.products,
body ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--s4) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
@media (min-width: 700px) {
  .woocommerce ul.products, .woocommerce-page ul.products, body ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--s6) !important;
  }
}
@media (min-width: 1080px) {
  .woocommerce ul.products, .woocommerce-page ul.products, body ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* 🔴🔴 وclearfix ووكومرس (`ul.products::before/::after` بـ`display:table`) يصير
   **عنصرَي شبكة** فيبتلع خليّتين — فتبدأ البضاعة من العمود الثالث ويتشتّت الصفّ. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
body ul.products::before,
body ul.products::after { display: none !important; content: none !important; }
/* 🔴 أنماط ووكومرس تُرجع محتوى البطاقة الكلاسيكية إلى `content-box`، فتُحسب حشوةُ
   الصورة (8px) والزرّ (16px) **خارج** العرض ⇒ خروجٌ 15px و33px من حدّ البطاقة.
   بقيّة الثيم على `border-box`، فنعيدها إليه. */
body ul.products li.product,
body ul.products li.product * { box-sizing: border-box; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
body ul.products li.product {
  /* 🔗 سطحان بترميزين — انظر التعليق عند «بطاقة المنتج» أعلى الملفّ.
     🔴 قِيس: البطاقة في **الرئيسية** بلا حشوٍ داخليّ (0px) وفي **صفحة الفئة** 12px.
     السبب خصوصيّةٌ لا رمزٌ مفقود: `.woocommerce ul.products li.product{padding:0}`
     من ووكومرس تغلب قاعدتنا العامّة أعلى الملفّ. وهذه القاعدة تطابق خصوصيّتها
     أصلاً — فالحشو مكانه هنا، لا حرب `!important` في الأعلى.
     🔑 وهو ثالثُ عطبٍ اليوم من صنف «سطحان يعرضان الشيء نفسه ويفترقان»
     (بعد حركة التمرير وقاعدة `object-fit`) — الرئيسية حلقةٌ كلاسيكية والفئة كتل. */
  padding: var(--s3);
  inline-size: auto !important;
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}
/* بطاقة الحلقة الكلاسيكية: نفس لغة بطاقة الكتل */
body ul.products li.product a img { margin: 0 0 var(--s2) !important; }
body ul.products li.product .woocommerce-loop-product__title {
  padding: 0 !important; font-size: .9375rem !important;
}
body ul.products li.product .price { margin-block: auto 0 !important; }
body ul.products li.product .onsale {
  inset-block-start: var(--s3) !important; inset-inline-start: var(--s3) !important;
  inset-inline-end: auto !important; margin: 0 !important;
}
body ul.products li.product a.button { margin-block-start: var(--s2) !important; }

/* زرّ «نفد المخزون» ليس دعوةً للشراء — يبقى بحجم الزرّ لتتحاذى البطاقات،
   لكن بلون محايد لا يَعِد بما لا يُنجَز. */
body ul.products li.product a.button:not(.add_to_cart_button),
.wc-block-product-template li a.wp-block-button__link:not(.add_to_cart_button),
.wc-block-product-template li a.button:not(.add_to_cart_button) {
  background: var(--surface, #F1EDE4) !important;
  color: var(--muted, #6E7074) !important;
  border: 1px solid rgba(17, 18, 20, .10) !important;
  cursor: default;
}
/* 🔴 «غير متوفَّر حالياً» في صفحة المنتج كان سطراً رمادياً باهتاً بين السطور،
   يقرؤه المشتري بعد أن يقرّر. نجعله إشعاراً يُرى قبل القرار — لا زرّاً كاذباً. */
.woocommerce div.product p.stock.out-of-stock,
.wp-block-woocommerce-product-stock-indicator.is-out-of-stock,
body .product .stock.out-of-stock {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin: var(--s4) 0 0; padding: var(--s3) var(--s4);
  border: 1px solid rgba(255, 77, 77, .28);
  border-radius: var(--radius-sm, 8px);
  background: rgba(255, 77, 77, .06);
  color: #A32A2A; font-weight: 600; font-size: .9375rem;
}
.woocommerce div.product p.stock.out-of-stock::before,
body .product .stock.out-of-stock::before {
  content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: #D14343; flex: 0 0 auto;
}
/* «منتجات ذات صلة» كان عنواناً باهتاً بجانب «الوصف» الضخم — عنوانان في صفحةٍ
   واحدة بوزنين مختلفين يكسران السلّم البصري. نوحّدهما. */
.single-product .wp-block-woocommerce-product-collection > h2.wp-block-heading,
.related.products > h2,
section.related > h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 700; letter-spacing: -.01em;
  margin: var(--s8) 0 var(--s6);
  color: var(--ink, #111214);
}
/* «منتجات ذات صلة» كانت بطاقةً واحدة في الصفّ على الجوال، بينما صفحة الفئة
   بطاقتان — عرضان مختلفان لنفس البطاقة في متجرٍ واحد. نوحّدهما: ٢ ثم ٤. */
.single-product .wp-block-woocommerce-product-collection .wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--s4) !important;
}
.single-product .wp-block-woocommerce-product-collection .wc-block-product-template > li,
.single-product .wp-block-woocommerce-product-collection .wc-block-product-template > .wc-block-product {
  inline-size: auto !important; width: auto !important;
  max-inline-size: none !important; grid-column: auto !important; margin: 0 !important;
}
@media (min-width: 1080px) {
  .single-product .wp-block-woocommerce-product-collection .wc-block-product-template {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--s6) !important;
  }
}
/* 🔴 على الجوال (بطاقة 163px) كان سطر التوفير يبلغ 202px فيخرج 52px خارج البطاقة،
   و`white-space: nowrap` يمنعه من الالتفاف. نسمح بالالتفاف ونصغّره — الرقم يبقى
   بالأرقام الجدولية ولا يُقصّ. */
@media (max-width: 699px) {
  .sny-saving {
    /* 🔴 كان `white-space: normal` — أُضيف حين كانت الشارة **نصّاً واحداً** يفيض
       52px خارج بطاقة 163px. وبعد إدخال رمز الريال صارت **ثلاثة عناصر مرنة**
       (نصّ «وفّرت …» · الرمز · النسبة)، فصار الالتفاف يقع **داخل النصّ الأوّل**
       فيهبط المبلغ سطراً وتبقى عملته في السطر الذي فوقه — قِيس 34 من 36 شارة
       على 390px. الصواب: النصّ لا ينكسر داخلياً، والالتفاف بين العناصر. */
    white-space: nowrap;
    flex-wrap: wrap;
    max-inline-size: 100%;
    font-size: .75rem;
    padding: .15rem .45rem;
    line-height: 1.5;
    text-align: center;
    justify-content: center;
  }
  .sny-saving .sny-num { white-space: nowrap; }
}
/* 🔴 بطاقات «ذات صلة» ترث حجم سعر **صفحة المنتج** (30px)، فـ«8,964.35 ر.س»
   يبلغ 189px داخل بطاقة 163px بـ`nowrap` ⇒ يُقصّ. نُعيدها لحجم بطاقة الكتالوج. */
.single-product .wp-block-woocommerce-product-collection .wc-block-product .wc-block-components-product-price,
.single-product .wp-block-woocommerce-product-collection .wc-block-product .wc-block-components-product-price ins,
.single-product .wp-block-woocommerce-product-collection .wc-block-product .wc-block-components-product-price .woocommerce-Price-amount {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.35;
}
.single-product .wp-block-woocommerce-product-collection .wc-block-product .wc-block-components-product-price del,
.single-product .wp-block-woocommerce-product-collection .wc-block-product .wc-block-components-product-price del .woocommerce-Price-amount {
  font-size: .8125rem;
}
/* الحالة الفارغة: مخرجٌ لا حائط */
.wp-block-woocommerce-product-collection-no-results { max-inline-size: 720px; }
.wp-block-woocommerce-product-collection-no-results > p:first-child {
  font-size: 1.0625rem; font-weight: 600; margin-block-end: var(--s4);
}
/* نموذج البحث في الحالة الفارغة كان يمتدّ بعرض الصفحة وزرُّه ضخم — نُقرّبه
   من بحث الترويسة كي لا يبدوا عنصرين من متجرين. */
.wp-block-woocommerce-product-collection-no-results .wp-block-search {
  max-inline-size: 460px; margin-block-end: 0;
}
.wp-block-woocommerce-product-collection-no-results .wp-block-search__button {
  padding-inline: var(--s4); font-size: .9375rem;
  inline-size: auto; min-inline-size: max-content; white-space: nowrap;
}
.sny-empty { margin-block-start: var(--s6); }
.sny-empty__hint { color: var(--muted); font-size: .9375rem; margin: 0 0 var(--s6); }
.sny-empty__cats {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-inline-size: 620px; margin-block-end: var(--s6);
}
@media (min-width: 700px) { .sny-empty__cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sny-empty__cat {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  padding: var(--s3) var(--s4); border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px); background: var(--surface);
  text-decoration: none; color: var(--fg); font-weight: 600; font-size: .9375rem;
  transition: border-color .18s ease, background .18s ease;
}
.sny-empty__cat:hover { border-color: var(--gold); background: var(--surface-2); }
.sny-empty__cat .sny-num { color: var(--muted); font-weight: 500; font-size: .8125rem; }
.sny-empty__all a { font-weight: 600; }

/* ══ رمز الريال السعودي ═══════════════════════════════════════
   الرمز اعتُمد بأمر ملكي 20/02/2025 وأضافه يونيكود 17.0 عند U+20C1 — ولا خطّ
   منتشر يرسمه بعد، فالمحرف الخام يظهر مربّعاً فارغاً. يُرسم من SVG محلّي (ساما)
   بـ`mask` على `currentColor` فيتبع لون النصّ ووزنه في كل موضع.

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

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

/* ══════════════════════════════════════════════════════════════
   حزمة إصلاحات المراجعة — 2026-08-28
   كل قاعدةٍ هنا سببها قياسٌ حيّ مذكورٌ معها، لا ذوق.
   ══════════════════════════════════════════════════════════════ */

/* ① شارة الخصم في صفحة المنتج — 3.41:1 مقيسة (المطلوب 4.5)
   🔴 الجذر: قاعدتا الشارة أعلاه تستهدفان `.wc-block-components-product-sale-badge`
      و`ul.products li.product .onsale` — و**قالب المنتج المفرد لا يطابق أيّاً منهما**،
      فيسقط إلى افتراضيّ ووكومرس: أبيض على زيتونيّ `rgb(149,142,9)`.
      والشبكة تعرضها ذهبيّةً بنصٍّ داكن = 6.98:1 ⇒ تنسيقان لعنصرٍ واحد. */
.wp-block-woocommerce-product-image-gallery .onsale,
.single-product .woocommerce-product-gallery .onsale,
.single-product .product > .onsale,
.single-product span.onsale {
  position: absolute;
  inset-block-start: var(--s3);
  inset-inline-start: var(--s3);
  inset-inline-end: auto;
  z-index: 2;
  margin: 0;
  min-width: auto;
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  padding: .35rem .6rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgb(0 0 0 / .18);
}

/* ② زاوية الشارة — قِيس `left:4px` و`right:207.89px` أي أنّها في الزاوية
   **اليسرى** بينما شعار بطاقة الفئة في اليمنى. قاعدة ووكومرس تكتب `left`
   الفيزيائيّ فتغلب `inset-inline-start` المنطقيّة عند تساوي الخصوصية. */
.wc-block-components-product-sale-badge,
body ul.products li.product .onsale,
.wp-block-woocommerce-product-image-gallery .onsale,
.single-product span.onsale {
  inset-inline-start: var(--s3) !important;
  inset-inline-end: auto !important;
  left: auto !important;
  right: auto !important;
}

/* ③ حلقة التركيز
   🔴🔴 الجذر أعمق من حقل البحث: الحلقة العامّة في `style.css` معرَّفة بـ`:where(...)`
      و**خصوصيّتها صفر**، فأيّ قاعدةٍ من ووكومرس تغلبها. قِيس على حقل البحث أنّ
      الأنماط **مركَّزةً وغيرَ مركَّزة متطابقةٌ حرفيّاً** — لا حلقة ولا ظلّ ولا حدّ. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px;
}
/* الحقل داخل غلافٍ مرسوم: الحلقة على الغلاف أوضح من حلقةٍ داخل حدٍّ قائم */
.wp-block-search__inside-wrapper:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ④ أهداف اللمس — 23–24 هدفاً دون 44×44 مقيسة على 390px،
   أصغرها «حسابي» 16×16 و«فتح القائمة» 24×24 وترقيم الصفحات 9.1×34. */
@media (max-width: 699px) {
  .wc-block-customer-account__link,
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close,
  .sny-theme-toggle,
  .wc-block-cart-item__remove-link,
  .wc-block-components-quantity-selector__button {
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .woocommerce-pagination a.page-numbers,
  .woocommerce-pagination span.page-numbers,
  .wp-block-query-pagination-numbers a,
  .wp-block-query-pagination-numbers span,
  .wp-block-query-pagination-next,
  .wp-block-query-pagination-previous {
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* الروابط النصّية: ارتفاعٌ باللمس لا عرضٌ يفكّك السطر */
  .sny-footer a,
  .woocommerce-breadcrumb a,
  .wp-block-post-terms a { display: inline-block; padding-block: .55rem; }
}

/* ⑤ قائمة الترتيب — العنصر الوحيد الذي يتحكّم به الزائر، وكان أقلّ عناصر
   الموقع تصميماً: `appearance:auto` · `Arial` · حدٌّ رماديّ افتراضيّ · ارتفاع 20px. */
.woocommerce-ordering select,
select.orderby {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: .9375rem;
  color: var(--fg);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-block-size: 44px;
  padding-inline: var(--s4) var(--s8);
  padding-block: 0;
  /* السهم مرسومٌ بالخلفية ويتبع جهة القراءة */
  /* السهم مرسومٌ بمثلّثين من التدرّجات — الواجهة RTL فموضعه يسار الحقل.
     🔴 لا `calc(left + …)`: `left` كلمةٌ مفتاحية لا طول، والقيمة غير الصالحة
        يتجاهلها CSS **بصمت** فيختفي السهم بلا أي خطأ. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  background-position: left 16px top calc(50% - 1px), left 22px top calc(50% - 1px);
}

/* ⑥ معرض صور المنتج — `flex-control-thumbs` قِيس **83×21** والصورة الرئيسية
   **159px داخل شاشة 390px**.
   🔴 السبب: `display:flex` على الحاوية جعل **شريط المصغّرات عنصرَ flex شقيقاً**
      للصورة، فاقتسما العرض. المقصود كان توسيط الصورة — ويُنال بـ`margin` لا بـflex. */
.wp-block-woocommerce-product-image-gallery,
.single-product .woocommerce-product-gallery {
  display: block;
  padding: var(--s6);
}
.wp-block-woocommerce-product-image-gallery img,
.single-product .woocommerce-product-gallery img {
  margin-inline: auto;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
  margin-block-start: var(--s4);
  padding: 0;
  list-style: none;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  inline-size: 64px;
  margin: 0;
}

/* ⑦ شريحة «وفّرت» في صفحة المنتج — قِيست **744px** لنصٍّ من ٢٦ محرفاً،
   لأنّ `flex-basis:100%` ورثتها داخل حاويةٍ صارت كامل العمود. */
.single-product .sny-saving { flex-basis: auto; max-inline-size: max-content; }


/* ⑧ سطر الحقائق تحت السعر (صفحة المنتج) — الفجوة المقيسة بينه وبين شريط
   الطمأنة أعلى المستند كانت ~1,030px، ورسوم الشحن لم تكن تظهر إطلاقاً. */
.sny-price-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-block: var(--s3) var(--s6);
  font-size: .8125rem;
  color: var(--muted);
  line-height: 1.6;
}
.sny-price-facts span { display: inline-flex; align-items: center; gap: .4rem; }
.sny-price-facts span::before {
  content: "";
  inline-size: 5px; block-size: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* ⑨ مخرج المنتج النافد — بديلٌ عن زرّ الشراء الغائب، لا زينةٌ فوقه */
.sny-oos {
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  background: var(--surface-2, var(--surface));
  padding: var(--s6);
  margin-block: var(--s6);
}
.sny-oos__t { margin: 0 0 var(--s2); font-weight: 700; color: var(--fg); }
.sny-oos__d { margin: 0 0 var(--s4); font-size: .875rem; color: var(--muted); }
.sny-oos__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding-inline: var(--s6);
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.sny-oos__btn:hover { background: var(--gold); color: var(--badge-fg, #111214); }
.sny-oos__btn--alt {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
  margin-inline-start: var(--s3);
}


/* ④ النسخ كان يخرج مكرَّراً: `'2,938.26 ر.سر.س'`
   🔴 السبب: نصّ ووكومرس الأصليّ يبقى في الحاوية مصفَّراً بـ`font-size:0`
      (وهو مقصود — حذفه غير آمن على أسطح React)، والبديل المقصوص يحمل «ر.س»
      أيضاً — فالمُحدِّد يلتقط الاثنين. الحلّ منعُ نسخ الأصليّ وحده وإبقاء البديل
      قابلاً للنسخ، فيخرج «ر.س» **مرّة واحدة**.
   🔑 ولا نمنع نسخ الحاوية كلّها: عندها يُنسخ السعر بلا عملةٍ إطلاقاً. */
.woocommerce-Price-currencySymbol.sny-sar-host { user-select: none; -webkit-user-select: none; }
.sny-sar-t { user-select: text; -webkit-user-select: text; }


/* ══ ⑩ صور الكتالوج كانت مقصوصة — أعلى عطبٍ في المراجعة ══════════
   🔴 قِيس على الأرشيف الحيّ: صورة أصلها 276×1200 داخل مربّع 292×292 بـ`cover`
      ⇒ **يُعرض رُبعها الأعلى**، فأوّل بطاقتين شريحةُ بلاستيكٍ أبيض ومستطيلٌ رماديّ.
   🔴🔴🔴 والجذر ليس غياب القاعدة بل **سلفٌ لا وجود له**: القاعدة أعلى الملفّ
      تشترط `.wc-block-product` سلفاً، و**صفر عنصرٍ يحمل هذا الصنف** في القالب
      (فُحص على صفحةٍ حيّة: `wc-block-product"` = 0 بينما `wc-block-product-template`
      و`wc-block-product-image` موجودان). فلم تُطبَّق قطّ، وغلب `cover` الافتراضيّ.
      و`DESIGN.md` يَعِد `contain` صراحةً — فالوعد كان مكتوباً وغير نافذ.
   🔑 وحركة التمرير كانت معطّلةً للسبب نفسه (`.wc-block-product:hover`).
   🔑 التصويب يمرّ عبر حاوية الصورة لا عبر `li img` — وإلّا التقطت القاعدة
      أي صورةٍ متداخلة (شعار علامةٍ أو علم) وفرضت عليها هيئة صورة المنتج.
   ═══════════════════════════════════════════════════════════════ */
.wc-block-components-product-image,
.wp-block-woocommerce-product-image {
  display: block;
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain !important;
  padding: var(--s2);
  box-sizing: border-box;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.wc-block-product-template li:hover .wc-block-components-product-image img {
  transform: scale(1.035);
}
@media (prefers-reduced-motion: reduce) {
  .wc-block-components-product-image img { transition: none; }
  .wc-block-product-template li:hover .wc-block-components-product-image img { transform: none; }
}


/* ⑪ حركة التمرير كانت تعمل في **الفئة** وحدها.
   🔴 الرئيسية تستعمل حلقة ووكومرس الكلاسيكية (`ul.products li.product`) لا بلوكات
      المنتجات، فالتقطتها قاعدة `object-fit` (لأنّ لها فرعاً كلاسيكيّاً) ولم تلتقطها
      قاعدة التمرير. سطحان يعرضان الشيء نفسه ويفترقان في السلوك.
   🔑 وتصحيحٌ لتشخيصٍ سابق: `.wc-block-product` **موجودٌ فعلاً** في صفحة الفئة
      (24 عنصراً بـ`querySelectorAll`). قياسي الأوّل بحث عن `wc-block-product"`
      نصّاً — وهو لا يطابق إلّا إن كان **آخر** صنفٍ في القائمة. **اختبار الصنف
      بالنصّ لا بالمحدِّد يعطي غياباً كاذباً.** */
ul.products li.product:hover a img,
ul.products li.product:hover .wc-block-components-product-image img {
  transform: scale(1.035);
}
@media (prefers-reduced-motion: reduce) {
  ul.products li.product:hover a img { transform: none; }
}
@media (max-width: 699px) {
}


/* ══ ⑬ ضغط الشاشة الأولى على الجوال ══════════════════════════════
   قِيس: شريط الطمأنة 68px + الرأس 179px = **247px من 844** قبل أي محتوى،
   وأوّل بطاقة عند y=509 وأوّل سعر عند y=742 — أي **لا سعر على الشاشة الأولى**.
   ⚠️ وإصلاحُ أهداف اللمس رفع زرّ القائمة من 24 إلى 44px فزاد الرأس 20px —
      حلٌّ صحيحٌ في الوصولية زاد المشكلة الأخرى، فيُعوَّض هنا لا يُنقض هناك. */
.sny-a-short { display: none; }
.sny-a-full { font-weight: inherit; }

@media (max-width: 699px) {
  .sny-a-full { display: none; }
  .sny-a-short { display: inline; font-weight: inherit; }

  /* سطرٌ واحد يمرّ أفقيّاً بدل ثلاثة أسطر تبتلع الشاشة */
  .sny-assure {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: var(--s4);
    padding-block: .35rem;
    line-height: 1.4;
  }
  .sny-assure::-webkit-scrollbar { display: none; }
  .sny-assure span { white-space: nowrap; flex: none; }
  /* الزرّ يبقى 44px للمس، ولا يُخرج الشريط عن سطره */
  .sny-theme-toggle { inline-size: 44px; block-size: 44px; flex: none; margin-inline-start: auto; }

  /* حشو الرأس الرأسيّ: 16px علوّاً وسفلاً كانت 32px من 844 */
  .sny-header { padding-block: .5rem !important; }
  .sny-header__nav { margin-block-start: 0; }
}


/* ══════════════════════════════════════════════════════════════
   إصلاحات القياس — 2026-08-28 (الجولة الثانية)
   كلّها ردٌّ على أرقامٍ مقيسة، لا على ذوق.
   ══════════════════════════════════════════════════════════════ */

/* ⑭ 🔴 الرأس اللاصق **مُعلَنٌ ولا يعمل**.
   قِيس: `position:sticky · top:0 · z-index:20` مضبوطة، ومع ذلك
   `scrollY=1200 ⇒ headerTop=-1144` — يخرج من الشاشة تماماً.
   🔑 السبب: العنصر اللاصق لا يتحرّك إلّا داخل صندوق **أبيه المباشر**، وأبوه
      `header.wp-block-template-part` ارتفاعه **196px = ارتفاع الرأس نفسه بالضبط**
      ⇒ صفر مسافةٍ للالتصاق. الالتصاق ينتقل إلى الأب الذي يمتدّ مع الصفحة. */
header.wp-block-template-part:has(> .sny-header),
header.wp-block-template-part {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
}
.sny-header { position: static; }

@media (max-width: 699px) {

  /* ⑯ مبلغ السلّة في الرأس يوسّع مجموعة الأدوات إلى 196px، فينزل حقل البحث
     وزرّ القائمة سطرين ⇒ الرأس 196px. الأيقونة وحدها تكفي على الجوال،
     والمبلغ يظهر داخل الدرج. */
  .sny-header__tools .wc-block-mini-cart__amount { display: none; }
  .sny-header__tools { gap: var(--s2); }
}


/* ⑰ التنقّل صار داخل صفّ الرأس — يُضبط بالسطر لا بالترتيب */
.sny-header__nav { flex: 0 0 100%; }            /* المكتب: سطرٌ وحده كما كان */
@media (max-width: 699px) {
  .sny-header__nav { flex: 0 0 auto; margin-inline-start: auto; }
  /* حقل البحث يبقى سطراً مستقلّاً — فهو المدخل الأوّل في متجرٍ بـ1,521 صنفاً */
  .sny-header__search { order: 3; flex-basis: 100%; max-inline-size: none; }
  .sny-header__row { gap: var(--s2) var(--s3); }
}


/* ⑲ بطل الرئيسية على الجوال — أوّل سعرٍ فيها عند **1449 من 844** (خارج الشاشة
   بـ605px). حشوه 40px علوّاً وسفلاً، وعنوانه وفقرته وزرّه فوق 300px.
   🔑 لا يُلغى — فهو يقول للزائر أين وقع. يُضغط قدراً لا يُفقده وظيفته. */
@media (max-width: 699px) {
  .sny-hero { padding-block: 1.5rem; }
  .sny-hero__title { margin-block-end: var(--s2); }
  .sny-hero__sub { margin-block-end: var(--s4); font-size: .9375rem; }
  /* عناوين الأقسام: مسافةٌ فوقها أكثر ممّا تحتها — تبقى القاعدة وتضيق القيمة */
  .sny-sec { margin-block: var(--s6) var(--s3); font-size: 1.25rem; }
  .sny-cats { gap: var(--s2) !important; }
  .sny-cats > .sny-cat { padding: var(--s2); }
}


/* ⑳ 🔴🔴 عطبٌ أحدثتُه ثمّ قِسته: نقلُ التنقّل داخل الصفّ **كسر رأس المكتب**.
   الصفّ كان `flexWrap: nowrap`، فـ`flex: 0 0 100%` على التنقّل **لا تُنشئ سطراً
   جديداً** — بل تطلب 1280px بلا انكماش. النتيجة المقيسة:
     · `.sny-header__search` عرضه **0px** (سُحق) ورُسم **فوق أيقونتي السلّة والحساب**
     · فيضٌ أفقيّ **151px** على 1440 في الصفحات الثلاث
     · واسم المتجر اختفى عن المكتب
   ✅ الحلّ في الجذر: الصفّ صار `flexWrap: wrap` في الترميز، فيأخذ التنقّل سطره فعلاً.
   🔑 والدرس: `flex-basis: 100%` **لا تعني سطراً جديداً إلّا مع `flex-wrap: wrap`** —
      وبدونها تعني «اطلب كلّ العرض والتهم إخوتك». */
.sny-header__row { flex-wrap: wrap; }
.sny-header__search { flex: 1 1 260px; }   /* أساسٌ حقيقيّ لا صفر — فلا يُسحق */
@media (min-width: 700px) {
  .sny-header__nav { flex: 0 0 100%; margin-block-start: var(--s2); }
}


/* ㉑ اقتصادٌ محسوب على المكتب — أوّل سعرٍ عند 1,031 من 900،
   والقياس يقول إنّ البطل وحده يوفّر 376px لو حُذف. لا يُحذف ولا يُقصّ جوهره:
   يُقتصَد حشوه وهوامش عناوين الأقسام فقط.
   المقيس: حشو البطل 80+80 · وكل عنوان قسمٍ يكلّف 113.6px (هامش 48 فوق و24 تحت). */
@media (min-width: 700px) {
  .sny-hero { padding-block: 3.5rem; }        /* 80px ⇐ 56px  ⇒ −48px */
  .sny-sec  { margin-block: var(--s8) var(--s4); }  /* 48/24 ⇐ 32/16 — بمفاتيح معرَّفة */
}


/* ㉒ الحشو الجانبيّ على الجوال — أثرٌ قِيس بعد إضافته:
   الصورة ضاقت **163 ⇐ 139**، فالتفّ نصّ السعر سطراً زائداً وطال العنصر
   **72.6 ⇐ 91.8**، فهبط أسفل السعر إلى 831.3 من 844 (الهامش 43.9 ⇒ 12.7px).
   🔑 المطلوب متنفَّسٌ لا خنق: يبقى الحشو الرأسيّ 12px ويضيق الجانبيّ إلى 8px —
      فيسترجع العرض ولا يلتصق النصّ بالحدّ. */
@media (max-width: 699px) {
  .wc-block-product,
  ul.products li.product,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  body ul.products li.product {
    padding: var(--s3) var(--s2);
  }
}


/* ══ ㉓ إصلاحات التدقيق الشامل — 2026-08-28 ══════════════════════
   كلّها من قياسٍ حيّ على صفحاتٍ لم تُقَس في هذه الجلسة. */

/* ① 🔴 السلّة تفيض **44px** على 390 (‏`scrollWidth 434/390`) فتُقطع ٣٢ عنصراً من
   اليمين — منها العنوان والمجاميع **وزرّ «المتابعة لإتمام الطلب»**.
   السبب المقيس: `td.wc-block-cart-item__image` عرضها 80px داخل جدولٍ
   `table-layout: auto` بلغ عرضه **409.9px** في نافذةٍ 390. */
@media (max-width: 699px) {
  /* 🔴🔴 المحاولة الأولى (‏`fixed` + خليّة 72px + `overflow-x: clip`) **حجبت الفيض
     ولم تحلّه**: بقيت الأعمدة **382px في صفٍّ 338**، فابتلع القصُّ 44px من عمود
     الإجمالي ⇒ سعر البند يُقرأ **«52 ﷼» بدل 6,276.52 ﷼**. أي أنّي أتلفتُ معلومةً
     كانت مقروءةً قبل إصلاحي. **حجبُ العَرَض ليس حلّاً — وهو الدرس نفسه الذي تعلّمتُه
     اليوم من `html{overflow-x:hidden}`.**
     ✅ الحلّ: نِسبٌ تجمع 100% بالضبط، فلا يبقى فائضٌ يُقصّ. */
  /* 🔴🔴 نِسب 19/49/32 على `td` **بلا أثرٍ إطلاقاً**: ووكومرس يجعل الصفّ
     `display: grid` بـ`grid-template-columns: 80px 132px` (‏`cart-rtl.css`)،
     فالخلايا **عناصر شبكة** لا خلايا جدول. وقياسٌ بعديّ أعطى مساراتٍ
     `80px 132px 31px 114.9px` ومجموع خلايا **155.7 في صفٍّ 338** — ومعه
     **صورةُ منتجٍ 15×15px** واسمٌ في خمسة أسطر. أي أنّ إصلاحي شوّه ما لم يفض.
     ✅ العلاج على **الشبكة نفسها** لا على الخلايا: صورةٌ ثابتة · اسمٌ مرن · إجماليٌّ بقدره. */
  .wc-block-cart-items__row {
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
    column-gap: var(--s3) !important;
    align-items: start;
  }
  /* 🔑 `content-box` + حشوٌ باقٍ من ووكومرس جعل الخليّة **80px في مسارٍ 64px**
     (تبتلع الفجوة و4px من العمود التالي). لا تصادم اليوم، لكنّه هامشٌ صفريّ
     ينكسر بأيّ تغيّرٍ في الفجوة ⇒ يُغلق بـ`border-box` وحشوٍ مصفَّرٍ بالخصوصية. */
  td.wc-block-cart-item__image,
  .wc-block-cart-item__image {
    inline-size: 64px;
    box-sizing: border-box;
    padding-inline: 0 !important;
  }
  .wc-block-cart-item__image img { inline-size: 64px; block-size: auto; max-inline-size: none; }
  table.wc-block-cart-items { inline-size: 100%; max-inline-size: 100%; }
  /* الإجمالي يلتفّ ولا يُقصّ — رقمٌ ناقصٌ أسوأ من رقمٍ في سطرين */
  .wc-block-cart-item__total,
  .wc-block-cart-item__total .wc-block-components-product-price {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* 🔑 ولا `overflow: clip` هنا: الحجب يُخفي عطباً ولا يمنعه — وهو ما أتلف
     سعر البند في المحاولة السابقة (`52 ﷼` بدل `6,276.52 ﷼`). */
  .wp-block-woocommerce-cart, .wc-block-cart { max-inline-size: 100%; }

  /* 🔴🔴 شريط الطمأنة: الانزلاق **75px** وزرّ الوضع **خارج الشاشة كلّياً**
     (‏−63.1 → −19.1) فغيرُ قابلٍ للمس. والسبب ليس الهامش — بل أنّ الشريط
     `nowrap` وكلّ أبنائه `flex:none` ومحتواه **465px في نافذة 390**.
     و`margin-inline-start: 8px` الذي جرّبتُه **أضاف ثمانيةً** فزاده سوءاً.
     ✅ العلاج بنيويّ: النصوص في غلافٍ يمرّ وحده، والزرّ خارجه فلا ينزلق. */
  .sny-assure { flex-wrap: nowrap; overflow: visible; gap: var(--s2); }
  /* 🔴🔴 **يلتفّ ولا ينزلق** (بُدّل 17/09). مقيسٌ على 390: المحتوى 537px في 314px
     ⇒ «تحويل بنكيّ» و«استرجاع 7 أيّام» **خارجَ الشاشة** (موضعُهما سالب) بلا سهمٍ
     ولا تدرّجٍ يدلّ على وجودِ مزيد، وسفاري لا يمنح المناطقَ المنزلقةَ تركيزاً
     تلقائيّاً ⇒ لا يُوصل إليهما بلوحة المفاتيح أصلاً. وهما رافعتا طمأنةٍ تدفعان الشراء.
     🔑 وعلّةُ `nowrap` الأصليّة كانت زرَّ الوضع ينزلق — **وقد خرج من الغلاف**
     (`flex: none` خارجَه) فزالت العلّةُ وبقي أثرُها. */
  .sny-assure__scroll {
    display: flex;
    flex: 1 1 auto;
    min-inline-size: 0;
    flex-wrap: wrap;
    column-gap: var(--s4);
    row-gap: var(--s1, 4px);
    overflow-x: visible;
  }
  .sny-assure__scroll::-webkit-scrollbar { display: none; }
  .sny-assure .sny-theme-toggle { flex: none; margin-inline-start: 0; }
}

/* ② 🔴 حلقة التركيز الذهبية تقيس **2.28–2.47:1** مقابل خلفياتها — دون 3:1
   المطلوبة (WCAG 1.4.11/2.4.11). الحلقة موجودةٌ في كل مكان **لكنّها باهتة**.
   🔑 حلقتان: داكنةٌ تحمل التباين (18:1 على العاجي) وهالةٌ ذهبية تحمل الهوية —
      فلا نخسر أيّاً منهما. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.wp-block-search__inside-wrapper:focus-within {
  outline: 2px solid var(--fg) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(201 149 46 / .55) !important;
}

/* ③ أهداف اللمس — القاعدة السابقة لم تصل كتل ووكومرس:
   الدفع 10/22 والسلّة 11/21 والحساب 18/25 دون 44×44، وأسوأها **20×20**
   (مربّعات الاختيار وأزرار طرق الشحن والدفع). */
@media (max-width: 699px) {
  .wc-block-components-checkbox__input,
  .wc-block-components-radio-control__input {
    inline-size: 24px;
    block-size: 24px;
  }
  .wc-block-components-checkbox__label,
  .wc-block-components-radio-control__option,
  .wc-block-components-radio-control__label {
    min-block-size: 44px;
    display: flex;
    align-items: center;
  }
  .wc-block-components-quantity-selector__button,
  .wc-block-mini-cart__button,
  .woocommerce-MyAccount-navigation a {
    min-inline-size: 44px;
    min-block-size: 44px;
  }
  .woocommerce-MyAccount-navigation a { display: flex; align-items: center; }
}


/* ══ ㉖ أهداف اللمس — النصف الذي لم يبلغه الإصلاح الأول ══════════
   قِيس بعد `2.5.0`: التسمية صارت 44px ✅ **لكنّ مربّع الاختيار بقي 20×20** —
   ووكومرس يفرضه بـ`width` و`height` و`min-width` معاً، فلم تبلغه قاعدتي.
   والباقي: السلّة 11/21 · الدفع 6/22 · الحساب 11/25 دون 44×44.
   🔑 والقاعدة هنا بـ`!important` عن قصد: هدفُ لمسٍ دون الحدّ **عطب وصولية**،
      وليست تفضيلاً بصريّاً يُترك لحرب الخصوصية. */
@media (max-width: 699px) {
  .wc-block-components-checkbox__input[type="checkbox"],
  .wc-block-components-radio-control__input[type="radio"] {
    inline-size: 24px !important;
    block-size: 24px !important;
    min-inline-size: 24px !important;
    min-block-size: 24px !important;
  }

  /* زرّا الكمية كانا 30×44 — العرض وحده ناقص */
  .wc-block-components-quantity-selector__button {
    min-inline-size: 44px !important;
  }

  /* «إضافة قسيمة» و«+ إضافة الشقة…» كانا بارتفاع **19.6px** — سطرُ نصٍّ عارٍ */
  .wc-block-components-panel__button,
  .wc-block-components-totals-coupon__button,
  .wc-block-components-address-form__address_2-toggle {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* رابط السلّة في الرأس كان 32×32 · وروابط التذييل 42.2 (ناقصةٌ بقليل) */
  a.wc-block-cart-link,
  .wc-block-mini-cart__button {
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sny-footer a,
  .woocommerce-MyAccount-navigation a,
  .wc-block-components-checkout-step a {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---------- شارة «حسب الطلب» — 02/09/2026 ----------
   🔗 سطحان بترميزين: البطاقة الكتليّة والحلقة الكلاسيكية — قاعدةٌ واحدة تخدمهما
      لأن الحقن يضع الشارة **أوّل عنصرٍ داخل البطاقة** في الحالتين.
   🎨 وتقابل شارة التخفيض في الطرف الآخر: تلك ذهبيّةٌ في البداية، وهذه كحليّةٌ
      هادئة في النهاية — فلا تتزاحمان على منتجٍ مخفَّضٍ وحسب الطلب معاً. */
.sny-chip-backorder {
  position: absolute;
  inset-block-start: var(--s3);
  inset-inline-end: var(--s3);
  z-index: 2;
  background: var(--navy);
  color: var(--ivory);
  border-radius: 999px;
  padding: .25rem .625rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(17,18,20,.12), 0 4px 10px -4px rgba(17,18,20,.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sny-chip-backorder { background: var(--gold); color: var(--ink); }
}
:root[data-theme="dark"] .sny-chip-backorder { background: var(--gold); color: var(--ink); }

/* وفي صفحة المنتج: السطر نفسه يُقرأ كحقيقةٍ لا كتحذير. */
.woocommerce-product-details__short-description ~ .stock.available-on-backorder,
p.stock.available-on-backorder {
  color: var(--fg);
  font-weight: 600;
}

/* ---------- شريط الشراء المثبَّت (الجوال) — 02/09/2026 ----------
   لا يظهر إلا حين يغيب الزرّ الأصليّ عن الشاشة، وعلى الجوال وحده:
   في المكتبي يبقى الزرّ مرئيّاً في العمود الجانبيّ فلا حاجة له. */
.sny-buybar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  padding-block-end: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-block-start: 1px solid var(--line);
  box-shadow: 0 -2px 4px rgba(17,18,20,.06), 0 -12px 28px -16px rgba(17,18,20,.35);
  transform: translateY(100%);
  transition: transform .24s cubic-bezier(.16,1,.3,1);
}
.sny-buybar.is-on { transform: translateY(0); }
.sny-buybar__info { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; }
.sny-buybar__title {
  font-size: .8125rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sny-buybar__price { font-weight: 700; font-size: 1.0625rem; color: var(--fg); }
.sny-buybar__price .woocommerce-Price-amount { font-weight: 700; }
.sny-buybar__cta {
  flex: 0 0 auto;
  min-block-size: 44px;
  padding-inline: var(--s6);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sny-buybar__cta:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 899px) {
  .sny-buybar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .sny-buybar { transition: none; }
}

/* ---------- صفحةُ المنتج على الجوّال — ثلاثٌ مقيسةٌ 18/09 (طلب المالك) ----------
   🔴 الشاشةُ الأولى (844px): شريطُ الإعلان 80 · الرأس 216 · مسارُ التنقّل 87 · الصورة 418
      ⇒ الاسمُ عند 937 والسعرُ عند 1026 — **لا اسمَ ولا سعرَ في الشاشة الأولى**، ومكانُهما الوحيدُ
      فيها شريطُ الشراء (x=192–374)، **وختمُ «متجر موثّق» فوقه بالضبط (x=251–372)**.
   ① (الختمُ لم يعد عائماً — نُقل للتذييل بقرار المالك 18/09 · `sny-verify-seal.php`.)
   ② الاسمُ والسعرُ قبل الصورة: العمودُ الثاني `display:contents` فيصير أبناؤه عناصرَ في صفّ
      الأعمدة المرصوف، ويُقدَّم ثلاثةٌ منها بـ`order`. ترتيبُ الـDOM لا يتغيّر (قارئُ الشاشة
      يقرأ الصورةَ ثمّ الاسم) — تبادلٌ بصريٌّ لعنصرين متجاورين لا لتدفّقٍ تفاعليّ.
      و781px عتبةُ ووردبريس نفسُها لرصف الأعمدة.
   ③ مسارُ التنقّل سطرٌ واحد: آخرُه اسمُ المنتج **عقدةُ نصٍّ لا عنصر** ⇒ `font-size:0` على
      الحاوية يُخفيه ويُخفي الفواصلَ النصّيّة، والروابطُ تُعاد لحجمها وفاصلُها `::after`
      `inline-block` (فلا يرثُ خطَّ الرابط). */
@media (max-width: 781px) {
  .single-product .wp-block-columns:has(> .wp-block-column > h1.wp-block-post-title) {
    flex-direction: column;
    row-gap: 0;
  }
  .single-product .wp-block-columns > .wp-block-column:has(> h1.wp-block-post-title) { display: contents; }
  .single-product .wp-block-columns > .wp-block-column:has(> h1.wp-block-post-title) > * { order: 2; }
  .single-product .wp-block-columns > .wp-block-column:has(> h1.wp-block-post-title) > :is(.sny-brandline, h1.wp-block-post-title, .wp-block-woocommerce-product-price) { order: 0; }
  .single-product .wp-block-columns:has(> .wp-block-column > h1.wp-block-post-title) > .wp-block-column:not(:has(> h1.wp-block-post-title)) {
    order: 1;
    margin-block: var(--s4) 0;
  }

  /* وسطرٌ واحدٌ فعلاً: الأقسامُ العميقةُ (أربعُ مراتب) كانت تلتفّ لثلاثة أسطر بعد إخفاء الاسم
     (123px مقيساً) ⇒ لا التفاف، والزائدُ يُسحب أفقيّاً داخل المسار وحده لا في الصفحة. */
  .single-product .woocommerce-breadcrumb {
    font-size: 0;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .single-product .woocommerce-breadcrumb::-webkit-scrollbar { display: none; }
  .single-product .woocommerce-breadcrumb a { font-size: .875rem; }
  .single-product .woocommerce-breadcrumb a:not(:last-of-type)::after {
    content: "\00a0/\00a0";
    display: inline-block;
    color: var(--muted);
  }
}

/* ══════════════════════════════════════════════════════════════
   تحسين التصميم — 02/09/2026
   ردٌّ على ملاحظاتٍ بصرية للمالك: الرأس والفوتر وبطاقة المنتج وعنوانه.
   والقاعدة هنا: **ثِقلٌ للعلامة والمنتج، وخفوتٌ لما حولهما.**
   ══════════════════════════════════════════════════════════════ */

/* ① الرأس — كان يأكل نحو ثلث الشاشة الأولى قبل أن يُرى منتج.
   العلامة كانت أصغر من مربّع البحث، والبحث يبتلع الصفّ. نعكس الثِقل. */
.sny-header { padding-block: var(--s3); }
.sny-header__row { gap: var(--s3) var(--s6); }
.sny-header__brand .wp-block-site-title {
  font-size: 1.5rem;
  letter-spacing: -.015em;
  line-height: 1.3;
}
/* 🗑️ النقطة الذهبية كانت **بديلاً** عن شعارٍ ظننتُه لم يُصمَّم — وقد كان مصمَّماً
   وراقداً في `assets/brand/`. فلمّا حلّ الأصل صارت النقطة زائدةً معلَّقةً بجانبه. */
.sny-header__search { max-inline-size: 420px; }
.sny-header__search .wp-block-search__inside-wrapper {
  border-radius: var(--radius-sm);
  min-block-size: 42px;
}
.sny-header__nav {
  margin-block-start: var(--s3);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--line);
  flex: 0 0 100%;
}
/* 🔴 القاعدةُ أعلاه بلا شرطٍ وتأتي **بعد** ⑰ (`flex: 0 0 auto` للجوّال) فتدهسها ⇒ زرُّ القائمة
   وحده في سطرٍ بحدٍّ وحشوة (57px من شاشة 844 — مقيسٌ 18/09). على الجوّال يعود لسطر الشعار. */
@media (max-width: 699px) {
  .sny-header__nav {
    flex: 0 0 auto;
    margin-inline-start: auto;
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: 0;
  }
}
.sny-header__nav .wp-block-navigation { gap: var(--s2) var(--s6); }
.sny-header__nav a { color: var(--muted); font-weight: 600; }
.sny-header__nav a:hover,
.sny-header__nav .current-menu-item > a,
.sny-header__nav .current-menu-ancestor > a { color: var(--fg); }

/* شريط الطمأنة: معلومةٌ لا عنوان — يخفت ليصعد المنتج */
.sny-assure { font-size: .8125rem; padding-block: var(--s2); }

/* ② بطاقة المنتج — كانت ترتفع وتنخفض بحسب وجود الخصم فتتكسّر الصفوف.
   العنوان سطران دائماً، والزرّ ملتصقٌ بالقاع، فتستوي البطاقات مهما اختلف محتواها. */
.wc-block-product .wp-block-post-title,
ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: 2.9em;
  line-height: 1.45;
}
.wc-block-product .wp-block-button,
.wc-block-product .wc-block-components-product-button,
ul.products li.product a.button { margin-block-start: auto; }

/* 🔑 وتراجعتُ عن «تهدئة» الزرّ: القاعدة الأصلية (زرٌّ مصمَتٌ كامل العرض بذهبٍ
   عند التمرير) أمتنُ ممّا كتبت، وتعديلي جرّده من حدّه فصار نصّاً عارياً —
   قِيس: `border-width: 0px` على العنصر الحيّ. الأصل يبقى. */

/* ③ عنوان المنتج — كان يبلغ نحو 48px فيزاحم المعرض ويدفع السعر تحت الطيّ. */
.wp-block-woocommerce-single-product .wp-block-post-title,
.single-product .wp-block-post-title,
.product_title {
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1.45;
  text-wrap: balance;
}

/* ④ الفوتر — العناوين كانت بحجم الروابط فلا تُقرأ كعناوين، والسطور متلاصقة. */
.sny-footer h3 {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold);
  margin-block-end: var(--s3);
}
.sny-footer p,
.sny-footer li { line-height: 2; }
.sny-footer__addr { max-inline-size: 30ch; }
.sny-footer__base { font-size: .8125rem; }

/* الزرّ كان مصمَتاً لكنّه ~130px في بطاقةٍ عرضها ~300px، لأن **حاويته** لا تمتدّ.
   قِيس على العنصر الحيّ: `inline-size:100%` على الزرّ لا يفيد وحاويته `auto`. */
.wc-block-product .wc-block-components-product-button,
.wc-block-product .wp-block-button { inline-size: 100%; }
.wc-block-product .wc-block-components-product-button__button { inline-size: 100%; }
/* 🔑 والحاوية `display:flex; justify-content:center` ⇒ الزرّ عنصرٌ مرنٌ لا يتمدّد
   مهما كتبنا `inline-size:100%`. التمدّد هو الحلّ لا العرض. */
.wc-block-product .wc-block-components-product-button > .wc-block-components-product-button__button,
.wc-block-product .wp-block-button > .wp-block-button__link { flex: 1 1 100%; }
/* ولم يفِ `flex:1 1 100%` (قِيس: grow=1 · basis=100% والعرض 130px) — فأرضيّةٌ صريحة. */
.wc-block-product .wc-block-components-product-button__button { min-inline-size: 100%; }

/* (أُزيلت قاعدة الدائرة: القالب يملك قاعدةً لـ`.sny-cat__img img` سبقتني) */


/* ---------- إظهار صورة الفئة — 02/09/2026 ----------
   🔑 كانت `.sny-cat__img { display:none }` قراراً سابقاً صحيحاً **حين كانت الحاوية فارغة**.
      وقد صارت تحمل صورةً حقيقيةً من منتجات الفئة نفسها (مقيس: 5 صور تُحمَّل)، فتُظهر. */
.sny-cats > .sny-cat > .sny-cat__img { display: block; margin: 0 auto var(--s3); max-inline-size: 120px; }
.sny-cats > .sny-cat > .sny-cat__img img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  inline-size: 100%;
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  padding: var(--s2);
}

/* ══ إصلاحات صفحة المنتج — 02/09/2026 (كلّها ردٌّ على أرقامٍ مقيسة) ══ */

/* ① 🔴🔴 تجاوزٌ أفقيّ 139px على الجوال (390 ⇒ scrollWidth 529) سببه صفّ
   «رمز الصنف · التصنيف · الوسوم» المفروض عليه ألّا يلتفّ. مُثبتٌ بالبتر: إخفاؤه
   يُهبط العرض 138px. وهو نفسه الذي كان **يعترض النقر على تبويب المواصفات**. */
.wp-block-woocommerce-product-meta > .wp-block-group.is-nowrap,
.wp-block-woocommerce-product-meta .is-nowrap {
  flex-wrap: wrap !important;
  row-gap: var(--s2);
}
.wc-block-components-product-sku { max-inline-size: 100%; overflow-wrap: anywhere; }

/* ② 🔴 صورة المنتج الرئيسية كانت تتبع نسبة المصدر: مصدرٌ 500×146 ⇒ عُرضت 462×135
   داخل صندوقٍ 506px = 26.7% منه، وتحتها 82px فراغ. النسبة تُفرض ولا تُترك للمصدر. */
.wp-block-woocommerce-product-image-gallery .wc-block-components-product-image img,
.woocommerce-product-gallery__image img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  inline-size: 100%;
  block-size: auto;
  background: #FFFFFF;
}

/* ③ المصغّرات كانت بشفافية 0.5 فتُقرأ «معطّلة». التمييز بإطارٍ لا بتعتيم الباقي. */
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs li img,
.flex-control-thumbs li img { opacity: 1 !important; border: 2px solid transparent; border-radius: var(--radius-sm); }
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs li img.flex-active,
.flex-control-thumbs li img.flex-active { border-color: var(--gold); }

/* ---------- مواصفاتٌ تحت السعر ---------- */
.sny-specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s1) var(--s4);
  margin: var(--s3) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: .9375rem;
}
.sny-specs dt { color: var(--muted); margin: 0; }
.sny-specs dd { margin: 0; font-weight: 600; }

/* ---------- نسبة عمودَي صفحة المنتج — 02/09/2026 ----------
   🔴 مقيس: المعرض 512px والنصّ 744px — **الصورة هي ما يبيع وهي العمود الأصغر**،
      والعنوان يمتدّ 232px أبعد من حافة الصورة فيُقرأ تزاحماً (ولا تقاطع هندسيّ). */
@media (min-width: 900px) {
  .wp-block-columns > .wp-block-column:has(.wp-block-woocommerce-product-image-gallery) {
    flex-basis: 54% !important;
    flex-grow: 0;
  }
  .wp-block-columns > .wp-block-column:has(> .wp-block-post-title) {
    flex-basis: 46% !important;
  }
}

/* ---------- الجوال: السعر والزرّ يصعدان إلى الشاشة الأولى ----------
   🔴 مقيس: السعر عند 918–1048 والشاشة 844 ⇒ **لا سعرَ ولا زرَّ بلا تمرير** في 3 من 3.
      والمعرض وحده يبتلع أكثر من نصف الشاشة. */
@media (max-width: 899px) {
  /* 🔑 وقياسٌ بعد أوّل محاولة: 42vh لم تكفِ — فرضُ النسبة المربّعة رفع الصورة،
     فنزل السعر من 918 إلى 1145. الحدّ 30vh يعيده لأعلى بلا أن تعود الصورة شريطاً. */
  /* 🔑 والحاكم قاعدةٌ سابقة أعلى تخصيصاً: `.single-product .woocommerce-product-gallery img`
     بـ`min(48vh,420px)` — فنعدّلها بمحدِّدها نفسه بدل مصارعتها بمحدِّدٍ أضعف. */
  .single-product .woocommerce-product-gallery img,
  .wp-block-woocommerce-product-image-gallery img,
  .woocommerce-product-gallery__image img { max-block-size: min(34vh, 300px); }
  .wp-block-woocommerce-product-image-gallery .flex-control-thumbs li,
  .flex-control-thumbs li { max-inline-size: 44px; }
  .wp-block-woocommerce-product-image-gallery { margin-block-end: var(--s3); }
}

/* ---------- شريط منتجات البطل — 02/09/2026 ---------- */
.sny-hero__strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-block-start: var(--s6);
  max-inline-size: 900px;
  margin-inline: auto;
}
@media (min-width: 760px) { .sny-hero__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sny-hero__pick {
  display: flex; flex-direction: column; gap: var(--s1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3);
  text-decoration: none;
  color: var(--fg);
  transition: box-shadow .22s cubic-bezier(.16,1,.3,1), border-color .22s, transform .22s cubic-bezier(.16,1,.3,1);
}
.sny-hero__pick:hover { box-shadow: var(--shadow-raised); border-color: var(--gold); transform: translateY(-2px); }
.sny-hero__pick-img img {
  aspect-ratio: 1 / 1; object-fit: contain; inline-size: 100%;
  background: #FFFFFF; border-radius: var(--radius-sm);
}
.sny-hero__pick-name {
  font-size: .8125rem; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sny-hero__pick-price { font-weight: 700; font-size: .9375rem; }
.sny-hero__pick-price del { display: none; }   /* في البطل يكفي السعر الحاليّ */

/* ══════════════════════════════════════════════════════════════
   الاتجاه «الفاخر الواثق» — 02/09/2026 (قرار المالك بعد نموذجين)
   الذهب والكحليّ هويّة، و**الزمرّديّ لونٌ ثالثٌ للفعل** — لا للزينة.
   والقاعدة: مساحةٌ أوسع · صورٌ أكبر · خطٌّ أخفّ · إطارٌ بدل الظلّ.
   ══════════════════════════════════════════════════════════════ */
:root { --jade: #14675E; --jade-fg: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --jade: #3FA894; --jade-fg: #04241F; } }
:root[data-theme="dark"] { --jade: #3FA894; --jade-fg: #04241F; }

/* ① الرأس كحليٌّ داكن — يعطي المتجر ثِقلاً من أوّل نظرة */
.sny-header,
header.wp-block-template-part:has(> .sny-header) { background: var(--navy); }
.sny-header,
.sny-header a,
.sny-header .wp-block-site-title a { color: var(--ivory); }
.sny-header { border-block-end-color: rgba(248,245,238,.14); }
.sny-header__nav { border-block-start-color: rgba(248,245,238,.14); }
.sny-header__nav a { color: rgba(248,245,238,.74); }
.sny-header__nav a:hover,
.sny-header__nav .current-menu-item > a,
.sny-header__nav .current-menu-ancestor > a { color: var(--ivory); }
/* 🗑️ كان هنا `box-shadow: inset 0 -2px 0 var(--gold)` يميّز القسم الحاليّ بخطٍّ تحته.
   🔴 وفي المنسدلة الرابطُ بعرض القائمة كاملاً ⇒ الخطّ يمتدّ عرضها فيقرأ **فاصلاً**
      بين البنود لا تمييزاً لبند (شوهد في لقطة المالك تحت «ثلاجة»). أُزيل بأمره.
   ⇒ التمييز يبقى باللون: الحاليّ عاجيٌّ كامل، وما عداه عاجيٌّ بـ74%. */
.sny-header__nav a:hover { color: var(--gold); }
.sny-header__search .wp-block-search__inside-wrapper {
  background: rgba(248,245,238,.07);
  border-color: rgba(248,245,238,.22);
}
.sny-header__search .wp-block-search__input { color: var(--ivory); }
.sny-header__search .wp-block-search__input::placeholder { color: rgba(248,245,238,.6); }
.sny-header__search .wp-block-search__button { color: var(--ivory); }
.sny-header__tools a, .sny-header__tools button { color: var(--ivory); }
.sny-header .sny-theme-toggle { color: var(--ivory); border-color: rgba(248,245,238,.22); }

/* ② الشبكة: ثلاثٌ في الصفّ بدل أربع — الصورة تكبر والصفحة تتنفّس */
@media (min-width: 1080px) {
  .wc-block-product-template,
  ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ③ البطاقة: إطارٌ رفيع بدل الظلّ، وصورةٌ أكبر */
.wc-block-product,
ul.products li.product {
  box-shadow: none;
  border-radius: 2px;
  padding: 0 0 var(--s4);
  border-color: var(--line);
  transition: border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.wc-block-product:hover,
ul.products li.product:hover { box-shadow: none; border-color: var(--gold); transform: none; }
.wc-block-product .wc-block-components-product-image,
ul.products li.product a img { border-radius: 0; margin-block-end: var(--s3); }
.wc-block-product > *:not(.wc-block-components-product-image):not(.sny-chip-backorder),
ul.products li.product > *:not(a:first-of-type) { padding-inline: var(--s4); }

/* ④ الفعل زمرّديّ — والأسود يتنحّى */
.wc-block-product .wc-block-components-product-button__button,
ul.products li.product a.button,
.single_add_to_cart_button,
.wc-block-components-checkout-place-order-button,
.wp-block-button__link.wp-element-button {
  background: var(--jade);
  border-color: var(--jade);
  color: var(--jade-fg);
  border-radius: 2px;
}
.wc-block-product .wc-block-components-product-button__button:hover,
ul.products li.product a.button:hover,
.single_add_to_cart_button:hover { background: var(--navy); border-color: var(--navy); color: var(--ivory); }

/* ⑤ خطٌّ أخفّ ومساحةٌ أوسع */
body { font-size: 16px; line-height: 1.85; }
.wc-block-product .wp-block-post-title,
ul.products li.product .woocommerce-loop-product__title { font-weight: 500; font-size: 15.5px; }
/* عناوين الأقسام بخطّ المتجر (Expo) — كانت «Noto Kufi Arabic» وهو غير محمّل فتُرسم بـSegoe UI. */
.sny-sec { font-family: inherit; }

/* ⑥ الفواصل: خطٌّ رفيع بجانب العنوان بدل عنوانٍ عائم */
.sny-sec { display: flex; align-items: center; gap: var(--s4); }
.sny-sec::after { content: ""; flex: 1; block-size: 1px; background: var(--line); }
/* والرئيسية كانت تبقى أربعةً لأن قاعدتها `body ul.products … !important` أعلى تخصيصاً —
   تُطابَق بمحدِّدها نفسه لتستوي مع المتجر على ثلاث. */
@media (min-width: 1080px) {
  .woocommerce ul.products, .woocommerce-page ul.products, body ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
/* وبطاقات البطل تتبع النسق نفسه: إطارٌ رفيع بلا ظلّ */
.sny-hero__pick { border-radius: 2px; box-shadow: none; }
.sny-hero__pick:hover { box-shadow: none; border-color: var(--gold); transform: none; }
.sny-hero__pick-img img { border-radius: 0; }

/* ---------- البطل بعمودين (الاتجاه الفاخر) — 02/09/2026 ----------
   النصّ في عمودٍ والمنتجات في عمودٍ بجانبه. وبلا حاويةٍ للنصّ نستعمل الشبكة نفسها:
   العنوان والسطر والزرّ في العمود الأوّل صفّاً صفّاً، والشريط يمتدّ عليها في الثاني. */
@media (min-width: 900px) {
  .sny-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 🔑 صفٌّ رابعٌ فارغ يمتصّ فائض ارتفاع الصورة، فيتراصّ العنوان والسطر والزرّ
       بدل أن تتمدّد صفوفهم وتتباعد (قِيس: بطلٌ 881px ونصٌّ مبعثرٌ فيه). */
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--s12, 48px);
    align-items: start;
    text-align: start;
    padding-block: var(--s12, 48px);
  }
  .sny-hero__title { grid-column: 1; grid-row: 1; margin-block-end: var(--s3); }
  .sny-hero__sub   { grid-column: 1; grid-row: 2; margin-inline: 0; }
  .sny-hero__cta   { grid-column: 1; grid-row: 3; justify-content: flex-start; margin-block-start: var(--s4); }
  /* 🔑 وأربعُ بطاقاتٍ في العمود الثاني تمدّ صفوف النصّ فتتباعد أجزاؤه (قِيس: بطلٌ 881px
     والنصّ مبعثرٌ فيه). فمنتجٌ واحدٌ كبير بجانب النصّ — كما في النموذج المختار،
     والأربعة تبقى على الجوال حيث يتراصّ الكلّ رأسيّاً. */
  .sny-hero__strip {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-block-start: 0;
    grid-template-columns: 1fr;
    max-inline-size: 420px;
    margin-inline: 0;
  }
  .sny-hero__pick:nth-child(n+2) { display: none; }
  .sny-hero__pick-name { font-size: .9375rem; }
  .sny-hero__pick-price { font-size: 1.25rem; }
}

/* ---------- لمسات الاتجاه الفاخر — 02/09/2026 ---------- */
.sny-card-cat {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--jade);
}

/* شارة الخصم: كانت قرصاً ذهبيّاً مصمتاً يصرخ في كلّ بطاقة.
   في الاتجاه الفاخر تكفي كلمةٌ صغيرة بحدٍّ ذهبيّ. */
.wc-block-components-product-sale-badge,
ul.products li.product .onsale {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  box-shadow: none;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 2px;
  padding: 2px 8px;
}

/* «وفّرت كذا» كان لوحاً بيج عريضاً — يصير سطراً زمرّديّاً هادئاً. */
.sny-saving {
  background: transparent;
  color: var(--jade);
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
}
.sny-saving .sny-num { color: var(--muted); font-weight: 500; }

/* السعر: أضخم قليلاً وبأرقامٍ متساوية العرض */
.wc-block-components-product-price,
ul.products li.product .price { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.wc-block-components-product-price ins,
ul.products li.product .price ins { font-weight: 700; }

/* ---------- الشعار — 02/09/2026 ---------- */
.sny-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  line-height: 0;                 /* الصور لا تحتاج مساحة سطرٍ تحتها */
}
.sny-brand__mark { block-size: 38px; inline-size: auto; }
.sny-brand__word { block-size: 33px; inline-size: auto; }

/* الفوتر يحتمل شعاراً أكبر قليلاً — وهو ختامُ الصفحة لا رأسُها المزدحم */
.sny-brand-slot--light .sny-brand__mark { block-size: 40px; }
.sny-brand-slot--light .sny-brand__word { block-size: 34px; }

/* 🔑 لمسةٌ لا تُفقد الشعار وضوحه: يسطع قليلاً عند التمرير بلا تلوينٍ عليه */
.sny-brand { transition: opacity .15s ease; }
.sny-brand:hover { opacity: .82; }

@media (max-width: 699px) {
  .sny-brand__mark { block-size: 28px; }
  .sny-brand__word { block-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { .sny-brand { transition: none; } }

/* ---------- خطّ `ins` تحت الأسعار — 02/09/2026 ---------- */
/* 🔴 `<ins>` يضع المتصفّحُ تحته خطّاً افتراضاً، وسلّةُ ووكومرس تلفّ **سعر التخفيض**
   به. وكانت القاعدة المانعة مقصورةً على `ul.products li.product .price ins` —
   أي الحلقة الكلاسيكية وحدها — فبقي الخطّ على سعر البطل وعلى أسعار الكتل.
   🔑 والدرس نفسه المتكرّر في هذا المتجر: **سطحان للترميز، فأصلح الاثنين لا الذي رأيته.** */
ins,
.price ins,
.woocommerce-Price-amount ins,
.wc-block-components-product-price ins,
.sny-hero__pick-price ins,
.sny-sticky__price ins { text-decoration: none; }

/* ---------- 🔴 إصلاحُ انفجار الشعار — 02/09/2026 ---------- */
/* قِيس: ارتفاع الرأس **593px** بدل 46 في صفحات الأقسام والمنتجات، وإزاحةُ تخطيطٍ
   **0.6722** (الهدف 0.1) — أي أوّلُ شاشةٍ كاملةٍ شعارٌ عملاق والمنتجاتُ كلّها تحت الطيّ.
   🔑 والجذر تعارضُ أسبقيّة، لا خطأ قيمة:
       `.woocommerce-page img { height: auto }`   أسبقيّة (0,1,1) ⇒ تفوز
       `.sny-brand__mark      { block-size: 38px }` أسبقيّة (0,1,0) ⇒ تخسر
   والرئيسيةُ نجت لأنّ جسمها لا يحمل صنف ووكومرس — فبدا الشعارُ سليماً وهو مكسور
   في السطحين الأكثر زيارة. 🔑🔑 **قِس الصفحة التي لم تفتحها، لا التي فتحتَها.**
   والعلاجُ رفعُ الأسبقيّة بأبٍ قائمٍ أصلاً، لا `!important`. */
.sny-brand-slot .sny-brand__mark { block-size: 38px; inline-size: auto; }
.sny-brand-slot .sny-brand__word { block-size: 33px; inline-size: auto; }
.sny-brand-slot--light .sny-brand__mark { block-size: 40px; }
.sny-brand-slot--light .sny-brand__word { block-size: 34px; }
@media (max-width: 699px) {
  .sny-brand-slot .sny-brand__mark { block-size: 28px; }
  .sny-brand-slot .sny-brand__word { block-size: 25px; }
}

/* ---------- 🔴 تجاوزُ 7px على الجوال — 02/09/2026 ---------- */
/* قِيس: `div.wp-block-button` داخل بطاقة الكتل عرضُه **193px** وأبوه **163px**:
   `inline-size: 100%` تُحسب على صندوق المحتوى (161px) ثمّ يُضاف الحشو 16+16 **خارجه**
   لأنّ `box-sizing` هناك `content-box`. فيبرز 30px، ويظهر منها 7 خارج الشاشة.
   🔑🔑🔑 والسبب الجذريّ **لا الحشو بل السطح**: السطر 712 يضبط
   `body ul.products li.product * { box-sizing: border-box }` — **للحلقة الكلاسيكية
   وحدها**، وشبكةُ الكتل بلا نظير. وهو ثالثُ عطبٍ اليوم جذرُه واحد
   (خطُّ `ins` · انفجارُ الشعار · هذا) ⇒ **سطحان للترميز: أصلح الاثنين معاً دائماً.** */
.wc-block-product,
.wc-block-product * { box-sizing: border-box; }

/* ---------- تباينُ الذهب والبؤرة — 02/09/2026 ---------- */
/* 🔴 قِيس: الذهب `#C9952E` على الأبيض **2.68:1** وعلى العاجيّ **2.47:1** — والمطلوب 4.5
   للنصّ العاديّ. و16px/700 **ليس** نصّاً كبيراً (العتبة ≥18.66px عريض) فلا يُعفى بـ3:1.
   🔑 والذهبُ نفسه **على الكحليّ ناجحٌ 6.69** ⇒ العطبُ في الأسطح الفاتحة لا في اللون،
      فلا نُغيّر لون العلامة بل نشتقّ منه **حبراً** لتلك الأسطح وحدها:
      `#906A21` — الصبغةُ والتشبّعُ نفساهما، أُنزلت الإضاءةُ حتى بلغ 4.92 على الأبيض
      و4.52 على العاجيّ (محسوبٌ لا مقدَّر). */
:root { --gold-ink: #906A21; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold-ink: var(--gold); } }
:root[data-theme="dark"] { --gold-ink: var(--gold); }

.wc-block-components-product-sale-badge,
ul.products li.product .onsale { color: var(--gold-ink); border-color: var(--gold-ink); }
.sny-footer h3,
.sny-footer .wp-block-heading { color: var(--gold-ink); }
.sny-card-cat { color: var(--jade); }   /* الزمرّديّ على الأبيض 6.4:1 — يبقى */

/* 🔴 ومؤشّرُ البؤرة داخل الرأس الكحليّ كان `#111214` على `#071827` = **1.04:1** —
   أي غيرُ مرئيٍّ عمليّاً لمن يتنقّل بلوحة المفاتيح. وخارج الرأس سليمٌ 18.74.
   العلاج: ذهبٌ على الكحليّ (6.69) مع إزاحةٍ تفصله عن الحرف. */
/* 🔑 والقاعدة العامّة للبؤرة تحمل `!important` وتلوّن الحلقة بـ`--fg` — وهو الأسودُ
   في الوضع الفاتح. فداخل الرأس الكحليّ صارت **أسودَ على كحليّ = 1.04:1**.
   ⚠️ ومحاولةٌ أولى بقاعدةٍ بلا `!important` **خسرت الأسبقيّة ولم تغيّر شيئاً** —
      كشفه القياس بعد النشر، لا قراءةُ الملفّ. فالعلاجُ مطابقةُ قوّتها لا مجاورتُها.
   🔑 والتصميمُ نفسه محفوظ: حلقةٌ تحمل التباين وهالةٌ ذهبية تحمل الهوية — إلا أنّ
      الحلقة على الداكن **عاجيّة** لا سوداء. */
.sny-header a:focus-visible,
.sny-header button:focus-visible,
.sny-header input:focus-visible,
.sny-header select:focus-visible,
.sny-header textarea:focus-visible,
.sny-header [tabindex]:focus-visible {
  outline-color: var(--ivory) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- صفحة المنتج: بنيةُ عناية الهواء بمعطيات سنيح — 02/09/2026 ---------- */

/* ① سطر الماركة فوق العنوان */
.sny-brandline { margin: 0 0 6px; }
.sny-brandline__b {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line-strong, #D8D2C4);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg);
  text-decoration: none;
  background: var(--surface, #fff);
}
.sny-brandline__b:hover { border-color: var(--gold); color: var(--gold-ink); }

/* ② بطاقة المواصفات — الرقمُ هو ما يقرّر به مشتري الأجهزة، فيُكبَّر */
.sny-spec {
  margin: var(--s4, 16px) 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface, #fff);
}
.sny-spec__h {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
}
.sny-spec__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin-block-end: 10px;
}
.sny-spec__tile {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  text-align: center;
}
.sny-spec__n { font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sny-spec__u { font-size: 12px; color: var(--muted); }
.sny-spec__l { font-size: 11.5px; color: var(--muted); margin-block-start: 3px; }

.sny-spec__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sny-spec__chips li {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 12.5px;
}
.sny-spec__ck { color: var(--muted); }
.sny-spec__cv { font-weight: 600; }

/* ③ قائمة الطمأنة — أربعُ حقائقَ مقيسة، بأيقونةٍ تفصل السطر عن السطر */
.sny-trust { list-style: none; margin: var(--s4, 16px) 0 0; padding: 0; display: grid; gap: 8px; }
.sny-trust__i { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; }
.sny-trust__ic {
  flex: 0 0 22px;
  inline-size: 22px; block-size: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--jade) 12%, transparent);
  color: var(--jade);
  font-size: 12px;
}
.sny-trust__d { color: var(--muted); }

@media (max-width: 699px) {
  .sny-spec { padding: 12px; }
  .sny-spec__n { font-size: 1.3rem; }
}

/* بلاطةٌ وحيدةٌ كانت تتمدّد بعرض البطاقة (`1fr` مع `auto-fit`) فتبدو لوحاً فارغاً.
   المرونةُ تُبقيها بحجمها الطبيعيّ وتصطفّ الاثنتان والثلاثُ بلا تمدّد. */
.sny-spec__tiles { display: flex; flex-wrap: wrap; }
.sny-spec__tile { flex: 0 1 auto; min-inline-size: 118px; }

/* شريحةُ الماركة فوق العنوان — لا تحت السعر */
.sny-brandline { margin-block-end: 8px; }

/* رابطُ التخطّي: قصٌّ بـ`clip-path` لا إزاحةٌ خارج الشاشة — الإزاحةُ تمدّ المستند
   في صفحةٍ عربيّة (درسُ صفحة حملة درب الطالب) والقصُّ لا يمدّه.
   ⚠️ **وتصحيحٌ:** ظننتُ أنّ هذا سببُ تجاوزِ 1px في صفحة المنتج، **فقاسَ الاختبارُ
   أنّه ليس هو** — بقي التجاوزُ 1 بعد إخفاء الرابط تماماً. السببُ الحقيقيّ أسفلَه.
   والقاعدةُ تبقى لأنّها أصحّ في ذاتها، لا لأنّها عالجت ذاك العطب. */
.skip-link.screen-reader-text:not(:focus) {
  position: absolute !important;
  inset-inline-start: 0 !important;
  inset-block-start: 0 !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}


/* 🔴 تجاوزُ 1px في صفحة المنتج — والسببُ `box-sizing` للمرّة **الثالثة** اليوم.
   قِيس: `.woocommerce-product-gallery` عرضُه المعلَن 292px وحشوُه 24+24 و`content-box`
   ⇒ المرسوم **342px** في حاويةٍ 342 يبدأ عند `L-1`. وأربعةُ فروضٍ سبقته سقطت
   بالاختبار (رابطُ التخطّي · `zoomImg` · قصُّ المعرض · مناطقُ قارئ الشاشة) —
   وكلٌّ منها كان يبدو معقولاً. ✅ ومع `border-box` قِيس التجاوزُ **صفراً**.
   🔑🔑🔑 والجذرُ واحدٌ في ثلاثتها: **`box-sizing` مضبوطٌ لأسطحٍ دون أخرى** —
   الحلقةُ الكلاسيكية نعم، وشبكةُ الكتل لا، ومعرضُ المنتج لا. */
.woocommerce-product-gallery,
.woocommerce-product-gallery * { box-sizing: border-box; }

/* ---------- مقدّرُ الشحن — 03/09/2026 ---------- */
.sny-ship {
  margin: var(--s4, 16px) 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface, #fff);
}
.sny-ship__h { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.sny-ship__row { display: flex; gap: 8px; }
.sny-ship__in {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 42px;              /* هدفُ لمسٍ يبلغ 44 مع الحدّ */
  padding-inline: 10px;
  border: 1px solid var(--line-strong, #D8D2C4);
  border-radius: 3px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.sny-ship__btn {
  flex: 0 0 auto;
  min-block-size: 44px;
  padding-inline: 18px;
  border: 1px solid var(--jade);
  border-radius: 3px;
  background: var(--jade);
  color: var(--jade-fg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sny-ship__btn:hover { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.sny-ship__out { margin: 8px 0 0; font-size: 13px; min-block-size: 1.2em; }
.sny-ship__out.is-ok   { color: var(--jade); font-weight: 600; }
.sny-ship__out.is-warn { color: var(--danger, #B3261E); }

/* ---------- مقاسات وبدائل — 03/09/2026 ---------- */
.sny-alts { margin-block-start: var(--s6, 32px); }
.sny-alts__h { margin: 0 0 var(--s4, 16px); font-size: 1.35rem; font-weight: 700; }
.sny-alts ul.products { margin: 0; }

/* ---------- شريطُ الميزات الأربع (الرئيسية) — 03/09/2026 ---------- */
.sny-feat { border-block-end: 1px solid var(--line); background: var(--surface, #fff); }
.sny-feat__in {
  max-inline-size: 1280px;
  margin-inline: auto;
  padding: 12px var(--s4, 16px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sny-feat__t { display: flex; gap: 10px; align-items: flex-start; min-inline-size: 0; }
.sny-feat__ic {
  flex: 0 0 28px; inline-size: 28px; block-size: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--jade) 12%, transparent);
  color: var(--jade);
}
.sny-feat__ic svg { inline-size: 16px; block-size: 16px; }
.sny-feat__x { display: grid; gap: 1px; min-inline-size: 0; }
.sny-feat__x b { font-size: 13.5px; font-weight: 700; }
.sny-feat__d { font-size: 12px; color: var(--muted); line-height: 1.45; }

@media (max-width: 899px) { .sny-feat__in { grid-template-columns: repeat(2, 1fr); } }
/* 🔴 قِيس 06/09/2026 على شاشة 390×844: الشريطُ ينقلب أربعةَ صفوفٍ = **170px**،
   فيبدأ عنوانُ البطل عند 485 من 844 — أي **55% من أوّل شاشةٍ تُنفق قبل الرسالة**،
   وصورةُ البطل تنكمش إلى 115×115 ويغطّيها شريطُ الكوكيز. فصار صفّاً واحداً يُمرَّر
   بالإصبع: البنودُ الأربعةُ كلُّها باقيةٌ ولا يُخفى منها شيء، والارتفاعُ ~44px. */
@media (max-width: 599px) {
  .sny-feat__in {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    padding-block: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sny-feat__in::-webkit-scrollbar { display: none; }
  .sny-feat__t { flex: 0 0 auto; scroll-snap-align: start; align-items: center; }
  .sny-feat__d { display: none; }   /* على الجوال العنوانُ وحده — والتفصيل في صفحة المنتج */
}

/* روابطُ التواصل في الشريط الرفيع (الرئيسية) — ترث لونَ الشريط ولا تُسطَّر إلا بالتمرير */
.sny-assure__scroll a { color: inherit; text-decoration: none; }
.sny-assure__scroll a:hover { text-decoration: underline; }

/* ---------- ③ أهدافُ اللمس — 03/09/2026 ---------- */
/* 🔴 قِيس على صفحة المنتج: عنقودُ الوسوم **20.6×43.5 متجاورة** — أصغرُ من الحدّ
   الموصى به (44×44) وملتصقةٌ ببعضها، فالنقرُ يصيب جارتَها. وحقلُ الكمّية في السلة 40×44.
   🔑 والعلاجُ حشوٌ وتباعدٌ لا تكبيرُ خطّ — فالمظهرُ يبقى هادئاً والهدفُ يكبر. */
.product_meta a,
.tagged_as a,
.posted_in a {
  display: inline-block;
  min-block-size: 32px;
  padding-block: 6px;
  padding-inline: 4px;
  margin-inline-end: 2px;
}
@media (pointer: coarse) {
  .product_meta a,
  .tagged_as a,
  .posted_in a { min-block-size: 44px; line-height: 32px; padding-inline: 8px; }
  .quantity input.qty,
  .wc-block-components-quantity-selector input { min-block-size: 44px; min-inline-size: 48px; }
  .wc-block-components-quantity-selector__button { min-block-size: 44px; min-inline-size: 44px; }
}

/* ── نموذجُ «أبلغني عند التوفّر» (04/09/2026) ─────────────────────────
   🔑 حقلان وزرٌّ في سطرٍ واحدٍ على المكتب، وعمودٌ على الجوال — والزرُّ
      لا ينزل تحت 44 بكسلاً (هدفُ لمسٍ لا يُخطئه إبهام).
   🔑 والرسالةُ تحت النموذج بمساحةٍ محجوزةٍ سلفاً فلا تقفز الصفحةُ حين تظهر. */
.sny-oos__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3, 12px);
  align-items: center;
}
.sny-oos__form input {
  flex: 1 1 220px;
  min-inline-size: 0;
  min-block-size: 44px;
  padding-inline: var(--s4, 16px);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
.sny-oos__form input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.sny-oos__form .sny-oos__btn { flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; }
.sny-oos__form .sny-oos__btn[disabled] { opacity: .6; cursor: progress; }
.sny-oos__msg {
  flex: 1 0 100%;
  margin: 0;
  min-block-size: 1.5em;
  font-size: .875rem;
  color: var(--muted);
}
@media (max-width: 480px) {
  .sny-oos__form { flex-direction: column; align-items: stretch; }
  .sny-oos__form .sny-oos__btn { inline-size: 100%; }
}

/* ══ ㉘ أهدافُ اللمس — الثُّلمُ الباقي (‏مسحٌ شاملٌ 06/09/2026) ══════════════
   مُسح المتجرُ كلُّه (‏24 صفحةً × عرضين) فبقيت أربعةُ أهدافٍ دون 44px على الجوّال،
   وكلُّها مقيسةٌ بالاسم لا مقدَّرة:
     • شعارُ الرأس `.sny-brand` — **28px** في كلّ صفحة
     • روابطُ فتات الخبز والفئات والوسوم — **43px**: ينقصها بكسلٌ واحد
     • `.sny-brandline__b` في صفحة المنتج — **30px**
     • «واتساب» و«راسلنا» في التذييل — **18px**
   🔑 و`.skip-link` ليست منها: مخفيّةٌ حتّى التركيز وتكبر عنده، فلا تُعدّ هدفَ لمس.
   ⚠️ ولا `!important` هنا: الخصوصيّةُ كافيةٌ، وقد جرّبتُ فنجحت. */
@media (max-width: 699px) {
  a.sny-brand,
  .woocommerce-breadcrumb a,
  .sny-brandline__b,
  /* المُحدِّدان الأخيران قِيسا من الشجرة الحيّة لا من التخمين:
     روابطُ الفئات/الوسوم/العلامة في كتلة `product-meta`، وسطرُ الطمأنة في الرئيسية. */
  .wp-block-woocommerce-product-meta .wp-block-post-terms a,
  .sny-assure__scroll a {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* والثُّلمُ الأخير، مقيسٌ بالاسم في مسح 06/09 — وأخطرُه في صفحة الدفع:
       • أزرارُ نسخ الآيبان `.sny-bank-field__value` — 20 إلى 22px، ويُنسخ بها
         رقمُ حسابٍ بنكيّ: خطأُ اللمس هنا خطأٌ ماليّ.
       • «تحرير عنوان الشحن/الفوترة» في الدفع الكتليّ — 20px
       • «إضافة عنوان» في صفحة العناوين — 30px
       • أزرارُ لافتات ووكومرس (تأكيد البريد · تصفّح المنتجات) — 21 و24px */
  .sny-bank-field__value,
  .wc-block-components-address-card__edit,
  .woocommerce-Address-title a.edit,
  .wc-block-components-notice-banner__content .button,
  .wc-block-components-notice-banner__content .woocommerce-Button {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* 🔴 روابطُ الشروط كانت في القائمة أعلاه فصارت `inline-flex` داخل وسمٍ يحمل صنفَ
     ووكومرس `wc-block-components-checkbox__label` (مرن على الجوّال) ⇒ الجملةُ تفرّقت
     ثلاثةَ أعمدة (مقيسٌ 18/09 عند 390). ⇒ الجملةُ كتلةٌ نصّيّة، والرابطُ **سطريٌّ**
     بحشوةٍ عموديّة: تكبر مساحةُ اللمس ولا يتغيّر مجرى السطر. */
  .wc-block-checkout__terms .wc-block-components-checkbox__label { display: block; }
  .wc-block-checkout__terms a { padding-block: .75rem; }
}

/* =========================================================
   أشرطةُ الرئيسة — شبكاتٌ تصير صفّاً يُسحب (قرار المالك 07/09/2026)
   🔑 الخيارُ صريح: **التقاطٌ ببطاقةٍ واحدة** لا بصفحةٍ كاملة — القفزُ بأربعٍ يفقد
      الزائرَ موضعَه. و**التمريرُ داخل الحاوية وحدَها**، فـ`overflow-x` على الصفحة
      هو ما عطّل الرأسَ اللاصق سابقاً (انظر أعلى الملفّ).
   🔴 والأسبقيّة مقصودة: `card.css` يُحمَّل **بعد** هذا الملفّ ويعرّف `.sny-brands`
      شبكةً بأسبقيّة (0,1,0)؛ فقواعدُ الشريط تبدأ بـ`.sny-rail` لتصير (0,2,0) وتغلب.
   ========================================================= */

/* 🔴 الموضعُ يُنسب للشريط لا للمجموعة: مجموعةُ قوتنبرغ `alignwide` قد تمتدّ
   عرضَ الشاشة فيقع السهمُ عند حافّة النافذة لا عند البطاقات — وقع ذلك فعلاً. */
.sny-rail { position: relative; }
.sny-rail__box { position: relative; }

/* 🔴🔴🔴 `!important` هنا **لازمٌ لا عادة**: القاعدةُ في `.woocommerce ul.products`
   أعلاه تفرض `display: grid !important` (كُتبت لتكسر طفوَ ووكومرس)،
   وقاعدةٌ بلا `!important` لا تغلبها مهما زادت خصوصيتُها.
   🔑 وقيسُه لا تخمينُه: متصفّحٌ مستقلّ قال `display: grid` للمنتجات و`flex`
      للعلامات — والفرقُ أنّ العلامات لا تمسّها قاعدةُ ووكومرس. ولولا القياس
      لبقيت أظنّ العلّةَ في السهمين وهي في الشبكة. */
.sny-rail ul.products,
.sny-rail .sny-brands {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: var(--s4) !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* لا يجرّ الصفحةَ خلفه عند بلوغ الحافّة */
  scroll-snap-type: x mandatory;
  padding-block-end: var(--s2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sny-rail ul.products::-webkit-scrollbar,
.sny-rail .sny-brands::-webkit-scrollbar { display: none; }

/* 78% لا 100%: حافّةُ البطاقة التالية ظاهرةٌ فيعرف الزائرُ أنّ وراءها مزيداً —
   وهذا أشهرُ عيبٍ في الأشرطة: شريطٌ لا يبدو شريطاً. */
.sny-rail ul.products > li.product { flex: 0 0 78%; scroll-snap-align: start; }
.sny-rail .sny-brands__t          { flex: 0 0 46%; scroll-snap-align: start; }

@media (min-width: 700px) {
  .sny-rail ul.products { gap: var(--s6) !important; }
  .sny-rail ul.products > li.product { flex-basis: calc((100% - var(--s6) * 2) / 3); }
  .sny-rail .sny-brands__t { flex-basis: calc((100% - var(--s2) * 4) / 5); }
}
@media (min-width: 1080px) {
  .sny-rail ul.products > li.product { flex-basis: calc((100% - var(--s6) * 3) / 4); }
}

/* الفئاتُ الخمس: شبكةٌ على سطح المكتب (تتّسع للشاشة) وشريطٌ على الجوّال وحده. */
@media (max-width: 699px) {
  .sny-cats.sny-rail-m {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--s2);
    scrollbar-width: none;
  }
  .sny-cats.sny-rail-m::-webkit-scrollbar { display: none; }
  .sny-cats.sny-rail-m > .sny-cat { flex: 0 0 62% !important; scroll-snap-align: start; }
}

/* ---------- السهمان ----------
   🔑 لا يظهران إلّا لمن يملك مؤشّراً دقيقاً: على اللمس السحبُ هو الطريقة، والسهمُ
      يسرق مساحةً ويغطّي بطاقة. ويُخفيهما السكربتُ أيضاً حين لا يفيض الشريط. */
.sny-rail__nav {
  position: absolute;
  inset-block-start: 38%;
  inline-size: 40px;
  block-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--shadow-raised);
}
.sny-rail__nav[hidden] { display: none !important; }
.sny-rail__nav--prev { inset-inline-start: -12px; }
.sny-rail__nav--next { inset-inline-end: -12px; }
.sny-rail__nav:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.sny-rail__nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sny-rail__nav svg { inline-size: 18px; block-size: 18px; }

/* 🔑 يُظهَر بالأصل ويُخفى عن اللمس — لا العكس. اشتراطُ `hover: hover` أخفاهما
   في متصفّحاتٍ لا تعلن عن مؤشّرها، فصار الشرطُ على اللمس وحده. */
.sny-rail__nav { display: flex; }
@media (pointer: coarse) {
  .sny-rail__nav { display: none !important; }
}

/* =========================================================
   لافتةُ الرأس المتبدّلة — من منتجاتك لا من صورٍ مصمَّمة (قرار المالك 07/09/2026)
   🔑 لا مادّةَ جديدةً تنتظر: `sny_hero_picks()` يجلب أربعةَ منتجاتٍ أعلى سعراً وعليها
      خصمٌ ولها صورةٌ ومخزونٌ حقيقيّ، مخزَّنةً ستّ ساعات. فاللافتةُ تتجدّد وحدها.
   🔴 وقبل اليوم كان الثلاثةُ الباقية **مخفيّةً** على سطح المكتب
      (`.sny-hero__pick:nth-child(n+2) { display: none }`) — تُجلب وتُرمى.
   ========================================================= */

@media (min-width: 900px) {
  .sny-hero__strip {
    display: flex;
    overflow: hidden;               /* لا شريطَ تمرير: التنقّلُ بالنقاط والتبدّل التلقائيّ */
    scroll-snap-type: x mandatory;
  }
  /* 🔴🔴 13/09/2026: على سطح المكتب صار عرضُ الصفحة 2,419 على شاشة 1,440 (قِيس بمحرّكين، 900–1920)
     فانزاحت الرئيسية كلُّها: `overflow:hidden` وحدَه لا يمنع البطاقات المتراصّة في RTL من مدّ الصفحة.
     ⇒ `contain` يحبس عرضَها داخل الشريط (قِيس: 2,419 ⇐ 1,440 في 1440 و1024 و900)،
       و`border-box` يجعل البطاقة 100% فعلاً بدل 446 في شريطٍ عرضُه 420 فلا تُقصّ حافّتها. */
  /* 🔴 13/09: `inline-size` صفّر عرضَ الشريط فاختفت البطاقة (قِيس: الشريط 0px) ⇒ `paint` وحدَه يحبس العرض
     ويُبقي الشريطَ 420 والبطاقةَ كاملة (قِيس على الحيّ: الصفحة 1,440 · البطاقة 420×499 · الصورة محمَّلة). */
  .sny-hero__strip { contain: paint; }
  /* (0,2,0) لتغلب قاعدةَ الإخفاء أعلاه بخصوصيّتها نفسِها وموضعٍ لاحق. */
  .sny-hero__strip .sny-hero__pick { flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; }
  .sny-hero__strip .sny-hero__pick:nth-child(n+2) { display: flex; }

  .sny-hero__dots {
    grid-column: 2;
    grid-row: 5;
    display: flex;
    gap: var(--s2, 8px);
    justify-content: center;
    margin-block-start: var(--s3, 12px);
  }
  .sny-hero__dot {
    inline-size: 8px;
    block-size: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--line-strong, #555);
    cursor: pointer;
  }
  .sny-hero__dot[aria-current="true"] { background: var(--gold); inline-size: 22px; }
  .sny-hero__dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
}

/* الجوّالُ يبقى شبكةَ أربعٍ كما هي — لا تبدّلَ ولا نقاط. */
@media (max-width: 899px) { .sny-hero__dots { display: none; } }

/* =========================================================
   صفحة الدفع — «الإنجاز» لا «الإقناع»
   الزائرُ هنا لا يُغرى، يُنجز: يرى ما سيدفع، ويملأ أقلَّ ما يكفي، ويصل الزرّ.
   🔑 كلُّ لونٍ من الرموز (`--gold` · `--surface` · `--line`) لا من قيمةٍ مثبَّتة —
      فطبقةُ اليوم الوطنيّ تقلب `--gold` إلى أخضر حتى 30/09، وهذه القواعد تصحّ في
      الحالين بلا لمسةٍ ثانية.
   ========================================================= */

/* ---------- العمودان ---------- */
/* 🔴 **لا `gap` هنا.** مقيسٌ 17/09: الحاويةُ 1280px وعرضا العمودين 832+448 = 1280
      بالضبط، والصفُّ `flex-wrap: wrap` ⇒ أيُّ فجوةٍ تُهبط الملخّصَ تحت النموذج
      (وقع فعلاً: قفز من 251px إلى 2079px). والمباعدةُ قائمةٌ أصلاً في حشو العمود. */
/* 🔴 **مقصورةٌ على العمودين.** كانت بلا حدّ عرضٍ فصارت عند ≤781px — حيث تنقلب
      الحاويةُ عموداً — محورَ **العرض**، فانكمش العمودان إلى `max-content`:
      مقيسٌ على 768px = ملخّصٌ 252px ونموذجٌ 468px وثلثا الشاشة بياض. */
@media (min-width: 782px) {
  .wc-block-checkout .wc-block-components-sidebar-layout {
    align-items: start;             /* وإلّا تمدّد الملخّصُ بطول النموذج ففقد الالتصاق معناه */
  }
}

/* ---------- كلُّ خطوةٍ سطحٌ قائمٌ بذاته ----------
   القرارُ: حدٌّ واحدٌ لكلّ خطوة بدل حقولٍ سابحةٍ في فراغ. والمسافةُ فوق العنوان
   أكثر ممّا تحته، فيقرأ العنوانُ مع ما يليه لا مع ما قبله.
   🔴🔴 **وبسابقٍ `.wc-block-components-form` لا بالصنف وحدَه.** ووكومرس يضع
      `.wc-block-components-form .wc-block-components-checkout-step{background:none;border:none;padding:0}`
      بخصوصيّة (0,2,0) وقاعدتُنا كانت (0,1,0) ⇒ **لم تسرِ قطّ**: قِيس على الحيّ
      `background: rgba(0,0,0,0)` و`padding: 0px` بعد النشر. وهي المصيدةُ نفسُها
      التي حُرس منها زرُّ الإرسال («ثلاثةُ أصنافٍ لا واحد») ولم تُطبَّق هنا.
   🔑 والحدُّ `--line-strong` لا `--line`: أرضيّةُ الحملة `#F1F6F2` تجعل
      `--line` عليها 1.25:1 — حدٌّ لا يُرى ليس حدّاً. */
.wc-block-components-form .wc-block-checkout__contact-fields,
.wc-block-components-form .wc-block-checkout__shipping-fields,
.wc-block-components-form .wc-block-checkout__billing-fields,
.wc-block-components-form .wc-block-checkout__shipping-option,
.wc-block-components-form .wc-block-checkout__payment-method,
.wc-block-components-form .wc-block-checkout__order-fields {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--s4);
  margin-block-end: var(--s4);
}
.wc-block-checkout__form .wc-block-components-checkout-step__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--fg);
  margin-block: 0 var(--s2);
}
.wc-block-checkout__form .wc-block-components-checkout-step__description { color: var(--muted); }

/* ---------- الملخّص: بطاقةٌ لاصقة ---------- */
.wc-block-checkout__sidebar {
  position: sticky;
  /* 🔑 الرأسُ لاصقٌ أيضاً (ارتفاعُه 61.6px مقيساً، و`z-index:20` فوق الملخّص الذي
     `z-index:auto`) ⇒ `top: 16px` كان يدسّ **29.6px** من أعلى البطاقة تحته،
     وهو بالضبط سطرُ «ملخص الطلب». فالمرجعُ ارتفاعُ الرأس لا الصفر. */
  top: calc(var(--sny-header-h, 64px) + var(--s3));
  align-self: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4);
}
/* 🗑️ 18/09: حُذفت قاعدةُ حدٍّ وحشوةٍ فوق «الإجمالي» هنا — غلافُ ووكومرس يرسم حدَّه وحشوتَه
   أصلاً، فصار فوق الإجماليّ **خطّان وشريطٌ فارغٌ بينهما** (لقطةُ المالك · مقيسٌ: حشوةُ 16 + حدٌّ + حشوةٌ ثانية). */
/* السعرُ الفرديُّ تكرارٌ لسعر السطر حين تكون الكمّيّة واحدة ⇒ يبقى للمراجعة ويهدأ بصريّاً */
.wc-block-components-order-summary-item__individual-prices {
  color: var(--muted);
  font-size: .8125rem;
}

/* ---------- الحقول: هدفُ لمسٍ حقيقيّ وحلقةُ تركيزٍ ظاهرة ---------- */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-select select,
.wc-block-checkout .wc-block-components-textarea {
  min-block-size: 48px;             /* دون 44px يخطئ الإبهامُ الحقلَ على الجوّال */
}
/* 🗑️ حُذفت هنا كتلةُ حلقةِ تركيزٍ ذهبيّة: القاعدةُ القائمة في هذا الملفّ (سطر ~1467)
   تضع `outline: 2px solid var(--fg) !important` + هالةً ذهبيّة ⇒ كتلتي **لم تكن
   تسري أبداً**، وكانت ستُطمئن قارئاً بأنّ الأمرَ محسومٌ عندها وهو محسومٌ عند غيرها.
   والقائمُ أفضلُ قياساً: الذهبُ وحدَه 2.68:1 على الأبيض و2.48:1 على أخضر الحملة — كلاهما دون 3:1. */

/* 🔑 أهدافُ اللمس: المربّعاتُ وأزرارُ الاختيار 20×20 على الحاسوب واللوحة (مقيس)
   — دون 24×24 الذي يشترطه WCAG 2.2 · 2.5.8. والحدُّ هنا بلا شرطِ عرضٍ عمداً:
   إصلاحُ اللمس القائمُ محصورٌ في ≤699px، والتخطيطُ المرصوصُ يمتدّ إلى 781px. */
.wc-block-checkout input[type="checkbox"],
.wc-block-checkout input[type="radio"] {
  min-inline-size: 24px;
  min-block-size: 24px;
}

/* ---------- زرُّ الإرسال: لا يُخطئه أحد ----------
   🔑 الحبرُ أسودُ العلامة ثابتاً لا `--fg`: الأخيرُ ينقلب عاجيّاً في الوضع الغامق
      فيصير عاجيٌّ على ذهبٍ ≈2.2:1. والأسودُ على الذهب 6.4:1 وعلى أخضر الحملة أعلى. */
/* 🔑🔑 **اللونُ لا يُمَسّ.** حاولتُ أوّلاً جعلَه ذهبيّاً فبقي زمرّديّاً — والسببُ ليس
      خصوصيّةً بل **قرارٌ قائمٌ في هذا الملفّ نفسِه** (سطر ~1910: «④ الفعل زمرّديّ»)
      يجعل `--jade` لونَ كلّ أفعال الشراء. فذهبيٌّ هنا يفرّق زرَّ الدفع عن «أضف للسلّة»
      و«اشترِ الآن» بلا سبب. الذي كان ناقصاً **الحجمُ والحالات** لا الصبغة.
   🔑 وثلاثةُ أصنافٍ لا واحد: تنسيقُ ووكومرس يُحمَّل بعد تنسيقنا، فالمتساوي يخسر بالترتيب. */
.wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button {
  inline-size: 100%;
  min-block-size: 54px;                /* 48px كان أقصرَ من هدف اللمس في آخر خطوةٍ في الرحلة */
  font-size: 1.0625rem;
  font-weight: 700;
  transition: background-color .18s cubic-bezier(.16,1,.3,1), color .18s;
}
/* الكحليُّ عند التمرير — نفسُ اصطلاح إخوته من الأزرار، وكان مستثنى منه وحدَه */
.wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:hover:not(:disabled) {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--ivory);
}
.wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}
/* ---------- السلّة: أربعُ ملاحظاتٍ مقيسةٍ 18/09 (طلب المالك) ----------
   ① زرُّ «المتابعة لإتمام الطلب» كان أسودَ وزرُّ الدفع زمرّديّاً — غاب عن قائمة «④ الفعل زمرّديّ».
      ومحدِّدٌ بصنفين لأنّ تنسيق ووكومرس يُحمَّل بعد تنسيقنا.
   ② وصفُ المنتج التسويقيُّ تحت كلّ صنف (4 أسطرٍ على الجوّال) ضجيجٌ — نظيرُ ما أُخفي في ملخّص الدفع.
   ③ «سلة التسوق» صندوقُها 96px ونصُّها 56: قاعدةُ `card.css` لعناوين البطاقات كانت تصيب كلَّ
      عنوان صفحة — **أُصلحت في منبعها** (`card.css` محصورةٌ في `.wc-block-product`)، لا هنا.
   ④ فقاعةُ المحادثة فوق الزرّ المثبَّت على الجوّال ⇒ ترتفع من `sny-chat.js` بالآليّة نفسِها
      التي ترفعها فوق شريط الشراء. (والختمُ نُقل للتذييل فلم يعد يغطّي شيئاً.) */
.wc-block-cart .wc-block-components-button.wc-block-cart__submit-button {
  background: var(--jade);
  border-color: var(--jade);
  color: var(--jade-fg);
  border-radius: 2px;
}
.wc-block-cart .wc-block-components-button.wc-block-cart__submit-button:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--ivory);
}
.wc-block-cart .wc-block-cart-item__product .wc-block-components-product-metadata { display: none; }

.wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:disabled,
.wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button.is-loading { opacity: .6; cursor: progress; }

/* ---------- الجوّال ----------
   🔴🔴 **ملخّصُ ووكومرس المطويُّ يُخفى هنا ويحلّ مكانَه `.sny-paystrip`.**
      السببُ مقيسٌ 17/09: `.wc-block-checkout__main` يحمل `order: 1` من ووكومرس بقاعدةٍ
      أقوى ⇒ الملخّصُ أعلى الشاشة وهو **آخرُ الـDOM**، ولوحتُه (`div[role=button]`)
      آخرُ محطّةٍ في مسار لوحة المفاتيح. وإلغاءُ `order:-1` من عندنا **لا يغيّر شيئاً**
      (قياسٌ بحالتين متطابقتين)، ولا CSS يُعيد ترتيبَ الـDOM.
      والإخفاءُ لا يُفقد شيئاً: قِيس أنّ الحشوةَ داخل النموذج
      (`.checkout-order-summary-block-fill`) تحمل الأصنافَ والقسيمةَ والمجاميعَ الثلاثة،
      ولوحةُ الرأس صفرُ مجاميعَ وقسيمةٌ مخفيّة.
   🔑 **ولا يُخفى `__sidebar` نفسُه** — فيه منطقةُ الإشعارات (وفيها أخطاءُ الدفع)
      فيُترك أعلى الشاشة بقصد.
   🔴 ولافتةُ الموافقة (مثبّتةٌ أسفل الشاشة) تغطّي زرَّ الإرسال ⇒ خلوصٌ أسفله (أدناه). */
@media (max-width: 781px) {
  .wc-block-checkout .wc-block-components-sidebar-layout {
    display: flex;
    flex-direction: column;
  }
  /* 🔴 العرضُ الكاملُ صراحةً: ووكومرس يعطي العمودين نسبتين (60%/32%) تبقيان في
     العمود الواحد ⇒ شريطان ضيّقان وثلثا الشاشة بياض. مقيسٌ على 768: 468px و252px. */
  .wc-block-checkout .wc-block-components-sidebar-layout > .wc-block-checkout__main,
  .wc-block-checkout .wc-block-components-sidebar-layout > .wc-block-checkout__sidebar {
    inline-size: 100%;
    max-inline-size: 100%;
    padding-inline: 0;
  }
  .wc-block-checkout__sidebar {
    order: -1;
    position: static;
    /* 🔑 بلا هامش: الحاويةُ صارت للإشعارات وحدها وتكون فارغةً غالباً. */
    margin-block-end: 0;
  }
  .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { display: none; }
  .wc-block-components-form .wc-block-checkout__contact-fields,
  .wc-block-components-form .wc-block-checkout__shipping-fields,
  .wc-block-components-form .wc-block-checkout__billing-fields,
  .wc-block-components-form .wc-block-checkout__shipping-option,
  .wc-block-components-form .wc-block-checkout__payment-method,
  .wc-block-components-form .wc-block-checkout__order-fields { padding: var(--s3); }
}

/* 🔴🔴🔴 **خلوصُ لافتة الموافقة — لكلّ العروض لا للجوّال وحدَه.**
   كانت هذه القاعدةُ حبيسةَ `@media (max-width: 781px)`، والقياسُ بإصابةٍ حقيقيّةٍ
   (`elementFromPoint`) يقول إنّ الحجبَ **على الحاسوب أسوأ**: عند 1440 و1920 يُصيب
   مركزُ الزرّ اللافتةَ و**62%** من سطحه محجوب، وعند 834 (آيباد عموديّاً) **100%**
   — أي زرٌّ لا يُضغط أصلاً. والزرُّ لا يُمرَّر أبعدَ لأنّ التمريرَ بلغ منتهاه.
   ⇒ كلُّ زائرٍ أوّلِ مرّةٍ — قبل أن يجيب عن الكوكيز — يضغط فلا يحدث شيء.
   🔑 و200px تغطّي الحالين: اللافتةُ 84px على الحاسوب و172px على الجوّال. */
body:has(.sny-consent.is-on) .wc-block-checkout__actions { padding-block-end: 200px; }

/* ---------- إصلاحاتُ إتاحةٍ مقيسةٌ على الحيّ 17/09 ---------- */

/* 🔴🔴 **اسمُ المتجر كان غيرَ مقروء.** قِيس: `#111214` على رأسٍ خلفيّتُه `#002528`
   ⇒ **1.16:1**. وسببُه أنّ لونَه الفاتحَ معلّقٌ على محدّد الوضع الغامق وحدَه، والرأسُ
   داكنٌ في الوضعين (طبقةُ الحملة تصبغه `#002528`). فاللونُ هنا بلا شرطِ وضع.
   🔑 وأيقونةُ السلّة بيضاءُ أصلاً — نُسي النصُّ وحدَه، فبان الخللُ متأخّراً. */
header.wp-block-template-part .wp-block-site-title a { color: var(--ivory); }

/* 🔴 **حقلا البريد والرمز البريديّ يرثان `direction: rtl`** فتقفز المحارفُ المحايدة
   (النقطةُ الأخيرة تظهر أوّلَ السطر — مقيسٌ بالكتابة الحقيقيّة). والقيمةُ سليمةٌ
   والعرضُ كاذب، فيحذف المشتري حرفاً صحيحاً وهو يظنّه الخطأ.
   🔑 `text-align: right` يُبقي الحقلَ في مكانه بصريّاً داخل نموذجٍ عربيّ.
   🔑 والهاتفُ كان معالَجاً أصلاً (`ltr`) — عولج واحدٌ ونُسي أخواه. */
.wc-block-checkout #email,
.wc-block-checkout #shipping-postcode,
.wc-block-checkout #billing-postcode {
  direction: ltr;
  text-align: right;
}

/* ---------- لمساتٌ أخيرةٌ في صفحة الدفع (مقيسةٌ 17/09) ---------- */

/* 🔑 وصفُ المنتج التسويقيُّ في ملخّص الطلب ضجيجٌ في صفحةِ «إنجاز»: سطرُ الصنف
   121.8px على الحاسوب و175.7px على الجوّال ⇒ بصنفين يخرج الإجماليُّ من الشاشة.
   والعنوانُ والسعرُ يبقيان — المحذوفُ الوصفُ وحدَه.
   🔴 كانت القاعدةُ تُخفي `__description` كلَّه، **والاسمُ بداخله** ⇒ على الحاسوب صورةٌ
   وسعرٌ بلا اسم (مقيسٌ 18/09: صندوقُ الاسم 0×0). المُخفى الآن الوصفُ التسويقيُّ وحدَه. */
.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata { display: none; }
/* ↑ كانت محصورةً في `__sidebar` (الحاسوب) ⇒ على الجوّال بقي الوصفُ في الملخّص آخرَ الصفحة (مقيسٌ 18/09). */

/* 🔴 ضغطُ «إتمام الطلب» بنموذجٍ ناقص يُمرّر إلى أوّل خطأٍ ويضع المؤشّرَ فيه — **ويضعه تحت الرأس
   اللاصق** على الحاسوب (حقلُ البريد عند 0 والرأسُ 62px فوقه؛ مقيسٌ بـ`elementFromPoint` 18/09)،
   وعنوانُ القسم فوقه خارجَ الشاشة على الجوّال. ⇒ هامشُ تمريرٍ بقدر الرأس ومتنفّسٍ للعنوان. */
html:has(.wc-block-checkout) { scroll-padding-block-start: calc(var(--sny-header-h, 64px) + 4rem); }
@media (max-width: 699px) {
  html:has(.wc-block-checkout) { scroll-padding-block-start: 4.5rem; }   /* الرأسُ غيرُ لاصقٍ هنا (⑯) */
}

/* الخيارُ المحدَّد (شحنٌ ودفع): ووكومرس يرسم حوله `inset 0 0 0 1.5px currentColor` = #111214 ⇒
   إطارٌ أسودُ ثقيل (طلب المالك 18/09 إزالتَه). ⇒ لونُ الهويّة بخلفيّةٍ خفيفةٍ منه — يبقى
   المحدَّدُ ظاهراً بلا سواد، و`--jade` يتبدّل في الوضع الداكن فلا يُكتب لونٌ ثابت.
   🔑 المحدِّدُ نسخةُ ووكومرس نفسُها (`packages-style-rtl.css`) مسبوقةً بـ`.wc-block-checkout`:
   محدِّدي الأوّلُ الأعمُّ خسر أمام `label.` في قاعدتهم فبقي إطارُ الشحن أسودَ (مقيسٌ 18/09). */
.wc-block-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  box-shadow: inset 0 0 0 1.5px var(--jade);
  background: color-mix(in srgb, var(--jade) 5%, transparent);
}

/* ---------- شريطُ «المستحقّ الآن» أعلى الدفع ----------
   يُطبع قبل كتلة الدفع (`sny-checkout-fields.php`) فبصرُه وترتيبُه واحد، ويبقى
   `hidden` حتّى يقرأ جافاسكربت المجموعَ الحقيقيّ من الملخّص.
   🔑 `:not([hidden])` لا `display:flex` مطلقاً — وإلّا دهس `display` سمةَ `hidden`
      فظهر شريطٌ بلا رقم.
   🔑 وللجوّال وحده: على الحاسوب الملخّصُ ملازمٌ للنموذج وترتيبُ القراءة سليمٌ
      أصلاً (النموذجُ أوّلُ الـDOM وأوّلُ الصفّ يميناً). */
.sny-paystrip { display: none; }
@media (max-width: 781px) {
  .sny-paystrip:not([hidden]) {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-block-end: var(--s4);
    padding: var(--s3);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
  }
  .sny-paystrip__label { color: var(--muted); font-size: .92rem; }
  .sny-paystrip__val {
    margin-inline-start: auto;
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
  }
  .sny-paystrip__note { flex-basis: 100%; color: var(--muted); font-size: .78rem; }
}

/* ══ ⑫ عمودُ التصفية — 18/09/2026 ════════════════════════════════
   استُبدل الشريطُ الأفقيّ بعمودٍ جانبيّ. السببُ مقيسٌ بلقطة: سبعةُ صفوفٍ من
   الرقاقات كانت تدفع أوّلَ منتجٍ تحت 940px على المكتبيّ، والزائرُ جاء ليرى
   منتجاتٍ لا قوائم. العمودُ يُقرأ عموديّاً والشبكةُ تبدأ من أعلى الصفحة. */
.sny-arch { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 32px; align-items: start; }
.sny-arch__main { min-inline-size: 0; }
.sny-arch__tools { display: none; }

.sny-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--s4) var(--s4) var(--s2); position: sticky; inset-block-start: var(--s4);
  max-block-size: calc(100vh - var(--s8, 32px)); overflow-y: auto;
}
.sny-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding-block-end: var(--s3); border-block-end: 1px solid var(--line);
}
.sny-panel__t { font-size: 1rem; font-weight: 700; margin: 0; }
.sny-panel__act { display: flex; align-items: center; gap: var(--s3); }
.sny-clear { font-size: .8125rem; color: var(--muted); text-underline-offset: .22em; }
.sny-clear:hover { color: var(--fg); }
.sny-panel__x { display: none; background: none; border: 0; padding: 4px; cursor: pointer; color: var(--muted); line-height: 0; }
.sny-panel__x svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.sny-grp { padding-block: var(--s4); border-block-end: 1px solid var(--line); }
.sny-grp:last-of-type { border-block-end: 0; }
.sny-grp__h { font-size: .8125rem; font-weight: 700; margin: 0 0 var(--s3); color: var(--fg); }

.sny-opt {
  display: flex; align-items: center; gap: 10px; padding-block: 6px;
  color: var(--fg); text-decoration: none; font-size: .875rem; line-height: 1.5;
}
.sny-opt:hover { color: var(--fg); }
/* 🔑 صنفٌ بـ`display` يدهس `[hidden]` — فتظهر الصفوفُ المطويّةُ فارغةً (وقع 18/09). */
.sny-opt[hidden], .sny-grp [hidden] { display: none; }
.sny-opt:hover .sny-opt__box { border-color: var(--gold); }
.sny-opt__box {
  flex: 0 0 auto; inline-size: 16px; block-size: 16px; border: 1.5px solid #C9C2B2;
  border-radius: 4px; background: #fff; display: grid; place-items: center;
  transition: background .18s cubic-bezier(.16,1,.3,1), border-color .18s cubic-bezier(.16,1,.3,1);
}
.sny-opt__box svg {
  inline-size: 10px; block-size: 10px; opacity: 0; transform: scale(.6);
  fill: none; stroke: #111214; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .18s cubic-bezier(.16,1,.3,1), transform .18s cubic-bezier(.16,1,.3,1);
}
/* 🔑 المختارُ يُميَّز بالتعبئة **والخطّ** لا باللون وحده (WCAG 1.4.1). */
.sny-opt.is-on { font-weight: 600; }
.sny-opt.is-on .sny-opt__box { background: var(--gold); border-color: var(--gold); }
.sny-opt.is-on .sny-opt__box svg { opacity: 1; transform: scale(1); }
.sny-opt__l { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sny-opt__n { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }

.sny-more {
  background: none; border: 0; padding-block: 6px; font: inherit; font-size: .8125rem;
  color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: .22em;
}
.sny-more:hover { color: var(--fg); }

.sny-ov { display: none; }

@media (max-width: 900px) {
  .sny-arch { display: block; }
  .sny-arch__tools { display: block; margin-block-end: var(--s4); }
  .sny-fbtn {
    display: inline-flex; align-items: center; gap: var(--s2);
    min-block-size: 44px; padding-inline: var(--s4); background: var(--surface);
    border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .875rem;
    color: var(--fg); cursor: pointer;
  }
  .sny-fbtn svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .sny-fbtn__n {
    background: var(--gold); color: #111214; border-radius: 999px; min-inline-size: 20px;
    block-size: 20px; display: grid; place-items: center; font-size: .75rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .sny-panel {
    position: fixed; inset-block: 0; inset-inline: auto 0; inline-size: min(88vw, 360px);
    z-index: 60; border-radius: 0; border: 0; border-inline-start: 1px solid var(--line);
    max-block-size: 100vh; padding-block-end: var(--s8, 32px);
    transform: translateX(100%); transition: transform .32s cubic-bezier(.16,1,.3,1);
    box-shadow: -8px 0 28px rgba(17, 18, 20, .16);
  }
  .sny-panel:dir(ltr) { transform: translateX(-100%); }
  .sny-panel.is-open { transform: translateX(0); }
  /* هدفُ لمسٍ 44px — كان 28px (مسحُ 18/09). */
  .sny-panel__x { display: grid; place-items: center; min-block-size: 44px; min-inline-size: 44px; }
  /* 🔑 طبقةُ تعتيمٍ تُغلق باللمس خارجها — بلاها لا يعرف الزائرُ كيف يعود. */
  .sny-ov { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(17, 18, 20, .38); }
  .sny-ov[hidden] { display: none; }
  .sny-opt { padding-block: 10px; min-block-size: 44px; box-sizing: border-box; }   /* كان 41px */
  .sny-more { min-block-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sny-panel, .sny-opt__box, .sny-opt__box svg { transition: none; }
}

/* ⑯ الرأسُ اللاصقُ على الجوال — ملاحظةُ فريق المبيعات 17/09/2026 (قرار المالك 18/09).
   الرأسُ مع شريط البحث يثبت أعلى الشاشة ويأكل من مساحة التصفّح على شاشةٍ صغيرة.
   ⇒ يبقى لاصقاً على الشاشات الواسعة (⑭) ويمرّ مع الصفحة تحت 700px.
   🔑 المحدِّدُ نفسُه الذي في ⑭ حرفاً — `:has()` يرفع الخصوصيّة فلا يغلبه محدِّدٌ أبسط. */
@media (max-width: 699px) {
  header.wp-block-template-part:has(> .sny-header),
  header.wp-block-template-part {
    position: static;
  }
}

/* ══ ⑰ خطّ Expo في المتجر كلّه (قرار المالك 18/09/2026) ══════════════
   قِيس بالخطّ المرسوم فعلاً (CSS.getPlatformFontsForNode) في 16 صفحة بعرضين:
   · الأزرار لا ترث الخطّ من المتصفّح ⇒ «أضف إلى طلب عرض سعر» و«أرسل الرمز» بـArial.
   · «وفّرت» في بعض البطاقات يرث مكدّسَ الأرقام (Inter) ⇒ كلمتها بـNoto.
   ⇒ Expo للحروف العربيّة (مقصورٌ عليها بـunicode-range)، وInter للأرقام كما في ③. */
button, input, select, textarea { font-family: inherit; }
.sny-saving { font-family: "Expo Arabic", Inter, "Noto Sans Arabic", system-ui, sans-serif; }

/* ختمُ «متجر موثّق» في آخر التذييل — لا عائماً (قرار المالك 18/09). الإطارُ من المركز السعوديّ
   للأعمال يضبط مقاسَه برسالةٍ منه، فالحاويةُ تحاذيه فقط. */
/* وموضعُه تحت سطر «سجل تجاري · الرقم الضريبي» في عمود التذييل الأوّل (قرار المالك) ⇒ يحاذي
   بدايةَ العمود. والمربّعُ الفاتحُ حوله من إطارهم ولا يُغيَّر. */
.sny-footer-seal {
  display: flex;
  justify-content: flex-start;
  padding-block: var(--s3) 0;
}

/* صفحةُ الشكر — «معلومات إضافية»: `dt` و`dd` سطريّان بلا فاصل ⇒ «…الرسائل النصّيةلا» على الجوّال
   (مقيسٌ 18/09). ⇒ عمودان: السؤالُ ثمّ الجوابُ في طرف السطر. */
/* 🔑 المحدِّدُ بصنفين وعنصر: ووكومرس يجعلها `block` على الجوّال بصنفين (`order-confirmation-additional-fields.css`). */
.wc-block-order-confirmation-additional-fields dl.wc-block-components-additional-fields-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2) var(--s4);
  align-items: baseline;
}
.wc-block-order-confirmation-additional-fields dl.wc-block-components-additional-fields-list dd { margin: 0; font-weight: 600; }

/* ---------- صفحةُ الشكر — بطاقةُ «ماذا بعد؟» وسطرُ التواصل (sny-thankyou.php · 18/09) ----------
   ألوانُ سنيح من رموز القالب: `--jade` للنجاح والفعل · `--surface`/`--line` للبطاقة · `--muted` للشرح.
   الإيموجي زخرفةٌ دالّة (`aria-hidden`) — المعنى في النصّ بجانبها لا فيها. */
.sny-ty-next {
  box-sizing: border-box;   /* الحشوةُ داخل العرض ⇒ حافّتُه على حافّة تفاصيل الطلب لا خارجها بـ28px */
  margin-block: var(--s5, 20px) 0;
  padding: var(--s5, 20px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--jade);
  border-radius: var(--radius, 12px);
}
.sny-ty-next__h { margin: 0 0 var(--s3, 12px); font-size: 1.125rem; font-weight: 700; color: var(--fg); }
.sny-ty-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4, 16px); }
.sny-ty-step { display: flex; gap: var(--s3, 12px); align-items: flex-start; }
/* على الشاشة العريضة الخطواتُ الثلاثُ صفٌّ واحد — عموديّةً كانت تترك ثلثي البطاقة فارغاً (مقيسٌ في المعاينة). */
@media (min-width: 782px) {
  .sny-ty-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5, 20px); }
}
.sny-ty-step__icon {
  flex: none; inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  font-size: 1.25rem; line-height: 1;
  background: color-mix(in srgb, var(--jade) 10%, transparent);
  border-radius: 50%;
}
.sny-ty-step__body { display: flex; flex-direction: column; gap: 2px; padding-block-start: 2px; }
.sny-ty-step__body strong { font-size: 1rem; color: var(--fg); }
.sny-ty-step__body span { font-size: .9375rem; color: var(--muted); line-height: 1.6; }

.sny-ty-pay {
  margin-block: var(--s4, 16px) 0; padding: var(--s4, 16px);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px) var(--s3, 12px);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-radius: var(--radius, 12px); font-weight: 600;
}
.sny-ty-pay__btn {
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--s5, 20px);
  background: var(--jade); color: var(--jade-fg); border-radius: 2px; text-decoration: none; font-weight: 700;
}
.sny-ty-pay__btn:hover { background: var(--navy); color: var(--ivory); }

.sny-ty-contact { margin-block: var(--s4, 16px) 0; display: grid; gap: var(--s2, 8px); color: var(--muted); font-size: .9375rem; }
.sny-ty-contact p { margin: 0; }
.sny-ty-contact__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px) var(--s4, 16px); }
.sny-ty-contact__row a {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px;
  color: var(--jade); font-weight: 600; text-decoration: none;
}
.sny-ty-contact__row a:hover { text-decoration: underline; }


/* ══ ⑰ الرئيسيّةُ على الجوّال — 18/09/2026 ═══════════════════════
   مقيسٌ بعرض 390: أوّلُ قسمِ منتجاتٍ عند 1,493px، والتذييلُ 1,707 من 5,545 (31٪). */
@media (max-width: 699px) {
  /* البطلُ الثاني: عبارتُه وزرُّه يكفيان — شبكةُ المنتجات الأربعة (559px) تؤخّر العروضَ شاشةً كاملة. */
  .sny-hero__strip, .sny-hero__dots { display: none; }

  /* 🔴 شريطُ الفئات كُتب بخصائص flex ثمّ صارت `.sny-cats` grid (بـ`!important`) ⇒ صارت قاعدةُ الشريط بلا أثر،
        فبقيت الفئاتُ الخمس شبكةً بعمودين و«شاشات» وحدها في صفّها. ⇒ `!important` بخصوصيّة (0,2,0). */
  .sny-cats.sny-rail-m { display: flex !important; }
}
@media (max-width: 640px) {
  /* التذييل: «التسوّق» و«السياسات» جنباً إلى جنب، والشعارُ والتواصلُ بعرضٍ كامل. */
  .sny-footer > .wp-block-columns { column-gap: var(--s4); row-gap: var(--s6); }
  .sny-footer > .wp-block-columns > .wp-block-column:nth-child(2),
  .sny-footer > .wp-block-columns > .wp-block-column:nth-child(3) { flex: 1 1 40% !important; min-inline-size: 0; }
}

/* ══ ⑱ اقتراحاتُ البحث أثناء الكتابة — 18/09/2026 (`assets/js/sny-suggest.js`) ══ */
.sny-sug-host { position: relative; }
/* 🔑 لوحٌ فاتحٌ صريح لا رموزُ السياق: القائمةُ تتدلّى من ترويسةٍ داكنة فترث ألوانَها، والأخضرُ
      على الكحليّ غاب (مقيسٌ بلقطة 18/09). فاتحةٌ كبطاقات الصفحة التي تغطّيها. */
.sny-sug {
  --sug-bg: #FFFFFF; --sug-fg: #111214; --sug-muted: #5C5E63; --sug-line: #E2DCCE; --sug-jade: #14675E;
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); z-index: 80;
  background: var(--sug-bg); color: var(--sug-fg); border: 1px solid var(--sug-line); border-radius: 12px;
  box-shadow: var(--shadow-raised, 0 12px 32px rgba(17, 18, 20, .18));
  max-block-size: min(70vh, 480px); overflow-y: auto; padding: 6px; text-align: start;
}
.sny-sug[hidden] { display: none; }
/* (0,2,0) تغلب `.sny-header a { color: var(--ivory) }` (0,1,1) — كانت الأسماءُ والأسعارُ عاجيّةً على أبيض (مقيسٌ بلقطة). */
.sny-sug .sny-sug__item {
  display: flex; align-items: center; gap: var(--s3, 12px); padding: 8px; border-radius: 8px;
  color: var(--sug-fg); text-decoration: none; min-block-size: 44px;
}
.sny-sug .sny-sug__item:hover, .sny-sug .sny-sug__item[aria-selected="true"] { background: color-mix(in srgb, var(--sug-jade) 9%, transparent); }
.sny-sug__img { flex: 0 0 48px; inline-size: 48px; block-size: 48px; object-fit: contain; background: #fff; border-radius: 6px; }
.sny-sug__body { display: grid; gap: 2px; min-inline-size: 0; }
.sny-sug__name { font-size: .875rem; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sny-sug__meta { display: flex; gap: var(--s2, 8px); align-items: baseline; font-size: .8125rem; }
.sny-sug__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.sny-sug__stock--instock { color: var(--sug-jade); font-weight: 600; }
.sny-sug__stock--onbackorder { color: var(--sug-muted); }
.sny-sug__all {
  display: block; inline-size: 100%; margin-block-start: 4px; padding: 10px 8px; min-block-size: 44px;
  border: 0; border-block-start: 1px solid var(--sug-line); background: none; font: inherit; font-size: .875rem;
  font-weight: 700; color: var(--sug-jade); text-align: start; cursor: pointer; border-radius: 0 0 8px 8px;
}
.sny-sug__all:hover, .sny-sug__all[aria-selected="true"] { background: color-mix(in srgb, var(--sug-jade) 9%, transparent); }
.sny-sug__empty { margin: 0; padding: 12px 8px; font-size: .875rem; color: var(--sug-muted); }
/* المكتبيّ: المربّعُ 284px فتُقصّ الأسماء ⇒ القائمةُ أعرضُ منه، ممتدّةً من جهة البداية. */
@media (min-width: 700px) { .sny-sug { inset-inline: 0 auto; inline-size: max(100%, 440px); } }

/* ⑲ الرئيسية بترتيب المالك (19/09): بانرٌ واحد · «عرض الكل» بجانب عنوان القسم ───────── */
/* ما دام بانرُ اليوم الوطني ظاهراً يختفي بطلُ «أجهزة بيتك»، ويعود وحده حين يُزال الأوّل. */
.nd96-hero ~ .sny-hero { display: none; }
.sny-sec .sny-sec__more {
  font-size: .9rem;
  font-weight: 700;
  color: var(--green, #1F6B5E);
  text-decoration: none;
  margin-inline-start: 12px;
  white-space: nowrap;
}
.sny-sec .sny-sec__more:hover { text-decoration: underline; }

/* إعلانُ الولاء — «تكسب X نقطة + Y كاش باك» (sny-mu/sny-loyalty-promo.php · 19/09/2026) */
.sny-loyal {
  margin-block: var(--s2, 8px) var(--s3, 12px); padding: var(--s2, 8px) var(--s3, 12px);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-radius: var(--radius, 12px); font-size: .92em; line-height: 1.6;
}
.sny-loyal b { color: var(--jade); font-weight: 700; }
.sny-loyal[hidden] { display: none; }

/* تفاصيلُ الحساب — الهويّةُ والمنشأة (sny-mu/sny-member-profile.php · 19/09/2026) */
.sny-mp { margin-block: var(--s5, 20px) 0; padding: var(--s4, 16px); border: 1px solid var(--line); border-radius: var(--radius, 12px); }
.sny-mp legend { padding-inline: var(--s2, 8px); font-weight: 700; }
.sny-mp__hint { color: var(--muted); font-size: .92em; margin-block: 0 var(--s3, 12px); }
.sny-mp__ok { margin: 0; font-weight: 600; }
.sny-mp__sub { margin-block: var(--s4, 16px) var(--s2, 8px); font-weight: 700; }
.sny-w__activate { padding: var(--s3, 12px); background: color-mix(in srgb, var(--gold) 12%, transparent); border-radius: var(--radius, 12px); }

/* فئاتُ العملاء والمتابعة في «حسابي» (sny-mu/sny-tiers.php · 19/09/2026) */
.sny-tier { margin-block: 0 var(--s5, 20px); padding: var(--s4, 16px); border: 1px solid var(--line); border-radius: var(--radius, 12px); background: var(--surface); }
.sny-tier__h { margin: 0 0 var(--s2, 8px); font-size: 1.15rem; }
.sny-tier__badge { display: inline-block; padding: 2px 12px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--fg); }
.sny-tier__badge--base { background: color-mix(in srgb, var(--muted) 18%, transparent); }
.sny-tier__badge--platinum, .sny-tier__badge--diamond, .sny-tier__badge--elite { background: var(--jade); color: var(--jade-fg); }
.sny-tier__perks { margin: 0 0 var(--s2, 8px); font-weight: 600; color: var(--jade); }
.sny-tier__spend, .sny-tier__next, .sny-tier__streak, .sny-tier__lock { margin: var(--s2, 8px) 0 0; }
.sny-tier__bar { block-size: 10px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; margin-block-start: var(--s3, 12px); }
.sny-tier__bar > span { display: block; block-size: 100%; background: var(--gold); border-radius: inherit; }

/* دعوةُ تفعيل الولاء بعد الشراء (sny-mu/sny-loyalty-invite.php · 19/09/2026) */
.sny-invite { margin-block: var(--s4, 16px) 0; padding: var(--s4, 16px); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px) var(--s3, 12px);
  background: color-mix(in srgb, var(--gold) 12%, transparent); border-radius: var(--radius, 12px); }
.sny-invite__t { margin: 0; flex: 1 1 280px; }
.sny-invite__btn { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--s5, 20px);
  background: var(--jade); color: var(--jade-fg); border-radius: 2px; text-decoration: none; font-weight: 700; }
.sny-invite__btn:hover { background: var(--navy); color: var(--ivory); }
.sny-invite__n { margin: 0; flex-basis: 100%; font-size: .88em; }

/* حاسبةُ التكييف (sny-mu/sny-ac-calculator.php · 19/09/2026) */
.sny-acc { max-inline-size: 640px; }
.sny-acc__f { display: grid; gap: var(--s3, 12px); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sny-acc__f label { display: grid; gap: var(--s1, 4px); font-weight: 600; }
.sny-acc__f input, .sny-acc__f select { min-block-size: 44px; padding-inline: var(--s3, 12px); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--fg); font: inherit; }
.sny-acc__chk { display: flex !important; align-items: center; gap: var(--s2, 8px); grid-column: 1 / -1; }
.sny-acc__chk input { min-block-size: auto; inline-size: 20px; block-size: 20px; }
.sny-acc__more { grid-column: 1 / -1; }
.sny-acc__more summary { cursor: pointer; color: var(--muted); margin-block-end: var(--s2, 8px); }
.sny-acc__r { margin-block-start: var(--s5, 20px); padding: var(--s4, 16px); border-radius: var(--radius, 12px); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.sny-acc__r:empty { display: none; }
.sny-acc__big { font-size: 1.15rem; margin: 0 0 var(--s3, 12px); }
.sny-acc__btn { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--s5, 20px); background: var(--jade); color: var(--jade-fg); border-radius: 2px; text-decoration: none; font-weight: 700; }
.sny-acc__btn:hover { background: var(--navy); color: var(--ivory); }
.sny-acc__alt { margin: var(--s3, 12px) 0 0; }
.sny-acc__note, .sny-acc__err { margin: var(--s3, 12px) 0 0; font-size: .88em; color: var(--muted); }
.sny-acfit { margin-block: var(--s2, 8px) var(--s3, 12px); padding: var(--s2, 8px) var(--s3, 12px); border: 1px dashed var(--line); border-radius: var(--radius, 12px); font-size: .92em; }
.sny-acfit input { inline-size: 5.5em; min-block-size: 36px; margin-inline: var(--s1, 4px); padding-inline: var(--s2, 8px); border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); font: inherit; }
.sny-acfit__r { display: block; margin-block-start: var(--s1, 4px); font-weight: 600; }
.sny-acfit__more { font-size: .9em; }

/* شعارُ التذييل في الوضع الداكن (رآه المالك 19/09/2026): الكلمةُ السوداء (`saniyh_wordmark_mono_black`) تختفي على
   التذييل الداكن ⇒ تُقلب بيضاء. الغزالُ ذهبيٌّ فيبقى كما هو. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sny-brand-slot--light .sny-brand__word { filter: invert(1); } }
:root[data-theme="dark"] .sny-brand-slot--light .sny-brand__word { filter: invert(1); }

/* شريطُ تطبيق المتجر أعلى التذييل (24/09/2026 · المالك «ضيف تحت بالمتجر تحميل تطبيق ابل») — كان زرّاً 120×40 تحت أيقونات
   التواصل لا يُرى ⇒ صفٌّ بعرض المحتوى: عنوانٌ وسطرٌ بما يفعله التطبيقُ فعلاً، وشارةٌ أكبر. على الجوّال يتكدّس. */
.sny-app-strip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); flex-wrap: wrap;
  padding: var(--s3) var(--s4); margin-block-end: var(--s4);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); border-radius: var(--radius);
}
.sny-app-strip__text { flex: 1 1 22rem; min-inline-size: 0; }
.sny-app-strip__title { margin: 0; font-weight: 700; font-size: 1.125rem; color: var(--fg); line-height: 1.6; }
.sny-app-strip__sub { margin: 0; font-size: .9375rem; color: var(--muted); line-height: 1.8; }
.sny-app-strip__badge { flex: none; display: inline-block; line-height: 0; }
.sny-app-strip__badge img { display: block; inline-size: 162px; block-size: auto; }
.sny-app-strip__badge:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 10px; }