/* HEADER and overlay MENU — ported from reference/css/components.css.
   DOM differences (selectors only): the menu is core/navigation (the pill is its list, links are
   .wp-block-navigation-item__content), the overlay is a navigation-overlay template part, the logo is
   core/site-logo, and the open button is the one core/navigation prints (see inc/block-extensions.php). */
.lm-header { border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line); }
.lm-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--60);
  min-height: 88px;
}
.lm-header__logo { display: block; flex-shrink: 0; }
.lm-header__logo a { display: block; }
/* core/site-logo gives its link border-radius: inherit, which beats the base :focus-visible radius */
.wp-block-site-logo.lm-header__logo a:focus-visible { border-radius: var(--wp--custom--radius--sm); }
/* site-logo sets .is-default-size img to 120px wide: match its specificity to keep the reference's 40px height */
.wp-block-site-logo.is-default-size.lm-header__logo img { width: auto; height: 40px; }
/* core: .wp-block-site-logo a, .wp-block-site-logo img { border-radius: inherit } would round the image with the focus radius */
.wp-block-site-logo.lm-header__logo img { border-radius: 0; }
.lm-header__actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.lm-header__secure {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--secondary);
}
.lm-header__secure .lm-icon { color: var(--wp--preset--color--success); }

.lm-nav > .wp-block-navigation__container {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--10);
  padding: var(--wp--preset--spacing--10);
  background: var(--wp--preset--color--fill-strong);
  border-radius: var(--wp--custom--radius--pill);
}
/* core: .wp-block-navigation .wp-block-navigation-item { background-color: inherit } would paint the pill twice */
.lm-nav > .wp-block-navigation__container > .wp-block-navigation-item { background-color: transparent; }
.lm-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  display: flex; align-items: center; min-height: var(--wp--custom--control--sm);
  padding-inline: var(--wp--preset--spacing--50);
  border-radius: var(--wp--custom--radius--pill);
  font-size: var(--wp--preset--font-size--ui); font-weight: var(--wp--custom--font-weight--semibold);
  line-height: var(--wp--custom--line-height--control);
  color: var(--wp--preset--color--secondary);
  transition: color var(--wp--custom--motion--fast) ease, background-color var(--wp--custom--motion--fast) ease;
  /* core: .wp-block-navigation .wp-block-navigation-item__content { z-index: 1 }. In the flex item that raises the
     link above the page: with a sticky element below (the product gallery) Chromium moves the links to their own
     layer and paints their text with greyscale antialiasing. The reference link has no z-index. */
  z-index: auto;
}
.lm-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--contrast); }
.lm-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] {
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink);
  font-weight: var(--wp--custom--font-weight--bold);
}

.lm-cart-link__count {
  position: absolute; top: -4px; right: -4px;
  display: grid; place-items: center; min-width: 18px; height: 18px; padding-inline: var(--wp--preset--spacing--10);
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink);
  border-radius: var(--wp--custom--radius--pill);
  font-size: var(--wp--preset--font-size--tiny); font-weight: var(--wp--custom--font-weight--extrabold); line-height: 1;
}
/* WordPress: the count is always in the markup (the cart store fills it in) and hidden while the cart is empty;
   display: grid above would beat the hidden attribute, as .lm-menu[hidden] does in the reference. */
.lm-cart-link__count[hidden] { display: none; }

/* The menu button is a second core/navigation (overlay only) with the class lm-menu-toggle on both its <nav> and
   its open button. core: .wp-block-navigation__responsive-container-open svg { fill: currentColor; width: 24px } */
.lm-header .lm-menu-toggle { display: none; }
.wp-block-navigation__responsive-container-open.lm-menu-toggle svg { width: 20px; height: 20px; fill: none; }

/* Overlay menu: the navigation-overlay template part. Core's open container is the reference's .lm-menu panel. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open { background: var(--wp--preset--color--base); }
/* core/navigation-overlay-close styles (24px icon with fill, 2px focus offset, no border) vs the reference's .lm-icon-btn */
.wp-block-navigation-overlay-close.lm-icon-btn { border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line-strong); }
.wp-block-navigation-overlay-close.lm-icon-btn:hover { border-color: var(--wp--preset--color--accent-line); }
.wp-block-navigation-overlay-close.lm-icon-btn:focus-visible { outline-offset: 3px; }
.wp-block-navigation-overlay-close.lm-icon-btn svg { width: 20px; height: 20px; fill: none; }
.lm-menu__bar { display: flex; align-items: center; justify-content: space-between; min-height: 88px; }
.lm-menu__bar .wp-block-site-logo.is-default-size img { width: auto; height: 40px; }
/* core lays the menu out in a flex row (.wp-block-navigation, __container, -item); the reference list is a block */
.lm-menu__nav.wp-block-navigation { display: block; }
.lm-menu__nav .wp-block-navigation-item { display: block; }
.lm-menu__nav .wp-block-navigation__container { display: block; border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line); }
.lm-menu__nav .wp-block-navigation-item__content {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40);
  padding-block: var(--wp--preset--spacing--60);
  border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--title-lg); font-weight: var(--wp--custom--font-weight--medium);
  line-height: var(--wp--custom--line-height--title); letter-spacing: var(--wp--custom--letter-spacing--title);
}
.lm-menu__nav .wp-block-navigation-item__content .lm-icon { color: var(--wp--preset--color--accent); }
.lm-menu__nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--accent); }

@media (max-width: 1023px) {
  .lm-header__inner { min-height: 72px; }
  .lm-menu__bar { min-height: 72px; }
  /* core's .is-layout-flex { display: flex } is printed later with the same specificity */
  .lm-nav.wp-block-navigation { display: none; }
  .lm-header .lm-menu-toggle { display: inline-flex; }
}
@media (max-width: 639px) {
  .lm-header__inner { gap: var(--wp--preset--spacing--30); }
  .lm-header__actions { gap: var(--wp--preset--spacing--20); }
  .lm-header__cta { padding-inline: var(--wp--preset--spacing--40); }
  .lm-header__cta .lm-icon { display: none; }
}