/* RED20 V16 — Brands + header navigation polish. Presentation only. */

/* ---------- Brands: reliable, aligned image cards ---------- */
html body .red20-brand-row-shell{margin-top:10px!important}
html body .red20-brand-track{align-items:stretch!important}
html body .red20-brand-card{
  background:#fff!important;
  border:1px solid #eceef2!important;
  border-radius:14px!important;
  padding:9px!important;
  min-height:104px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  box-shadow:0 2px 8px rgba(0,0,0,.035)!important;
}
html body .red20-brand-image{
  width:100%!important;
  height:68px!important;
  min-height:68px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:10px!important;
  background:#fff!important;
  overflow:hidden!important;
}
html body .red20-brand-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
html body .red20-brand-name{
  width:100%!important;
  margin-top:7px!important;
  color:#272b32!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:600!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* ---------- Desktop bottom navigation: simple card/pill UI ---------- */
@media (min-width: 992px){
  html body #header .red20-v16-nav-row{
    background:#fff!important;
    border-top:1px solid #f1f2f4!important;
    border-bottom:1px solid #eceef2!important;
    padding:8px 0!important;
    box-shadow:0 3px 12px rgba(20,25,35,.035)!important;
  }
  html body #header .red20-v16-nav-row .header-bottom-inner{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:44px!important;
  }
  html body #header .red20-v16-nav-row .col-left{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    padding:0!important;
  }
  html body #header .red20-v16-nav-row .col-center{
    flex:1 1 auto!important;
    width:auto!important;
    max-width:none!important;
    padding:0!important;
  }
  html body #header .red20-v16-nav-row .col-right{display:none!important}

  /* Category becomes the strong primary card */
  html body #header .red20-v16-nav-row .menu-opener.red20-category-menu-toggle{
    min-height:42px!important;
    padding:0 18px!important;
    border:1px solid #ff5a00!important;
    border-radius:12px!important;
    background:#fff5ef!important;
    color:#e85000!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    font-weight:700!important;
    box-shadow:none!important;
  }
  html body #header .red20-v16-nav-row .menu-opener .burger-menu,
  html body #header .red20-v16-nav-row .menu-opener .menu-label,
  html body #header .red20-v16-nav-row .menu-opener .arrow-hover{color:#e85000!important}

  /* The rest of the row becomes quiet navigation cards */
  html body #header .red20-v16-nav-row .main-nav ul{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    margin:0!important;
    padding:0!important;
  }
  html body #header .red20-v16-nav-row .main-nav ul>li.morph-text{
    float:none!important;
    display:block!important;
    margin:0!important;
    padding:0!important;
  }
  html body #header .red20-v16-nav-row .main-nav ul>li.morph-text>a{
    height:40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 14px!important;
    border:1px solid #eceef2!important;
    border-radius:11px!important;
    background:#fff!important;
    color:#333840!important;
    font-size:13px!important;
    line-height:1!important;
    font-weight:600!important;
    white-space:nowrap!important;
    transition:background .15s ease,border-color .15s ease,color .15s ease!important;
  }
  html body #header .red20-v16-nav-row .main-nav ul>li.morph-text>a:hover{
    background:#fff5ef!important;
    border-color:#ffd1b8!important;
    color:#e85000!important;
  }
}

/* Keep Brands compact and swipeable on phones. */
@media (max-width: 767.98px){
  html body .red20-brand-card{min-height:82px!important;padding:6px!important;border-radius:11px!important}
  html body .red20-brand-image{height:49px!important;min-height:49px!important;border-radius:8px!important}
  html body .red20-brand-name{font-size:8px!important;margin-top:4px!important}
}