/* RED20-V9-MOBILE-CATEGORY-CART-20260902
   UI/interaction patch only: category menu usability, mobile category grids and cart navigation/badges.
*/
:root{--r20:#ff5a00;--r20-soft:#fff4ed;--r20-line:#e9ebef;--r20-text:#20242a;--r20-muted:#69707d}

/* DESKTOP CATEGORY MENU: click to open, stays open until selection/outside click. */
@media (min-width:992px){
  html body #header .red20-category-menu-toggle{
    width:100%;height:100%;margin:0;padding:0 15px;border:0;background:transparent;color:inherit;
    display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;font:inherit;outline:0!important
  }
  html body #header .header-categories-nav.show-menu:hover .categories-menu-dropdown{
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(10px)!important
  }
  html body #header .header-categories-nav.red20-cat-open .categories-menu-dropdown,
  html body #header .header-categories-nav.red20-cat-open.show-menu:hover .categories-menu-dropdown{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important
  }
  html body #header .header-categories-nav.red20-cat-open .arrow-hover{transform:rotate(-180deg)!important}
  html body #header .categories-menu-dropdown{margin-top:0!important}
  html body #header .categories-menu-dropdown a{cursor:pointer!important}
}

/* TOP MOBILE CART: direct cart link + real count badge. */
.red20-top-cart-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.red20-top-mobile-cart-count{
  position:absolute;right:-10px;top:-10px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:#e7332b;color:#fff;border:2px solid #fff;font-size:9px;font-weight:900;line-height:14px;text-align:center;box-shadow:0 2px 7px rgba(0,0,0,.16)
}
.red20-top-mobile-cart-count.is-empty{display:none!important}
.red20-mobile-top-cart{z-index:5!important;text-decoration:none!important}
.red20-cart-tab{cursor:pointer!important;pointer-events:auto!important}

/* ALL CATEGORIES PAGE: clean 3-across mobile app grid, roomy desktop grid. */
.red20-all-categories-page{padding:22px 18px 90px!important;background:#f6f7f9!important;min-height:60vh}
.red20-all-categories-shell{max-width:1420px;margin:0 auto}
.red20-all-categories-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:0 0 16px}
.red20-all-categories-kicker{display:inline-block;color:var(--r20);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.red20-all-categories-head h1{margin:0;color:var(--r20-text);font-size:28px;font-weight:900;line-height:1.1}
.red20-all-products-link{color:var(--r20)!important;font-size:11px;font-weight:800;text-decoration:none!important;white-space:nowrap}
.red20-all-categories-grid{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px!important}
.red20-all-category-card{
  min-width:0;padding:10px 8px 11px;border:1px solid var(--r20-line);border-radius:17px;background:#fff;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--r20-text)!important;text-decoration:none!important;
  box-shadow:0 4px 14px rgba(20,24,30,.035);transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease
}
.red20-all-category-card:hover{transform:translateY(-2px);border-color:#ffd3ba;box-shadow:0 9px 22px rgba(25,28,34,.075)}
.red20-all-category-media{width:100%;aspect-ratio:1/1;border-radius:14px;background:#fafbfc;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px}
.red20-all-category-media img{width:100%;height:100%;object-fit:contain;object-position:center}
.red20-all-category-name{width:100%;min-height:31px;display:flex;align-items:flex-start;justify-content:center;text-align:center;font-size:11px;font-weight:780;line-height:1.3;overflow:hidden}
.red20-empty-category-state{padding:60px 20px;text-align:center;background:#fff;border:1px solid var(--r20-line);border-radius:18px}
.red20-empty-category-state i{font-size:40px;color:var(--r20);margin-bottom:12px}

/* CATEGORY LANDING HERO: make media the visual focus. */
html body .red20-category-hero-media{background:#fff!important;border:1px solid #e6e8eb!important;box-shadow:inset 0 0 0 1px #fff!important}
html body .red20-category-hero-media img{object-fit:contain!important;object-position:center!important;width:100%!important;height:100%!important}
html body .red20-subcategory-title{font-size:18px!important;font-weight:850!important;color:var(--r20-text)!important}

/* SUBCATEGORIES: stable grid, no horizontal strip. */
html body .listing-page .category-section .red20-subcategory-grid{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;
  overflow:visible!important;margin:0!important;padding:0!important;white-space:normal!important
}
html body .listing-page .category-section .red20-subcategory-grid>[class*="col-"]{
  width:auto!important;max-width:none!important;flex:none!important;padding:0!important
}
html body .listing-page .category-section .red20-subcategory-grid .category-image{
  width:100%!important;height:100%!important;padding:8px!important;border-radius:16px!important;margin:0!important
}
html body .listing-page .category-section .red20-subcategory-grid .category-image>a{height:125px!important}
html body .listing-page .category-section .red20-subcategory-grid .social{min-height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:7px 3px 2px!important}
html body .listing-page .category-section .red20-subcategory-grid .social span{font-size:11px!important;line-height:1.25!important}

@media (max-width:1199.98px){
  .red20-all-categories-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  html body .listing-page .category-section .red20-subcategory-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

@media (max-width:991.98px){
  .red20-all-categories-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  html body .listing-page .category-section .red20-subcategory-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body .red20-mobile-top-cart{display:block!important;position:absolute!important;right:17px!important;top:18px!important;font-size:19px!important;color:var(--r20)!important}
}

@media (max-width:767.98px){
  /* Bigger category hero on phones: image first, clean title, no tiny promo copy. */
  html body .red20-category-hero{
    display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin:8px!important;padding:10px!important;border-radius:16px!important
  }
  html body .red20-category-hero-media{width:100%!important;height:168px!important;border-radius:14px!important;padding:10px!important}
  html body .red20-category-hero-copy{text-align:center!important;padding:0 4px 3px!important}
  html body .red20-category-hero-copy h1{font-size:18px!important;line-height:1.2!important;margin:2px 0 0!important;font-weight:900!important}
  html body .red20-category-hero-copy p,.red20-category-kicker{display:none!important}

  /* Bottom Categories tab opens a true 3-across mobile category page. */
  .red20-all-categories-page{padding:12px 9px 82px!important}
  .red20-all-categories-head{margin-bottom:10px;align-items:center}
  .red20-all-categories-kicker{display:none}
  .red20-all-categories-head h1{font-size:20px}
  .red20-all-products-link{font-size:9px}
  .red20-all-categories-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .red20-all-category-card{padding:6px 5px 8px;border-radius:13px;gap:5px;box-shadow:0 2px 8px rgba(20,24,30,.035)}
  .red20-all-category-media{border-radius:10px;padding:5px;aspect-ratio:1/1}
  .red20-all-category-name{min-height:27px;font-size:9px;line-height:1.2;font-weight:800}

  /* After selecting a category, subcategories are 2 cards per row and the page scrolls vertically. */
  html body .listing-page .category-section{overflow:visible!important;padding:0 7px!important}
  html body .listing-page .category-section .red20-subcategory-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;
    overflow:visible!important;overflow-x:visible!important;margin:0!important;padding:0!important;scroll-snap-type:none!important
  }
  html body .listing-page .category-section .red20-subcategory-grid>[class*="col-"]{
    width:auto!important;max-width:none!important;min-width:0!important;flex:none!important;padding:0!important
  }
  html body .listing-page .category-section .red20-subcategory-grid .category-image{width:100%!important;padding:7px!important;border-radius:13px!important}
  html body .listing-page .category-section .red20-subcategory-grid .category-image>a{height:128px!important;border-radius:10px!important}
  html body .listing-page .category-section .red20-subcategory-grid .category-image img{padding:5px!important}
  html body .listing-page .category-section .red20-subcategory-grid .social{min-height:38px!important;padding:7px 2px 1px!important}
  html body .listing-page .category-section .red20-subcategory-grid .social span{font-size:10px!important;font-weight:800!important}
  html body .listing-page .col-md-9.col-sm-12.text-left.py-3{padding:13px 9px 8px!important}
  html body .red20-subcategory-title{font-size:16px!important}

  /* Top cart count remains readable beside the compact mobile header. */
  html body .red20-mobile-top-cart{right:14px!important;top:15px!important;width:36px!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}
}