/* =========================================================
   بطاقةُ منتج سنيح — الطبقةُ البصريّة
   🔑 لا لونَ صريحاً هنا: كلُّ شيءٍ من متغيّرات `style.css` القائمة
      (‏--gold · --ink · --ivory · --navy · --surface · --line · --muted)
      فتتبع البطاقةُ السِّمتين تلقائيّاً بلا تكرارِ تعريف.
   🔑 والمقاساتُ من سلّم التباعد نفسِه (--s1..--s8) لا أرقاماً حرّة.
   ========================================================= */

/* ── الرقاقات ── */
.sny-c-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1, 4px);
  margin: var(--s2, 8px) 0 0;
}

.sny-c-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--s2, 8px);
  font-size: .75rem;
  line-height: 1.7;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

/* الموديلُ لاتينيٌّ ⇒ أرقامٌ جدوليّةٌ واتّجاهٌ صريح */
.sny-c-chip--model {
  font-family: var(--wp--preset--font-family--numeric, Inter, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* بلدُ الصنع: حدٌّ ذهبيٌّ خفيفٌ يميّزه دون أن يصرخ */
.sny-c-chip--origin { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }

/* 🔴🔴 الرقاقاتُ تُطبع **داخل رابط البطاقة**، فتلتقطها قاعدةُ صورة المنتج في
   `shop.css:53-66`: `ul.products li.product a img { width:100%; height:100%;
   aspect-ratio:1/1; padding }` ⇒ **العلمُ يتمدّد فيكسر البطاقة** (وقع فعلاً 05/09).
   ⇒ يُغلَب بالتخصيص لا بـ`!important`: إضافةُ `.sny-c-flag` ترفع الوزنَ فوقها،
   **وكلُّ خاصّيّةٍ تفرضها تلك القاعدةُ تُبطَل صراحةً** — فالغلبةُ الجزئيّة تترك ذيلاً. */
ul.products li.product a img.sny-c-flag,
.wc-block-product a img.sny-c-flag,
.sny-c-chip img.sny-c-flag {
  display: inline-block;
  width: 16px;
  height: 12px;
  min-width: 16px;
  max-width: 16px;
  aspect-ratio: auto;
  object-fit: cover;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 2px;
  transform: none;
  flex: 0 0 16px;
  /* 🔑 حدٌّ خفيفٌ لأنّ أعلاماً كثيرةً بيضاءُ الحواف فتذوب في السطح */
  box-shadow: 0 0 0 1px rgba(17, 18, 20, .12);
}

/* وحتّى لو مرّرت البطاقةُ التحويلَ على الصور، لا يكبر العلم */
ul.products li.product:hover a img.sny-c-flag,
.wc-block-product:hover a img.sny-c-flag { transform: none; }

/* ── الضريبة: تُقال ولا تزاحم السعر ── */
.sny-c-tax {
  margin-top: 2px;
  font-size: .72rem;
  color: var(--muted);
}

/* ── التوفّر: ثلاثُ حالاتٍ متمايزةٍ باللون **والأيقونة معاً** ──
   🔑 لا يُعتمد على اللون وحده — فمَن لا يميّز الألوان يقرأ الأيقونةَ والنصّ. */
.sny-c-avail {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s2, 8px);
  font-size: .8rem;
  line-height: 1.5;
}

.sny-c-i {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.sny-c-avail--in    { color: #1F7A5A; }
.sny-c-avail--back  { color: color-mix(in srgb, var(--gold) 78%, var(--ink)); }
.sny-c-avail--out   { color: var(--muted); }

/* السِّمةُ الداكنة: النصُّ الأخضرُ يفقد التباين على الكحليّ ⇒ يُفتَح */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sny-c-avail--in { color: #4FBF95; }
  :root:not([data-theme="light"]) .sny-c-flag { box-shadow: 0 0 0 1px rgba(248, 245, 238, .22); }
}
:root[data-theme="dark"] .sny-c-avail--in { color: #4FBF95; }
:root[data-theme="dark"] .sny-c-flag { box-shadow: 0 0 0 1px rgba(248, 245, 238, .22); }

/* ── العنوان: سطران بالضبط فلا تختلف أطوالُ البطاقات ──
   🔴 كان المحدِّدُ `.wp-block-post-title` عارياً ⇒ أصاب **عنوانَ كلّ صفحة**: اسمُ المنتج الطويل
   في صفحته مقصوصٌ لسطرين (65px ونصُّه 113 — يضيع الموديلُ في آخره)، و«سياسة الاستبدال
   والاسترجاع» مقصوصة، وبقيّةُ العناوين بفراغٍ زائد (مقيسٌ 18/09 على الجوّال) ⇒ حُصر في البطاقة. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wc-block-product .wp-block-post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}

/* 🔴 موديلٌ طويلٌ بلا مسافة (‏الزامل `HAZ18CCXROK-HRZ18CD8CIROK`) لا ينكسر فيمدّ العنوانَ
   خارج البطاقة ⇒ صفحتا المكيّفات أعرضُ من الجوال بـ29px (قِيس 18/09/2026).
   🔑 مستقلّةٌ عن القاعدة أعلاه عمداً: شبكةُ البلوكات تطبع العنوانَ `h2` داخل
      `li.wc-block-product` فلا يطابقه محدِّدُ `ul.products li.product` — قِيس أنّه لا يصل. */
.woocommerce-loop-product__title,
.wc-block-product .wp-block-post-title {
  overflow-wrap: anywhere;
}

/* ── الجوّال: الرقاقاتُ تلتفّ ولا تنزلق ──
   🔴 كانت تنزلق أفقيّاً فيُقصّ الموديلُ عند حافّة البطاقة («8ADA2DI-2» — مقيسٌ 18/09 بعرض 390)،
   ولا يعرف الزائرُ أنّها تُسحب. وبعد تنظيف عنوان الكتلة صارت الرقاقةُ الموضعَ الوحيدَ للموديل
   ⇒ تلتفّ، والموديلُ الطويلُ ينكسر داخل رقاقته. */
@media (max-width: 640px) {
  .sny-c-chips { flex-wrap: wrap; }
  .sny-c-chip--model { white-space: normal; overflow-wrap: anywhere; max-inline-size: 100%; }
  .sny-c-avail { font-size: .78rem; }
}

/* ── الطباعة والحركةُ المخفّضة ── */
@media print {
  .sny-c-chips, .sny-c-avail { color: #000; }
}

/* =========================================================
   شريطُ العلامات — لوحُ شعارٍ أبيض فوق الاسم والعدد (12/09/2026)
   🔑 اللوحُ أبيضُ في الوضعين عمداً: 30 من 56 شعاراً بلا خلفيّةٍ شفّافة.
   🔑 وعلامةٌ بلا شعار يحمل لوحُها اسمَها مكتوباً (`__word`) — لا شعاراً مخترَعاً.
   ========================================================= */
.sny-brands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--s2, 8px);
  margin: var(--s3, 12px) 0 0;
}

.sny-brands__logo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 8 / 3;
  background: #FFFFFF;
  border: 1px solid rgba(17, 18, 20, .07);
  border-radius: 6px;
  overflow: hidden;
}
/* شعارٌ أبيضُ على شفّاف يُعرض على لوحٍ داكن — بالحقل `sny_logo_plate`، لعلامةٍ بعينها */
.sny-brands__logo--dark {
  background: #111214;
  border-color: transparent;
}
.sny-brands__img {
  position: absolute;
  inset: 12% 9%;
  width: 82%;
  height: 76%;
  object-fit: contain;
}
.sny-brands__word {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-inline: 8px;
  color: #111214;               /* حبرٌ ثابتٌ على لوحٍ أبيضَ ثابت */
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
}
.sny-brands__word::after {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}
.sny-brands__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2, 8px);
  padding-inline: 2px;
}

.sny-brands__t {
  display: grid;
  align-content: start;
  gap: var(--s2, 8px);
  padding: 10px;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sny-brands__t:hover,
.sny-brands__t:focus-visible {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

/* 🔑 حلقةُ تركيزٍ ظاهرةٌ — التنقّلُ بلوحة المفاتيح ليس حالةً هامشيّة */
.sny-brands__t:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sny-brands__n {
  font-weight: 600;
  font-size: .95rem;
  color: var(--fg);
  line-height: 1.4;
}

.sny-brands__c {
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* بلاطةُ «الباقي» تُميَّز بحدٍّ متقطّعٍ فتُقرأ إجراءً لا علامة */
.sny-brands__t--more {
  border-style: dashed;
  background: transparent;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.sny-brands__c { white-space: nowrap; }

/* رأسُ صفحة العلامة: اللوحُ نفسُه بجانب العنوان وعدد المنتجات */
.sny-brandhead {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: var(--s5, 20px);
  align-items: center;
  margin-block: 0 var(--s4, 16px);
}
.sny-brandhead .wp-block-query-title { margin: 0; }
.sny-brandhead__c {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .95rem;
}
@media (max-width: 560px) {
  .sny-brandhead { grid-template-columns: 1fr; gap: var(--s3, 12px); }
  .sny-brandhead .sny-brands__logo { max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .sny-brands__t { transition: none; }
  .sny-brands__t:hover { transform: none; }
}

/* =========================================================
   صندوقُ شروط «حسب الطلب» — صفحةُ المنتج
   🔑 إطارٌ ذهبيٌّ خفيفٌ لا سطحٌ صارخ: هو **شرحُ شرطٍ** لا تحذير.
   ========================================================= */
.sny-bo {
  margin: var(--s4, 16px) 0;
  padding: var(--s3, 12px) var(--s4, 16px);
  background: color-mix(in srgb, var(--gold) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
  border-radius: var(--radius, 12px);
}

.sny-bo__h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--s2, 8px);
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
}

.sny-bo__i { width: 18px; height: 18px; flex: 0 0 auto; color: color-mix(in srgb, var(--gold) 80%, var(--ink)); }

.sny-bo__lead { margin: 0 0 var(--s2, 8px); color: var(--muted); font-size: .9rem; }

.sny-bo__list {
  margin: 0;
  padding-inline-start: 1.15em;
  display: grid;
  gap: 6px;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--fg);
}

.sny-bo__list li::marker { color: color-mix(in srgb, var(--gold) 75%, var(--ink)); }

.sny-bo__links { margin: var(--s2, 8px) 0 0; font-size: .78rem; }
.sny-bo__links a { color: var(--muted); }
.sny-bo__links a:hover, .sny-bo__links a:focus-visible { color: var(--fg); }

/* =========================================================
   صفحةُ الدخول — الجوّالُ أوّلاً
   ========================================================= */
.sny-login {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--s6, 24px);
  margin: 0 0 var(--s6, 24px);
}

.sny-login__card,
.sny-login__value {
  padding: var(--s6, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  background: var(--surface);
}

/* العمودُ الثاني أهدأ — فالبطاقةُ الأولى هي الفعل */
.sny-login__value { background: var(--surface-2); }

.sny-login__h { margin: 0 0 var(--s2, 8px); font-size: 1.15rem; font-weight: 700; }
.sny-login__lead { margin: 0 0 var(--s4, 16px); color: var(--muted); font-size: .92rem; line-height: 1.7; }
.sny-login__lead strong { color: var(--fg); }

.sny-login__form { display: grid; gap: var(--s2, 8px); }
.sny-login__lbl { font-size: .85rem; font-weight: 600; }

.sny-login__in {
  width: 100%;
  box-sizing: border-box;   /* بدونه تُضاف الحشوةُ فوق العرض فيبرز المربّعُ عن الزرّ 26px */
  padding: var(--s3, 12px);
  font-size: 1rem;
  font-family: var(--wp--preset--font-family--numeric, Inter, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 8px);
}

.sny-login__in:focus, .sny-login__in:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }

/* حقلُ الرمز: أربعةُ أرقامٍ كبيرةٌ متباعدة — يُقرأ ويُدقَّق بلمحة */
.sny-login__in--code {
  font-size: 1.6rem;
  letter-spacing: .5em;
  text-align: center;
  padding-inline-start: .5em;   /* يوازن التباعدَ الزائد على اليمين */
}

.sny-login__btn {
  padding: var(--s3, 12px) var(--s4, 16px);
  font-size: 1rem;
  font-weight: 700;
  color: var(--jade-fg, #fff);
  background: var(--jade, #14675E);
  border: 1px solid var(--jade, #14675E);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
}

.sny-login__btn:hover { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.sny-login__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sny-login__again { margin-top: var(--s2, 8px); }
.sny-login__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-size: .82rem; text-decoration: underline;
}
.sny-login__link:hover { color: var(--fg); }

.sny-login__msg {
  margin: 0 0 var(--s3, 12px);
  padding: var(--s2, 8px) var(--s3, 12px);
  border-radius: var(--radius-sm, 8px);
  font-size: .88rem;
  border: 1px solid var(--line);
}
.sny-login__msg.is-ok  { border-color: color-mix(in srgb, #1F7A5A 45%, var(--line)); color: #1F7A5A; }
.sny-login__msg.is-err { border-color: color-mix(in srgb, #C0392B 45%, var(--line)); color: #C0392B; }

.sny-login__list { margin: 0; padding-inline-start: 1.1em; display: grid; gap: var(--s2, 8px); font-size: .9rem; line-height: 1.7; }
.sny-login__list li::marker { color: var(--gold); }
.sny-login__note { margin: var(--s3, 12px) 0 0; font-size: .82rem; color: var(--muted); }

.sny-login__or {
  margin: var(--s6, 24px) 0 var(--s2, 8px);
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
}

@media (max-width: 860px) {
  .sny-login { grid-template-columns: 1fr; gap: var(--s4, 16px); }
  /* على الجوّال: بطاقةُ الدخول أوّلاً دائماً */
  .sny-login__value { order: 2; }
}

/* =========================================================
   «أبلغني عند التوفّر» على البطاقة — 06/09/2026
   🔴 كان زرُّ «حسب الطلب» بخلفيّة `rgb(13,34,51)` أي بلون الصفحة تقريباً: موجودٌ
      ولا يُرى. فصار محدَّداً بالذهبيّ — يُقرأ بلا أن ينافس زرَّ الشراء الفيروزيّ،
      فالبيعُ أوّلاً والالتقاطُ ثانياً.
   ========================================================= */
.sny-bo-card { display: grid; gap: 8px; }
.sny-bo-card__open {
  inline-size: 100%;
  min-block-size: 44px;
  padding: 12px 14px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--gold);
  font: inherit; font-weight: 700;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.sny-bo-card__open:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.sny-bo-card__open:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sny-bo-card__form { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
/* 🔴 `display:grid` يدهس `[hidden]` ⇒ النموذجُ مفتوحٌ في كلّ بطاقةٍ والزرُّ «أبلغني» بلا عمل
   (مقيسٌ 18/09: +126px على المكتبيّ و+156 على الجوّال). والمقصودُ في `backorder-notify.php`: مطويٌّ حتى النقر. */
.sny-bo-card__form[hidden], .sny-bo-card__open[hidden] { display: none; }
/* الجوّال: الحقلُ فوق الزرّ — بعمودين كان الحقلُ يضيق إلى «بريد». */
@media (max-width: 640px) { .sny-bo-card__form { grid-template-columns: 1fr; } }
.sny-bo-card__form input[type="email"] {
  min-block-size: 44px;
  min-inline-size: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg, transparent);
  color: var(--fg);
  font: inherit; font-size: 14px;
}
.sny-bo-card__form input[type="email"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sny-bo-card__send {
  min-block-size: 44px;
  padding-inline: 14px;
  border: 0; border-radius: var(--radius-sm, 8px);
  background: var(--gold); color: #10202e;
  font: inherit; font-weight: 700; cursor: pointer;
}
.sny-bo-card__send[disabled] { opacity: .6; cursor: default; }
/* 🔑 الرسالةُ تحتلّ العمودين — وإلّا انضغطت في عمودٍ عرضُه صفر */
.sny-bo-card__msg { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--muted); min-block-size: 1em; }

/* =========================================================
   شريطُ العلامات على الجوّال — صفٌّ يُمرَّر لا شبكةٌ تُطيل الصفحة
   🔴 قِيس 06/09/2026: 25 بلاطةً نصّيّةً تشغل **1,025px** على شاشة 390px — أطولُ
      من الشاشة نفسِها، بين «تسوّق حسب الفئة» و«أحدث ما وصل». وقُلّلت إلى 12 بلاطة،
      وصارت هنا صفّاً واحداً يُمرَّر بالإصبع.
   ========================================================= */
@media (max-width: 599px) {
  .sny-brands {
    display: flex;
    gap: var(--s2, 8px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block-end: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sny-brands::-webkit-scrollbar { display: none; }
  .sny-brands__t { flex: 0 0 46%; scroll-snap-align: start; }
}