/* BNW site-wide layout fixes (2026-11-07 review). Loaded once from layout/theme.html. */

/* 1. Desktop header: give the main menu the free space next to the logo and keep it on one line.
      The previous 3-column grid reserved equal widths left and right, so long translations wrapped
      a single item (e.g. "Soutien", "Unterstützung") onto a second row. */
@media (min-width: 1024px) {
  .header.header--left-center {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    column-gap: 24px;
  }
  .header__menu .nav-main__menu {
    flex-wrap: nowrap !important;
    column-gap: clamp(14px, calc((100vw - 1000px) / 18), 40px) !important;
  }
  .header__menu .nav-main__menu > li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  .header__menu .nav-main__menu > li > a,
  .header__menu .nav-main__menu > li summary,
  .header__menu .nav-main__menu > li > details > summary { font-size: 15px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  /* Narrow laptops / tablets in landscape: if a long language still does not fit, wrap into centred rows
     instead of leaving one item alone on the second line. */
  .header__menu .nav-main__menu {
    flex-wrap: wrap !important;
    justify-content: center;
    row-gap: 4px;
    column-gap: 14px !important;
  }
}

/* 2. Rewards app button (#member-system-plugin): keep it clear of card titles, parameters and the
      add-to-cart buttons. Phones: a small tab tucked into the right edge; desktop: bottom-right corner.
      On product pages it always sits above the sticky add-to-cart bar. */
#member-system-plugin > button[aria-label] {
  transition: transform .2s ease, opacity .2s ease;
}
@media (max-width: 959px) {
  #member-system-plugin > button[aria-label] {
    right: 0 !important;
    bottom: 16px !important;
    transform: translateX(30%) scale(.8);
    transform-origin: 100% 100%;
  }
  #member-system-plugin > button[aria-label]:focus-visible,
  #member-system-plugin > button[aria-label]:active { transform: none; }
  body.has-pdp-sticky #member-system-plugin > button[aria-label] {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (min-width: 960px) {
  #member-system-plugin > button[aria-label] {
    right: 16px !important;
    bottom: 16px !important;
  }
  body.has-pdp-sticky #member-system-plugin > button[aria-label] {
    bottom: 100px !important;
  }
}

/* 3. PDP section navigation: when the sticky header slides in/out (and when iOS Safari resizes its
      toolbars), the nav used to animate its own offset separately, leaving a gap where page content
      showed above it. Move it in one step and fill any momentary gap with the page background. */
.shopline-section:has(> #bnw-pdp-nav) {
  transition: none !important;
}
.shopline-section:has(> #bnw-pdp-nav)::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: var(--bnw-nav-top, 0px);
  background: inherit;
  pointer-events: none;
}