/* ==========================================================================
   GBV România — header.css (chunk 2; PORT_MAPPING §5)
   Astra's Header Builder markup restyled to SiteHeader.dc.html. Every
   selector is under #masthead (both headers) or #ast-mobile-popup (the
   off-canvas). Token variables only; the header geometry variables live in
   base.css §0. Breakpoints follow Astra's inclusive tablet switch: mobile
   header ≤ 921.99, desktop header ≥ 922 (PORT_MAPPING §0 amendment).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Shell: sticky at minus the top bar, glass surface, hairline, colour bar
   -------------------------------------------------------------------------- */
#masthead {
  position: sticky;
  top: calc(-1 * var(--header-top));
  z-index: var(--z-header);
  overflow-x: clip;
  background: transparent;
  isolation: isolate;
}
.admin-bar #masthead {
  top: calc(var(--wp-admin--admin-bar--height, 32px) - var(--header-top));
}

/* The translucent white lives on a pseudo-element, so no ancestor of the
   fixed search sheet carries a backdrop-filter (which would trap it). */
#masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  background: var(--header-glass);
  border-bottom: var(--stroke-hairline) solid var(--border-subtle);
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
  pointer-events: none;
}

/* Category colour bar (5 px, over the hairline) on category archives and
   single products; body class gbv-cat-<slug> from inc/header.php, colour
   from the shared category palette (base.css §14) inherited from body. */
body[class*="gbv-cat-"] #masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tab-bar);
  background: var(--gbv-cat-bg, transparent);
  pointer-events: none;
}

/* Rows: Astra's min-heights come from the Customizer (THEME.md); the exact
   heights are pinned here so --header-h stays true. */
#masthead .ast-above-header-bar,
#masthead .ast-primary-header-bar,
#masthead .ast-below-header-bar {
  background: transparent;
  border: 0;
}
#masthead .ast-above-header-bar {
  background: var(--surface-inverse);
  color: var(--text-on-brand);
}
#masthead .site-above-header-wrap {
  box-sizing: border-box;
  min-height: var(--header-top);
  height: var(--header-top);
}
#masthead .site-primary-header-wrap {
  box-sizing: border-box;
  min-height: var(--header-main);
  height: var(--header-main);
}
#masthead .site-below-header-wrap {
  box-sizing: border-box;
  min-height: var(--header-nav);
  height: var(--header-nav);
}
#masthead .ast-builder-grid-row {
  height: 100%;
}
#masthead .site-header-section > * {
  padding: 0;
  margin: 0;
}
#masthead .ast-builder-html-element p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   1. Top bar: phone, email, social (social hidden below 922, B6)
   -------------------------------------------------------------------------- */
#masthead .site-above-header-wrap .ast-builder-html-element {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--topbar-gap);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: 1;
}
#masthead .gbv-contact-links {
  display: inline-flex;
  align-items: center;
  gap: var(--topbar-gap);
}
#masthead .gbv-contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--header-top);
  color: var(--text-on-brand);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-base) ease;
}
#masthead .gbv-contact-link:hover,
#masthead .gbv-contact-link:focus-visible {
  color: var(--gbv-orange-peach);
}
#masthead .gbv-contact-link:active {
  color: var(--color-accent);
}
#masthead .gbv-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
#masthead .gbv-social li {
  margin: 0;
  display: inline-flex;
}
#masthead .gbv-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-top);
  color: var(--text-on-brand);
  transition: color var(--motion-base) ease;
}
#masthead .gbv-social__link:hover,
#masthead .gbv-social__link:focus-visible {
  color: var(--gbv-orange-peach);
}
#masthead .gbv-social .gbv-icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
}
@media (max-width: 921.99px) {
  #masthead .site-above-header-wrap .ast-builder-html-element {
    font-size: var(--text-xs);
  }
  #masthead .gbv-social {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   2. Logo and wordmark (inc/header.php, astra_logo filter)
   -------------------------------------------------------------------------- */
#masthead .site-branding,
#masthead .ast-site-identity {
  padding: 0;
  margin: 0;
  line-height: 1;
}
#masthead .gbv-logo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-2) + var(--space-1) / 2);      /* 10 px, SiteHeader */
  text-decoration: none;
  flex: none;
}
#masthead .gbv-logo__mark {
  display: block;
  height: var(--logo-h);
  width: auto;
}
#masthead .gbv-logo__wordmark {
  font-family: var(--font-headline);
  font-weight: var(--fw-bold);
  font-size: var(--text-subhead);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--color-accent);
  position: relative;
  top: var(--stroke-bold);                             /* 2 px baseline nudge, SiteHeader */
}
@media (max-width: 921.99px) {
  #masthead .gbv-logo {
    gap: var(--space-2);
  }
  #masthead .gbv-logo__wordmark {
    font-size: var(--text-lg);
    top: calc(-1 * var(--stroke-bold));               /* −2 px, SiteHeader mobile */
  }
}

/* --------------------------------------------------------------------------
   3. Product search form (shared by the desktop field and the mobile sheet)
   Overrides the base.css form recipe inside the header.
   -------------------------------------------------------------------------- */
#masthead .site-header-primary-section-center {
  flex: 1 1 auto;
  min-width: 0;
}
#masthead .site-primary-header-wrap .ast-builder-grid-row.ast-grid-center-col-layout {
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--space-8);
}
#masthead .site-header-primary-section-center > .ast-builder-layout-element,
#masthead .site-header-primary-section-center .ast-header-html,
#masthead .site-header-primary-section-center .ast-builder-html-element {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
#masthead .gbv-search {
  position: relative;
  width: 100%;
  margin: 0;
}
#masthead .gbv-search__field,
#masthead .gbv-search .search-field {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--space-12);
  margin: 0;
  padding: 0 calc(var(--search-btn) + var(--space-3) + var(--space-2)) 0 var(--space-4);
  background: var(--surface-sunken);
  border: var(--stroke-default) solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-strong);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--motion-base) ease;
}
#masthead .gbv-search__field:hover:not(:focus) {
  border-color: var(--gbv-blue-steel);
}
#masthead .gbv-search__field:focus {
  outline: none;
  border-color: var(--color-accent-strong);
  box-shadow: none;
}
#masthead .gbv-search__field::-webkit-search-cancel-button,
#masthead .gbv-search__field::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}
#masthead .gbv-search__submit {
  position: absolute;
  right: calc(var(--space-2) - var(--stroke-bold));   /* 6 px, SiteHeader */
  top: 50%;
  transform: translateY(-50%);
  width: var(--search-btn);
  height: var(--search-btn);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--gbv-gray-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color var(--motion-base) ease,
    color var(--motion-base) ease,
    transform var(--motion-press) ease;
}
#masthead .gbv-search__submit .gbv-icon {
  width: var(--icon-md);
  height: var(--icon-md);
}
#masthead .gbv-search__submit:hover,
#masthead .gbv-search__submit:focus-visible {
  color: var(--text-strong);
  background: var(--surface-brand-soft);
}
#masthead .gbv-search__submit:active {
  color: var(--text-on-brand);
  background: var(--color-brand);
  transform: translateY(-50%) scale(0.94);
}

/* --------------------------------------------------------------------------
   4. Round icon buttons: account, cart (44 px sunken discs) and the badge
   -------------------------------------------------------------------------- */
#masthead .site-header-primary-section-right {
  gap: var(--space-3);
}
#masthead .ast-header-account-wrap,
#masthead .ast-header-account-inner-wrap,
#masthead .ast-site-header-cart,
#masthead .ast-site-header-cart-li {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
}
#masthead .ast-site-header-cart-data {
  display: none;
}
#masthead .ast-header-account-link,
#masthead a.cart-container,
#masthead .gbv-search-toggle,
#masthead .menu-toggle {
  position: relative;
  box-sizing: border-box;
  width: var(--hit-area);
  height: var(--hit-area);
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-base) ease,
    color var(--motion-base) ease,
    transform var(--motion-press) ease;
}
#masthead .ast-header-account-link:hover,
#masthead a.cart-container:hover,
#masthead .gbv-search-toggle:hover,
#masthead .ast-header-account-link:focus-visible,
#masthead a.cart-container:focus-visible,
#masthead .gbv-search-toggle:focus-visible {
  background: var(--surface-brand-soft);
  color: var(--text-strong);
}
#masthead .ast-header-account-link:active,
#masthead a.cart-container:active,
#masthead .gbv-search-toggle:active {
  background: var(--gbv-blue-steel);
  color: var(--text-on-brand);
}
/* Astra's inline SVGs are replaced by the design's glyphs (masks) */
#masthead .ast-header-account-link svg,
#masthead .ast-header-account-link .ast-header-account-text,
#masthead .menu-toggle svg,
#masthead .menu-toggle .mobile-menu-wrap {
  display: none;
}
#masthead .ast-header-account-link::before,
#masthead .menu-toggle::before {
  content: "";
  display: block;
  width: var(--icon-md);
  height: var(--icon-md);
  background-color: currentColor;
  -webkit-mask: var(--gbv-icon) center / contain no-repeat;
  mask: var(--gbv-icon) center / contain no-repeat;
}
#masthead .ast-header-account-link::before {
  --gbv-icon: url("../img/icons/user.svg");
}
#masthead a.cart-container .gbv-icon,
#masthead .gbv-search-toggle .gbv-icon {
  width: var(--icon-md);
  height: var(--icon-md);
}
#masthead .gbv-cart-badge {
  position: absolute;
  top: calc(-1 * var(--space-1));
  right: calc(-1 * var(--space-1));
  box-sizing: border-box;
  min-width: var(--badge);
  height: var(--badge);
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--text-on-accent);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Nav row: five category tabs left, „Citește online” right
   -------------------------------------------------------------------------- */
#masthead .site-below-header-wrap .ast-builder-grid-row {
  align-items: stretch;
}
#masthead .site-header-below-section-left {
  align-items: flex-end;
}
#masthead .site-header-below-section-right {
  align-items: center;
}
#masthead .ast-below-header-bar .ast-builder-menu,
#masthead .ast-below-header-bar .site-navigation,
#masthead .ast-below-header-bar .main-navigation {
  height: auto;
  line-height: 1;
}
#masthead .ast-below-header-bar .main-header-menu {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  box-shadow: none;
}
#masthead .ast-below-header-bar .main-header-menu > .menu-item {
  margin: 0;
  line-height: 1;
}
#masthead .ast-below-header-bar .main-header-menu > .menu-item:first-child {
  margin-left: calc(-1 * var(--tab-pad-x));            /* tab text aligns with the logo edge */
}
#masthead .gbv-tab > .menu-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  height: var(--tab-h);
  padding: 0 var(--tab-pad-x) var(--stroke-hairline);  /* 1 px optical lift, SiteHeader */
  margin: 0;
  border: 0;
  border-radius: var(--tab-radius) var(--radius-sm) 0 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  line-height: 1;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--motion-base) ease,
    background-color var(--motion-base) ease;
}
#masthead .gbv-tab > .menu-link::before {
  content: "";
  display: none;
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  background-color: var(--gbv-cat-icon-color, currentColor);
  -webkit-mask-image: var(--gbv-cat-icon);
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--gbv-cat-icon);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}
#masthead .gbv-tab:not(.gbv-tab--active):not(.current-menu-item) > .menu-link:hover,
#masthead .gbv-tab:not(.gbv-tab--active):not(.current-menu-item) > .menu-link:focus-visible {
  color: var(--color-accent-strong);
  background: transparent;
}
#masthead .gbv-tab > .menu-link:active {
  background: var(--gbv-blue-steel);
  color: var(--text-on-brand);
}
/* Per-category colours and icons: the shared palette in base.css §14, keyed
   on the gbv-cat-<slug> class every tab carries (inc/header.php); unknown
   slugs keep the default look declared there. */
/* Active: the storefront class from PHP first, WordPress's exact-match class second */
#masthead .gbv-tab.gbv-tab--active > .menu-link,
#masthead .gbv-tab.current-menu-item > .menu-link {
  background: var(--gbv-cat-bg, transparent);
  color: var(--gbv-cat-fg, var(--text-strong));
}
#masthead .gbv-tab.gbv-tab--active > .menu-link::before,
#masthead .gbv-tab.current-menu-item > .menu-link::before {
  display: block;
}

/* „Citește online” (Secondary Menu element) */
#masthead .ast-below-header-bar .site-header-below-section-right .main-header-menu {
  align-items: center;
}
#masthead .gbv-online > .menu-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-1) var(--stroke-hairline);
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  line-height: 1;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-base) ease;
}
#masthead .gbv-online > .menu-link::before {
  content: "";
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  background-color: currentColor;
  -webkit-mask: url("../img/icons/book-open.svg") center / contain no-repeat;
  mask: url("../img/icons/book-open.svg") center / contain no-repeat;
}
#masthead .gbv-online > .menu-link:hover,
#masthead .gbv-online > .menu-link:focus-visible {
  color: var(--color-accent-strong);
}

/* --------------------------------------------------------------------------
   6. Mobile header (≤ 921.99): logo 30, search / cart / orange trigger
   -------------------------------------------------------------------------- */
#masthead .ast-mobile-header-wrap .site-header-primary-section-right {
  gap: var(--space-3);
}
#masthead .gbv-search-toggle-wrap {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: 1;
}
#masthead .menu-toggle,
#masthead .menu-toggle:hover,
#masthead .menu-toggle:focus {
  background: var(--color-accent);
  color: var(--text-on-accent);
  box-shadow: none;
  outline-offset: var(--stroke-bold);
}
/* Astra gives the trigger a thin dotted cream outline; the DS ring instead */
#masthead .menu-toggle:focus-visible,
#masthead .gbv-search-toggle:focus-visible {
  outline: var(--stroke-bold) solid var(--gbv-blue-steel);
  outline-offset: var(--stroke-bold);
}
#masthead .menu-toggle::before {
  --gbv-icon: url("../img/icons/menu.svg");
  width: var(--icon-lg);
  height: var(--icon-lg);
}
#masthead .menu-toggle:hover,
#masthead .menu-toggle:focus-visible {
  background: var(--color-accent-strong);
  color: var(--text-on-brand);
}
#masthead .menu-toggle:active {
  transform: scale(0.94);
}
#masthead .ast-button-wrap {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   7. Search: mobile sheet under the header, dim behind it, desktop dim on
   focus (0.3.1). Markup and behaviour: inc/header.php + assets/js/search.js.
   The backdrop and the scroll lock are state rules on body / html, the one
   scoping exception in this file (review S3 / S6).
   -------------------------------------------------------------------------- */
/* Dim: below the header (top bar, logo, cart, trigger stay crisp), above the
   page. Mobile: while the sheet is open. Desktop: while the field has focus. */
body:is(.gbv-search-open, :has(#ast-desktop-header .gbv-search:focus-within))::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
  pointer-events: auto;
}
/* Scroll lock on body, as Astra locks its own off-canvas: overflow: hidden
   on the root element turns html into the scroll container and the sticky
   header scrolls away with the page (measured on Chrome 141). */
html.gbv-scroll-lock body {
  overflow: hidden;
}
/* While the sheet, the desktop focus dim or the menu is open, the header is
   plain white: the translucent glass would show the dim through it. */
body:is(.gbv-search-open, .ast-popup-nav-open, :has(#ast-desktop-header .gbv-search:focus-within)) #masthead::before {
  background: var(--gbv-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Sheet open: search and cart discs leave; the hamburger keeps its slot */
body.gbv-search-open #masthead .gbv-search-toggle-wrap,
body.gbv-search-open #masthead .ast-header-woo-cart {
  visibility: hidden;
}
/* Desktop focus: the header is dimmed too, only the search form stays crisp
   (SiteHeader search-open state). The sticky header is a stacking context the
   page dim cannot reach, so the desktop wrapper draws the same dim over the
   rows; the category bar (#masthead::after, z auto) shows through it. Astra
   gives the primary row its own stacking context (z-index 4), which would
   lift logo, account and cart above the dim, so the row drops it while the
   field has focus and only the search element is raised. */
body:has(#ast-desktop-header .gbv-search:focus-within) #ast-desktop-header {
  position: relative;
}
body:has(#ast-desktop-header .gbv-search:focus-within) #ast-desktop-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-header-dim, 10);   /* fallback: a stale base.css must not flip the layers */
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
  pointer-events: none;
}
body:has(#ast-desktop-header .gbv-search:focus-within) #masthead .ast-primary-header-bar {
  z-index: auto;
}
body:has(#ast-desktop-header .gbv-search:focus-within) #masthead .ast-header-html-2 {
  position: relative;
  z-index: calc(var(--z-header-dim, 10) + 1);
}

/* The sheet hangs from the header's current bottom edge */
#masthead .gbv-search-sheet {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: var(--space-4) var(--gutter) var(--space-5);
  background: var(--surface-card);
  border-bottom: var(--stroke-hairline) solid var(--border-subtle);
  border-bottom-right-radius: var(--corner-sm);
  box-shadow: var(--shadow-md);
}
#masthead .gbv-search-sheet[hidden] {
  display: none;
}
#masthead .gbv-search-sheet .gbv-search__field {
  font-size: var(--text-base);
  border-color: var(--color-accent-strong);
  padding-right: calc(var(--hit-area) + var(--space-3));
}
#masthead .gbv-search-sheet .gbv-search__submit {
  right: var(--space-1);
  width: var(--hit-area);
  height: var(--hit-area);
  color: var(--text-strong);
}
/* The hamburger is the close control while the sheet is open (label: search.js) */
body.gbv-search-open #masthead .menu-toggle::before {
  --gbv-icon: url("../img/icons/close.svg");
}
@media (min-width: 922px) {
  #masthead .gbv-search-sheet {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. Off-canvas overlay (mobile-header-type full-width): white, five nav
   rows with chevrons, secondary rows, contact card
   -------------------------------------------------------------------------- */
#ast-mobile-popup .ast-mobile-popup-inner {
  background: var(--surface-card);
  color: var(--text-strong);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
}
/* The overlay sits below the sticky header and starts at its live bottom
   edge (--gbv-popup-top, set by search.js while the menu is open; the row
   sum is the no-script fallback), so the top bar and the logo row with the
   search and cart discs stay visible. Astra's own popup header (its close
   button) is not shown: the hamburger, in place, is the close control. */
#ast-mobile-popup.ast-mobile-popup-drawer,
#ast-mobile-popup.ast-mobile-popup-drawer.active {
  z-index: calc(var(--z-header) - 1);
}
#ast-mobile-popup.ast-mobile-popup-drawer,
#ast-mobile-popup .ast-mobile-popup-inner {
  top: var(--gbv-popup-top, var(--header-h));
  bottom: 0;
  height: auto;
}
#ast-mobile-popup .ast-mobile-popup-header {
  display: none;
}
/* Astra marks the open trigger with aria-expanded="true" (and hides it with
   an inline display: none, which search.js removes so it can act as the ×) */
#masthead .menu-toggle[aria-expanded="true"]::before {
  --gbv-icon: url("../img/icons/close.svg");
}
#ast-mobile-popup .ast-mobile-popup-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: var(--space-5) var(--gutter) var(--space-6);
  overscroll-behavior: contain;
}
#ast-mobile-popup .ast-mobile-popup-content > * {
  padding: 0;
  margin: 0;
}
#ast-mobile-popup .ast-desktop-popup-content {
  display: none;
}

/* Five category rows (Astra's mobile menu element) */
#ast-mobile-popup .main-header-menu,
#ast-mobile-popup .main-header-menu .sub-menu {
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
#ast-mobile-popup .main-header-menu > .menu-item {
  margin: 0;
  border: 0;
}
#ast-mobile-popup .main-header-menu > .menu-item > .menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  box-sizing: border-box;
  padding: var(--space-4) var(--space-1);
  margin: 0;
  border: 0;
  border-bottom: var(--stroke-hairline) solid var(--border-subtle);
  background: transparent;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--text-strong);
  text-decoration: none;
  transition: background-color var(--motion-base) ease;
}
#ast-mobile-popup .main-header-menu > .menu-item > .menu-link::after {
  content: "";
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  background-color: var(--color-accent-strong);
  -webkit-mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
  mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
}
#ast-mobile-popup .main-header-menu > .menu-item > .menu-link:hover,
#ast-mobile-popup .main-header-menu > .menu-item > .menu-link:focus-visible {
  background: var(--surface-sunken);
  color: var(--text-strong);
}
#ast-mobile-popup .main-header-menu > .menu-item > .menu-link:active {
  background: var(--surface-brand-soft);
}
#ast-mobile-popup .main-header-menu > .menu-item.gbv-tab--active > .menu-link,
#ast-mobile-popup .main-header-menu > .menu-item.current-menu-item > .menu-link {
  color: var(--color-accent-strong);
}

/* Secondary rows and the contact card (inc/header.php) */
#ast-mobile-popup .gbv-popup-extras {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
}
#ast-mobile-popup .gbv-popup-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#ast-mobile-popup .gbv-popup-list li {
  margin: 0;
}
#ast-mobile-popup .gbv-popup-list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  padding: calc(var(--space-4) - 1px) var(--space-1);   /* 15 px rows, SiteHeader */
  border-bottom: var(--stroke-hairline) solid var(--border-subtle);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-strong);
  text-decoration: none;
  transition: background-color var(--motion-base) ease;
}
#ast-mobile-popup .gbv-popup-list--account li:last-child a {
  border-bottom: 0;
}
#ast-mobile-popup .gbv-popup-list a .gbv-icon,
#ast-mobile-popup .gbv-popup-list--online a::before {
  width: var(--icon-md);
  height: var(--icon-md);
}
#ast-mobile-popup .gbv-popup-list--online a {
  color: var(--color-brand);
}
#ast-mobile-popup .gbv-popup-list--online a::before {
  content: "";
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("../img/icons/book-open.svg") center / contain no-repeat;
  mask: url("../img/icons/book-open.svg") center / contain no-repeat;
}
#ast-mobile-popup .gbv-popup-list a:hover,
#ast-mobile-popup .gbv-popup-list a:focus-visible {
  background: var(--surface-sunken);
}
#ast-mobile-popup .gbv-popup-list a:active {
  background: var(--surface-brand-soft);
}
#ast-mobile-popup .gbv-contact-card {
  margin-top: auto;
  padding: var(--space-5);
  padding-top: calc(var(--space-4) + var(--stroke-bold));  /* 18 px, SiteHeader */
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  border-top-left-radius: var(--corner-sm);
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-2) + var(--space-1) / 2);          /* 10 px rows */
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
#ast-mobile-popup .gbv-contact-card .gbv-contact-links {
  display: contents;
}
#ast-mobile-popup .gbv-contact-card .gbv-social {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
#ast-mobile-popup .gbv-contact-card .gbv-social li {
  margin: 0;
}
#ast-mobile-popup .gbv-contact-card a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-2) + var(--space-1) / 2);
  min-height: var(--space-6);
  color: var(--text-strong);
  text-decoration: none;
  transition: color var(--motion-base) ease;
}
#ast-mobile-popup .gbv-contact-card a:hover,
#ast-mobile-popup .gbv-contact-card a:focus-visible,
#ast-mobile-popup .gbv-contact-card a:active {
  color: var(--color-accent-strong);
}
#ast-mobile-popup .gbv-contact-card .gbv-icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
  color: var(--color-accent-strong);
}

/* --------------------------------------------------------------------------
   9. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #masthead .gbv-search__submit:active,
  #masthead .menu-toggle:active {
    transform: none;
  }
  #masthead .gbv-search__submit:active {
    transform: translateY(-50%);
  }
}