/* ==========================================================================
   Ear Wax Specialist — Mega Menu
   Colours, fonts, widths and the breakpoint are customised through CSS
   custom properties injected by the plugin (Settings → Mega Menu).
   Everything is namespaced .ewsm- so it cannot collide with your theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DEFAULTS — do not remove.
   These defaults live in the STATIC stylesheet on purpose. The plugin also
   prints a small inline <style> with the user's chosen colours/breakpoint,
   which OVERRIDES the values below. But caching / CSS-optimizer plugins
   (LiteSpeed, WP Rocket, Autoptimize, Cloudflare "critical CSS", etc.) often
   strip or move that inline block on cached pages served to logged-out
   visitors. When that happens these defaults keep the menu fully styled
   instead of collapsing to unstyled links. The inline block is now an
   enhancement, never a requirement.
   -------------------------------------------------------------------------- */
:root {
  --ewsm-navy:      #103154;
  --ewsm-navy-dark: #0C2A47;
  --ewsm-blue:      #2E6FD4;
  --ewsm-panel:     #EAF2FC;
  --ewsm-card:      #B4C8E2;
  --ewsm-teal:      #3D8B87;
  --ewsm-green:     #5FBF9B;
  --ewsm-text:      #12233A;
  --ewsm-tb-from:   #1E4F8E;
  --ewsm-tb-mid:    #2F6B8C;
  --ewsm-tb-to:     #5E8E88;
  --ewsm-tb-gap:    34px;
  --ewsm-tb-h:      48px;
  --ewsm-tb-size:   14px;
  --ewsm-max:       1366px;
  --ewsm-bp:        1280px;
  --ewsm-f-head:    'Quicksand', system-ui, sans-serif;
  --ewsm-f-body:    'Montserrat', system-ui, sans-serif;
}

.ewsm,
.ewsm *,
.ewsm *::before,
.ewsm *::after { box-sizing: border-box; }

/* ==========================================================================
   THEME ARMOUR
   Themes and page builders (Elementor, Astra, Divi, etc.) style bare <button>,
   <a>, <ul>, <li> and heading elements. Those rules leak into the menu — the
   usual symptom is the dropdown buttons picking up the theme's button colour.
   Everything below is scoped to .ewsm and uses !important deliberately, so the
   menu renders identically no matter which theme it is dropped into.
   Remove this block only if you WANT the theme to style the menu.
   ========================================================================== */
.ewsm button,
.ewsm a,
.ewsm ul,
.ewsm li,
.ewsm p,
.ewsm h2,
.ewsm h3,
.ewsm h4,
.ewsm img,
.ewsm span,
.ewsm div {
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  float: none !important;
}

.ewsm button {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto;
  height: auto;
  line-height: inherit;
  /* Every button in this menu uses the heading face. Declared here with
     !important so a theme's `button { font-family: … !important }` cannot
     win — that is the usual cause of the menu suddenly rendering in a serif. */
  font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif) !important;
  color: inherit;
  outline-offset: 0;
  transition: none;
}

.ewsm a {
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
}

.ewsm ul,
.ewsm li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
.ewsm li::before,
.ewsm li::marker { content: none !important; }

.ewsm h2,
.ewsm h3,
.ewsm h4 {
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: left !important;
}
.ewsm h2::after, .ewsm h3::after, .ewsm h4::after,
.ewsm h2::before, .ewsm h3::before, .ewsm h4::before { content: none !important; }

.ewsm p { margin: 0; padding: 0 !important; }

.ewsm img {
  max-width: 100%;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  padding: 0 !important;
  background: none !important;
}
/* -------------------- end theme armour -------------------- */

.ewsm {
  --ewsm-r-lg: 22px;
  --ewsm-r-md: 14px;
  --ewsm-r-sm: 10px;
  --ewsm-pill: 999px;
  --ewsm-shadow: 0 22px 60px rgba(12,42,71,.18);
  --ewsm-shadow-btn: 0 4px 14px rgba(16,49,84,.22);
  --ewsm-ease: cubic-bezier(.22,.7,.3,1);

  position: relative;
  z-index: 999;
  font-family: var(--ewsm-f-body, 'Montserrat', system-ui, sans-serif);
  color: var(--ewsm-text, #12233A);
  line-height: 1.5;
}

.ewsm--sticky { position: sticky; top: 0; }
.ewsm-bar { overflow-x: clip; }

.ewsm-wrap {
  max-width: var(--ewsm-max, 1366px);
  margin: 0 auto;
  padding-inline: 24px;
  width: 100%;
}

.ewsm-ico { display: inline-flex; flex: none; }
.ewsm-ico svg { width: 1em; height: 1em; display: block; }

/* ---------- top trust bar ---------- */
.ewsm-topbar {
  background: linear-gradient(90deg,
              var(--ewsm-tb-from, #1E4F8E) 0%,
              var(--ewsm-tb-mid, #2F6B8C) 50%,
              var(--ewsm-tb-to, #5E8E88) 100%);
  color: #fff;
}
.ewsm-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--ewsm-tb-gap, 34px);
  flex-wrap: wrap;
  min-height: var(--ewsm-tb-h, 48px);
  font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif);
  font-size: var(--ewsm-tb-size, 14px);
  line-height: 1.2;
  padding-block: 6px;
}
.ewsm-topbar__inner.is-center  { justify-content: center; }
.ewsm-topbar__inner.is-left    { justify-content: flex-start; }
.ewsm-topbar__inner.is-right   { justify-content: flex-end; }
.ewsm-topbar__inner.is-between { justify-content: space-between; }

.ewsm-tb__text { font-weight: 600; white-space: nowrap; }
.ewsm-tb__text.is-bold { font-weight: 700; }
a.ewsm-tb__text { color: #fff; text-decoration: none; }
a.ewsm-tb__text:hover { text-decoration: underline; }

/* rating squares */
.ewsm-tb__stars { display: inline-flex; gap: 2px; }
.ewsm-tb__star {
  width: 1.05em; height: 1.05em;
  background: #00B67A;
  display: grid; place-items: center;
}
.ewsm-tb__star svg { width: .8em; height: .8em; display: block; }

/* brand marks */
.ewsm-tb__mark { display: inline-flex; align-items: center; }
.ewsm-tb__trustpilot { gap: 5px; }
.ewsm-tb__tpstar { width: 1.15em; height: 1.15em; display: block; }
.ewsm-tb__tpword {
  font-weight: 700; color: #fff; letter-spacing: -.02em;
  font-size: .95em;
}
.ewsm-tb__google {
  font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif);
  font-weight: 700; font-size: 1.15em; letter-spacing: -.02em;
}
.ewsm-tb__img { display: block; width: auto; }

.ewsm-tb__phone {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; text-decoration: none;
  font-weight: 600; font-size: 1em; white-space: nowrap;
  transition: color .16s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1));
}
.ewsm-tb__phone:hover { color: #9FE8D3; }
.ewsm-tb__phone .ewsm-ico { font-size: 1em; }

/* ---------- nav bar ---------- */
.ewsm-bar { background: #fff; }
.ewsm-bar__inner {
  display: flex; align-items: center; gap: 10px;
  min-height: 78px;
  flex-wrap: nowrap;
  overflow: visible;
  /* Positioning context for the mega panel, so the dropdown lines up with the
     container width set in settings rather than spanning the whole viewport. */
  position: relative;
}

.ewsm-logo {
  display: inline-flex; align-items: center; margin-right: 14px;
  flex: 0 0 auto; min-width: 0; text-decoration: none;
}
.ewsm-logo img { height: auto; display: block; max-width: 100%; }
.ewsm-logo__text {
  font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif); font-weight: 700; font-size: 19px;
  color: var(--ewsm-navy, #103154);
}

.ewsm-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
  flex-wrap: nowrap; min-width: 0;
}
.ewsm-menu__item { position: static; margin: 0; flex: 0 0 auto; }

.ewsm-menu__link {
  font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif) !important;
  font-weight: 600 !important; font-size: 15.5px !important;
  color: var(--ewsm-navy, #103154) !important; cursor: pointer;
  padding: 11px 15px;
  border-radius: var(--ewsm-r-sm, 10px) !important;
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; line-height: 1.2;
  white-space: nowrap; flex: 0 0 auto;
  transition: color .18s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1)), background .18s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1));
}
.ewsm-menu__link:hover,
.ewsm-menu__link:focus-visible {
  color: var(--ewsm-blue, #2E6FD4) !important;
  background-color: rgba(46,111,212,.07) !important;
  border-radius: var(--ewsm-r-sm, 10px) !important;
}
.ewsm-menu__link[aria-expanded="true"] { color: var(--ewsm-blue, #2E6FD4) !important; }

/* Dropdown chevron. Now an inline SVG (drawn by its own path, not by rotated
   borders), so a theme overriding `transform` or `border` cannot turn it into
   a stray vertical line. The !important resets kill any leftover theme rules. */
.ewsm-caret {
  width: 10px !important; height: 10px !important; flex: none;
  border: 0 !important; background: none !important;
  transform: none !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
.ewsm-caret svg {
  width: 10px; height: 10px; display: block;
  transition: transform .25s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1));
}
.ewsm-menu__link[aria-expanded="true"] .ewsm-caret svg { transform: rotate(180deg); }

/* Desktop menu alignment. The auto margins on .ewsm-menu absorb the free space,
   so the CTA always ends up hard right whichever option is chosen.
   !important is required here because the theme-armour block above resets
   `.ewsm ul { margin: 0 !important }`. */
.ewsm-bar__inner.is-menu-left   .ewsm-menu { margin-right: auto !important; }
.ewsm-bar__inner.is-menu-center .ewsm-menu { margin-left: auto !important; margin-right: auto !important; }
.ewsm-bar__inner.is-menu-right  .ewsm-menu { margin-left: auto !important; }

.ewsm-cta {
  flex: none;
  font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif); font-weight: 600; font-size: 15px;
  background: var(--ewsm-teal, #3D8B87); color: #fff; text-decoration: none;
  padding: 13px 26px; border-radius: var(--ewsm-pill, 999px);
  box-shadow: var(--ewsm-shadow-btn, 0 4px 14px rgba(16,49,84,.22)); white-space: nowrap;
  transition: filter .18s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1)), transform .18s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1));
}
.ewsm-cta:hover { filter: brightness(.92); transform: translateY(-1px); color: #fff; }

/* ---------- mega panel ---------- */
.ewsm-mega {
  position: absolute; left: 24px; right: 24px; top: 100%;
  background: var(--ewsm-panel, #EAF2FC);
  border-radius: var(--ewsm-r-lg, 22px);
  box-shadow: var(--ewsm-shadow, 0 22px 60px rgba(12,42,71,.18));
  padding: 22px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .22s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1)), transform .22s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1)), visibility .22s;
}
.ewsm-menu__item--mega.is-open .ewsm-mega { opacity: 1; visibility: visible; transform: translateY(0); }

.ewsm-mega__grid { display: grid; grid-template-columns: 268px 1fr; gap: 20px; align-items: start; }

.ewsm-tabs { display: flex; flex-direction: column; gap: 9px; }
.ewsm .ewsm-tab {
  font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif) !important;
  font-weight: 600 !important; font-size: 15px !important; line-height: 1.3 !important;
  text-align: left !important; cursor: pointer;
  background-color: #fff !important; color: var(--ewsm-blue, #2E6FD4) !important;
  border: 1.5px solid rgba(46,111,212,.28) !important;
  border-radius: var(--ewsm-r-md, 14px) !important;
  padding: 14px 16px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  transition: background .16s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1)), color .16s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1)),
              border-color .16s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1)), transform .16s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1));
}
.ewsm .ewsm-tab:hover { border-color: var(--ewsm-blue, #2E6FD4) !important; transform: translateX(2px); }
.ewsm-tab[aria-selected="true"] {
  background-color: var(--ewsm-blue, #2E6FD4) !important;
  border-color: var(--ewsm-blue, #2E6FD4) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(46,111,212,.3) !important;
}
.ewsm-tab__arrow { opacity: 0; transform: translateX(-4px); transition: all .16s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1)); font-size: 17px; }
.ewsm-tab[aria-selected="true"] .ewsm-tab__arrow { opacity: 1; transform: translateX(0); }

.ewsm-panel { display: none; }
.ewsm-panel[data-active="true"] { display: block; animation: ewsm-fade .26s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1)); }
@keyframes ewsm-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ewsm-card {
  background: var(--ewsm-card, #B4C8E2);
  border-radius: var(--ewsm-r-lg, 22px);
  padding: 18px;
  display: grid; grid-template-columns: 296px 1fr; gap: 20px; align-items: start;
}
.ewsm-card__media { border-radius: var(--ewsm-r-md, 14px); overflow: hidden; aspect-ratio: 4/3; background: rgba(255,255,255,.4); }
/* !important so a theme's global `img { height:auto }` cannot break the
   cover-fit — that is what leaves a blank strip under the photo. */
.ewsm-card__media img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center center !important;
  display: block !important; max-width: 100% !important;
}

.ewsm-card__title {
  font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif); font-weight: 700; font-size: 21px; line-height: 1.22;
  color: var(--ewsm-navy-dark, #0C2A47); margin: 2px 0 9px; letter-spacing: -.01em;
}
.ewsm-card__text { font-size: 14.5px; line-height: 1.6; color: #22405F; margin: 0 0 13px; }

.ewsm-addr {
  font-size: 13.5px; color: var(--ewsm-navy, #103154); margin: 0 0 10px; font-weight: 600;
  display: flex; align-items: flex-start; gap: 7px;
}
.ewsm-addr .ewsm-ico { font-size: 14px; margin-top: 2px; }
.ewsm-addr.is-warn { color: #9A3412; }

.ewsm-points { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.ewsm-points li {
  font-size: 14px; color: var(--ewsm-navy-dark, #0C2A47); font-weight: 500;
  display: flex; align-items: flex-start; gap: 9px; line-height: 1.45; margin: 0;
}
.ewsm-points li::before {
  content: ""; width: 16px; height: 16px; flex: none; margin-top: 2px; border-radius: 50%;
  background: var(--ewsm-teal, #3D8B87) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.ewsm-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 15px; }
.ewsm-chip {
  font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif); font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,.78); color: var(--ewsm-navy, #103154);
  padding: 6px 12px; border-radius: var(--ewsm-pill, 999px);
}
.ewsm-chip.is-primary { background: var(--ewsm-navy, #103154); color: #fff; }

.ewsm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ewsm-btn {
  font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif); font-weight: 600; font-size: 14.5px;
  text-decoration: none; border-radius: var(--ewsm-pill, 999px);
  padding: 12px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: var(--ewsm-shadow-btn, 0 4px 14px rgba(16,49,84,.22)); line-height: 1.2;
  border: 0;
  transition: transform .16s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1)), filter .16s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1));
}
.ewsm-btn:hover { transform: translateY(-2px); }
.ewsm-btn--primary { background: var(--ewsm-navy, #103154); color: #fff; }
.ewsm-btn--primary:hover { background: var(--ewsm-navy-dark, #0C2A47); color: #fff; }
.ewsm-btn--teal { background: var(--ewsm-teal, #3D8B87); color: #fff; }
.ewsm-btn--teal:hover { filter: brightness(.92); color: #fff; }
.ewsm-btn--ghost { background: rgba(255,255,255,.85); color: var(--ewsm-navy, #103154); box-shadow: none; }
.ewsm-btn--ghost:hover { background: #fff; color: var(--ewsm-navy, #103154); }

/* Detail-page button.
   Outlined rather than filled so it reads as "read more" and does not
   compete with the primary Book / Call action beside it. */
.ewsm-btn--link {
  background: transparent; color: var(--ewsm-navy, #103154);
  border: 1.5px solid rgba(16,49,84,.32); box-shadow: none;
}
.ewsm-btn--link:hover { background: var(--ewsm-navy, #103154); color: #fff; border-color: var(--ewsm-navy, #103154); }
.ewsm-btn--link::after {
  content: "→"; font-size: 1.05em; line-height: 1;
  transition: transform .16s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1));
}
.ewsm-btn--link:hover::after { transform: translateX(3px); }

.ewsm-btn--sm { padding: 10px 18px; font-size: 13.5px; }
.ewsm-btn--block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .ewsm-btn, .ewsm-btn--link::after { transition: none; }
  .ewsm-btn:hover { transform: none; }
  .ewsm-btn--link:hover::after { transform: none; }
}

/* help bar */
.ewsm-help {
  margin-top: 18px;
  background: linear-gradient(90deg, var(--ewsm-navy, #103154), #1E5578);
  border-radius: var(--ewsm-r-md, 14px);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  color: #EAF4FF; font-size: 14.5px;
}
.ewsm-help__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ewsm-green, #5FBF9B); flex: none;
  box-shadow: 0 0 0 0 rgba(95,191,155,.7); animation: ewsm-pulse 2.4s infinite;
}
@keyframes ewsm-pulse {
  70%  { box-shadow: 0 0 0 11px rgba(95,191,155,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,191,155,0); }
}
.ewsm-help__phone {
  margin-left: auto; font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif); font-weight: 700; font-size: 17px;
  color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.13); padding: 9px 20px; border-radius: var(--ewsm-pill, 999px);
  transition: background .16s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1));
}
.ewsm-help__phone:hover { background: rgba(255,255,255,.24); color: #fff; }

/* ---------- hamburger ---------- */
.ewsm .ewsm-burger {
  display: none;
  /* Always hard right on tablet and mobile, whatever the desktop alignment. */
  margin-left: auto !important;
  order: 9;
  width: 46px !important; height: 46px !important;
  background-color: var(--ewsm-panel, #EAF2FC) !important;
  border-radius: 12px !important; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.ewsm-burger span {
  display: block; width: 22px; height: 2.4px; border-radius: 2px;
  background: var(--ewsm-navy, #103154);
  transition: transform .25s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1)), opacity .2s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1));
}
.ewsm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.ewsm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ewsm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

/* ---------- drawer ---------- */
/* The JS re-parents the scrim and drawer onto <body> so they escape every
   stacking context on the page. Combined with the maximal z-index below,
   nothing — sticky headers, chat bubbles, popups — can paint over the open
   menu. Only the menu is visible while it is open. */
/* Portal wrapper: a top-level .ewsm that hosts the open drawer. It must NOT
   create its own stacking context, so the fixed drawer's z-index applies
   against the whole page and nothing can cover the open menu. */
.ewsm.ewsm-portal { position: static; z-index: auto; }

.ewsm-scrim {
  position: fixed; inset: 0; background: rgba(9,28,48,.6);
  opacity: 0; transition: opacity .26s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1));
  z-index: 2147483000;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.ewsm-scrim.is-open { opacity: 1; }

.ewsm-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  height: 100dvh;
  width: min(400px, 90vw);
  background: #fff;
  z-index: 2147483001;
  transform: translate3d(100%, 0, 0);
  transition: transform .3s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1));
  will-change: transform;
  display: flex; flex-direction: column;
  box-shadow: -18px 0 50px rgba(9,28,48,.28);
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
}
.ewsm-drawer.is-open { transform: translate3d(0, 0, 0); }

/* `display:flex` above would otherwise beat the browser's [hidden] rule,
   leaving the closed drawer in the tab order and the accessibility tree. */
.ewsm-drawer[hidden],
.ewsm-scrim[hidden] { display: none; }

.ewsm-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid rgba(46,111,212,.16);
  background: var(--ewsm-panel, #EAF2FC);
}
.ewsm-logo--drawer { margin: 0; }
.ewsm-logo--drawer img { max-width: 150px; }
.ewsm .ewsm-close {
  width: 40px !important; height: 40px !important; flex: none; cursor: pointer;
  background-color: #fff !important; border-radius: 10px !important;
  font-size: 26px; line-height: 1; color: var(--ewsm-navy, #103154) !important;
}
.ewsm .ewsm-close:hover { background-color: var(--ewsm-blue, #2E6FD4) !important; color: #fff !important; }

.ewsm-drawer__body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* scrolling the menu never scrolls the page behind it */
  padding: 8px 0 20px;
}

.ewsm-acc { list-style: none; margin: 0; padding: 0; }
.ewsm-acc__item { border-bottom: 1px solid rgba(46,111,212,.14); margin: 0; }

.ewsm .ewsm-acc__link,
.ewsm .ewsm-acc__toggle {
  font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif) !important;
  font-weight: 600 !important; font-size: 16.5px !important;
  color: var(--ewsm-navy, #103154) !important; text-decoration: none;
  width: 100%; text-align: left !important; cursor: pointer;
  padding: 17px 20px !important;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ewsm-acc__toggle[aria-expanded="true"] { color: var(--ewsm-blue, #2E6FD4) !important; }

.ewsm-acc__plus { position: relative; width: 15px; height: 15px; flex: none; }
.ewsm-acc__plus::before,
.ewsm-acc__plus::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
  transition: transform .25s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1)), opacity .2s var(--ewsm-ease, cubic-bezier(.22,.7,.3,1));
}
.ewsm-acc__plus::before { top: 6.3px; left: 0; width: 15px; height: 2.4px; }
.ewsm-acc__plus::after  { left: 6.3px; top: 0; width: 2.4px; height: 15px; }
.ewsm-acc__toggle[aria-expanded="true"] .ewsm-acc__plus::after { transform: rotate(90deg); opacity: 0; }

.ewsm-acc__body { padding: 0 20px 16px; }

.ewsm-mini {
  background: var(--ewsm-panel, #EAF2FC);
  border-radius: var(--ewsm-r-md, 14px);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.ewsm-mini:last-child { margin-bottom: 0; }
.ewsm-mini__title {
  font-family: var(--ewsm-f-head, 'Quicksand', system-ui, sans-serif); font-weight: 700; font-size: 15px;
  color: var(--ewsm-navy-dark, #0C2A47); text-decoration: none; display: block; margin-bottom: 6px;
  line-height: 1.3;
}
a.ewsm-mini__title:hover { color: var(--ewsm-blue, #2E6FD4); }
.ewsm-mini__addr { font-size: 12.5px; color: var(--ewsm-navy, #103154); margin: 0 0 8px; font-weight: 600; line-height: 1.4; }
.ewsm-mini__addr.is-warn { color: #9A3412; }
.ewsm-chips--mini { margin-bottom: 10px; }
.ewsm-chips--mini .ewsm-chip { background: rgba(255,255,255,.9); font-size: 11.5px; padding: 5px 10px; }
.ewsm-actions--mini { gap: 8px; }

.ewsm-drawer__foot {
  padding: 16px 18px; border-top: 1px solid rgba(46,111,212,.16);
  background: var(--ewsm-panel, #EAF2FC);
  display: grid; gap: 10px;
}

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .ewsm-card { grid-template-columns: 240px 1fr; }
  .ewsm-mega__grid { grid-template-columns: 240px 1fr; }
}

/* NOTE: the hamburger breakpoint rules are generated by PHP from the
   "Hamburger breakpoint" setting, because a CSS custom property cannot be used
   inside a @media query. See EWSM_Render::responsive_css().
   The rules below are the no-JS/no-inline fallback only. */
@media (max-width: 1280px) {
  .ewsm .ewsm-menu,
  .ewsm .ewsm-cta { display: none; }
  .ewsm .ewsm-burger { display: flex; }
}

@media (max-width: 640px) {
  /* On phones the drawer takes the whole screen — nothing behind it shows,
     only the menu is visible once the hamburger is tapped. */
  .ewsm-drawer { width: 100vw; }

  .ewsm-wrap { padding-inline: 16px; }
  .ewsm-topbar__inner {
    gap: 10px 14px;
    font-size: calc(var(--ewsm-tb-size, 14px) - 3px);
    padding-block: 9px;
  }
  /* Keep the phone and the rating; drop the wordier items so the bar
     stays to one or two tidy lines on a phone. */
  .ewsm-topbar__inner .ewsm-tb__text:not(.is-keep) { display: none; }
  .ewsm-logo img { max-width: 150px !important; }
}

/* ---------- accessibility ---------- */
.ewsm :where(a, button):focus-visible {
  outline: 3px solid #FFB020; outline-offset: 3px; border-radius: 6px;
}
.ewsm-drawer :where(a, button):focus-visible { outline: 3px solid var(--ewsm-blue, #2E6FD4); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ewsm *, .ewsm-drawer, .ewsm-scrim {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Scroll lock while the drawer is open. position:fixed (paired with the
   JS storing/restoring the scroll offset) is required for iOS Safari,
   where overflow:hidden alone does not stop the page scrolling. */
body.ewsm-locked {
  overflow: hidden;
  position: fixed;
  left: 0; right: 0;
  width: 100%;
}

/* ==========================================================================
   DEFAULT RESPONSIVE BEHAVIOUR — do not remove.
   The plugin normally prints these breakpoint rules inline using the
   "Hamburger breakpoint" setting. That inline block is frequently stripped
   from cached pages by CSS-optimizer plugins, which left logged-out mobile
   visitors with a broken, half-styled menu. These static defaults (at the
   1280px default breakpoint) guarantee the hamburger + drawer always behave.
   When the inline block IS present it simply overrides these with the
   user's custom breakpoint — so nothing is lost.
   ========================================================================== */

/* Below the breakpoint: hamburger takes over, desktop menu hidden. */
@media (max-width: 1280px) {
  .ewsm .ewsm-menu,
  .ewsm .ewsm-cta        { display: none !important; }
  .ewsm .ewsm-burger     { display: flex !important; }
  .ewsm .ewsm-bar__inner { min-height: 68px; }
  .ewsm .ewsm-topbar__inner {
    justify-content: center;
    gap: 16px;
    font-size: calc(var(--ewsm-tb-size, 14px) - 2px);
  }
}

/* Above the breakpoint: full menu shown, hamburger hidden. */
@media (min-width: 1281px) {
  .ewsm .ewsm-burger { display: none  !important; }
  .ewsm .ewsm-menu   { display: flex  !important; }
  .ewsm .ewsm-cta    { display: inline-flex !important; }
}

/* Tight band just above the breakpoint: shrink rather than break. */
@media (min-width: 1281px) and (max-width: 1500px) {
  .ewsm .ewsm-menu__link { padding: 10px 9px !important; font-size: 14.5px !important; }
  .ewsm .ewsm-cta        { padding: 11px 18px; font-size: 14px; }
  .ewsm .ewsm-logo       { margin-right: 8px; }
  .ewsm .ewsm-logo img   { max-width: 150px !important; }
}