/* Targeted layout-only repair. Preserve established font and image-size rules. */

/* The trust/contact header had no menu toggle below 860px, while desktop nav
   links were clipped at 1024px. Keep every link visible; allow rows to grow. */
@media (min-width: 861px) and (max-width: 1180px) {
  /* Tablet navigation needs two rows; the live header had a 70px cap and
     clipped the wrapped row. Keep it in flow so the page cannot sit under it. */
  .site-topbar {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .site-topbar .topbar-inner {
    box-sizing: border-box;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    row-gap: 2px;
  }

  .site-topbar .topbar-brand {
    flex: 0 0 100%;
    min-width: 0;
  }

  .site-topbar .topbar-nav {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    overflow: visible !important;
    white-space: normal;
    padding-right: 78px;
    margin-top: 14px;
    gap: 2px 4px;
  }

  .site-topbar .topbar-nav a {
    white-space: nowrap;
  }

  body:has(.site-topbar) .vobom-language-switcher {
    top: 6px !important;
    right: 8px !important;
  }

  .site-topbar + main,
  .site-topbar.scrolled + main {
    margin-top: 20px !important;
  }
}

@media (max-width: 860px) {
  /* A fixed 270px wrapped header covered the page title on mobile. Put it back
     in normal flow so the content always starts after the complete header. */
  .site-topbar {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible;
  }

  .site-topbar .topbar-inner {
    box-sizing: border-box;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    gap: 2px 8px;
  }

  .site-topbar .topbar-brand {
    flex: 0 0 100%;
    min-width: 0;
  }

  /* This header has no hamburger control. Do not hide its only navigation. */
  .site-topbar .topbar-nav {
    box-sizing: border-box;
    display: flex !important;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    overflow: visible !important;
    white-space: normal;
    padding-right: 64px;
    margin-top: 18px;
    gap: 2px 4px;
  }

  .site-topbar .topbar-nav a {
    flex: 0 0 auto;
    max-width: 100%;
    white-space: nowrap;
  }

  body:has(.site-topbar) .vobom-language-switcher {
    top: 6px !important;
    right: 8px !important;
  }

  .site-topbar + main,
  .site-topbar.scrolled + main {
    margin-top: 16px !important;
  }
}

/* A long mail address was expanding the two-column contact-card grid to 699px
   at a 640px viewport. Wrap within the existing card; do not shrink type. */
main.policy-shell .channel-card a[href^="mailto:"] {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* The packaging header sat between its mobile and desktop breakpoints at
   601-760px; its nav and action buttons extended past the viewport. */
@media (min-width: 601px) and (max-width: 980px) {
  .sp-topline {
    box-sizing: border-box;
    padding-right: 84px;
    white-space: normal;
    line-height: 1.35;
  }

  header.sp-header {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "nav nav";
    align-items: center;
    gap: 10px 14px;
    width: 100%;
    min-width: 0;
    padding-right: 84px !important;
  }

  header.sp-header > .sp-brand {
    grid-area: brand;
    min-width: 0;
  }

  header.sp-header > .sp-actions {
    grid-area: actions;
    min-width: 0;
    margin: 0;
    justify-self: end;
  }

  header.sp-header > .sp-nav {
    grid-area: nav;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    gap: 8px 14px;
  }

  /* This desktop-compression rule hid links 4-7 below 981px. There is no
     mobile menu button above 600px, so all links must remain visible. */
  header.sp-header > .sp-nav a:nth-child(n+4) {
    display: inline-flex !important;
  }
}

@media (min-width: 601px) and (max-width: 680px) {
  /* At 601-680px the fixed language picker and WhatsApp button shared the
     same top row. Reserve its space instead of letting the controls collide. */
  header.sp-header > .sp-actions {
    padding-right: 64px;
  }
}