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

.mobile-nav-close,
.mobile-nav-close-bar {
  display: none;
}

@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;
    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 */
  .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).
   * (Same fix as betachek_uk — Ellyana was missing it; intermittent while browsing.)
   */
  .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;
    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).
   * Same as betachek_uk / EU+NO storefront: when Products is position:static
   * a visible ::after escapes to the header edge (stray arrow by Log in).
   */
  .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 the Products
   * label width (~70–170px) and tiles stack vertically — IT/EU/NO regression.
   * Ported from betachek_uk header-responsive.css (EU+NO storefront fix).
   */
  .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;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
  }
  /* Stretch the menu chain to the header row. align-self:stretch on Products
     alone does nothing while .cdz-main-menu / .groupmenu shrink-wrap the
     19px label — that leaves a ~9px dead gap above the panel. */
  .page-header .header-main-menu .cdz-main-menu,
  .page-header .header-main-menu .cdz-menu,
  .page-header .header-main-menu .cdz-menu .groupmenu {
    align-self: stretch !important;
    display: flex !important;
    align-items: stretch !important;
    height: auto !important;
  }
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.level-top {
    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 {
    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;
    background-clip: border-box !important;
    transition: none !important;
    -webkit-transition: none !important;
  }

  .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:not(.prod):not(.product-top-menu) > .groupmenu-drop > .item:first-child,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent:not(.prod):not(.product-top-menu) > .groupmenu-drop > li.item:first-child {
    border-top: 3px solid #13aff0;
  }
  /* Products tiles: the first item is the starter image — do not put the accent on that photo. */
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent.prod > .groupmenu-drop > .item:first-child,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent.product-top-menu > .groupmenu-drop > .item:first-child,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent.prod > .groupmenu-drop > li.item:first-child,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent.product-top-menu > .groupmenu-drop > li.item:first-child {
    border-top: none !important;
  }

  .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;
  }
  /* Product tiles: one row across the header, image ON TOP, label BELOW.
   * Theme CSS absolute-centers .groupdrop-banner_block over the padded link,
   * so Italian labels ("Kit iniziale C50") sit on the photo. */
  .page-header .header-main-menu .cdz-horizontal-menu.cdz-translate li.level0.product-top-menu:hover > .groupmenu-drop,
  .page-header .header-main-menu .cdz-horizontal-menu.cdz-translate li.level0.product-top-menu:focus-within > .groupmenu-drop,
  .page-header .header-main-menu .cdz-horizontal-menu.cdz-translate li.level0.prod:hover > .groupmenu-drop,
  .page-header .header-main-menu .cdz-horizontal-menu.cdz-translate li.level0.prod:focus-within > .groupmenu-drop {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    /* Visual panel sits flush under the header. Hover bridge is ::before
       (below), not a negative margin — that pulled the window over the nav
       and left a tall empty band under the images. */
    padding-top: 8px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  /* Invisible hit-box above the panel so the cursor can leave Products
     without dropping :hover. Does not move the visible window. */
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent.product-top-menu > .groupmenu-drop::before,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent.prod > .groupmenu-drop::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -18px !important;
    height: 18px !important;
    background: transparent !important;
    pointer-events: auto !important;
  }
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu > .groupmenu-drop > .item.level1,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod > .groupmenu-drop > .item.level1 {
    float: none !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    height: auto !important;
    overflow: visible !important;
  }
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu > .groupmenu-drop > .item.level1 > .groupdrop-banner_block,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod > .groupmenu-drop > .item.level1 > .groupdrop-banner_block {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 0 2px !important;
    width: 100% !important;
    height: 110px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu > .groupmenu-drop > .item.level1 > .groupdrop-banner_block a,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod > .groupmenu-drop > .item.level1 > .groupdrop-banner_block a {
    top: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    height: 100% !important;
  }
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu img.groupdrop-banner-pos,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod img.groupdrop-banner-pos {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    height: 110px !important;
    width: auto !important;
    max-width: 96% !important;
    max-height: 110px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu > .groupmenu-drop > .item.level1,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod > .groupmenu-drop > .item.level1 {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* Flat_lancet-min1.jpg is 30×120 — sits high unless nudged down into the tile */
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu img[src*="Flat_lancet"],
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod img[src*="Flat_lancet"] {
    height: 78px !important;
    max-height: 78px !important;
    margin-top: auto !important;
    align-self: flex-end !important;
    object-position: center bottom !important;
  }
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu > .groupmenu-drop > .item.level1 > .item.level2,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu > .groupmenu-drop > .item.level1.row .item.level2,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu > .groupmenu-drop .item.level2,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod > .groupmenu-drop > .item.level1 > .item.level2,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod > .groupmenu-drop > .item.level1.row .item.level2,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod > .groupmenu-drop .item.level2 {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    flex: 0 0 auto !important;
  }
  /* Beat customizes.css .prod 142px tile min-height (0,13,1). */
  .page-header .header-main-menu .menu-container .cdz-main-menu .groupmenu > li.level0.prod > .groupmenu-drop .item.level1.prod-menu.row .item.level2,
  .page-header .header-main-menu .menu-container .cdz-main-menu .groupmenu > li.level0.product-top-menu > .groupmenu-drop .item.level1.prod-menu.row .item.level2,
  .page-header .header-main-menu .menu-container .cdz-main-menu .groupmenu > li.level0.product-top-menu > .groupmenu-drop .item.level1.row .item.level2 {
    min-height: 0 !important;
    height: auto !important;
  }
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu > .groupmenu-drop .item.level2 a,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu > .groupmenu-drop .item.level3 a,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu > .groupmenu-drop > .item.level1.row .item.level2 a,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu > .groupmenu-drop > .item.level1.row .item.level2 .item.level3 a,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.product-top-menu > .groupmenu-drop .groupmenu-nondrop > .item.level3 .menu-link,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod > .groupmenu-drop .item.level2 a,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod > .groupmenu-drop .item.level3 a,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod > .groupmenu-drop > .item.level1.row .item.level2 a,
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.prod > .groupmenu-drop .groupmenu-nondrop > .item.level3 .menu-link {
    top: 0 !important;
    padding: 4px 8px 6px !important;
    padding-top: 4px !important;
    min-height: 0 !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    display: block !important;
    text-align: center !important;
  }
  /* Support (and other text dropdowns): Italian labels must not clip the panel edge */
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent:not(.prod):not(.product-top-menu) > .groupmenu-drop {
    min-width: 260px !important;
    max-width: min(420px, 90vw) !important;
  }
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0.parent:not(.prod):not(.product-top-menu) > .groupmenu-drop a {
    white-space: normal !important;
    overflow: visible !important;
    word-break: normal !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;
  }

  /* Same size as Accedi / Log in — do not shrink the nav below 14px; there is room. */
  .page-header .header-main-menu .cdz-main-menu .cdz-horizontal-menu li.level0 > a.menu-link span {
    font-size: clamp(14px, 0.65vw + 7px, 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(14px, 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(100px, 1fr) minmax(0, auto) minmax(100px, 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: hidden !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: hidden !important;
  }

  .header-main-menu .toggle-nav .nav-toggle > span {
    position: relative !important;
    display: block !important;
    width: 18px !important;
    height: 14px !important;
    overflow: hidden !important;
    font-size: 0 !important;
    color: transparent !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;
  }

  /* Menu drawer shifts .page-wrapper right, taking the Menu pill off-screen.
     Keep a close control in the 54px gutter so the overlay can be dismissed. */
  .header-main-menu > .mobile-nav-close {
    display: none;
    position: fixed;
    top: 10px;
    right: 5px;
    z-index: 10001;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    grid-column: 1;
    grid-row: 1;
  }
  html.nav-open .header-main-menu > .mobile-nav-close,
  html.nav-open.nav-before-open .header-main-menu > .mobile-nav-close {
    display: flex !important;
  }
  .header-main-menu > .mobile-nav-close .mobile-nav-close-x {
    font-size: 32px;
    line-height: 1;
    color: #333;
    font-weight: 300;
  }
  .header-main-menu .nav-sections .mobile-nav-close-bar {
    display: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    color: #333;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
  }
  html.nav-open .header-main-menu .nav-sections .mobile-nav-close-bar {
    display: block !important;
  }

  /* 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;
    min-width: 0 !important;
    max-width: 100% !important;
  }

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

  /* Shrink the wordmark to the centre column. A fixed 160px logo on phones
     narrower than ~384px makes the side columns smaller than the Menu pill,
     so the pill covers the B/E. min(160px, 100%) follows the column instead. */
  .header-main-menu .logo img,
  .page-header .logo .main-logo img {
    max-width: min(160px, 100%) !important;
    width: auto !important;
    height: auto !important;
  }

  .header-main-menu .customer-btn-wrap {
    display: none !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;
  }

  .cms-index-index .header-wrapper-bottom,
  .cms-home .header-wrapper-bottom {
    padding-bottom: 16px !important;
  }
}

/* Homepage hero: space between header and Multi Award / main banner (desktop) */
@media (min-width: 769px) {
  .cms-index-index .header-wrapper-bottom,
  .cms-home .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;
  }
}