/**
 * Header layout fixes — loaded last (layout order 9999) so rules beat
 * styles-l.css and store-scoped design/head/includes inline CSS.
 */

@media (min-width: 769px) {
  .header-wrapper-bottom .header.content {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    /* ~double the previous near-flush top gap above logo / signup row */
    padding-top: 10px !important;
  }

  /* Magento clearfix pseudos become flex items and inset the row — drop them */
  .header-wrapper-bottom .header.content::before,
  .header-wrapper-bottom .header.content::after {
    display: none !important;
    content: none !important;
  }

  /* Full-width row so logo/cart share the same L/R edges as .page-main content */
  .header-main-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    gap: clamp(4px, 0.6vw, 12px);
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .header-wrapper-bottom .header-main-menu > .toggle-nav {
    display: none !important;
  }

  body .header-main-menu .logo,
  .header-main-menu .logo {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
  }

  .page-header .logo .main-logo {
    padding-top: 0 !important;
  }

  .header-main-menu .logo img,
  .page-header .logo .main-logo {
    max-height: clamp(26px, 1.6vw + 14px, 38px) !important;
    width: auto !important;
    height: auto !important;
  }

  .header-wrapper-bottom .header-main-menu .nav-sections,
  .header-wrapper-bottom .menu-container {
    display: flex !important;
    /* Stretch to full .header-main-menu height — align-items:center left the
       nav chain ~14px tall inside a ~28px bar, so Products :hover died in the gap. */
    align-self: stretch !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: auto !important;
    flex: 1 1 auto !important;
    float: none !important;
    min-width: 0 !important;
    /* Must stay visible — overflow:hidden clips Products/Support (Kundendienst) dropdowns */
    overflow: visible !important;
  }

  /* Stretch every wrapper between nav-sections and the link list.
     Include .static-wrap — without it the menu UL stays ~14px tall inside a
     ~28px bar and the Products mega menu flickers at the panel seam. */
  .header-wrapper-bottom .header-main-menu .nav-sections > *,
  .header-wrapper-bottom .header-main-menu .nav-sections .nav-sections-items,
  .header-wrapper-bottom .header-main-menu .nav-sections .nav-sections-item-content,
  .header-wrapper-bottom .header-main-menu .nav-sections .menu-container,
  .header-wrapper-bottom .header-main-menu .nav-sections .block-static-block,
  .header-wrapper-bottom .header-main-menu .nav-sections .cdz-main-menu,
  .header-wrapper-bottom .header-main-menu .nav-sections .cdz-slideshow,
  .header-wrapper-bottom .header-main-menu .nav-sections .cdz-form-left,
  .header-wrapper-bottom .header-main-menu .nav-sections .static-wrap,
  .header-wrapper-bottom .header-main-menu .nav-sections .cdz-horizontal-menu,
  .header-wrapper-bottom .header-main-menu .nav-sections .cdz-menu {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
    align-items: stretch !important;
    height: 100% !important;
  }

  /*
   * Codazon MegaMenu injects an empty twin UL.overflow-items-container (display:none).
   * The .groupmenu { display:flex !important } rule below used to match that twin too,
   * forcing it visible and stealing ~50% of the nav width → labels squeezed to ~25px
   * with centered overflow:hidden (looks like "oduc / rppo / tor …").
   * Keep the overflow twin collapsed unless Codazon pages it in (show-page).
   */
  .page-header .header-main-menu .cdz-horizontal-menu > ul.groupmenu.overflow-items-container {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
  .page-header .header-main-menu .static-wrap.has-items-overflowed > .cdz-horizontal-menu > ul.groupmenu.overflow-items-container.show-page {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Spread nav items across the available header space (primary UL only) */
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu > .groupmenu:not(.overflow-items-container) {
    display: flex !important;
    /* stretch so each li fills the bar; links stay vertically centered via li flex */
    align-items: stretch !important;
    align-self: stretch !important;
    height: 100% !important;
    justify-content: space-evenly !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: clamp(2px, 0.45vw, 14px);
    /* Visible so .groupmenu-drop can paint below the bar */
    overflow: visible !important;
  }

  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.level-top:not(.account-link-mb):not(.my-account-link):not(.logout-link) {
    display: inline-flex !important;
    align-items: center !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    float: none !important;
    /* Allow shrink so mid-width viewports don't overflow onto Log in */
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Ellipsis on labels if the row is tight — clip the END, not the middle */
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.level-top > a.menu-link {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    justify-content: flex-start !important;
  }

  /*
   * Hide Codazon parent carets (FontAwesome \f107 on li.level0.parent::after).
   * Desktop opens on hover — no chevron needed. When Products is position:static
   * (megamenu pins to header), a visible ::after escapes to the header edge and
   * looks like a stray arrow next to Log in; Support's caret sits between labels.
   */
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent::after,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent:after,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent:hover::after,
  .page-header .menu-container .cdz-main-menu .cdz-horizontal-menu li.level0.parent::after,
  .page-header .menu-container .cdz-main-menu .cdz-horizontal-menu li.level0.parent:after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
  }

  /*
   * Compact header: theme CSS still places .groupmenu-drop at top:60px, but the
   * nav row is ~35px tall → ~25–45px dead gap. Crossing that gap kills :hover and
   * the menu "jumps away". Sit the panel on the parent bottom + pad the bridge.
   *
   * EXCEPTION: Products megamenu (.prod / .product-top-menu) must stay
   * position:static so the drop's left/right:0 pins to .header-main-menu
   * (full width). position:relative here collapses the drop to ~70px (li width).
   */
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent:not(.prod):not(.product-top-menu) {
    position: relative !important;
  }
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent.prod,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent.product-top-menu,
  .page-header .menu-container .cdz-main-menu .cdz-horizontal-menu li.level0.parent.prod,
  .page-header .menu-container .cdz-main-menu .cdz-horizontal-menu li.level0.parent.product-top-menu {
    position: static !important;
    /* Full-height hover target — drop pins to .header-main-menu (top:100%),
       so a shrink-wrapped text link leaves a dead gap that closes the menu. */
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
  }

  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent > .groupmenu-drop {
    /* Overlap the nav bar by 1px so the seam cannot toggle :hover (flicker) */
    top: calc(100% - 1px) !important;
    margin-top: 0 !important;
    /* Invisible bridge so the pointer can reach the panel without leaving :hover */
    padding-top: 8px !important;
    box-sizing: border-box !important;
    /* Keep the blue accent on the panel content, not above the bridge */
    border-top: none !important;
    /* Paint padding too — transparent padding + background-clip:padding-box
       made the bridge miss pointer hits and flash the menu open/closed */
    background-clip: border-box !important;
    /* Codazon .slidedown uses 0.1s opacity/visibility — kills the edge flicker */
    transition: none !important;
    -webkit-transition: none !important;
  }

  /*
   * Codazon .cdz-translate defaults to translateY(20px) on closed drops. That offset
   * plus the compact header left a ~27px dead zone under Products — menu vanished
   * before the pointer reached any product. Pin Products (and all parent drops) at 0
   * even before :hover so the panel appears flush under the bar.
   */
  .page-header .header-main-menu .cdz-horizontal-menu.cdz-translate li.level0.parent > .groupmenu-drop,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent.prod > .groupmenu-drop,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent.product-top-menu > .groupmenu-drop {
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
  }

  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent > .groupmenu-drop > .item:first-child,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent > .groupmenu-drop > li.item:first-child {
    border-top: 3px solid #13aff0;
  }

  .page-header .header-main-menu .cdz-horizontal-menu.cdz-translate li.level0.parent:hover > .groupmenu-drop,
  .page-header .header-main-menu .cdz-horizontal-menu.cdz-translate li.level0.parent:focus-within > .groupmenu-drop {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    display: block !important;
    transition: none !important;
    -webkit-transition: none !important;
  }

  /* Keep mega panel above homepage hero / page content at the bottom edge */
  .page-header {
    z-index: 300 !important;
  }

  /*
   * INTENTIONAL two-UI account pattern (do not remove megamenu items from DB):
   * - Desktop (>=769px): .customer-btn-wrap buttons (Log in / Sign up). Megamenu
   *   items .account-link-mb, .my-account-link, .logout-link are hidden below.
   * - Mobile (<=768px): .customer-btn-wrap buttons hidden (customizes.css); megamenu
   *   items are the mobile account UI (logged-out: account-link-mb; logged-in: my-account + logout).
   * Selectors must beat li.level0.level-top { display: inline-flex } (0,6,1).
   */
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.level-top.account-link-mb,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.level-top.my-account-link,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.level-top.logout-link,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.account-link-mb,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.my-account-link,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.logout-link {
    display: none !important;
  }

  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0 > a.menu-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: clamp(2px, 0.35vw + 1px, 14px) !important;
    padding-right: clamp(2px, 0.35vw + 1px, 14px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* Match Log in / Sign up button text size */
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0 > a.menu-link span {
    font-size: clamp(10px, 0.55vw + 6px, 16px) !important;
  }

  .header-wrapper-bottom .customer-btn-wrap {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0;
    margin-left: 8px !important;
    gap: clamp(2px, 0.35vw, 8px);
    z-index: 2;
  }

  .header-wrapper-bottom .login-btn,
  .header-wrapper-bottom .signup-btn {
    font-size: clamp(10px, 0.65vw + 7px, 16px) !important;
    padding: clamp(2px, 0.2vw + 2px, 5px) clamp(5px, 0.75vw + 3px, 15px) !important;
    margin-right: 0 !important;
    line-height: 1.2 !important;
    border-radius: clamp(3px, 0.3vw, 5px);
  }

  html body .page-header .header-wrapper-bottom .header.content .minicart-wrapper {
    position: static !important;
    top: auto !important;
    right: auto !important;
    flex-shrink: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: auto !important;
    /* Theme default padding-top:15px drops the basket below Log in / Sign up */
    padding: 0 !important;
    z-index: 2;
  }

  /* Icon only — hide "Cart" label / price text */
  html body .page-header .header-wrapper-bottom .minicart-wrapper .cart_text,
  html body .page-header .header-wrapper-bottom .minicart-wrapper .action.showcart .text,
  html body .page-header .header-wrapper-bottom .minicart-wrapper .action.showcart .price-label {
    display: none !important;
  }

  html body .page-header .header-wrapper-bottom .header.content .minicart-wrapper .action.showcart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    /* Anchor the absolutely-positioned .counter.qty badge to the cart icon.
       Without this the wrapper is position:static (set above) and the badge
       falls back to a far-left positioned ancestor. */
    position: relative !important;
    top: auto !important;
    line-height: 1 !important;
    padding: 0 !important;
    align-self: center !important;
  }

  html body .page-header .header-wrapper-bottom .header.content .minicart-wrapper .action.showcart::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(17px, 1vw + 10px, 26px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }
}

/* Mid desktop: shrink logo a touch so 7 nav links + auth fit without overlap */
@media (min-width: 769px) and (max-width: 1180px) {
  .header-main-menu .logo img,
  .page-header .logo .main-logo {
    max-height: clamp(22px, 1.2vw + 12px, 32px) !important;
  }
}

@media (max-width: 768px) {
  .toggle-nav {
    display: flex !important;
    align-items: center !important;
  }

  .header-wrapper-bottom .header.content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 10px 12px !important;
  }

  .header-wrapper-bottom .header-main-menu {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    gap: 8px;
  }

  .header-main-menu .toggle-nav {
    grid-column: 1;
    justify-self: start !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    position: relative !important;
    width: auto !important;
    max-width: max-content !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 6px 12px 6px 10px !important;
    margin-left: 0 !important;
    border: 2px solid #8b8b8b !important;
    border-radius: 30px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  .header-main-menu .toggle-nav .action.nav-toggle,
  .header-main-menu .toggle-nav .nav-toggle {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 20px !important;
    flex-shrink: 0 !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .header-main-menu .toggle-nav .nav-toggle > span {
    position: relative !important;
    display: block !important;
    width: 18px !important;
    height: 14px !important;
    overflow: visible !important;
  }

  .header-main-menu .toggle-nav .nav-toggle::before {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 18px !important;
    height: 2px !important;
  }

  .header-main-menu .toggle-nav .nav-toggle span::before {
    position: absolute !important;
    top: 6px !important;
    left: 0 !important;
    width: 18px !important;
    height: 2px !important;
  }

  .header-main-menu .toggle-nav .nav-toggle span::after {
    position: absolute !important;
    top: 12px !important;
    left: 0 !important;
    width: 18px !important;
    height: 2px !important;
  }

  .header-main-menu .toggle-nav .toggle-nav-label {
    position: static !important;
    top: auto !important;
    left: auto !important;
    font-size: 15px !important;
    line-height: 1 !important;
    color: #8b8b8b !important;
    white-space: nowrap !important;
  }

  /* Keep Magento's off-canvas panel geometry (real width) even when closed.
     Do NOT force width/height:0 — that breaks Codazon MegaMenu init so
     Products/Support never get .dropdown-toggle and submenus cannot open.
     Take the panel out of the header grid so it does not affect logo centering. */
  .header-main-menu .nav-sections {
    position: fixed !important;
    width: calc(100% - 54px) !important;
    max-width: calc(100% - 54px) !important;
    min-width: 0 !important;
    height: 100% !important;
    left: calc(-1 * (100% - 54px)) !important;
    top: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 99 !important;
    grid-column: 1;
    grid-row: 1;
    pointer-events: none;
  }

  html.nav-open .header-main-menu .nav-sections,
  html.nav-open.nav-before-open .header-main-menu .nav-sections {
    left: 0 !important;
    pointer-events: auto;
  }

  /* Mobile submenu expand control (Codazon injects this; style if present) */
  .header-main-menu .nav-sections .dropdown-toggle {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 2 !important;
    cursor: pointer !important;
  }

  body .header-main-menu .logo,
  .header-main-menu .logo {
    grid-column: 2;
    justify-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .page-header .logo .main-logo {
    padding-top: 0 !important;
    max-width: 100% !important;
  }

  /* Keep the logo compact on mobile so equal side columns leave room for the
     menu pill; this is what lets the logo sit at the true page centre.
     The clamp shrinks the logo only on narrow phones: below ~384px the fixed
     160px logo would push the centred column wide enough that the equal side
     columns fall below the Menu pill's width, making the pill overlap the logo.
     224px reserves the pill (~92px) + cart (~36px) + gaps + padding on both
     sides so the pill and logo never collide; it caps at 160px on wider screens. */
  .header-main-menu .logo img,
  .page-header .logo .main-logo img {
    max-width: clamp(90px, calc(100vw - 224px), 160px) !important;
    width: auto !important;
    height: auto !important;
  }

  /* Buttons sit as sibling of .header-main-menu, not inside it */
  .header-wrapper-bottom .customer-btn-wrap,
  .header-main-menu .customer-btn-wrap {
    display: none !important;
  }

  /*
   * customizes.css hides .account-link-mb from min-width:768px, which leaves a
   * 768px dead zone (hamburger on, desktop buttons hidden, menu auth still
   * none). Force the megamenu auth item visible in the mobile drawer.
   */
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.level-top.account-link-mb,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.account-link-mb {
    display: list-item !important;
  }

  html body .page-header .header-wrapper-bottom .header.content .minicart-wrapper,
  html body .page-header .header-main-menu .minicart-wrapper,
  html body .header-wrapper-bottom .minicart-wrapper,
  body .minicart-wrapper {
    grid-column: 3;
    justify-self: end !important;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 36px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: auto !important;
  }

  html body .page-header .header-wrapper-bottom .minicart-wrapper .cart_text,
  html body .page-header .header-wrapper-bottom .minicart-wrapper .action.showcart .text,
  html body .page-header .header-wrapper-bottom .minicart-wrapper .action.showcart .price-label {
    display: none !important;
  }

  html body .page-header .header-wrapper-bottom .minicart-wrapper .action.showcart,
  .minicart-wrapper .action.showcart {
    position: relative !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html body .page-header .header-wrapper-bottom .minicart-wrapper .action.showcart::before,
  .minicart-wrapper .action.showcart::before {
    min-height: 0 !important;
    padding-top: 0 !important;
    line-height: 1 !important;
  }
}

/* Space under logo / Log in / Sign up before page content (all pages) */
@media (min-width: 769px) {
  .header-wrapper-bottom {
    padding-bottom: 20px !important;
  }

  .cms-index-index .mainBanner_top,
  .cms-index-index .mainBanner,
  .cms-home .mainBanner_top,
  .cms-home .mainBanner {
    margin-top: 16px;
  }
}