/* =========================
   أقسامنا
   5 أقسام ظاهرين: 3 فوق + 2 تحت
========================= */

@media(max-width:1024px){

  .hx-cats-section{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:4px 0 14px!important;
    box-sizing:border-box!important;
  }

  .hx-cats-section .swiper,
  .hx-cats-section .swiper-container,
  .hx-cats-section .s-slider-container,
  .hx-cats-section salla-slider{
    width:100%!important;
    max-width:100%!important;
    padding:0 14px!important;
    margin:0 auto!important;
    overflow:visible!important;
    height:auto!important;
    box-sizing:border-box!important;
  }

  .hx-cats-section .swiper-wrapper{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:14px 10px!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    margin:0 auto!important;
    padding:0!important;
    transform:none!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  .hx-cats-section .swiper-slide{
    grid-column:span 2!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  .hx-cats-section .swiper-slide:nth-child(4){
    grid-column:2 / span 2!important;
  }

  .hx-cats-section .swiper-slide:nth-child(5){
    grid-column:4 / span 2!important;
  }

  .hx-cats-section .hx-cat-card{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:118px!important;
    min-height:118px!important;
    max-height:118px!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background:#f8f3f1!important;
    border:2px solid #e97066!important;
    box-shadow:0 8px 22px rgba(0,0,0,.08)!important;
    box-sizing:border-box!important;
  }

  .hx-cats-section .hx-cat-card img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    min-width:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    display:block!important;
    z-index:1!important;
  }

  .hx-cats-section .hx-cat-card picture{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    display:block!important;
    z-index:1!important;
  }

  .hx-cats-section .hx-cat-card:before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:48%!important;
    background:linear-gradient(
      to top,
      rgba(0,0,0,.58),
      rgba(0,0,0,.24),
      rgba(0,0,0,0)
    )!important;
    z-index:2!important;
    pointer-events:none!important;
  }

  .hx-cats-section .hx-cat-card:after{
    content:attr(data-hx-label)!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    min-height:37px!important;
    padding:8px 5px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    direction:rtl!important;
    color:#fff!important;
    font-size:12.5px!important;
    font-weight:800!important;
    line-height:1.25!important;
    text-shadow:0 2px 8px rgba(0,0,0,.35)!important;
    z-index:3!important;
    box-sizing:border-box!important;
  }

  .hx-cats-section .hx-hide-cat-text,
  .hx-cats-section .hx-cat-card svg,
  .hx-cats-section .hx-cat-card i,
  .hx-cats-section .hx-cat-card [class*="arrow"],
  .hx-cats-section .hx-cat-card [class*="chevron"]{
    display:none!important;
  }

  .hx-cats-section .swiper-button-next,
  .hx-cats-section .swiper-button-prev,
  .hx-cats-section .s-slider-block__display-all,
  .hx-cats-section .swiper-pagination{
    display:none!important;
  }
}


/* =========================
   سلايدرات المنتجات:
   الأكثر مبيعًا
   الأعلى تقييمًا
   مجموعات العناية
   2 فوق و2 تحت
========================= */

@media(max-width:768px){

  .hx-products-section{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .hx-products-section .swiper,
  .hx-products-section .swiper-container,
  .hx-products-section .s-slider-container,
  .hx-products-section salla-slider{
    width:100%!important;
    max-width:100%!important;
    padding:0 12px!important;
    margin:0 auto!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .hx-products-section .swiper-wrapper{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,auto)!important;
    grid-auto-columns:calc((100% - 12px) / 2)!important;
    gap:16px 12px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:0 0 12px!important;
    box-sizing:border-box!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    transform:none!important;
    scroll-snap-type:x mandatory!important;
    justify-content:start!important;
    align-items:stretch!important;
    direction:ltr!important;
  }

  .hx-products-section .swiper-wrapper::-webkit-scrollbar{
    display:none!important;
  }

  .hx-products-section .swiper-slide{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    scroll-snap-align:start!important;
    direction:rtl!important;
  }

  .hx-products-section .s-product-card-entry,
  .hx-products-section .product-entry,
  .hx-products-section .product-card{
    width:100%!important;
    height:100%!important;
    margin:0!important;
    border-radius:16px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
  }

  .hx-products-section .s-product-card-image,
  .hx-products-section .product-entry__image{
    width:100%!important;
    height:165px!important;
    overflow:hidden!important;
  }

  .hx-products-section .s-product-card-image img,
  .hx-products-section .product-entry__image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  .hx-products-section .s-product-card-content,
  .hx-products-section .product-entry__content{
    padding:10px 8px!important;
    text-align:center!important;
  }

  .hx-products-section .s-product-card-content-title,
  .hx-products-section .product-entry__title{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  .hx-products-section .s-product-card-content-title a,
  .hx-products-section .product-entry__title a{
    font-size:13px!important;
    line-height:1.55!important;
    text-align:center!important;
  }

  .hx-products-section .s-product-card-price,
  .hx-products-section .s-product-card-sale-price,
  .hx-products-section .product-entry__price{
    font-size:13px!important;
    justify-content:center!important;
    text-align:center!important;
  }

  .hx-products-section salla-add-product-button,
  .hx-products-section salla-add-product-button button,
  .hx-products-section .s-button-element,
  .hx-products-section button{
    width:100%!important;
  }

  .hx-products-section salla-add-product-button button,
  .hx-products-section .s-button-element{
    min-height:42px!important;
    border-radius:12px!important;
    font-size:13px!important;
  }
}