/* =====================================================
   ألوان المتجر
   غيّر الألوان من هنا فقط
===================================================== */

:root {

  /* خلفية المتجر */
  --store-bg: rgb(255, 248, 242);

  /* خلفية بطاقات المنتجات */
  --product-card-bg: rgb(255, 248, 242);

  /* إطار بطاقة المنتج */
  --product-card-border: rgba(212, 175, 55, 0.35);

  /* ظل بطاقة المنتج */
  --product-card-shadow:
    0 2px 5px rgba(50, 50, 105, 0.15),
    0 1px 1px rgba(0, 0, 0, 0.05);

  /* عنوان المنتج */
  --product-title: rgb(92, 30, 34);

  /* الجملة التسويقية */
  --marketing-text: rgb(235, 180, 115);

  /* لون السعر */
  --price-color: rgb(92, 30, 34);

  /* زر إضافة للسلة */
  --cart-button-bg: rgb(92, 30, 34);

  /* نص زر السلة */
  --cart-button-text: rgb(255, 255, 255);

  /* اللون الخمري */
  --main-border: rgb(92, 30, 34);

  /* اللون الذهبي */
  --gold-color: rgb(224, 199, 170);

  /* لون المرور */
  --hover-color: rgb(235, 180, 114);

  /* خلفية البطاقات العامة */
  --section-card-bg: rgb(255, 248, 242);
}


/* =====================================================
   تطبيق ألوان المتجر
===================================================== */

/* خلفية المتجر */
html,
body,
#app,
.app-inner {
  background: var(--store-bg) !important;
}

/* بطاقة المنتج */
.product-card {
  background: var(--product-card-bg) !important;
  border: 2px solid var(--product-card-border) !important;
  box-shadow: var(--product-card-shadow) !important;
}

/* عنوان المنتج */
.product-card__title {
  color: var(--product-title) !important;
}

/* الجملة التسويقية */
.product-card__subtitle {
  color: var(--marketing-text) !important;
}

/* السعر */
.product-price,
.price {
  color: var(--price-color) !important;
}

/* زر السلة */
.btn--add-to-cart,
.product-card .btn {
  background: var(--cart-button-bg) !important;
  color: var(--cart-button-text) !important;
}

/* البطاقات العامة */
.card,
.section-card {
  background: var(--section-card-bg) !important;
}


/* =====================================================
   قسم الفئات
   صفّان + تحريك أفقي + مؤشر تحريك
===================================================== */

.shop-by-category {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--store-bg) !important;
  box-sizing: border-box !important;
}

/* إزالة الخلفية البيضاء من جميع الحاويات الداخلية */
.shop-by-category,
.shop-by-category section,
.shop-by-category div,
.shop-by-category .container,
.shop-by-category .s-container,
.shop-by-category .swiper {
  background-color: var(--store-bg) !important;
}

/* حاويات القسم */
.shop-by-category .container,
.shop-by-category .s-container,
.shop-by-category .swiper {
  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  margin-inline: 0 !important;

  padding: 0 !important;
  padding-inline: 0 !important;

  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* إخفاء أزرار سلايدر الثيم القديمة */
.shop-by-category .swiper-button-next,
.shop-by-category .swiper-button-prev,
.shop-by-category .swiper-pagination {
  display: none !important;
}

/* حاوية الفئات */
.shop-by-category .swiper-wrapper {
  display: grid !important;

  grid-template-rows: repeat(2, auto) !important;
  grid-auto-flow: column !important;

  /* يظهر تقريبًا 2.6 فئة في كل صف على الجوال */
  grid-auto-columns: 38% !important;

  column-gap: 10px !important;
  row-gap: 18px !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  margin-inline: 0 !important;

  /* مسافة بسيطة يمين ويسار تمنع قص الصور */
  padding: 8px 8px 14px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  transform: none !important;
  transition: none !important;

  background: var(--store-bg) !important;
  box-sizing: border-box !important;

  cursor: grab;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}

/* إخفاء شريط التمرير الأصلي */
.shop-by-category .swiper-wrapper::-webkit-scrollbar {
  display: none !important;
}

/* كل فئة */
.shop-by-category .swiper-slide {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;
  margin-inline: 0 !important;

  padding: 0 !important;

  background: transparent !important;
  box-sizing: border-box !important;
  scroll-snap-align: start;
}

/* رابط أو محتوى الفئة */
.shop-by-category .swiper-slide > a,
.shop-by-category .swiper-slide > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 6px !important;

  background: transparent !important;
  box-sizing: border-box !important;
}

/* صورة الفئة */
.shop-by-category .swiper-slide img {
  display: block !important;

  width: 100% !important;
  max-width: 138px !important;
  height: 128px !important;

  margin: 0 auto 7px !important;

  object-fit: contain !important;
  object-position: center !important;

  background: transparent !important;
  box-sizing: border-box !important;
}

/* اسم الفئة */
.shop-by-category .swiper-slide h3,
.shop-by-category .swiper-slide p,
.shop-by-category .swiper-slide span {
  margin: 0 !important;

  color: var(--product-title) !important;
  text-align: center !important;

  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* أثناء السحب */
.shop-by-category .swiper-wrapper.category-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}


/* =====================================================
   خط التحريك أسفل الفئات
===================================================== */

.shop-by-category .category-scroll-indicator {
  position: relative !important;

  width: 42% !important;
  max-width: 180px !important;
  height: 7px !important;

  margin: 8px auto 14px !important;

  overflow: hidden !important;
  border-radius: 50px !important;

  background: rgba(92, 30, 34, 0.20) !important;
  box-sizing: border-box !important;
}

/* الجزء الداكن المتحرك */
.shop-by-category .category-scroll-thumb {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;

  width: 35% !important;
  height: 100% !important;

  border-radius: 50px !important;
  background: var(--main-border) !important;

  transform: translateX(0);
  will-change: transform;
}


/* =====================================================
   الجوال
===================================================== */

@media (max-width: 767px) {

  .shop-by-category .swiper-wrapper {
    grid-auto-columns: 38% !important;
    column-gap: 10px !important;
    row-gap: 18px !important;

    padding: 6px 8px 12px !important;
  }

  .shop-by-category .swiper-slide img {
    max-width: 138px !important;
    height: 128px !important;
  }

  .shop-by-category .category-scroll-indicator {
    display: block !important;
  }
}


/* =====================================================
   الكمبيوتر
===================================================== */

@media (min-width: 768px) {

  .shop-by-category .swiper-wrapper {
    grid-auto-columns: 24% !important;
    column-gap: 16px !important;
    row-gap: 24px !important;

    padding: 10px 10px 18px !important;
  }

  .shop-by-category .swiper-slide img {
    max-width: 170px !important;
    height: 160px !important;
  }

  /* إخفاء خط التحريك على الكمبيوتر */
  .shop-by-category .category-scroll-indicator {
    display: none !important;
  }
}
/* ======================================
   حدود خفيفة جداً لبطاقات الفئات
====================================== */

.shop-by-category .swiper-slide > a,
.shop-by-category .swiper-slide > div {

    background: rgb(255,248,242) !important;

    border: 1px solid rgba(92,30,34,.06) !important;

    border-radius: 12px !important;

    box-shadow: 0 1px 3px rgba(0,0,0,.02) !important;

    transition: .25s ease;
}

/* عند المرور بالماوس */
.shop-by-category .swiper-slide > a:hover,
.shop-by-category .swiper-slide > div:hover {

    border-color: rgba(92,30,34,.12) !important;

    box-shadow: 0 4px 10px rgba(92,30,34,.05) !important;
}