/* Add custom CSS styles below */ 


.s-block--main-slider-1 salla-slider.s-slider-v-centered .s-slider-container {
    padding-top: 3rem !important;
    padding-bottom: 2.5rem !important;
}

/* Target exactly the slide links with that Tailwind-style min-height class */
/* Target just those banner links */
.swiper-slide a.min-h-\[140px\] {
  /* White glow */
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; !important;
}

/* 1) Round every slide-link in that carousel */
.swiper-slide > a {
  border-radius: 12px !important;
}

/* 2) In case the image inside is covering the corners, clip it too */
.swiper-slide > a > img {
  border-radius: inherit !important;
}



/* override height to 300px for the specific slider */
salla-slider#main-slider-2-1,
salla-slider#main-slider-2-1 div[slot="items"],
salla-slider#main-slider-2-1 .swiper-slide {
  height: 300px !important;
}


/* Scope to the #main-slider-2-1 slider only */
salla-slider#main-slider-2-1 
  .relative.flex.flex-col.justify-center.min-w-\[200px\].text-center.lg\:gap-5.max-w-lg 
  button.btn--main.group.s-button-element.s-button-btn.s-button-solid.s-button-primary.s-button-loader-after {
  
  display: inline !important;
  height: 2.5rem !important;
  border-radius: 6px !important;
  border-color: #ff000000 !important;
  background-color: #3e4a75 !important;
  color: #fff !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 500ms !important;
}

/* center‐layout override for the text block in slider 2-1 */
salla-slider#main-slider-2-1 
  .relative.flex.flex-col.justify-center.min-w-\[200px\].text-center.lg\:gap-5.max-w-lg {
  display:          flex !important;
  flex-wrap:        nowrap !important;
  flex-direction:   column !important;
  align-content:    center !important;
  align-items:      center !important;
}





.center-block-title .s-block__title, .center-block-title .s-slider-block__title {
    display: flex
;
    justify-content: space-between;
    gap: 1.25rem;
    text-align: center;
    flex-direction: row;
    background: none !important;
    border-radius: 5px !important;

    padding-right: 20px;
}



/* style only the “عرض الكل” btn--main-mini under slider #main-slider-2-1 */
.s-block__title.relative .left-side button.btn--main.btn--main-mini {
  border-color: #ffffff00 !important;
  background-color: #ffe0d7 !important;
  border-radius: 5px !important;
}


/* Hide the 2nd <div> inside the 4th <section> of the first main wrapper */
body > div:first-of-type > section:nth-of-type(6) > div > div > div:nth-of-type(2) {
  display: none !important;
}



/* 1) Catch every “animated-products” block… */
section.s-block--animated-products 
  /* …then its carousel slider’s RTL swiper container */
  .carousel-slider .swiper[dir="rtl"] {
  padding-left: 0 !important;
}



.main-nav {
background: #f29287;
color: #ffffff;
border-color: #f29287 !important;
}






/* Glassmorphic side-panel background */
#storemenu-panel {
  /* Override the solid color and empty image */
  background: rgba(242, 146, 135, 0.15) !important;
  /* Remove any background-image set inline */
  background-image: none !important;

  /* Apply the blur effect */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;

  /* Hide overflow if needed */
  overflow: hidden !important;
  color: #ffffff !important;
}


:root {
  --color-primary: #C3DCFE !important;
}


.carousel-slider .swiper-wrapper > div {
    flex-shrink: 0;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}

.product-entry {
    transition-duration: 300ms;
    border-radius: 12px !important;
    padding: 5px 5px 0px 5px !important;
    margin: 0px !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.04) !important;
}

.product-entry__image .image--aspect-ratio, .product-entry__image .image--aspect-ratio img {
border-radius: 12px;
}

/* === 3. Contrast for subtitle & original price === */
.product-entry__subtitle
 {
  color: #6B7280 !important;
  font-size: 12px !important;
}

/* === 5. Badge styling === */
.promotion-badge {
  border-radius: 8px !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
  margin-top: 5px !important;
}

/* === 6. Heart hover fill === */
#app button.product-entry-btn--wishlist {
  fill: #EF4444 !important;
  height: 2.0rem !important;
  width: 2.0rem !important;
}



.product-entry__content {
    gap: 0.175rem !important;
}


/* Reverse order and disable wrapping on the product-entry actions row */
/* Target exactly that row by matching its full class list */
.flex.gap-5.justify-between.items-center.border-t.border-borderColor.pt-4.mt-auto.min-h-\[65px\] {
  /* prevent wrapping */
  flex-wrap: nowrap !important;
  /* reverse the row order */
  flex-direction: row-reverse !important;
}



/* Hide the 2nd <div> inside the 4th <section> of the first main wrapper 
body > div:first-of-type > section:nth-of-type(7) > div > div:nth-of-type(2) {
  display: none !important;
}
*/


ul, li {
margin-right: 10px !important;
}


.s-block--today-deal .mt-6.flex.items-center.gap-x-6.anime-item {
display: none;
}


#fixed-banner-with-dots-6 {
background: #ffffff;
}

/* Override the fixed 580 px height on Main-Slider-2 */
.s-block--main-slider-2 salla-slider,
.s-block--main-slider-2 .swiper-slide {
    height: 90% !important;   /* replace 580 px */
}
/* Lift only the big translucent heading */
.bg-big-text {
    /* If you truly want margin-based spacing */
    margin-top: -5rem !important;
}