/* 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 <body> (the layout prints them from the design's
   `layout` knobs: header_layout-*, header-*, header_tone-*, lang_header-*,
   nav-*), never on the header itself: the Design drawer switches a body class
   in the preview at once, and the header follows without being drawn again.

   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. */

: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.header-sticky, body.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 ------------------------------------ */
body.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. */
body.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. */
body.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));
}
body.header_tone-brand .hdr .brand__mark { --primary: var(--primary-ink); }
body.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 (lang_header-*, lang_footer-*); the mobile menu is neither, so
   it always shows the row. */
:is(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .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(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .lang-switch__btn:hover, :is(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .lang-switch.is-open .lang-switch__btn { background: var(--ls-wash); }
:is(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .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(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .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(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .lang-switch__list::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
:is(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .lang-switch.is-open .lang-switch__list,
html:not(.has-js) :is(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .lang-switch:is(:hover, :focus-within) .lang-switch__list { display: flex; }
:is(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .lang-switch__list li::before { display: none; }
:is(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .lang-switch__list li.is-current { display: none; } /* the button says it already */
:is(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .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(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .lang-switch .lang-switch__list a:hover { background: var(--hover-wash); color: var(--ink); }
:is(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .lang-switch .lang-switch__list a.is-active { color: var(--ink); font-weight: 600; }
:is(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .lang-switch__list .lang-switch__code { display: none; }
:is(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .lang-switch__list .lang-switch__name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
:is(body.lang_header-dropdown .hdr, body.lang_footer-dropdown .ftr) .lang-switch__list.is-left { right: auto; left: 0; }
body.lang_footer-dropdown .ftr .lang-switch__list { top: auto; bottom: calc(100% + 6px); }
body.lang_footer-dropdown .ftr .lang-switch__list::before { top: auto; bottom: -8px; }

/* none: that place has no languages — the owner's choice, kept as made */
body.lang_header-none .hdr .lang-switch { display: none; }
body.lang_footer-none .ftr .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 */
body.header_layout-split .hdr-row__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
body.header_layout-split .hdr-nav { order: -1; justify-content: flex-start; }
body.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. */
body.header_layout-utility-bar .hdr:not(.no-bar, body.lang_header-none .bar-by-langs) .hdr-bar { display: block; }
body.header_layout-utility-bar .hdr:not(.no-bar, body.lang_header-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; }

/* centered: status and phone · the brand · utilities on the first row, the
   menu centred on a second one under a line across the page */
body.header_layout-centered .hdr { overflow-x: clip; }
body.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;
}
body.header_layout-centered .hdr-top__l { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; font-size: .85rem; min-width: 0; }
body.header_layout-centered .hdr-brand { justify-self: center; }
body.header_layout-centered .hdr-brand .brand__mark svg { width: 44px; height: 44px; }
body.header_layout-centered .hdr-utils { justify-self: end; }
body.header_layout-centered .hdr-nav { grid-column: 1 / -1; grid-row: 2; height: 100%; align-items: center; justify-content: center; position: relative; gap: 1rem; }
body.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 */
body.header-solid .hdr { position: relative; }
/* sticky (and transparent with no photo hero under it): stuck, translucent;
   the line appears once the page has moved */
body.header-sticky .hdr, body.header-transparent:not(.has-photo-hero) .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;
}
body.header-sticky .hdr.is-scrolled, body.header-transparent:not(.has-photo-hero) .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 */
body:is(.header-sticky, .header-transparent:not(.has-photo-hero)).header_layout-utility-bar .hdr:not(.no-bar, body.lang_header-none .bar-by-langs) { top: calc(-1 * var(--header-bar-h)); }
body:is(.header-sticky, .header-transparent:not(.has-photo-hero)).header_layout-centered .hdr { top: calc(-1 * var(--header-top-h)); }
body.header_layout-centered .hdr.is-scrolled .hdr-brand--mini { display: inline-flex !important; }
body.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. */
body.header-transparent.has-photo-hero .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;
}
body.header-transparent.has-photo-hero .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;
}
body.header-transparent.has-photo-hero .hdr:not(.is-scrolled) .brand__mark { --primary: #fff; }
body.header-transparent.has-photo-hero .hdr:not(.is-scrolled) .header-cart__count { background: #fff; color: #111; box-shadow: none; }
body.header-transparent.has-photo-hero .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);
}
body.header-transparent.has-photo-hero .hdr.is-scrolled .hdr-bar { display: none; }
body.header-transparent.has-photo-hero.header_layout-centered .hdr.is-scrolled .hdr-row__in { grid-template-rows: 0 3.25rem; }
body.header-transparent.has-photo-hero.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 keeps its words clear of it */
body.header-transparent.has-photo-hero main > .hero:first-child .hero-inner { padding-top: 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 900px: the brand, the cart (and the phone in utility-bar), the burger */
.hdr-phone { display: none !important; }
@media (max-width: 899px) {
  .hdr-d { display: none !important; }
  .hdr-m:not(.hdr-phone) { display: inline-grid !important; }
  body.header_layout-utility-bar .hdr:not(.no-bar, body.lang_header-none .bar-by-langs) .hdr-phone { display: inline-grid !important; }
  .hdr-utils { margin-left: auto; }
  body.header_layout-split .hdr-row__in,
  body.header_layout-centered .hdr-row__in { display: flex; height: var(--header-row-h); grid-template-rows: none; gap: .75rem; }
  body.header_layout-centered .hdr-brand .brand__mark svg { width: 34px; height: 34px; }
  body.header_layout-utility-bar .hdr, body.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.nav-left { padding-left: 264px; }
  body.nav-left .hdr { display: none; }
  body.nav-left .hdr-sheet { display: block; inset: 0 auto 0 0; width: 264px; z-index: 45; }
  body.nav-left .hdr-sheet .hdr-sheet__scrim, body.nav-left .hdr-sheet .hdr-sheet__close { display: none; }
  body.nav-left .hdr-sheet .hdr-sheet__panel { position: static; width: 100%; height: 100%; box-shadow: none; border-right: 1px solid var(--line); }
  body.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);
  }
  body.nav-left .hdr-sheet .hdr-sheet__side-cart:hover { background: var(--hover-wash); }
  body.nav-left .hdr-sheet .hdr-sheet__side-cart:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
  body.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; }
  body.nav-left .hdr-sheet .hdr-sheet__top { height: auto; padding: 1.5rem 1.25rem 1rem; }
  body.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 */
  body.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)); }
  body.nav-left .hdr-sheet .hdr-sheet__link:hover { background: var(--hover-wash); color: var(--ink); }
  body.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; }
  body.nav-left .hdr-sheet .hdr-sheet__sub a { display: table; border: 0; padding: .45rem .85rem .45rem 1.5rem; font-size: .9rem; border-radius: 999px; }
  body.nav-left .hdr-sheet .hdr-sheet__sub a:hover { background: var(--hover-wash); color: var(--ink); }
  body.nav-left .hdr-sheet .hdr-sheet__row { border: 0; padding: .75rem .75rem 0 .85rem; }
  body.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; }