/* ===========================
   0) متغيّرات عامة (قابلة للتعديل)
   =========================== */
:root{
  --black:#000;
  --white:#fff;
  --line:#e6e6e6;
  --radius:12px;

  /* أحجام البنرات (لم نعد نستخدمها للارتفاع؛ أبقيناها مرجعًا فقط) */
  --hero-h:auto;        /* كان 260px */
  --subbanner-h:auto;   /* كان 160px */
}

/* ===========================
   1) أساسيات عامة
   =========================== */
html,body{
  background:var(--white) !important;
  color:var(--black) !important;
  font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif !important;
  line-height:1.65;
}
a{ color:var(--black); text-decoration:none }
a:hover{ opacity:.85 }

/* ===========================
   2) رأس الصفحة (Header/Nav)
   الهدف: كل شيء أبيض عدا اللوجو
   =========================== */
.header, .site-header, .navbar, .header-bar{
  background:var(--black) !important;
  color:var(--white) !important;
  border:0 !important;
}

/* الروابط/الأزرار/النصوص داخل الهيدر */
.header a, .site-header a, .navbar a,
.header .action, .site-header .action, .navbar .action,
.header .header-icons a, .navbar .header-icons a,
.header .account, .header .cart, .header .search {
  color:var(--white) !important;
  opacity:1 !important;
}

/* أيقونات كخط (::before) */
.header [class*="icon"]:before,
.site-header [class*="icon"]:before,
.navbar [class*="icon"]:before,
.header i[class*="icon-"], .site-header i[class*="icon-"], .navbar i[class*="icon-"]{
  color:var(--white) !important;
}

/* SVG بجميع أجزائه */
.header svg, .site-header svg, .navbar svg,
.header svg *, .site-header svg *, .navbar svg *{
  fill:var(--white) !important;
  stroke:var(--white) !important;
  color:var(--white) !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* صور داخل الأيقونات (img) نقلبها أبيض */
.header .icon img, .site-header .icon img, .navbar .icon img,
.header .header-icons img, .navbar .header-icons img,
.header .actions img, .site-header .actions img, .navbar .actions img{
  filter:brightness(0) invert(1) !important;
}

/* اللوجو يبقى طبيعي (لا تعكسه) */
.header .logo img, .site-header .logo img, .navbar .logo img{
  filter:none !important;
  height:34px; width:auto; display:block;
}

/* عدّاد السلة */
.cart-count, .badge--count, .cart-icon .count,
.header .count, .site-header .count, .navbar .count{
  background:var(--white) !important;
  color:var(--black) !important;
  border-radius:999px; min-width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:11px;
  transform:translate(6px,-6px);
}

/* توزيع العناصر داخل الهيدر (يتعامل مع اختلاف مسميات القوالب) */
.header .container, .site-header .container, .navbar .container,
.header .wrapper, .site-header .wrapper, .navbar .wrapper{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.header-actions, .nav-actions, .header_icons, .site-header_icons, .header-icons{
  display:flex; align-items:center; gap:14px;
}

/* شريط الإعلان أعلى الهيدر */
.announcement-bar, .topbar, .promo-bar{
  background:var(--black) !important;
  color:var(--white) !important;
}
.announcement-bar a{ color:var(--white) !important }

/* ===========================
   3) البنرات — (مقاس الصورة الأصلي بدون تصغير)
   =========================== */

/* الحاويات: بدون ارتفاع ثابت، ارتفاعها يتبع الصورة */
.hero, .hero-section, .banner--hero, .main-hero, .slideshow,
.banner, .category-banner, .brand-banner, .promo-banner{
  width:100% !important;
  height:auto !important;              /* إلغاء أي ارتفاع مفروض */
  border-radius:var(--radius);
  overflow:visible;                    /* لا نقص أي جزء من الصورة */
  display:block;                       /* سلوك طبيعي */
  background:transparent;              /* بدون خلفية رمادية */
  padding:0;
  margin-block:10px;
  text-align:center;                   /* لتوسيط الصور الأضيق من الحاوية */
}

/* الصور: تُعرض بحجمها الأصلي، وتتقلّص فقط إذا كانت أعرض من الحاوية */
.hero img, .banner--hero img, .main-hero img, .slideshow img,
.banner img, .category-banner img, .brand-banner img, .promo-banner img{
  width:auto !important;               /* عدم التمدّد عرضيًا */
  height:auto !important;              /* عدم التمدّد طوليًا */
  max-width:100% !important;           /* تقلّص بشكل Responsive عند اللزوم */
  max-height:none !important;          /* بدون سقف للارتفاع */
  object-fit:contain !important;       /* لا قصّ */
  display:inline-block;                /* يسمح بالتوسيط */
  margin:0 auto;                       /* توسيط أفقي */
  aspect-ratio:auto !important;        /* إلغاء أي نسبة مفروضة */
}

/* (اختياري) صنّف خاص لبنر تريد له ملء الإطار مع قصّ مدروس */
.cover-banner img{
  width:100% !important;
  height:420px !important;             /* عدّل حسب حاجتك */
  object-fit:cover !important;
  display:block;
}

/* ===========================
   4) الأقسام (بطاقات سوداء)
   =========================== */
.section-cards, .categories, .collection-categories{
  display:grid; gap:12px;
}
.category-card, .category-box, .collection-categories .item{
  background:var(--black) !important; color:var(--white) !important;
  border-radius:12px; padding:12px; text-align:center;
}
.category-card a, .category-box a{ color:var(--white) !important }
.category-card img, .category-box img{
  max-width:100%; height:auto; display:block; margin-inline:auto;
}

/* ===========================
   5) المنتجات
   =========================== */
.product-card, .product-item, .card-product, .product{
  background:var(--white); border:1px solid var(--line) !important;
  border-radius:12px; overflow:hidden;
}
.product-card:hover, .product-item:hover{ box-shadow:0 6px 18px rgba(0,0,0,.07) }
.product-card .title, .product-title{
  color:var(--black) !important; font-weight:700; font-size:14px; line-height:1.35;
}
.product-card .brand, .product-vendor{ color:#666; font-size:12px }

/* الأسعار – الأسود دايمًا */
.price, .product-price{ display:flex; gap:8px; align-items:baseline; margin-top:6px }
.price .now, .price-new{ color:var(--black) !important; font-weight:900; font-size:16px }
.price .was, .price-old{ color:#9a9a9a !important; text-decoration:line-through }

/* زر أضف للسلة: أبيض بإطار أسود */
.add-to-cart, .salla-button, .btn-outline,
.product-card .btn, .product .btn{
  background:var(--white) !important; color:var(--black) !important;
  border:1.5px solid var(--black) !important;
  border-radius:10px !important; padding:10px 12px !important;
  font-weight:800 !important;
}
.add-to-cart:hover{ background:var(--black) !important; color:var(--white) !important }

/* ===========================
   6) عناوين الأقسام والخطوط السوداء
   =========================== */
.section-title, .heading, h2.section__title{
  color:var(--black) !important; font-weight:900; letter-spacing:0;
  display:flex; align-items:center; justify-content:space-between;
}
.section-title:before, .section-title:after{
  content:""; flex:1; height:2px; background:var(--black); opacity:.12;
}

/* ===========================
   7) تحسينات عامة
   =========================== */
hr, .divider{ border-color:var(--line) !important; opacity:1 }
.pagination a, .pagination button{ border-radius:10px }
.footer{ border-top:1px solid var(--line); color:#666 }

/* ===========================
   8) حماية ضد قواعد القالب (إن وُجدت)
   إجبار تعطيل أي ارتفاعات قد يفرضها القالب على صور البنرات
   =========================== */
.hero img, .banner--hero img, .main-hero img, .slideshow img,
.banner img, .category-banner img, .brand-banner img, .promo-banner img{
  height:auto !important;
}