/* =========================
   Theme Variables (Brand)
   ========================= */
:root {
  --color-main-bg: #e4ded8;        /* الخلفية العامة */
  --color-primary: #c9b485;        /* الذهبي البيج */
  --color-primary-dark: #b8a06e;   /* درجة أغمق للتحويم */
  --color-text-dark: #2f2f2f;      /* لون النصوص */
  --color-white: #ffffff;
  --color-neutral-800: #374151;
}

/* =========================
   HERO full-viewport banner
   ========================= */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;              /* يملأ شاشة الجوال/الدسكتوب */
  min-height: 60rem;           /* حد أدنى لسطح المكتب */
  overflow: hidden;
}
@media (max-width: 768px) {
  .hero { min-height: 70svh; } /* موبايل */
}
.hero-track { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 800ms ease;
  display: grid;
  place-items: center;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-caption {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1rem 1.5rem;
  color: #e4ded8;
  max-width: min(90ch, 92vw);
  backdrop-filter: saturate(120%) blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* =========================
   خلفية الموقع العامة
   ========================= */
body,
.store-wrapper,
.page-wrapper,
.main-content {
  background-color: var(--color-main-bg) !important;
  color: var(--color-text-dark);
}

/* =========================
   Header / Top Navbar
   ========================= */
.top-navbar {
  background-color: var(--color-primary) !important;
  color: var(--color-text-dark) !important;
}
.top-navbar .s-search-input {
  border: none;
  background-color: var(--color-white);
  color: #111;
}
/* انعكاس الهيدر عند التفاعل */
.top-navbar:is(:hover, :focus-within) {
  background-color: #000 !important;
  color: var(--color-primary) !important;
}
.top-navbar a { color: inherit !important; }
.top-navbar a:is(:hover, :focus-visible) { color: var(--color-primary) !important; }

/* =========================
   Footer
   ========================= */
.store-footer {
  position: relative;
  margin-top: 2rem;
  border-radius: 40px 40px 0 0;
  background-color: var(--color-primary) !important;
  color: var(--color-text-dark) !important;
}
.store-footer__inner {
  border-radius: 40px 40px 0 0;
  border-bottom: 1px dashed rgba(0, 0, 0, .15);
  background-color: var(--color-primary) !important;
  padding-block: 2rem;
  margin-top: 10px;
}
.store-footer__inner ~ div { background-color: var(--color-primary) !important; }
.store-footer__inner ~ div * { color: var(--color-text-dark) !important; }

/* =========================
   Buttons (موحدة + انعكاس)
   ========================= */
button,
.s-button,
.s-button-outline,
.s-btn,
a.button,
a.s-button,
input[type="button"],
input[type="submit"] {
  background-color: var(--color-primary) !important;  /* ذهبي */
  color: #000 !important;                              /* نص أسود */
  border: 1px solid var(--color-primary) !important;
  border-radius: 6px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease !important;
}
button svg, .s-button svg, .s-button-outline svg, .s-btn svg,
a.button svg, a.s-button svg,
input[type="button"] svg, input[type="submit"] svg,
button i, .s-button i, .s-button-outline i, .s-btn i,
a.button i, a.s-button i {
  fill: currentColor !important;
  color: currentColor !important;
}
button:is(:hover, :focus-visible, :active),
.s-button:is(:hover, :focus-visible, :active),
.s-button-outline:is(:hover, :focus-visible, :active),
.s-btn:is(:hover, :focus-visible, :active),
a.button:is(:hover, :focus-visible, :active),
a.s-button:is(:hover, :focus-visible, :active),
input[type="button"]:is(:hover, :focus-visible, :active),
input[type="submit"]:is(:hover, :focus-visible, :active) {
  background-color: #000 !important;
  color: var(--color-primary) !important;
  border-color: #000 !important;
  transform: translateY(-1px);
}
/* حالة لمس الجوال (تعمل مع JS) */
button.is-pressed,
.s-button.is-pressed,
.s-button-outline.is-pressed,
.s-btn.is-pressed,
a.button.is-pressed,
a.s-button.is-pressed,
input[type="button"].is-pressed,
input[type="submit"].is-pressed {
  background-color: #000 !important;
  color: var(--color-primary) !important;
  border-color: #000 !important;
}
/* عناصر داخل الأزرار ترث اللون */
button *,.s-button *,.s-button-outline *,.s-btn *,
a.button * ,a.s-button *,
input[type="button"] * ,input[type="submit"] * {
  color: inherit !important;
  fill: inherit !important;
}

/* =========================
   Cart Button (Header)
   ========================= */
.s-cart-summary-wrapper .header-btn__icon {
  border: 1px solid var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: #000 !important;
}
/* حركة عدّاد السلة */
.s-cart-summary-wrapper span { animation: cart 4s infinite; }
@keyframes cart { 0%,100%{transform:translate(0,0);} 50%{transform:translate(0,-8px);} }
@media (prefers-reduced-motion: reduce) { .s-cart-summary-wrapper span { animation: none; } }

/* =========================
   إخفاء أزرار واتساب والسلة الجانبية
   ========================= */
.whatsapp-button,
.cart-button { display: none !important; }

/* =========================
   Category Cards
   ========================= */
.slide--cat-entry {
  display: flex;
  height: 9rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background-color: var(--color-white);
  color: var(--color-text-dark);
  padding: .75rem;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.slide--cat-entry:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

/* =========================
   Icons
   ========================= */
.sicon-add_row_before:before,
.sicon-add_col_before:before,
.sicon-doh:before,
.sicon-film-reel:before,
.sicon-add_row_after:before,
.sicon-border-all:before {
  content: "";
  display: inline-block;
  inline-size: 100px;
  block-size: 100px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sicon-add_row_before:before  { background-image: url("https://i.ibb.co/LQL1bjv/i4.png"); }
.sicon-add_col_before:before  { background-image: url("https://i.ibb.co/42HKC1M/i5.png"); }
.sicon-doh:before             { background-image: url("https://i.ibb.co/McMbpbg/i1.png"); }
.sicon-film-reel:before       { background-image: url("https://i.ibb.co/yBnksTt/i2.png"); }
.sicon-add_row_after:before   { background-image: url("https://i.ibb.co/Wy1N0xv/i3.png"); }
.sicon-border-all:before      { background-image: url("https://i.ibb.co/1bWRRJh/i6.png"); }

/* =========================
   Wishlist (قلب) — إخفاء شامل
   ========================= */
.product-card [class*="wish" i],
.product-card [class*="heart" i],
.product-card [class*="fav" i],
.product-card [class*="like" i],
.product-item  [class*="wish" i],
.product-item  [class*="heart" i],
.product-item  [class*="fav" i],
.product-item  [class*="like" i],
[class*="wishlist" i],
[class*="wish-list" i],
[class*="favorite" i],
[class*="favourite" i],
[class*="heart" i],
button[aria-label*="wish" i],
a[aria-label*="wish" i],
button[title*="wish" i],
a[title*="wish" i],
button[aria-label*="favorite" i],
a[aria-label*="favorite" i],
[data-wishlist],
[data-favorite] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
[class*="wish" i]::before,
[class*="wish" i]::after,
[class*="heart" i]::before,
[class*="heart" i]::after { content: none !important; background: none !important; }
.product-card [class*="badge" i][class*="heart" i],
.product-card [class*="badge" i][class*="wish" i],
.product-item  [class*="badge" i][class*="heart" i],
.product-item  [class*="badge" i][class*="wish" i] { display: none !important; }
.product-card svg[class*="heart" i],
.product-item  svg[class*="heart" i] { display: none !important; }

/* =========================================================
   Salla product card: caption box under image (body/content/info/footer)
   أبيض 50% + نص أسود (صريح وغير مكرر)
   ========================================================= */
.s-product-card { background: transparent !important; overflow: hidden; }
.s-product-card__body,
.s-product-card__content,
.s-product-card__info,
.s-product-card__footer {
  background: rgba(255,255,255,0.5) !important;  /* أبيض 50% */
  color: #000 !important;                         /* نص أسود */
  -webkit-backdrop-filter: saturate(120%) blur(0px);
  backdrop-filter: saturate(120%) blur(0px);
  border-radius: 12px;
}
.s-product-card__body *,
.s-product-card__content *,
.s-product-card__info *,
.s-product-card__footer * {
  color: #000 !important;
  fill: #000 !important;
}
.s-product-card__body::before,
.s-product-card__body::after,
.s-product-card__content::before,
.s-product-card__content::after,
.s-product-card__info::before,
.s-product-card__info::after,
.s-product-card__footer::before,
.s-product-card__footer::after {
  content: none !important;
  background: none !important;
}
/* لا تغيّر صورة المنتج */
.s-product-card__media,
.s-product-card__media img,
.s-product-card picture,
.s-product-card img {
  background: transparent !important;
}

/* =========================
   Alternating page sections (scoped with hero excluded)
   ========================= */

/* الفردي: فاتح — استثنينا .hero حتى لا تدخل في العد */
.main-content > section:not(.hero),
.main-content > .s-section:not(.hero),
.main-content > .store-section:not(.hero),
.main-content > .product-section:not(.hero),
.main-content > .collection-section:not(.hero),
.page-wrapper  > section:not(.hero),
.page-wrapper  > .s-section:not(.hero),
.page-wrapper  > .store-section:not(.hero),
.page-wrapper  > .product-section:not(.hero),
.page-wrapper  > .collection-section:not(.hero) {
  background-color: #e4ded8 !important;
  color: #2f2f2f !important;
}

/* الزوجي: أسود + نص فاتح */
.main-content > section:not(.hero):nth-of-type(even),
.main-content > .s-section:not(.hero):nth-of-type(even),
.main-content > .store-section:not(.hero):nth-of-type(even),
.main-content > .product-section:not(.hero):nth-of-type(even),
.main-content > .collection-section:not(.hero):nth-of-type(even),
.page-wrapper  > section:not(.hero):nth-of-type(even),
.page-wrapper  > .s-section:not(.hero):nth-of-type(even),
.page-wrapper  > .store-section:not(.hero):nth-of-type(even),
.page-wrapper  > .product-section:not(.hero):nth-of-type(even),
.page-wrapper  > .collection-section:not(.hero):nth-of-type(even) {
  background-color: #000 !important;
  color: #e4ded8 !important;
}

/* اجعل عناصر الأقسام ترث لون النص */
.main-content > *:not(.hero):nth-of-type(even) *,
.page-wrapper  > *:not(.hero):nth-of-type(even) * {
  color: inherit !important;
}

/* ملاحظة: صناديق وصف المنتج تبقى أبيض 50% + نص أسود كما هو أعلاه. */

/* ===== Alternating backgrounds via classes (JS) ===== */
:root {
  --alt-light: #e3ded8; /* بناءً على طلبك: افتح من السابق */
  --alt-dark:  #000000;
  --alt-dark-text: #e4ded8; /* نص على خلفية سوداء */
}

.alt-odd {
  background-color: var(--alt-light) !important;
  color: #2f2f2f !important;
}
.alt-even {
  background-color: var(--alt-dark) !important;
  color: var(--alt-dark-text) !important;
}
.alt-even * { color: inherit !important; }

/* تأكيد: صناديق وصف المنتج تظل أبيض 50% + نص أسود كما ضبطنا سابقًا */
.s-product-card__body,
.s-product-card__content,
.s-product-card__info,
.s-product-card__footer,
.card-body,
.card__content {
  background: rgba(255,255,255,0.5) !important;
  color: #000 !important;
}
/* تعطيل أي تلوين قديم يعتمد nth-of-type للأقسام */
section, .s-section, .store-section, .product-section, .collection-section { background: transparent !important; }
/* Lock footer colors regardless of alternating backgrounds */
footer, .store-footer, .store-footer__inner, .site-footer, .s-footer, .page-footer, [role="contentinfo"] {
  background-color: var(--color-primary) !important;
  color: var(--color-text-dark) !important;
}
/* احتياطي: لو أضفنا كلاس يدويًا مستقبلًا */
.sec-dark { background:#000 !important; color:#e4ded8  !important; }
.sec-dark * { color:inherit !important; }



document.addEventListener('DOMContentLoaded', () => {
  // أخفِ كل العناصر المعروفة لعداد التقييمات
  const sel = [
    '.rating-count','.reviews-count','.review-count',
    '.s-review-count','.s-rating-count','.s-rating__count','.s-product-rating__count',
    '.s-product-card__rating .count','.product-rating .count','.product__rating .count',
    '[itemprop="ratingCount"]','[data-rating-count]'
  ].join(',');

  document.querySelectorAll(sel).forEach(el => {
    el.style.display = 'none';
    el.setAttribute('aria-hidden','true');
  });

  // احذف أي نص عددي على هيئة "(12)" ملاصق للنجوم
  const wrappers = document.querySelectorAll('.s-product-card__rating, .product-rating, .rating, .s-rating');
  wrappers.forEach(w => {
    [...w.childNodes].forEach(n => {
      if (n.nodeType === 3 && /\(\s*\d+\s*\)/.test(n.textContent)) {
        n.textContent = '';
      }
    });
  });
});
/* أبقِ النجوم ظاهرة كما هي */
.s-product-card__rating .stars,
.product-rating .stars,
.rating .stars {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* =========================
   1) Reviews / Q&A / Comments backgrounds
   ========================= */

/* حاويات الآراء/الأسئلة في صفحات المنتج */
:where(.product-page, .product-single, .product, .s-product, body)
  :is(#reviews, .reviews, .s-reviews, .product-reviews,
      #questions, .questions, .product-questions, .s-qa,
      .qa, .faq, .qna,
      .review-tabs, .s-review-tabs, .reviews-wrapper) {
  background-color: #e4ded8 !important;
  color: #2f2f2f !important;
}

/* البطاقات الداخلية (تعليق/سؤال/إجابة/مراجعة) */
:where(#reviews, .reviews, .product-reviews, .questions, .product-questions, .s-qa, .reviews-wrapper)
  :is(.review, .review-item, .s-review-card, .s-review, .comment, .reply,
      .question, .answer, .qa-item, .s-comment-card, .s-qa-card,
      .list, .items, .item, .card) {
  background-color: #e4ded8 !important;
  color: #2f2f2f !important;
  border: none !important;
  box-shadow: none !important;
}

/* نماذج إضافة التقييم/السؤال */
:where(#reviews, .reviews, .product-reviews, .questions, .product-questions, .s-qa)
  :is(form, .s-form, .form, .add-review, .add-question, .form-card){
  background-color: #e4ded8 !important;
  color: #2f2f2f !important;
  border: none !important;
}

/* تأكيد لون النص داخل العناصر الداخلية */
:where(#reviews, .reviews, .product-reviews, .questions, .product-questions, .s-qa)
  :is(h1,h2,h3,h4,h5,p,span,small,li,a,div,em,strong,label,textarea,input){
  color: #2f2f2f !important;
}

/* إبقاء لون النجوم كما هو */
:where(#reviews, .reviews, .product-reviews, .questions, .product-questions, .s-qa)
  :is(.stars, .rating, .s-rating, [class*="stars" i]){
  opacity: 1 !important;
}

/* =========================
   2) Blog/Article comments background
   ========================= */
:where(.blog, .article, .post, .s-article, body)
  :is(#comments, .comments, .post-comments, .article-comments, .s-comments){
  background-color: #e4ded8 !important;
  color: #2f2f2f !important;
}
:where(#comments, .comments, .post-comments, .article-comments, .s-comments)
  :is(.comment, .comment-item, .s-comment-card, .reply, .comment-form, form){
  background-color: #e4ded8 !important;
  color: #2f2f2f !important;
  border: none !important;
}

/* =========================
   3) Option menus & dropdowns
   ========================= */

/* القوائم المنسدلة العامة والمنتج */
:where(.product, .s-product, body)
  :is(select, .s-select, .variant-select, .product-options select,
      .s-variant__select, .filters select, .s-filters select){
  background-color: #c9b485 !important;
  color: #000 !important;
  border: 1px solid #c9b485 !important;
  border-radius: 8px !important;
}

/* أزرار الخيارات (مثل مقاسات/نَكهات/أنواع) */
:where(.product, .s-product, body)
  :is(.option, .product-options, .variants, .s-variants, .variant-options, .s-options)
  :is(button, .s-option, .option-btn, .variant-option, .swatch, .value button, label){
  background-color: #c9b485 !important;
  color: #000 !important;
  border: 1px solid #c9b485 !important;
  border-radius: 8px !important;
}

/* حالة التفعيل/التحديد لعناصر الخيارات */
:where(.product, .s-product)
  :is(.is-active, [aria-pressed="true"], input:checked + label, .selected){
  background-color: #000 !important;
  color: #c9b485 !important;
  border-color: #000 !important;
}

/* قوائم منسدلة منبثقة (إن وُجدت) */
:where(.dropdown-menu, .s-dropdown-menu, .menu--dropdown){
  background-color: #c9b485 !important;
  color: #000 !important;
}
:where(.dropdown-menu, .s-dropdown-menu, .menu--dropdown) a,
:where(.dropdown-menu, .s-dropdown-menu, .menu--dropdown) li{
  color: #000 !important;
}