@media (max-width: 768px) {
main#content {
  display: flex;
  justify-content: center;
  padding: 0px 0%;
}
}
@media (max-width: 768px) {
  .lion_product_slider_section {
    display: flex;
    width: 100%;
    position: relative;
    direction: rtl;
    flex-direction: column;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px 4%;
  }
}
.lion-slider-desktop,
.lion-slider-mobile {
  display: none;
}
.lion-slider-active {
  display: block !important;
}
.home-category a {
    display: grid
;
    justify-items: center;
    gap: 4px;
}
.page-content {
    /* padding: 0px 2%; */
}
.lion-home-section {
    width: 100%;
    /* background: #fff; */
    padding: 0px 0;
    direction: rtl;
    margin-top: 18px;
    margin-bottom: 44px;
}

.home-category img {
    height: 44px !important;
    object-fit: contain;
}

/* === Flex container === */
.lion-home-flex {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 25px;
  margin: auto;
}
 .swiper-slide {
        width: 100% !important;
    }

/* Reverse order (small left, big right) */
.lion-home-flex.reversed {
  flex-direction: row-reverse;
}

/* === BIG SLIDER === */
.lion-big-slider {
  flex: 1 1 72%;
  border-radius: 24px;
  overflow: hidden;
}
.lion-big-slide {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
}
.lion-big-slide img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  transition: transform 0.6s ease;
}
.lion-big-slide:hover img {
  transform: scale(1.05);
}
.gradient-purple {
  background: linear-gradient(135deg, #00A693, #4560fc);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Swiper controls */
.lion-big-slider .swiper-button-next,
.lion-big-slider .swiper-button-prev {
  color: #fff;
  transition: all 0.3s ease;
}
.lion-big-slider .swiper-button-next:hover,
.lion-big-slider .swiper-button-prev:hover {
  transform: scale(1.1);
}
.lion-big-slider .swiper-pagination-bullet-active {
  background: #fff;
}

/* === SMALL SLIDER === */
.lion-small-slider {
  flex: 1 1 25%;
  border-radius: 20px;
  overflow: hidden;
}
.lion-small-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.lion-small-slide:hover img {
  transform: scale(1.05);
}
.lion-small-slide img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  transition: transform 0.5s ease;
}
.gradient-light {
  background: linear-gradient(145deg, #f9f7ff, #ebe8ff);
}








/* === Equal heights for both sliders === */
.lion-big-slider,
.lion-small-slider {
  height: 338px;
  border-radius: 24px;
  overflow: hidden;
  
}
.lion-small-slider {
    display: none;
}

/* Make slides and images fill the same height */
.lion-big-slide,
.lion-small-slide {
  height: 100%;
}

.lion-big-slide img,
.lion-small-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps aspect ratio and fills box */
  border-radius: 24px;
  transition: transform 0.5s ease;
}

/* Slight hover animation */
.lion-big-slide:hover img,
.lion-small-slide:hover img {
  transform: scale(1.05);
}

/* Home Category */
.home-category a {
    display: grid;
    justify-items: center;
    gap: 18px;
}
 
.home-category img {
    width: auto;
    transition: 1s;
}
.home-category {
    border-radius: 18px;
    height: 132px;
    background: white;
    /* border: 1px solid #E4E8F3; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 136px;
    transition: 1s;
}
.home-category:hover img {
    scale: 1.1;
}
.lion-home-banners {
    display: flex;
    gap: 40px;
}
.lion-home-banners-2 {
    display: flex
;
    gap: 40px;
    margin-top: 20px;
}

.lion-banner-item a {
  border-radius: 15px;
  overflow: hidden;
}

.lion-banner-item img {
  transition: transform 1s ease; /* apply transition to both directions */
}

.lion-banner-item:hover img {
  transform: scale(1.05);
}







/* Responsive override */
@media (max-width: 992px) {
  .lion-big-slider,
  .lion-small-slider {
    height: auto;
  }
  .lion-big-slide img,
  .lion-small-slide img {
    height: auto;
  }
}

/* === Responsive === */
@media (max-width: 992px) {
  .lion-home-flex.reversed {
    flex-direction: column;
  }
  .lion-big-slider, .lion-small-slider {
    flex: 1 1 100%;
  }
  .lion-big-slide img,
  .lion-small-slide img {
    border-radius: 16px;
  }
}
.home-categories {
      display: flex;
      gap: 20px;
      justify-content: space-between;
      text-align: center;
      overflow: scroll;
      justify-content: space-between;
    }

/* --- Responsive --- */
@media (max-width: 992px) {

  .lion-banner-big-small {
    display: grid
;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    height: 100px;
}
.lion-home-banners-wrapper {
    display: flex
;
    flex-direction: column;
    gap: 25px;
    padding: 10px 4%;
}
.lion-banner-big-small .small-banner {
    height: 100px !important;
    overflow: hidden;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px !important;
    width: 170px;
}
.lion-banner-small-big {
    display: grid;
    grid-template-columns: auto !important;
    gap: 10px;
}
.lion-banner-small-big .big-banner {
    display: flex;
    height: 100px !important;
    overflow: hidden;
    object-fit: none;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
}




    .page-content {
    padding: 0px 0px;
    min-width: auto;
    overflow: hidden;
    }
    /* Prevent overflow on mobile */
    .lion-big-slider,
    .lion-small-slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    }

    /* Make slides responsive */
    .lion-big-slider .swiper-slide,
    .lion-small-slider .swiper-slide {
    width: auto;
    }
   

    /* Keep images responsive */
    .lion-big-slider img,
    .lion-small-slider img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    }

    .lion-small-slider {
        display: none;
    }
    .home-categories {
      display: flex;
      gap: 20px;
      justify-content: space-between;
      text-align: center;
      overflow: scroll;
      justify-content: space-between;
    }
    .home-category {
        border-radius: 12px;
        height: 85px;
        border: unset;
        display: flex
;
        align-items: center;
        justify-content: center;
        transition: 1s;
        /* flex: 0 0 90px; */
        width: 110px;
    }
    .home-categories {
    display: flex
;
    gap: 10px;
    text-align: center;
}

    .lion-home-banners-2 {
                display: flex
;
        gap: 40px;
        margin-top: 20px;
        overflow: scroll;
        flex-wrap: nowrap;
    }
    .lion-banner-item {
        width: 100%;
    }
    .swiper-slide.swiper-slide-active {
    width: 100% !important;
    }
    .lion-banner-item img {
    max-width: 250px;
    }
   /* Hide scrollbars (you already had this) */
.lion-home-banners::-webkit-scrollbar { display: none; }
.lion-home-banners { scrollbar-width: none; -ms-overflow-style: none; }

.home-categories::-webkit-scrollbar { display: none; }
.home-categories { scrollbar-width: none; -ms-overflow-style: none; }

/* Explicit horizontal scroller layout */
.lion-home-banners{
  display: flex;
  gap: 12px;
  overflow-x: auto;        /* horizontal only */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  padding: 0px 0px;        /* tiny padding prevents edge clipping */
  scroll-snap-type: x proximity;     /* optional */
          margin: 40px 0px;
                  margin-top: 10px;
}


.home-categories {
  overflow-x: auto;        /* horizontal only */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  scroll-snap-type: x proximity;     /* optional */
  display: flex;
  flex-wrap: wrap;
  padding: 0px 4%;
}




.lion-banner-item a,
.lion-banner-item img{
  display: block;
  border-radius: 12px;     /* optional: polish */
  /* width/height can be set responsively if needed */
  /* e.g., max-width: 280px; */
}

.home-category img {
  border-radius: 12px;
  width: 40px;
}
section.lion-home-section {
    /* padding-top: 10px;
    padding-bottom: 0px; */
    margin-bottom: 10px;
    padding: 10px 4%;
            padding-top: 0px;
}
.home-category a {
    display: grid
;
    justify-items: center;
    gap: 0px;
}
.home-category h3 {
  font-size: 12px !important;
  margin-bottom: 0px;
}
.embla__viewport {
  padding-right: 0px;
}
    
   
    
}










.lion-home-banners-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* --- 1) big + small --- */
.lion-banner-big-small {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
}
.lion-banner-big-small img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

/* --- 2) grid 4 --- */
.lion-banner-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.lion-banner-grid-4 img {
    width: 100%;
    border-radius: 16px;
}

/* --- 3) single --- */
.lion-banner-single img {
    width: 100%;
    border-radius: 20px;
}

/* --- 4) half + half --- */
.lion-banner-half-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.lion-banner-half-half img {
    width: 100%;
    border-radius: 20px;
}
.lion-banner-small-big {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 15px;
}
.lion-banner-small-big img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}
.lion-banner-big-small .big-banner {
    height: 246px;
    overflow: hidden;
    object-fit: cover;
    display: flex
;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
}
.lion-banner-big-small .small-banner {
    height: 246px;
    overflow: hidden;
    object-fit: cover;
    display: flex
;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
}
.lion-banner-small-big .big-banner {
    display: flex;
    height: 300px;
    overflow: hidden;
    object-fit: cover;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
}
.lion-banner-small-big .small-banner {
    display: flex;
    height: 300px;
    overflow: hidden;
    object-fit: cover;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
}
.home-category h3 { font-size: 14px; color: black;margin: 0px; padding: 0px; }