/* Correct cramped buyer headers without shrinking the site's type scale. */
@media (max-width: 760px) {
  #vobom-moto-buyer-nav .vmbn-inner,
  #vobom-furniture-buyer-nav .vfbn-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
  }

  #vobom-moto-buyer-nav .vmbn-brand,
  #vobom-furniture-buyer-nav .vfbn-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  #vobom-moto-buyer-nav .vmbn-brand small,
  #vobom-furniture-buyer-nav .vfbn-brand small {
    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: .04em !important;
    white-space: normal !important;
  }

  #vobom-moto-buyer-nav .vmbn-cta,
  #vobom-furniture-buyer-nav .vfbn-cta {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding-inline: 12px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  #vobom-moto-buyer-nav nav,
  #vobom-furniture-buyer-nav nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    gap: 16px !important;
    padding: 4px 0 7px !important;
  }

  #vobom-moto-buyer-nav nav a,
  #vobom-furniture-buyer-nav nav a {
    flex: 0 0 auto !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  #vobom-moto-buyer-nav .vmbn-inner,
  #vobom-furniture-buyer-nav .vfbn-inner {
    column-gap: 8px !important;
    padding-inline: 12px !important;
  }

  #vobom-moto-buyer-nav .vmbn-cta,
  #vobom-furniture-buyer-nav .vfbn-cta {
    padding-inline: 10px !important;
    font-size: 15px !important;
  }

  /* At very narrow phone widths, two product cards squeeze their evidence
     fields into unreadable columns. Use one full-width card per row. */
  #featuredProducts.home-products {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #featuredProducts .home-product-card,
  #featuredProducts .home-product-link,
  #featuredProducts .home-product-copy {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .channel-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .channel-grid > * {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  a[href^="mailto:"] {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* The furniture purchase-plan grid retained two desktop-sized tracks at 320px.
   Stack those actionable cards on narrow phones instead of widening the page. */
@media (max-width: 560px) {
  #main-content .ways-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  #main-content .ways-grid > * {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #relatedSection .section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
  }

  #relatedSection .section-head > :last-child {
    justify-self: start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}