/* RED20-V5-VISUAL-20260902
   UI-only refinement on top of V4.
   - Shorter homepage banner
   - Circular category artwork with clean image fitting
   - Explore More desktop: 6 full cards + half of the next card
   - Mobile Explore More keeps the app-style 3 full + half cue
*/

/* ---------- Smaller / cleaner homepage banner ---------- */
html body .banner-swiper{
  border-radius:14px!important;
  overflow:hidden!important;
}
html body .banner-swiper .swiper-slide,
html body .banner-swiper .center-swiper-slide{
  overflow:hidden!important;
  border-radius:14px!important;
}
html body .banner-swiper img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:220px!important;
  aspect-ratio:5.6/1!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* ---------- Homepage Category: circular visual system ---------- */
html body .category-section ul.d-flex li{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:7px 4px!important;
  text-align:center!important;
}
html body .category-section ul.d-flex li > div{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:0!important;
}
html body .category-section ul.d-flex li > div > a{
  width:88px!important;
  height:88px!important;
  max-width:100%!important;
  aspect-ratio:1/1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  overflow:hidden!important;
  margin:0 auto!important;
  padding:7px!important;
  background:#fff!important;
  border:1px solid #eceef1!important;
  box-shadow:0 4px 14px rgba(25,30,38,.06)!important;
}
html body .category-section ul.d-flex li > div > a img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:50%!important;
  margin:0!important;
  padding:0!important;
}
html body .category-section ul.d-flex li h4{
  margin:7px 0 0!important;
  text-align:center!important;
  min-height:28px!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}

/* Category tiles used elsewhere on customer-facing category pages. */
html body .category-image{
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#fff!important;
  padding:8px!important;
}
html body .category-image img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:50%!important;
}

/* Explore More is category discovery too: use the same circular image language. */
html body .red20-explore-image{
  width:86px!important;
  height:86px!important;
  max-width:100%!important;
  aspect-ratio:1/1!important;
  margin:0 auto!important;
  border-radius:50%!important;
  background:#fff!important;
  border:1px solid #eceef1!important;
  padding:6px!important;
  overflow:hidden!important;
}
html body .red20-explore-image img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:50%!important;
}

/* ---------- Explore More: desktop = 6 full + half next ---------- */
@media (min-width:992px){
  html body .red20-explore-scroll{
    gap:10px!important;
    padding-right:18px!important;
  }
  html body .red20-explore-card{
    /* 6.5 cards + six 10px gaps fit into the visible scroller. */
    flex:0 0 calc(15.3846% - 9.23px)!important;
    width:calc(15.3846% - 9.23px)!important;
    min-width:calc(15.3846% - 9.23px)!important;
    max-width:calc(15.3846% - 9.23px)!important;
    padding:9px 6px!important;
  }
  html body .red20-explore-image{
    width:min(86px,82%)!important;
    height:auto!important;
  }
}

/* Tablet: roomy single row with the next card visibly peeking. */
@media (min-width:768px) and (max-width:991.98px){
  html body .red20-explore-card{
    flex:0 0 calc(18.1818% - 8.2px)!important;
    width:calc(18.1818% - 8.2px)!important;
    min-width:calc(18.1818% - 8.2px)!important;
    max-width:calc(18.1818% - 8.2px)!important;
  }
}

@media (max-width:767.98px){
  /* Keep the V4 mobile discovery target: 3 full category cards + half next. */
  html body .banner-swiper img{
    max-height:132px!important;
    aspect-ratio:2.9/1!important;
  }
  html body .category-section{
    padding:9px 5px!important;
  }
  html body .category-section ul.d-flex{
    gap:8px!important;
    padding:1px 12px 5px 1px!important;
  }
  html body .category-section ul.d-flex li{
    flex:0 0 76px!important;
    width:76px!important;
    min-width:76px!important;
    max-width:76px!important;
    padding:4px 2px!important;
  }
  html body .category-section ul.d-flex li > div > a{
    width:62px!important;
    height:62px!important;
    padding:5px!important;
  }
  html body .category-section ul.d-flex li h4{
    font-size:8.5px!important;
    line-height:1.2!important;
    min-height:20px!important;
    margin-top:5px!important;
  }
  html body .red20-explore-image{
    width:60px!important;
    height:60px!important;
    padding:4px!important;
  }
}