@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:slnt,wght@-11..11,200..1000&family=El+Messiri:wght@400..700&family=Kufam:ital,wght@0,400..900;1,400..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

body {
  font-family: 'Tajawal', 'Cairo', 'Almarai', 'El Messiri', 'Kufam', 'Montserrat', sans-serif !important;
}
body#app {
  background-color: white;
}
.banner--fixed img {
  background-color: rgb(255 255 255);
}
section.s-block.s-block--fixed-banner.wide-placeholder:nth-of-type(1) > .container {
  margin-top: 0;
  max-width: 80%;
}

/* الكونتينر داخل البانر ياخد كامل العرض */
.index section.s-block.s-block--fixed-banner.wide-placeholder > .container {
  max-width: 80%;
  padding: 0;
}
/* البانر الأول ياخد ارتفاع كامل */
section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type {
  margin-top: 0;
  height: 100%;
  overflow: hidden;
}
.lazy__bg.lazy.bg-no-repeat.entered.loaded {
    background-color: white;
}
.s-block--banners .grid.two-row {
    display: grid;                         /* تفعيل شبكة العرض */
    grid-template-columns: repeat(4, 1fr); /* 4 أعمدة متساوية */
    gap: 1rem;                             /* مسافة بين العناصر */
}
/* استهداف آخر بانر */
section.s-block.s-block--fixed-banner.wide-placeholder:nth-of-type(9) > .container {
  margin-top: 0;
  max-width: 43%;
}
/* نخلي العنوان والأزرار جوه نفس الديف متوزعين */
.s-slider-block__title {
  display: flex;
  justify-content: center;   /* العنوان في النص */
  align-items: center;
  position: relative;
}

/* العنوان نفسه */
.s-slider-block__title-right {
  flex: 1;                  /* عشان يقدر يتمركز */
  text-align: center;       /* يخلي الكلمة في النص */
}

.s-slider-block__title-right h2 {
  border: 2px solid #B15070;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: bold;
  background: linear-gradient(90deg, #B15070, #f9c89a, #B15070);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.s-button-element.s-button-primary-outline {
  background: linear-gradient(135deg, #B15070, #8A3D57, #D86C8C, #B15070);
  background-size: 400% 400%;
  animation: gradientPinkDark 8s ease infinite;
  color: #fff !important;
  border: none !important;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.4s ease;
}

/* أنيميشن للتدرج */
@keyframes gradientPinkDark {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* عند الهوفر */
.s-button-element.s-button-primary-outline:hover {
  background: linear-gradient(45deg, #8A3D57, #E07A9A, #B15070, #9C4765);
  background-size: 300% 300%;
  animation: gradientHoverPinkDark 6s ease infinite;
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(177,80,112,0.7), 0 0 35px rgba(224,122,154,0.8);
  color: #fff !important;
}

/* أنيميشن وقت الهوفر */
@keyframes gradientHoverPinkDark {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* عند الضغط */
.s-button-element.s-button-primary-outline:active {
  transform: scale(0.95);
}

/* الكارت الأساسي */
.s-products-slider-card {
  transition: all 0.4s ease-in-out;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  position: relative;
}

/* عند الهوفر */
.s-products-slider-card:hover {
  transform: rotate(-1.5deg) scale(1.02);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* الصورة تتحرك لفوق */
.s-products-slider-card:hover .s-product-card-image img {
  transform: translateY(-8px) scale(1.05);
  transition: transform 0.4s ease-in-out;
}

/* خط متحرك تحت العنوان */
.s-product-card-content-title a {
  position: relative;
  display: inline-block;
}
.s-product-card-content-title a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px;
  width: 0;
  background: #B15070;
  transition: width 0.4s ease;
}
.s-products-slider-card:hover .s-product-card-content-title a::after {
  width: 100%;
}

/* زرار إضافة للسلة */
.s-products-slider-card:hover .s-button-element {
  background: #B15070 !important;
  color: #fff !important;
  border-color: #B15070 !important;
  transition: all 0.4s ease-in-out;
}

/* الكروت الأساسية */


/* ========================== */
/*  أيقونات اليوزر والسلة   */
/* ========================== */

/* الأيقونات */
.header-btn__icon,
.s-cart-summary-icon,
.sicon-shopping-bag {
  color: #B15070; /* لون الهوية الأساسي */
  transition: all 0.3s ease-in-out;
  font-size: 22px; /* حجم مناسب */
  vertical-align: middle; /* ضبط التمركز مع النص */
}

/* الهوفر */
.header-btn:hover .header-btn__icon,
.s-cart-summary-wrapper:hover .s-cart-summary-icon,
.s-cart-summary-wrapper:hover .sicon-shopping-bag {
  color: #8A3A55;         /* أغمق من الهوية */
  transform: scale(1.15) rotate(-5deg); /* تكبير بسيط + ميل */
}

/* أيقونات السلة/يوزر مع السعر */
#s-cart-icon,
.s-cart-summary-content {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* مسافة صغيرة بينهم */
}

/* السعر يفضل زي ما هو بالجراديانت */
.s-cart-summary-total {
  background: linear-gradient(90deg, #8A3A55, #B15070, #E8A9BC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-left: 4px;
}
.s-cart-summary-count {
  
    background-color: #B15070 ;
}
@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;
}
section.s-block.s-block--fixed-banner.wide-placeholder:nth-of-type(1) > .container {
  margin-top: 0;
  max-width: 100%;
}

/* الكونتينر داخل البانر ياخد كامل العرض */
.index section.s-block.s-block--fixed-banner.wide-placeholder > .container {
  max-width: 100%;
  padding: 0;
}

}
@media (min-width: 1024px) {
  .grid .banner-entry {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }

  /* الصورة */
  .grid .banner-entry .lazy__bg {
    transition: transform 0.6s ease;
  }

  /* عند الهوفر */
  .grid .banner-entry:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 35px rgba(177, 80, 112, 0.3); /* من الهوية */
  }

  .grid .banner-entry:hover .lazy__bg {
    transform: scale(1.08);
  }

  /* لمعة متحركة بالهوية */
  .grid .banner-entry::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      120deg,
      transparent 40%,
      rgba(177, 80, 112, 0.35) 50%,
      transparent 60%
    );
    transform: rotate(25deg);
    transition: opacity 0.4s ease;
    opacity: 0;
  }

  .grid .banner-entry:hover::before {
    animation: shine 1s forwards;
    opacity: 1;
  }

  @keyframes shine {
    from { transform: translateX(-100%) rotate(25deg); }
    to   { transform: translateX(100%) rotate(25deg); }
  }
}