/**
 * UX-NAV-1 (04/11/2026): the band owns its width and sticky lifetime independently
 * of Storefront's header. Existing theme tokens remain the colour/type authority.
 * New .fj-nav markup does not match legacy .fj-catnav/.fj-shopall rail selectors.
 */
:root { --stick: 64px; }

/* Override fj-components.css T55-R header padding, #473 phone logo/search hiding,
   and the old body.fj-header--stuck header/40px-logo rules. The brand never sticks. */
body .site-header,
body.fj-header--stuck .site-header {
  position: relative;
  top: auto;
  z-index: auto;
  box-shadow: none;
  padding: 0 !important;
  margin-bottom: 0;
  border-bottom: 0;
}
/* D-HOME-HEADER-GAP-1 (Fred 05/11/2026): Storefront's `.home.page:not(.page-template-template-homepage) .site-header`
   outranks the line above and left a 67.8px band under the homepage header. Our home template is template-home, so
   that :not() passes. Scoped to the homepage: other pages keep what they had. */
body.home.page:not(.page-template-template-homepage) .site-header { margin-bottom: 0; }
body .site-header > .col-full {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: min(calc(100% - 48px), 1440px);
  max-width: none;
  min-height: 84px;
  margin: 0 auto;
  padding: 9px 0;
  box-sizing: border-box;
}
body .site-header > .col-full::before,
body .site-header > .col-full::after { display: none; }
body .site-header .site-branding {
  /* Coordinator 04/11/2026: `auto` let Chrome size this box from the logo file's 1041px natural
     width (measured 1018px), overflowing the row by 193px; tested live: 66px -> scrollWidth 1377/1377. */
  flex: 0 0 66px;
  float: none;
  width: 66px;
  margin: 0 !important;
}
/* Coordinator, staging measurement 04/11/2026: Chrome sized the block logo LINK from the image's
   1041px natural width (link 1018px, image 66px), pushing Account and the cart past the viewport
   at 1440 (header row scrollWidth 1570 / clientWidth 1377). Pin the link to the painted box. */
body .site-header .site-branding .custom-logo-link { display: block; width: 66px; height: 66px; }
body .site-header .site-branding .custom-logo-link img,
body.fj-header--stuck .site-header .site-branding img {
  height: 66px;
  width: auto;
  max-height: none;
  max-width: none;
  object-fit: contain;
  align-self: center;
}
body .site-header .site-search {
  order: 1;
  display: block;
  position: relative;
  flex: 1 1 320px;
  float: none;
  width: auto;
  min-width: 160px;
  max-width: 640px;
  margin: 0 auto;
  overflow: visible;
}
body .site-header .site-search form { margin: 0; }
body .site-header .site-search .search-field { width: 100%; }
body .site-header .fj-header-contact { flex: 0 0 auto; order: 2; }
body .site-header > .col-full > .site-header-cart {
  order: 3;
  flex: 0 0 auto;
  float: none;
  width: auto;
  margin: 0;
}
/* D-UXNAV-AXE-CONTRAST-1 (04/11/2026): axe 1 node on 15/15 pages: ".cart-contents > .count" "0 items"
   rendered #878b98 on #f7f5f1 = 3.12:1. fj-components.css:197 sets the ink colour, but Storefront's
   half-opacity on the count survived once the one-line header stopped owning this row. */
body .site-header .site-header-cart .cart-contents .count { opacity: 1; }
body .site-header .storefront-primary-navigation { border-bottom: 0; }
/* Coordinator 04/11/2026: a mouse click left Storefront's :focus outline boxed round the trigger;
   keyboard users keep the :focus-visible ring below. */
.fj-nav .fj-nav__link:focus:not(:focus-visible),
.fj-nav .fj-nav__acc-hd:focus:not(:focus-visible) { outline: none; }
.fj-announcement__close { min-width: 44px; min-height: 44px; top: 0; }
.fj-announcement { min-height: 44px; box-sizing: border-box; }

.fj-nav, .fj-nav * { box-sizing: border-box; }
.fj-nav [hidden] { display: none !important; }
.fj-nav__sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }
.fj-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-family: var(--font-body);
}
.fj-nav.is-stuck { box-shadow: var(--elev-2); }
.fj-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  width: min(calc(100% - 48px), 1440px);
  margin: 0 auto;
}
.fj-nav .fj-nav__list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fj-nav__item { position: static; margin: 0; padding: 0; }
.fj-nav button, .fj-nav a { -webkit-tap-highlight-color: transparent; }
.fj-nav .fj-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 52px;
  min-width: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--fj-slate);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.fj-nav .fj-nav__link:hover,
.fj-nav .fj-nav__link[aria-expanded="true"],
.fj-nav .fj-nav__link[aria-current] { color: var(--navy); border-bottom-color: var(--gold); }
.fj-nav .fj-nav__link[aria-current] { font-weight: 700; }
.fj-nav :is(a, button):focus-visible {
  outline: 2px solid transparent; /* Retain a system-colour ring in forced-colours mode. */
  box-shadow: var(--fj-focus-ring);
  position: relative;
  z-index: 2;
}
.fj-nav__caret { flex: 0 0 8px; transition: transform var(--dur-1) var(--ease-out); }
.fj-nav [aria-expanded="true"] > .fj-nav__caret { transform: rotate(180deg); }

.fj-nav__panel {
  --cols: 1;
  position: absolute;
  top: 100%;
  left: 0;
  display: grid;
  grid-template-columns: 232px repeat(var(--cols), minmax(0, 1fr));
  gap: var(--space-6);
  width: 536px;
  max-width: 100%;
  max-height: min(72vh, 640px);
  padding: var(--space-6);
  border-top: 3px solid var(--gold);
  background: var(--white);
  box-shadow: 0 8px 24px rgba(22, 32, 63, .18);
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding: var(--space-2);
  animation: fj-nav-enter var(--dur-2) var(--ease-out);
}
.fj-nav__panel--2 { --cols: 2; width: 792px; }
.fj-nav__panel--3 { --cols: 3; width: 1048px; }
.fj-nav__panel--4 { --cols: 4; width: 1304px; }
.fj-nav__rail { padding: var(--space-4); border-radius: var(--radius-2); background: var(--paper); }
.fj-nav__rail-title { display: block; font: 700 var(--text-xl)/1.25 var(--font-display); color: var(--navy); }
.fj-nav__col { min-width: 0; }
.fj-nav .fj-nav__rail-all,
.fj-nav .fj-nav__group-hd,
.fj-nav__sublist a {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-base);
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.fj-nav .fj-nav__rail-all { color: var(--royal); font-weight: 700; margin-top: var(--space-2); }
.fj-nav .fj-nav__group-hd { color: var(--navy); font-weight: 700; }
.fj-nav .fj-nav__sublist { margin: 0; padding: 0; list-style: none; }
.fj-nav__sublist li { margin: 0; padding: 0; }
.fj-nav__sublist a { color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
.fj-nav__sublist a.fj-nav__more { color: var(--royal); font-weight: 700; }
.fj-nav__panel a:hover, .fj-nav__drawer a:hover { color: var(--royal); text-decoration: underline; }
.fj-nav__panel a[aria-current="page"], .fj-nav__drawer a[aria-current="page"] { font-weight: 700; color: var(--navy); }
.fj-nav__actions {
  display: flex;
  flex: 0 0 96px;
  gap: var(--space-2);
  width: 96px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-1) var(--ease-out), visibility var(--dur-1);
}
.fj-nav.is-stuck .fj-nav__actions { opacity: 1; visibility: visible; }
.fj-nav .fj-nav__iconbtn,
.fj-nav .fj-nav__drawer-close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  text-decoration: none;
}
.fj-nav__count { position: absolute; right: 0; top: 0; font-size: var(--text-xs); font-weight: 700; line-height: 1; }
.fj-nav__mobtrigger { display: none; }
.fj-nav__drawer {
  position: fixed;
  inset: 0;
  z-index: 1001;
  height: 100vh;
  height: 100dvh;
  padding: var(--space-2) max(var(--space-3), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding: var(--space-2);
  background: var(--white);
}
.fj-nav__drawer-hd { display: flex; justify-content: space-between; align-items: center; min-height: 56px; gap: var(--space-3); }
.fj-nav .fj-nav__drawer-close { font-size: var(--text-2xl); }
.fj-nav .fj-nav__acc-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 56px;
  padding: var(--space-2);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  color: var(--navy);
  font: 600 var(--text-base)/1.25 var(--font-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.fj-nav .fj-nav__acc-hd[aria-current] { border-bottom: 3px solid var(--gold); font-weight: 700; }
.fj-nav__acc-body { padding: var(--space-2); }
.fj-nav .fj-nav__acc-body a { min-height: 48px; }
.fj-nav__acc-body .fj-nav__sublist { padding-left: var(--space-4); }

@keyframes fj-nav-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1399.98px) {
  .fj-nav .fj-nav__link { padding-inline: var(--space-2); }
}
@media (min-width: 1024px) {
  /* Storefront's navigation wrapper is now empty on desktop; no phantom row. */
  body .site-header .storefront-primary-navigation { display: none; }
  body .fj-mobile-search { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .fj-nav .fj-nav__list { flex-wrap: wrap; }
  .fj-nav__panel { width: 100%; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .fj-nav__rail { grid-column: 1 / -1; }
}
@media (max-width: 1023.98px) {
  /* Override fj-components.css #473's hidden .fj-mobile-search and 769px
     primary-menu cutoff: tablets use the same visible search and drawer as phones. */
  body .fj-mobile-search { display: block; }
  /* Coordinator, staging 390px 04/11/2026: the field and a full "Search" button stacked on two rows
     (~100px). One row: field grows, button stays a 44px-tall compact control. */
  body .fj-mobile-search form { margin: 0; display: flex; align-items: stretch; gap: 8px; }
  body .fj-mobile-search form .search-field { flex: 1 1 auto; min-width: 0; }
  body .fj-mobile-search form button[type="submit"] { flex: 0 0 auto; min-height: 44px; margin: 0; padding: 0 16px; }
  body .fj-mobile-search .search-field { width: 100%; min-height: 44px; }
  body .site-header .site-search { display: none; }
  body .site-header > .col-full { gap: var(--space-3); padding-right: 96px; }
  body .site-header .storefront-primary-navigation > .col-full { position: static; }
  body .site-header .storefront-primary-navigation .main-navigation { display: block; width: 100%; }
  body .site-header .main-navigation button.menu-toggle {
    display: block;
    position: absolute;
    top: 42px;
    right: var(--space-6);
    transform: translateY(-50%);
    min-height: 44px;
    min-width: 44px;
    margin: 0;
  }
  body .site-header .main-navigation .primary-navigation { display: none; }
  body .site-header .main-navigation .handheld-navigation { display: none; }
  body .site-header .main-navigation.toggled .handheld-navigation { display: block; }
  .fj-nav__inner { width: calc(100% - 24px); min-height: 60px; }
  .fj-nav .fj-nav__list, .fj-nav__actions { display: none; }
  .fj-nav .fj-nav__mobtrigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: var(--radius-2);
    background: var(--navy);
    color: var(--white);
    font: 600 var(--text-base)/1.25 var(--font-body);
    cursor: pointer;
  }
}
/* Round 2: Storefront's handheld cart bar ends below 768px. 768.98 here left an iPad at exactly 768 with no cart at all. */
@media (max-width: 767.98px) {
  body .site-header .fj-header-contact,
  body .site-header > .col-full > .site-header-cart { display: none; }
}
/* Round 2: on a tablet the brand row scrolls away and no handheld bar replaces it, so the stuck band carries search and cart. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .fj-nav.is-stuck .fj-nav__actions { display: flex; margin-left: var(--space-2); }
  .fj-nav.is-stuck .fj-nav__mobtrigger { flex: 1 1 auto; width: auto; }
}
/* Round 2, admins only: the toolbar sits above the band and above the drawer's close button. */
body.admin-bar .fj-nav { top: 32px; }
body.admin-bar .fj-nav__drawer { top: 32px; height: calc(100dvh - 32px); }
@media (max-width: 782px) {
  body.admin-bar .fj-nav { top: 46px; }
  body.admin-bar .fj-nav__drawer { top: 46px; height: calc(100dvh - 46px); }
}
@media (max-width: 600px) {
  body.admin-bar .fj-nav { top: 0; } /* WP lets the toolbar scroll away here. */
}
@media (prefers-reduced-motion: reduce) {
  .fj-nav, .fj-nav *, .fj-nav *::before, .fj-nav *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* UX-HOME-1 (05/11/2026): site-wide trust strip, above the header, in normal flow. It scrolls
   away, and the sticky band keeps top: 0. No JS and no late content, so it adds no layout shift.
   Below 768 the three lines do not fit one row, so line 1 takes its own row and the two short
   links share the second. */
.fj-strip { background: var(--navy); color: var(--white); font-family: var(--font-body); font-size: 13px; line-height: 1.3; }
.fj-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-7);
  width: min(calc(100% - 32px), 1440px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.fj-strip__item { margin: 0; }
.fj-strip__link { display: block; padding: 8px 0; color: var(--white); text-align: center; text-decoration: none; }
.fj-strip__link strong { font-weight: 700; color: var(--gold-l); }
.fj-strip__link:hover { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.fj-strip__link:focus-visible { outline: 2px solid var(--gold-l); outline-offset: -2px; }
@media (max-width: 767.98px) {
  .fj-strip__list { gap: 0 var(--space-6); }
  .fj-strip__item:first-child { flex: 0 0 100%; }
}