/*
 * VOBOM responsive-layout completion pass.
 * Layout-only: does not alter font sizes, image source, image fit, or image height.
 * Rules only remove measured 320px overflow and fixed-control collisions.
 */

@media (max-width: 430px) {
  /* Keep the factory-evidence page inside the viewport instead of allowing its
     min-content grid track to widen the document beyond the phone. */
  body:has(main.policy-shell) .policy-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
  }

  body:has(main.policy-shell) .policy-shell > *,
  body:has(main.policy-shell) .policy-grid > * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  body:has(main.policy-shell) .policy-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
  }

  body:has(main.policy-shell) .policy-inline-nav a {
    box-sizing: border-box;
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: center;
  }

  body:has(main.policy-shell) .policy-footer {
    align-items: stretch;
    flex-direction: column;
  }

  body:has(main.policy-shell) .policy-footer a {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: center;
  }

  body:has(main.policy-shell) .vobom-language-switcher {
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
  }

  #priceMatchForm select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Furniture category header: place the locale control in the free brand/CTA
     gap and show every primary navigation link without horizontal scrolling. */
  body:has(header.category-header) header.category-header {
    min-height: 119px !important;
    padding-bottom: 52px !important;
  }

  body:has(header.category-header) .vobom-language-switcher {
    top: 68px !important;
    right: 8px !important;
    left: auto !important;
  }

  #vobom-furniture-buyer-nav nav {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 4px 8px !important;
    padding: 3px 0 5px;
  }

  #vobom-furniture-buyer-nav nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Product cards must fit their existing two-column layout; this is a track
     constraint only. The established image height/object-fit rules stay intact. */
  #catalogGrid.catalog-grid {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #catalogGrid.catalog-grid > .product-card,
  #catalogGrid.catalog-grid > .product-card > a {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  /* Quote-comparison columns had fixed min-content widths wider than their
     available card. Stack the same content and let controls use the card width. */
  .eligibility-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
  }

  .eligibility-layout > *,
  .trade-application > *,
  .config-form > * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .eligibility-form,
  .eligibility-result {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

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

  .trade-application-copy,
  .trade-application > .form {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  #tradeForm fieldset,
  #tradeForm .project-type-grid,
  #tradeForm input,
  #tradeForm select,
  #tradeForm textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #tradeForm input[type="radio"] {
    width: auto;
  }

  /* PRINT sample/accessibility forms: collapse paired fields and constrain
     intrinsic form controls to the available column. */
  .sample-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
  }

  .sample-layout > *,
  .config-form,
  .config-form .config-pair,
  .config-form label,
  .config-form fieldset {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .config-form .config-pair {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .config-form input:not([type="checkbox"]):not([type="radio"]),
  .config-form select,
  .config-form textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Reserve the existing header-to-content white space for the language
     control. No copy, type scale, or asset dimensions are changed. */
  body:has(#products.catalog-grid) .vobom-language-switcher {
    top: 202px !important;
  }

  body:has(main#main-content .material-grid) .vobom-language-switcher,
  body:has(main#main-content .access-hero) .vobom-language-switcher {
    top: 159px !important;
  }

  body:has(main#main-content.resource-case-layout-v2) .vobom-language-switcher {
    top: 192px !important;
  }

  body:has(main#main-content.resource-case-layout-v2) main.resource-case-layout-v2 {
    padding-top: 60px !important;
  }
}

@media (min-width: 431px) {
  /* On the packaging catalog the language control collided with the header
     account/RFQ actions at desktop widths. Place it below that header row;
     the main page already has a generous top inset there. */
  body:has(#products.catalog-grid) .vobom-language-switcher {
    top: 198px !important;
  }
}

@media (max-width: 1180px) {
  /* The factory evidence title grows onto the language control at tablet widths. */
  body:has(main.policy-shell) .vobom-language-switcher {
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
  }
}

@media (max-width: 1024px) {
  /* The four AI model pages have a fixed locale button over their H1. Move it
     to the top utility band and reserve the same space above the first card. */
  body:has(main.contact-shell) .vobom-language-switcher {
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
  }

  body:has(main.contact-shell) main.contact-shell {
    padding-top: 68px !important;
  }
}

@media (max-width: 760px) {
  /* The packaging case header places its RFQ control at the bottom of the
     header. Put the locale button in the clear strip below it, then preserve
     that strip before the main content begins. */
  body:has(main#main-content.resource-case-layout-v2) .vobom-language-switcher {
    top: 192px !important;
  }

  body:has(main#main-content.resource-case-layout-v2) main.resource-case-layout-v2 {
    padding-top: 60px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  /* On the factory evidence/legal templates, the fixed one-line global header
     clipped the final links and let the locale control cover navigation.
     Keep existing type and link sizing, but give brand and nav separate rows
     and let the header participate in normal document flow. */
  body:has(main.policy-shell) .site-topbar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100%;
    height: auto !important;
    min-height: 115px !important;
  }

  body:has(main.policy-shell) .site-topbar .topbar-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 52px auto !important;
    align-items: center !important;
    row-gap: 8px !important;
    height: auto !important;
    min-height: 115px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body:has(main.policy-shell) .site-topbar .topbar-brand {
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  body:has(main.policy-shell) .site-topbar .topbar-nav {
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    justify-content: flex-start !important;
  }

  body:has(main.policy-shell) main.policy-shell {
    margin-top: 28px !important;
  }
}

@media (min-width: 431px) and (max-width: 960px) {
  /* The furniture contact card kept a 634px form track at 861px viewport
     width. Stack the same content before its fixed grid track can spill out. */
  body:has(#careRequest #contactForm) #careRequest {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:has(#careRequest #contactForm) #contactForm {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body:has(#careRequest #contactForm) #contactForm > * {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }
}