/**
 * Header Styles
 *
 * @package Avalon_Nordic
 *
 * Slim and see-through (2026-09-25, after the Untitled UI reference; the heavier two-row header of the same morning:
 * backups/2026-09-25-before-header-v2). Markup: blocks/site-header/render.php, the menus: inc/menu-walker.php.
 *
 * Desktop (from the header breakpoint, inc/header.php): two airy rows on the header's see-through navy. The top
 * row (84px): the logo on the left, the search field (no line), the language menu, the phone number (13px) and a
 * 40px "Pyydä tarjous" button on the right. The menu row (64px, a hairline above it): the items side by side from
 * the logo's edge, a chevron button beside the items that have a panel; the open item and the current section get
 * the accent line. The panels have the header's own background (the same see-through navy and blur, solid where the
 * header is solid): a card below the item (two columns for long lists), or a full-width panel with a column per
 * group (Jätevesijärjestelmät). Scrolling down slides the top row away (only the menu stays), scrolling up brings it
 * back (assets/js/mobile-menu.js).
 * Below the breakpoint: one compact row (64px): the logo, the search field (tablets, 769px and up), the button and
 * the menu button; the menu opens as a white full-screen panel below the row, the menu button turns into its close
 * button. Sharp corners everywhere. The breakpoint rules (and the desktop rows' heights) are printed by
 * an_header_responsive_css() (inc/header.php).
 */

:root {
  --an-header-top: 64px;
  --an-header-nav: 44px;
}

/* The background is a variable (--an-header-bg: the hero pages' see-through navy comes inline from render.php) on a
   layer of its own (::before): the menu panels inside the header use the same colour and blur, and a blur on the
   header element itself would keep theirs from reaching the page behind them. */
.avalon-nordic-header {
  --an-header-bg: rgba(var(--va-brand-rgb), 0.45);
  --an-header-blur: blur(8px);
  --an-control: 40px; /* the top row's field and button */
  --an-ink: var(--wp--preset--color--heading, #012b55);
  --an-muted: #4a5563;
  --an-line: #e3e8ee;
  --an-nav-gap: 32px;
  width: 100%;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  font-family: 'Roboto', sans-serif;
  transition: transform 0.3s ease-in-out;
}

.avalon-nordic-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--an-header-bg);
  -webkit-backdrop-filter: var(--an-header-blur);
  backdrop-filter: var(--an-header-blur);
  pointer-events: none;
  transition: background-color 0.3s ease;
}

/* scrolled past the hero's photo (assets/js/mobile-menu.js), or the phone menu open: solid navy, also over the hero
   pages' inline see-through colour (the "va_header_opacity" option) */
.avalon-nordic-header.is-scrolled,
.avalon-nordic-header.is-menu-open {
  --an-header-bg: var(--va-brand-color, #002b56) !important;
  --an-header-blur: none;
}

/* Pages that do not start with a hero or a full-width cover (forms, cart, product and category pages, the style
   guide): nothing dark lies behind the header, so it is solid navy (translucent over white it read as a washed-out
   grey bar, 2.7:1 for the white logo). The body class comes from inc/header.php. */
body.an-solid-header .avalon-nordic-header {
  --an-header-bg: var(--wp--preset--color--navy, #002b56);
  --an-header-blur: none;
}

.avalon-nordic-header.header-hidden {
  transform: translateY(-100%);
}

.admin-bar .avalon-nordic-header {
  top: 32px;
}

body:not(.admin-bar) .avalon-nordic-header {
  top: 0;
}

/* ---------------------------------------------------------------- rows */

.header-container {
  box-sizing: border-box;
  max-width: 1650px;
  margin: 0 auto;
  padding: 0 var(--ab-gutter, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* tablets and desktops: the header's content on the page's content edges (the sections' container: 1310px + the
   gutter), the logo above the text below it (x = 65 at 1440px) */
@media (min-width: 1025px) {
  .header-container {
    max-width: calc(var(--wp--style--global--content-size, 1310px) + 2 * var(--ab-gutter, 40px));
  }
}

.header-top > .header-container {
  height: var(--an-header-top);
  gap: 32px;
}

/* the menu row: a hairline between the rows, no band of its own; the mega panel hangs from its bottom edge */
.header-bottom {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.header-bottom > .header-container {
  height: calc(var(--an-header-nav) - 1px);
  align-items: stretch;
}

/* ---------------------------------------------------------------- logo */

.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.logo-link:focus-visible {
  outline: 2px solid var(--va-accent-color);
  outline-offset: 4px;
}

.logo-text {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-logo {
  display: block;
  width: auto;
  max-height: 36px;
}

/* ---------------------------------------------------------------- the right-hand side of the top row */

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  min-width: 0;
  margin-left: auto;
}

/* Search: a minimal open field: no background and no line, 13px text on the right and the magnifier at the field's
   right end (the submit button); wider with the focus, which draws a 2px accent line under it. 16px text on touch
   screens: phones and tablets zoom into form fields with smaller text. */
.header-search {
  --an-search-w: 280px;
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 var(--an-search-w);
  width: var(--an-search-w);
  min-width: 180px;
  height: var(--an-control);
  margin: 0;
  transition: flex-basis 0.25s ease, width 0.25s ease;
}

.header-search:focus-within {
  --an-search-w: 380px;
}

.header-search__input {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 30px 0 4px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0);
  color: #fff;
  text-align: right;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (pointer: coarse) {
  .header-search__input {
    font-size: 16px;
  }
}

.header-search__input::placeholder {
  color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}

.header-search__input::-webkit-search-cancel-button,
.header-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.header-search__input:hover::placeholder {
  color: rgba(255, 255, 255, 0.9);
}

.header-search__input:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--va-accent-color);
}

/* the magnifier = the submit button, at the field's right end */
.header-search__submit {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 30px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: color 0.2s ease;
}

.header-search__submit:hover,
.header-search:focus-within .header-search__submit {
  color: #fff;
}

.header-search__submit:focus-visible {
  outline: 2px solid var(--va-accent-color);
  outline-offset: -2px;
}

/* the language menu: the current language as plain text with a chevron; the languages are links in a card below it,
   in the header's own see-through navy like the menu's panels (a <details>, assets/js/mobile-menu.js closes it on a click
   elsewhere or Esc). No border or outline on a click; the keyboard gets an accent underline. */
.language-switcher {
  position: relative;
  flex-shrink: 0;
}

.language-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: var(--an-control);
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.language-menu > summary::-webkit-details-marker {
  display: none;
}

.language-menu > summary:hover,
.language-menu[open] > summary {
  color: #fff;
}

.language-menu > summary:focus-visible > span {
  text-decoration: underline;
  text-decoration-color: var(--va-accent-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.language-menu .an-chevron {
  flex: none;
  transition: transform 0.16s ease;
}

.language-menu[open] .an-chevron {
  transform: rotate(180deg);
}

.language-menu__list {
  position: absolute;
  top: 100%;
  right: -8px;
  z-index: 2;
  box-sizing: border-box;
  min-width: 148px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background-color: var(--an-header-bg);
  -webkit-backdrop-filter: var(--an-header-blur);
  backdrop-filter: var(--an-header-blur);
}

.language-menu__list li {
  margin: 0;
}

.language-menu__list a {
  display: block;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.language-menu__list a:hover,
.language-menu__list a:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

.language-menu__list a:focus {
  outline: 0;
}

.language-menu__list a:focus-visible {
  box-shadow: inset 2px 0 0 var(--va-accent-color);
}

/* the current language: a short accent line on its left (as the menu's current page) */
.language-menu__list a[aria-current] {
  box-shadow: inset 2px 0 0 var(--va-accent-color);
  font-weight: 600;
}

/* the phone number: plain text with an accent icon (the pages' second call to action, as in the heroes) */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: var(--an-control);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.header-phone:hover,
.header-phone:focus {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--va-accent-color);
  text-underline-offset: 6px;
}

.header-phone:focus-visible {
  outline: 2px solid var(--va-accent-color);
  outline-offset: 2px;
}

.header-phone svg {
  flex-shrink: 0;
  color: var(--va-accent-color);
}

/* the button: navy text on the accent colour (white on it was 1.9:1), 40px */
.cta-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: var(--an-control);
  padding: 0 18px;
  border-radius: 0;
  background-color: var(--va-accent-color);
  color: var(--wp--preset--color--navy, #002b56);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.cta-button:hover,
.cta-button:focus {
  background-color: var(--va-accent-color-hover);
  color: var(--wp--preset--color--navy, #002b56);
  text-decoration: none !important;
}

.cta-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* the cart (option, off) */
.header-cart {
  position: relative;
}

.cart-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--va-accent-color);
  color: var(--wp--preset--color--navy, #002b56);
  font-size: 11px;
  font-weight: 700;
}

/* compact header (tablets and phones): a slightly narrower search field */
@media (max-width: 1200px) {
  .header-top > .header-container {
    gap: 24px;
  }

  .header-actions {
    gap: 16px;
  }

  .header-search {
    --an-search-w: 260px;
  }

  .header-search:focus-within {
    --an-search-w: 340px;
  }
}

/* phones: the button a little smaller beside the logo and the menu button */
@media (max-width: 768px) {
  .header-top > .header-container {
    gap: 12px;
  }

  .header-actions {
    gap: 8px;
  }

  .cta-button {
    padding: 0 14px;
  }

  .custom-logo {
    max-height: 32px;
  }
}

/* desktops 1201–1399px: the top row a little tighter */
@media (min-width: 1201px) and (max-width: 1399px) {
  .header-actions {
    gap: 20px;
  }

  .header-search {
    --an-search-w: 240px;
  }

  .header-search:focus-within {
    --an-search-w: 340px;
  }
}

/* ---------------------------------------------------------------- the main menu (the menu row) */

.header-nav {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.main-menu {
  display: flex;
  align-items: stretch;
  gap: 0 var(--an-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the nine items take 942px + the gaps: 1 086px with 18px gaps, and the 1201px window has 1 104px beside a scrollbar */
@media (max-width: 1439px) {
  .avalon-nordic-header {
    --an-nav-gap: 24px;
  }
}

@media (max-width: 1299px) {
  .avalon-nordic-header {
    --an-nav-gap: 18px;
  }
}

.main-menu > li {
  display: flex;
  align-items: stretch;
  margin: 0;
}

/* a list item's card hangs from its own item; the full-width panel from the menu row (.header-bottom) */
.main-menu > li.has-panel--list {
  position: relative;
}

.main-menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.main-menu > li > a:hover,
.main-menu > li > a:focus,
.main-menu > li.is-open > a,
.main-menu > li:is(.current-menu-item, .current-menu-ancestor, .current-page-ancestor, .current-menu-parent) > a {
  color: #fff;
  text-decoration: none;
}

/* the accent line along the row's bottom edge, under the item's text and its chevron: an open panel and the current
   page or section */
.main-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ab-underline, 2px);
  background-color: var(--va-accent-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.main-menu > li.has-panel > a::after {
  right: -24px; /* the chevron button: 4px + 20px */
}

.main-menu > li.is-open > a::after,
.main-menu > li:is(.current-menu-item, .current-menu-ancestor, .current-page-ancestor, .current-menu-parent) > a::after {
  transform: scaleX(1);
}

.main-menu > li > a:focus-visible {
  outline: 2px solid var(--va-accent-color);
  outline-offset: -8px;
}

/* the chevron button beside an item with a panel */
.submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.submenu-toggle .an-chevron {
  transition: transform 0.2s ease;
}

.submenu-toggle:hover,
.main-menu > li.is-open > .submenu-toggle {
  color: #fff;
}

.main-menu > li.is-open > .submenu-toggle .an-chevron {
  transform: rotate(180deg);
}

.submenu-toggle:focus-visible {
  outline: 2px solid var(--va-accent-color);
  outline-offset: -8px;
}

/* ---------------------------------------------------------------- the panels: the header's own background */

/* the header's see-through navy and blur (solid wherever the header is solid: --an-header-bg), white text, sharp
   corners, no shadow */
.submenu-panel {
  position: absolute;
  top: 100%;
  z-index: 2;
  box-sizing: border-box;
  margin-left: var(--an-panel-shift, 0px);
  background-color: var(--an-header-bg);
  -webkit-backdrop-filter: var(--an-header-blur);
  backdrop-filter: var(--an-header-blur);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

/* open: the item's .is-open (assets/js/mobile-menu.js: hover, the chevron button, the keyboard); without the script,
   hovering or focusing the item */
.main-menu > li.is-open > .submenu-panel,
.main-menu:not(.js-menu) > li:is(:hover, :focus-within) > .submenu-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

.submenu-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.submenu-panel li {
  margin: 0;
}

.submenu-panel a {
  display: block;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.submenu-panel a:hover,
.submenu-panel a:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

.submenu-panel a:focus-visible {
  outline: 2px solid var(--va-accent-color);
  outline-offset: -2px;
}

/* the current page: a short accent line on its left */
.submenu-panel a[aria-current="page"] {
  box-shadow: inset 2px 0 0 var(--va-accent-color);
  font-weight: 600;
}

/* a list: a card below its item, the links' text on the item's text edge (8px card padding + 12px link padding) */
.submenu-panel--list {
  left: -20px;
  min-width: 248px;
  padding: 8px;
}

.submenu-panel--list a {
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

/* a long list (Tuotteet): two columns, read downwards */
.submenu-panel--cols > .sub-menu {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--menu-rows, 6), auto);
  column-gap: 8px;
}

.submenu-panel--cols a {
  min-width: 232px;
}

/* the full-width panel (Jätevesijärjestelmät): the columns on the page's content edges; a small label (the item's own
   page) above them, a column per group: its title and its links */
.submenu-panel--mega {
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--ab-header-h, 148px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mega-inner {
  box-sizing: border-box;
  max-width: calc(var(--wp--style--global--content-size, 1310px) + 2 * var(--ab-gutter, 40px));
  margin: 0 auto;
  padding: 28px var(--ab-gutter, 40px) 40px;
}

.submenu-panel .mega-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

.submenu-panel .mega-label:hover,
.submenu-panel .mega-label:focus {
  background: none;
  color: #fff;
}

.mega-label svg {
  transition: transform 0.2s ease;
}

.mega-label:hover svg {
  transform: translateX(3px);
}

/* the groups' titles share a row (a two-line title does not push its links below its neighbours' links) */
.mega-menu {
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 0 40px;
}

.mega-menu > li {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-content: start;
}

.mega-menu > li > a {
  align-self: start;
}

/* the text on the column's edge, the hover tint reaching 12px past it */
.mega-menu > li > a {
  margin: 0 -12px;
  padding: 8px 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.mega-menu .sub-sub-menu {
  margin-top: 4px;
}

.mega-menu .sub-sub-menu a {
  margin: 0 -12px;
  padding: 7px 12px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.mega-menu .sub-sub-menu a:hover,
.mega-menu .sub-sub-menu a:focus {
  color: #fff;
}

/* placeholder links: no navigation and no hover decoration */
a.avalon-mega-no-link {
  cursor: default !important;
  text-decoration: none !important;
}

.submenu-panel li:not(.menu-item-has-children) > a.avalon-mega-no-link {
  pointer-events: none;
}

/* ---------------------------------------------------------------- the menu button (tablets and phones) */

/* a 44 x 44px tap target, two 24px lines ending at the gutter; open: a cross (the panel's close button) */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--va-accent-color);
  outline-offset: -2px;
}

/* the panel has the button at its end: the row keeps only the logo and the close button (and the search field on
   tablets) */
.avalon-nordic-header .cta-button {
  transition: background-color 0.2s ease, opacity 0.2s ease, visibility 0s;
}

.avalon-nordic-header.is-menu-open .header-actions > .cta-button {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.mobile-menu-toggle__lines {
  position: relative;
  display: block;
  width: 24px;
  height: 12px;
}

.mobile-menu-toggle__lines > span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: currentColor;
  transition: top 0.2s ease, transform 0.2s ease;
}

.mobile-menu-toggle__lines > span:first-child {
  top: 0;
}

.mobile-menu-toggle__lines > span:last-child {
  top: 10px;
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__lines > span:first-child {
  top: 5px;
  transform: rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__lines > span:last-child {
  top: 5px;
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- the menu panel (tablets and phones) */

/* white, the whole screen below the header row (the header is its containing block: it is fixed and blurred) */
.mobile-menu-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - var(--an-header-top) - var(--wp-admin--admin-bar--height, 0px));
  height: calc(100dvh - var(--an-header-top) - var(--wp-admin--admin-bar--height, 0px));
  background-color: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.mobile-menu {
  box-sizing: border-box;
  max-width: calc(600px + 2 * var(--ab-gutter, 20px));
  padding: 8px var(--ab-gutter, 20px) 40px;
}

/* the search field at the top of the panel (phones: the header has no room for it) */
.header-search.header-search--panel {
  --an-search-w: auto;
  display: flex;
  flex: none;
  width: auto;
  min-width: 0;
  height: 48px;
  margin: 4px 0 12px;
}

/* (on white: a line under it, 16px text) */
.header-search--panel .header-search__input {
  padding: 0 36px 0 0;
  border-bottom: 1px solid #c9d3dc;
  color: var(--an-ink);
  text-align: left;
  font-size: 16px;
}

.header-search--panel .header-search__input::placeholder,
.header-search--panel .header-search__input:hover::placeholder {
  color: #66717d;
}

.header-search--panel .header-search__input:hover {
  border-bottom-color: #8e9aa6;
}

.header-search--panel .header-search__input:focus {
  border-bottom-color: var(--va-accent-color);
  box-shadow: 0 1px 0 var(--va-accent-color);
}

.header-search--panel .header-search__submit,
.header-search--panel:focus-within .header-search__submit,
.header-search--panel .header-search__submit:hover {
  color: var(--an-ink);
}

@media (min-width: 769px) {
  .header-search.header-search--panel {
    display: none;
  }
}

.mobile-main-menu,
.mobile-main-menu .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-main-menu li {
  margin: 0;
}

.mobile-menu-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mobile-menu-link {
  display: flex;
  flex: 1;
  align-items: center;
  align-self: stretch;
  min-height: 44px;
  color: var(--an-ink);
  line-height: 1.3;
  text-decoration: none;
}

.mobile-menu a:hover,
.mobile-menu a:focus,
.mobile-menu a:active {
  color: var(--an-ink);
}

@media (hover: hover) {
  .mobile-menu-link:hover {
    text-decoration: underline;
    text-decoration-color: var(--va-accent-color);
    text-underline-offset: 6px;
  }
}

.mobile-menu :is(a, button, input):focus-visible {
  outline: 2px solid var(--an-ink);
  outline-offset: 2px;
}

.mobile-menu .header-search__input:focus-visible {
  outline: none;
}

/* the levels: the top level 17px semibold in 52px rows, the groups below it lighter and indented */
.mobile-level-1 > .mobile-menu-item-wrapper {
  min-height: 52px;
}

.mobile-level-1 > .mobile-menu-item-wrapper .mobile-menu-link {
  font-size: 17px;
  font-weight: 600;
}

.mobile-level-2 > .mobile-menu-item-wrapper .mobile-menu-link {
  font-size: 16px;
  font-weight: 400;
  color: #26374a;
}

.mobile-level-3 > .mobile-menu-item-wrapper .mobile-menu-link {
  min-height: 40px;
  font-size: 15px;
  font-weight: 400;
  color: var(--an-muted);
}

.mobile-main-menu .sub-menu {
  display: none;
  padding: 0 0 8px 16px;
}

.mobile-main-menu .sub-menu.active {
  display: block;
}

/* the current page */
.mobile-main-menu li.current-menu-item > .mobile-menu-item-wrapper > .mobile-menu-link {
  text-decoration: underline;
  text-decoration-color: var(--va-accent-color);
  text-underline-offset: 6px;
}

/* the chevron button: 44 x 44px, the chevron on the gutter */
.mobile-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: 0 -15px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #66717d;
  cursor: pointer;
}

.mobile-submenu-toggle .an-chevron {
  transition: transform 0.2s ease;
}

.mobile-submenu-toggle[aria-expanded="true"] {
  color: var(--an-ink);
}

.mobile-submenu-toggle[aria-expanded="true"] .an-chevron {
  transform: rotate(180deg);
}

.mobile-submenu-toggle:focus-visible {
  outline: 2px solid var(--va-accent-color);
  outline-offset: -4px;
}

/* the panel's end: the languages, the button and the phone number */
.mobile-menu-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--an-line);
}

.mobile-language-switcher {
  display: flex;
  gap: 24px;
  margin-bottom: 4px;
}

.mobile-language-switcher a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--an-muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.mobile-menu .mobile-language-switcher a:hover {
  color: var(--an-ink);
}

.mobile-language-switcher a.current-lang {
  color: var(--an-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--va-accent-color);
  text-underline-offset: 6px;
}

.mobile-phone-button,
.mobile-cta-button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mobile-cta-button,
.mobile-menu .mobile-cta-button:hover,
.mobile-menu .mobile-cta-button:focus {
  background-color: var(--va-accent-color);
  color: var(--wp--preset--color--navy, #002b56);
}

.mobile-menu .mobile-cta-button:hover {
  background-color: var(--va-accent-color-hover);
}

.mobile-phone-button {
  border: 1px solid #c9d3dc;
  color: var(--an-ink);
}

.mobile-menu .mobile-phone-button:hover {
  border-color: var(--an-ink);
}

.mobile-cta-button:focus-visible,
.mobile-phone-button:focus-visible {
  outline: 2px solid var(--va-accent-color);
  outline-offset: 2px;
}

.mobile-header-cart {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.mobile-cart-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: var(--an-ink);
  text-decoration: none;
}

.mobile-cart-link svg {
  width: 28px;
  height: 28px;
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .avalon-nordic-header,
  .header-search,
  .submenu-panel,
  .mobile-menu-overlay,
  .mobile-menu-toggle__lines > span,
  .an-chevron,
  .mega-label svg,
  .main-menu > li > a::after {
    transition: none !important;
  }

  .submenu-panel,
  .mobile-menu-overlay {
    transform: none;
  }
}

/* Responsive - the breakpoint rules are printed by an_header_responsive_css() (va_header_mobile_breakpoint). */

/* ---------------------------------------------------------------- live search: the suggestions under a search field */

/* (assets/js/live-search.js: the header's field, the phone panel's and the search page's own) A white card under the
   field, sharp corners, a hairline border, no shadow: a small picture, the title with the search words marked and the
   type; the last line opens the full results. */
.live-search {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  box-sizing: border-box;
  width: min(480px, 92vw);
  margin: 0;
  padding: 8px;
  border: 1px solid #d6e0e8;
  background: #fff;
  color: #012b55;
  font-family: 'Roboto', sans-serif;
  text-align: left;
}

.live-search[hidden] {
  display: none;
}

.live-search__list {
  max-height: min(60vh, 420px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.live-search__item {
  margin: 0;
  padding: 0;
}

.live-search__item > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  color: #012b55;
  text-decoration: none;
}

.live-search__item.is-active > a,
.live-search__item > a:hover {
  background: #eef5f8;
}

.live-search__thumb {
  flex: none;
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
  background: #eaf8f9;
}

.live-search__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.live-search__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.live-search__type {
  color: #0e7c83;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.live-search mark {
  background: rgba(48, 203, 211, 0.3);
  color: inherit;
}

.live-search__all {
  display: block;
  margin: 6px 0 0;
  padding: 12px 10px 8px;
  border-top: 1px solid #e3e8ee;
  color: #012b55;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.live-search__all:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.live-search.is-empty .live-search__all {
  margin: 0;
  border-top: 0;
}

.live-search__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* the phone panel's field and the search page's field: the card is as wide as the field */
.header-search--panel .live-search,
.an-hero-search .live-search {
  right: auto;
  left: 0;
  width: 100%;
}

.an-hero-search .live-search {
  top: 100%;
  border-top: 0;
}

.header-search--panel .live-search {
  top: calc(100% + 4px);
}

/* waiting for the suggestions: the magnifier pulses */
.has-live-search.is-searching .header-search__submit svg {
  animation: an-search-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes an-search-pulse {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .has-live-search.is-searching .header-search__submit svg {
    animation: none;
    opacity: 0.5;
  }
}