.header-action-bar {
  position: relative;
  display: flex;
  flex: 0;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: var(--header-column-gap);
  order: 40;
  padding-block: 12px;

  /* ✅ Critical: make SVG icons + cart bubble use the same color as header text */
  color: rgb(var(--color-text));
}

@media (max-width: 959px) {
  .header-action-bar {
    display: flex;
    column-gap: var(--header-column-gap-mobile);
  }
}

.header-action-bar>* {
  position: relative;
  z-index: calc(var(--header-nav-dropdown-menu-z-index) + 1);
}

@media (max-width: 959px) {
  .header-action-bar {
    flex: 1;
    padding: 0;
  }
}

.header__container[layout="center_logo_wrap_menu"] .header-action-bar {
  flex: 1;
}

/* ------------------------------------------
   ✅ ICON BUTTONS (fix "icon in DOM but invisible")
------------------------------------------ */
.header-action-bar .button--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 28px;
  height: 28px;

  /* ensure no theme button colors override icon visibility */
  background: transparent;
  border: 0;
  padding: 0;

  /* force icon color */
  color: inherit;
}

.header-action-bar .button--icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* If icons use fill/stroke attributes, keep them synced with currentColor */
.header-action-bar svg [fill]:not([fill="none"]) {
  fill: currentColor;
}

.header-action-bar svg [stroke]:not([stroke="none"]) {
  stroke: currentColor;
}

/* Also ensure anything inside the icon button inherits color (cart bubble often nests) */
.header-action-bar .button--icon * {
  color: inherit;
}

.header-action-bar .button--hidden {
  display: none;
}

@media (max-width: 959px) {
  .header-action-bar .button--hidden-mobile {
    display: none;
  }
}

@media (min-width: 960px) {
  .header-action-bar .button--hidden-desktop {
    display: none;
  }
}

.header-action-bar .header-action-bar__search {
  margin-inline-end: 0;
}

/* ------------------------------------------
   LEFT / RIGHT POSITIONING (keep existing behavior)
------------------------------------------ */
.header-action-bar.left {
  display: none;
  grid-area: action-bar-left;
  order: 0;
  margin-inline-start: 0;
}

.header-action-bar.left .header-action-bar__search {
  display: none;
}

.header-action-bar.right {
  grid-area: action-bar-right;
  justify-content: end;
  margin-inline-start: auto;
}

/* show left action bar when drawer or center layouts */
[type="drawer"] .header-action-bar.left,
[layout^="center_logo_"] .header-action-bar.left {
  display: flex;
}

[layout="center_logo_wrap_menu"] .header-action-bar.left .header-action-bar__search {
  display: inline-flex;
}

[layout="center_logo_wrap_menu"] .header-action-bar.right .header-action-bar__search {
  display: none;
}

@media (max-width: 959px) {
  .header-action-bar.right .header-action-bar__menu {
    display: none;
  }

  .header-action-bar.left {
    display: flex;
  }

  [layout^="left_logo_"] .header-action-bar.left {
    flex: 0;
  }

  [layout^="center_logo_"] .header-action-bar.left .header-action-bar__search {
    display: inline-flex;
  }

  [layout^="center_logo_"] .header-action-bar.right .header-action-bar__search {
    display: none;
  }
}

/* =========================================================
   ✅ RIGHT-SIDE DESKTOP MENU (matches left nav, desktop-only)
   ========================================================= */

/* default hidden unless desktop */
.header-action-bar__desktop-menu {
  display: none;
}

@media (min-width: 960px) {
  .header-action-bar.right .header-action-bar__desktop-menu {
    display: block;
  }

  .header-action-bar__desktop-menu-list {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 36px);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .header-action-bar__desktop-menu-item {
    display: flex;
    align-items: center;
  }

  .header-action-bar__desktop-menu-link {
    position: relative;
    display: inline-flex;
    align-items: center;

    padding: 12px 0;
    white-space: nowrap;

    /* match the left nav vibe */
    font-family: var(--font-nav-family);
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;

    color: rgb(var(--color-text));
    text-decoration: none;
  }

  /* underline hover like main nav */
  .header-action-bar__desktop-menu-link::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: rgb(var(--color-text));
    transition: width 200ms ease-in;
  }

  .header-action-bar__desktop-menu-link:hover::after,
  .header-action-bar__desktop-menu-link:focus-visible::after {
    width: 100%;
  }
}