/* Lifted from templates/cms/_nav_css.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 'nav' %} in that same partial, so a page that does
   not include the partial does not download this. */
nav{background:#1f2327;position:sticky;top:0;z-index:200}
.nav-inner{max-width:100%;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:46px;padding:0 20px}
/* 31px: 28 plus 10%, Kev 25 Aug. (28 was itself 25 plus 12%.) Still clear of the
   46px bar. Safe to keep growing now the logo is an SVG -- the old PNG was a
   25px raster and anything above that was upscaling.
   The <img> also carries height/width attributes, which are a presentation hint
   and lose to any stylesheet — they stay as the pre-CSS fallback and as the
   aspect ratio the browser reserves space with, so only their RATIO matters. */
/* Nudged 5px left -- Kev, 27 Aug, in two passes. On the <a>, not the <img>: the
   anchor is the thing the nav lays out, so moving the image inside it would
   leave a dead strip on the left of a clickable area and shift only the
   artwork. */
.nav-logo{position:relative;left:-5px}
.nav-logo img{height:31px;width:auto;display:block}
.nav-links{display:flex;gap:4px;list-style:none;justify-content:center}
.nav-links>li{position:relative}
.nav-links>li>a{display:block;padding:8px 14px;color:#fff;font-size:14px;border-radius:4px;white-space:nowrap;text-decoration:none}
.nav-links>li>a:hover,.nav-links>li>a.active{background:rgba(255,255,255,.1)}
.nav-links>li:hover>.dropdown{display:block}
.dropdown{display:none;position:absolute;top:100%;left:0;background:#1f2327;min-width:200px;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.4);padding:6px 0;overflow:hidden;list-style:none;z-index:300}
.dropdown a{display:block;padding:8px 16px;color:#ccc;font-size:13px;text-decoration:none}
.dropdown a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-right{display:flex;align-items:center;gap:2px;justify-content:flex-end}
.nav-account-link,.nav-cart-link,.nav-search-link,.nav-user-link{display:flex;align-items:center;gap:6px;color:#fff;font-size:13px;text-decoration:none;white-space:nowrap}
.nav-search-link{padding:6px 10px;opacity:.85}
.nav-search-link:hover{opacity:1}
/* Signed-in only. Styled as the search icon rather than as the button beside
   it, so the row reads as icons-then-button instead of two rival buttons —
   the person goes to the account record, Dashboard goes into the app. */
.nav-user-link{padding:6px 10px;opacity:.85}
.nav-user-link:hover{opacity:1}
/* .dd-head is gone -- Kev, 2 Sep 2026 split Signs back into Labels and Placards,
   so the headed runs that separated the two families inside one dropdown have
   nothing left to separate. Removed rather than left styling markup that no
   longer exists; if a dropdown ever needs headings again the rule is two lines
   and this comment says what it looked like. */
.nav-account-link{padding:5px 13px;border:1px solid rgba(255,255,255,.4);border-radius:4px;margin-left:15px}
.nav-account-link:hover{background:rgba(255,255,255,.12)}
.nav-cart-link:hover{background:rgba(255,255,255,.1)}
/* position:relative is what keeps the badge on the cart — without it the count
   escapes the link and lands somewhere else on the page. */
.nav-cart-link{padding:6px 12px;position:relative}
.cart-badge{position:absolute;top:0;right:0;background:var(--accent,#1f2327);color:#fff;font-size:.58rem;font-weight:700;line-height:1.4;border-radius:10px;padding:1px 5px}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}
.nav-mob-only{display:none}

/* Below 767px the link list becomes a full-screen panel behind the hamburger —
   the same markup, restyled, so there is only ever one set of links to maintain.
   Search and cart stay in the bar: a hidden cart is a lost order.

   Was 900. Moved to 767 to match the ladder in cms/_tool_responsive_css.html.
   The burger and the tool sidebar's drawer are ONE button, so the two widths
   have to be the same number: at any width where the burger shows but the drawer
   does not, pressing it dims the screen and opens nothing. Tablets now keep the
   full link row, which is what an iPad has the width for. */
@media(max-width:767px){
  /* ITEM 229, Kev 12 Sep 2026: "make all header elements on header on mobile
     including logo 18%." Read as 18% BIGGER -- every sizing item today has been
     phrased that way (223 +25%, 226 +30% and +50%). One word, and every number
     below flips if the other was meant.

     THE BAR AND THE DRAWER ARE ONE NUMBER. .nav-links is fixed at inset:46px,
     which is the bar's height written out a second time. Grow the bar alone and
     the drawer starts behind it; grow the drawer alone and a strip of page shows
     above the menu. A variable now, so they cannot drift: 46 * 1.18 = 54. */
  .nav-inner{grid-template-columns:auto 1fr;padding:0 12px;height:var(--nav-h-mob,54px)}
  .nav-hamburger{display:flex}

  /* ITEM 241, Kev 14 Sep 2026: "the menu (three lines) icon doesnt work on
     mobile" -- on the HOME page, and it could not: there was nothing behind it.
     The button is drawn on every page at this width, but the two things it can
     open are not.
       #nav-links   only on a category page. Home passes bare_nav=1 and the
                    whole <ul> is skipped -- Kev, 4 Sep: "No category menu --
                    the page's job is the upload."
       #tool-sidebar  only on a tool page, where the drawer IS the menu.
     Home has neither, so the handler in csp-handlers.js toggled body.menu-open
     and there was nothing for the class to reveal. Pressed, the button did
     nothing at all, twice, and then you go looking for it again.

     Nothing is lost by taking it off there: every destination in the bar --
     search, basket, account, Sign up -- is already its own visible icon at this
     width, which is why the category menu could be dropped in the first place.

     :has() ON PURPOSE, rather than a flag passed into the include. Thirty-odd
     page shells include this nav and any of them may gain or lose a menu; a
     flag is a thing to remember, and the one that gets forgotten puts a dead
     button back. This asks the page what it actually contains.

     ORDER MATTERS AND IS THE FALLBACK. display:flex stays the base and this
     only ever hides. A browser too old for :has() drops this rule and gets
     today's behaviour -- a button that does nothing on one page -- instead of
     losing a working menu on every other. */
  body:not(:has(#nav-links)):not(:has(#tool-sidebar)) .nav-hamburger{display:none}
  /* 2px bars stay 2px: 2 * 1.18 is 2.36, which renders blurred rather than
     thicker. Only the width carries the change. */
  .nav-hamburger span{width:26px}
  .nav-logo img{height:33px}   /* 28 was 25 + 10%; +18% on top of that. with the desktop size. The phone is
                                the product -- installers work from the road -- so
                                this breakpoint is the one that matters most. */
  .nav-links{display:none;position:fixed;inset:var(--nav-h-mob,54px) 0 0 0;background:#1f2327;z-index:199;flex-direction:column;justify-content:flex-start;gap:0;overflow-y:auto;padding:8px 0}
  .nav-links.open{display:flex}
  .nav-links>li>a{padding:12px 24px;border-radius:0;font-size:1.12rem;border-bottom:1px solid rgba(255,255,255,.06)}
  .dropdown{display:block;position:static;background:transparent;box-shadow:none;min-width:0;padding:0}
  .dropdown a{padding:9px 40px;font-size:1rem}
  /* The icon row on the right of the bar: 13 -> 15.3. */
  .nav-cart-link,.nav-search-link,.nav-user-link{font-size:15.3px}
  /* THE ICONS THEMSELVES, +25%. Kev, 12 Sep 2026, following item 229: "increase
     the menu icons (search, profile etc) by 25% as with the other elements."

     Item 229 took this row's TEXT from 13 to 15.3px and the glyphs did not move
     with it -- their size is width="18"/height="18" on the <svg> elements in
     _tool_nav.html, which a font-size change cannot reach.

     Done in CSS rather than by editing those attributes: the attributes are the
     icon's intrinsic size and what the browser lays out before the stylesheet
     arrives, so leaving them is what keeps the bar from shifting as the page
     loads. CSS overrides them for display.

     Per element, because the bases differ -- search and profile are 18, the
     cart is 19. One shared number would have been a resize, not a +25%. */
  .nav-search-link svg,.nav-user-link svg{width:22.5px;height:22.5px}
  .nav-cart-link svg{width:23.75px;height:23.75px}
  .nav-account-link svg{width:22.5px;height:22.5px}
  .nav-account-link{display:none}
  .nav-mob-only{display:block}
}
/* THE FOOTER SITS AT THE BOTTOM, NOT WHEREVER THE CONTENT STOPS -- Kev,
   1 Sep 2026: "can you make sure the footer bar is stuck to bottom of pages, not
   floating in middle of basket pages etc".

   Every storefront page writes its own <footer> as the last thing in <body>, so
   on a short page -- an empty basket, an order confirmation, a contact form --
   it lands halfway up the screen with white space beneath it, which reads as a
   broken page rather than a short one.

   Put here because this is the ONE include all sixteen footer-bearing pages
   share; five of them pull in _tool_chrome_css and the rest do not, so there was
   no other single place to say it once.

   The standard flex-column sticky footer. Column children stretch to full width
   by default, so nothing about the existing layouts changes horizontally, and
   auto margin only pushes the footer down when there is room to spare -- on a
   long page it does nothing at all. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > footer { margin-top: auto; }
/* AND THE CHILDREN STILL FILL THE PAGE. Making body a flex column has one
   side effect that is easy to miss and very visible: AUTO SIDE MARGINS ON A
   FLEX ITEM CANCEL THE STRETCH. Every storefront page centres its content with
   .page{max-width:1200px;margin:0 auto}, so the moment body became flex those
   pages stopped filling to 1200 and started shrink-wrapping their content --
   collapse a basket card and the whole page narrowed with it, 1200px to 1092.
   Kev, 1 Sep 2026: "the ps bars are a different size on collapse than expand".
   width:100% restores the stretch; max-width still caps it and the auto margins
   still centre it. */
body > * { width: 100%; }