/* Layout-only QA candidate. It intentionally does not set font sizes, image
   dimensions, image fit, content width, or product/page content. */

/* Keep the shared language control in the header area only on audited layout
   templates, leaving unrelated/legacy routes on their current behavior. */
body:has(#siteNav) > .vobom-language-switcher,
body:has(#vobom-moto-buyer-nav) > .vobom-language-switcher,
body:has(#vobom-furniture-buyer-nav) > .vobom-language-switcher,
body:has(.sp-header) > .vobom-language-switcher,
body:has(header .search) > .vobom-language-switcher {
  position: absolute !important;
}

/* Do not obscure consent choices on first visit. */
body:has(#vobomConsentV201.is-open) > .vobom-language-switcher {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Root header: place EN between the brand and Menu on compact widths, and
   beside Menu in the upper-right whitespace on tablet/desktop headers. */
@media (max-width: 767px) {
  body:has(#siteNav) > .vobom-language-switcher {
    top: 8px !important;
    right: 98px !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  body:has(#siteNav) > .vobom-language-switcher {
    top: 88px !important;
    right: 16px !important;
  }
}

@media (min-width: 1101px) {
  body:has(#siteNav) > .vobom-language-switcher {
    top: 49px !important;
    right: 16px !important;
  }
}

/* Motorcycle and furniture headers: use separate header rows on phones so
   navigation and quote actions are fully visible without resizing type. */
@media (max-width: 700px) {
  body:has(#vobom-moto-buyer-nav) > .vobom-language-switcher,
  body:has(#vobom-furniture-buyer-nav) > .vobom-language-switcher {
    top: 4px !important;
    right: 8px !important;
  }

  #vobom-moto-buyer-nav .vmbn-inner,
  #vobom-furniture-buyer-nav .vfbn-inner {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
  }

  #vobom-moto-buyer-nav .vmbn-brand,
  #vobom-furniture-buyer-nav .vfbn-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #vobom-moto-buyer-nav .vmbn-inner > nav,
  #vobom-furniture-buyer-nav .vfbn-inner > nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  #vobom-moto-buyer-nav .vmbn-cta,
  #vobom-furniture-buyer-nav .vfbn-cta {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: end !important;
  }

  #vobom-moto-buyer-nav .vmbn-inner > nav {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    transform: none !important;
  }
}

/* Tablet header: put the brand and nav on distinct rows at smaller widths;
   on medium screens keep brand/nav together and put quote action below. */
@media (min-width: 701px) and (max-width: 1300px) {
  body:has(#vobom-moto-buyer-nav) > .vobom-language-switcher,
  body:has(#vobom-furniture-buyer-nav) > .vobom-language-switcher {
    top: 4px !important;
    right: 8px !important;
  }

  #vobom-moto-buyer-nav .vmbn-inner,
  #vobom-furniture-buyer-nav .vfbn-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 12px 24px !important;
  }

  #vobom-moto-buyer-nav .vmbn-brand,
  #vobom-furniture-buyer-nav .vfbn-brand {
    grid-area: 1 / 1 !important;
  }

  #vobom-moto-buyer-nav .vmbn-inner > nav,
  #vobom-furniture-buyer-nav .vfbn-inner > nav {
    grid-area: 1 / 2 !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  #vobom-moto-buyer-nav .vmbn-cta,
  #vobom-furniture-buyer-nav .vfbn-cta {
    grid-area: 2 / 2 !important;
    justify-self: end !important;
    transform: none !important;
    margin: 0 !important;
  }

  #vobom-moto-buyer-nav,
  #vobom-furniture-buyer-nav {
    padding-bottom: 0 !important;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  #vobom-moto-buyer-nav .vmbn-inner,
  #vobom-furniture-buyer-nav .vfbn-inner {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
  }

  #vobom-moto-buyer-nav .vmbn-brand,
  #vobom-furniture-buyer-nav .vfbn-brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  #vobom-moto-buyer-nav .vmbn-inner > nav,
  #vobom-furniture-buyer-nav .vfbn-inner > nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    transform: none !important;
  }

  #vobom-moto-buyer-nav .vmbn-cta,
  #vobom-furniture-buyer-nav .vfbn-cta {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: end !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  body:has(#vobom-moto-buyer-nav) > .vobom-language-switcher {
    top: 190px !important;
    right: 8px !important;
  }
}

@media (min-width: 1301px) {
  body:has(#vobom-furniture-buyer-nav) > .vobom-language-switcher {
    top: 4px !important;
    right: 18px !important;
  }
}

/* Print catalog: put the mobile language control in the clear band below the
   search bar. At desktop widths separate the account chip from the control. */
@media (max-width: 700px) {
  body:has(#categoryNav) > .vobom-language-switcher,
  body:has(header .search) > .vobom-language-switcher {
    top: 157px !important;
    right: 10px !important;
  }
}

@media (min-width: 701px) {
  .sp-header {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: clamp(12px, 1.9vw, 26px) !important;
    row-gap: 8px !important;
  }

  .sp-header .sp-brand {
    grid-area: 1 / 1 !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .sp-header .sp-nav {
    grid-area: 1 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0 clamp(8px, 1vw, 14px) !important;
    transform: none !important;
  }

  .sp-header .sp-actions {
    grid-area: 1 / 3 !important;
    width: max-content !important;
    justify-self: end !important;
    transform: translateY(12px) !important;
    margin: 0 !important;
  }

  .sp-header:has(+ main) {
    padding-bottom: 0 !important;
  }
}

@media (min-width: 701px) and (max-width: 1300px) {
  .sp-header {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto !important;
    row-gap: 20px !important;
  }

  .sp-header .sp-brand {
    grid-area: 1 / 1 !important;
  }

  .sp-header .sp-actions {
    grid-area: 1 / 2 !important;
  }

  .sp-header .sp-nav {
    grid-area: 2 / 1 / 3 / -1 !important;
    justify-content: center !important;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  body:has(.sp-header) > .vobom-language-switcher {
    top: 4px !important;
    right: 8px !important;
  }

  .sp-header {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto !important;
    row-gap: 20px !important;
  }
}

@media (min-width: 901px) {
  body:has(header .utility a[href^="mailto:"]) > .vobom-language-switcher {
    top: 4px !important;
    right: 8px !important;
  }

  body:has(header .utility a[href^="mailto:"]) header .account {
    transform: translateY(30px) !important;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  body:has(header .utility a[href^="mailto:"]) > .vobom-language-switcher {
    top: 4px !important;
    right: 8px !important;
  }

  body:has(header .utility a[href^="mailto:"]) header .account {
    transform: translateY(30px) !important;
  }
}