/* ═══════════════════════════════════════════════════════════════════════════
   HEADER SIGNATURE — CA Aarti Lahoti
   ───────────────────────────────────────────────────────────────────────────
   The site's header identity: a slim navy utility bar over a compact white
   navigation deck. Replaces the inherited floating white-glass pill from
   home-premium.css (~183-306 / ~1067-1091 / ~1597-1616 / ~1645-1810), which was
   carried over from the previous brand.

   VISUAL ONLY. Header.razor, ContactStrip.razor and MainLayout.razor are not
   touched — every rule here repaints classes that markup already emits, so
   routes, the menu tree, search, cart, auth, the Courses dropdown, the mobile
   drawer and the social/WhatsApp links keep working exactly as before. Loaded
   last in App.razor: delete that one <link> and the header reverts.

   ── Height contract ────────────────────────────────────────────────────────
   .hjc-app>main is offset by --topbar-h (app.css), and so is the enquiry modal.
   The bar is position:fixed, so that variable is the ONLY thing keeping page
   content from sliding under it — any height change here must be mirrored in
   the --topbar-h declarations below.

       ≥769px   utility 36 + nav 66 = 102px
       ≤768px   utility 34 + nav 60 =  94px

   (was 126 / 124 — the deck is ~24px shorter, so the hero starts higher.)

   Heights are set on .contact-strip__inner and .header__inner rather than as
   padding on their parents, so the totals stay readable and the accent line —
   which is absolutely positioned — costs nothing.

   .is-scrolled / .is-hidden are pinned to the base state on purpose: hjc.navScroll
   is a no-op (App.razor) and the bar is permanently fixed, so only the base state
   ever renders. Leaving the inherited shrink live would desync it from --topbar-h.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* also on :root so .enquiry-overlay — which sits outside .hjc-app and would
     otherwise fall back to the old 126px — clears the bar by the right amount */
  --topbar-h:102px;
}

.hjc-app{
  --topbar-h:102px;

  /* Palette is the existing brand theme, aliased locally so the intent of each
     value is legible at the point of use. No new colours are introduced. */
  --hs-navy:#0A1F5C;        /* --primary-color   : links, logo lockup, chips   */
  --hs-navy-dk:#061240;     /* --primary-dark    : utility bar                 */
  --hs-green:#1AAB4A;       /* --accent-color    : accent line, CTA            */
  --hs-green-dk:#0D8A38;    /* --accent-hover    : green text on white         */
  --hs-green-lt:#22C55E;    /* --accent-light    : icon glyphs on navy         */
  --hs-wash:#F5F7FB;        /* --surface-color   : inset fields, profile pill  */

  /* one hairline + one wash, reused everywhere so the deck reads as one system */
  --hs-hair:rgba(10,31,92,.11);
  --hs-hair-soft:rgba(10,31,92,.07);
  --hs-tint:rgba(26,171,74,.09);
  --hs-ease:cubic-bezier(.22,1,.36,1);
}

/* The fixed wrapper paints the ground behind both decks. Kept scoped:
   .site-topbar only ever renders inside .hjc-app (MainLayout), and an unscoped
   copy would resolve these vars to nothing elsewhere, computing the background
   to transparent instead of falling back to the app.css white. */
.hjc-app .site-topbar{background:#fff}

/* ═════════════════════════════════════════════════ 1 · UTILITY BAR ══════
   Slim, dark, quiet. Phone left, existing social icons right. Deliberately
   low-contrast so it frames the navigation instead of competing with it.
   ═══════════════════════════════════════════════════════════════════════════ */

.hjc-app .contact-strip{
  padding:0;                                   /* height lives on __inner */
  background:var(--hs-navy-dk);
  font-size:12px;
}
/* the inherited full-width green glow under the strip is too heavy for a 36px
   deck — a plain hairline seam reads better against the white nav below */
.hjc-app .contact-strip::after{
  background:rgba(255,255,255,.07);
}
.hjc-app .contact-strip__inner{
  max-width:1240px;
  height:36px;                                 /* deck 1 of 2 — see contract */
  padding:0 clamp(16px,3vw,28px);
}
.hjc-app .contact-strip__phones>svg{color:var(--hs-green-lt);width:13px;height:13px}
.hjc-app .contact-strip__phones a{
  color:rgba(255,255,255,.88);
  font-size:12px;font-weight:500;letter-spacing:.15px;
}
.hjc-app .contact-strip__phones a:hover{color:var(--hs-green-lt)}

/* Hairline before the icon row — the "subtle separator" detail. It is a ::before
   on a flex container, so it lays out as a flex item and needs no markup. */
.hjc-app .contact-strip__social{gap:6px}
.hjc-app .contact-strip__social::before{
  content:"";flex:0 0 auto;
  width:1px;height:14px;margin-right:4px;
  background:rgba(255,255,255,.16);
}
.hjc-app .contact-strip__social a{
  width:26px;height:26px;border-radius:7px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  transition:background .2s,border-color .2s;
}
/* no lift, no glow — the inherited hover was sized for a much taller bar */
.hjc-app .contact-strip__social a:hover{
  transform:none;box-shadow:none;
  background:rgba(26,171,74,.28);
  border-color:rgba(34,197,94,.45);
}
.hjc-app .contact-strip__social svg{width:14px;height:14px}

/* ═════════════════════════════════════════════════ 2 · NAVIGATION ══════
   White deck, navy type, one green accent. Logo left · links centred ·
   actions right.
   ═══════════════════════════════════════════════════════════════════════════ */

.hjc-app .header{
  position:sticky;top:0;z-index:100;
  padding:0;border:none;
  background:#fff;
  backdrop-filter:none;
  /* thin bottom border + a very soft lift, as one shadow */
  box-shadow:0 1px 0 var(--hs-hair-soft),0 6px 16px -14px rgba(10,31,92,.55);
}

/* The single green accent: a 2px line at the deck's foot, strongest under the
   logo and faded out by a third of the way across. Absolutely positioned, so
   it adds no height. */
.hjc-app .header::after{
  content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--hs-green),rgba(26,171,74,0) 34%);
  animation:none;opacity:.9;
}

.hjc-app .header__inner{
  position:relative;
  max-width:1240px;margin:0 auto;
  height:66px;                                 /* deck 2 of 2 — see contract */
  padding:0 clamp(16px,3vw,28px);
  gap:0;
  background:none;border:none;border-radius:0;box-shadow:none;backdrop-filter:none;
}
/* the inherited pill's gradient border + ambient glow */
.hjc-app .header__inner::before,
.hjc-app .header__inner::after{display:none;content:none}

/* scroll state pinned to the base geometry — see the height contract */
.hjc-app .header.is-scrolled{padding:0;background:#fff;
  box-shadow:0 1px 0 var(--hs-hair-soft),0 6px 16px -14px rgba(10,31,92,.55)}
.hjc-app .header.is-scrolled .header__inner{height:66px;background:none;box-shadow:none}
.hjc-app .header.is-scrolled .header__logo img{height:42px}

/* ── logo ─────────────────────────────────────────────────────────────────
   No plate, no frame: on a white deck the mark stands on its own, and any
   container would eat the vertical space this redesign is trying to win back. */
.hjc-app .header__logo{
  flex:0 0 auto;
  display:inline-flex;align-items:center;
  height:auto;padding:0;
  background:none;border-radius:0;box-shadow:none;overflow:visible;
  transition:opacity .2s var(--hs-ease);
}
.hjc-app .header__logo:hover{background:none;transform:none;box-shadow:none;opacity:.85}
.hjc-app .header__logo img{height:42px;display:block}
.hjc-app .header__logo::after{display:none;content:none}   /* inherited shine sweep */

/* ── nav ──────────────────────────────────────────────────────────────────
   Links run the full height of the deck so the active accent can sit flush on
   the bottom edge and the dropdown can open flush beneath it. */
.hjc-app .header__nav{
  flex:1 1 auto;
  align-self:stretch;
  display:flex;align-items:stretch;justify-content:center;
  gap:0;
  margin:0;padding:0;border-left:none;         /* inherited divider off */
}
.hjc-app .hnav-item{align-items:stretch}

.hjc-app .header__link{
  position:relative;
  height:100%;
  display:inline-flex;align-items:center;
  padding:0 17px;border-radius:0;
  font-size:14.5px;font-weight:500;letter-spacing:.2px;
  color:var(--hs-navy);
  background:none;border-bottom:none!important;box-shadow:none;
  transition:color .22s var(--hs-ease),background .22s var(--hs-ease);
}
/* the previous design's filled pill */
.hjc-app .header__link::before{display:none;content:none}

/* the accent — a thin green rule that grows from the centre */
.hjc-app .header__link::after{
  content:"";display:block;position:absolute;left:17px;right:17px;bottom:0;
  height:2.5px;border-radius:2px 2px 0 0;
  background:var(--hs-green);box-shadow:none;
  opacity:0;transform:scaleX(0);transform-origin:center;
  transition:transform .26s var(--hs-ease),opacity .2s;
}
.hjc-app .header__link:hover,
.hjc-app .header__link:focus-visible{
  color:var(--hs-green-dk);background:none;transform:none;
}
.hjc-app .header__link:hover::after,
.hjc-app .header__link:focus-visible::after{opacity:.6;transform:scaleX(1)}

/* Active — a whisper of green rising off the accent, not a filled pill. */
.hjc-app .header__link.active,
.hjc-app .header__link.active:hover{
  color:var(--hs-navy);font-weight:600;transform:none;box-shadow:none;
  background:linear-gradient(180deg,rgba(26,171,74,0),var(--hs-tint));
}
.hjc-app .header__link.active::after{opacity:1;transform:scaleX(1)}

.hjc-app .hnav-caret{
  font-size:10px;margin-left:5px;font-weight:400;
  color:rgba(10,31,92,.42);
}
.hjc-app .header__link:hover .hnav-caret,
.hjc-app .hnav-item:hover .header__link .hnav-caret{color:var(--hs-green-dk)}
.hjc-app .header__link.active .hnav-caret{color:var(--hs-navy)}

/* True centring once there is room for it. Below this the nav stays a flex
   child and centres in the space the logo and actions leave, which drifts a
   little off-axis but can never collide with them. */
@media (min-width:1200px){
  .hjc-app .header__nav{
    position:absolute;left:50%;transform:translateX(-50%);
    flex:0 0 auto;height:100%;
  }
  .hjc-app .header__actions{margin-left:auto}
}

/* ── dropdown / flyout ────────────────────────────────────────────────────
   Opens flush under the deck (the links are full-height, so top:100% is the
   deck's bottom edge). Hover/focus behaviour is the inherited CSS-only one. */
.hjc-app .hnav-drop,
.hjc-app .hnav-fly{
  background:#fff;
  border:1px solid var(--hs-hair);
  border-radius:12px;padding:6px;
  box-shadow:0 18px 40px -22px rgba(10,31,92,.5),0 2px 8px rgba(10,31,92,.06);
}
.hjc-app .hnav-drop{margin-top:0}
.hjc-app .hnav-drop__link{
  color:var(--hs-navy);border-radius:8px;
  font-size:13.5px;font-weight:500;
}
.hjc-app .hnav-drop__link:hover,
.hjc-app .hnav-drop__link:focus-visible{
  background:var(--hs-tint);color:var(--hs-green-dk);padding-left:16px;
}
.hjc-app .hnav-drop__link.active{
  background:var(--hs-tint);color:var(--hs-navy);font-weight:600;
  box-shadow:inset 2px 0 0 var(--hs-green);
}
.hjc-app .hnav-fly-caret{color:rgba(10,31,92,.35)}
.hjc-app .hnav-drop__link:hover .hnav-fly-caret{color:var(--hs-green-dk)}

/* ═════════════════════════════════════════ 3 · RIGHT-HAND ACTIONS ══════
   Search · Cart · Login, all on a 38px baseline so the cluster reads as one row.
   ═══════════════════════════════════════════════════════════════════════════ */

.hjc-app .header__actions{flex:0 0 auto;gap:8px}

.hjc-app .header__icon{
  width:38px;height:38px;border-radius:50%;
  color:var(--hs-navy);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--hs-hair);
  transition:background .2s,box-shadow .2s,color .2s;
}
.hjc-app .header__icon svg{width:17px;height:17px}
.hjc-app .header__icon:hover{
  background:var(--hs-tint);color:var(--hs-green-dk);transform:none;
  box-shadow:inset 0 0 0 1px rgba(26,171,74,.34);
}
.hjc-app .header__search-btn{box-shadow:inset 0 0 0 1px var(--hs-hair)}
.hjc-app .header__search-btn:hover,
.hjc-app .header__search.is-open .header__search-btn{
  background:var(--hs-tint);color:var(--hs-green-dk);
  box-shadow:inset 0 0 0 1px rgba(26,171,74,.34);
}

.hjc-app .header__search-input::placeholder{color:rgba(10,31,92,.42)}

/* Desktop/tablet search only. home-premium.css turns the open field into an
   overlay panel anchored to .header__inner and holds the closed control in a
   fixed 42px lane so cart and Login cannot shift when the button leaves flow.
   That mechanism is kept intact — the lane is just narrowed to the 38px
   baseline this cluster runs on, and the field is recoloured. Scoped to
   min-width:768px because below it the same element becomes the always-open
   full-width mobile field, which needs its own box entirely. */
@media (min-width:768px){
  .hjc-app .header__search{flex:0 0 38px;width:38px;height:38px}
  .hjc-app .header__search.is-open .header__search-input{
    background:var(--hs-wash);color:var(--hs-navy);
    box-shadow:inset 0 0 0 1px var(--hs-hair);
  }
  .hjc-app .header__search.is-open .header__search-input:focus{
    background:#fff;
    box-shadow:inset 0 0 0 1px rgba(26,171,74,.45),0 0 0 3px rgba(26,171,74,.13);
  }
  /* the overlay's dismiss button, matched to the icon buttons */
  .hjc-app .header__search-close{
    width:38px;height:38px;border-radius:10px;
    background:rgba(10,31,92,.06);color:var(--hs-navy);
  }
  .hjc-app .header__search-close:hover{background:var(--hs-navy);color:#fff}
}

.hjc-app .header__divider{
  width:1px;height:22px;opacity:1;margin:0 4px;
  background:var(--hs-hair);
}

/* tooltips stay navy-on-white — the deck is light again */
.hjc-app .header__icon[data-tip]::after{
  background:var(--hs-navy);color:#fff;font-weight:600;
  box-shadow:0 10px 24px -12px rgba(10,31,92,.7);
}
.hjc-app .header__icon[data-tip]::before{border-bottom-color:var(--hs-navy)}

.hjc-app .header__cart-badge{
  min-width:17px;height:17px;font-size:10px;
  background:var(--hs-green);
  box-shadow:0 0 0 2px #fff;
  animation:none;                              /* no pulse on a compact deck */
}

/* ── icon glyph sizes ─────────────────────────────────────────────────────
   responsive-normalize.css clamps every <svg> without a width attribute to
   16–22px via `svg:not([width]):not([data-large]):not(.svg-noclamp)` — three
   classes deep, so a plain `.hjc-app .header__icon svg` loses to it and the
   glyphs came out at 20px, too heavy for a 38px control. Adding one :not()
   matches that weight; this file loads last, so these win. Same trick
   home-premium.css already uses for the search overlay's close button. */
.hjc-app .header__icon svg:not(.svg-noclamp){width:17px;height:17px}
.hjc-app .header__chip svg:not(.svg-noclamp){width:15px;height:15px}
.hjc-app .header__user-caret:not(.svg-noclamp){width:14px;height:14px}
.hjc-app .header__menu-item svg:not(.svg-noclamp){width:17px;height:17px}

/* ── login ────────────────────────────────────────────────────────────────
   Flat brand green, no gradient. Same 38px baseline as the icon buttons. */
.hjc-app .header__login{
  height:38px;padding:0 18px;border-radius:10px;gap:7px;
  font-size:13.5px;font-weight:600;letter-spacing:.2px;color:#fff;
  background:var(--hs-green);
  box-shadow:0 6px 14px -9px rgba(26,171,74,.95);
  transition:background .2s,transform .2s var(--hs-ease),box-shadow .2s;
}
.hjc-app .header__login svg{width:15px;height:15px}
.hjc-app .header__login:hover{
  background:var(--hs-green-dk);filter:none;transform:translateY(-1px);
  box-shadow:0 10px 18px -9px rgba(26,171,74,1);
}

/* ── admin / franchise chip ───────────────────────────────────────────────
   Compact solid navy. The inherited shine-sweep is dropped — it belonged to the
   previous brand's treatment. */
.hjc-app .header__chip{
  height:38px;padding:0 14px;border-radius:10px;
  font-size:13px;font-weight:600;color:#fff;
  background:var(--hs-navy);
  box-shadow:none;
  transition:background .2s,transform .2s var(--hs-ease);
}
.hjc-app .header__chip svg{width:15px;height:15px;color:var(--hs-green-lt)}
.hjc-app .header__chip:hover{
  background:#123166;filter:none;transform:translateY(-1px);box-shadow:none;
}
.hjc-app .header__chip::after{display:none;content:none}

/* ── signed-in profile ────────────────────────────────────────────────────
   Same 38px baseline. The avatar keeps a thin green ring as the one brand
   flourish; the inherited conic rainbow is dropped. */
.hjc-app .header__user{
  height:38px;padding:3px 11px 3px 3px;
  color:var(--hs-navy);
  background:var(--hs-wash);
  border:1px solid var(--hs-hair);
  box-shadow:none;
  transition:background .2s,border-color .2s;
}
.hjc-app .header__user:hover,
.hjc-app .header__user.is-open{
  background:#fff;border-color:rgba(26,171,74,.34);
  box-shadow:none;transform:none;
}
.hjc-app .header__avatar{
  width:32px;height:32px;
  background:var(--hs-green);
}
.hjc-app .header__user:hover .header__avatar{transform:none}
.hjc-app .header__avatar-txt{
  width:28px;height:28px;font-size:10.5px;
  background:var(--hs-navy);
}
.hjc-app .header__status{width:9px;height:9px;border-color:var(--hs-wash)}
.hjc-app .header__user-name{font-size:13px;font-weight:600;max-width:130px}
.hjc-app .header__user-caret{width:14px;height:14px;color:rgba(10,31,92,.4)}
.hjc-app .header__user.is-open .header__user-caret{color:var(--hs-green-dk)}

/* the panel: plain white card, matching the dropdowns */
.hjc-app .header__menu{
  top:calc(100% + 10px);
  background:#fff;backdrop-filter:none;
  border:1px solid var(--hs-hair);border-radius:14px;
  box-shadow:0 22px 48px -22px rgba(10,31,92,.5),0 2px 8px rgba(10,31,92,.06);
}
.hjc-app .header__menu-item{border-radius:9px;font-size:13.5px}
.hjc-app .header__menu-item:hover{background:var(--hs-tint);color:var(--hs-green-dk)}
.hjc-app .header__menu-item:hover svg{color:var(--hs-green-dk)}
.hjc-app .header__menu-role{color:var(--hs-green-dk)}
.hjc-app .header__menu-count{background:var(--hs-green)}
.hjc-app .header__avatar--lg{width:42px;height:42px}
.hjc-app .header__avatar--lg .header__avatar-txt{width:37px;height:37px;font-size:13px}

/* ── hamburger ────────────────────────────────────────────────────────────
   Hidden above 768px by app.css; styled here so the mobile deck matches. */
.hjc-app .header__hamburger{
  width:38px;height:38px;border-radius:10px;
  color:var(--hs-navy);
  background:#fff;border:1px solid var(--hs-hair);
  transition:background .2s,border-color .2s;
}
.hjc-app .header__hamburger:hover{background:var(--hs-wash)}
.hjc-app .header__hamburger span{left:11px;right:11px}
.hjc-app .header__hamburger span:nth-child(1){top:13px}
.hjc-app .header__hamburger span:nth-child(2){top:18px}
.hjc-app .header__hamburger span:nth-child(3){top:23px}
.hjc-app .header__hamburger.is-open span:nth-child(1),
.hjc-app .header__hamburger.is-open span:nth-child(3){top:18px}

/* ═════════════════════════════════════════════════════════ TABLET ══════
   769–1024px: the nav is still on show, so tighten the link gutters and the
   logo rather than let anything wrap. Deck heights are unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width:768px) and (max-width:1024px){
  .hjc-app .header__inner{padding:0 16px}
  .hjc-app .contact-strip__inner{padding:0 16px}
  .hjc-app .header__logo img{height:38px}
  .hjc-app .header__link{padding:0 12px;font-size:13.5px}
  .hjc-app .header__link::after{left:12px;right:12px}
  .hjc-app .header__actions{gap:6px}
}

/* ═════════════════════════════════════════════════════════ MOBILE ══════
   Breakpoint is 767.98px to match home-premium.css exactly. Do not round it to
   768px: app.css hides .header__nav/.header__actions at max-width:768px and
   home-premium.css reclaims that 0.02px dead zone with a min-width:768px block,
   so 768px — iPad portrait — is deliberately served the DESKTOP row. A
   max-width:768px block here would load later and silently take that back.

   Row order stays hamburger · logo · search · cart, set with flex `order` on
   the existing DOM — no markup is reordered.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:767.98px){
  :root{--topbar-h:94px}
  .hjc-app{--topbar-h:94px}

  .hjc-app .site-topbar{background:#fff}

  /* utility bar — deck 1 of 2 */
  .hjc-app .contact-strip{padding:0}
  .hjc-app .contact-strip__inner{height:34px;padding:0 12px;gap:8px}
  .hjc-app .contact-strip__phones a{font-size:11.5px}
  .hjc-app .contact-strip__social{gap:5px}
  .hjc-app .contact-strip__social::before{display:none}   /* no room for it */
  .hjc-app .contact-strip__social a{width:24px;height:24px;border-radius:6px}
  .hjc-app .contact-strip__social svg{width:13px;height:13px}

  /* navigation — deck 2 of 2, full-bleed white */
  .hjc-app .header{padding:0;background:#fff}
  .hjc-app .header::after{display:block;content:"";height:2px}
  .hjc-app .header__inner{
    height:60px;
    margin:0;padding:0 12px;gap:9px;
    background:#fff;border:none;border-radius:0;box-shadow:none;
  }

  .hjc-app .header__hamburger{order:1;flex:0 0 auto;margin-left:0;display:inline-flex}
  .hjc-app .header__logo{order:2;flex:0 0 auto;padding:0}
  .hjc-app .header__logo img{height:32px}

  .hjc-app .header__nav{display:none}          /* lives in the drawer */

  /* app.css hides the cluster at this width — restore it, then keep only the
     two controls that belong on a phone. The rest stay in the drawer. */
  .hjc-app .header__actions{
    order:3;display:flex;align-items:center;
    flex:1 1 auto;min-width:0;margin-left:0;gap:8px;
  }
  .hjc-app .header__actions .header__chip,
  .hjc-app .header__actions .header__divider,
  .hjc-app .header__actions .header__profile,
  .hjc-app .header__actions .header__login{display:none}

  /* search: permanently expanded, magnifier inside on the left */
  .hjc-app .header__search{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
  .hjc-app .header__search-input,
  .hjc-app .header__search.is-open .header__search-input{
    /* min-width:0 is essential — an <input> has an intrinsic min-content width
       and as a flex item would otherwise shove the cart off the right edge. */
    width:100%;min-width:0;opacity:1;
    height:40px;margin:0;
    padding:0 38px 0 38px;                     /* constant in both states, so
                                                  typing can never reflow it */
    border-radius:999px;
    background:var(--hs-wash);color:var(--hs-navy);
    font-size:14px;font-weight:500;
    box-shadow:inset 0 0 0 1px var(--hs-hair);
  }
  .hjc-app .header__search-input::placeholder{color:rgba(10,31,92,.42)}
  .hjc-app .header__search-input:focus,
  .hjc-app .header__search.is-open .header__search-input:focus{
    background:#fff;
    box-shadow:inset 0 0 0 1px rgba(26,171,74,.45),0 0 0 3px rgba(26,171,74,.13);
  }
  .hjc-app .header__search-input::-webkit-search-cancel-button,
  .hjc-app .header__search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}

  .hjc-app .header__search-btn,
  .hjc-app .header__search.is-open .header__search-btn{
    position:absolute;left:4px;top:50%;transform:translateY(-50%);
    width:32px;height:32px;border-radius:50%;
    background:transparent;box-shadow:none;color:rgba(10,31,92,.5);
    z-index:2;
  }
  /* :not() to clear the responsive-normalize clamp — see the note above */
  .hjc-app .header__search-btn svg:not(.svg-noclamp){width:16px;height:16px}
  .hjc-app .header__search:focus-within .header__search-btn{color:var(--hs-green-dk)}

  /* clear (✕) — always in the DOM and always in the same spot; only its
     visibility changes, so the field can never appear to move. */
  .hjc-app .header__search-clear{
    position:absolute;right:5px;top:50%;transform:translateY(-50%);
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;padding:0;border:none;border-radius:50%;
    background:rgba(10,31,92,.08);color:rgba(10,31,92,.6);
    cursor:pointer;z-index:3;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s ease,visibility .18s ease,background .18s,color .18s;
  }
  .hjc-app .header__search.has-text .header__search-clear{opacity:1;visibility:visible;pointer-events:auto}
  .hjc-app .header__search-clear:hover,
  .hjc-app .header__search-clear:active{background:var(--hs-green);color:#fff}
  .hjc-app .header__search-clear svg{width:12px;height:12px}

  /* cart, pinned right */
  .hjc-app .header__actions .header__cart{
    order:9;flex:0 0 auto;
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:50%;
    background:#fff;color:var(--hs-navy);
    box-shadow:inset 0 0 0 1px var(--hs-hair);
  }
  .hjc-app .header__actions .header__cart svg:not(.svg-noclamp){width:18px;height:18px;display:block}
  .hjc-app .header__cart-badge.is-zero{display:inline-flex}   /* live "0" on mobile */
  .hjc-app .header__cart-badge{
    top:-4px;right:-4px;
    min-width:17px;height:17px;padding:0 4px;
    background:var(--hs-green);box-shadow:0 0 0 2px #fff;
  }
}

/* Small phones (≤400px): claw back width so the full placeholder still fits. */
@media (max-width:400px){
  .hjc-app .contact-strip__inner{padding:0 10px}
  .hjc-app .header__inner{margin:0;padding:0 10px;gap:7px}
  .hjc-app .header__logo img{height:29px}
  .hjc-app .header__search-input,
  .hjc-app .header__search.is-open .header__search-input{font-size:13px;padding:0 34px}
  .hjc-app .header__search-btn,
  .hjc-app .header__search.is-open .header__search-btn{left:3px;width:30px;height:30px}
  .hjc-app .header__search-clear{right:4px;width:24px;height:24px}
}

/* ═══════════════════════════════════════════════════ REDUCED MOTION ══ */

@media (prefers-reduced-motion:reduce){
  .hjc-app .header__link,
  .hjc-app .header__link::after,
  .hjc-app .header__icon,
  .hjc-app .header__chip,
  .hjc-app .header__login,
  .hjc-app .header__logo,
  .hjc-app .contact-strip__social a{transition:none}
}