/* 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: slightly smaller, fully on screen; 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: 12px !important;
    bottom: 16px !important;
    transform: scale(.85);
    transform-origin: 100% 100%;
  }
  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;
}

/* Product card specs (home + collection): desktop and phone both show only Difficulty / Pieces /
   Build Time. The size icon (title contains "×", marked product-card__icons-item--size in
   blocks/product-card/icons.html) is never shown on cards; it stays on the product page.
   Phones: the three specs share the card width evenly. If a language's words are too long to fit,
   the row can still be swiped, and only then does the right-edge fade appear (.is-scrollable). */
.block-product-card .product-card__icons-item--size { display: none !important; }
@media (max-width: 959px) {
  html body .block-product-card .product-card__icons {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 0 !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  html body .block-product-card .product-card__icons.is-scrollable {
    padding-inline-end: 10px !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 12px), rgb(0 0 0 / .35)) !important;
            mask-image: linear-gradient(to right, #000 calc(100% - 12px), rgb(0 0 0 / .35)) !important;
  }
  html body .block-product-card .product-card__icons::-webkit-scrollbar { display: none; }
  html body .block-product-card .product-card__icons-item {
    display: flex !important;
    flex: 1 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 5px !important;
    border: 0 !important;
    scroll-snap-align: start;
  }
  html body .block-product-card .product-card__icons-item + .product-card__icons-item {
    border-inline-start: 1px solid #e6dfd3 !important;
  }
  html body .block-product-card .product-card__icons-item:nth-child(n+4),
  html body .block-product-card .product-card__icons-item--size {
    display: none !important;
  }
  html body .block-product-card .product-card__icons-icon,
  html body .block-product-card .product-card__icons-icon img {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px;
  }
  html body .block-product-card .product-card__icons-text {
    min-width: 0;
    align-items: center;
  }
  html body .block-product-card .product-card__icons-value {
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* 5. Cart UX (bnw-cart-ux.js): phone add-to-cart notice, cart button in the sticky add-to-cart bar,
      floating cart button while the sticky header is hidden. */
.bnw-cart-ico{display:inline-flex;align-items:center;justify-content:center}
.bnw-cart-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#a94438;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff}
.bnw-cart-count[hidden]{display:none}
@keyframes bnw-bump{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
.bnw-bump{animation:bnw-bump .45s ease}

.bnw-sticky-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;margin-inline-end:8px;border:1px solid rgb(43 33 24 / .18);border-radius:50%;background:#fff;color:#2b2118;cursor:pointer}
.bnw-sticky-cart:hover{border-color:#3e5440}

.bnw-cart-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:40;display:none;align-items:center;justify-content:center;width:52px;height:52px;border:0;border-radius:50%;background:#3e5440;color:#fff;box-shadow:0 6px 18px rgb(0 0 0 / .18);cursor:pointer}
html.bnw-header-hidden.bnw-cart-has-items body:not(.has-pdp-sticky) .bnw-cart-fab{display:inline-flex}
body.cart-page .bnw-cart-fab{display:none !important}
html.bnw-header-hidden.bnw-cart-has-items body:not(.has-pdp-sticky) #member-system-plugin > button[aria-label]{bottom:calc(80px + env(safe-area-inset-bottom, 0px)) !important}

.bnw-atc-notice{position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:1000;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:12px;background:#fff;color:#2b2118;box-shadow:0 10px 30px rgb(0 0 0 / .18);transform:translateY(140%);opacity:0;transition:transform .28s ease,opacity .28s ease;pointer-events:none}
.bnw-atc-notice.is-open{transform:none;opacity:1;pointer-events:auto}
body.has-pdp-sticky .bnw-atc-notice{bottom:calc(92px + env(safe-area-inset-bottom, 0px))}
.bnw-atc-notice__img{width:44px;height:44px;flex:0 0 44px;border-radius:8px;object-fit:cover;background:#f5f0e8}
.bnw-atc-notice__text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.3}
.bnw-atc-notice__title{font-size:14px;color:#3e5440}
.bnw-atc-notice__name{font-size:12px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnw-atc-notice__btn{flex:0 0 auto;min-height:38px;padding:0 14px;border:0;border-radius:6px;background:#3e5440;color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.bnw-atc-notice__close{flex:0 0 auto;width:28px;height:28px;border:0;background:none;color:inherit;font-size:20px;line-height:1;opacity:.5;cursor:pointer}
@media (min-width:960px){.bnw-atc-notice{display:none}}
@media (prefers-reduced-motion: reduce){.bnw-atc-notice{transition:none}.bnw-bump{animation:none}}

/* 6. "Why you'll love it" (scroll-story layout), screens >=960px: the heading sits over the image column and the
      description over the steps column, so the header spans the same width as the content below. */
@media (min-width: 960px) {
  .bnw-signature--story .bnw-heading {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--grid-horizontal-spacing, 48px);
    align-items: end;
  }
  .bnw-signature--story .bnw-heading > .bnw-eyebrow { grid-column: 1 / -1; }
  .bnw-signature--story .bnw-heading > h2 { grid-column: 1; margin-bottom: 0; }
  .bnw-signature--story .bnw-heading > .bnw-signature-description { grid-column: 2; margin: 0; max-width: 560px; }
}


/* BNW: home "Best Sellers" / "New Arrivals" (official featured-collection) VIEW ALL as outlined button like the former BNW tab section */
:is(#shopline-section-template--index__bnw-best-sellers, #shopline-section-template--index__bnw-new-arrivals) .featured-collection-section .product-list > .button--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 48px;
  padding: 12px 40px;
  border: 1px solid rgb(var(--color-text) / 0.35);
  border-radius: 4px;
  background: transparent;
  color: rgb(var(--color-text));
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
:is(#shopline-section-template--index__bnw-best-sellers, #shopline-section-template--index__bnw-new-arrivals) .featured-collection-section .product-list > .button--secondary::before,
:is(#shopline-section-template--index__bnw-best-sellers, #shopline-section-template--index__bnw-new-arrivals) .featured-collection-section .product-list > .button--secondary::after {
  display: none;
}
@media (pointer: fine) {
  :is(#shopline-section-template--index__bnw-best-sellers, #shopline-section-template--index__bnw-new-arrivals) .featured-collection-section .product-list > .button--secondary:hover {
    border-color: rgb(var(--color-text));
    background: rgb(var(--color-text));
    color: rgb(var(--color-background));
  }
}