/* RED20-V6-SIMPLE-PRODUCT-20260902
   Presentation-only refinements.
   Keeps original category/section/cart/variant/checkout logic intact.
*/

/* 1) Category artwork: slightly larger, clean true circles. */
html body .category-section ul.d-flex li > div > a{
  width:98px!important;
  height:98px!important;
  padding:8px!important;
  border-radius:50%!important;
  background:#fff!important;
  border:1px solid #e7e9ed!important;
  box-shadow:0 5px 16px rgba(25,30,38,.075)!important;
}
html body .category-section ul.d-flex li > div > a img,
html body .category-image img,
html body .red20-explore-image img{
  object-fit:contain!important;
  object-position:center!important;
}
html body .category-section ul.d-flex li h4{
  font-size:12px!important;
  line-height:1.25!important;
  margin-top:8px!important;
}

/* 2) Explore More: always ONE horizontal row. 6 full + half next on desktop. */
html body .red20-explore-scroll{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-inline:contain!important;
  touch-action:pan-x pan-y pinch-zoom!important;
  scrollbar-width:none!important;
}
html body .red20-explore-scroll::-webkit-scrollbar{display:none!important;}
html body .red20-explore-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:142px!important;
}
html body .red20-explore-image{
  width:94px!important;
  height:94px!important;
  border-radius:50%!important;
  flex:0 0 94px!important;
  padding:7px!important;
}
html body .red20-explore-name{
  width:100%!important;
  text-align:center!important;
  line-height:1.22!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
@media (min-width:992px){
  html body .red20-explore-scroll{gap:12px!important;padding-right:24px!important;}
  html body .red20-explore-card{
    /* 6.5 visible cards to make the horizontal-scroll affordance obvious. */
    flex:0 0 calc((100% - 66px) / 6.5)!important;
    width:calc((100% - 66px) / 6.5)!important;
    min-width:calc((100% - 66px) / 6.5)!important;
    max-width:calc((100% - 66px) / 6.5)!important;
    padding:10px 7px!important;
  }
}

/* 3) Safety: every homepage category product section remains one horizontal row. */
html body [data-red20-product-row],
html body .red20-product-scroll,
html body .red20-section-products{
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y pinch-zoom!important;
}

/* 4) Cart item-count badge: obvious on desktop and mobile. */
html body #cart-count{
  min-width:18px!important;
  height:18px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:10px!important;
  line-height:18px!important;
  font-weight:800!important;
  background:#e7332b!important;
  color:#fff!important;
  vertical-align:top!important;
}
html body #cart-count:empty{display:none!important;}
.red20-tab-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.red20-mobile-cart-count{
  position:absolute;
  top:-8px;
  right:-12px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:999px;
  background:#e7332b;
  color:#fff;
  font-size:9px;
  font-weight:900;
  line-height:17px;
  text-align:center;
  box-shadow:0 0 0 2px #fff;
}
.red20-mobile-cart-count.is-empty{display:none!important;}

/* 5) Product detail: availability remains in code but is hidden from UI for now. */
html body #validate-zipcode-form,
html body #validate-city-form{
  display:none!important;
}

/* 6) Product detail: two clear primary actions; Compare/Favorite become quiet secondary controls. */
html body .red20-product-action-row{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  overflow:visible!important;
  align-items:center!important;
  margin-top:10px!important;
}
html body .red20-product-action-row > #add_cart,
html body .red20-product-action-row > #buy_now,
html body .red20-product-action-row > a[href*="cart"]{
  flex:1 1 calc(50% - 5px)!important;
  width:auto!important;
  min-width:0!important;
  min-height:48px!important;
  border-radius:12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  font-size:14px!important;
  font-weight:800!important;
  margin:0!important;
}
html body .red20-product-action-row > #add_cart,
html body .red20-product-action-row > a[href*="cart"]{
  background:#fff7f2!important;
  border:1.5px solid #ff5a00!important;
  color:#ff5a00!important;
}
html body .red20-product-action-row > #buy_now{
  background:#ff5a00!important;
  border:1.5px solid #ff5a00!important;
  color:#fff!important;
}
html body .red20-product-action-row .red20-secondary-action{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  margin:0!important;
  background:#fff!important;
  color:#606770!important;
  border:1px solid #e3e6ea!important;
  box-shadow:none!important;
  font-size:0!important;
}
html body .red20-product-action-row .red20-secondary-action i{
  font-size:14px!important;
  margin:0!important;
}
html body .red20-product-action-row .red20-secondary-action span{display:none!important;}
html body .red20-product-action-row #compare,
html body .red20-product-action-row #add_to_favorite_btn{
  flex:0 0 38px!important;
}
html body .red20-product-action-row .red20-whatsapp-action{
  margin-left:auto!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-height:36px!important;
  border-radius:999px!important;
  padding:0 12px!important;
  margin:0!important;
  font-size:11px!important;
}

@media (max-width:767.98px){
  html body .category-section ul.d-flex li{
    flex:0 0 88px!important;
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
  }
  html body .category-section ul.d-flex li > div > a{
    width:72px!important;
    height:72px!important;
    padding:6px!important;
  }
  html body .category-section ul.d-flex li h4{
    font-size:9.5px!important;
    min-height:22px!important;
    margin-top:6px!important;
  }
  html body .red20-explore-scroll{gap:8px!important;padding-right:16px!important;}
  html body .red20-explore-card{
    /* app discovery: 3 full + half of next */
    flex:0 0 calc((100% - 20px) / 3.5)!important;
    width:calc((100% - 20px) / 3.5)!important;
    min-width:calc((100% - 20px) / 3.5)!important;
    max-width:calc((100% - 20px) / 3.5)!important;
    min-height:118px!important;
    padding:7px 4px!important;
  }
  html body .red20-explore-image{
    width:68px!important;
    height:68px!important;
    flex-basis:68px!important;
    padding:5px!important;
  }
  html body .red20-product-action-row{gap:8px!important;}
  html body .red20-product-action-row > #add_cart,
  html body .red20-product-action-row > #buy_now,
  html body .red20-product-action-row > a[href*="cart"]{
    min-height:46px!important;
    font-size:12px!important;
    padding:0 8px!important;
  }
}