/* RED20-V15-CART-CATEGORY-EXPLORE-FIX-20260902
   Narrow production-safe fixes on top of V14.
   - Restore existing Explore More admin/database background colour.
   - Desktop home Categories: center every loaded main category and show all without sideways clipping.
   - Mobile Categories intentionally remain V14's 4 full + half-next horizontal row.
   No cart/payment/category business logic is changed here.
*/

/* Restore the colour already supplied by home.php as --explore-bg.
   Cards/images remain transparent/image-only; only the section background follows existing data. */
html body .red20-explore-section{
  background:var(--explore-bg,#fff7f2)!important;
}

/* Desktop/tablet: the homepage currently loads the first 12 main categories.
   Center the complete set and allow wrapping only if the viewport genuinely needs it. */
@media (min-width:768px){
  html body .category-section ul.d-flex{
    display:flex!important;
    flex-flow:row wrap!important;
    justify-content:center!important;
    align-items:flex-start!important;
    gap:14px!important;
    overflow:visible!important;
    width:100%!important;
    max-width:100%!important;
    padding:4px 4px 6px!important;
    margin:0 auto!important;
    scroll-snap-type:none!important;
  }
  html body .category-section ul.d-flex li{
    flex:0 0 98px!important;
    width:98px!important;
    min-width:98px!important;
    max-width:98px!important;
  }
}

/* Explicitly preserve V14 mobile app-style discovery: 4 full circles + half of next. */
@media (max-width:767.98px){
  html body .category-section ul.d-flex{
    flex-flow:row nowrap!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  html body .category-section ul.d-flex li{
    flex:0 0 calc((100vw - 44px)/4.5)!important;
    width:calc((100vw - 44px)/4.5)!important;
    min-width:calc((100vw - 44px)/4.5)!important;
    max-width:calc((100vw - 44px)/4.5)!important;
  }
}