/* ===============================
   1. تنسيقات الصور والأفاتار
================================= */
.s-comments-item-avatar-img {
  object-fit: contain;
  width: 4rem;
  height: 4rem;
}

/* ===============================
   2. إخفاء أقسام غير مرغوبة
================================= */
div.main-content.art-main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/6.md\:pb-16 
> div.grid.grid-cols-1.lg\:grid-cols-3.gap-2.mt-4.mb-2.pb-4.text-center.border-b-\[1px\].border-gray-300 {
  display: none;
}

/* ===============================
   3. تعديل البانر الثابت
================================= */
section.s-block.s-block--fixed-banner.wide-placeholder > .container:nth-of-type(1) {
  max-width: 100%;
  padding: 0;
}
section.s-block.s-block--fixed-banner.wide-placeholder:nth-of-type(1) {
  margin-top: 0;
}

/* ===============================
   4. تنسيق الفوتر
================================= */
[aria-label="footer"] *, 
[aria-label="footer"] a,
.art-store-footer h3 {
  font-weight: bold !important;
}

/* ===============================
   5. السلايدر (Swiper)
================================= */
.swiper-wrapper {
  justify-content: center;
}
@media (max-width: 767px) {
  .swiper-wrapper {
    justify-content: space-evenly !important;
    flex-direction: row-reverse; 
  }
}

/* ===============================
   6. كروت المنتجات (Hover + حركة)
================================= */
.s-products-slider-card {
  transition: all 0.3s ease-in-out; /* حركة سلسة */
}
.s-products-slider-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.2);
  border-radius: 12px;
}

/* ===============================
   7. الأزرار داخل كروت المنتجات
================================= */
.s-products-slider-card .s-button-element.s-button-btn.s-button-primary-outline {
  background: linear-gradient(135deg, #4facfe, #00f2fe); /* جريدانت */
  color: #fff !important;
  border: none !important;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

/* لمعة متحركة */
.s-products-slider-card .s-button-element.s-button-btn.s-button-primary-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.1) 60%,
    transparent 100%
  );
  transform: skewX(-25deg);
}

/* هوفر */
.s-products-slider-card .s-button-element.s-button-btn.s-button-primary-outline:hover {
  background: linear-gradient(135deg, #007bff, #1e90ff);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 71, 171, 0.4);
}
.s-products-slider-card .s-button-element.s-button-btn.s-button-primary-outline:hover::before {
  left: 125%;
  transition: left 0.8s ease-in-out;
}

/* ===============================
   8. التابز (Tabs)
================================= */
.tabs .s-button-element.s-button-btn {
  position: relative;
  overflow: hidden;
  border: none !important;
  background: transparent !important;
  color: #0d6efd !important; /* أزرق للنص */
  z-index: 1;
  transition: color 0.3s ease-in-out;
}

/* العنصر النشط */
.tabs salla-button.is-active .s-button-element.s-button-btn {
  color: #fff !important;
}
.tabs salla-button.is-active .s-button-element.s-button-btn::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #4facfe, #00f2fe);
  z-index: -1;
  animation: fillWater 0.6s forwards ease-in-out;
  border-radius: 6px;
}
/* أنيميشن التعبئة */
@keyframes fillWater {
  from { height: 0; }
  to   { height: 100%; }
}

/* ===============================
   9. الكاتيجوريز (Categories Hover)
================================= */
.art-categories-02-slide h3 {
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
  transition: color 0.3s ease-in-out;
}

/* البوكس */
.art-categories-02-slide .aspect-square {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  position: relative;
}
.art-categories-02-slide:hover .aspect-square {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 123, 255, 0.25);
}
/* لمعة */
.art-categories-02-slide .aspect-square::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.1) 60%,
    transparent 100%
  );
  transform: skewX(-25deg);
}
.art-categories-02-slide:hover .aspect-square::after {
  left: 125%;
  transition: left 0.8s ease-in-out;
}
.art-categories-02-slide:hover h3 {
  color: #0d6efd;
}

/* ===============================
   10. كروت الـ Swiper Info (موثوق/شحن/إرجاع)
================================= */
.swiper-slide.flex.flex-col {
  border-radius: 12px;
  padding: 20px;
  transition: all 0.4s ease-in-out;
  position: relative;
  background: #fff;
}
.swiper-slide.flex.flex-col:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 123, 255, 0.25);
}
/* لمعة */
.swiper-slide.flex.flex-col::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.1) 60%,
    transparent 100%
  );
  transform: skewX(-25deg);
}
.swiper-slide.flex.flex-col:hover::after {
  left: 125%;
  transition: left 0.8s ease-in-out;
}
/* تغيير النص والأيقونة */
.swiper-slide.flex.flex-col:hover h6 {
  color: #0d6efd;
  font-weight: 500;
}
.swiper-slide.flex.flex-col:hover span {
  transform: scale(1.2);
  transition: transform 0.3s ease-in-out;
}

/* ===============================
   11. أيقونة كارت السلة
================================= */
.s-cart-summary-count {
  background-color: #14E0FE;
  height: 17px;
}

/* ===============================
   12. ميديا كويري (موبايل)
================================= */
@media(max-width:767px){
  #photos-0-slider > div.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-rtl.swiper-ios.swiper-backface-hidden{
    padding:0;
  }
  .s-products-slider-card {
    max-width: 185px;
  }
  .main-nav-container {
    min-height: 56px;
  }
  .s-button-element:not(:disabled):not([loading]) {
    font-size: 11px;
  }
  .s-block--tabs-produtcs .tabs {
    overflow-x: auto;
    white-space: wrap;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 1.5rem;
    text-align: center;
  }
    .swiper-wrapper {
        justify-content: space-evenly !important;
        flex-direction: unset !important;
    }


}
.custom-featured-products .tabs salla-button button .s-button-text {
    position: relative !important;
    overflow: hidden!important;
}
/* زر إضافة للسلة (نفس ستايل زر الكارد) */
button[product-id].s-button-element.s-button-primary-outline {
  background: linear-gradient(135deg, #4facfe, #00f2fe); /* جريدانت أزرق فاتح */
  color: #fff !important;
  border: none !important;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

/* لمعة متحركة */
button[product-id].s-button-element.s-button-primary-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.1) 60%,
    transparent 100%
  );
  transform: skewX(-25deg);
}

/* هوفر */
button[product-id].s-button-element.s-button-primary-outline:hover {
  background: linear-gradient(135deg, #007bff, #1e90ff); /* أزرق أغمق */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 71, 171, 0.4);
}

/* تحريك اللمعة عند الهوفر */
button[product-id].s-button-element.s-button-primary-outline:hover::before {
  left: 125%;
  transition: left 0.8s ease-in-out;
}