/* Add custom CSS styles below */ 
:root {
  --category-radius: 20px;
}

@media (max-width: 767px) {
  .category-slider {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
  }

  .category-slider .s-block__items,
  .category-slider .categories-list,
  .category-slider .grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none;
  }

  .category-slider .s-block__items::-webkit-scrollbar,
  .category-slider .categories-list::-webkit-scrollbar,
  .category-slider .grid::-webkit-scrollbar {
    display: none !important;
  }

  .category-slider .s-block__items > *,
  .category-slider .categories-list > *,
  .category-slider .grid > * {
    flex: 0 0 44% !important;
    min-width: 0;
    scroll-snap-align: start;
  }

  .category-slider img {
    width: 100%;
    border-radius: var(--category-radius) !important;
  }
}

/* Add custom CSS styles below */
@media (max-width: 767px) {
  .category-slider .s-block__items > * a,
  .category-slider .categories-list > * a,
  .category-slider .grid > * a {
    font-size: 14px !important;
    line-height: 1.5;
  }
}

/* Add custom CSS styles below */
:root {
  --category-title-color: #000000;
  --category-title-size: 20px;
  --category-title-radius: 10px;
}

.category-slider::before {
  content: "تسوقي حسب التصنيف";
  display: block;
  font-size: var(--category-title-size);
  font-weight: 700;
  color: var(--category-title-color);
  text-align: right;
  margin-bottom: 16px;
  padding: 0 4px;
}

@media (max-width: 767px) {
  .category-slider::before {
    font-size: 18px;
    margin-bottom: 12px;
  }
}
/* For Lakme And Karaja */
:root {
  --lakme-bg: #E9D9C3;
  --lakme-text: #010A43;
  --lakme-btn: #F8E9D2;
  --lakme-btn-text: #000000;
  --lakme-title-pad: 10px;
  --lakme-desc-pad: 10px;
  --lakme-radius: 20px;
}

.lakme {
  background: var(--lakme-bg) !important;
  padding: 20px !important;
  border-radius: var(--lakme-radius);
}

.lakme h2,
.lakme h3 {
  color: var(--lakme-text);
  padding: var(--lakme-title-pad);
}

.lakme p {
  color: var(--lakme-text);
  padding: var(--lakme-desc-pad);
}

.lakme a {
  color: var(--lakme-btn) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Adding For Karaja  */
.karaja {
  --lakme-bg: #F3E5E3;
  --lakme-text: #65452F;
  --lakme-btn: #F8E9D2;
}
@media (min-width: 768px) {
  .karaja {
    direction: rtl !important;
  }

  .karaja > div {
    direction: rtl !important;
    flex-direction: row !important;
  }

  .karaja img {
    direction: ltr;
  }
}
/* Add custom CSS styles below */