/* ============================================================
   kbp-header  — approved design: single light row
   logo left | nav centre-left | icons right (search, account, wishlist, cart)
   The legacy .topheader utility bar is NOT part of the approved design.
   ============================================================ */
.kbp-header{background:var(--kbp-bg);border-bottom:1px solid var(--kbp-line);position:relative;z-index:60;}
.kbp-header__inner{max-width:var(--kbp-container);margin:0 auto;padding:0 var(--kbp-gutter);
  height:var(--kbp-header-h);display:flex;align-items:center;gap:var(--kbp-gutter-lg);}
.kbp-header__logo{display:flex;align-items:center;flex:0 0 auto;}
.kbp-header__logo img{max-height:44px;width:auto;display:block;}
.kbp-header__nav{flex:1 1 auto;display:flex;align-items:center;gap:32px;}
.kbp-header__nav ul{list-style:none;margin:0;padding:0;}
/* Horizontal nav ONLY on desktop. Below 1025px the legacy mobile rule
   .navbarlist{display:block} must win so the off-canvas panel stacks items
   vertically — an unscoped display:flex here outranked it (0,1,1 vs 0,1,0). */
@media (min-width:1025px){
  .kbp-header__nav ul{display:flex;gap:32px;align-items:center;}
}
.kbp-header__nav a{color:var(--kbp-ink);text-decoration:none;font-size:var(--kbp-body);
  font-weight:500;line-height:1;padding:8px 0;white-space:nowrap;}
.kbp-header__nav a:hover{opacity:.65;}
.kbp-header__actions{flex:0 0 auto;display:flex;align-items:center;gap:18px;}
.kbp-header__actions .kbp-icon{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;color:var(--kbp-ink);text-decoration:none;position:relative;
  background:none;border:0;padding:0;cursor:pointer;}
.kbp-header__actions .kbp-icon svg{width:20px;height:20px;display:block;}
.kbp-header__actions .kbp-icon:hover{opacity:.65;}
.kbp-cart-count{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;
  border-radius:9px;background:var(--kbp-ink);color:#fff;font-size:11px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;}
/* search panel reuses legacy hooks (#live-product-search / #search-results) */
.kbp-header .search-panel{position:absolute;right:0;top:100%;background:#fff;border:1px solid var(--kbp-line);
  border-radius:var(--kbp-radius-sm);padding:12px;min-width:320px;display:none;box-shadow:0 8px 24px rgba(0,0,0,.08);}
.kbp-header .search-panel.is-open{display:block;}
.kbp-header .search-panel input{width:100%;height:40px;border:1px solid var(--kbp-line);
  border-radius:var(--kbp-radius-sm);padding:0 12px;font-size:var(--kbp-body);}
.kbp-header .searchbox{position:relative;}
/* mobile */
.kbp-burger{display:none;background:none;border:0;padding:0;cursor:pointer;}
@media (max-width:1024px){
  /* The off-canvas panel (.navbarmenu) lives INSIDE .kbp-header__nav and becomes
     position:fixed on mobile. This container must therefore NOT be display:none:
     doing so hid the panel's ancestor, so .navbarmenu.active could never render.
     The container is simply collapsed instead — legacy CSS does the rest. */
  /* The nav container must contribute ZERO flex width on mobile: its only child
     (.navbarmenu) is position:fixed and translated off-canvas, so it is out of
     flow — but flex:0 0 auto gave the container an intrinsic width of 281.875px,
     which pushed logo/burger/actions past the viewport (scrollWidth 697 vs 360).
     flex-basis:0 + width:0 removes that phantom width; the fixed panel is
     unaffected because it escapes the parent's box entirely. */
  .kbp-header__nav{position:static;flex:0 0 0;width:0;min-width:0;gap:0;display:block;}
  .kbp-header__nav .navbarlist{display:block;width:100%;}
  /* legacy commenstyle.css positions .mobileburger absolutely, which places it
     under the logo at x=0 — force it back into the flex flow. */
  .kbp-header .kbp-burger{display:inline-flex;position:static;top:auto;left:auto;right:auto;
    align-items:center;justify-content:center;width:36px;height:36px;margin:0;order:2;}
  /* Mobile header must fit the viewport: logo + burger + actions were
     226+36+186+28 = 476px in a 375px viewport, which pushed .kbp-header__actions
     to right:708 and created document overflow (scrollWidth 710 vs 375).
     Constrain the logo and stop the flex row from overflowing. */
  .kbp-header__inner{gap:10px;min-width:0;max-width:100%;}
  .kbp-header__logo{order:1;margin-right:auto;min-width:0;flex:0 1 auto;}
  .kbp-header__logo img{max-width:132px;width:auto;height:auto;}
  .kbp-header__actions{order:3;margin-left:0;gap:10px;flex:0 0 auto;}
}