/* RED20-V7-REFERENCE-CARDS-20260902
   UI-only polish:
   - Explore More uses large rounded rectangular image cards (reference style), never circles.
   - 6 full + half next desktop, 3 full + half next mobile.
   - Main category strip stays circular.
   - Header logo sits naturally in white header without a card/box look.
   - Product-detail WhatsApp sits with the gallery; main purchase actions stay simple.
   - Related products mobile = 2 full + half next, native horizontal scroll.
   - Old phone/email/social/contact topbar is removed in markup; CSS safety hides it too.
*/

/* Header cleanup / embedded logo */
html body #header .topbar{display:none!important}
html body #header .navbar{min-height:72px!important;align-items:center!important}
html body #header .navbar-brand.red20-brand-lockup{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  margin:0 20px 0 0!important;padding:0!important;background:transparent!important;
  border:0!important;box-shadow:none!important;border-radius:0!important;line-height:1!important;
}
html body #header .navbar-brand.red20-brand-lockup .brand-logo-link{
  display:block!important;width:auto!important;height:52px!important;max-width:158px!important;
  max-height:52px!important;object-fit:contain!important;object-position:left center!important;
  padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
}

/* Explore More: reference-like promo/category tiles */
html body .red20-explore-section{
  padding:18px 16px 14px!important;border-radius:18px!important;
  background:linear-gradient(180deg,var(--explore-bg,#fff5e6),#fff0d2)!important;
  border:1px solid rgba(174,111,35,.10)!important;
}
html body .red20-explore-scroll{
  display:flex!important;flex-flow:row nowrap!important;align-items:stretch!important;
  gap:14px!important;overflow-x:auto!important;overflow-y:hidden!important;
  padding:4px 24px 12px 2px!important;scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch!important;touch-action:pan-x pan-y pinch-zoom!important;
  scroll-snap-type:x proximity!important;
}
html body .red20-explore-scroll::-webkit-scrollbar{display:none!important}
html body .red20-explore-card{
  flex:0 0 calc((100% - 84px)/6.5)!important;
  width:calc((100% - 84px)/6.5)!important;min-width:calc((100% - 84px)/6.5)!important;
  max-width:calc((100% - 84px)/6.5)!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  justify-content:flex-start!important;padding:0 0 10px!important;overflow:hidden!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:20px!important;scroll-snap-align:start!important;text-decoration:none!important;
}
/* Critical override: Explore is NOT circular. */
html body .red20-explore-card .red20-explore-image{
  width:100%!important;height:auto!important;aspect-ratio:1/1!important;flex:0 0 auto!important;
  margin:0!important;padding:10px!important;border-radius:22px!important;
  background:rgba(255,255,255,.90)!important;border:1px solid rgba(105,71,31,.06)!important;
  box-shadow:0 4px 16px rgba(96,59,19,.04)!important;overflow:hidden!important;
}
html body .red20-explore-card .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:14px!important;
}
html body .red20-explore-name{
  display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
  white-space:normal!important;overflow:hidden!important;text-overflow:ellipsis!important;
  width:100%!important;min-height:38px!important;margin:10px 0 0!important;padding:0 5px!important;
  text-align:center!important;font-size:14px!important;line-height:1.3!important;font-weight:750!important;
  color:#3b2c20!important;
}
html body .red20-explore-card:hover .red20-explore-image{transform:translateY(-2px);box-shadow:0 8px 20px rgba(70,45,15,.08)!important}

/* Product image WhatsApp action */
.red20-gallery-whatsapp{display:flex;justify-content:center;margin:10px 0 2px}
.red20-whatsapp-gallery-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  padding:0 16px;border-radius:999px;background:#f0fff5;border:1px solid #bce8c8;
  color:#128c4b!important;font-size:12px;font-weight:800;text-decoration:none!important;
  box-shadow:0 2px 8px rgba(18,140,75,.06)
}
.red20-whatsapp-gallery-btn i{font-size:19px;color:#25D366}
.red20-whatsapp-gallery-btn:hover{background:#e5fbed;color:#0f7e43!important}
/* Hide the old WhatsApp inside main action row if stale template/cache markup remains. */
html body .red20-product-action-row .red20-whatsapp-action{display:none!important}

/* Related products: native row; 6-ish desktop, 2.5 mobile. */
.red20-related-scroll{
  width:100%;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y pinch-zoom!important;scrollbar-width:none!important;scroll-snap-type:x proximity;
  padding:4px 3px 12px
}
.red20-related-scroll::-webkit-scrollbar{display:none}
.red20-related-track{display:flex!important;flex-flow:row nowrap!important;align-items:stretch!important;gap:12px!important;width:max-content!important;min-width:100%!important}
.red20-related-card{flex:0 0 205px!important;width:205px!important;max-width:205px!important;scroll-snap-align:start!important}
.red20-related-card .product-grid{height:100%!important}

@media (max-width:767.98px){
  html body #header .navbar{min-height:55px!important}
  html body #header .navbar-brand.red20-brand-lockup{margin:0 8px!important;justify-content:center!important}
  html body #header .navbar-brand.red20-brand-lockup .brand-logo-link{
    height:38px!important;max-height:38px!important;max-width:110px!important;object-position:center!important;
  }

  html body .red20-explore-section{padding:10px 0 8px 8px!important;border-radius:14px!important}
  html body .red20-explore-section .red20-section-head{padding-right:8px!important}
  html body .red20-explore-scroll{gap:8px!important;padding:3px 18px 8px 0!important}
  html body .red20-explore-card{
    /* exactly 3 full cards + half of next visible */
    flex:0 0 calc((100vw - 42px)/3.5)!important;
    width:calc((100vw - 42px)/3.5)!important;min-width:calc((100vw - 42px)/3.5)!important;
    max-width:calc((100vw - 42px)/3.5)!important;padding-bottom:7px!important;border-radius:14px!important;
  }
  html body .red20-explore-card .red20-explore-image{padding:6px!important;border-radius:14px!important}
  html body .red20-explore-card .red20-explore-image img{border-radius:10px!important}
  html body .red20-explore-name{font-size:10px!important;line-height:1.22!important;min-height:25px!important;margin-top:6px!important;padding:0 2px!important}

  .red20-gallery-whatsapp{margin:7px 0 3px}
  .red20-whatsapp-gallery-btn{min-height:38px;padding:0 14px;font-size:11px}
  .red20-whatsapp-gallery-btn i{font-size:18px}

  .red20-related-track{gap:8px!important;padding-right:18px!important}
  .red20-related-card{
    /* 2 full product cards + half of the 3rd card as swipe cue */
    flex:0 0 calc((100vw - 34px)/2.5)!important;
    width:calc((100vw - 34px)/2.5)!important;
    min-width:calc((100vw - 34px)/2.5)!important;
    max-width:calc((100vw - 34px)/2.5)!important;
  }
  .red20-related-card .product-image{height:145px!important}
  .red20-related-card .product-content{padding:8px!important}
  .red20-related-card .title{font-size:11px!important;line-height:1.25!important;min-height:28px!important}
}