/* Lifted from templates/cms/_tool_nav.html on 13 Sep 2026. Byte-identical to the block it
   replaced; the only change is that the browser can cache it.
   Linked by {% css 'tool-nav' %} in that same partial, so a page that does
   not include the partial does not download this. */
/* The checkout heading sits in the same centre grid cell the category list
   used, so the bar keeps its balance. The burger is hidden with it -- on
   checkout there is no list for it to open. */
.nav-secure{display:flex;align-items:center;justify-content:center;gap:8px;
  color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:700;
  letter-spacing:.01em;white-space:nowrap}
/* The padlock grows with the words -- at 14px beside 18px text it read as an
   afterthought rather than part of the heading. */
.nav-secure svg{flex-shrink:0;opacity:.85;width:17px;height:17px}
/* Item 229: +18% on the phone, with the rest of the header. */
@media(max-width:767px){.nav-secure svg{width:20px;height:20px}}
.nav-inner.checkout .nav-hamburger{display:none}
/* FAR RIGHT WHEN THERE IS NO MENU -- Kev, 4 Sep 2026: "the search basket and
   login/Register buttons should be far right."

   .nav-inner is a three-column grid, 1fr auto 1fr: logo, menu, actions. Drop the
   menu and there are two children for three tracks, so the actions land in the
   middle `auto` track with the last 1fr empty to their right -- which is exactly
   what he was looking at. Two tracks when the menu is not drawn, and the actions
   take the elastic one. .nav-right already justifies to flex-end, so it needs
   nothing else.

   Not applied to .checkout: that DOES draw a middle child (the padlock), so its
   three tracks are all occupied. */
.nav-inner.bare{grid-template-columns:auto 1fr}
/* The bar is 46px tall, so the heading has to give way before it collides with
   the logo and the cart on a narrow screen. */
@media(max-width:520px){.nav-secure{font-size:17.7px}.nav-secure svg{width:17.7px;height:17.7px}}
.menu-scrim{display:none}
/* 767 to match the drawer it dims for — see the ladder in
   cms/_tool_responsive_css.html. A scrim at a width with no drawer is a page
   that greys out and does nothing. */
@media(max-width:767px){
  .menu-scrim{display:block;position:fixed;inset:0;z-index:110;
    background:rgba(15,23,32,.42);opacity:0;pointer-events:none;
    transition:opacity .22s ease}
  body.menu-open .menu-scrim{opacity:1;pointer-events:auto}
}