/* header-services.css — the utility bar, the header's basket and account
 * buttons, the collapse-on-scroll behaviour, and the three service panels
 * (search, accessibility, basket).
 *
 * LOADED LAST, ON PURPOSE. Nine stylesheets reach the header and three of them
 * assert it with !important: v9-design-system.css owns .hotline-strip's colour
 * and the brand-mark's size, aegov-dls.css owns the language button's colour.
 * Anything here that has to beat one of those says so at the rule.
 *
 * Geometry lives in two variables because four things depend on it — the
 * strip's height, the header's top offset, main's top padding and the mobile
 * panel's drop point. They were four hard-coded numbers before, and one of
 * them was already 0.25rem stale.
 */
:root {
  --ubar-h: 2.375rem;
  --hdr-h: 4.5rem;
  --ubar-ink: #5A6B74;
  --ubar-ink-strong: #0A2A3D;
  --ubar-bg: #F4F6F7;
  --ubar-line: rgba(10, 42, 61, 0.1);
}

/* ============================================================
   1. THE UTILITY BAR (was the dark hotline strip)
   ============================================================ */
/* Beats v9-design-system.css, which sets background/colour/padding/font-size
   on .hotline-strip with !important for the dark bar this replaces. */
.hotline-strip {
  background: var(--ubar-bg) !important;
  color: var(--ubar-ink) !important;
  min-height: var(--ubar-h);
  padding: 0 clamp(0.75rem, 3vw, 2.5rem) !important;
  font-size: 0.78rem !important;
  border-block-end: 1px solid var(--ubar-line);
  border-bottom-color: var(--ubar-line);
  overflow: visible !important;
  gap: 0 !important;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.ubar__inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.ubar__group {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.ubar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* 32px, and the bar is 38px: the target is the full bar height via padding
     rather than a 20px icon with dead space around it. */
  min-height: 2rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--ubar-ink);
  font-family: 'Alexandria', 'Noto Kufi Arabic', system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}
.ubar__btn:hover { color: var(--ubar-ink-strong); background: rgba(10, 42, 61, 0.06); }
.ubar__btn:focus-visible {
  outline: 3px solid var(--gold-500, #C9A227);
  outline-offset: 1px;
  color: var(--ubar-ink-strong);
}
.ubar__btn svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ubar__btn--wa svg { fill: currentColor; stroke: none; }
.ubar__btn--wa:hover { color: #1c8c46; background: rgba(37, 211, 102, 0.1); }
.ubar__sep {
  width: 1px;
  height: 1.05rem;
  margin-inline: 0.3rem;
  background: var(--ubar-line);
  flex: 0 0 1px;
}

/* The language pill, moved out of the header bar into the bar of services
   where every competitor in this sector keeps it. */
.hotline-strip .language-switch {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem;
  background: rgba(10, 42, 61, 0.05);
  border: 1px solid var(--ubar-line);
  border-radius: 999px;
}
.hotline-strip .language-switch button {
  min-height: 1.5rem;
  min-width: 2.1rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  /* aegov-dls.css forces this colour with !important; matched, not fought. */
  color: rgba(10, 42, 61, 0.65) !important;
  font-family: 'Alexandria', 'Noto Kufi Arabic', system-ui, sans-serif;
  font-size: 0.72rem !important;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.hotline-strip .language-switch button.active {
  background: #0A2A3D;
  color: #fff !important;
}
.hotline-strip .language-switch button:focus-visible {
  outline: 2px solid var(--gold-500, #C9A227);
  outline-offset: 1px;
}

/* The licence line: kept as text at wide widths because it is the one
   disclosure a donor may look for, dropped below 1100px where the footer
   carries it twice over. */
.ubar__licence {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ubar-ink);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}
.ubar__licence b { color: var(--ubar-ink-strong); font-weight: 700; }

/* ============================================================
   2. HEADER BUTTONS — basket + account
   ============================================================ */
.site-header .hs-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid rgba(10, 42, 61, 0.12);
  border-radius: 0.65rem;
  background: rgba(10, 42, 61, 0.04);
  color: #0A2A3D;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.site-header .hs-icon-btn:hover {
  background: rgba(10, 42, 61, 0.09);
  border-color: rgba(10, 42, 61, 0.2);
}
.site-header .hs-icon-btn:focus-visible {
  outline: 3px solid var(--gold-500, #C9A227);
  outline-offset: 2px;
}
.site-header .hs-icon-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* A basket holding something says so in gold, which is the one thing on this
   bar allowed to draw the eye besides the donate button. */
.site-header .hs-icon-btn.has-items {
  border-color: rgba(201, 162, 39, 0.55);
  background: rgba(201, 162, 39, 0.12);
}
.site-header .hs-badge {
  position: absolute;
  inset-block-start: -0.3rem;
  inset-inline-start: -0.3rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.2rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #C9A227, #E3C15A);
  color: #0A2A3D;
  border-radius: 999px;
  font-family: 'Alexandria', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(201, 162, 39, 0.4);
}
/* One pulse when a line is added (header-services.js adds .is-bump on a rise). */
.site-header .hs-badge.is-bump { animation: hs-bump 380ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hs-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .hs-badge.is-bump { animation: none; }
}

/* ============================================================
   3. COLLAPSE ON SCROLL
   ============================================================
   No JS: header-v2.js already puts .is-scrolled on the header, and :has()
   lets the strip above it react to a later sibling. main's padding does NOT
   change with it — the strip leaving must not move the content a visitor is
   reading, so the reclaimed space stays as breathing room and CLS stays 0. */
body:has(.site-header.is-scrolled) .hotline-strip {
  transform: translateY(-100%);
  pointer-events: none;
}
.site-header.is-scrolled {
  min-height: 3.5rem !important;      /* beats v9-design-system.css's 4.5rem */
  padding-block: 0.35rem !important;
}

/* THE SCROLLED HEADER STAYS, AND STAYS WHITE.
   motion.min.js adds .mb-header-hidden past 200px of downward scroll and
   motion.min.css translates the whole header off-screen with it — an
   auto-hiding header. Measured on /programs at y=700: transform
   translateY(-61.6px), the bar half off the top of the window.
   That is the opposite of what this bar is for. The services and the basket
   are meant to be reachable from anywhere in a long page, and a donor
   scrolling a project list should not have to scroll UP to reach «تبرع الآن».
   motion.min.js stopped adding the class on 2026-09-13; this rule stays as a
   guard for a visitor whose browser still holds the old script.

   The same sheet repaints .mb-header-scrolled to rgba(10,42,61,.97) with a
   blur, which was right for the old green/navy bar and turns the new white
   one dark halfway down every page. v9-design-system.css repeats it with
   !important inside a prefers-reduced-motion block, hence !important here. */
.site-header.mb-header-hidden { transform: none !important; }
.site-header.mb-header-scrolled,
.site-header.is-scrolled.mb-header-scrolled {
  background: var(--header-bg, #fff) !important;
  background-color: var(--header-bg, #fff) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 8px 24px rgba(10, 42, 61, 0.1) !important;
}

/* The scrolled header sits at the top, and this needs the specificity it has.
   header-v2.css says `.site-header.is-scrolled { inset-block-start: 0 }` at
   (0,2,0) while its own base rule reaches the same element through
   `header.site-header[data-static-header]` at (0,2,1) — so the base won and
   the scrolled bar stayed 36px down, leaving a 36px gap where the strip used
   to be. Measured: rect.top 36 with the strip already translated away. */
header.site-header.is-scrolled,
header.site-header.is-scrolled[data-header],
header.site-header.is-scrolled[data-static-header],
header.site-header.is-scrolled[data-relief-header],
body:has(.hotline-strip) header.site-header.is-scrolled,
body:has(.hotline-strip) header.site-header.is-scrolled[data-header],
body:has(.hotline-strip) header.site-header.is-scrolled[data-static-header] {
  inset-block-start: 0 !important;
}
/* The scrolled bar shrinks the logo through the one variable
   v9-design-system.css sizes it from; the width follows the file's ratio. */
.site-header.is-scrolled { --brand-h: 2.25rem; }
.site-header.is-scrolled .site-menu a,
.site-header.is-scrolled .site-menu .nav-parent { height: 2.15rem; }
.site-header.is-scrolled .hs-icon-btn { width: 2.2rem; height: 2.2rem; }

/* ============================================================
   4a. GEOMETRY — one source of truth for the bar's height
   ============================================================
   header-v2.css hardcodes 2.25rem in three places for the strip's height, and
   this file sets the strip to --ubar-h (2.375rem). Measured on /volunteer at
   1440px: the strip was 38px tall, the header sat at 36px — overlapping its
   last 2px — and main's 6.75rem padding put the first section at 108px
   against a header bottom edge of 109px. Small numbers, but they are the
   kind that turn into a clipped heading on the one page nobody checks.
   The variable wins everywhere now. */
body:has(.hotline-strip) header.site-header,
body:has(.hotline-strip) header.site-header[data-header],
body:has(.hotline-strip) header.site-header[data-static-header] {
  inset-block-start: var(--ubar-h) !important;
}
body:has(.hotline-strip) main,
body:has(.hotline-strip) main#main {
  padding-block-start: calc(var(--ubar-h) + var(--hdr-h) + 0.75rem);
}
/* The 0.75rem above is breathing room for pages that open on text. The home
   hero is a full-bleed band, and on it that room was a strip of bare body
   between the white header and the hero's tint — 8px at 768-1280, 11px at
   1366 and 375, measured on Azure 2026-09-11. The hero takes the room back.
   It may slide 1-4px under the header, whose ground is opaque white, so what
   shows is the header's own bottom edge meeting the hero. */
body:has(.hotline-strip) #home.hero-section {
  margin-block-start: -0.75rem;
}

/* ============================================================
   4b. GEOMETRY — the strip stays on every breakpoint
   ============================================================
   v9-design-system.css hides the strip below 1280px and pins the header to 0.
   That was defensible when the strip was three lines of dark text; it is not
   now that it carries search, the accessibility panel, staff login and the
   language switch — hiding it puts the accessibility affordance out of reach
   of exactly the phone user most likely to need it. It stays, icons only. */
@media (max-width: 1280px) {
  /* 4.5rem, not 4.25rem: v9-design-system.css holds the header at a 4.5rem
     min-height at every width, so 4.25 left the menu panel and the page's
     top padding 4px short of the bar's real bottom edge. */
  :root { --ubar-h: 2.25rem; --hdr-h: 4.5rem; }

  .hotline-strip { display: flex !important; }
  body:has(.hotline-strip) .site-header .site-menu {
    inset-block-start: calc(var(--ubar-h) + var(--hdr-h) + env(safe-area-inset-top)) !important;
  }
  body:has(.site-header.is-scrolled) .site-header .site-menu {
    inset-block-start: calc(3.5rem + env(safe-area-inset-top)) !important;
  }

  /* Labels out, icons stay. Each button keeps its aria-label, so the control
     is still named for a screen reader after the visible text goes. */
  .ubar__btn span:not(.sr-only) { display: none; }
  .ubar__btn { padding: 0 0.45rem; }
  .ubar__sep { margin-inline: 0.15rem; }
}

/* The licence line goes at 1100px, and it needs this reach to go: both
   v9-design-system.css (`.hotline-strip > span:not([data-v9-socials])`, and
   it also hangs a gold dot on it) and motion.min.css (`.hotline-strip span`)
   set display on any span in this bar, at higher specificity than a plain
   class. Left as it was, the licence stayed on at 375px and pushed the
   language switch and staff login 238px off the end of a scrollable bar —
   measured, not guessed. */
@media (max-width: 1100px) {
  .hotline-strip .ubar__inner .ubar__licence,
  .hotline-strip > .ubar__inner span.ubar__licence { display: none !important; }
}

/* TARGET SIZES ON A PHONE.
   motion.min.css lifts `.header-tools button` to 44px at 640px, which catches
   the basket (a button) and misses the account link (an anchor) and every
   control in the utility bar — those measured 30×32.
   30×32 already passes 2.5.8 (24×24), so this is ergonomics, not conformance.
   The first attempt kept the bar at 36px and extended each chip's hit area
   with an ::after — which does not work here: motion.min.css puts
   `overflow-x: auto` on this bar at 640px, so the bar is a scroll container
   and CLIPS anything reaching outside it. Verified by hit-testing 5px above a
   chip: the point landed on nothing. So the bar itself grows instead, by 6px,
   and the chips grow inside it. */
@media (max-width: 640px) {
  :root { --ubar-h: 2.625rem; }
  .ubar__btn { min-height: 2.375rem; padding: 0 0.6rem; }
  .hotline-strip .language-switch button { min-height: 1.9rem; min-width: 2.3rem; }
  .site-header .hs-icon-btn { width: 2.75rem; height: 2.75rem; }
}
@media (min-width: 1281px) {
  /* The phone number is the one label worth keeping at every width above the
     breakpoint: it is a service channel, not a nav item. */
  .ubar__btn--wa span { display: inline; }
}
@media (max-width: 400px) {
  .hotline-strip .language-switch button { min-width: 1.9rem; padding: 0 0.35rem; }
}

/* ============================================================
   5. THE PANELS
   ============================================================ */
.hs-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
}
.hs-overlay[hidden] { display: none !important; }
.hs-overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 42, 61, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 200ms ease;
}
.hs-overlay.is-open .hs-overlay__scrim { opacity: 1; }

.hs-panel {
  position: relative;
  z-index: 1;
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(80vh, 40rem);
  margin: auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 30px 80px rgba(10, 42, 61, 0.35);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-0.75rem) scale(0.985);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.hs-overlay.is-open .hs-panel { opacity: 1; transform: none; }

/* The basket is a side sheet, not a centred dialog: it is a list a donor
   scans and returns from, and it belongs at the edge the button sits on. */
.hs-panel--sheet {
  margin: 0;
  margin-inline-start: auto;
  width: min(26rem, calc(100vw - 1.5rem));
  height: 100%;
  max-height: 100%;
  border-radius: 1rem 0 0 1rem;
  transform: translateX(-1.5rem);
}
[dir='rtl'] .hs-panel--sheet { border-radius: 0 1rem 1rem 0; transform: translateX(1.5rem); }
.hs-overlay.is-open .hs-panel--sheet { transform: none; }

.hs-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-block-end: 1px solid rgba(10, 42, 61, 0.1);
  background: linear-gradient(120deg, #0A2A3D 0%, #12525C 100%);
  color: #fff;
}
.hs-panel__title {
  margin: 0;
  font-family: 'Alexandria', 'Noto Kufi Arabic', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700 !important;
  color: #fff;
}
.hs-panel__close {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.hs-panel__close:hover { background: rgba(255, 255, 255, 0.2); }
.hs-panel__close:focus-visible { outline: 3px solid var(--gold-500, #C9A227); outline-offset: 2px; }
.hs-panel__close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hs-panel__body {
  padding: 1.15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: 'Alexandria', 'Noto Kufi Arabic', system-ui, sans-serif;
  color: #22333B;
}
.hs-panel__foot {
  margin-block-start: 1rem;
  padding-block-start: 0.85rem;
  border-block-start: 1px solid rgba(10, 42, 61, 0.1);
  display: flex;
  justify-content: flex-end;
}
html.hs-locked, html.hs-locked body { overflow: hidden; }

.hs-lead { margin: 0 0 1rem; font-size: 0.84rem; color: #5A6B74; line-height: 1.7; }
.hs-note { margin: 0.75rem 0 0; font-size: 0.78rem; color: #5A6B74; line-height: 1.7; }
.hs-note a { color: #12525C; font-weight: 700; }

.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border: 0;
  border-radius: 0.55rem;
  font-family: 'Alexandria', system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.hs-btn--gold {
  background: linear-gradient(135deg, #C9A227, #E3C15A);
  color: #0A2A3D;
  box-shadow: 0 6px 16px rgba(201, 162, 39, 0.32);
}
.hs-btn--gold:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(201, 162, 39, 0.4); }
.hs-btn--ghost {
  background: transparent;
  border: 1px solid rgba(10, 42, 61, 0.18);
  color: #0A2A3D;
}
.hs-btn--ghost:hover { background: rgba(10, 42, 61, 0.06); }
.hs-btn:focus-visible { outline: 3px solid var(--gold-500, #C9A227); outline-offset: 2px; }

/* ---- search ---- */
.hs-searchbox {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.85rem;
  border: 1px solid rgba(10, 42, 61, 0.16);
  border-radius: 0.65rem;
  background: #F9FAFB;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.hs-searchbox:focus-within {
  border-color: #12525C;
  box-shadow: 0 0 0 3px rgba(18, 82, 92, 0.14);
  background: #fff;
}
.hs-searchbox svg { width: 1.1rem; height: 1.1rem; flex: 0 0 1.1rem; fill: none; stroke: #5A6B74; stroke-width: 1.9; stroke-linecap: round; }
.hs-searchbox input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3rem;
  border: 0;
  background: transparent;
  font-family: 'Alexandria', 'Noto Kufi Arabic', system-ui, sans-serif;
  font-size: 0.95rem;
  color: #0A2A3D;
}
.hs-searchbox input:focus { outline: 0; }
.hs-searchbox input::-webkit-search-cancel-button { -webkit-appearance: none; }

.hs-results { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.hs-results a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.2rem 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  text-decoration: none;
  color: #0A2A3D;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.hs-results a:hover { background: rgba(10, 42, 61, 0.05); }
.hs-results a:focus-visible {
  outline: 0;
  background: rgba(18, 82, 92, 0.08);
  border-color: #12525C;
  box-shadow: 0 0 0 3px rgba(18, 82, 92, 0.14);
}
.hs-results .ttl { font-size: 0.9rem; font-weight: 700; }
.hs-results .dsc {
  grid-column: 1;
  font-size: 0.76rem;
  color: #5A6B74;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hs-results .knd {
  grid-row: 1;
  grid-column: 2;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(18, 82, 92, 0.1);
  color: #12525C;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- accessibility panel ---- */
.hs-field { padding-block: 0.7rem; border-block-end: 1px solid rgba(10, 42, 61, 0.08); }
.hs-field:last-of-type { border-block-end: 0; }
.hs-field--row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hs-field__text { display: grid; gap: 0.15rem; }
.hs-field__label { font-size: 0.88rem; font-weight: 700; color: #0A2A3D; }
.hs-field__hint { font-size: 0.75rem; color: #5A6B74; line-height: 1.6; }
.hs-seg { margin-block-start: 0.55rem; display: inline-flex; padding: 0.2rem; background: rgba(10, 42, 61, 0.05); border-radius: 0.6rem; gap: 0.15rem; }
.hs-seg button {
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  font-family: 'Alexandria', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5A6B74;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.hs-seg button:nth-child(2) { font-size: 0.92rem; }
.hs-seg button:nth-child(3) { font-size: 1.02rem; }
.hs-seg button.is-active { background: #fff; color: #0A2A3D; box-shadow: 0 2px 6px rgba(10, 42, 61, 0.12); }
.hs-seg button:focus-visible { outline: 3px solid var(--gold-500, #C9A227); outline-offset: 1px; }

.hs-switch {
  flex: 0 0 auto;
  position: relative;
  width: 3rem;
  /* 44px of height for a 28px switch: the row is the target, per 2.5.8. */
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hs-switch::before {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  transform: translateY(-50%);
  height: 1.6rem;
  border-radius: 999px;
  background: rgba(10, 42, 61, 0.18);
  transition: background-color 180ms ease;
}
.hs-switch__dot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.2rem;
  transform: translateY(-50%);
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(10, 42, 61, 0.3);
  transition: inset-inline-start 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.hs-switch[aria-checked='true']::before { background: #12525C; }
.hs-switch[aria-checked='true'] .hs-switch__dot { inset-inline-start: 1.6rem; }
.hs-switch:focus-visible { outline: 3px solid var(--gold-500, #C9A227); outline-offset: 2px; border-radius: 999px; }

/* ---- basket sheet ---- */
.hs-basket__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.hs-basket__list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: #F9FAFB;
  border: 1px solid rgba(10, 42, 61, 0.08);
  border-radius: 0.6rem;
}
.hs-basket__list .nm { font-size: 0.86rem; font-weight: 700; color: #0A2A3D; }
.hs-basket__list .nm em {
  display: inline-block;
  margin-inline-start: 0.3rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(18, 82, 92, 0.1);
  color: #12525C;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
}
.hs-basket__list .am { font-size: 0.86rem; font-weight: 800; color: #12525C; white-space: nowrap; }
.hs-basket__list .rm {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(10, 42, 61, 0.14);
  border-radius: 0.5rem;
  background: #fff;
  color: #8A4B4B;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.hs-basket__list .rm:hover { background: #FDECEC; color: #A02B2B; }
.hs-basket__list .rm:focus-visible { outline: 3px solid var(--gold-500, #C9A227); outline-offset: 2px; }
.hs-basket__list .rm svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hs-basket__total {
  margin-block-start: 1rem;
  padding-block: 0.85rem;
  border-block: 1px solid rgba(10, 42, 61, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.92rem;
}
.hs-basket__total strong { font-size: 1.05rem; color: #0A2A3D; }
.hs-basket__actions { margin-block-start: 1rem; display: grid; gap: 0.5rem; }
.hs-basket__actions .hs-btn { width: 100%; }
.hs-empty { padding: 1.5rem 0.5rem; text-align: center; display: grid; gap: 0.85rem; justify-items: center; }
.hs-empty svg { width: 2.75rem; height: 2.75rem; fill: none; stroke: rgba(10, 42, 61, 0.28); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hs-empty p { margin: 0; font-size: 0.9rem; color: #5A6B74; }

/* ============================================================
   6. WHAT THE ACCESSIBILITY PANEL ACTUALLY DOES
   ============================================================
   These three classes are the panel's whole output. They are written on
   <html> by a11y-boot.js before first paint, so a visitor who needs them
   never sees one frame of the page without them. */

/* Contrast: the site's muted greys are what fails first for a low-vision
   reader, so those go to full ink. The dark sections are left alone, and
   WHICH elements qualify is decided by measuring the ground they sit on —
   see markContrastTargets() in header-services.js for why this cannot be a
   selector. .a11y-boost is that measurement's output. */
html.a11y-contrast .a11y-boost { color: #16232B !important; }
html.a11y-contrast .a11y-boost :is(b, strong, em, i, a) { color: inherit !important; }

/* These three are always on a light ground by construction: the utility bar
   and the header bar are white on every page. */
html.a11y-contrast .ubar__btn,
html.a11y-contrast .ubar__licence,
html.a11y-contrast .site-header .site-menu a,
html.a11y-contrast .site-header .site-menu .nav-parent { color: #0A2A3D !important; }
html.a11y-contrast .hs-panel__body :is(.hs-field__hint, .hs-note, .hs-lead) { color: #22333B !important; }
html.a11y-contrast :is(a, button):focus-visible {
  outline: 3px solid #0A2A3D !important;
  outline-offset: 2px !important;
}

/* Links: an underline on content links only. The nav and buttons are already
   shaped like controls, and underlining them makes a page of ruled text. */
html.a11y-underline-links main a:not(.hs-btn):not(.primary-button):not(.ghost-button):not(.text-button):not(.path-card):not(.gdoor) {
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
}

/* Motion: the same shape as the prefers-reduced-motion block the site already
   ships, driven by the visitor's own choice instead of the OS setting — an
   Android or desktop visitor often has no OS switch to reach. */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .hotline-strip,
  .hs-panel,
  .hs-overlay__scrim,
  .hs-switch__dot { transition-duration: 0.01ms !important; }
}