/* =====================================================
   مية مية للأجهزة المنزلية - CSS مخصص
   الهوية: برتقالي + أسود + أبيض
===================================================== */

:root {
  --meya-orange: #f58220;
  --meya-orange-dark: #d96b13;
  --meya-black: #111111;
  --meya-white: #ffffff;
  --meya-light: #f7f7f7;
  --meya-border: #eeeeee;
  --meya-red: #e60023;
  --meya-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
  --meya-shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.13);
}

/* =====================================================
   خلفية عامة ناعمة للمتجر
===================================================== */

body,
main,
.store-page,
.product-single,
.product-page {
  background-color: #f7f7f7 !important;
}

/* =====================================================
   توحيد شبكة المنتجات
===================================================== */

.products-grid,
.s-products-list-wrapper,
.s-products-list-vertical-cards,
.grid.products,
.products,
#products {
  align-items: stretch !important;
}

/* =====================================================
   كرت المنتج - تصميم أنيق ومميز
===================================================== */

.s-product-card-entry,
.product-card,
.product-entry,
.product-item {
  position: relative !important;
  height: 100% !important;
  min-height: 430px !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--meya-white) !important;
  border: 1px solid var(--meya-border) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: var(--meya-shadow) !important;
  transition: all 0.28s ease-in-out !important;
}

/* لمسة علوية خفيفة للكرت */
.s-product-card-entry::before,
.product-card::before,
.product-entry::before,
.product-item::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--meya-orange), var(--meya-black)) !important;
  opacity: 0.95 !important;
  z-index: 2 !important;
}

/* تأثير المرور */
.s-product-card-entry:hover,
.product-card:hover,
.product-entry:hover,
.product-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--meya-shadow-hover) !important;
  border-color: rgba(245, 130, 32, 0.45) !important;
}

/* =====================================================
   صورة المنتج داخل الكرت
===================================================== */

.s-product-card-image,
.product-card__image,
.product-entry__image,
.product-item .image,
.product-image {
  height: 230px !important;
  min-height: 230px !important;
  background: #ffffff !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.s-product-card-image img,
.product-card__image img,
.product-entry__image img,
.product-image img,
.product-item img {
  max-width: 100% !important;
  max-height: 205px !important;
  object-fit: contain !important;
  transition: transform 0.28s ease-in-out !important;
}

.s-product-card-entry:hover .s-product-card-image img,
.product-card:hover .product-card__image img,
.product-entry:hover .product-entry__image img {
  transform: scale(1.035) !important;
}

/* =====================================================
   محتوى كرت المنتج
===================================================== */

.s-product-card-content,
.product-card__content,
.product-entry__content,
.product-item .content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px !important;
  background: #ffffff !important;
}

/* اسم المنتج - توحيد الارتفاع حتى تكون الكروت مرتبة */
.s-product-card-content-title,
.s-product-card-content-title a,
.product-card__title,
.product-card__title a,
.product-entry__title,
.product-entry__title a {
  color: var(--meya-black) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.65 !important;
  min-height: 74px !important;
  max-height: 74px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

/* منطقة السعر */
.s-product-card-content-sub,
.s-product-card-content .s-product-card-price,
.product-card .price,
.product-entry .price {
  margin-top: 10px !important;
}

/* =====================================================
   السعر المخفض والسعر القديم
===================================================== */

/* السعر الحالي / المخفض */
.s-product-card-sale-price,
.s-product-card-price,
.product-price,
.price-wrapper .price,
.price,
.product-card .price,
.product-entry .price {
  color: var(--meya-orange) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px !important;
}

/* العملة */
.s-product-card-sale-price span,
.s-product-card-price span,
.price span {
  color: var(--meya-orange) !important;
  font-weight: 900 !important;
}

/* السعر القديم */
.s-product-card-regular-price,
.regular-price,
.old-price,
del,
.price del,
.product-price del {
  color: #9b9b9b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
}

/* =====================================================
   نسبة الخصم على صورة المنتج
===================================================== */

/* بادج الخصم / التخفيض */
.s-product-card-promotion-title,
.s-product-card-discount,
.s-product-card-badge,
.discount-tag,
.sale-badge,
.product-badge,
.badge-sale,
.badge.discount,
.badge.sale,
.product-card__discount,
.product-entry__discount {
  background: linear-gradient(135deg, #ff0033, #ff7a00) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(230, 0, 35, 0.35) !important;
  z-index: 5 !important;
}

/* في حال كانت نسبة الخصم تظهر أعلى الصورة */
.s-product-card-image .s-product-card-promotion-title,
.s-product-card-image .discount-tag,
.s-product-card-image .sale-badge,
.product-card__image .discount-tag,
.product-entry__image .discount-tag {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
}

/* =====================================================
   زر الشراء داخل الكرت
===================================================== */

.s-product-card-entry .s-button-primary,
.s-product-card-entry button,
.product-card button,
.product-entry button,
.product-item button {
  margin-top: auto !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  min-height: 42px !important;
  transition: all 0.25s ease-in-out !important;
}

/* زر الشراء الأساسي */
.s-button-primary,
button.s-button-primary,
.s-product-card-entry .s-button-primary {
  background: var(--meya-orange) !important;
  border-color: var(--meya-orange) !important;
  color: #ffffff !important;
}

.s-button-primary:hover,
button.s-button-primary:hover,
.s-product-card-entry .s-button-primary:hover {
  background: var(--meya-orange-dark) !important;
  border-color: var(--meya-orange-dark) !important;
}

/* =====================================================
   خانة وصف المنتج كبطاقة بيضاء أنيقة
===================================================== */

.product-description,
.product__description,
.s-product-tabs-content,
.s-tabs-content,
#product-description,
.description,
.prose,
.product-single__description,
.product-details__description {
  background: #ffffff !important;
  color: #222222 !important;
  padding: 28px !important;
  margin-top: 22px !important;
  border-radius: 24px !important;
  border: 1px solid #eeeeee !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07) !important;
  line-height: 2.1 !important;
  font-size: 16px !important;
  overflow: hidden !important;
}

/* عنوان داخل بطاقة الوصف */
.product-description h1,
.product-description h2,
.product-description h3,
.product__description h1,
.product__description h2,
.product__description h3,
.s-product-tabs-content h1,
.s-product-tabs-content h2,
.s-product-tabs-content h3,
.s-tabs-content h1,
.s-tabs-content h2,
.s-tabs-content h3,
.description h1,
.description h2,
.description h3,
.prose h1,
.prose h2,
.prose h3 {
  color: var(--meya-black) !important;
  font-weight: 900 !important;
  line-height: 1.6 !important;
  margin-bottom: 14px !important;
}

/* فقرات الوصف */
.product-description p,
.product__description p,
.s-product-tabs-content p,
.s-tabs-content p,
#product-description p,
.description p,
.prose p {
  color: #222222 !important;
  line-height: 2.1 !important;
  margin-bottom: 14px !important;
}

/* القوائم داخل الوصف */
.product-description ul,
.product__description ul,
.s-product-tabs-content ul,
.s-tabs-content ul,
.description ul,
.prose ul {
  background: #fafafa !important;
  padding: 18px 26px !important;
  margin: 16px 0 !important;
  border-radius: 18px !important;
  border: 1px solid #eeeeee !important;
}

/* عناصر القوائم */
.product-description li,
.product__description li,
.s-product-tabs-content li,
.s-tabs-content li,
.description li,
.prose li {
  color: #222222 !important;
  line-height: 2 !important;
  margin-bottom: 8px !important;
}

/* الجداول داخل الوصف إن وجدت */
.product-description table,
.product__description table,
.s-product-tabs-content table,
.s-tabs-content table,
.description table,
.prose table {
  width: 100% !important;
  background: #ffffff !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid #eeeeee !important;
}

.product-description table td,
.product-description table th,
.product__description table td,
.product__description table th,
.s-product-tabs-content table td,
.s-product-tabs-content table th,
.s-tabs-content table td,
.s-tabs-content table th,
.description table td,
.description table th,
.prose table td,
.prose table th {
  padding: 12px !important;
  border-bottom: 1px solid #eeeeee !important;
}

/* =====================================================
   تحسين العرض على الجوال
===================================================== */

@media (max-width: 768px) {
  .s-product-card-entry,
  .product-card,
  .product-entry,
  .product-item {
    min-height: 390px !important;
    border-radius: 18px !important;
  }

  .s-product-card-image,
  .product-card__image,
  .product-entry__image,
  .product-image {
    height: 185px !important;
    min-height: 185px !important;
    padding: 12px !important;
  }

  .s-product-card-image img,
  .product-card__image img,
  .product-entry__image img,
  .product-image img {
    max-height: 165px !important;
  }

  .s-product-card-content,
  .product-card__content,
  .product-entry__content {
    padding: 12px !important;
  }

  .s-product-card-content-title,
  .s-product-card-content-title a,
  .product-card__title,
  .product-card__title a,
  .product-entry__title,
  .product-entry__title a {
    font-size: 13.5px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    -webkit-line-clamp: 3 !important;
  }

  .s-product-card-sale-price,
  .s-product-card-price,
  .product-price,
  .price {
    font-size: 16.5px !important;
  }

  .s-product-card-promotion-title,
  .s-product-card-discount,
  .discount-tag,
  .sale-badge,
  .product-badge,
  .badge-sale,
  .badge.discount,
  .badge.sale {
    font-size: 11.5px !important;
    padding: 6px 10px !important;
  }

  .product-description,
  .product__description,
  .s-product-tabs-content,
  .s-tabs-content,
  #product-description,
  .description,
  .prose {
    padding: 20px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
  }
}

/* =====================================================
   تحسين إضافي للشاشات الصغيرة جدًا
===================================================== */

@media (max-width: 480px) {
  .s-product-card-entry,
  .product-card,
  .product-entry,
  .product-item {
    min-height: 370px !important;
  }

  .s-product-card-image,
  .product-card__image,
  .product-entry__image,
  .product-image {
    height: 165px !important;
    min-height: 165px !important;
  }

  .s-product-card-image img,
  .product-card__image img,
  .product-entry__image img,
  .product-image img {
    max-height: 148px !important;
  }
}

/* =====================================================
   دمج قسم التصنيفات مع البنر الرئيسي
   العنصر الفعلي: #main-links-1
===================================================== */

/* إزالة الفراغ ورفع شريط الأقسام ناحية البنر */
salla-slider#main-links-1 {
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  margin-top: -55px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 8px !important;
  background: transparent !important;
}

/* إزالة المساحة الخاصة بالعنوان الفارغ مع إبقاء أسهم التنقل */
#main-links-1 .s-slider-block__title {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 30 !important;
}

/* إزالة المسافات الداخلية أعلى السلايدر */
#main-links-1 .s-slider-container,
#main-links-1 .swiper,
#main-links-1 .swiper-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ضبط حجم كل قسم */
#main-links-1 .somou-categories-slide {
  max-width: 115px !important;
  margin: 0 6px !important;
}

/* إلغاء الارتفاع المربع المفروض على الحاوية */
#main-links-1 .aspect-square {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
}

/* صور الأقسام الفعلية هي خلفيات وليست عناصر img */
#main-links-1 .somou-categories-img {
  width: 100px !important;
  height: 100px !important;
  max-width: 100px !important;
  max-height: 100px !important;
  margin: 0 auto !important;
  background-position: center !important;
  background-size: cover !important;
}

/* أسماء الأقسام */
#main-links-1 .text {
  margin-top: 6px !important;
}

#main-links-1 h3 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* الجوال */
@media screen and (max-width: 767px) {
  salla-slider#main-links-1 {
    margin-top: -30px !important;
    padding-bottom: 5px !important;
  }

  #main-links-1 .somou-categories-slide {
    max-width: 94px !important;
    margin-inline: 4px !important;
  }

  #main-links-1 .somou-categories-img {
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
  }

  #main-links-1 .text {
    margin-top: 4px !important;
  }

  #main-links-1 h3 {
    font-size: 12px !important;
  }
}

/* =====================================================
   جعل خلفية قسم التصنيفات شفافة ودمجه بصريًا مع البنر
===================================================== */

/* إزالة الخلفية من القسم وجميع طبقاته الداخلية */
salla-slider#main-links-1,
#main-links-1 .s-slider-container,
#main-links-1 .swiper,
#main-links-1 .swiper-wrapper {
  background: transparent !important;
}

/* إزالة التدرج الأبيض على جانبي السلايدر */
salla-slider#main-links-1::before,
salla-slider#main-links-1::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* إزالة خلفية الحاويات الخارجية إن كانت مفروضة من القالب */
main section:has(#main-links-1),
main .s-block:has(#main-links-1),
main .container:has(#main-links-1) {
  background: transparent !important;
  box-shadow: none !important;
}

/* =====================================================
   التعديل النهائي لقسم الأقسام:
   1) إزالة الشريط الأبيض بالكامل
   2) تمديد القسم بعرض قريب من البنر الرئيسي
===================================================== */

/* إخراج السلايدر من الحاوية الضيقة وجعله بعرض الشاشة */
salla-slider#main-links-1 {
  width: 100vw !important;
  max-width: none !important;
  box-sizing: border-box !important;

  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;

  padding-right: 24px !important;
  padding-left: 24px !important;

  /* نفس خلفية الصفحة حتى يختفي الشريط الأبيض تمامًا */
  background: var(--meya-light, #f7f7f7) !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* توسيع الحاويات الداخلية ومنعها من حصر العناصر في المنتصف */
#main-links-1 .s-slider-container,
#main-links-1 .swiper {
  width: 100% !important;
  max-width: none !important;
  margin-right: auto !important;
  margin-left: auto !important;
  background: var(--meya-light, #f7f7f7) !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* إزالة أي خلفية بيضاء من المسار الداخلي */
#main-links-1 .swiper-wrapper,
#main-links-1 .s-slider-swiper-wrapper {
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
}

/* توزيع العناصر بمسافات أوسع قليلًا */
#main-links-1 .somou-categories-slide {
  flex: 0 0 125px !important;
  width: 125px !important;
  max-width: 125px !important;
  margin-right: 8px !important;
  margin-left: 8px !important;
  background: transparent !important;
}

/* إزالة التدرجات البيضاء على الجانبين */
salla-slider#main-links-1::before,
salla-slider#main-links-1::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* السماح للقسم بالتمدد خارج الحاوية الأصلية */
main section:has(#main-links-1),
main .s-block:has(#main-links-1),
main .container:has(#main-links-1) {
  max-width: none !important;
  overflow: visible !important;
  background: var(--meya-light, #f7f7f7) !important;
  box-shadow: none !important;
}

/* الجوال */
@media screen and (max-width: 767px) {
  salla-slider#main-links-1 {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  #main-links-1 .somou-categories-slide {
    flex-basis: 92px !important;
    width: 92px !important;
    max-width: 92px !important;
    margin-right: 4px !important;
    margin-left: 4px !important;
  }
}

/* =====================================================
   تثبيت أزرار التحكم على طرفي قسم الأقسام
===================================================== */

#main-links-1 .s-slider-block__title {
  overflow: visible !important;
  pointer-events: none !important;
}

#main-links-1 .s-slider-block__title-left,
#main-links-1 .s-slider-block__title-nav {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

#main-links-1 .s-slider-prev,
#main-links-1 .s-slider-next {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 50% !important;
  z-index: 100 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

/* زر الطرف الأيمن */
#main-links-1 .s-slider-prev {
  right: 18px !important;
  left: auto !important;
}

/* زر الطرف الأيسر */
#main-links-1 .s-slider-next {
  left: 18px !important;
  right: auto !important;
}

#main-links-1 .s-slider-prev svg,
#main-links-1 .s-slider-next svg {
  width: 22px !important;
  height: 22px !important;
}

/* منع قص الأزرار عند حواف القسم */
salla-slider#main-links-1,
#main-links-1 .s-slider-container,
#main-links-1 .swiper {
  overflow: visible !important;
}

/* الجوال */
@media screen and (max-width: 767px) {
  #main-links-1 .s-slider-prev,
  #main-links-1 .s-slider-next {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  #main-links-1 .s-slider-prev {
    right: 8px !important;
  }

  #main-links-1 .s-slider-next {
    left: 8px !important;
  }
}

/* =====================================================
   تصحيح موضع أسهم قسم الأقسام على كامل عرض الشاشة
===================================================== */

/* كانت حاوية الأزرار ما زالت بعرض الحاوية القديمة؛ نجعلها بعرض الشاشة */
#main-links-1 .s-slider-block__title {
  right: auto !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: none !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}

/* تمديد الحاويات الداخلية للأزرار على كامل العرض */
#main-links-1 .s-slider-block__title-left,
#main-links-1 .s-slider-block__title-nav {
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* تثبيت كل زر عند طرف حقيقي من الشاشة */
#main-links-1 .s-slider-prev {
  right: 14px !important;
  left: auto !important;
}

#main-links-1 .s-slider-next {
  left: 14px !important;
  right: auto !important;
}

/* الجوال */
@media screen and (max-width: 767px) {
  #main-links-1 .s-slider-prev {
    right: 6px !important;
  }

  #main-links-1 .s-slider-next {
    left: 6px !important;
  }
}

/* =====================================================
   إصلاح نهائي لتموضع أسهم قسم الأقسام
   تفريغ حاويات الأسهم القديمة وتثبيت الزرين على طرفي السلايدر
===================================================== */

salla-slider#main-links-1 {
  position: relative !important;
  overflow: visible !important;
}

/* إلغاء جميع التموضعات القديمة للحاويات الوسيطة */
#main-links-1 .s-slider-block__title,
#main-links-1 .s-slider-block__title-left,
#main-links-1 .s-slider-block__title-nav {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/* تثبيت الزرين بالنسبة للسلايدر نفسه */
#main-links-1 .s-slider-prev,
#main-links-1 .s-slider-next {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute !important;
  top: 50% !important;
  z-index: 200 !important;

  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 50% !important;
  border: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;

  transform: translateY(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

/* الطرف الأيمن */
#main-links-1 .s-slider-prev {
  right: 10px !important;
  left: auto !important;
}

/* الطرف الأيسر */
#main-links-1 .s-slider-next {
  left: 10px !important;
  right: auto !important;
}

#main-links-1 .s-slider-prev svg,
#main-links-1 .s-slider-next svg {
  width: 22px !important;
  height: 22px !important;
}

/* إظهار الزرين حتى عند إضافة حالة تعطيل من السلايدر */
#main-links-1 .s-slider-prev.swiper-button-disabled,
#main-links-1 .s-slider-next.swiper-button-disabled {
  display: flex !important;
  visibility: visible !important;
  opacity: 0.65 !important;
}

/* الجوال */
@media screen and (max-width: 767px) {
  #main-links-1 .s-slider-prev,
  #main-links-1 .s-slider-next {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  #main-links-1 .s-slider-prev {
    right: 5px !important;
  }

  #main-links-1 .s-slider-next {
    left: 5px !important;
  }
}