/*!
 * HDM Header v2 — styles.
 *
 * Ported from the approved header-v2 mockup. Every class is prefixed
 * `hdm-hdr-` and every custom property `--hdmh-` so nothing collides with
 * the parent theme, the mega menu (`hdm-mm-`), or plugin CSS on the live site.
 *
 * Layout strategy (no-jank sticky): the desktop header root and the mobile
 * header root are `display:contents`, so their rows become children of
 * `#page` and `position:sticky` works page-wide. The trust band is normal
 * flow and scrolls away on its own; the top bar + nav are individually
 * sticky and "join" once the trust band has scrolled past. JS only toggles
 * cosmetic classes — it never touches layout, so the page never jumps.
 */

/* ---- tokens ---- */
:root {
  --hdmh-blue:     #115FEB;
  --hdmh-blue-600: #0e52cf;
  --hdmh-blue-700: #0b44ad;
  --hdmh-green:    #37B44A;
  --hdmh-green-dk: #2e9a3e;
  --hdmh-gold:     #F5A623;
  --hdmh-tp:       #00B67A;
  --hdmh-ink:      #16223d;
  --hdmh-muted:    #64748b;
  --hdmh-line:     #e4e9f2;
  --hdmh-soft:     #f4f7fe;
  --hdmh-ease:     cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- base / reset (scoped — only header subtree) ---- */
.hdm-hdr *, .hdm-hdr *::before, .hdm-hdr *::after,
.hdm-hdr-m *, .hdm-hdr-m *::before, .hdm-hdr-m *::after,
.hdm-hdr-drawer *, .hdm-hdr-drawer *::before, .hdm-hdr-drawer *::after { box-sizing: border-box; }
.hdm-hdr a, .hdm-hdr-m a, .hdm-hdr-drawer a { text-decoration: none; color: inherit; }
.hdm-hdr img, .hdm-hdr-m img, .hdm-hdr-drawer img { display: block; }
.hdm-hdr button, .hdm-hdr-m button, .hdm-hdr-drawer button {
  font: inherit; cursor: pointer; border: 0; background: none; color: inherit;
}
.hdm-hdr-ic {
  display: inline-block; width: 1em; height: 1em;
  fill: currentColor; flex: 0 0 auto; pointer-events: none;
}
.hdm-hdr-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* `#page` must not clip the page-wide sticky rows. */
.hfeed.site { overflow: visible; }

/* ============================================================
   DESKTOP HEADER  (>= 1000px)
   ============================================================ */
.hdm-hdr { display: contents; }
.hdm-hdr-m { display: none; }

/* ---- Row 1: blue bar ---- */
.hdm-hdr-top {
  background: var(--hdmh-blue);
  position: sticky; top: 0; z-index: 32;
}
.hdm-hdr-top .hdm-hdr-container {
  display: flex; align-items: center; gap: 26px; height: 88px;
}
.hdm-hdr-logo { flex: 0 0 auto; display: flex; }
.hdm-hdr-logo img { height: 46px; width: auto; }

/* desktop search — wraps the FiboSearch [fibosearch] shortcode output.
   FiboSearch carries its own bar styling; this just sizes the wrapper
   into the 88px top bar. Precise FiboSearch theming is below. */
.hdm-hdr-search {
  flex: 1 1 0; min-width: 200px; max-width: 560px;
  display: flex; align-items: center;
}
.hdm-hdr-search .dgwt-wcas-search-wrapp {
  flex: 1 1 0; width: 100%; max-width: none; margin: 0;
}

.hdm-hdr-contact-group { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.hdm-hdr-contact { display: flex; align-items: center; gap: 10px; }
.hdm-hdr-contact-ring {
  width: 44px; height: 44px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.hdm-hdr-contact-ring > .hdm-hdr-ic { width: 100%; height: 100%; }
/* the label + number + hours stack vertically */
.hdm-hdr-ct { display: flex; flex-direction: column; line-height: 1.25; }
.hdm-hdr-ct-label { font-size: 12px; font-weight: 700; opacity: 0.92; }
.hdm-hdr-ct-main  { font-size: 15px; font-weight: 800; }
.hdm-hdr-ct-sub   { font-size: 11px; opacity: 0.78; }
/* the contact + cart links are <a> elements — the parent theme colours
   links #444; force white with enough specificity to win. */
.hdm-hdr-top a.hdm-hdr-contact,
.hdm-hdr-top a.hdm-hdr-contact .hdm-hdr-ct-label,
.hdm-hdr-top a.hdm-hdr-contact .hdm-hdr-ct-main,
.hdm-hdr-top a.hdm-hdr-contact .hdm-hdr-ct-sub,
.hdm-hdr-top a.hdm-hdr-cart,
.hdm-hdr-top a.hdm-hdr-cart .hdm-hdr-cart-label { color: #fff; }

.hdm-hdr-cart {
  display: flex; align-items: center; gap: 9px;
  background: var(--hdmh-green); color: #fff;
  border-radius: 9px; padding: 9px 15px;
  flex: 0 0 auto; position: relative; transition: background 0.15s;
}
.hdm-hdr-cart:hover { background: var(--hdmh-green-dk); }
.hdm-hdr-cart-wrap { position: relative; display: inline-flex; }
.hdm-hdr-cart .hdm-hdr-ic { width: 24px; height: 24px; color: #fff; }
.hdm-hdr-cart-badge {
  position: absolute; top: -8px; right: -8px;
  background: #fff; color: var(--hdmh-green);
  min-width: 19px; height: 19px; border-radius: 50%;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.hdm-hdr-cart-label { font-size: 14px; font-weight: 700; }
/* Hide the cart badge when count is 0 — cache-safe-cart.js hydrates the
   count via AJAX so this class is toggled in header.js on text change. */
.hdm-hdr-cart-badge.is-empty,
.hdm-hdr-mcart-badge.is-empty { display: none; }

/* ---- Row 2: white trust band (normal flow; scrolls away) ---- */
.hdm-hdr-trust {
  background: #fff; border-bottom: 1px solid var(--hdmh-line);
  position: relative; z-index: 31;
}
.hdm-hdr-trust .hdm-hdr-container {
  display: flex; align-items: center; gap: 10px; min-height: 132px;
}
.hdm-hdr-vps { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; }
.hdm-hdr-vp { display: flex; align-items: center; gap: 12px; padding: 0 16px; min-width: 0; }
.hdm-hdr-vp + .hdm-hdr-vp { border-left: 1px solid var(--hdmh-line); }
.hdm-hdr-vp-ic {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1.6px dashed #aac3f5;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; color: var(--hdmh-blue);
}
.hdm-hdr-vp-ic .hdm-hdr-ic { width: 24px; height: 24px; }
.hdm-hdr-vp-text { line-height: 1.3; min-width: 0; }
.hdm-hdr-vp-text strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--hdmh-ink); white-space: nowrap; }
.hdm-hdr-vp-text span { display: block; font-size: 12px; color: var(--hdmh-muted); margin-top: 1px; white-space: nowrap; }

.hdm-hdr-care {
  flex: 0 0 auto; align-self: flex-end;
  height: 138px; width: auto;
  margin: 0 6px -1px; border-radius: 8px 8px 0 0;
}

.hdm-hdr-rev {
  flex: 0 0 auto; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 9px; padding: 0 6px;
}
.hdm-hdr-rev-headline { font-size: 16px; font-weight: 800; color: var(--hdmh-ink); line-height: 1.25; }
.hdm-hdr-rev-row { display: flex; align-items: flex-start; justify-content: center; gap: 32px; }
.hdm-hdr-rev-chip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; }
.hdm-hdr-rev-brand { display: flex; align-items: center; gap: 8px; height: 28px; }
.hdm-hdr-rev-logo { height: 28px; width: auto; flex: 0 0 auto; }
.hdm-hdr-rev-tplogo { height: 23px; width: auto; flex: 0 0 auto; }
.hdm-hdr-rev-name { font-size: 17px; font-weight: 700; color: #5f6368; }
.hdm-hdr-rev-line { display: flex; align-items: center; gap: 6px; }
/* Stars: 2 layers — gray base + gold overlay clipped to (rating/5)*100%. */
.hdm-hdr-rev-stars { position: relative; display: inline-block; line-height: 0; }
.hdm-hdr-rev-stars-bg,
.hdm-hdr-rev-stars-fg { display: inline-flex; gap: 1px; }
.hdm-hdr-rev-stars-bg .hdm-hdr-ic,
.hdm-hdr-rev-stars-fg .hdm-hdr-ic { width: 13px; height: 13px; }
.hdm-hdr-rev-stars-bg { color: #d4d8df; }
.hdm-hdr-rev-stars-fg {
  position: absolute; top: 0; left: 0; height: 100%;
  width: var(--hdm-stars-fill, 100%); overflow: hidden; white-space: nowrap;
  color: var(--hdmh-gold);
}
.hdm-hdr-rev-tpstars { height: 14px; width: auto; }
.hdm-hdr-rev-rate { font-size: 14px; font-weight: 800; color: var(--hdmh-ink); }
/* External-link icon on the review chips */
.hdm-hdr-rev-ext { width: 12px; height: 12px; color: #94a3b8; flex: 0 0 auto; margin-left: 2px; }
/* The whole review chip is a link — keep the existing layout but clickable */
a.hdm-hdr-rev-chip { text-decoration: none; color: inherit; transition: opacity 0.13s; cursor: pointer; }
a.hdm-hdr-rev-chip:hover .hdm-hdr-rev-ext { color: var(--hdmh-blue); }

/* ---- Row 3: nav bar — wp_nav_menu('primary') output, styled to the mockup.
   Sticks under the 88px top bar so it "joins" the main bar on scroll. ---- */
.hdm-hdr-nav {
  background: var(--hdmh-blue);
  position: sticky; top: 88px; z-index: 32;
  transition: background 0.25s var(--hdmh-ease), box-shadow 0.25s var(--hdmh-ease);
}
.hdm-hdr-nav.is-scrolled {
  background: var(--hdmh-blue-600);
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}
.hdm-hdr-nav .hdm-hdr-container {
  display: flex; align-items: stretch; justify-content: center;
}
/* the <ul> wp_nav_menu emits */
.hdm-hdr-nav ul.hdm-hdr-nav-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; justify-content: center; gap: 2px;
}
/* top-level items only — sub-menus belong to the mega menu / dropdowns.
   Mega-menu triggers must stay position:static so their full-width panel
   anchors to .hdm-hdr-nav, not to the narrow <li>; only the regular
   dropdown items need position:relative to anchor their .sub-menu-wrapper. */
.hdm-hdr-nav ul.hdm-hdr-nav-menu > li { display: flex; }
.hdm-hdr-nav ul.hdm-hdr-nav-menu > li:not(.hdm-mm-trigger) { position: relative; }
.hdm-hdr-nav ul.hdm-hdr-nav-menu > li > a {
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-size: 14px; font-weight: 600;
  padding: 13px 16px; white-space: nowrap; border-radius: 5px;
  transition: background 0.15s;
}
.hdm-hdr-nav ul.hdm-hdr-nav-menu > li > a:hover { background: var(--hdmh-blue-700); }
.hdm-hdr-nav ul.hdm-hdr-nav-menu > li > a .hdm-hdr-ic { width: 19px; height: 19px; color: #fff; }
/* the shoptimizer parent draws a chevron via :after on children items; keep it */
.hdm-hdr-nav ul.hdm-hdr-nav-menu > li.menu-item-has-children > a::after,
.hdm-hdr-nav ul.hdm-hdr-nav-menu > li.hdm-mm-trigger > a::after {
  content: ""; display: inline-block;
  width: 8px; height: 8px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: 0.85;
}
/* nav item icons are injected by the renderer as a leading <svg> */
.hdm-hdr-nav .hdm-hdr-nav-ic { width: 19px; height: 19px; color: #fff; flex: 0 0 auto; }

/* ---- Regular dropdowns (Help & Info etc.) — submenuwrap walker output.
   Shoptimizer's own hide/show for .sub-menu-wrapper is scoped to
   .main-navigation, which this nav deliberately is not; replicate the
   hover reveal here, scoped to .hdm-hdr-nav. Mega-menu triggers are
   excluded — their legacy wrapper is display:none'd by mega-menu.css and
   they use .hdm-mm-panel instead. ---- */
.hdm-hdr-nav li.menu-item-has-children:not(.hdm-mm-trigger) > .sub-menu-wrapper {
  position: absolute; top: 100%; left: 0; z-index: 200;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.16s var(--hdmh-ease), transform 0.16s var(--hdmh-ease), visibility 0s linear 0.16s;
  pointer-events: none;
}
.hdm-hdr-nav li.menu-item-has-children:not(.hdm-mm-trigger):hover > .sub-menu-wrapper,
.hdm-hdr-nav li.menu-item-has-children:not(.hdm-mm-trigger):focus-within > .sub-menu-wrapper {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.16s var(--hdmh-ease), transform 0.16s var(--hdmh-ease), visibility 0s linear 0s;
  pointer-events: auto;
}
.hdm-hdr-nav .sub-menu-wrapper > .container {
  background: #fff; border-radius: 0 0 8px 8px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
  padding: 6px;
}
.hdm-hdr-nav ul.sub-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.hdm-hdr-nav ul.sub-menu > li > a {
  display: block; padding: 9px 16px; border-radius: 5px;
  color: var(--hdmh-ink); font-size: 14px; font-weight: 500;
  white-space: nowrap; text-decoration: none;
  transition: background 0.13s, color 0.13s;
}
.hdm-hdr-nav ul.sub-menu > li > a:hover {
  background: #eef2f8; color: var(--hdmh-blue);
}

/* ---- Desktop responsive: keep the trust band intact down to 1000px ---- */
@media (min-width: 1000px) and (max-width: 1240px) {
  .hdm-hdr-container { padding: 0 14px; }
  .hdm-hdr-top .hdm-hdr-container { gap: 16px; }
  .hdm-hdr-contact-group { gap: 14px; }
  .hdm-hdr-ct-sub { display: none; }
}
@media (min-width: 1000px) and (max-width: 1150px) {
  .hdm-hdr-trust .hdm-hdr-container { gap: 6px; }
  .hdm-hdr-vp { padding: 0 11px; gap: 9px; }
  .hdm-hdr-vp-ic { width: 42px; height: 42px; }
  .hdm-hdr-vp-ic .hdm-hdr-ic { width: 20px; height: 20px; }
  .hdm-hdr-vp-text strong { font-size: 13px; }
  .hdm-hdr-vp-text span { display: none; }
  .hdm-hdr-care { height: 124px; }
  .hdm-hdr-rev-headline { font-size: 14px; max-width: 220px; }
  .hdm-hdr-rev-row { gap: 18px; }
  .hdm-hdr-rev-logo { height: 24px; }
  .hdm-hdr-rev-tplogo { height: 20px; }
  .hdm-hdr-rev-name { font-size: 15px; }
  .hdm-hdr-nav ul.hdm-hdr-nav-menu > li > a { padding: 13px 11px; gap: 6px; font-size: 13.5px; }
  /* top bar: tighten so logo + search + contact + cart fit without
     overflowing the viewport (the 1000-1100px "layout breaks" range) */
  .hdm-hdr-top .hdm-hdr-container { gap: 12px; }
  .hdm-hdr-logo img { height: 40px; }
  .hdm-hdr-contact-group { gap: 10px; }
  .hdm-hdr-contact { gap: 7px; }
  .hdm-hdr-contact-ring { width: 38px; height: 38px; padding: 7px; }
  .hdm-hdr-ct-label { font-size: 11px; }
  .hdm-hdr-ct-main { font-size: 13.5px; }
  .hdm-hdr-cart { padding: 9px 11px; gap: 7px; }
  .hdm-hdr-cart .hdm-hdr-ic { width: 22px; height: 22px; }
}
@media (min-width: 1000px) and (max-width: 1050px) {
  .hdm-hdr-vp { padding: 0 8px; gap: 7px; }
  .hdm-hdr-vp-ic { width: 38px; height: 38px; }
  .hdm-hdr-vp-ic .hdm-hdr-ic { width: 18px; height: 18px; }
}

/* ============================================================
   MOBILE HEADER  (< 1000px)
   ============================================================ */
@media (max-width: 999.98px) {
  .hdm-hdr { display: none; }
  .hdm-hdr-m { display: contents; }

  /* ROW 1: trust strip — normal flow, scrolls away on its own */
  .hdm-hdr-mtrust {
    background: var(--hdmh-soft);
    border-bottom: 1px solid var(--hdmh-line);
    position: relative; z-index: 1;
  }
  .hdm-hdr-m-stars { display: inline-flex; gap: 1px; }
  .hdm-hdr-m-stars .hdm-hdr-ic { width: 13px; height: 13px; color: var(--hdmh-gold); }

  /* MV1 — single review line */
  .hdm-hdr-mt1 { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 7px 14px; flex-wrap: wrap; }
  .hdm-hdr-mt1-sep { width: 1px; height: 18px; background: var(--hdmh-line); }
  .hdm-hdr-mt1-mark { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--hdmh-muted); }
  .hdm-hdr-mt1-mark img { height: 15px; width: auto; flex: 0 0 auto; }
  .hdm-hdr-mt1-mark .hdm-hdr-tp { width: 14px; height: 14px; color: var(--hdmh-tp); flex: 0 0 auto; }
  .hdm-hdr-mt1-mark .hdm-hdr-m-stars .hdm-hdr-ic { width: 11px; height: 11px; }
  .hdm-hdr-mt1-mark strong { font-size: 13px; font-weight: 800; color: var(--hdmh-ink); }

  /* MV2 — care image + trust statement + value icons */
  .hdm-hdr-mt2 { display: flex; align-items: center; gap: 11px; padding: 8px 14px; }
  .hdm-hdr-mt2-img { width: 70px; height: 64px; border-radius: 8px; object-fit: cover; object-position: center 20%; flex: 0 0 auto; }
  .hdm-hdr-mt2-body { line-height: 1.25; min-width: 0; }
  .hdm-hdr-mt2-body strong { display: block; font-size: 12.5px; font-weight: 800; color: var(--hdmh-ink); }
  .hdm-hdr-mt2-row { display: flex; align-items: center; gap: 12px; margin-top: 3px; }
  a.hdm-hdr-mt2-plat,
  .hdm-hdr-mt2-plat { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--hdmh-muted); font-weight: 600; text-decoration: none; }
  .hdm-hdr-mt2-plat img { height: 13px; width: auto; flex: 0 0 auto; }
  .hdm-hdr-mt2-plat .hdm-hdr-tp { width: 12px; height: 12px; color: var(--hdmh-tp); flex: 0 0 auto; }
  .hdm-hdr-mt2-plat b { font-size: 11.5px; font-weight: 800; color: var(--hdmh-ink); }
  .hdm-hdr-mt2-ext { width: 10px; height: 10px; color: #94a3b8; flex: 0 0 auto; margin-left: 1px; }
  .hdm-hdr-mt2-icons { display: flex; gap: 13px; margin-top: 5px; }
  .hdm-hdr-mt2-ic { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--hdmh-muted); }
  .hdm-hdr-mt2-ic .hdm-hdr-chipic {
    width: 20px; height: 20px; border-radius: 50%;
    border: 1.3px dashed #aac3f5;
    display: flex; align-items: center; justify-content: center;
    color: var(--hdmh-blue); flex: 0 0 auto;
  }
  .hdm-hdr-mt2-ic .hdm-hdr-chipic .hdm-hdr-ic { width: 11px; height: 11px; }

  /* MV3 — three icon value chips */
  .hdm-hdr-mt3 { display: flex; align-items: center; justify-content: space-around; gap: 6px; padding: 7px 10px; }
  .hdm-hdr-mchip { display: flex; align-items: center; gap: 6px; }
  .hdm-hdr-mchip .hdm-hdr-chipic {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1.4px dashed #aac3f5;
    display: flex; align-items: center; justify-content: center;
    color: var(--hdmh-blue); flex: 0 0 auto;
  }
  .hdm-hdr-mchip .hdm-hdr-chipic .hdm-hdr-ic { width: 15px; height: 15px; }
  .hdm-hdr-mchip span { font-size: 11.5px; font-weight: 700; color: var(--hdmh-ink); }

  /* MV4 — split: Google / Trustpilot / Free shipping */
  .hdm-hdr-mt4 { display: flex; align-items: center; justify-content: space-around; gap: 6px; padding: 8px 10px; }
  .hdm-hdr-mt4-side { display: flex; align-items: center; gap: 7px; }
  .hdm-hdr-mt4-side .hdm-hdr-ic { width: 18px; height: 18px; color: var(--hdmh-blue); flex: 0 0 auto; }
  .hdm-hdr-mt4-side .hdm-hdr-tp { color: var(--hdmh-tp); }
  .hdm-hdr-mt4-glogo { height: 18px; width: auto; flex: 0 0 auto; }
  .hdm-hdr-mt4-stack { line-height: 1.12; }
  .hdm-hdr-mt4-stack strong { display: block; font-size: 12px; font-weight: 800; color: var(--hdmh-ink); }
  .hdm-hdr-mt4-stack span { display: block; font-size: 9.5px; color: var(--hdmh-muted); }
  .hdm-hdr-mt4-divider { width: 1px; height: 24px; background: var(--hdmh-line); flex: 0 0 auto; }

  /* ROWS 2+3: sticky wrapper, moved by transform only (no reflow, no jank) */
  .hdm-hdr-msticky {
    position: sticky; top: 0; z-index: 30;
    transform: translateY(0);
    transition: transform 0.28s var(--hdmh-ease), box-shadow 0.25s var(--hdmh-ease);
    will-change: transform;
  }
  .hdm-hdr-msticky.hdr-down { transform: translateY(-62px); }
  .hdm-hdr-msticky.is-scrolled { box-shadow: 0 5px 16px rgba(0,0,0,0.16); }

  /* ROW 2: burger / logo / cart */
  .hdm-hdr-mlogo {
    background: var(--hdmh-blue);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 14px; height: 62px;
  }
  .hdm-hdr-miconbtn {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex: 0 0 auto; position: relative; border-radius: 8px;
  }
  .hdm-hdr-miconbtn:active { background: rgba(255,255,255,0.12); }
  .hdm-hdr-miconbtn .hdm-hdr-ic { width: 24px; height: 24px; color: #fff; }
  .hdm-hdr-miconbtn.hdm-hdr-mcart { background: var(--hdmh-green); }
  .hdm-hdr-miconbtn.hdm-hdr-mcart:active { background: var(--hdmh-green-dk); }
  .hdm-hdr-mlogo-link { flex: 1 1 auto; display: flex; justify-content: center; }
  .hdm-hdr-mlogo-link img { height: 38px; width: auto; }
  .hdm-hdr-mcart-badge {
    position: absolute; top: -2px; right: -2px;
    background: #fff; color: var(--hdmh-green);
    min-width: 17px; height: 17px; border-radius: 50%;
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  }

  /* ROW 3: call / live-chat / search */
  .hdm-hdr-maction-bar {
    background: #fff;
    display: flex; align-items: stretch; gap: 8px;
    padding: 8px 14px; border-bottom: 1px solid var(--hdmh-line);
  }
  .hdm-hdr-maction {
    flex: 1 1 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 8px;
    background: var(--hdmh-soft); border: 1px solid var(--hdmh-line);
    border-radius: 9px; color: var(--hdmh-ink);
  }
  .hdm-hdr-maction .hdm-hdr-maction-ic { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
  .hdm-hdr-maction-text { line-height: 1.15; }
  .hdm-hdr-maction-text strong { display: block; font-size: 12.5px; font-weight: 800; }
  .hdm-hdr-maction-text span { display: block; font-size: 10px; color: var(--hdmh-muted); }
  .hdm-hdr-maction.hdm-hdr-msearch {
    flex: 0 0 52px; background: var(--hdmh-blue); border-color: var(--hdmh-blue);
  }
  .hdm-hdr-maction.hdm-hdr-msearch .hdm-hdr-ic { color: #fff; width: 20px; height: 20px; }

  /* Hidden FiboSearch instance — needs to be in the DOM so FiboSearch
     attaches its mobile overlay handler, but is never shown inline; the
     mobile search icon / drawer search click its .js-dgwt-wcas-enable-
     mobile-form trigger to open the plugin's full-screen overlay. */
  .hdm-hdr-mfibo {
    position: absolute; left: -9999px; top: 0;
    width: 1px; height: 1px; overflow: hidden;
  }
}

/* ============================================================
   OFF-CANVAS DRAWER  (toggle menu — tablet + mobile)
   ============================================================ */
.hdm-hdr-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--hdmh-ease), visibility 0.25s var(--hdmh-ease);
  z-index: 100000;
}
.hdm-hdr-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 348px; max-width: 87vw; background: #fff;
  z-index: 100001;
  transform: translateX(-100%);
  transition: transform 0.3s var(--hdmh-ease);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* top padding reserves a clear zone for the 44px close button so
     nothing (search, nav cards) collides with it. */
  padding: 68px 14px 26px;
  box-shadow: 6px 0 28px rgba(0,0,0,0.2);
}
body.hdm-hdr-drawer-open .hdm-hdr-drawer-overlay { opacity: 1; visibility: visible; }
body.hdm-hdr-drawer-open .hdm-hdr-drawer { transform: translateX(0); }

/* Close button — prominent red square with a bold white X so it's
   easy to find for older / less-confident users. Selector includes
   `.hdm-hdr-drawer button` to beat the in-header button reset above. */
.hdm-hdr-drawer button.hdm-hdr-drawer-close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: #dc2626; color: #fff; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.hdm-hdr-drawer button.hdm-hdr-drawer-close .hdm-hdr-ic { width: 24px; height: 24px; stroke-width: 3.2; }
.hdm-hdr-drawer button.hdm-hdr-drawer-close:hover,
.hdm-hdr-drawer button.hdm-hdr-drawer-close:active { background: #b91c1c; }

/* Drawer search — a clickable affordance (a <span> field, not an <input>,
   so the parent theme's input[type=search] padding/background rules don't
   apply). Tapping it opens FiboSearch's mobile overlay. */
.hdm-hdr-drawer-search {
  display: flex; align-items: center;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 11px 14px; gap: 10px;
  margin: 0 0 16px;
  cursor: pointer;
}
.hdm-hdr-drawer-search:hover { background: #e2e8f0; }
.hdm-hdr-drawer-search .hdm-hdr-dsicon {
  display: flex; align-items: center; color: #94a3b8; flex: 0 0 auto;
}
.hdm-hdr-drawer-search .hdm-hdr-dsicon .hdm-hdr-ic { width: 17px; height: 17px; }
.hdm-hdr-drawer-search .hdm-hdr-dsfield {
  flex: 1; min-width: 0;
  font-size: 14px; color: #94a3b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* drawer nav list — wp_nav_menu('primary') output, restyled as cards */
.hdm-hdr-drawer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hdm-hdr-drawer-list li { margin: 0; }
/* top-level <li> is the positioning context for its absolute chevron toggle */
.hdm-hdr-drawer-list > li { position: relative; }
.hdm-hdr-drawer-list > li > a,
.hdm-hdr-drawer-row {
  display: flex; align-items: center; gap: 12px;
  background: #f6f8fb; border: 1px solid #eef1f6; border-radius: 11px;
  padding: 12px 13px; color: var(--hdmh-ink);
}
/* leave room on the right for the chevron toggle on items that have one */
.hdm-hdr-drawer-list > li.menu-item-has-children > .hdm-hdr-drawer-row { padding-right: 52px; }
.hdm-hdr-drawer-list > li > a:active { background: #eef2f8; }
.hdm-hdr-drawer-list .hdm-hdr-di-ic {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
  background: #e8f0fe;
  display: flex; align-items: center; justify-content: center;
  color: var(--hdmh-blue);
}
.hdm-hdr-drawer-list .hdm-hdr-di-ic .hdm-hdr-ic { width: 19px; height: 19px; }
.hdm-hdr-drawer-list .hdm-hdr-di-label { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--hdmh-ink); }
/* chevron is its own tappable zone — tapping it expands, tapping the label
   navigates. It is a sibling of .hdm-hdr-drawer-row inside the <li>, so it
   is absolutely positioned over the right edge of the row (height matches
   the row's natural height: 34px icon + 2x12px padding = 58px). */
.hdm-hdr-di-toggle {
  position: absolute; top: 0; right: 7px;
  width: 38px; height: 58px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: #94a0b3; border-radius: 7px; background: transparent;
}
.hdm-hdr-di-toggle:active { background: #e8edf5; }
.hdm-hdr-di-toggle .hdm-hdr-ic { width: 15px; height: 15px; transition: transform 0.2s var(--hdmh-ease); }
.hdm-hdr-drawer-list > li.hdm-hdr-open .hdm-hdr-di-toggle .hdm-hdr-ic { transform: rotate(90deg); }
/* nested sub-menu inside the drawer */
.hdm-hdr-drawer-list ul.sub-menu {
  list-style: none; margin: 4px 0 2px; padding: 0 0 0 12px;
  display: none; flex-direction: column; gap: 4px;
}
.hdm-hdr-drawer-list > li.hdm-hdr-open > ul.sub-menu { display: flex; }
.hdm-hdr-drawer-list ul.sub-menu li a {
  display: block; padding: 9px 12px; font-size: 13.5px; color: var(--hdmh-muted);
  border-radius: 8px; background: #fbfcfe; border: 1px solid #f0f3f8;
}
.hdm-hdr-drawer-list ul.sub-menu li a:active { background: #eef2f8; }

/* "WE'RE HERE TO HELP" — quieter heading; the section already reads as
   important because of the icons + titles, no need for a brand-blue tag. */
.hdm-hdr-drawer-sec {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.6px;
  color: var(--hdmh-muted); text-transform: uppercase; margin: 20px 2px 9px;
}
.hdm-hdr-drawer-help { display: flex; flex-direction: column; gap: 9px; }
/* Help cards: neutral white card + light border. The colour comes from
   the gradient phone-call / live-caht / email SVGs themselves — no need
   for tinted backgrounds or coloured circle "bubbles" behind them. */
.hdm-hdr-help-card {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--hdmh-line); border-radius: 12px;
  padding: 10px 12px;
  transition: background 0.13s, border-color 0.13s;
}
.hdm-hdr-help-card:hover,
.hdm-hdr-help-card:active { background: #f8fafc; border-color: #cbd5e1; }
.hdm-hdr-help-card .hdm-hdr-hc-ic {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
/* The icon is an inline <svg><use> pointing at one of the gradient
   brand symbols (phone-grad / chat-grad / mail-grad). All three share
   the same blue->green linearGradient, so the card row reads as a
   coordinated set with no per-icon HTTP requests. */
.hdm-hdr-help-card .hdm-hdr-hc-ic .hdm-hdr-ic { width: 36px; height: 36px; }
.hdm-hdr-hc-body { flex: 1; line-height: 1.3; min-width: 0; }
.hdm-hdr-hc-body strong { display: block; font-size: 14px; font-weight: 800; color: var(--hdmh-ink); }
.hdm-hdr-hc-body span { display: block; font-size: 11.5px; color: var(--hdmh-muted); }
/* keep a subtle per-card accent on the title so users still get the
   colour-coded read at a glance — just on the title, not the whole box. */
.hdm-hdr-hc-call .hdm-hdr-hc-body strong { color: var(--hdmh-blue); }
.hdm-hdr-hc-chat .hdm-hdr-hc-body strong { color: var(--hdmh-green-dk); }
.hdm-hdr-hc-email .hdm-hdr-hc-body strong { color: var(--hdmh-blue); font-size: 12.5px; word-break: break-word; }
.hdm-hdr-help-card .hdm-hdr-hc-arrow { width: 15px; height: 15px; color: #c2cad6; flex: 0 0 auto; }

.hdm-hdr-drawer-badges { display: flex; gap: 9px; margin-top: 16px; }
.hdm-hdr-dbadge {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  background: #f6f8fb; border: 1px solid #eef1f6; border-radius: 11px;
  padding: 11px 12px;
}
.hdm-hdr-dbadge > .hdm-hdr-ic { width: 22px; height: 22px; color: var(--hdmh-blue); flex: 0 0 auto; }
.hdm-hdr-dbadge-body { line-height: 1.25; min-width: 0; }
.hdm-hdr-dbadge-body strong { display: block; font-size: 12px; font-weight: 800; color: var(--hdmh-ink); }
.hdm-hdr-dbadge-body span { display: block; font-size: 10.5px; color: var(--hdmh-muted); }

/* the drawer is the mobile/tablet menu only — never show on wide desktop */
@media (min-width: 1000px) {
  .hdm-hdr-drawer, .hdm-hdr-drawer-overlay { display: none; }
}

/* =============================================================
   FiboSearch mobile overlay — brand-match the search submit so
   the floating white-circle magnifier doesn't feel out of place
   against the rest of the header. The overlay is appended to
   <body>, so these rules are not nested inside .hdm-hdr.
   ============================================================= */
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-submit {
  background: var(--hdmh-green);
  border-radius: 10px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-submit:hover,
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-submit:active {
  background: var(--hdmh-green-dk);
}
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier path,
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-submit svg path { fill: #fff; }
/* return / back button — keep it neutral, prominent enough to find */
.dgwt-wcas-overlay-mobile .dgwt-wcas-om-return {
  background: #f1f5f9; color: var(--hdmh-ink); border-radius: 10px;
}
.dgwt-wcas-overlay-mobile .dgwt-wcas-om-return:hover,
.dgwt-wcas-overlay-mobile .dgwt-wcas-om-return:active { background: #e2e8f0; }