/* ═══════════════════════════════════════════════════════════
   عين نون عين — لوحات العنوان الوطني الفاخرة
   ملف CSS الرئيسي — يوضع في: تخصيص الثيم ← CSS
   ═══════════════════════════════════════════════════════════
   التحكم السريع: عدّل المتغيرات في :root فقط
   ═══════════════════════════════════════════════════════════ */

:root {
  /* الهوية — مستوحاة من خامات اللوحات نفسها */
  --ann-gold:       #B98A2F;   /* ذهبي برونزي (ستيل ذهبي) */
  --ann-gold-light: #D9B45B;   /* ذهبي فاتح للتدرجات */
  --ann-ink:        #14161A;   /* أسود حديدي */
  --ann-steel:      #6E747C;   /* رمادي ستيل للنصوص الثانوية */
  --ann-bg:         #FFFFFF;   /* خلفية بيضاء نظيفة */
  --ann-card:       #FFFFFF;   /* خلفية البطاقات */

  /* أبعاد وتحكم */
  --ann-radius:     10px;      /* انحناء البطاقات والصور */
  --ann-cat-size:   150px;     /* أقصى حجم لصورة القسم */
  --ann-gap:        12px;      /* المسافة بين بطاقات الجوال */
}

/* ═══════ 1. الخلفية والهوية العامة ═══════ */
html, body,
.s-app, main, .main-content, .page-content {
  background-color: var(--ann-bg) !important;
}

/* عناوين الأقسام: خط ذهبي رفيع تحت العنوان — توقيع الهوية */
.s-block__title h2,
.s-block__title h1,
section h2.section-title,
[class*="block__title"] h2 {
  color: var(--ann-ink) !important;
  position: relative;
  padding-bottom: 10px !important;
}
.s-block__title h2::after,
[class*="block__title"] h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 48px;
  height: 2px;
  background: var(--ann-gold);
}

/* ═══════ 2. شريط الإعلان المتحرك ═══════ */
salla-marquee, .salla-marquee, s-marquee, .s-marquee,
[class*="marquee"]:not(.swiper-wrapper):not(.swiper-slide) {
  background: var(--ann-ink) !important;
  color: var(--ann-gold-light) !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  padding: 9px 0 !important;
}
salla-marquee *, .salla-marquee *, s-marquee *, .s-marquee * {
  color: var(--ann-gold-light) !important;
}

/* ═══════ 3. الأزرار الرئيسية ═══════ */
.s-button-primary,
button[class*="primary"],
salla-button[fill="solid"]::part(button),
.s-button-btn.s-button-primary {
  background-color: var(--ann-gold) !important;
  border-color: var(--ann-gold) !important;
  color: #fff !important;
  transition: background-color .2s ease, transform .15s ease;
}
.s-button-primary:hover,
button[class*="primary"]:hover {
  background-color: #A0772A !important;
  transform: translateY(-1px);
}

/* ═══════ 4. بطاقات المنتج ═══════
   يعتمد على العنصر الثابت custom-salla-product-card
   مع كلاسات ann-* التي يضيفها ملف JS المرافق          */
custom-salla-product-card,
.ann-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;              /* منع تمدد البطاقة بفراغ */
  align-self: start !important;
  max-width: 480px !important;          /* البطاقة المفردة في راس الصفحة تتوسط */
  margin-inline: auto !important;
  background: var(--ann-card) !important;
  border: 1px solid #EFE7D8 !important; /* إطار خفيف يفصل البطاقة عن الخلفية البيضاء */
  border-top: 2px solid var(--ann-gold) !important; /* حافة اللوحة المعدنية — توقيع */
  border-radius: var(--ann-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(20, 22, 26, .05);
  transition: box-shadow .25s ease, transform .25s ease;
}

/* الحاوية الأم: منع فرض ارتفاع طويل على البطاقة */
.swiper-slide {
  height: auto !important;
}
.ann-grid {
  align-items: start !important;
}
custom-salla-product-card:hover,
.ann-card:hover {
  box-shadow: 0 6px 18px rgba(185, 138, 47, .22);
  transform: translateY(-3px);
}

/* صور المنتجات: إطار ثابت 4:3 مع عرض اللوحة كاملة بدون قص */
custom-salla-product-card img,
.ann-card img,
.ann-card picture img,
.ann-card a > img,
.s-product-card-image img,
[class*="product-card"] img {
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  height: auto !important;
  max-height: 260px !important;      /* سقف لارتفاع الصورة */
  object-fit: contain !important;    /* يعرض اللوحة كاملة بدون بتر الأطراف */
  background: #FAF8F3 !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  border: 1px solid #EFE7D8 !important;      /* حواف حول الصورة */
  border-radius: 8px !important;
  margin: 8px auto 0 !important;
  width: calc(100% - 16px) !important;
}

/* حاوية الصورة: منع أي ارتفاع مفروض من الثيم */
.ann-card .s-product-card-image,
custom-salla-product-card .s-product-card-image,
.ann-card picture {
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* محتوى البطاقة: نص بالوسط ومضغوط — مثل توزيع أفكار مودرن */
custom-salla-product-card .s-product-card-content,
.ann-card .s-product-card-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;   /* حتى لا ينكمش زر السلة */
  text-align: center !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  padding: 10px 10px 0 !important;
}

/* عنوان المنتج: بالوسط وبسطرين كحد أقصى */
.ann-card .s-product-card-content h3,
.ann-card .s-product-card-content a,
custom-salla-product-card [class*="title"] {
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* زر إضافة للسلة: شريط ذهبي كامل بأسفل البطاقة */
.ann-card salla-add-product-button,
custom-salla-product-card salla-add-product-button,
.ann-card [class*="add-to-cart"],
.ann-card .s-button-wrap {
  display: block !important;
  width: calc(100% - 20px) !important;
  margin: 10px auto 12px !important;
}
.ann-card salla-add-product-button button,
.ann-card salla-add-product-button::part(button),
custom-salla-product-card salla-add-product-button button,
.ann-card [class*="add-to-cart"] button {
  width: 100% !important;
  background-color: var(--ann-gold) !important;
  border-color: var(--ann-gold) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 14px 0 !important;                 /* زر أطول */
  min-height: 48px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.ann-card salla-add-product-button button:hover {
  background-color: #A0772A !important;
}

/* إخفاء الوصف الفرعي لتوحيد ارتفاع البطاقات */
.s-product-card-content .s-product-card-subtitle,
custom-salla-product-card [class*="subtitle"] {
  display: none !important;
}

/* السعر */
.s-product-card-price,
[class*="product-card"] [class*="price"] {
  color: var(--ann-ink) !important;
  font-weight: 700 !important;
}

/* ═══════ 5. شبكة عمودين على الجوال ═══════
   ann-grid يضيفها JS بعد تعطيل السلايدر،
   والمحددات المباشرة احتياط في حال تأخر JS */
@media (max-width: 768px) {
  .ann-grid,
  salla-products-slider .swiper-wrapper,
  .s-block--best-offers .swiper-wrapper,
  [class*="products-slider"] .swiper-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: start !important;
    gap: var(--ann-gap) !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
  }
  .ann-grid > *,
  salla-products-slider .swiper-slide,
  .s-block--best-offers .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: auto !important;
  }
  /* إخفاء أسهم وترقيم السلايدر على الجوال */
  salla-products-slider .swiper-button-next,
  salla-products-slider .swiper-button-prev,
  salla-products-slider .swiper-pagination,
  .s-block--best-offers .swiper-button-next,
  .s-block--best-offers .swiper-button-prev {
    display: none !important;
  }
  /* صور أصغر داخل شبكة العمودين */
  .ann-card img,
  custom-salla-product-card img {
    max-height: 170px !important;
    padding: 6px !important;
  }
  /* مسافة سفلية تمنع تداخل زر الواتساب مع آخر بطاقة */
  main, .page-content { padding-bottom: 90px !important; }
}

/* ═══════ 6. الأقسام: مربعة مع الاسم أسفلها ═══════ */
.s-block--fixed-categories a,
.s-block--categories a,
[class*="categor"] a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.s-block--fixed-categories img,
.s-block--categories img,
[class*="categor"] a img,
[class*="categor"] .rounded-full {
  border-radius: var(--ann-radius) !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  max-width: var(--ann-cat-size) !important;
  height: auto !important;
  object-fit: cover !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
.s-block--fixed-categories a:hover img,
.s-block--categories a:hover img,
[class*="categor"] a:hover img {
  box-shadow: 0 0 0 2px var(--ann-gold);
  transform: translateY(-2px);
}
.s-block--fixed-categories a span,
.s-block--categories a span,
[class*="categor"] a span,
[class*="categor"] a p,
[class*="categor"] h3 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ann-ink) !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}

/* ═══════ 7. أنيميشن الظهور عند التمرير ═══════ */
.ann-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.ann-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ann-reveal:nth-child(2) { transition-delay: .08s; }
.ann-reveal:nth-child(3) { transition-delay: .16s; }
.ann-reveal:nth-child(4) { transition-delay: .24s; }

/* ═══════ 8. الفوتر ═══════ */
footer, .s-footer {
  background-color: var(--ann-ink) !important;
}
footer *, .s-footer * {
  color: #E8E6E1 !important;
}
footer a:hover, .s-footer a:hover {
  color: var(--ann-gold-light) !important;
}

/* ═══════ 9. احترام تقليل الحركة ═══════ */
@media (prefers-reduced-motion: reduce) {
  .ann-reveal,
  custom-salla-product-card,
  .ann-card {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  salla-marquee [class*="marquee"] { animation: none !important; }
}

/* ═══════ 10. الأيقونات: ذهبية ومنسقة ═══════ */
/* أيقونات البطاقة (المفضلة والمعاينة): دائرة بيضاء بإطار وأيقونة ذهبية */
.ann-card salla-button[shape="icon"] button,
.ann-card salla-button[shape="icon"]::part(button),
.ann-card [class*="wishlist"] button,
.ann-card [class*="wishlist"],
.ann-card button[aria-label*="wishlist"],
.ann-card [class*="quick"] button {
  background: #FFFFFF !important;
  border: 1px solid rgba(185, 138, 47, .35) !important;
  color: var(--ann-gold) !important;
  box-shadow: 0 1px 4px rgba(20, 22, 26, .08) !important;
}
.ann-card salla-button[shape="icon"] i,
.ann-card salla-button[shape="icon"] svg,
.ann-card [class*="wishlist"] i,
.ann-card [class*="wishlist"] svg,
.ann-card [class*="quick"] i {
  color: var(--ann-gold) !important;
  fill: var(--ann-gold) !important;
}

/* أيقونات الهيدر (السلة، البحث، الحساب) */
header i, .s-header i,
header svg, .s-header svg,
salla-cart-summary i,
salla-cart-summary::part(icon),
header [class*="icon"] {
  color: var(--ann-gold) !important;
  fill: var(--ann-gold) !important;
}

/* أيقونات الفوتر */
footer i, .s-footer i, footer svg {
  color: var(--ann-gold-light) !important;
  fill: var(--ann-gold-light) !important;
}

/* ═══════ 11. صفحة المنتج: تنسيق الوصف بعد نقله تحت الخيارات ═══════ */
.product__description h2,
.product__description h3,
.s-product-description h2,
.s-product-description h3,
[class*="product__description"] h3 {
  color: var(--ann-ink) !important;
  font-weight: 700 !important;
  margin: 18px 0 8px !important;
  padding-right: 10px !important;
  border-right: 3px solid var(--ann-gold) !important;  /* شرطة ذهبية قبل كل عنوان */
}
.product__description,
.s-product-description {
  line-height: 1.9 !important;
  color: #2A2D33 !important;
}

/* ═══════ 12. حقل رمز العنوان الوطني الإجباري (صفحة المنتج) ═══════ */
#ann-address-field {
  margin: 18px 0;
  text-align: right;
}
.ann-af-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ann-ink);
  margin-bottom: 4px;
}
.ann-af-req { color: #C0392B; }
.ann-af-help {
  font-size: 13px;
  color: var(--ann-steel);
  line-height: 1.7;
  margin: 0 0 10px;
}
.ann-af-input {
  width: 100%;
  padding: 13px 14px;
  font-size: 14px;
  color: var(--ann-ink);
  background: #FFFFFF;
  border: 1px solid #D8D2C4;
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ann-af-input:focus {
  outline: none;
  border-color: var(--ann-gold);
  box-shadow: 0 0 0 3px rgba(185, 138, 47, .15);
}
.ann-af-input.ann-af-invalid {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}
.ann-af-error {
  font-size: 13px;
  color: #C0392B;
  margin: 6px 0 0;
}

/* ═══════ 13. إصلاحات الجوال الشاملة: المقاسات وترتيب العناصر ═══════ */
@media (max-width: 768px) {

  /* منع التمرير الأفقي نهائياً (سبب أغلب مشاكل المقاسات) */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  img, video, iframe {
    max-width: 100% !important;
    height: auto;
  }

  /* حواف الصفحة موحدة */
  .container, .s-block, section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* مقاس الخطوط: متدرج ومقروء */
  body { font-size: 14px !important; }
  h1 { font-size: 22px !important; line-height: 1.4 !important; }
  h2, .s-block__title h2 { font-size: 18px !important; line-height: 1.4 !important; }
  h3 { font-size: 15px !important; }

  /* البانر الرئيسي: ارتفاع تلقائي بدون قص أو فراغ */
  .s-slider-block img,
  [class*="banner"] img,
  [class*="hero"] img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  /* ── بطاقات المنتج داخل شبكة العمودين: مقاسات مضبوطة ── */
  .ann-card,
  custom-salla-product-card {
    max-width: 100% !important;      /* داخل الشبكة تأخذ عرض العمود كاملاً */
    border-radius: 8px !important;
  }
  .ann-card .s-product-card-content,
  custom-salla-product-card .s-product-card-content {
    padding: 8px 8px 0 !important;
    gap: 4px !important;
  }
  .ann-card .s-product-card-content h3,
  .ann-card .s-product-card-content a {
    font-size: 13px !important;
    min-height: 38px !important;     /* سطران ثابتان لتساوي البطاقات */
  }
  .s-product-card-price,
  [class*="product-card"] [class*="price"] {
    font-size: 14px !important;
  }
  .ann-card salla-add-product-button button {
    padding: 11px 0 !important;
    min-height: 42px !important;
    font-size: 13px !important;
  }
  /* أيقونات المفضلة/المعاينة أصغر على الجوال */
  .ann-card salla-button[shape="icon"] button {
    width: 32px !important;
    height: 32px !important;
  }

  /* ── الأقسام: 3 أعمدة مرتبة على الجوال ── */
  .s-block--fixed-categories .swiper-wrapper,
  .s-block--categories .swiper-wrapper,
  .s-block--fixed-categories > div > div,
  .s-block--categories > div > div {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    transform: none !important;
  }
  .s-block--fixed-categories img,
  .s-block--categories img {
    max-width: 100% !important;
  }
  .s-block--fixed-categories a span,
  .s-block--categories a span {
    font-size: 12px !important;
    margin-top: 6px !important;
  }

  /* ── صفحة المنتج: ترتيب ومقاسات ── */
  /* الترتيب الطبيعي: الصور ← السعر والخيارات والأزرار ← الوصف (JS ينقل الوصف) */
  #ann-address-field { margin: 14px 0 !important; }
  .ann-af-input { font-size: 16px !important; }  /* 16px يمنع تكبير iOS التلقائي عند الكتابة */

  /* أزرار الشراء: عرض كامل فوق بعض */
  salla-add-product-button,
  salla-quick-buy,
  [class*="buy-now"] {
    display: block !important;
    width: 100% !important;
    margin: 6px 0 !important;
  }
  salla-add-product-button button {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* عداد الكمية: حجم لمس مريح */
  salla-quantity-input button,
  [class*="quantity"] button {
    min-width: 42px !important;
    min-height: 42px !important;
  }

  /* الوصف بعد نقله: بدون تمدد خارج الشاشة */
  .product__description,
  .s-product-description {
    font-size: 14px !important;
    word-break: break-word !important;
  }
  .product__description table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  /* ── الفوتر: عمود واحد مرتب ── */
  footer .container > div,
  .s-footer .container > div {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: center !important;
  }

  /* ── زر الواتساب: مقاس مناسب وموضع آمن ── */
  a[href*="wa.me"],
  [class*="whatsapp"] {
    transform: scale(0.85) !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
}

/* شاشات صغيرة جداً (أقل من 360px): عمود واحد للبطاقات */
@media (max-width: 359px) {
  .ann-grid,
  salla-products-slider .swiper-wrapper {
    grid-template-columns: 1fr !important;
  }
}