/* header — the frame at the top of every page (header.twig). Loaded by the
   layout itself: a component drawn inside <body> cannot put a stylesheet into
   the <head> that was already printed.

   Every look is a class on the component's root, `.header` (from
   the design's `layout` knobs: header--sticky | solid | transparent,
   header--layout-*, header--tone-*, header--lang-*, header--nav-*), never on
   <body>: the Design drawer switches it in the preview at once, and the header
   follows without being drawn again. The root holds the row, the mobile menu
   and the cart's panel and makes no box of its own (display: contents), so the
   row still sticks to the page. What the header needs to know of the page —
   a photo hero right under it — it asks the page (:has), and what the page
   needs of it, it sets as variables (--header-sticky-h, --header-over).

   Colours only through var(--*). The header speaks its own small palette,
   --hd-*, which the tone sets (bg | tint | inverted | brand) and the
   transparent state over a hero overrides — so every part below is written
   once, whatever it stands on. */

.header { display: contents; }

:root {
  --header-row-h: 4rem;      /* the main row */
  --header-bar-h: 50px;      /* utility-bar's strip: open now, the phone, the account — for a
                                business people call or visit, the line that matters most;
                                its pills are the row's own size, with room around them */
  --header-top-h: 5.25rem;   /* centered's logo row */
  --header-sticky-h: 0px;    /* what stays stuck at the top; header.js measures it */
  --footer-bg: color-mix(in srgb, var(--ink) 3.5%, var(--bg));
}
body:has(.header--sticky, .header--transparent) { --header-sticky-h: var(--header-row-h); }
/* transparent is transparent only over a photo hero; elsewhere it behaves as sticky */

.hdr {
  --hd-bg: var(--bg);
  --hd-ink: var(--ink);
  --hd-text: var(--body-text, var(--ink));
  --hd-muted: var(--muted);
  --hd-line: var(--line);
  --hd-wash: var(--hover-wash, color-mix(in srgb, var(--ink) 6%, transparent));
  --hd-mark: var(--mark, var(--primary));
  --hd-bar: var(--footer-bg);
  position: relative;
  z-index: 50;
  background: var(--hd-bg);
  color: var(--hd-ink);
  border-bottom: 1px solid var(--hd-line);
}

/* --- tone: what the header stands on ------------------------------------ */
.header--tone-tint .hdr { --hd-bg: var(--footer-bg); --hd-bar: color-mix(in srgb, var(--ink) 7%, var(--bg)); }
/* inverted: the page's ink as the ground, its background as the ink — a pair
   the design already keeps readable, turned over. */
.header--tone-inverted .hdr {
  --hd-bg: var(--ink);
  --hd-ink: var(--bg);
  --hd-text: color-mix(in srgb, var(--bg) 84%, var(--ink));
  --hd-muted: color-mix(in srgb, var(--bg) 62%, var(--ink));
  --hd-line: color-mix(in srgb, var(--bg) 16%, var(--ink));
  --hd-wash: color-mix(in srgb, var(--bg) 12%, transparent);
  --hd-mark: var(--bg);
  --hd-bar: color-mix(in srgb, var(--bg) 8%, var(--ink));
}
/* brand: the primary as the ground, primary-ink on it — the one pair whose
   contrast is checked. The mark's primary part and the primary button would
   vanish into it, so both take the ink. */
.header--tone-brand .hdr {
  --hd-bg: var(--primary);
  --hd-ink: var(--primary-ink);
  --hd-text: color-mix(in srgb, var(--primary-ink) 86%, var(--primary));
  --hd-muted: color-mix(in srgb, var(--primary-ink) 66%, var(--primary));
  --hd-line: color-mix(in srgb, var(--primary-ink) 18%, var(--primary));
  --hd-wash: color-mix(in srgb, var(--primary-ink) 12%, transparent);
  --hd-mark: var(--primary-ink);
  --hd-bar: color-mix(in srgb, var(--primary-ink) 10%, var(--primary));
}
.header--tone-brand .hdr .brand__mark { --primary: var(--primary-ink); }
.header--tone-brand .hdr .hdr-cta { background: var(--primary-ink); color: var(--primary); border-color: var(--primary-ink); }

/* --- rows --------------------------------------------------------------- */
.hdr-row__in { height: var(--header-row-h); display: flex; align-items: center; gap: 1.25rem; }
.hdr-utils__d { display: contents; } /* its parts stand in the row as if loose */
.hdr-m { display: none !important; }

/* --- the brand: the mark alone ------------------------------------------- */
.hdr .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--hd-ink); text-decoration: none; flex: none; border-radius: 6px; }
.hdr .brand__mark { display: inline-flex; }
.hdr .brand__mark svg { width: 34px; height: 34px; display: block; }
.hdr .brand:focus-visible { outline: 2px solid var(--hd-mark); outline-offset: 4px; }

/* --- the menu: as many as fit, the rest in «More» ------------------------ */
.hdr-nav { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.hdr-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; min-width: 0; }
.hdr-nav__item, .hdr-nav__more { position: relative; flex: none; }
.hdr-nav__item.is-hidden, .hdr-nav__more.is-hidden { display: none; }
/* Without scripts the first four stand in the row, the rest wait in «More». */
html:not(.has-js) .hdr-nav__item.is-late { display: none; }

.hdr-link {
  display: inline-flex; align-items: center; gap: .3rem; height: 2.5rem; padding: 0 .7rem;
  border: 0; border-radius: 999px; background: none; color: var(--hd-text);
  font: 500 .93rem/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; position: relative;
  list-style: none;
}
.hdr-link::-webkit-details-marker { display: none; }
.hdr-link__t { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; }
/* A label in a pill stands at its optical middle, whatever the site's font:
   the box is trimmed to cap height..baseline (so the font's own ascent and
   descent stop deciding), then lifted by a quarter of cap minus x-height —
   caps centred exactly still read low, the lowercase carries the weight.
   The even .3em keeps descenders and Ї/Й clear of the ellipsis clip. */
.hdr-link__t, .hdr-acct__t, .hdr-cta__t, .lang-switch__btn > span { line-height: 1; padding-block: .3em calc(.3em + (1cap - 1ex) / 2); }
@supports (text-box: trim-both cap alphabetic) {
  .hdr-link__t, .hdr-acct__t, .hdr-cta__t, .lang-switch__btn > span { text-box: trim-both cap alphabetic; }
}
.hdr-link:hover { color: var(--hd-ink); background: var(--hd-wash); }
.hdr-link.is-active { color: var(--hd-ink); font-weight: 600; }
.hdr-link.is-active::after { content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--hd-mark); }
.hdr-link:focus-visible { outline: 2px solid var(--hd-mark); outline-offset: 2px; }
.hdr-chev { width: 14px; height: 14px; flex: none; transition: transform .15s; }
.hdr-dd[open] > summary .hdr-chev { transform: rotate(180deg); }

/* --- drop-downs: a group, «More» ---------------------------------------- */
.hdr-dd > summary { list-style: none; }
.hdr-dd__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 15rem; max-width: 22rem; padding: .4rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px -24px var(--shade, rgb(0 0 0 / .4));
}
/* the bridge: the pointer crosses the gap without closing it */
.hdr-dd__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.hdr-dd__panel.is-right { left: auto; right: 0; }
.hdr-dd__panel--more.is-wide { min-width: 30rem; max-width: 34rem; columns: 2; column-gap: .4rem; }
.hdr-dd__panel a { display: block; padding: .55rem .75rem; border-radius: var(--radius-small); color: var(--body-text, var(--ink)); text-decoration: none; font-size: .92rem; line-height: 1.3; break-inside: avoid; }
.hdr-dd__panel a:hover { background: var(--hover-wash); color: var(--ink); }
.hdr-dd__panel a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.hdr-dd__all { color: var(--mark, var(--primary)) !important; font-weight: 600; }
.hdr-dd__group { display: block; padding: .6rem .75rem .2rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); break-after: avoid; }
.hdr-more__entry { display: none; break-inside: avoid; }
.hdr-more__entry.is-shown { display: block; }

/* --- utilities ------------------------------------------------------------ */
.hdr-utils { display: flex; align-items: center; gap: .35rem; flex: none; }
.hdr-icon {
  position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 999px; border: 0; background: transparent; color: var(--hd-ink); cursor: pointer; text-decoration: none;
}
.hdr-icon:hover { background: var(--hd-wash); }
.hdr-icon svg { width: 21px; height: 21px; }
.hdr-icon:focus-visible { outline: 2px solid var(--hd-mark); outline-offset: 2px; }
.header-cart__count {
  position: absolute; top: .1rem; right: .05rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: 999px; background: var(--hd-ink); color: var(--hd-bg);
  font: 700 .66rem/1.15rem var(--font-body); text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--hd-bg);
}
.hdr-acct { display: inline-flex; align-items: center; gap: .4rem; height: 2.5rem; padding: 0 .75rem; border-radius: 999px; color: var(--hd-ink); text-decoration: none; font-weight: 500; font-size: .92rem; white-space: nowrap; }
.hdr-acct:hover { background: var(--hd-wash); }
.hdr-acct svg { width: 19px; height: 19px; flex: none; }
.hdr-acct__icon { position: relative; display: inline-flex; flex: none; }
/* signed in: a dot on the icon, as on an avatar — cut out of it by a ring of the ground */
.hdr-acct__dot { position: absolute; top: -3px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--hd-bg, var(--bg)); }
.hdr-cta { display: inline-flex; align-items: center; height: 2.5rem; padding-block: 0; padding-inline: 1.15rem; font-size: .9rem; white-space: nowrap; }

/* --- languages (lang_switch.twig): the header's palette; the footer and the menu use the page's */
.lang-switch { --ls-ink: var(--ink); --ls-muted: var(--muted); --ls-line: var(--line); --ls-mark: var(--mark, var(--primary)); --ls-wash: var(--hover-wash); position: relative; display: inline-flex; align-items: center; font-size: .8rem; font-weight: 600; letter-spacing: .06em; }
.hdr .lang-switch { --ls-ink: var(--hd-ink); --ls-muted: var(--hd-muted); --ls-line: var(--hd-line); --ls-mark: var(--hd-mark); --ls-wash: var(--hd-wash); }
.lang-switch__btn { display: none; }
.lang-switch__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.lang-switch__list li { display: flex; align-items: center; }
.lang-switch .lang-switch__list a { color: var(--ls-muted); text-decoration: none; display: inline-flex; align-items: center; height: 2rem; padding: 0 .55rem; }
.lang-switch .lang-switch__list a:hover { color: var(--ls-ink); }
.lang-switch__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* divided (the default): the codes in a row, a hairline between them, the
   current one underlined in the mark */
.lang-switch__list li + li::before { content: ''; width: 1px; height: .85em; background: currentColor; opacity: .4; } /* as open now's */
.lang-switch .lang-switch__list a.is-active { color: var(--ls-ink); text-decoration: underline; text-decoration-color: var(--ls-mark); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* dropdown: the current code on a button, the names in a panel under it (over
   it in the footer, which ends the page). The panel is the page's own colours
   whatever the header stands on — like the menu's drop-downs. Each place has
   its own look (header--lang-*, footer--lang-*); the mobile menu is neither, so
   it always shows the row. */
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__btn {
  display: inline-flex; align-items: center; gap: .2rem; height: 2.5rem; padding: 0 .55rem 0 .7rem;
  border: 0; border-radius: 999px; background: none; color: var(--ls-ink); cursor: pointer;
  font: inherit; letter-spacing: inherit;
}
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__btn:hover, :is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch.is-open .lang-switch__btn { background: var(--ls-wash); }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__btn:focus-visible { outline: 2px solid var(--ls-mark); outline-offset: 2px; }
.lang-switch__chev { width: 14px; height: 14px; flex: none; transition: transform .15s; }
.lang-switch.is-open .lang-switch__chev { transform: rotate(180deg); }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  flex-direction: column; align-items: stretch; min-width: 11rem; padding: .4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px -24px var(--shade, rgb(0 0 0 / .4));
  font-size: .92rem; font-weight: 400; letter-spacing: normal;
}
/* the bridge: the pointer crosses the gap without closing it */
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch.is-open .lang-switch__list,
html:not(.has-js) :is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch:is(:hover, :focus-within) .lang-switch__list { display: flex; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list li::before { display: none; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list li.is-current { display: none; } /* the button says it already */
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch .lang-switch__list a { width: 100%; height: auto; padding: .55rem .75rem; border-radius: var(--radius-small); color: var(--body-text, var(--ink)); text-decoration: none; line-height: 1.3; white-space: nowrap; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch .lang-switch__list a:hover { background: var(--hover-wash); color: var(--ink); }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch .lang-switch__list a.is-active { color: var(--ink); font-weight: 600; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list .lang-switch__code { display: none; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list .lang-switch__name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list.is-left { right: auto; left: 0; }
.footer--lang-dropdown .lang-switch__list { top: auto; bottom: calc(100% + 6px); }
.footer--lang-dropdown .lang-switch__list::before { top: auto; bottom: -8px; }

/* none: that place has no languages — the owner's choice, kept as made */
.header--lang-none .hdr .lang-switch { display: none; }
.footer--lang-none .lang-switch { display: none; }

/* --- open now, in the header's colours ---------------------------------- */
.hdr .open-status { font-size: .84rem; color: var(--hd-text); gap: .45rem; white-space: nowrap; }
.hdr .open-status strong { color: var(--hd-ink); }
.hdr .open-status .open-status__dot { width: 8px; height: 8px; box-shadow: none; }

/* --- header_layout ------------------------------------------------------- */
/* classic (the default): brand · menu (to the right) · utilities. The bar and
   the centered row's left part wait for their layouts. */
.hdr-bar, .hdr-top__l { display: none; }
.hdr-brand--mini { display: none !important; }
.hdr-brand--mini .brand__mark svg { width: 26px; height: 26px; }

/* split: menu · brand in the middle · utilities */
.header--layout-split .hdr-row__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.header--layout-split .hdr-nav { order: -1; justify-content: flex-start; }
.header--layout-split .hdr-utils { justify-self: end; }

/* utility-bar: a strip of status, phone, e-mail · account, languages above the
   row; the row keeps brand · menu · cart · «Contact us». No bar (`no-bar`:
   fewer than two of its five; `bar-by-langs` with the header's languages
   hidden, when they were the second) — a classic row. */
.header--layout-utility-bar .hdr:not(.no-bar, .header--lang-none .bar-by-langs) .hdr-bar { display: block; }
.header--layout-utility-bar .hdr:not(.no-bar, .header--lang-none .bar-by-langs) .hdr-utils__own { display: none; }
.hdr-bar { height: var(--header-bar-h); border-bottom: 1px solid var(--hd-line); font-size: .9rem; color: var(--hd-text); background: var(--hd-bar); }
.hdr-bar__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.hdr-bar__l, .hdr-bar__r { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.hdr-bar__l a, .hdr-top__l a { color: var(--hd-ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.hdr-bar__l a:hover, .hdr-top__l a:hover { color: var(--hd-mark); }
.hdr-bar__tel { font-variant-numeric: tabular-nums; }
.hdr-bar .open-status { font-size: inherit; }
.hdr-bar__mail { overflow: hidden; text-overflow: ellipsis; }
/* the phone, the e-mail and the way there as one drop-down narrower than 1100px */
.hdr-bar__contact { display: none; position: relative; }
.hdr-bar__contact > summary { display: flex; align-items: center; gap: .4rem; cursor: pointer; color: var(--hd-ink); font-weight: 600; white-space: nowrap; }
.hdr-bar__contact > summary:hover { color: var(--hd-mark); }
.hdr-bar__icon { width: 16px; height: 16px; flex: none; }
@media (max-width: 1099px) {
  .hdr-bar__wide { display: none !important; }
  .hdr-bar__contact { display: block; }
}

/* centered: status and phone · the brand · utilities on the first row, the
   menu centred on a second one under a line across the page */
.header--layout-centered .hdr { overflow-x: clip; }
.header--layout-centered .hdr-row__in {
  height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: var(--header-top-h) 3.25rem; align-items: center; gap: 0 1rem;
}
.header--layout-centered .hdr-top__l { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; font-size: .85rem; min-width: 0; }
.header--layout-centered .hdr-brand { justify-self: center; }
.header--layout-centered .hdr-brand .brand__mark svg { width: 44px; height: 44px; }
.header--layout-centered .hdr-utils { justify-self: end; }
.header--layout-centered .hdr-nav { grid-column: 1 / -1; grid-row: 2; height: 100%; align-items: center; justify-content: center; position: relative; gap: 1rem; }
.header--layout-centered .hdr-nav::before { content: ''; position: absolute; top: 0; left: 50%; width: 100vw; transform: translateX(-50%); border-top: 1px solid var(--hd-line); }

/* --- header: how it behaves ------------------------------------------------ */
/* solid: in the flow, never stuck */
.header--solid .hdr { position: relative; }
/* sticky (and transparent with no photo hero under it): stuck, translucent;
   the line appears once the page has moved */
:is(.header--sticky, .header--transparent:not(:has(~ main > .hero--media-background:first-child))) .hdr {
  position: sticky; top: 0;
  background: color-mix(in srgb, var(--hd-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: transparent;
}
:is(.header--sticky, .header--transparent:not(:has(~ main > .hero--media-background:first-child))) .hdr.is-scrolled { border-bottom-color: var(--hd-line); }
/* two rows: the strip / the logo row go up with the page, the menu row stays */
.header:is(.header--sticky, .header--transparent:not(:has(~ main > .hero--media-background:first-child))).header--layout-utility-bar .hdr:not(.no-bar, .header--lang-none .bar-by-langs) { top: calc(-1 * var(--header-bar-h)); }
.header:is(.header--sticky, .header--transparent:not(:has(~ main > .hero--media-background:first-child))).header--layout-centered .hdr { top: calc(-1 * var(--header-top-h)); }
.header--layout-centered .hdr.is-scrolled .hdr-brand--mini { display: inline-flex !important; }
.header--layout-centered .hdr.is-scrolled .hdr-nav { justify-content: flex-start; }

/* transparent over a photo hero: white on a dark gradient; past the hero, a
   header like sticky. */
.header--transparent:has(~ main > .hero--media-background:first-child) .hdr {
  position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / 0));
  border-bottom-color: transparent;
  transition: background .2s, color .2s;
}
.header--transparent:has(~ main > .hero--media-background:first-child) .hdr:not(.is-scrolled) {
  --hd-ink: #fff; --hd-text: rgb(255 255 255 / .88); --hd-muted: rgb(255 255 255 / .7);
  --hd-line: rgb(255 255 255 / .22); --hd-wash: rgb(255 255 255 / .14); --hd-mark: #fff;
  --hd-bar: transparent; --hd-bg: #111;
}
.header--transparent:has(~ main > .hero--media-background:first-child) .hdr:not(.is-scrolled) .brand__mark { --primary: #fff; }
.header--transparent:has(~ main > .hero--media-background:first-child) .hdr:not(.is-scrolled) .header-cart__count { background: #fff; color: #111; box-shadow: none; }
.header--transparent:has(~ main > .hero--media-background:first-child) .hdr.is-scrolled {
  background: color-mix(in srgb, var(--hd-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--hd-line);
}
.header--transparent:has(~ main > .hero--media-background:first-child) .hdr.is-scrolled .hdr-bar { display: none; }
.header--transparent:has(~ main > .hero--media-background:first-child).header--layout-centered .hdr.is-scrolled .hdr-row__in { grid-template-rows: 0 3.25rem; }
.header--transparent:has(~ main > .hero--media-background:first-child).header--layout-centered .hdr.is-scrolled :is(.hdr-top__l, .hdr-brand:not(.hdr-brand--mini), .hdr-utils) { display: none; }
/* the hero under a fixed header is told how much of it the header covers (--header-over); the hero keeps its words clear of that */
.header--transparent ~ main > .hero--media-background:first-child { --header-over: var(--header-full-h, var(--header-row-h)); }

/* --- the mobile menu / the sidebar (one element) -------------------------- */
.hdr-sheet { position: fixed; inset: 0; z-index: 80; display: none; }
.hdr-sheet.is-open, .hdr-sheet:target { display: block; }
.hdr-sheet__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--shade, #000) 55%, transparent); }
.hdr-sheet__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 26rem);
  background: var(--bg); color: var(--ink); display: flex; flex-direction: column;
  box-shadow: -20px 0 40px -30px var(--shade, #000);
}
.hdr-sheet__top { display: flex; align-items: center; gap: .5rem; height: var(--header-row-h); padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.hdr-sheet__top .brand { margin-right: auto; color: var(--ink); text-decoration: none; display: inline-flex; }
.hdr-sheet__top .brand__mark svg { width: 32px; height: 32px; display: block; }
.hdr-sheet .hdr-icon { --hd-ink: var(--ink); --hd-wash: var(--hover-wash); --hd-bg: var(--bg); --hd-mark: var(--mark, var(--primary)); }
.hdr-sheet__side-cart { display: none; }
.hdr-sheet__body { flex: 1; overflow: auto; padding: .5rem 16px 1rem; overscroll-behavior: contain; }
.hdr-sheet__list { list-style: none; margin: 0; padding: 0; }
.hdr-sheet__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.1rem; padding: .4rem 0;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 500 1.05rem/1.3 var(--font-display);
  cursor: pointer; list-style: none;
}
.hdr-sheet__link::-webkit-details-marker { display: none; }
.hdr-sheet__link.is-active { font-weight: 700; box-shadow: inset 3px 0 0 var(--mark, var(--primary)); padding-left: .75rem; }
.hdr-sheet__link .hdr-chev { width: 18px; height: 18px; color: var(--muted); }
.hdr-sheet__group[open] > summary .hdr-chev { transform: rotate(180deg); }
.hdr-sheet__sub a { display: block; padding: .6rem 0 .6rem 1rem; border-bottom: 1px solid var(--line); color: var(--body-text, var(--ink)); text-decoration: none; font-size: .98rem; }
.hdr-sheet__sub a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.hdr-sheet__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.hdr-sheet__row .hdr-acct { --hd-ink: var(--ink); --hd-wash: var(--hover-wash); --hd-bg: var(--bg); margin-left: -.75rem; }
.hdr-sheet__foot { flex: none; padding: 1rem 16px calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--footer-bg); display: flex; flex-direction: column; gap: .75rem; }
.hdr-call { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }
.hdr-call__icon { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--tint, var(--hover-wash)); display: grid; place-items: center; flex: none; }
.hdr-call__icon svg { width: 20px; height: 20px; }
.hdr-call small { display: block; color: var(--muted); font-size: .8rem; }
.hdr-call b { display: block; font: 700 1.15rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.hdr-sheet__cta { display: flex; width: 100%; justify-content: center; align-items: center; margin-top: .5rem; }
body.has-sheet-open { overflow: hidden; }

/* --- below 720px: the brand, the cart (and the phone in utility-bar), the burger. From 720 the row,
   its overflow folded into «More» (header.js) — a 13" laptop's narrower window and a tablet keep the
   menu. */
.hdr-phone { display: none !important; }
@media (max-width: 719px) {
  .hdr-d { display: none !important; }
  .hdr-m:not(.hdr-phone) { display: inline-grid !important; }
  .header--layout-utility-bar .hdr:not(.no-bar, .header--lang-none .bar-by-langs) .hdr-phone { display: inline-grid !important; }
  .hdr-utils { margin-left: auto; }
  .header--layout-split .hdr-row__in,
  .header--layout-centered .hdr-row__in { display: flex; height: var(--header-row-h); grid-template-rows: none; gap: .75rem; }
  .header--layout-centered .hdr-brand .brand__mark svg { width: 34px; height: 34px; }
  .header--layout-utility-bar .hdr, .header--layout-centered .hdr { top: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr-chev, .hdr { transition: none; }
}

/* --- nav: left — from 960px the menu is a column, and the top row goes ---- */
@media (min-width: 960px) {
  body:has(.header--nav-left) { padding-left: 264px; }
  .header--nav-left .hdr { display: none; }
  .header--nav-left .hdr-sheet { display: block; inset: 0 auto 0 0; width: 264px; z-index: 45; }
  .header--nav-left .hdr-sheet .hdr-sheet__scrim, .header--nav-left .hdr-sheet .hdr-sheet__close { display: none; }
  .header--nav-left .hdr-sheet .hdr-sheet__panel { position: static; width: 100%; height: 100%; box-shadow: none; border-right: 1px solid var(--line); }
  .header--nav-left .hdr-sheet .hdr-sheet__side-cart {
    display: inline-flex; align-items: center; gap: .4rem; height: 2.25rem; padding: 0 .8rem 0 .65rem;
    border-radius: 999px; background: var(--tint, var(--hover-wash)); color: var(--ink); text-decoration: none;
    font: 600 .86rem/1 var(--font-body);
  }
  .header--nav-left .hdr-sheet .hdr-sheet__side-cart:hover { background: var(--hover-wash); }
  .header--nav-left .hdr-sheet .hdr-sheet__side-cart:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
  .header--nav-left .hdr-sheet .hdr-sheet__side-cart svg { width: 18px; height: 18px; flex: none; }
  .hdr-sheet__side-count { min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 .68rem/1.2rem var(--font-body); text-align: center; font-variant-numeric: tabular-nums; }
  .header--nav-left .hdr-sheet .hdr-sheet__top { height: auto; padding: 1.5rem 1.25rem 1rem; }
  .header--nav-left .hdr-sheet .hdr-sheet__body { padding: .75rem; }
  /* the links as the top row's: a pill around the words, not a bar across the column */
  .header--nav-left .hdr-sheet .hdr-sheet__link { display: inline-flex; justify-content: flex-start; gap: .3rem; min-height: 0; padding: .55rem .85rem; border: 0; border-radius: 999px; font: 500 .95rem/1.3 var(--font-body); color: var(--body-text, var(--ink)); }
  .header--nav-left .hdr-sheet .hdr-sheet__link:hover { background: var(--hover-wash); color: var(--ink); }
  .header--nav-left .hdr-sheet .hdr-sheet__link.is-active { box-shadow: none; padding-left: .85rem; background: var(--tint, var(--hover-wash)); color: var(--ink); font-weight: 600; }
  .header--nav-left .hdr-sheet .hdr-sheet__sub a { display: table; border: 0; padding: .45rem .85rem .45rem 1.5rem; font-size: .9rem; border-radius: 999px; }
  .header--nav-left .hdr-sheet .hdr-sheet__sub a:hover { background: var(--hover-wash); color: var(--ink); }
  .header--nav-left .hdr-sheet .hdr-sheet__row { border: 0; padding: .75rem .75rem 0 .85rem; }
  .header--nav-left .hdr-sheet .hdr-sheet__foot { padding: 1rem 1.25rem 1.25rem; background: none; }
}

/* --- «Skip to content»: the document's first link, seen when focused ------ */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: var(--radius-small); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* In the narrow menu and the sidebar «open now» is a sentence that wraps, not three flex boxes. */
.hdr-sheet .open-status { display: block; font-size: .9rem; white-space: normal; }
.hdr-sheet .open-status__dot { display: inline-block; margin-right: .45rem; vertical-align: .05em; }
.hdr-sheet .open-status__sep { margin-inline: .5em; }