/* RED20-V10-CATEGORY-IMAGE-CHECKOUT-20260902
   UI + navigation safety patch. No cart calculations, product, stock, price or checkout business rules changed.
*/
:root{--r20:#ff5a00;--r20-line:#e8eaee;--r20-text:#20242a}

/* Main Categories: use the full visual frame, not a tiny image floating in empty space. */
html body .red20-all-category-media{padding:0!important;background:#fff!important;overflow:hidden!important;border:1px solid #f0f1f3!important}
html body .red20-all-category-media img{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover!important;object-position:center!important;padding:0!important;transform:none!important
}
html body .red20-all-category-card{overflow:hidden!important}

/* Category hero: strong full-frame media while preserving a clean rounded shell. */
html body .red20-category-hero-media{padding:0!important;overflow:hidden!important;background:#f7f8fa!important}
html body .red20-category-hero-media img{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover!important;object-position:center!important;padding:0!important
}

/* Subcategory cards: image fills the card with no Bootstrap/w-75 shrink. */
html body .listing-page .category-section .red20-subcategory-grid .category-image{
  width:100%!important;max-width:none!important;padding:0!important;overflow:hidden!important;
  background:#fff!important;border:1px solid var(--r20-line)!important;border-radius:15px!important;
  box-shadow:0 4px 14px rgba(20,24,30,.045)!important
}
html body .listing-page .category-section .red20-subcategory-grid .category-image>a{
  width:100%!important;height:150px!important;display:block!important;overflow:hidden!important;
  background:#f7f8fa!important;border-radius:14px 14px 0 0!important
}
html body .listing-page .category-section .red20-subcategory-grid .category-image img{
  display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover!important;object-position:center!important;padding:0!important;margin:0!important
}
html body .listing-page .category-section .red20-subcategory-grid .social{
  min-height:42px!important;margin:0!important;padding:8px 6px!important;background:#fff!important;
  border-radius:0 0 14px 14px!important
}
html body .listing-page .category-section .red20-subcategory-grid .social span{
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important;
  font-weight:800!important;color:var(--r20-text)!important
}

/* Mobile cart buttons are true navigation/login controls, never sidebar triggers. */
html body .red20-mobile-top-cart,html body .red20-cart-tab{pointer-events:auto!important;touch-action:manipulation!important}

@media (max-width:767.98px){
  /* Main category cards: slightly taller image area so 3-across still looks premium. */
  html body .red20-all-category-card{padding:0 0 7px!important;gap:5px!important;border-radius:13px!important}
  html body .red20-all-category-media{aspect-ratio:1/1!important;border-radius:12px!important}
  html body .red20-all-category-name{padding:0 4px!important;font-size:9.5px!important;min-height:28px!important}

  /* Opened category hero is substantially larger on phones. */
  html body .red20-category-hero-media{height:210px!important;border-radius:14px!important}

  /* 2-per-row subcategories with much larger image presentation. */
  html body .listing-page .category-section .red20-subcategory-grid{gap:10px!important}
  html body .listing-page .category-section .red20-subcategory-grid .category-image>a{height:154px!important}
  html body .listing-page .category-section .red20-subcategory-grid .social{min-height:43px!important;padding:8px 5px!important}
  html body .listing-page .category-section .red20-subcategory-grid .social span{font-size:10.5px!important;line-height:1.25!important}
}

@media (min-width:768px) and (max-width:1199.98px){
  html body .listing-page .category-section .red20-subcategory-grid .category-image>a{height:165px!important}
}

@media (min-width:1200px){
  html body .listing-page .category-section .red20-subcategory-grid .category-image>a{height:175px!important}
}