/* ============================================================ BARFMENU B2B HEADER V3 ============================================================ */ /* ============================================================ VARIABLES ============================================================ */ .bm-header { --bm-green: #358e15; --bm-green-hover: #2d7b12; --bm-text: #777777; --bm-dark: #333333; --bm-border: #dddddd; --bm-light: #f5f5f5; --bm-white: #ffffff; --bm-top-height: 38px; --bm-main-height: 94px; } /* ============================================================ RESET / ISOLATION ============================================================ */ .bm-header, .bm-header *, .bm-header *::before, .bm-header *::after { box-sizing: border-box; } .bm-header ul, .bm-header li, .bm-header p, .bm-header h3 { margin: 0; padding: 0; } .bm-header ul, .bm-header li { list-style: none; } .bm-header a { text-decoration: none; } /* ============================================================ FIXED HEADER ============================================================ */ .bm-header { position: fixed !important; z-index: 10000 !important; top: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff; font-family: Arial, Helvetica, sans-serif; } .bm-header-spacer { display: block; width: 100%; height: 132px; } /* ============================================================ COMMON INNER WIDTH ============================================================ */ .bm-header__inner { width: 100%; max-width: 1230px; margin: 0 auto; padding-right: 18px; padding-left: 18px; } /* ============================================================ TOPBAR ============================================================ */ .bm-header #top.bm-header__topbar { position: relative !important; z-index: 30 !important; width: 100% !important; height: var(--bm-top-height) !important; min-height: var(--bm-top-height) !important; margin: 0 !important; padding: 0 !important; background: var(--bm-green) !important; border: 0 !important; box-shadow: none !important; color: #ffffff !important; } .bm-header__topbar-inner { height: var(--bm-top-height); display: flex; align-items: stretch; justify-content: space-between; } .bm-header__topbar-left, .bm-header #top .right.bm-header__topbar-right { float: none !important; display: flex !important; align-items: stretch !important; width: auto !important; height: var(--bm-top-height) !important; margin: 0 !important; padding: 0 !important; } .bm-header #top .right.bm-header__topbar-right { margin-left: auto !important; } /* ============================================================ LANGUAGE ============================================================ */ .bm-header__language { position: relative; width: auto; height: var(--bm-top-height); margin: 0; padding: 0; } .bm-header__language > summary { list-style: none; } .bm-header__language > summary::-webkit-details-marker { display: none; } .bm-header__language-current { height: var(--bm-top-height); display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 12px; color: #ffffff !important; background: transparent !important; font-size: 12px; line-height: var(--bm-top-height); font-weight: 400; cursor: pointer; user-select: none; } .bm-header__language-current:hover, .bm-header__language-current:focus { background: rgba(0, 0, 0, 0.08) !important; color: #ffffff !important; outline: 0; } .bm-header__language-arrow { font-size: 9px; } .bm-header__language-menu { position: absolute; z-index: 100; top: 100%; left: 0; display: none; min-width: 160px; padding: 5px 0; background: #ffffff; border: 1px solid var(--bm-border); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } .bm-header__language[open] .bm-header__language-menu { display: block; } .bm-header__language-option { display: block; padding: 9px 13px; background: #ffffff !important; color: #444444 !important; font-size: 12px; line-height: 1.25; text-decoration: none !important; } .bm-header__language-option:hover, .bm-header__language-option:focus, .bm-header__language-option--active { background: #f4f4f4 !important; color: var(--bm-green) !important; } /* ============================================================ TOPBAR RIGHT HARD RESET OLD TUI-DROPDOWN STYLING ============================================================ */ .bm-header #top .right > .tui-dropdown.bm-header__checkout-wrap { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; display: block !important; width: auto !important; height: var(--bm-top-height) !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .bm-header #top .right > .tui-dropdown > a.cart, .bm-header__topbar-action { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; width: auto !important; height: var(--bm-top-height) !important; min-height: var(--bm-top-height) !important; display: flex !important; align-items: center !important; gap: 6px; margin: 0 !important; padding: 0 13px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: #ffffff !important; font-size: 12px !important; line-height: var(--bm-top-height) !important; font-weight: 400 !important; text-decoration: none !important; box-shadow: none !important; } .bm-header #top .right > .tui-dropdown > a.cart:hover, .bm-header #top .right > .tui-dropdown > a.cart:focus, .bm-header__topbar-action:hover, .bm-header__topbar-action:focus { background: rgba(0, 0, 0, 0.08) !important; color: #ffffff !important; text-decoration: none !important; } .bm-header__topbar-icon { font-size: 11px; } /* ============================================================ MAIN WHITE HEADER ============================================================ */ .bm-header__main { position: relative; z-index: 20; width: 100%; height: var(--bm-main-height); background: #ffffff; border: 0; border-bottom: 1px solid #e5e5e5; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04); } .bm-header__main-inner { height: var(--bm-main-height); display: grid; grid-template-columns: 245px minmax(430px, 1fr) 165px 50px; align-items: center; column-gap: 20px; } /* ============================================================ LOGO ============================================================ */ .bm-header__logo { min-width: 0; display: flex; align-items: center; } .bm-header__logo-link { display: inline-block; margin: 0; padding: 0; background: transparent !important; } .bm-header__logo-image { display: block; width: auto; height: auto; max-width: 215px; max-height: 68px; margin: 0; padding: 0; border: 0; } /* ============================================================ NAVIGATION ============================================================ */ .bm-header__navigation { align-self: stretch; min-width: 0; margin: 0; padding: 0; } .bm-header__menu { width: 100%; height: 100%; display: flex; align-items: stretch; justify-content: space-between; margin: 0 !important; padding: 0 !important; } .bm-header__menu-item { position: relative; flex: 1 1 auto; display: flex; align-items: stretch; justify-content: center; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .bm-header__menu-link { width: 100%; height: var(--bm-main-height); display: flex !important; align-items: center; justify-content: center; gap: 5px; margin: 0 !important; padding: 0 10px !important; background: transparent !important; border: 0 !important; color: #858585 !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 400 !important; text-align: center; white-space: nowrap; text-decoration: none !important; } .bm-header__menu-link:hover, .bm-header__menu-link:focus, .bm-header__menu-item--active > .bm-header__menu-link { background: transparent !important; color: var(--bm-green) !important; text-decoration: none !important; } .bm-header__menu-arrow { color: inherit; font-size: 9px; } /* ============================================================ CATEGORY DROPDOWN ============================================================ */ .bm-header__dropdown { position: absolute !important; z-index: 200 !important; top: 100% !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; display: none !important; width: 240px !important; min-width: 240px !important; max-width: 280px !important; height: auto !important; max-height: 70vh; overflow-x: hidden; overflow-y: auto; margin: 0 !important; padding: 6px 0 !important; background: #ffffff !important; border: 1px solid #dddddd !important; border-top: 3px solid var(--bm-green) !important; border-radius: 0 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14) !important; } .bm-header__menu-item--has-children:hover > .bm-header__dropdown, .bm-header__menu-item--has-children:focus-within > .bm-header__dropdown { display: block !important; } .bm-header__dropdown-list, .bm-header__dropdown-sublist { width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; } .bm-header__dropdown-item, .bm-header__dropdown-subitem { position: relative !important; display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 0 !important; } .bm-header__dropdown-link { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 10px 15px !important; background: #ffffff !important; border: 0 !important; color: #444444 !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 600 !important; text-align: left !important; white-space: normal !important; text-decoration: none !important; } .bm-header__dropdown-link:hover, .bm-header__dropdown-link:focus { background: #f5f5f5 !important; color: var(--bm-green) !important; } .bm-header__dropdown-sublist { padding-bottom: 5px !important; } .bm-header__dropdown-sublink { display: block !important; width: 100% !important; padding: 7px 15px 7px 27px !important; background: #ffffff !important; color: #777777 !important; font-size: 11px !important; line-height: 1.3 !important; text-align: left !important; text-decoration: none !important; } .bm-header__dropdown-sublink:hover, .bm-header__dropdown-sublink:focus { background: #f5f5f5 !important; color: var(--bm-green) !important; } /* ============================================================ SEARCH Explicit reset prevents the old theme from creating the white break / double border underneath the search field. ============================================================ */ .bm-header__search { position: relative; min-width: 0; margin: 0 !important; padding: 0 !important; } .bm-header__search-form { position: relative; display: block; width: 100%; height: 40px; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .bm-header__search-field { position: relative; display: block; width: 100%; height: 40px; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #d7d7d7 !important; border-radius: 2px !important; overflow: hidden !important; box-shadow: none !important; } .bm-header__search-input { position: static !important; float: none !important; display: block !important; width: 100% !important; height: 38px !important; margin: 0 !important; padding: 0 42px 0 12px !important; background: #ffffff !important; border: 0 !important; border-radius: 0 !important; color: #555555 !important; font-family: inherit !important; font-size: 12px !important; line-height: 38px !important; outline: 0 !important; box-shadow: none !important; } .bm-header__search-input:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; } .bm-header__search-input::placeholder { color: #888888; opacity: 1; } .bm-header__search-button { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; float: none !important; width: 40px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 0 !important; border-left: 1px solid #eeeeee !important; border-radius: 0 !important; color: #777777 !important; font-size: 15px !important; line-height: 38px !important; text-align: center; cursor: pointer; box-shadow: none !important; } .bm-header__search-button:hover, .bm-header__search-button:focus { background: #f7f7f7 !important; color: var(--bm-green) !important; outline: 0 !important; } /* ============================================================ LIVESEARCH ============================================================ */ .bm-header__autocomplete { position: absolute !important; z-index: 300 !important; top: calc(100% + 4px) !important; right: 0 !important; left: 0 !important; } /* ============================================================ CART — HARD RESET OLD THEME Goal: ONE circle. No #cart / #cartToggle second ring. ============================================================ */ .bm-header #cartContainer.bm-header__cart-container { position: relative !important; float: none !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 50px !important; height: 50px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .bm-header #cart.bm-header__cart { position: relative !important; float: none !important; display: block !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .bm-header #cartToggle.bm-header__cart-toggle { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; display: block !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .bm-header #cartToggle > a.cart.bm-header__cart-link { position: static !important; float: none !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #d5d5d5 !important; border-radius: 50% !important; color: #999999 !important; text-decoration: none !important; box-shadow: none !important; } .bm-header #cartToggle > a.cart.bm-header__cart-link:hover, .bm-header #cartToggle > a.cart.bm-header__cart-link:focus { background: #ffffff !important; border-color: #bbbbbb !important; color: var(--bm-green) !important; text-decoration: none !important; box-shadow: none !important; } .bm-header__cart-icon { margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: 16px !important; line-height: 1 !important; } .bm-header #cartToggle .cartCount.bm-header__cart-count { position: absolute !important; z-index: 10 !important; top: -7px !important; right: -6px !important; bottom: auto !important; left: auto !important; float: none !important; min-width: 20px !important; width: auto !important; height: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 5px !important; background: var(--bm-green) !important; border: 0 !important; border-radius: 10px !important; color: #ffffff !important; font-size: 10px !important; line-height: 20px !important; font-weight: 700 !important; box-shadow: none !important; } /* ============================================================ CART HOVER PANEL ============================================================ */ .bm-header #innerCart.bm-header__cart-panel { position: absolute !important; z-index: 400 !important; top: 56px !important; right: -5px !important; bottom: auto !important; left: auto !important; float: none !important; display: none !important; width: 320px !important; height: auto !important; margin: 0 !important; padding: 15px 10px 10px !important; background: #ffffff !important; border: 1px solid #d5d5d5 !important; border-radius: 0 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important; } .bm-header #cart:hover #innerCart, .bm-header #cart:focus-within #innerCart { display: block !important; } .bm-header #innerCart::before { content: ""; position: absolute; top: -9px; right: 18px; width: 16px; height: 16px; background: #ffffff; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; transform: rotate(45deg); } .bm-header #innerCart h3.bm-header__cart-panel-title { position: relative; z-index: 2; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 0 14px !important; background: #ffffff !important; border: 0 !important; color: #888888 !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 400 !important; text-align: left !important; } .bm-header #innerCart p.bm-header__cart-panel-total { position: relative; z-index: 2; width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 4px; margin: 0 !important; padding: 13px 0 !important; background: #ffffff !important; border: 0 !important; border-top: 1px solid #e5e5e5 !important; color: #888888 !important; font-size: 13px !important; line-height: 1.3 !important; text-align: right !important; } .bm-header #innerCart p.bm-header__cart-panel-total strong { margin: 0 !important; padding: 0 !important; color: #888888 !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 700 !important; } /* ============================================================ CART BUTTON Force BARFmenu green. No old turquoise .btn styling. ============================================================ */ .bm-header #cartButton.bm-header__cart-panel-button { position: relative !important; z-index: 2 !important; float: none !important; display: flex !important; justify-content: flex-end !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .bm-header #cartButton.bm-header__cart-panel-button > a { position: static !important; float: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 118px !important; height: 38px !important; margin: 0 !important; padding: 0 18px !important; background: var(--bm-green) !important; border: 0 !important; border-radius: 3px !important; color: #ffffff !important; font-size: 11px !important; line-height: 38px !important; font-weight: 700 !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: none !important; } .bm-header #cartButton.bm-header__cart-panel-button > a:hover, .bm-header #cartButton.bm-header__cart-panel-button > a:focus { background: var(--bm-green-hover) !important; color: #ffffff !important; text-decoration: none !important; } /* ============================================================ MOBILE MENU OFF DESKTOP ============================================================ */ .bm-header__mobile-menu { display: none; } /* ============================================================ TABLET ============================================================ */ @media screen and (max-width: 1050px) { .bm-header__main-inner { grid-template-columns: 195px minmax(340px, 1fr) 145px 48px; column-gap: 12px; } .bm-header__logo-image { max-width: 180px; } .bm-header__menu-link { padding-right: 6px !important; padding-left: 6px !important; font-size: 12px !important; } } /* ============================================================ MOBILE ============================================================ */ @media screen and (max-width: 767px) { .bm-header { --bm-top-height: 36px; --bm-main-height: auto; } .bm-header-spacer { height: 142px; } .bm-header__inner { padding-right: 12px; padding-left: 12px; } /* TOPBAR */ .bm-header #top.bm-header__topbar, .bm-header__topbar-inner, .bm-header__topbar-left, .bm-header #top .right.bm-header__topbar-right, .bm-header__language, .bm-header__language-current, .bm-header #top .right > .tui-dropdown.bm-header__checkout-wrap, .bm-header #top .right > .tui-dropdown > a.cart, .bm-header__topbar-action { height: 36px !important; min-height: 36px !important; } .bm-header__language-current { padding-right: 7px; padding-left: 3px; font-size: 10px; line-height: 36px; } .bm-header #top .right > .tui-dropdown > a.cart, .bm-header__topbar-action { padding-right: 7px !important; padding-left: 7px !important; font-size: 10px !important; line-height: 36px !important; } /* MAIN */ .bm-header__main { height: auto; } .bm-header__main-inner { min-height: 106px; height: auto; display: grid; grid-template-columns: 1fr 42px 44px; align-items: center; gap: 10px; padding-top: 9px; padding-bottom: 0; } /* LOGO */ .bm-header__logo { grid-column: 1; } .bm-header__logo-image { max-width: 165px; max-height: 54px; } /* DESKTOP NAV OFF */ .bm-header__navigation { display: none; } /* SEARCH ICON */ .bm-header__search { grid-column: 2; } .bm-header__search-form, .bm-header__search-field { width: 42px !important; height: 42px !important; } .bm-header__search-field { border: 0 !important; overflow: visible !important; } .bm-header__search-input { display: none !important; } .bm-header__search-button { position: static !important; width: 42px !important; height: 42px !important; background: #ffffff !important; border: 1px solid #d5d5d5 !important; border-radius: 50% !important; line-height: 40px !important; } /* CART */ .bm-header__cart-container { grid-column: 3; } /* MOBILE MENU */ .bm-header__mobile-menu { grid-column: 1 / -1; display: block; width: calc(100% + 24px); margin: 0 -12px; padding: 0; } .bm-header__mobile-menu > summary { list-style: none; } .bm-header__mobile-menu > summary::-webkit-details-marker { display: none; } .bm-header__mobile-menu-toggle { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 0 12px; background: #f5f5f5; border-top: 1px solid #e5e5e5; color: #333333; font-size: 12px; font-weight: 600; cursor: pointer; } .bm-header__mobile-navigation { background: #ffffff; border-top: 1px solid #e5e5e5; } .bm-header__mobile-link { position: relative; min-height: 43px; display: flex; align-items: center; padding: 9px 16px; background: #ffffff !important; border-bottom: 1px solid #eeeeee; color: #333333 !important; font-size: 12px; font-weight: 600; text-decoration: none !important; } .bm-header__mobile-link:hover, .bm-header__mobile-link:focus { background: #f7f7f7 !important; color: var(--bm-green) !important; } .bm-header__mobile-category > summary { list-style: none; } .bm-header__mobile-category > summary::-webkit-details-marker { display: none; } .bm-header__mobile-link--parent { padding-right: 42px; cursor: pointer; } .bm-header__mobile-link--parent::after { content: "+"; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--bm-green); font-size: 18px; } .bm-header__mobile-category[open] > .bm-header__mobile-link--parent::after { content: "−"; } .bm-header__mobile-submenu { background: #f7f7f7; } .bm-header__mobile-sublink { display: block; padding: 9px 16px 9px 30px; background: #f7f7f7 !important; border-bottom: 1px solid #eeeeee; color: #555555 !important; font-size: 11px; text-decoration: none !important; } .bm-header__mobile-sublink--overview { color: var(--bm-green) !important; font-weight: 700; } /* MOBILE CART PANEL */ .bm-header #innerCart.bm-header__cart-panel { position: fixed !important; top: 92px !important; right: 12px !important; left: 12px !important; width: auto !important; } .bm-header #innerCart::before { display: none; } } /* ============================================================ SMALL MOBILE ============================================================ */ @media screen and (max-width: 420px) { .bm-header__topbar-icon { display: none; } .bm-header #top .right > .tui-dropdown > a.cart, .bm-header__topbar-action { padding-right: 5px !important; padding-left: 5px !important; font-size: 9px !important; } .bm-header__language-current { font-size: 9px; } .bm-header__logo-image { max-width: 140px; } } /* ============================================================ V3.1 — TARGETED FIXES Assortiment dropdown + cart visual only. Functional cart hooks / Rain unchanged. ============================================================ */ @media screen and (min-width: 768px) { /* Assortiment: keep the dropdown in our own header layout */ .bm-header__navigation, .bm-header__menu, .bm-header__menu-item--has-children { overflow: visible !important; } .bm-header__menu-item--has-children > .bm-header__dropdown { position: absolute !important; top: 100% !important; left: 50% !important; right: auto !important; bottom: auto !important; display: none !important; width: 240px !important; min-width: 240px !important; max-width: 240px !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 6px 0 !important; overflow: visible !important; background: #ffffff !important; border: 1px solid #dddddd !important; border-top: 3px solid var(--bm-green) !important; border-radius: 0 !important; opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14) !important; } .bm-header__menu-item--has-children:hover > .bm-header__dropdown, .bm-header__menu-item--has-children:focus-within > .bm-header__dropdown { display: block !important; } .bm-header__dropdown-list, .bm-header__dropdown-item, .bm-header__dropdown-sublist, .bm-header__dropdown-subitem { float: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; background: #ffffff !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } .bm-header__dropdown-list, .bm-header__dropdown-sublist { position: static !important; display: block !important; padding: 0 !important; } .bm-header__dropdown-item, .bm-header__dropdown-subitem { position: relative !important; display: block !important; padding: 0 !important; border: 0 !important; } .bm-header__dropdown-link, .bm-header__dropdown-sublink { position: static !important; float: none !important; display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; border: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } } /* Cart: remove old-theme rings; the anchor is the ONE visible circle */ .bm-header #cartContainer::before, .bm-header #cartContainer::after, .bm-header #cart::before, .bm-header #cart::after, .bm-header #cartToggle::before, .bm-header #cartToggle::after, .bm-header #cartToggle > a.cart::before, .bm-header #cartToggle > a.cart::after { content: none !important; display: none !important; } .bm-header #cartContainer.bm-header__cart-container, .bm-header #cart.bm-header__cart, .bm-header #cartToggle.bm-header__cart-toggle { background: transparent !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; } .bm-header #cartToggle > a.cart.bm-header__cart-link { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #d5d5d5 !important; border-radius: 50% !important; color: #999999 !important; box-shadow: none !important; transform: none !important; } .bm-header #cartToggle > a.cart.bm-header__cart-link:hover, .bm-header #cartToggle > a.cart.bm-header__cart-link:focus { background: #ffffff !important; border-color: #bbbbbb !important; color: var(--bm-green) !important; box-shadow: none !important; } .bm-header #cartToggle > a.cart .bm-header__cart-icon { position: static !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: inherit !important; line-height: 1 !important; transform: none !important; } /* Keep the proven live .cartCount hook exactly as-is */ .bm-header #cartToggle > .cartCount.bm-header__cart-count { position: absolute !important; z-index: 20 !important; top: -7px !important; right: -6px !important; bottom: auto !important; left: auto !important; } /* ============================================================ V3.2 — FINAL SMALL VISUAL FIXES 1. Cart icon optical centering 2. Hide 3rd-level dropdowns in all languages 3. Livesearch CTA BARFmenu green ============================================================ */ /* 1. Cart icon: optical centering inside the existing circle */ .bm-header #cartToggle > a.cart .bm-header__cart-icon { position: relative !important; left: 1px !important; top: 1px !important; } /* 2. Never show category sub-subs in the desktop dropdown */ @media screen and (min-width: 768px) { .bm-header__dropdown-sublist { display: none !important; } } /* 3. Livesearch bottom CTA: replace old turquoise theme styling */ .bm-header__autocomplete .more, .bm-header__autocomplete .more.btn { background: transparent !important; border: 0 !important; box-shadow: none !important; } .bm-header__autocomplete .more > a, .bm-header__autocomplete .more > a.item-add-btn, .bm-header__autocomplete .more > a.livesearch { background: var(--bm-green) !important; border-color: var(--bm-green) !important; color: #ffffff !important; box-shadow: none !important; } .bm-header__autocomplete .more > a:hover, .bm-header__autocomplete .more > a:focus, .bm-header__autocomplete .more > a.item-add-btn:hover, .bm-header__autocomplete .more > a.item-add-btn:focus, .bm-header__autocomplete .more > a.livesearch:hover, .bm-header__autocomplete .more > a.livesearch:focus { background: var(--bm-green-hover) !important; border-color: var(--bm-green-hover) !important; color: #ffffff !important; } /* ============================================================ V3.3 — HEADER HEIGHT + CART CENTER + LIVESEARCH LINKS ============================================================ */ /* 1. Prevent old theme page headers from reserving legacy header space. Fixed header already uses .bm-header-spacer for its own height. */ .bm-header + .bm-header-spacer { height: 132px !important; } /* Our fixed header itself must never contribute additional document height. */ .bm-header { height: 132px !important; min-height: 132px !important; } /* 2. Cart: center the actual Font Awesome glyph, not only its span box. */ .bm-header #cartToggle > a.cart.bm-header__cart-link { text-align: center !important; } .bm-header #cartToggle > a.cart .bm-header__cart-icon { position: static !important; left: auto !important; top: auto !important; width: 16px !important; height: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; line-height: 16px !important; text-align: center !important; } .bm-header #cartToggle > a.cart .bm-header__cart-icon::before { position: static !important; display: block !important; width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; line-height: 16px !important; text-align: center !important; transform: none !important; } /* 3. Livesearch product links: BARFmenu green in every language */ .bm-header__autocomplete .products a, .bm-header__autocomplete .products-livesearch a, .bm-header__autocomplete a.product-title, .bm-header__autocomplete .title a { color: var(--bm-green) !important; } .bm-header__autocomplete .products a:hover, .bm-header__autocomplete .products a:focus, .bm-header__autocomplete .products-livesearch a:hover, .bm-header__autocomplete .products-livesearch a:focus, .bm-header__autocomplete a.product-title:hover, .bm-header__autocomplete a.product-title:focus, .bm-header__autocomplete .title a:hover, .bm-header__autocomplete .title a:focus { color: var(--bm-green-hover) !important; } /* Keep CTA text white despite the generic livesearch link rule above */ .bm-header__autocomplete .more > a, .bm-header__autocomplete .more > a.item-add-btn, .bm-header__autocomplete .more > a.livesearch { color: #ffffff !important; } /* Mobile fixed header keeps its existing compact geometry */ @media screen and (max-width: 767px) { .bm-header { height: 142px !important; min-height: 142px !important; } .bm-header + .bm-header-spacer { height: 142px !important; } } /* ============================================================ BARFMENU B2B HEADER V4 ============================================================ */ /* ============================================================ LIVESEARCH ============================================================ */ /* Product links */ .bm-header__autocomplete .products a, .bm-header__autocomplete .products-livesearch a, .bm-header__autocomplete a.product-title, .bm-header__autocomplete .title a { color: var(--bm-green) !important; } .bm-header__autocomplete .products a:hover, .bm-header__autocomplete .products a:focus, .bm-header__autocomplete .products-livesearch a:hover, .bm-header__autocomplete .products-livesearch a:focus, .bm-header__autocomplete a.product-title:hover, .bm-header__autocomplete a.product-title:focus, .bm-header__autocomplete .title a:hover, .bm-header__autocomplete .title a:focus { color: var(--bm-green-hover) !important; } /* CTA + result count */ .bm-header__autocomplete .more > a, .bm-header__autocomplete .more > a.item-add-btn, .bm-header__autocomplete .more > a.livesearch, .bm-header__autocomplete .more > a span, .bm-header__autocomplete .more > a.item-add-btn span, .bm-header__autocomplete .more > a.livesearch span { color: #ffffff !important; opacity: 1 !important; } .bm-header__autocomplete .more > a span { font: inherit !important; } /* ============================================================ SHARED DROPDOWN VISUAL LANGUAGE ============================================================ */ @media screen and (min-width: 768px) { /* ---------- Assortiment ---------- */ .bm-header__menu-item--has-children > .bm-header__dropdown { width: 220px !important; min-width: 220px !important; max-width: 220px !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #dddddd !important; border-top: 3px solid var(--bm-green) !important; border-radius: 0 0 3px 3px !important; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12) !important; } .bm-header__dropdown-list { padding: 0 !important; background: #ffffff !important; } .bm-header__dropdown-item { background: #ffffff !important; border: 0 !important; border-bottom: 1px solid #eeeeee !important; } .bm-header__dropdown-item:last-child { border-bottom: 0 !important; } .bm-header__dropdown-item > .bm-header__dropdown-link { padding: 11px 15px !important; background: #ffffff !important; color: #444444 !important; font-size: 12px !important; line-height: 1.25 !important; font-weight: 400 !important; } .bm-header__dropdown-item > .bm-header__dropdown-link:hover, .bm-header__dropdown-item > .bm-header__dropdown-link:focus { background: #f7f7f7 !important; color: var(--bm-green) !important; } .bm-header__dropdown-item:first-child > .bm-header__dropdown-link { color: var(--bm-green) !important; font-weight: 600 !important; } /* Third level remains hidden in every language */ .bm-header__dropdown-sublist { display: none !important; } /* ---------- Language ---------- */ .bm-header__language-menu { top: 100% !important; left: 0 !important; min-width: 160px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #dddddd !important; border-top: 3px solid var(--bm-green) !important; border-radius: 0 0 3px 3px !important; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12) !important; } .bm-header__language-option { padding: 11px 13px !important; background: #ffffff !important; border: 0 !important; border-bottom: 1px solid #eeeeee !important; color: #444444 !important; font-size: 12px !important; line-height: 1.25 !important; font-weight: 400 !important; } .bm-header__language-option:last-child { border-bottom: 0 !important; } .bm-header__language-option:hover, .bm-header__language-option:focus { background: #f7f7f7 !important; color: var(--bm-green) !important; } .bm-header__language-option--active { background: #ffffff !important; color: var(--bm-green) !important; font-weight: 600 !important; } /* ======================================================== LANGUAGE — AUTO CLOSE VISUALLY ON MOUSE LEAVE
may retain its internal open state after click, but the menu is hidden as soon as the pointer leaves. Hovering the language control opens it again immediately. ======================================================== */ .bm-header__language:hover .bm-header__language-menu, .bm-header__language:focus-within .bm-header__language-menu { display: block !important; } .bm-header__language[open]:not(:hover):not(:focus-within) .bm-header__language-menu { display: none !important; } } /* ============================================================ BARFMENU B2B HEADER V4.1 LANGUAGE DESKTOP = PURE HOVER VISIBILITY ============================================================ */ @media screen and (min-width: 768px) { /* *
may remain internally open after a click. * On desktop we deliberately ignore that state visually: * closed by default, visible only while the language control * itself is hovered. */ .bm-header__language .bm-header__language-menu, .bm-header__language[open] .bm-header__language-menu, .bm-header__language:focus-within .bm-header__language-menu, .bm-header__language[open]:focus-within .bm-header__language-menu { display: none !important; } .bm-header__language:hover .bm-header__language-menu, .bm-header__language[open]:hover .bm-header__language-menu { display: block !important; } } /* ============================================================ BARFMENU B2B HEADER V4.2 LANGUAGE = TRUE DESKTOP HOVER (NO
STATE) ============================================================ */ @media screen and (min-width: 768px) { .bm-header__language .bm-header__language-menu { display: none !important; } .bm-header__language:hover .bm-header__language-menu { display: block !important; } } /* ============================================================ BARFMENU B2B HEADER V4.3 DESKTOP NAV READABILITY + NEUTRAL DROPDOWN ITEMS ============================================================ */ @media screen and (min-width: 768px) { /* Hoofdmenu duidelijker, zonder layout/hoogtes te wijzigen */ .bm-header__menu-link { font-size: 14px !important; font-weight: 500 !important; } /* Actieve hoofdpagina blijft groen, maar niet kunstmatig vet */ .bm-header__menu-item--active > .bm-header__menu-link { font-weight: 500 !important; } /* Dropdown: geen nep-selected eerste item */ .bm-header__dropdown-item:first-child > .bm-header__dropdown-link { color: #444444 !important; font-weight: 400 !important; } /* Beide dropdownopties gelijk en iets beter leesbaar */ .bm-header__dropdown-item > .bm-header__dropdown-link { font-size: 13px !important; font-weight: 400 !important; } /* Alleen de regel waar je daadwerkelijk overheen gaat wordt groen */ .bm-header__dropdown-item > .bm-header__dropdown-link:hover, .bm-header__dropdown-item > .bm-header__dropdown-link:focus { color: var(--bm-green) !important; font-weight: 400 !important; } } /* ============================================================ BARFMENU B2B HEADER V4.4 DESKTOP NAV — STRONGER VISUAL PRESENCE ============================================================ */ @media screen and (min-width: 768px) { .bm-header__menu-link { font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; } .bm-header__menu-item--active > .bm-header__menu-link { font-weight: 600 !important; } .bm-header__dropdown-item > .bm-header__dropdown-link, .bm-header__dropdown-item:first-child > .bm-header__dropdown-link { font-size: 14px !important; font-weight: 500 !important; } .bm-header__dropdown-item > .bm-header__dropdown-link:hover, .bm-header__dropdown-item > .bm-header__dropdown-link:focus { color: var(--bm-green) !important; font-weight: 500 !important; } } /* ============================================================ BARFMENU B2B HEADER V4.5 — MOBILE REBUILD Desktop V4.4 is intentionally untouched. ============================================================ */ /* Language ownership */ .bm-header__language--mobile { display: none !important; } @media screen and (max-width: 767px) { /* ======================================================== LANGUAGE — MOBILE TAP DROPDOWN ======================================================== */ .bm-header__language--desktop { display: none !important; } .bm-header__language--mobile { display: block !important; position: relative !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } .bm-header__language--mobile > summary { list-style: none !important; } .bm-header__language--mobile > summary::-webkit-details-marker { display: none !important; } .bm-header__language--mobile .bm-header__language-current { display: flex !important; align-items: center !important; gap: 7px !important; height: 100% !important; margin: 0 !important; padding: 0 12px !important; cursor: pointer !important; color: #ffffff !important; background: transparent !important; } .bm-header__language--mobile[open] .bm-header__language-current { background: rgba(0, 0, 0, 0.08) !important; } .bm-header__language--mobile .bm-header__language-menu { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; z-index: 10050 !important; width: 170px !important; min-width: 170px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #dddddd !important; border-top: 3px solid var(--bm-green) !important; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14) !important; } .bm-header__language--mobile[open] .bm-header__language-menu { display: block !important; } .bm-header__language--mobile .bm-header__language-option { display: block !important; padding: 12px 14px !important; background: #ffffff !important; border: 0 !important; border-bottom: 1px solid #eeeeee !important; color: #444444 !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 500 !important; text-decoration: none !important; } .bm-header__language--mobile .bm-header__language-option:last-child { border-bottom: 0 !important; } .bm-header__language--mobile .bm-header__language-option--active { color: var(--bm-green) !important; } /* ======================================================== MAIN MOBILE HEADER Logo left, search + cart right. ======================================================== */ .bm-header__main { overflow: visible !important; } .bm-header__main-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; column-gap: 10px !important; overflow: visible !important; } .bm-header__logo { min-width: 0 !important; } .bm-header__logo-image { max-width: 100% !important; height: auto !important; } /* ======================================================== SEARCH — REAL MOBILE INPUT ======================================================== */ .bm-header__search { display: block !important; position: static !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } .bm-header__search-form { position: static !important; width: auto !important; margin: 0 !important; } .bm-header__search-field { display: flex !important; position: relative !important; width: 42px !important; height: 42px !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #d9d9d9 !important; border-radius: 22px !important; transition: width 0.18s ease !important; } .bm-header__search-field:focus-within { width: min(48vw, 250px) !important; } .bm-header__search-input { display: block !important; flex: 1 1 auto !important; width: 0 !important; min-width: 0 !important; height: 40px !important; margin: 0 !important; padding: 0 4px 0 13px !important; border: 0 !important; outline: 0 !important; background: transparent !important; color: #444444 !important; font-size: 16px !important; line-height: 40px !important; opacity: 0 !important; pointer-events: none !important; } .bm-header__search-field:focus-within .bm-header__search-input { width: auto !important; opacity: 1 !important; pointer-events: auto !important; } .bm-header__search-button { position: static !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #777777 !important; font-size: 18px !important; cursor: pointer !important; } .bm-header__autocomplete { left: 12px !important; right: 12px !important; top: calc(100% - 4px) !important; width: auto !important; max-width: none !important; z-index: 10040 !important; } /* ======================================================== CART — KEEP EXISTING FUNCTIONAL HOOKS ======================================================== */ .bm-header__cart-container { position: static !important; margin: 0 !important; } /* ======================================================== MOBILE MENU — REAL TAP/OPEN PANEL ======================================================== */ .bm-header__mobile-menu { display: block !important; grid-column: 1 / -1 !important; width: calc(100% + 24px) !important; margin: 12px -12px -12px !important; padding: 0 !important; background: #f7f7f7 !important; border-top: 1px solid #e5e5e5 !important; border-bottom: 1px solid #e5e5e5 !important; } .bm-header__mobile-menu > summary { list-style: none !important; } .bm-header__mobile-menu > summary::-webkit-details-marker { display: none !important; } .bm-header__mobile-menu-toggle { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 0 16px !important; color: #333333 !important; background: #f7f7f7 !important; font-size: 16px !important; line-height: 1 !important; font-weight: 600 !important; cursor: pointer !important; } .bm-header__mobile-menu[open] .bm-header__mobile-menu-toggle { color: var(--bm-green) !important; border-bottom: 1px solid #e5e5e5 !important; } .bm-header__mobile-navigation { display: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; } .bm-header__mobile-menu[open] > .bm-header__mobile-navigation { display: block !important; } .bm-header__mobile-link, .bm-header__mobile-sublink { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 13px 18px !important; background: #ffffff !important; border: 0 !important; border-bottom: 1px solid #eeeeee !important; color: #444444 !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 500 !important; text-align: left !important; text-decoration: none !important; } .bm-header__mobile-link--parent { cursor: pointer !important; } .bm-header__mobile-category { margin: 0 !important; padding: 0 !important; background: #ffffff !important; } .bm-header__mobile-category > summary { list-style: none !important; } .bm-header__mobile-category > summary::-webkit-details-marker { display: none !important; } .bm-header__mobile-category[open] > .bm-header__mobile-link--parent { color: var(--bm-green) !important; background: #f7f7f7 !important; } .bm-header__mobile-submenu { display: none !important; margin: 0 !important; padding: 0 !important; background: #fafafa !important; } .bm-header__mobile-category[open] > .bm-header__mobile-submenu { display: block !important; } .bm-header__mobile-sublink { padding-left: 32px !important; background: #fafafa !important; font-size: 14px !important; font-weight: 400 !important; } .bm-header__mobile-sublink--overview { color: var(--bm-green) !important; font-weight: 600 !important; } } /* ============================================================ BARFMENU B2B HEADER V4.6 — MOBILE OG UX / NEW BM STYLE Desktop V4.4 remains untouched. ============================================================ */ @media screen and (max-width: 767px) { /* -------------------------------------------------------- MOBILE STRUCTURE topbar -> logo -> hamburger/search row -------------------------------------------------------- */ .bm-header { height: auto !important; min-height: 0 !important; overflow: visible !important; } .bm-header__topbar { position: relative !important; z-index: 10030 !important; } .bm-header__main { height: auto !important; min-height: 0 !important; overflow: visible !important; background: #ffffff !important; } .bm-header__main-inner { display: grid !important; grid-template-columns: 112px minmax(0, 1fr) !important; grid-template-rows: 118px 58px !important; column-gap: 0 !important; row-gap: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Logo = full white row */ .bm-header__logo { grid-column: 1 / -1 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 118px !important; margin: 0 !important; padding: 12px 20px !important; box-sizing: border-box !important; background: #ffffff !important; border-bottom: 1px solid #e5e5e5 !important; } .bm-header__logo-link { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } .bm-header__logo-image { display: block !important; width: auto !important; max-width: min(88vw, 430px) !important; max-height: 92px !important; height: auto !important; margin: 0 auto !important; } /* Desktop navigation stays absent on mobile */ .bm-header__navigation { display: none !important; } /* White-row round cart = intentionally gone on mobile */ .bm-header__cart-container { display: none !important; } /* -------------------------------------------------------- MOBILE MENU OPENER — OG position left -------------------------------------------------------- */ .bm-header__mobile-menu { grid-column: 1 !important; grid-row: 2 !important; display: block !important; position: static !important; width: 112px !important; height: 58px !important; margin: 0 !important; padding: 0 !important; background: var(--bm-green) !important; border: 0 !important; } .bm-header__mobile-menu > summary { list-style: none !important; } .bm-header__mobile-menu > summary::-webkit-details-marker { display: none !important; } .bm-header__mobile-menu-toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: 112px !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 !important; background: var(--bm-green) !important; border: 0 !important; color: #ffffff !important; cursor: pointer !important; } .bm-header__mobile-menu-toggle .fa { margin: 0 !important; font-size: 30px !important; line-height: 1 !important; color: #ffffff !important; } /* OG mobile button showed only the hamburger */ .bm-header__mobile-menu-toggle > span:not(.fa) { display: none !important; } .bm-header__mobile-menu[open] .bm-header__mobile-menu-toggle { background: var(--bm-green) !important; color: #ffffff !important; border: 0 !important; } /* -------------------------------------------------------- SEARCH — visible input like OG -------------------------------------------------------- */ .bm-header__search { grid-column: 2 !important; grid-row: 2 !important; display: block !important; position: relative !important; width: 100% !important; height: 58px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border-bottom: 1px solid #e5e5e5 !important; } .bm-header__search-form { display: block !important; position: relative !important; width: 100% !important; height: 58px !important; margin: 0 !important; padding: 0 !important; } .bm-header__search-field { display: flex !important; position: relative !important; width: 100% !important; height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #ffffff !important; border: 0 !important; border-radius: 0 !important; transition: none !important; } .bm-header__search-field:focus-within { width: 100% !important; } .bm-header__search-input, .bm-header__search-field:focus-within .bm-header__search-input { display: block !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 58px !important; margin: 0 !important; padding: 0 12px 0 20px !important; background: #ffffff !important; border: 0 !important; outline: 0 !important; color: #444444 !important; font-size: 16px !important; line-height: 58px !important; opacity: 1 !important; pointer-events: auto !important; } .bm-header__search-button { position: static !important; flex: 0 0 58px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 58px !important; height: 58px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 0 !important; color: #777777 !important; font-size: 22px !important; cursor: pointer !important; } .bm-header__autocomplete { position: absolute !important; top: 58px !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; z-index: 10060 !important; } /* -------------------------------------------------------- OFF-CANVAS MENU — OG behaviour, BM namespace -------------------------------------------------------- */ .bm-header__mobile-navigation, .bm-header__mobile-menu[open] > .bm-header__mobile-navigation { display: block !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; z-index: 11000 !important; width: min(78vw, 580px) !important; height: 100dvh !important; min-height: 100vh !important; margin: 0 !important; padding: 86px 28px 32px !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; background: var(--bm-green) !important; box-shadow: -5px 0 18px rgba(0, 0, 0, 0.18) !important; transform: translateX(105%) !important; visibility: hidden !important; pointer-events: none !important; transition: transform 0.22s ease, visibility 0s linear 0.22s !important; } .bm-header__mobile-menu[open] > .bm-header__mobile-navigation { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important; transition: transform 0.22s ease, visibility 0s linear 0s !important; } .bm-header__mobile-close { display: flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: 14px !important; right: 18px !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 30px !important; line-height: 1 !important; font-weight: 700 !important; cursor: pointer !important; } .bm-header__mobile-link, .bm-header__mobile-sublink { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 14px 18px !important; background: transparent !important; border: 0 !important; color: #ffffff !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 600 !important; text-align: left !important; text-decoration: none !important; } .bm-header__mobile-navigation > .bm-header__mobile-link:first-of-type { background: rgba(255, 255, 255, 0.18) !important; } .bm-header__mobile-category { display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .bm-header__mobile-category > summary { list-style: none !important; } .bm-header__mobile-category > summary::-webkit-details-marker { display: none !important; } .bm-header__mobile-link--parent { position: relative !important; padding-right: 48px !important; cursor: pointer !important; } .bm-header__mobile-link--parent::after { content: "+" !important; position: absolute !important; top: 50% !important; right: 18px !important; transform: translateY(-50%) !important; color: #ffffff !important; font-size: 24px !important; line-height: 1 !important; font-weight: 700 !important; } .bm-header__mobile-category[open] > .bm-header__mobile-link--parent { color: #ffffff !important; background: transparent !important; } .bm-header__mobile-category[open] > .bm-header__mobile-link--parent::after { content: "−" !important; } .bm-header__mobile-submenu { display: none !important; margin: 0 0 4px !important; padding: 0 0 0 14px !important; background: transparent !important; } .bm-header__mobile-category[open] > .bm-header__mobile-submenu { display: block !important; } .bm-header__mobile-sublink, .bm-header__mobile-sublink--overview { padding: 10px 18px !important; background: transparent !important; color: #ffffff !important; font-size: 15px !important; font-weight: 500 !important; } .bm-header__mobile-sublink--overview { font-weight: 600 !important; } /* -------------------------------------------------------- LANGUAGE remains V4.5 mobile tap dropdown. Keep it above all normal header rows. -------------------------------------------------------- */ .bm-header__language--mobile .bm-header__language-menu { z-index: 11100 !important; } /* -------------------------------------------------------- FIXED HEADER FLOW 38 top + 118 logo + 58 control row = 214 -------------------------------------------------------- */ .bm-header + .bm-header-spacer, .bm-header-spacer { height: 214px !important; } } /* Lock page scrolling while off-canvas navigation is open. */ @media screen and (max-width: 767px) { html.bm-header-mobile-menu-open, html.bm-header-mobile-menu-open body { overflow: hidden !important; } } /* ============================================================ BARFMENU B2B HEADER V4.7 — MOBILE STACKING / CART HARD FIX Desktop remains untouched. ============================================================ */ @media screen and (max-width: 767px) { /* * The OG responsive menu lived outside the normal header stack. * Our menu lives inside bm-header, so lift the main-header * stacking context above the green topbar while the mobile * system is active. The fixed off-canvas panel can then cover * the topbar from y=0 exactly like the OG menu. */ .bm-header__main { position: relative !important; z-index: 10040 !important; } .bm-header__mobile-navigation, .bm-header__mobile-menu[open] > .bm-header__mobile-navigation { z-index: 12000 !important; } /* * Earlier desktop cart rules use #cartContainer and therefore * outrank the class-only mobile hide. Use the same ID specificity * here: the round white-row cart must not exist on mobile. */ .bm-header #cartContainer.bm-header__cart-container { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; } /* Force a clean × regardless of legacy button/icon styling. */ .bm-header__mobile-close { -webkit-appearance: none !important; appearance: none !important; font-size: 0 !important; text-indent: 0 !important; } .bm-header__mobile-close::before { content: "\00D7" !important; display: block !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 30px !important; line-height: 1 !important; font-weight: 700 !important; } } /* ============================================================ BARFMENU B2B HEADER V4.8 — MOBILE MENU COMPACT POLISH Desktop remains untouched. ============================================================ */ @media screen and (max-width: 767px) { /* Remove the tiny top seam on the off-canvas panel. */ .bm-header__mobile-navigation, .bm-header__mobile-menu[open] > .bm-header__mobile-navigation { top: 0 !important; padding: 72px 28px 28px !important; border: 0 !important; outline: 0 !important; } /* Compact vertical rhythm: no giant empty gaps. */ .bm-header__mobile-link, .bm-header__mobile-sublink { min-height: 0 !important; margin: 0 !important; padding-top: 12px !important; padding-bottom: 12px !important; } .bm-header__mobile-navigation > .bm-header__mobile-link:first-of-type { margin: 0 0 6px !important; padding: 15px 18px !important; } .bm-header__mobile-category { margin: 0 0 4px !important; } .bm-header__mobile-category > .bm-header__mobile-link--parent { padding-top: 12px !important; padding-bottom: 12px !important; } .bm-header__mobile-submenu { margin: 0 !important; padding-top: 2px !important; padding-bottom: 4px !important; } .bm-header__mobile-sublink, .bm-header__mobile-sublink--overview { padding-top: 9px !important; padding-bottom: 9px !important; } /* Main links immediately follow each other. */ .bm-header__mobile-navigation > a.bm-header__mobile-link { margin-top: 0 !important; margin-bottom: 0 !important; } /* Keep close control compact in the new top spacing. */ .bm-header__mobile-close { top: 12px !important; right: 18px !important; } } /* ============================================================ BARFMENU B2B HEADER V4.9 — MOBILE MENU FINAL TIGHTENING Desktop remains untouched. ============================================================ */ @media screen and (max-width: 767px) { /* Burger/search row: remove the tiny bottom seam. */ .bm-header__mobile-menu, .bm-header__mobile-menu-toggle, .bm-header__search, .bm-header__search-form, .bm-header__search-field { border-bottom: 0 !important; box-shadow: none !important; } /* Off-canvas: compact menu rhythm. */ .bm-header__mobile-navigation, .bm-header__mobile-menu[open] > .bm-header__mobile-navigation { padding: 68px 28px 24px !important; } .bm-header__mobile-navigation > .bm-header__mobile-link, .bm-header__mobile-category > .bm-header__mobile-link--parent { min-height: 0 !important; margin: 0 !important; padding-top: 11px !important; padding-bottom: 11px !important; line-height: 1.25 !important; } /* Home stays highlighted, but becomes a normal-height menu row. */ .bm-header__mobile-navigation > .bm-header__mobile-link:first-of-type { margin: 0 0 4px !important; padding: 13px 18px !important; } .bm-header__mobile-category { margin: 0 !important; padding: 0 !important; } /* Remove duplicate "Assortiment" overview link from opened submenu. */ .bm-header__mobile-submenu > .bm-header__mobile-sublink--overview { display: none !important; } /* Hond / Kat compact directly below Assortiment. */ .bm-header__mobile-submenu { margin: 0 !important; padding: 0 0 3px 14px !important; } .bm-header__mobile-sublink { min-height: 0 !important; margin: 0 !important; padding: 9px 18px !important; line-height: 1.25 !important; } /* Close button remains aligned with compact top area. */ .bm-header__mobile-close { top: 10px !important; } } /* ============================================================ BARFMENU B2B HEADER V5 — MOBILE FINAL LAYOUT Desktop V4.4 remains untouched. V4.6 Rain remains untouched. ============================================================ */ @media screen and (max-width: 767px) { /* -------------------------------------------------------- CONTROL ROW Exact 58px: remove remaining white space underneath. -------------------------------------------------------- */ .bm-header__main-inner { grid-template-rows: 118px 58px !important; height: 176px !important; min-height: 176px !important; max-height: 176px !important; align-content: start !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } .bm-header__mobile-menu, .bm-header__mobile-menu-toggle, .bm-header__search, .bm-header__search-form, .bm-header__search-field, .bm-header__search-input, .bm-header__search-button { height: 58px !important; min-height: 58px !important; max-height: 58px !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; } .bm-header__main { padding-bottom: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; } /* -------------------------------------------------------- OFF-CANVAS NAVIGATION Normal document flow: no inherited distributed spacing. -------------------------------------------------------- */ .bm-header__mobile-navigation, .bm-header__mobile-menu[open] > .bm-header__mobile-navigation { display: block !important; align-content: initial !important; align-items: initial !important; justify-content: initial !important; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; } .bm-header__mobile-navigation > .bm-header__mobile-link, .bm-header__mobile-navigation > .bm-header__mobile-category { position: relative !important; float: none !important; clear: both !important; flex: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; } .bm-header__mobile-navigation > .bm-header__mobile-link { padding: 11px 18px !important; } .bm-header__mobile-navigation > .bm-header__mobile-link:first-of-type { margin: 0 0 4px !important; padding: 13px 18px !important; } .bm-header__mobile-category > .bm-header__mobile-link--parent { height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 11px 48px 11px 18px !important; } .bm-header__mobile-submenu { height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 0 3px 14px !important; } .bm-header__mobile-sublink { height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 9px 18px !important; } /* V4.9 PASS: no duplicate Assortiment overview. */ .bm-header__mobile-submenu > .bm-header__mobile-sublink--overview { display: none !important; } } /* ============================================================ BARFMENU B2B HEADER V5.2 — MOBILE LANGUAGE STACKING FIX Desktop remains untouched. ============================================================ */ @media screen and (max-width: 767px) { /* * V4.7 intentionally placed .bm-header__main above the topbar * so the off-canvas menu can cover the complete screen. * Side effect: the mobile language dropdown opens behind the * white main header and therefore appears to do nothing. * * Only while the language
is open, temporarily lift * the topbar above the main header. */ .bm-header__topbar:has(.bm-header__language--mobile[open]) { z-index: 12020 !important; } .bm-header__language--mobile[open] { z-index: 12021 !important; } .bm-header__language--mobile[open] .bm-header__language-menu { z-index: 12022 !important; } } /* ============================================================ BARFMENU B2B HEADER V5.3 — MOBILE CATEGORY SPLIT FIX Matches V5.1 Rain: category text = navigation link +/- button = submenu toggle Desktop remains untouched. ============================================================ */ @media screen and (max-width: 767px) { /* V5.1 no longer uses
/ for categories. */ .bm-header__mobile-parent-row { display: flex !important; align-items: center !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* Assortiment text is now a real link. */ .bm-header__mobile-parent-row > .bm-header__mobile-link--parent { position: static !important; display: block !important; flex: 1 1 auto !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 11px 12px 11px 18px !important; background: transparent !important; border: 0 !important; color: #ffffff !important; line-height: 1.25 !important; text-decoration: none !important; } /* Kill the old CSS-generated +/- from the former summary. */ .bm-header__mobile-parent-row > .bm-header__mobile-link--parent::after { content: none !important; display: none !important; } /* Dedicated +/- tap target from V5.1 Rain. */ .bm-header__mobile-category-toggle { -webkit-appearance: none !important; appearance: none !important; display: flex !important; flex: 0 0 46px !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 44px !important; min-width: 46px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; color: #ffffff !important; cursor: pointer !important; } .bm-header__mobile-category-toggle-icon { display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 24px !important; line-height: 1 !important; font-weight: 700 !important; } /* * Old CSS listened to details[open]. * V5.1 Rain now toggles this explicit class instead. */ .bm-header__mobile-category > .bm-header__mobile-submenu { display: none !important; } .bm-header__mobile-category--open > .bm-header__mobile-submenu { display: block !important; } /* Compact Hond / Kat underneath Assortiment. */ .bm-header__mobile-category--open > .bm-header__mobile-submenu { height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 0 3px 14px !important; background: transparent !important; } .bm-header__mobile-category--open > .bm-header__mobile-submenu > .bm-header__mobile-sublink { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 9px 18px !important; background: transparent !important; color: #ffffff !important; line-height: 1.25 !important; } } /* ============================================================ BARFMENU B2B HEADER V5.4 — MOBILE LANGUAGE FINAL STACK FIX No :has() dependency. Desktop remains untouched. ============================================================ */ @media screen and (max-width: 767px) { /* * Normal mobile state: * topbar must sit above the white main header so the native *
language dropdown is visible and tappable. */ .bm-header__topbar { z-index: 12020 !important; } .bm-header__main { z-index: 10040 !important; } .bm-header__language--mobile, .bm-header__language--mobile[open], .bm-header__language--mobile .bm-header__language-menu, .bm-header__language--mobile[open] .bm-header__language-menu { z-index: 12021 !important; } /* * When the off-canvas menu is open, the existing JS already * adds this class to . Only then lift the main header * above the topbar, so the green overlay still covers everything. */ html.bm-header-mobile-menu-open .bm-header__main { z-index: 12030 !important; } html.bm-header-mobile-menu-open .bm-header__mobile-navigation { z-index: 12040 !important; } } /* ============================================================ BARFMENU B2B HEADER V5.6 — MOBILE LANGUAGE OG-MECHANIC FIX ONLY mobile language interaction is changed. Existing desktop/mobile PASS layout remains untouched. ============================================================ */ @media screen and (max-width: 767px) { /* The mobile language control is now an explicit button + panel. */ .bm-header__language--mobile { position: relative !important; overflow: visible !important; } .bm-header__language--mobile > .bm-header__language-toggle { -webkit-appearance: none !important; appearance: none !important; display: flex !important; align-items: center !important; gap: 7px !important; height: 100% !important; margin: 0 !important; padding: 0 12px !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; color: #ffffff !important; font: inherit !important; cursor: pointer !important; } .bm-header__language--mobile.bm-header__language--open > .bm-header__language-toggle { background: rgba(0, 0, 0, 0.08) !important; } /* Default closed: same proven mechanic as the OG mobile dropdown. */ .bm-header__language--mobile .bm-header__language-menu { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; z-index: 12022 !important; width: 170px !important; min-width: 170px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #dddddd !important; border-top: 3px solid var(--bm-green) !important; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14) !important; } /* JS toggles only this class; no details/open or :has dependency. */ .bm-header__language--mobile.bm-header__language--open .bm-header__language-menu { display: block !important; } .bm-header__language--mobile.bm-header__language--open .bm-header__language-arrow { transform: rotate(180deg) !important; } } /* ============================================================ BARFMENU B2B HEADER V5.7 — MOBILE LANGUAGE RENDER FIX CSS ONLY. V5.6 JS/state remains untouched. The open language panel is rendered independently of the legacy header row clipping/stacking chain. ============================================================ */ @media screen and (max-width: 767px) { /* Do not allow any topbar ancestor to clip the language panel. */ .bm-header, .bm-header #top.bm-header__topbar, .bm-header__topbar-inner, .bm-header__topbar-left, .bm-header__language--mobile { overflow: visible !important; } /* Keep the normal topbar above the white header rows. */ .bm-header #top.bm-header__topbar { position: relative !important; z-index: 12020 !important; } .bm-header__language--mobile { position: relative !important; z-index: 12021 !important; } /* * Closed = absent. * Open = fixed viewport panel directly below the 36px topbar. * Fixed positioning deliberately escapes the old header row's * layout/clipping chain while preserving the V5.6 button/state. */ .bm-header__language--mobile .bm-header__language-menu { display: none !important; } .bm-header__language--mobile.bm-header__language--open .bm-header__language-menu { display: block !important; position: fixed !important; top: 36px !important; left: 0 !important; right: auto !important; z-index: 2147483000 !important; width: 180px !important; min-width: 180px !important; max-width: calc(100vw - 12px) !important; height: auto !important; max-height: calc(100vh - 48px) !important; overflow-x: hidden !important; overflow-y: auto !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; background: #ffffff !important; border: 1px solid #dddddd !important; border-top: 3px solid var(--bm-green) !important; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14) !important; } .bm-header__language--mobile.bm-header__language--open .bm-header__language-menu > .bm-header__language-option { display: block !important; position: relative !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; margin: 0 !important; padding: 12px 14px !important; background: #ffffff !important; color: #444444 !important; text-decoration: none !important; pointer-events: auto !important; } /* Existing off-canvas menu must still win when it is opened. */ html.bm-header-mobile-menu-open .bm-header__main { z-index: 2147483100 !important; } html.bm-header-mobile-menu-open .bm-header__mobile-navigation { z-index: 2147483200 !important; } }