/* Updated Banner Grid Layout Solution - Mobile uses Tablet Layout */

/* Base styles for all screen sizes */
.banners-grid.banners-grid--3 {
    width: 100%;
    box-sizing: border-box;
}

.banners-grid.banners-grid--3 .banner-entry {
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Maintain rounded corners */
}

.banners-grid.banners-grid--3 .banner-entry a {
    display: block;
    width: 100%;
    height: 100%;
}

.banners-grid.banners-grid--3 .banner-entry img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.banners-grid.banners-grid--3 .banner-entry:hover img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

/* Mobile: Same as tablet layout (2x2 grid) */
@media (max-width: 767px) {
    .banners-grid.banners-grid--3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0.75rem; /* Slightly smaller gap for mobile */
        height: 250px; /* Smaller height for mobile screens */
    }

    .banners-grid.banners-grid--3 .banner-entry:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .banners-grid.banners-grid--3 .banner-entry:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .banners-grid.banners-grid--3 .banner-entry:nth-child(3) {
        grid-column: 1 / 3;
        grid-row: 2;
    }
}

/* Tablet: 2x2 grid layout */
@media (min-width: 768px) and (max-width: 1023px) {
    .banners-grid.banners-grid--3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 1rem;
        height: 300px;
    }

    .banners-grid.banners-grid--3 .banner-entry:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .banners-grid.banners-grid--3 .banner-entry:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .banners-grid.banners-grid--3 .banner-entry:nth-child(3) {
        grid-column: 1 / 3;
        grid-row: 2;
    }
}

/* Desktop: Desired layout - 1 large on right, 2 small on left */
@media (min-width: 1024px) {
    .banners-grid.banners-grid--3 {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two equal columns */
        grid-template-rows: 1fr 1fr; /* Two equal rows */
        gap: 1rem;
        height: 400px; /* Adjust based on your design needs */
        max-height: 500px; /* Prevent excessive height */
    }

    /* First banner (top-left) */
    .banners-grid.banners-grid--3 .banner-entry:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    /* Second banner (bottom-left) */
    .banners-grid.banners-grid--3 .banner-entry:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    /* Third banner (spans both rows on the right) */
    .banners-grid.banners-grid--3 .banner-entry:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / 3; /* Spans both rows */
    }
}

/* Large Desktop: Increase container height for better proportions */
@media (min-width: 1440px) {
    .banners-grid.banners-grid--3 {
        height: 500px;
    }
}



section#products-slider-3-slider {
   background-color: #dee8e496;
    padding-top: 0px;
    padding-bottom: 20px;
}

.product-entry__image-main {
    background-color: transparent !important;
}

.product-entry--vertical {
    flex-direction: column;
    gap: 0px;
    background-color: #ffffff;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 12px;
}

salla-slider .slide--one-fifth {
    width: 70% !important;

}

.card--align-center .product-entry--vertical .add-to-cart-conatiner {
    width: 80%;
  }
  
  
  .w-14.h-14.md\:w-20.md\:h-20.flex.items-center {
    width: 30px !important;
    height: 30px !important;
}

.s-block--features__item.flex-1.justify-between.flex.gap-2.md\:gap-3.flex-col.dark\:bg-dark.bg-white.dark\:bg-darker.shadow-lg.shadow-black\/\[0\.02\].dark\:shadow-white\/\[0\.02\].ring-1.ring-gray-900\/5.dark\:ring-white\/5.rounded.min-w-\[103px\].p-2.md\:px-12.md\:py-8.items-center.justify-center.md\:w-1\/3.group.anime-item {
    background-color: #f5f5f5;
}

.s-block--features__item.flex-1.justify-between.flex.gap-2.md\:gap-3.flex-col.dark\:bg-dark.bg-white.dark\:bg-darker.shadow-lg.shadow-black\/\[0\.02\].dark\:shadow-white\/\[0\.02\].ring-1.ring-gray-900\/5.dark\:ring-white\/5.rounded.min-w-\[103px\].p-2.md\:px-12.md\:py-8.items-center.justify-center.md\:w-1\/3.group.anime-item {
    display: flex
;
    flex-direction: row;
    height: 70px;
}
.feature-icon.mb-2.transition-transform.text-center.duration-700 {
    margin-bottom: 5px;
    margin-top: 10px;
}

section.s-block.s-block--main-slider-1.s-block--anime.s-block--main-slider.s-block--full-bg.wide-placeholder.relative.overflow-hidden.is-first-block.in-normal-size {
    border-radius: 12px;
    margin: 45px 15px 0px 15px;
}

section.s-block.s-block--main-slider-1.s-block--anime.s-block--main-slider.s-block--full-bg.wide-placeholder.relative.overflow-hidden.is-first-block.in-normal-size {
    border-radius: 12px;
    margin: 45px 15px 0px 15px;
}
header.header.store-header {
    top: 33px !important;
}
.main-nav {
    display: flex;
   }
   
button.header-rounded-btn.side-panel-trigger {
    display: none;
}

.main-nav {

    min-height: 60px !important;
    
    }
    
    .header--transparent-logo #main-nav:not(.fixed-pinned) .transparent-logo {
 
   filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(881%) hue-rotate(142deg) brightness(96%) contrast(98%);
}

.mainmenu--default .main-menu li.root-level>a {
        padding-top: 0px;
        padding-bottom: 0rem;
        font-weight: 700;
    }
   
   @media only screen and (min-width: 1025px) {
    .mainmenu--default .main-menu {
 
        padding-top: 20px;
        padding-bottom: 20px;
    }
}


.main-nav.fixed-pinned .inner {

    padding-top: 5px;
    padding-bottom: 5px;
 
    backdrop-filter: saturate(170%) blur(10px);
    background: rgb(221 221 221 / 33%);
}


a.quicklinks-item[href="https://salla.sa/taam-store/جميع-المنتجات/c1607213531"] {
    background-color: #023438;
    border-radius: 35px;
    transition: background-color 0.3s ease;
    padding: 3px 11px !important;
color: #ffffff !important;
}

/* Hover effect */
a.quicklinks-item[href="https://salla.sa/taam-store/جميع-المنتجات/c1607213531"]:hover {
    background-color: #023438; /* Darker background on hover */
    color: #f8f9fa; /* Lighter text on hover */
    transform: translateY(-1px); /* Slight lift effect */
}

/* Ensure the span inside also gets the text color */
a.quicklinks-item[href="https://salla.sa/taam-store/جميع-المنتجات/c1607213531"] span {
    color: #ffffff!important;
}

/* Focus state for accessibility */
a.quicklinks-item[href="https://salla.sa/taam-store/جميع-المنتجات/c1607213531"]:focus {
    outline: 2px solid #80bdff;
    outline-offset: 2px;
}




.product-entry__image,
.product-entry__image .image--aspect-ratio {
  overflow: visible !important;   /* اسمح للعنصر بالخروج فوق الصورة */
}

.product-entry { 
  position: relative;             /* مرجع التمركز */
}

/* لو كانت .product-entry__image معلّمة relative في الثيم،
   بدّلها إلى static كي لا تكون هي المرجع: */
.product-entry__image {
  position: static !important;
}

.promotion-badge-wrap{
  position: absolute;
  inset-block-start: 10px;        /* أعلى البطاقة */
  inset-inline-start: 16px;       /* بداية السطر (يدعم RTL/LTR) */
  z-index: 10;
}

/* شكل الشارة (اختياري ليحاكي المثال) */
.promotion-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;

  font-weight: 600;
  border-radius: 12px 12px 0px 0px ;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.promotion-badge-wrap{
  inset-inline: 16px;             /* يمين ويسار */
}
.promotion-badge{
  width: 100%;
  justify-content: center;
  border-radius: 12px 12px 0px 0px;
}
.promotion-badge-wrap {
    position: absolute;
    inset-block-start: -14px;
    inset-inline: 0px;
}
html[dir=rtl] .promotion-badge {
    right: 0rem !important;
}
.product-entry--vertical {
    flex-direction: column;
    gap: 0px;
    background-color: #ffffff;
    padding-top: 30px;
    padding-bottom: 16px;
    border-radius: 12px;
    margin-top: 12px;
        box-shadow: #00000029 0px 1px 4px;
}

.custom-promotion-with-value .promotion-badge.has-discount {
    --tw-shadow-color: none !important;
}

.custom-promotion-with-value .promotion-badge.has-discount:where([dir="rtl"], [dir="rtl"] *)
Specificity: (0,3,0)
 {
    --tw-shadow: none !important;
    
    }
    
    salla-slider.has-scrollbar .s-slider-container {
    padding-bottom: 2.5rem;
}

.swiper-scrollbar.swiper-scrollbar-horizontal {
    display: none;
}

.last\:mb-4:last-child {

    margin: 5px;
}
    .s-block__title, .s-slider-block__title {
        margin-bottom: 5px;
    }
    salla-slider.has-scrollbar.has-less-slides .s-slider-container {
        padding-bottom: 40px;
    }
    
    
    .custom-promotion-with-value .promotion-badge.has-discount
    
  {
  
  background-color: var(--card-promotion-with-number-bg);
    --tw-text-opacity: 1;
    color: rgb(255 255 255);
    color: rgb(255 255 255);
  
  }
  
  .promotion-title 
  
{

background-color: rgb(48 119 88);
    background-color: rgb(48 119 88);

}

section.s-block.s-block--faqs.s-block--anime.s-block--full-bg.relative.py-8.sm\:py-16.bg-gray-50.dark\:bg-white\/\[0\.02\].overflow-hidden {
    margin: 15px;
    border-radius: 12px;
}

.absolute.inset-0.bg-\[top_center\].bg-no-repeat {
    border-radius: 12px 12px 0px 0px;
    margin-right: 15px;
    margin-left: 15px;
}
  section.s-block.s-block--marquee.relative.bg-gray-50.overflow-hidden.from-inherit.is-mini.s-block--full-bg
 {
    margin: 0px 15px 0px 15px !important;
    border-radius: 0px 0px 12px 12px !important;
     --tw-gradient-from: none !important;
    }
    
    a.more-link.more-link--arrowed.group.transition-all.duration-300 {
    background-color: #033438;
    color: white;
    padding: 12px;
    border-radius: 34px;
    font-weight: bold;
    padding-right: 20px !important;
}

small.opacity-60.block.mb-2.anime-item {
    font-weight: bold;
    background-color: white;
    border-radius: 30px;
    padding: 0px;
    text-align: center;
    width: 65%;
    margin-bottom: 20px;
}
.relative.title-and-price.z-1 {
    place-items: anchor-center;
}
section#featured-products-style2-7 {
    background-color: #f5f5f5;
}
a.slide--cat-entry.has-image.has-zoom-transition.is-rectangular {
    border: 1px solid #d2d2d2;
    border-radius: 12px;
    display: flex
;
    box-shadow: #00000029 0px 1px 4px;
    justify-content: space-between;
}
a.slide--cat-entry.has-image.has-zoom-transition.is-rectangular small.opacity-60 {
    color: #ecac2d;
}
a.slide--cat-entry.has-image.has-zoom-transition.is-rectangular span.image--aspect-ratio.overflow-hidden {
    border-radius: 12px 12px 0px 0px !important;
}





/* هدى آل فواز */
.slide--cat-entry[aria-label="هدى آل فواز"]::after {
  content: "”مره يجنن يغمز من قلب اخذته ل امي ❤️“";
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #444;
}

/* محمد المالكي */
.slide--cat-entry[aria-label="محمد المالكي"]::after {
  content: "”الجهاز عملي جدًا وسهل الاستخدام، خاصة في نهاية اليوم. يريح العضلات وينشط الدورة الدموية، حتى والدتي جربته وأصبحت تستخدمه بشكل يومي.“";
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #444;
}

/* طراد الشريف */
.slide--cat-entry[aria-label="طراد الشريف"]::after {
  content: "”لكبار السن جهاز بسيط، يحافظ على مرونة العضلات، يخفف التعب، ويسرّع الاستشفاء بدون جهد انصح فيه“";
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #444;
}

/* خالد الغامدي */
.slide--cat-entry[aria-label="خالد الغامدي"]::after {
  content: "”اخذت للوالد عجبه و فرح فيه الجهاز ممتاز اللهم بارك في سرعات و يتحرك للأمام و للخلف و سهل الاستخدام و ما له صوت جميل جداً“";
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #444;
}

/* عبير الجهني */
.slide--cat-entry[aria-label="عبير الجهني"]::after {
  content: "”ممتاز جداً استفاد منه والدي بعدما كان حركته قليلة بعد الجهاز تغيرت كثير حركته. اليوم وصلني الجهاز الثاني منه“";
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #444;
}

.align-below .slide--cat-entry.has-image h2 {
    position: static;
    margin-top: 1rem;
    padding: 0px;
    font-weight: 500;
    color: #4e4e4e;
    margin-bottom: 5px;
}

.container.relative.py-10.sm\:py-28 {
    max-width: 100% !important;
}

section#featured-products-11 {
    background-color: #f7f6f3;
}

@media (max-width: 768px) {
.right-side.mobile-main-nav.flex.items-center.gap-5.lg\:gap-0 {
    gap: 50%;
}}
section#products-slider-2-slider {
    background-color: #f7f6f3;
    padding-top: 25px;
}
.container.lg\:rounded.relative.isolate.bg-no-repeat.bg-cover.py-24.flex.items-center.justify-center.backdrop-blur-3xl {
    padding: 12px 15px;
}
.mt-10.flex.items-center.gap-x-6.justify-center {
    display: none;
}

h2.text-2xl.md\:text-\[52px\].font-bold.md\:\!leading-\[1\.2\] {
    font-size: 26px;
}
p.relative.mt-3.md\:mt-6.text-lg.leading-8.sm\:max-w-md.lg\:max-w-none {
    font-size: 15px;
}
section#title-only-2 {
    background-color: #ecf1ef;
    padding-top: 28px;
    color: #506259;
}
section#products-slider-3-slider h2.last\:mb-4 {
    font-size: 14px!important;
    font-weight: 500;
    color: #033438;
}

section#products-slider-3-slider {
    max-width: 100%;
}


.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-free-mode.swiper-rtl.swiper-ios.swiper-backface-hidden {
    padding-bottom: 30px;
}
section#featured-products-10 {
    background-color
: #f5f5f5;
    margin: 0px 10px 0px 10px;
    border-radius: 0px 0px 12px 12px;
    padding-top: 20px;
}
section.s-block.s-block--fixed-banner.wide-placeholder.s-block--anime {
    background-color: #f5f5f5;
    margin: 0px 10px 0px 10px;
    border-radius: 12px 12px 0px 0px;
    padding-top: 25px;
}
img.max-h-44 {
    width: 50px;
    filter: invert(1);
}

.store-footer .social-link {
border-color: rgb(11 58 62);
}

.floating-contacts__icon{

width: 50px !important;
    height: 50px !important;
    border-bottom-right-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-radius: 50%;
    }
    
    .floating-contacts:where([dir="rtl"], [dir="rtl"] *) {
    right: 0.25rem;

}


}

.promotion-title {
    background-color: rgb(15 60 65);
    background-color: rgb(15 60 65);

{