/* Load this stylesheet AFTER any large inline <style> block.
   Inline "failsafe" copies of older header rules were overriding site-v5.css
   and causing inconsistent desktop/mobile header behavior. */

@media (min-width: 861px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand actions nav";
  }
  .header-actions {
    justify-self: center;
  }
  .main-nav {
    justify-self: end;
    flex-wrap: wrap;
    gap: 0.65rem 1.15rem;
  }
}

@media (max-width: 860px) {
  html {
    overflow-x: clip;
  }
  body {
    overflow-x: clip;
  }
  .site-header {
    row-gap: 0.35rem;
    column-gap: 0.65rem;
  }
  .brand-wrap {
    min-width: 0;
  }
  .brand .brand-logo-img,
  .brand-wrap .brand-logo-img {
    max-width: min(200px, 58vw);
    height: auto;
  }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.65rem;
  }
  .main-nav {
    align-items: stretch;
    margin-top: 0.35rem;
    position: relative;
    z-index: 30;
    box-shadow: 0 10px 28px rgba(114, 88, 66, 0.12);
  }
  .main-nav a {
    padding: 0.65rem 0.15rem;
  }
}

.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
}
.compare-scroll .compare-table {
  margin: 0;
  min-width: 520px;
}