/* F&J component styles (T4–T7, T9). Tokens come from style.css :root. */

/* ---------- T4 header (reworked for Gate A P1 #1 — navy band + mega-menu layout) ---------- */
.fj-announcement { background: var(--fj-navy); color: var(--fj-paper); text-align: center; padding: 6px 40px 6px 12px; position: relative; font-size: 0.875rem; }
.fj-announcement__close { position: absolute; right: 8px; top: 2px; background: none; color: var(--fj-paper); border: 0; font-size: 1.25rem; cursor: pointer; }
.fj-header-contact { display: flex; align-items: center; gap: 16px; }
.fj-header-phone { color: #fff; white-space: nowrap; font-weight: 600; }
.fj-header-account { color: #fff; }
body.fj-header--stuck .site-header { position: sticky; top: 0; z-index: 999; box-shadow: var(--fj-shadow); }
body.fj-header--stuck .site-branding img { max-height: 40px; width: auto; }

/* ---------- T55 · Custom logo sizing (LOGO LAW 29/07 clause 1 + RULE 3) ----------
   The F&J logo was set as the WP custom logo on 3/08, which closed the RULE 5 breach
   (the header had been typesetting the business name as TEXT). Storefront then rendered
   it at its intrinsic 1041x1041 scaled to 230x230, and the header went 151.94px -> 427.11px,
   breaking the --stick:165px contract the sticky sidebars depend on.
   RULE 3: set ONE dimension only, never both. object-fit:contain guarantees the ratio,
   align-self:center defeats the flex align-items:stretch that distorted JURA on 24/7.
   The stuck-state max-height:40px above still wins over this height, by design. */
.site-branding .custom-logo,
.site-header .custom-logo-link img {
  height: 66px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  align-self: center;
  display: block;
}

/* --- Navy nav bar: ONE horizontal row inside the header — categories left, phone/account + cart right.
       Flex on the Storefront wrapper kills the float layout that stacked the 13 items vertically and
       blew the header out to ~600px (the "empty navy band"). Header height = content from here on. --- */
.storefront-primary-navigation { background: var(--fj-navy); }
.storefront-primary-navigation > .col-full {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative; /* dropdown panels anchor to this container */
  margin-top: 0;
  margin-bottom: 0;
}
.storefront-primary-navigation .main-navigation { order: 0; } /* mobile toggle/drawer first on small screens */
.fj-mega { order: 1; flex: 1 1 auto; min-width: 0; }
.storefront-primary-navigation .fj-header-contact { order: 2; margin-left: auto; }
.storefront-primary-navigation .site-header-cart,
.storefront-primary-navigation .site-header-cart.menu { order: 3; margin: 0; }

@media (min-width: 769px) {
  /* Desktop: the fj-mega bar IS the navigation; Storefront's primary menu (drawer source) hides. */
  .storefront-primary-navigation .main-navigation { display: none; }
}

/* --- Mega-menu bar (desktop). Pure-CSS open on hover/focus-within; .fj-open is the JS touch/keyboard latch.
       Selectors use only standard WP menu classes (.menu-item-has-children, .sub-menu) + depth position —
       no category names hardcoded; any count of top-levels/L2/L3 lays out the same way. --- */
.fj-mega__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.fj-mega__list > li { position: static; margin: 0; }
.fj-mega__list > li > a {
  display: flex;
  align-items: center;
  min-height: 44px;               /* tap target per FJ_DESIGN_UX_UPGRADE §1.4 */
  padding: 0 14px;
  color: #fff;                    /* 16.0:1 on navy */
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent; /* balances the hover bar — no height jump */
}
.fj-mega__list > li > a:hover,
.fj-mega__list > li > a:focus,
.fj-mega__list > li.fj-open > a,
.fj-mega__list > li:focus-within > a {
  color: var(--fj-gold);              /* 5.09:1 on navy — AA */
  border-bottom-color: var(--fj-gold);
}
/* Caret on items that open a panel (currentColor — inherits white/gold states) */
.fj-mega__list > li.menu-item-has-children > a::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 7px;
}

/* --- Dropdown panel (L1 > panel): full container width, white, gold top rule, columns per L2 --- */
.fj-mega__list > li > ul.sub-menu {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 1000;
  background: #fff;
  border-top: 3px solid var(--fj-gold);
  box-shadow: 0 8px 24px rgba(22, 32, 63, 0.18);
  padding: 20px 24px 24px;
  margin: 0;
  list-style: none;
  max-height: 70vh;
  overflow: auto;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 24px;
}
.fj-mega__list > li:hover > ul.sub-menu,
.fj-mega__list > li:focus-within > ul.sub-menu,
.fj-mega__list > li.fj-open > ul.sub-menu { display: grid; }

/* L2 = column heading */
.fj-mega__list > li > ul.sub-menu > li { list-style: none; margin: 0; min-width: 0; }
.fj-mega__list > li > ul.sub-menu > li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--fj-ink);           /* 16.0:1 on white */
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 90, 120, 0.2);
}
.fj-mega__list > li > ul.sub-menu > li > a:hover,
.fj-mega__list > li > ul.sub-menu > li > a:focus { color: var(--fj-royal); } /* 8.1:1 on white */

/* L3 = links under each L2 heading — always visible inside the open panel */
.fj-mega__list > li > ul.sub-menu > li > ul.sub-menu {
  display: block;
  position: static;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0;
}
.fj-mega__list > li > ul.sub-menu > li > ul.sub-menu li { list-style: none; margin: 0; }
.fj-mega__list > li > ul.sub-menu > li > ul.sub-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--fj-slate);         /* 7.1:1 on white */
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  border-radius: var(--fj-radius);
}
.fj-mega__list > li > ul.sub-menu > li > ul.sub-menu a:hover,
.fj-mega__list > li > ul.sub-menu > li > ul.sub-menu a:focus {
  color: var(--fj-royal);
  background: rgba(62, 118, 201, 0.08);
}

/* ==========================================================================
   T55 · LIGHT/PAPER HEADER + CATEGORY CHIP RAIL + "SHOP ALL" PANEL
   Owner decisions #96: chips visible, the full 162-item menu preserved behind
   "Shop all", and the header goes light/paper per D5 replacing the navy band.

   🔴 THE TRAP THAT COMES WITH THE PAPER HEADER: it invalidates the premise of
   the #92 cart-total fix, which assumed navy behind the total and made the
   inner spans inherit WHITE. On paper, white-on-paper is the new failure.
   Every header colour below is therefore re-stated against --paper, and every
   pairing is re-measured by SCREENSHOT, never by the T54 sweep (whose
   background resolution is untrustworthy — four instrument faults on one run).
   ========================================================================== */

/* --- The surface. Storefront's Customizer inline CSS outguns the child theme on
       header colours, so the Customizer value is set to --paper as well; these
       rules are the theme-side backstop, not the only defence. --- */
/* 🔴 !important IS REQUIRED HERE, AND IT WAS PROVED, NOT ASSUMED. Storefront
   emits its header colours as CUSTOMIZER-GENERATED INLINE CSS
   (`inline#storefront-style-inline-css`), which sits after the child theme in
   the cascade and won: the header measured rgb(22,32,63) with this rule already
   in place. Setting the Customizer values via customize_save returned success
   and STILL did not move it. This matches the standing note that Storefront's
   Customizer CSS outguns the child theme, and it is the same `!important`
   pattern this file already uses for the ATC button and volume-break header. */
.site-header,
.storefront-primary-navigation {
  background-color: var(--paper) !important;
  border-bottom: 1px solid var(--line);
}
.site-header { color: var(--fj-ink); }

/* --- Header text on paper. Was #fff on navy; white-on-paper is ~1.1:1. --- */
.fj-header-phone,
.fj-header-account,
.site-header a:not(.fj-catchip):not(.button) { color: var(--fj-ink); }
.fj-header-phone:hover, .fj-header-phone:focus,
.fj-header-account:hover, .fj-header-account:focus { color: var(--royal); }

/* --- #92's cart total: the inner spans were made to inherit white for navy.
       Re-pointed at ink so they are legible on paper. --- */
.site-header .site-header-cart .amount,
.site-header .site-header-cart .woocommerce-Price-amount,
.site-header .site-header-cart .woocommerce-Price-currencySymbol,
.site-header .site-header-cart .cart-contents,
.site-header .site-header-cart .cart-contents .count { color: var(--fj-ink); }

/* --- The rail. One row, never wrapping — this is what returns the header to
       spec; the old bar wrapped 13 items onto 3 rows (132px). --- */
/* 🔴 THE RAIL CANNOT SCROLL UNLESS ITS OWN CONTAINER CAN SHRINK. The old bar's
   layout rule was `.fj-mega { order:1; flex:1 1 auto; min-width:0 }` and renaming
   the element to .fj-catnav left that rule pointing at a class that no longer
   exists. MEASURED consequence: the rail grew to 1586px inside a 1148px column,
   scrollWidth === clientWidth so it never scrolled, the chips ran off the right
   edge, and the arrows correctly stayed hidden because nothing was overflowing
   *within* the rail. The arrow logic was right; the container was wrong. */
.fj-catnav { position: relative; background-color: var(--paper); order: 1; flex: 1 1 auto; min-width: 0; }
.fj-catnav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  min-width: 0;
}
/* === T55-R · HEADER VERTICAL RHYTHM + MOBILE RAIL + POLISH (DECISION_LOG #106,
   Fred approved via the 4/08 design critique: "do it") ==================
   Target: header 151.94px ±1 at the 1440 contract width (#104). Height budget:
   16 header padding-top + ~76 branding/search + 60 nav row (the rail's height).
   🔴 The cart was 103.54px — TWO wrapped text lines inside 1.618em padding top
   AND bottom — the tallest thing in the header (#104). One line, centred.
   !important where Storefront's own CSS outranks the child theme (#103). */
.site-header { padding-top: 15px !important; padding-bottom: 0 !important; }
.site-header .site-branding { margin: 5px 0 !important; }
.site-header .site-branding .custom-logo-link { display: block; line-height: 0; }
.site-header-cart .cart-contents {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 8px 0 !important;
}
/* Phone + Account: 44px effective touch target, text size unchanged (a11y) */
.fj-header-phone, .fj-header-account { display: inline-flex; align-items: center; min-height: 44px; }
/* Search field on TOKENS (T54: no hard-coded grey) at the 44px control rhythm.
   White fill so the field reads as an input against the paper header; #fff is
   the card/panel surface this theme already uses (Shop-all panel, arrows). */
.site-header .site-search .search-field {
  background-color: #fff;
  border: 1px solid var(--line-ctl);
  color: var(--fj-ink);
  min-height: 44px;
  border-radius: var(--fj-radius);
}
/* Reduced motion: the rail must not animate for users who asked it not to */
@media (prefers-reduced-motion: reduce) {
  .fj-catchips { scroll-behavior: auto; }
}
/* Keyboard/programmatic scrolls keep the target chip clear of the arrows */
.fj-catchips { scroll-padding-inline: 52px; }
/* Brand anchor: gold as a NON-TEXT accent only (#29 — gold fails as text on
   paper at 3.14:1). Current + hover chip carry a gold underline bar, matching
   the gold top-rule the Shop-all panel already carries. */
.site-header .fj-catchip:hover,
.site-header .fj-catchips__item--current > .fj-catchip {
  box-shadow: 0 3px 0 0 var(--gold);
}

/* --- T55-R mobile: D5's `.segs` pattern (Direction_D5_IPAD_AND_MOBILE.html) —
   the rail becomes a FULL-WIDTH scrolling strip on its OWN row below the bar.
   🔴 Without this the rail collapsed to 0 width at 390px (#105).
   Arrows are hidden on phones — swipe is the path, chips stay tabbable, and
   T45's "arrows never the only path" holds in reverse: removing them removes
   no functionality. D5's own mobile concept carries no arrows.
   🔴 OWNER DECISION (#106): --stick 165 is a DESKTOP (≥769px) contract; the
   phone header accepts the strip's extra row. Recorded, not assumed. */
@media (max-width: 768.98px) {
  /* 🔴 Storefront's handheld CSS pins this .col-full to an explicit 120px
     (measured live, 4/08) — the rail's 100% basis resolved against 120px and
     the strip could never exist. Full width + wrap makes the row wrappable. */
  /* 🔴 EXPLICIT width + margins-to-padding, measured 4/08 through THREE failed
     shapes: Storefront's handheld layout shrink-wraps this box, so width:auto
     resolves to ~120px (the widest child) — NOT to the container; and
     width:100% ON TOP OF the 22.65px side margins overflowed the viewport and
     pushed Shop-all off-screen. 100% + margin:0 + padding keeps the inset and
     makes the strip row full-bleed — which is D5 `.segs` exactly. */
  .storefront-primary-navigation > .col-full {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 22px;
    flex-wrap: wrap;
    /* 🔴 T57 audit fix: at EXACTLY 768px this rule overlaps Storefront's
       min-width:768 desktop styles, whose .col-full is CONTENT-BOX — so
       width:100% + 44px padding rendered 797px in a 753px viewport and
       clipped Shop-all/Account by 44px (measured 4/08; invisible below 768,
       where handheld styles give border-box). Real 768px tablets (iPad Mini
       portrait) land in that window. Pin the box model instead of moving
       the breakpoint. */
    box-sizing: border-box;
  }
  /* flex-basis 100% wraps the rail onto its own row; min-width must stay 0 —
     min-width:100% resolved past the wrapped line's real width (col-full's
     margins) and pushed Shop-all 23px off a 390px screen. Measured 4/08. */
  .fj-catnav { flex: 0 0 100%; min-width: 0; order: 9; }
  .catnav { display: none !important; }
}

/* 🔴 THE ARROWS MUST BE POSITIONED AGAINST THE RAIL, NOT AGAINST THE WHOLE ROW.
   `.catnav--next { right: 0 }` resolves against its nearest POSITIONED ancestor.
   That was `.fj-catnav__inner`, whose box INCLUDES the "Shop all" button — so
   "the right edge" was the BUTTON'S right edge, the next-arrow rendered on top
   of it, and the label clipped to "Sho...".
   🔴 Every computed measurement passed. Only the SCREENSHOT showed it.
   This wrapper gives the arrows a containing block that ends where the chips
   end. `.fj-shopall__toggle` stays a SIBLING of it — moving the button inside
   re-creates the defect exactly. */
.fj-catnav__rail {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
/* 🔴 NAMED `fj-catchip`, NOT `fj-chip`. `.fj-chips` / `.fj-chip` ALREADY EXIST
   further down this file as the T57 PLP applied-filter chips, and T45 requires
   THOSE to WRAP rather than scroll on phones — the exact opposite of this rail.
   Reusing the name leaked `overflow-x`, `scroll-behavior` and `flex` onto the
   filter chips (properties the PLP rule does not re-state, so it cannot win
   them back) and left both components half-styled. Caught before the push. */
.fj-catchips {
  display: flex;
  flex-wrap: nowrap;            /* the whole point: never wrap */
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  gap: var(--space-2);
  overflow-x: auto;             /* swipeable — the arrows are never the only path */
  scroll-behavior: smooth;
  scrollbar-width: none;        /* the arrows and the swipe are the affordance */
  flex: 1 1 auto;
  min-width: 0;
}
.fj-catchips::-webkit-scrollbar { display: none; }
.fj-catchips__item { margin: 0; flex: 0 0 auto; list-style: none; }
.fj-catchip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;             /* tap target, FJ_DESIGN_UX_UPGRADE §1.4 */
  padding: 0 var(--space-4);
  white-space: nowrap;
  border: 1px solid var(--line-ctl);
  border-radius: 999px;
  background-color: var(--paper);
  color: var(--fj-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.fj-catchip:hover, .fj-catchip:focus-visible,
.fj-catchips__item--current > .fj-catchip {
  background-color: var(--royal);
  border-color: var(--royal);
  color: var(--paper);
}
.fj-catchip:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* 🔴 STATED AT HEADER SPECIFICITY, AND THIS IS NOT BELT-AND-BRACES. Storefront's
   header link colour is a descendant selector, so it beats the single class
   `.fj-catchip`. MEASURED before this rule existed: chip text rgb(255,255,255)
   on chip background rgb(247,245,241) — about 1.05:1, an INVISIBLE RAIL. The
   #92 white-on-navy inheritance is exactly what turns into this on paper. */
.site-header .fj-catchip { color: var(--fj-ink); }
.site-header .fj-catchip:hover,
.site-header .fj-catchip:focus-visible,
.site-header .fj-catchips__item--current > .fj-catchip { color: var(--paper); }
.site-header .catnav { color: var(--fj-ink); }
.site-header .catnav:hover { color: var(--paper); }

/* --- T45 arrows. REAL buttons, 44x44, absolutely positioned so the rail height
       and therefore the header height are untouched.
       🔴 NEVER a translucent fade, gradient mask or tinted overlay — that
       compositing pattern produced 12 false contrast failures at QA round 4. --- */
.catnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line-ctl);
  border-radius: 999px;
  background-color: var(--paper);   /* opaque, never a wash */
  color: var(--fj-ink);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--fj-shadow);
}
.catnav[hidden] { display: none; }
.catnav--prev { left: 0; }
.catnav--next { right: 0; }
.catnav:hover { background-color: var(--royal); border-color: var(--royal); color: var(--paper); }
.catnav:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }

/* --- "Shop all": the 162-item menu, preserved and reachable. --- */
.fj-shopall__toggle {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--navy);
  border-radius: 999px;
  background-color: var(--navy);
  color: var(--paper);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.fj-shopall__toggle:hover { background-color: var(--royal); border-color: var(--royal); }
.fj-shopall__toggle:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
.fj-shopall {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 1000;
  background-color: var(--paper);
  border-top: 3px solid var(--gold);
  box-shadow: 0 8px 24px rgba(22, 32, 63, 0.18);
  padding: var(--space-5) var(--space-6) var(--space-6);
  max-height: 70vh;
  overflow: auto;
}
.fj-shopall[hidden] { display: none; }
/* A static directory, not nested dropdowns: L1 columns, L2 headings, L3 links. */
.fj-shopall__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3) var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fj-shopall__list li { list-style: none; margin: 0; min-width: 0; }
.fj-shopall__list ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.fj-shopall__list > li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--fj-ink);
  font-weight: 700;
  font-size: var(--text-base);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.fj-shopall__list > li > ul > li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--fj-ink);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
}
.fj-shopall__list ul ul a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-left: var(--space-3);
  color: var(--muted);
  font-weight: 400;
  font-size: var(--text-sm);
  text-decoration: none;
}
.fj-shopall__list a:hover,
.fj-shopall__list a:focus-visible { color: var(--royal); text-decoration: underline; }

/* --- T55 footer logo. Dark surface -> the official Reversed-for-dark variant.
       LOGO LAW RULE 3: ONE dimension only, never both. No white plate (clause 2). --- */
.fj-footer__logo { margin: 0 0 var(--space-3); }
.fj-footer__logo-img {
  height: 56px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  align-self: center;
  display: inline-block;
}
.fj-footer__gst { color: rgba(255, 255, 255, .85); font-size: .8125em; margin: var(--space-2) auto 0; max-width: 70ch; }

.fj-mobile-search { display: none; padding: 8px 12px; background: var(--fj-paper); border-bottom: 1px solid rgba(63,90,120,.15); }
@media (max-width: 768.98px) { /* .98 closes the fractional-width gap against the 769px desktop query (Bootstrap-convention pair) */
  .fj-mega { display: none; }     /* mobile keeps the Storefront drawer (Storefront primary menu) */
  .fj-mobile-search { display: block; }
  .fj-header-phone__num { display: none; } /* icon only on mobile */
}

/* ---------- T4 footer ---------- */
.fj-footer { text-align: center; padding: 12px 0 24px; }
.fj-footer__links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin: 0 0 12px; padding: 0; }
.fj-footer__brands { color: rgba(255,255,255,.85); margin: 4px 0; }
.fj-footer__pay { color: rgba(255,255,255,.6); font-size: .8125em; }

/* ---------- T5 homepage ---------- */
.fj-hero { padding: 48px 16px; text-align: center; background: #fff; }
.fj-hero h1 { max-width: 22ch; margin: 0 auto 20px; }
.fj-hero__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fj-hero__ctas .fj-cta--secondary { background: transparent; color: var(--fj-royal); border: 2px solid var(--fj-royal); }
.fj-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px 16px; max-width: 1100px; margin: 0 auto; }
.fj-tile { background: #fff; border: 1px solid rgba(63,90,120,.15); border-radius: var(--fj-radius); text-align: center; padding: 12px; }
.fj-tile img { aspect-ratio: 1/1; object-fit: contain; width: 100%; height: auto; }
.fj-tile a { color: var(--fj-ink); font-weight: 600; }
.fj-trust-strip { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; padding: 12px 16px; font-size: .9375rem; }
.fj-brand-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin: 24px auto; padding: 0 16px; }
.fj-brand-card { border-radius: var(--fj-radius); padding: 20px; background: #fff; border-top: 4px solid var(--fj-gold); }
.fj-brand-card--planetwise { border-top-color: var(--fj-planetwise-leaf); }
.fj-brand-card--jura { border-top-color: var(--fj-jura-glacier); }
@media (max-width: 768px) {
  .fj-tiles { grid-template-columns: repeat(2, 1fr); }
  .fj-brand-row { grid-template-columns: 1fr; }
}

/* ---------- T6 PLP ---------- */
ul.products li.product .fj-per-unit { font-weight: 700; color: var(--fj-ink); }
ul.products li.product img { aspect-ratio: 1/1; object-fit: contain; background: #fff; }
.fj-result-count { color: var(--fj-ink-soft); font-size: .9375rem; }
/* T57 — applied-filter chips, D5 .chip language. T45's LAW: chips WRAP, never
   scroll — an applied filter is STATE the customer must always be able to see
   and remove (the scrolling rail is `.fj-catchip`, a different component).
   The WHOLE chip is one ≥44px anchor (T41 QA law — never a 15px ✕ target). */
.fj-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.fj-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  background: #fff;
  border: 1.5px solid var(--line-ctl);
  border-radius: 30px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--fj-ink);
  text-decoration: none;
}
.fj-chip:hover, .fj-chip:focus-visible { border-color: var(--royal); color: var(--royal); }
.fj-chip__x { color: var(--royal); font-weight: 700; font-size: var(--text-lg); }
.fj-skeleton { background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%); background-size: 400% 100%; animation: fj-sk 1.4s ease infinite; border-radius: var(--fj-radius); }
@keyframes fj-sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.fj-no-products { text-align: center; padding: 32px 16px; }
.fj-no-products ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; }
.fj-cat-intro--collapsed .term-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- T7 PDP ---------- */
.fj-volume-breaks { width: 100%; margin: 12px 0; border-collapse: collapse; }
.fj-volume-breaks th, .fj-volume-breaks td { padding: 8px 12px; border: 1px solid rgba(63,90,120,.2); text-align: left; }
.fj-volume-breaks tr[data-fj-min] { cursor: pointer; }
.fj-line-total { display: block; margin: 8px 0; color: var(--fj-ink-soft); }
.fj-qty-stepper { display: inline-flex; align-items: center; gap: 0; }
.fj-qty-stepper button { min-width: 44px; min-height: 44px; }
.fj-sticky-atc { display: none; }
@media (max-width: 768px) {
  .fj-sticky-atc { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 998; background: #fff; box-shadow: 0 -2px 8px rgba(22,32,63,.15); padding: 8px 12px; align-items: center; gap: 12px; }
  .fj-sticky-atc.fj-sticky-atc--on { display: flex; }
  .fj-sticky-atc .price { margin: 0; font-weight: 700; }
  .woocommerce-tabs .panel { border-bottom: 1px solid rgba(63,90,120,.15); }
}
.fj-specs th { text-align: left; width: 40%; }

/* ---------- T9 search ---------- */
.fj-suggest { position: absolute; z-index: 1001; background: #fff; box-shadow: var(--fj-shadow); border-radius: 0 0 var(--fj-radius) var(--fj-radius); width: 100%; max-height: 420px; overflow: auto; }
.fj-suggest__item { display: flex; gap: 10px; padding: 8px 12px; align-items: center; }
.fj-suggest__item[aria-selected="true"], .fj-suggest__item:hover { background: rgba(62,118,201,.08); }
.fj-suggest__item img { width: 40px; height: 40px; object-fit: contain; }
.fj-suggest__sku { color: var(--fj-ink-soft); font-size: .8125em; }
.fj-suggest__per-unit { margin-left: auto; font-weight: 700; white-space: nowrap; }
.fj-suggest__footer { border-top: 1px solid rgba(63,90,120,.15); padding: 8px 12px; font-size: .875rem; }

/* ==========================================================================
   Gate-A hotfix fold-in (retires staging snippet 20 — deactivate the snippet
   ONLY after these are verified in the applied theme; see apply notes).
   !important is used deliberately: these must beat parent-theme/Woo selectors
   of unknown specificity, which is exactly why the hotfix existed.
   ========================================================================== */

/* 20a — WooCommerce pages full width, no sidebar. Body class added in inc/fj-header.php. */
.storefront-full-width-content .content-area { width: 100%; float: none; margin-right: 0; margin-left: 0; }
.storefront-full-width-content #secondary,
.storefront-full-width-content .widget-area { display: none; }

/* 20b — Volume-break table header: white on navy (16.0:1 — AA). */
table.fj-volume-breaks th,
.woocommerce div.product table.fj-volume-breaks th {
  background-color: var(--fj-navy) !important;
  color: #ffffff !important;
}

/* 20c — Add-to-cart: navy text on gold (5.09:1 — AA). Hover/active inverts to
   white on navy (16.0:1) — the parent theme's darker-gold hover fails AA. */
.single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button.alt,
button.single_add_to_cart_button.button.alt {
  background-color: var(--fj-gold) !important;
  color: var(--fj-navy) !important;
}
.single_add_to_cart_button:hover,
.single_add_to_cart_button:focus,
.single_add_to_cart_button:active,
.woocommerce .single_add_to_cart_button.button.alt:hover,
.woocommerce .single_add_to_cart_button.button.alt:focus {
  background-color: var(--fj-navy) !important;
  color: #ffffff !important;
}

/* 20d (T19) — Disabled add-to-cart (variation not yet chosen / out of stock):
   Storefront dims buttons with `button.disabled { opacity: .5 !important }`,
   which drops 20c's navy-on-gold to 1.91:1 (fails WCAG 1.4.3, and Woo marks the
   state by class only — no `disabled` attribute — so the inactive-component
   exemption does not apply). Replace the dim with a full-opacity neutral-grey
   state: slate #3F5A78 on #E0E0E0 = 5.40:1 (AA). Selectors carry the .disabled
   class at (0,5,0)/(0,2,1)+ to top both 20c's !important pairs and the parent's
   opacity !important. */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled,
.single_add_to_cart_button.disabled:hover,
.single_add_to_cart_button.disabled:focus,
.single_add_to_cart_button.disabled:active,
.woocommerce .single_add_to_cart_button.button.alt.disabled,
.woocommerce .single_add_to_cart_button.button.alt.disabled:hover,
.woocommerce .single_add_to_cart_button.button.alt.disabled:focus,
button.single_add_to_cart_button.button.alt.disabled {
  opacity: 1 !important;
  background-color: #e0e0e0 !important;
  color: #3F5A78 !important;
  cursor: not-allowed;
}

/* ==========================================================================
   T56 · SHARED COMPONENT LIBRARY — tranche 1 (inc/fj-components.php):
   price block · risk-reversal trio · account-pricing message.
   Component language: Direction_D5_PLP_PDP_ACCOUNT.html (the CANONICAL file —
   Direction_D5_SALES_MAGNET.html carries an older sentence; never copy it).
   Tokens only — no new hex enters the build (T54 §5); #fff is the established
   card/panel surface this file already uses (Shop-all panel, arrows, search).
   🔴 Zero-size-box rule: every element below is its own block/flex/grid box
   with content-driven height — no .fill{height:100%} on an inline span (that
   trap has bitten this project twice).
   🔴 Namespace guard: `.fj-chip(s)` (T57 filter chips, must WRAP) and
   `.fj-catchip(s)` (T55 rail) are NOT redefined here — new names only.
   ========================================================================== */

/* --- 1 · Price block. D5 .pprice: display-face ex figure, muted suffix line,
       royal per-unit line (the real comparison unit in this trade, D5 §3.1).
       The display face carries money figures at 700 ONLY (T54). --- */
.fj-price-block { display: block; margin: var(--space-3) 0; }
.fj-price-block__price {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--fj-ink);
}
/* Sale pairs: the struck old price must not shout at display size. */
.fj-price-block__price del { font-size: var(--text-lg); color: var(--muted); }
.fj-price-block__price ins { text-decoration: none; }
/* The ex/inc suffix drops back to the body face — the pair reads as one line. */
.fj-price-block__price .fj-price-suffix,
.fj-price-block__price .woocommerce-price-suffix {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--muted);
  margin-top: 2px;
}
.fj-price-block .fj-per-unit {
  display: block;
  margin-top: var(--space-2);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--royal);
}

/* --- 2 · Risk-reversal trio. D5 .trio/.risk: three white cards; single
       column below 1080px (D5's own breakpoint). min-width:0 so no long word
       can force a grid track wider than its column. --- */
.fj-risk-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-7) 0;
}
@media (max-width: 1080px) {
  .fj-risk-trio { grid-template-columns: 1fr; }
}
.fj-risk {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: var(--space-5);
  min-width: 0;
}
.fj-risk__ic { display: block; font-size: var(--text-3xl); line-height: 1; }
.fj-risk h3 { font-size: var(--text-xl); margin: var(--space-2) 0; }
.fj-risk p { margin: 0 0 var(--space-2); font-size: var(--text-base); color: var(--muted); }
.fj-risk__promise { margin-top: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.fj-risk__promise ul { list-style: none; margin: 0; padding: 0; }
.fj-risk__promise li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-top: var(--space-1);
  font-size: var(--text-base);
  color: var(--muted);
}
.fj-risk__tick { flex: none; color: var(--ok); font-weight: 700; }
.fj-risk__terms { margin-top: var(--space-3); }
.fj-risk__lk { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* --- 3 · Account-pricing message. Renders ONLY beside the viewer's own
       ladder rows (wired in inc/fj-pdp.php; JS-synced via [data-fj-acct-msg]).
       --ok is a NON-TEXT accent bar; text stays ink/muted. --- */
.fj-acct-msg {
  display: block;
  margin: var(--space-3) 0;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ok);
  border-radius: var(--fj-radius);
  padding: var(--space-3) var(--space-4);
}
.fj-acct-msg__title { display: block; font-size: var(--text-base); color: var(--fj-ink); }
.fj-acct-msg__sub { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--muted); }

/* ==========================================================================
   T56 · SHARED COMPONENT LIBRARY — tranche 2 (inc/fj-plp.php T56 section):
   quantity ladder (T46) · six-state free-delivery progress bar.
   Component language: Direction_D5_PLP_PDP_ACCOUNT.html (CANONICAL — the
   .vbreak card + the T32 .progbar states gallery carried verbatim there).
   🔴 Namespace guard: `.fj-chip(s)` (T57 filter chips), `.fj-catchip(s)`
   (T55 rail) and `.fj-volume-breaks` (reserved Phase-0 PDP table, still the
   live PDP render) are NOT redefined here — `.fj-qladder*` / `.fj-dbar*` only.
   🔴 Zero-size-box rule: the progress fill is display:block with an EXPLICIT
   11px height — never height:100% on an inline span (bitten twice).
   Tokens: every hex below lives ONLY in the :root block, carried from the D5
   canonical file. #167C84 / #3F5A78 already exist as --fj-teal / --fj-slate
   and are REUSED, not re-declared. rgba() forms of locked brand hexes follow
   the established practice in this file and style.css.
   ========================================================================== */
:root {
  /* Free-delivery bar palette — D5 states gallery, one declaration each. */
  --fj-dbar-grn-1:    #0F3220; /* A2 · metro progress gradient */
  --fj-dbar-grn-2:    #164A2C;
  --fj-dbar-done-1:   #12401F; /* B · earned */
  --fj-dbar-done-2:   #1C6435;
  --fj-dbar-quote-1:  #1B2A4E; /* A1 + C · quote surfaces */
  --fj-dbar-quote-2:  #12325F;
  --fj-dbar-pick-1:   #123C40; /* D · pickup (pairs with --fj-teal) */
  --fj-dbar-fill-1:   #5FBF7A; /* progress fill gradient */
  --fj-dbar-fill-2:   #8EE0A1; /* + the bold figure on the green surface */
  --fj-dbar-note-grn: #B9DCC5;
  --fj-dbar-note-blu: #CBD9F2;
  --fj-dbar-note-unk: #D6DEEE;
  --fj-dbar-note-pick:#EAF8FA;
}

/* --- 4 · Quantity ladder (T46). D5 .vbreak card language: white card,
       paper header band, one row per rung, 44px row height. `.is-now` +
       [data-fj-min] are the T58 stepper's hooks for the rung in force. --- */
.fj-qladder {
  display: block;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin: var(--space-4) 0;
}
.fj-qladder__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.fj-qladder__hd b { font-size: var(--text-lg); color: var(--fj-ink); }
.fj-qladder__hd span { font-size: var(--text-sm); color: var(--muted); }
.fj-qladder__rows { list-style: none; margin: 0; padding: 0; }
.fj-qladder__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  border-top: 1px solid var(--line);
  font-size: var(--text-base);
}
.fj-qladder__row:first-child { border-top: 0; }
.fj-qladder__qty { font-weight: 700; color: var(--fj-ink); white-space: nowrap; }
.fj-qladder__price { font-weight: 700; color: var(--fj-ink); white-space: nowrap; }
/* Rung in force (T58 marks it): royal tint + navy inset bar — D5 .vrow.on. */
.fj-qladder__row.is-now {
  background: rgba(43, 76, 155, 0.06);
  box-shadow: inset 4px 0 0 var(--navy);
}
/* The honest single-price state — a plain sentence, never an empty table. */
.fj-qladder-single {
  display: block;
  margin: var(--space-3) 0;
  font-size: var(--text-base);
  color: var(--muted);
}

/* --- 5 · Free-delivery progress bar — six states, E default. D5 .progbar.
       White text on the deep state gradients; the bold figure carries the
       state accent (--gold-l on quote surfaces — D5's own pairing). --- */
.fj-dbar {
  display: block;
  color: #fff;
  border-radius: 12px;
  padding: 11px 16px;
}
.fj-dbar__wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.fj-dbar__txt { font-size: var(--text-base); font-weight: 600; }
.fj-dbar__txt b { font-weight: 700; }
.fj-dbar__note { font-size: var(--text-base); flex: 1 1 auto; min-width: 250px; }
.fj-dbar__track {
  flex: 1 1 200px;
  min-width: 200px;
  height: 11px;
  border-radius: 10px;
  /* MEASURED DEVIATION from D5's delivery bar (which kept rgba(255,255,255,.18)):
     the fill measured 2.68:1 against the white trough composited on the A2
     green — under WCAG 1.4.11's 3:1 for the one boundary a progress bar
     exists to communicate. Same defect class T41 fixed on the Partner Credit
     bar, same ratified technique: darken the trough, never recolour the fill.
     Re-measured after: fill #5FBF7A vs composited trough — 5.58:1 on the A2
     surface (#113A22) and 4.28:1 on the done surface (#164E29), both ≥3:1. */
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
/* 🔴 EXPLICIT height — a block fill in a fixed-height trough, by design. */
.fj-dbar__fill {
  display: block;
  height: 11px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--fj-dbar-fill-1), var(--fj-dbar-fill-2));
}
.fj-dbar--unknown { background: linear-gradient(90deg, var(--navy), var(--fj-slate)); }
.fj-dbar--unknown .fj-dbar__note { color: var(--fj-dbar-note-unk); }
.fj-dbar--a1,
.fj-dbar--outside { background: linear-gradient(90deg, var(--fj-dbar-quote-1), var(--fj-dbar-quote-2)); }
.fj-dbar--a1 .fj-dbar__txt b,
.fj-dbar--outside .fj-dbar__txt b { color: var(--gold-l); }
.fj-dbar--a1 .fj-dbar__note,
.fj-dbar--outside .fj-dbar__note { color: var(--fj-dbar-note-blu); }
.fj-dbar--a2 { background: linear-gradient(90deg, var(--fj-dbar-grn-1), var(--fj-dbar-grn-2)); }
.fj-dbar--a2 .fj-dbar__txt b { color: var(--fj-dbar-fill-2); }
.fj-dbar--a2 .fj-dbar__note { color: var(--fj-dbar-note-grn); }
.fj-dbar--done { background: linear-gradient(90deg, var(--fj-dbar-done-1), var(--fj-dbar-done-2)); }
.fj-dbar--done .fj-dbar__note { color: var(--fj-dbar-note-grn); }
.fj-dbar--pickup { background: linear-gradient(90deg, var(--fj-dbar-pick-1), var(--fj-teal)); }
.fj-dbar--pickup .fj-dbar__txt b { color: #fff; }
.fj-dbar--pickup .fj-dbar__note { color: var(--fj-dbar-note-pick); }

/* ==========================================================================
   T57 · PLP — D5 category listing (Direction_D5_PLP_PDP_ACCOUNT.html):
   sticky filter rail · D5 cards consuming the T56 price block · result bar ·
   pagination geometry · empty state. Everything below is SCOPED to the
   `.fj-plp` body class / `.fj-plpgrid` frame that inc/fj-plp.php adds on
   shop + category archives ONLY — homepage rows, search and related-product
   loops are untouched.
   🔴 Namespace: `.fj-chip(s)` above are T57's chips; `.fj-catchip(s)` (T55
   rail) and every T56 class are NOT redefined here.
   Tokens only — no new hex; #fff and the rgba() of locked brand hexes follow
   this file's established practice.
   ========================================================================== */

/* --- STICKY, MADE TRUE. Storefront's parent style.css sets overflow-x:hidden
   on BOTH `body` and `.site`, and an ancestor with a non-visible overflow
   axis silently disables position:sticky for every descendant — MEASURED
   4/08: body.fj-header--stuck .site-header computed position:sticky yet sat
   at top -759px when scrolled. The T4 sticky header has therefore NEVER
   actually pinned, and the --stick 165 contract the D5 sidebars rest on was
   resting on air. `overflow-x: clip` clips exactly like hidden but creates
   NO scroll container, so sticky works. Same specificity, later cascade. --- */
body, .site { overflow-x: clip; overflow-y: visible; }
/* 🔴 Phones keep the scroll-away header: #107 owner decision 1 pins only the
   future 60px D5 mobile BAR, never this full header + strip (~270px). Sticky
   is a DESKTOP (≥769px) behaviour, same carve-out as --stick itself (#106). */
@media (max-width: 768.98px) {
  body.fj-header--stuck .site-header { position: static; }
}

/* --- The two-column frame. The SIDE WRAPPER stretches to the row height so
   the sticky rail has travel (D5 T41 defect 6: a shrink-wrapped wrapper gives
   roomToStick exactly 0 and the rail never pins); the results column keeps
   its own height. min-width:0 on both tracks — a grid item's min-width:auto
   will not shrink below content and that is how 790px documents happen. --- */
.fj-plpgrid {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-3);
}
.fj-plpgrid--noside { grid-template-columns: minmax(0, 1fr); }
.fj-plpgrid__side { align-self: stretch; min-width: 0; }
.fj-plpgrid__main { min-width: 0; }

/* --- Filter rail: white card, pinned at --stick below the (now real) sticky
   header, capped to the viewport so "Clear everything" is always reachable
   and scrolling INSIDE itself past the cap (D5 defect-6 second half). --- */
.fj-filters {
  position: sticky;
  top: var(--stick);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: var(--space-4) var(--space-4) var(--space-5);
  max-height: calc(100vh - var(--stick) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.fj-filters__summary { display: none; } /* desktop: the rail is always open */
.fj-filters__hd { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.fj-fgroup { border-top: 1px solid var(--line); padding: var(--space-3) 0 var(--space-1); margin-top: var(--space-3); }
.fj-fgroup:first-of-type { border-top: 0; margin-top: 0; }
.fj-fgroup__title { display: block; font-size: var(--text-base); color: var(--fj-ink); margin-bottom: var(--space-2); }
.fj-fgroup__list,
.fj-fgroup .woocommerce-widget-layered-nav-list { list-style: none; margin: 0; padding: 0; }
.fj-fgroup__list li,
.fj-fgroup .woocommerce-widget-layered-nav-list li { margin: 0; list-style: none; }
.fj-fgroup__list a,
.fj-fgroup .woocommerce-widget-layered-nav-list a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--fj-ink-soft);
  font-size: var(--text-base);
  text-decoration: none;
}
.fj-fgroup__list a:hover, .fj-fgroup__list a:focus-visible,
.fj-fgroup .woocommerce-widget-layered-nav-list a:hover,
.fj-fgroup .woocommerce-widget-layered-nav-list a:focus-visible { color: var(--royal); }
.fj-fgroup__item--current > a { color: var(--fj-ink); font-weight: 700; }
.fj-fgroup__count,
.fj-fgroup .woocommerce-widget-layered-nav-list .count { color: var(--muted); font-size: var(--text-sm); }
/* Layered-nav rows read as checkboxes (D5 .fopt/.fbox) — pseudo-box, real link */
.fj-fgroup--nav .woocommerce-widget-layered-nav-list a::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ring);
  border-radius: 6px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.fj-fgroup--nav .woocommerce-widget-layered-nav-list li.chosen a::before {
  content: "\2713";
  background: var(--navy);
  border-color: var(--navy);
}
.fj-filters__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--space-4);
  border: 2px solid var(--line-ctl);
  border-radius: 12px;
  background: #fff;
  color: var(--fj-ink);
  font-weight: 700;
  text-decoration: none;
}
.fj-filters__clear:hover, .fj-filters__clear:focus-visible { border-color: var(--navy); color: var(--navy); }

/* --- Result/sort bar (D5 .resbar): Storefront's own wrapper, laid out flex.
   The bottom copy keeps ONLY the pagination — D5 ends the grid with a pager,
   not a second sort control. --- */
.fj-plp .fj-plpgrid .storefront-sorting {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-2);
}
.fj-plp .fj-plpgrid .storefront-sorting .woocommerce-result-count { margin: 0; color: var(--fj-ink-soft); font-size: var(--text-base); font-weight: 600; }
.fj-plp .fj-plpgrid .woocommerce-ordering { margin: 0; }
.fj-plp .fj-plpgrid .woocommerce-ordering select.orderby {
  min-height: 44px;
  background-color: #fff;
  border: 2px solid var(--line-ctl);
  border-radius: 12px;
  padding: 0 var(--space-3);
  color: var(--fj-ink);
  font-size: var(--text-base);
  font-weight: 600;
}
.fj-clearall { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: var(--text-base); }
/* D5 puts the pager at the BOTTOM only; Storefront also renders one in the
   top bar — hidden here (the bottom copy is the one D5 keeps). */
.fj-plp .fj-plpgrid__main > .storefront-sorting:first-of-type .woocommerce-pagination { display: none; }
.fj-plp .fj-plpgrid ul.products ~ .storefront-sorting .woocommerce-ordering,
.fj-plp .fj-plpgrid ul.products ~ .storefront-sorting .woocommerce-result-count,
.fj-plp .fj-plpgrid ul.products ~ .storefront-sorting .fj-clearall { display: none; }
.fj-plp .fj-plpgrid ul.products ~ .storefront-sorting { justify-content: center; margin-top: var(--space-5); }

/* --- The grid. Storefront lays product cards out as floats with per-column
   widths + nth-child margins; grid replaces all of it inside the frame.
   !important only where Storefront's own !important/inline weight demands it
   (the file's established pattern). --- */
.fj-plp .fj-plpgrid ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}
.fj-plp .fj-plpgrid ul.products::before,
.fj-plp .fj-plpgrid ul.products::after { content: none; } /* Storefront clearfix boxes have no place in a grid */
.fj-plp .fj-plpgrid ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  min-width: 0;
  position: relative; /* .onsale badge keeps its containing block */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  padding: 0 0 var(--space-4);
  text-align: left;
}
.fj-plp .fj-plpgrid ul.products li.product > .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 0 auto; /* grows, so every card's button sits on the same baseline */
}
.fj-plp .fj-plpgrid ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-bottom: 1px solid var(--line);
  margin: 0 0 var(--space-3);
}
.fj-plp .fj-plpgrid ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--fj-ink);
  line-height: 1.32;
  padding: 0 var(--space-4);
  margin: 0;
}
.fj-pcode { display: block; padding: 0 var(--space-4); margin-top: var(--space-1); font-size: var(--text-sm); color: var(--muted); }
.fj-pcode b { color: var(--fj-ink-soft); }
/* Pack pill — the existing proven .fj-ctn-qty component, D5 .ppack geometry */
.fj-plp .fj-plpgrid ul.products li.product .fj-ctn-qty {
  display: inline-block;
  align-self: flex-start;
  margin: var(--space-2) var(--space-4) 0;
  background: rgba(43, 76, 155, 0.06);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fj-ink-soft);
}
/* T56 price block inside a card: give it the card's inset; scale for scan */
.fj-plp .fj-plpgrid ul.products li.product .fj-price-block { margin: var(--space-2) 0 0; padding: 0 var(--space-4); }
.fj-plp .fj-plpgrid ul.products li.product .fj-price-block__price { font-size: var(--text-xl); }
.fj-plp .fj-plpgrid ul.products li.product .fj-price-block__price .fj-price-suffix,
.fj-plp .fj-plpgrid ul.products li.product .fj-price-block__price .woocommerce-price-suffix { font-size: var(--text-sm); }
/* ATC/select-options button: D5 .padd — navy block, gold hover w/ navy text */
.fj-plp .fj-plpgrid ul.products li.product .button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: var(--space-3) var(--space-4) 0 !important;
  background-color: var(--navy) !important;
  color: #fff !important;
  border-radius: 12px;
  font-weight: 700;
  font-size: var(--text-base);
  text-align: center;
}
.fj-plp .fj-plpgrid ul.products li.product .button:hover,
.fj-plp .fj-plpgrid ul.products li.product .button:focus {
  background-color: var(--fj-gold) !important;
  color: var(--fj-navy) !important;
}
.fj-plp .fj-plpgrid ul.products li.product .added_to_cart {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: var(--space-1) var(--space-4) 0;
  font-weight: 700;
}

/* --- Pagination: D5 .pager geometry — 44px chips, current = navy. Link COLOUR
   stays the style.css (0,4,1) --muted rule (DECISION_LOG #94) — geometry only
   here, measured on white it gains headroom (≈6.9:1). --- */
.fj-plp .fj-plpgrid .woocommerce-pagination .page-numbers li .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 2px solid var(--line-ctl);
  border-radius: 12px;
  background: #fff;
  font-weight: 700;
}
.fj-plp .fj-plpgrid .woocommerce-pagination .page-numbers li span.page-numbers.current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.fj-plp .fj-plpgrid .woocommerce-pagination .page-numbers li .page-numbers:hover { border-color: var(--navy); }

/* --- Empty state (D5 .empty): centred, honest, a route out. --- */
.fj-empty { text-align: center; padding: var(--space-8) var(--space-5); }
.fj-empty__e { font-size: 64px; line-height: 1; }
.fj-empty h3 { font-size: var(--text-2xl); margin: var(--space-3) 0 0; }
.fj-empty p { color: var(--fj-ink-soft); font-size: var(--text-lg); margin: var(--space-2) auto 0; max-width: 52ch; }
.fj-empty .fj-chips { justify-content: center; }
.fj-empty__acts { margin-top: var(--space-4); }
.fj-empty .fj-empty__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 230px;
  background-color: var(--navy);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
}
.fj-empty .fj-empty__clear:hover { background-color: var(--fj-gold); color: var(--fj-navy); }
.fj-empty__cats-hd { font-size: var(--text-lg); margin-top: var(--space-5); }
.fj-empty__cats { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: center; }
.fj-empty__cats a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.fj-empty__help { margin-top: var(--space-5); }
.fj-empty__help a { display: inline-flex; align-items: center; min-height: 44px; color: var(--royal); font-weight: 700; }

/* --- Responsive: D5's own breaks. ≤1080 the frame is ONE column — the rail
   unpins (its cap + inner scroller removed with it: a static panel must not
   scroll inside itself), phones get the <details> toggle. Grid 4→3→2. --- */
@media (max-width: 1080.98px) {
  .fj-plpgrid { grid-template-columns: minmax(0, 1fr); }
  .fj-plpgrid__side { align-self: auto; }
  .fj-filters { position: static; max-height: none; overflow: visible; }
  .fj-filters__summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--fj-ink);
    list-style: none;
  }
  .fj-filters__summary::-webkit-details-marker { display: none; }
  .fj-filters__summary::before { content: "\2699\FE0E"; margin-right: var(--space-2); }
  .fj-filters__summary::after { content: "\25BE"; margin-left: auto; color: var(--royal); }
  .fj-filters[open] .fj-filters__summary::after { content: "\25B4"; }
  .fj-filters__hd { display: none; } /* the summary is the heading on phones */
  .fj-plp .fj-plpgrid ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768.98px) {
  .fj-plp .fj-plpgrid ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480.98px) {
  .fj-plp .fj-plpgrid ul.products { gap: var(--space-3); }
}

/* ==========================================================================
   T58 · PDP — D5 product page (Direction_D5_PLP_PDP_ACCOUNT.html Screen 2):
   two-column frame (sticky gallery · summary), D5 title/meta/price scale,
   quantity box card, T56 ladder placement, tabs-as-card, related grid.
   Consumes T56 classes (.fj-price-block, .fj-qladder, .fj-dbar, the
   .fj-risk cards, .fj-acct-msg) — none are redefined here.
   (Amended for 1.0.34: the first cut of this very sentence contained the
   character pair star-slash inside the comment, which TERMINATED it early
   and made the parser eat the frame rule below as a garbage selector —
   the grid never applied. Brace-counting passed; only the CSSOM showed it.)
   🔴 Namespace: `.fj-chip(s)`, `.fj-catchip(s)` and every T56 class are NOT
   redefined. New classes: .fj-pdpmeta · .fj-srlive only.
   🔴 Zero-size rule: .fj-line-total:empty renders nothing; .fj-srlive is the
   standard clipped live-region pattern (1×1 clip — an announcing region, a
   deliberate exception the sweep must whitelist, same as .screen-reader-text).
   Tokens only — #fff is this file's established card surface; rgba() of the
   locked royal follows the file's practice (T57 pack pill, ladder .is-now).
   ========================================================================== */

/* --- The frame. Storefront lays gallery/summary out as 41%/52% floats; grid
   items ignore floats but keep widths, so both are pinned to 100%. Everything
   that is not the gallery or the summary spans the full frame. min-width:0
   throughout — a grid item's min-width:auto is how 790px documents happen. --- */
.single-product div.product {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: start;   /* items keep content height — the sticky gallery's travel */
  position: relative;   /* .onsale keeps its containing block */
}
.single-product div.product::before,
.single-product div.product::after { content: none; } /* Storefront clearfix has no place in a grid */
.single-product div.product > * { grid-column: 1 / -1; min-width: 0; }
.single-product div.product > .onsale { position: absolute; z-index: 5; }
.single-product div.product > .woocommerce-product-gallery {
  grid-column: 1;
  grid-row: 1;
  width: 100% !important;
  float: none !important;
  /* Sticky against the grid AREA (row height = the taller column) — real since
     T57 fixed the Storefront overflow-x trap. Desktop only; --stick is a
     desktop contract (#106). */
  position: sticky;
  top: var(--stick);
}
.single-product div.product > .summary {
  grid-column: 2;
  grid-row: 1;
  width: 100% !important;
  float: none !important;
  margin-bottom: 0;
}

/* --- Gallery: D5 card language on the real Woo gallery. --- */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
  border-color: var(--navy);
}

/* --- Title · meta line · price (D5 .pdph1/.pdpmeta/.bigprice at token scale) --- */
.single-product .summary .product_title {
  font-size: var(--text-3xl);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
.fj-pdpmeta { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-base); }
.fj-pdpmeta b { color: var(--fj-ink-soft); }
.fj-price-block--pdp { margin: var(--space-4) 0 var(--space-3); }
.fj-price-block--pdp .fj-price-block__price { font-size: var(--text-3xl); }
.fj-price-block--pdp .fj-per-unit { font-size: var(--text-lg); }
/* Woo swaps the variation price into the form — same scale as the block above */
.single-product .woocommerce-variation-price .price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--fj-ink);
}
.single-product .woocommerce-variation-price .fj-price-suffix,
.single-product .woocommerce-variation-price .woocommerce-price-suffix {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--muted);
  margin-top: 2px;
}

/* --- Quantity box: the D5 .qtybox card IS the cart form. --- */
.single-product div.product .summary form.cart {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: var(--space-5);
  margin-bottom: var(--space-4) !important;
}
.single-product div.product form.cart table.variations { margin-bottom: var(--space-3); }
.single-product div.product form.cart table.variations td,
.single-product div.product form.cart table.variations th { padding: var(--space-1) 0; }
.single-product div.product form.cart table.variations label {
  font-weight: 700;
  color: var(--fj-ink);
  font-size: var(--text-base);
}
.single-product div.product form.cart table.variations select {
  min-height: 44px;
  background-color: #fff;
  border: 2px solid var(--line-ctl);
  border-radius: 12px;
  color: var(--fj-ink);
  font-size: var(--text-base);
  padding: 0 var(--space-3);
  max-width: 100%;
}
.single-product div.product form.cart .reset_variations {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
}
/* D5 .step geometry on the proven stepper */
.single-product .fj-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--line-ctl);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.single-product .fj-qty-stepper button {
  min-width: 48px;
  min-height: 48px;
  background: #fff;
  color: var(--fj-navy);
  font-size: var(--text-xl);
  font-weight: 700;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.single-product .fj-qty-stepper button:hover,
.single-product .fj-qty-stepper button:focus {
  background: var(--paper);
  color: var(--fj-navy);
}
.single-product .fj-qty-stepper .qty {
  width: 64px;
  min-height: 48px;
  border: 0;
  border-left: 2px solid var(--line-ctl);
  border-right: 2px solid var(--line-ctl);
  border-radius: 0;
  text-align: center;
  font-weight: 700;
  color: var(--fj-ink);
  background: #fff;
}
.single-product .single_add_to_cart_button {
  min-height: 52px;
  padding: 0 var(--space-6);
  font-size: var(--text-lg);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* D5 .linetotal — the visible maths panel. :empty renders NOTHING (zero-size rule). */
.single-product .fj-line-total {
  display: block;
  margin: var(--space-3) 0 0;
  background: rgba(43, 76, 155, 0.06);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--fj-ink);
}
.fj-line-total:empty { display: none; }
/* The aria-live announcement region (T58 axis 7) — clipped, never zero-DOM. */
.fj-srlive {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Ladder + account message spacing in the summary column --- */
.single-product .summary .fj-qladder--pdp { margin: var(--space-4) 0 var(--space-3); }
.single-product .summary .fj-acct-msg { margin-top: 0; }

/* --- Delivery bar above the product (state E default) --- */
.single-product .fj-dbar { margin: var(--space-3) 0 var(--space-5); }

/* --- Trust strip: D5 chips, not a full-width band, inside the summary --- */
.single-product .summary .fj-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: 0;
  margin: var(--space-3) 0;
}
.single-product .summary .fj-trust-strip > * {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fj-ink-soft);
}

/* --- Tabs as D5 cards (Description / Specifications keep their proven content) --- */
.single-product .woocommerce-tabs { padding-top: var(--space-4); }
.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.single-product .woocommerce-tabs .panel {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: var(--space-5) !important;
  margin-top: var(--space-3);
}
.single-product .fj-specs th,
.single-product .fj-specs td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-base);
}
.single-product .fj-specs tr:last-child th,
.single-product .fj-specs tr:last-child td { border-bottom: 0; }
.single-product .fj-specs th { color: var(--fj-ink); }

/* --- Related products: D5 card geometry on the untouched Phase-0 loop
   (the PLP's T57 card body is PLP-scoped; here geometry only, no new hooks) --- */
.single-product div.product .related ul.products,
.single-product div.product .up-sells ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}
.single-product div.product .related ul.products::before,
.single-product div.product .related ul.products::after,
.single-product div.product .up-sells ul.products::before,
.single-product div.product .up-sells ul.products::after { content: none; }
.single-product div.product .related ul.products li.product,
.single-product div.product .up-sells ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  min-width: 0;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  padding: 0 0 var(--space-4);
  text-align: left;
}
.single-product div.product .related ul.products li.product img,
.single-product div.product .up-sells ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-bottom: 1px solid var(--line);
  margin: 0 0 var(--space-3);
}
.single-product div.product .related ul.products li.product .woocommerce-loop-product__title,
.single-product div.product .related ul.products li.product .price,
.single-product div.product .related ul.products li.product .fj-per-unit,
.single-product div.product .related ul.products li.product .fj-ctn-qty,
.single-product div.product .related ul.products li.product .button,
.single-product div.product .up-sells ul.products li.product .woocommerce-loop-product__title,
.single-product div.product .up-sells ul.products li.product .price,
.single-product div.product .up-sells ul.products li.product .fj-per-unit,
.single-product div.product .up-sells ul.products li.product .fj-ctn-qty,
.single-product div.product .up-sells ul.products li.product .button {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

/* --- Responsive: D5's own break — one column ≤1080, gallery unpins. --- */
@media (max-width: 1080.98px) {
  .single-product div.product { grid-template-columns: minmax(0, 1fr); }
  .single-product div.product > .woocommerce-product-gallery,
  .single-product div.product > .summary {
    grid-column: 1;
    grid-row: auto;
  }
  .single-product div.product > .woocommerce-product-gallery { position: static; }
  .single-product div.product .related ul.products,
  .single-product div.product .up-sells ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768.98px) {
  .single-product div.product .related ul.products,
  .single-product div.product .up-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   T59 · CART — D5 cart (Direction_D5_CART_CHECKOUT.html Screen 1) on the
   CLASSIC cart shortcode. Consumes T56 (.fj-dbar, .fj-risk*, .fj-srlive) —
   none redefined. Scope: body.woocommerce-cart only.
   🔴 Namespace guard: `.fj-chip(s)` (T57), `.fj-catchip(s)` (T55) and every
   T56/T58 class are NOT redefined. New classes: .fj-cartmain .fj-itemhead
   .fj-lipack .fj-rm .fj-cart-nudge* .fj-destin .fj-sumex* .fj-sumsafe
   .fj-sum-notice .fj-cartacct* .fj-cartempty* .fj-helpstrip* .fj-crumb
   .fj-line-total--cart (the base .fj-line-total rule is PDP-scoped, so the
   cart look is restated here in cart scope).
   🔴 Zero-size rule: every element is a content-driven block; every server
   branch that can return '' renders NOTHING rather than an empty shell.
   Tokens only. The four surface hexes below are carried from the CANONICAL
   D5 cart file (nudge + good-notice surfaces) into :root, the same practice
   as the T56 delivery-bar palette — no hex outside :root.
   ========================================================================== */
:root {
  --fj-nudge-bg:   #FFF6E9; /* D5 .nudge surface */
  --fj-nudge-line: #F0D6A8;
  --fj-good-bg:    #F1F8F2; /* D5 .notice.good / .acct surface */
  --fj-good-line:  #C7E2CB;
}

/* --- Frame: items column + 390px sticky summary (D5 .cartgrid). The grid
   children are the .fj-cartmain wrapper and Woo's .cart-collaterals; both are
   pinned to the SAME explicit row so notices/bar/banners above and the trio/
   help strip below span full width whatever their count. row-gap stays 0 —
   empty implicit rows must not stack gaps (vertical rhythm is margins). --- */
@media (min-width: 1081px) {
  .woocommerce-cart div.woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    column-gap: 28px;
    row-gap: 0;
    align-items: stretch;
  }
  .woocommerce-cart div.woocommerce > * { grid-column: 1 / -1; min-width: 0; }
  .woocommerce-cart div.woocommerce > .fj-cartmain { grid-column: 1; grid-row: 8; }
  .woocommerce-cart div.woocommerce > .cart-collaterals { grid-column: 2; grid-row: 8; }
  /* Everything AFTER the two-column row needs its own explicit row — grid
     auto-placement would otherwise fill the empty rows ABOVE row 8 (measured
     4/08: the trio and help strip rendered above the items). Rows 1–7 stay
     for the auto-placed pre-cart furniture (crumb, bar, notices, banner). */
  .woocommerce-cart div.woocommerce > .fj-risk-trio { grid-row: 9; }
  .woocommerce-cart div.woocommerce > .fj-helpstrip { grid-row: 10; }
}

/* --- Page furniture --- */
/* D5 titles the page left-aligned ("Your cart"); Storefront centres page
   titles. Scoped to the cart page only. */
.woocommerce-cart .entry-header { text-align: left; }
.woocommerce-cart h1.entry-title { text-align: left; margin-bottom: var(--space-3); }
.woocommerce-cart .fj-crumb {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--royal);
  margin: 0 0 var(--space-1);
}
.woocommerce-cart .fj-dbar { margin: var(--space-2) 0 var(--space-4); }

/* --- Account banners (D5 guest/trade cart states) --- */
.fj-cartacct {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--fj-good-bg);
  border: 2px solid var(--fj-good-line);
  border-radius: 16px;
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}
.fj-cartacct__ic { flex: none; font-size: var(--text-xl); line-height: 1.3; }
.fj-cartacct > div { flex: 1 1 260px; min-width: 0; }
.fj-cartacct b { display: block; color: var(--ok); font-size: var(--text-base); }
.fj-cartacct span { display: block; color: var(--muted); font-size: var(--text-base); margin-top: 2px; }
.fj-cartacct__lk {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--royal);
  white-space: nowrap;
}

/* --- Items card: the real cart form IS the D5 .items card --- */
.woocommerce-cart .fj-cartmain form.woocommerce-cart-form {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.fj-itemhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.fj-itemhead b { font-size: var(--text-lg); color: var(--fj-ink); }
.fj-itemhead span { color: var(--muted); font-size: var(--text-base); }

/* Table -> D5 line grid. Cell order in the markup is remove/thumb/name/price/
   qty/subtotal; grid areas place them. The unit-price cell is hidden — the
   unit price renders in the LOCKED maths line inside the quantity cell. */
.woocommerce-cart table.shop_table.cart {
  display: block;
  border: 0;
  margin: 0;
  background: transparent;
}
.woocommerce-cart table.cart thead { display: none; }
.woocommerce-cart table.cart tbody { display: block; }
.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(170px, auto);
  grid-template-areas:
    "pic name price"
    "pic qty  price"
    "pic rm   price";
  gap: var(--space-2) var(--space-5);
  padding: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.woocommerce-cart table.cart tr:last-child { border-bottom: 0; }
.woocommerce-cart table.cart td {
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  min-width: 0;
}
.woocommerce-cart table.cart td.product-thumbnail { grid-area: pic; }
.woocommerce-cart table.cart td.product-thumbnail a { display: block; }
.woocommerce-cart table.cart td.product-thumbnail img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 0;
}
.woocommerce-cart table.cart td.product-name { grid-area: name; font-size: var(--text-lg); }
.woocommerce-cart table.cart td.product-name > a { font-weight: 700; color: var(--fj-ink); }
.woocommerce-cart table.cart td.product-price { display: none; }
.woocommerce-cart table.cart td.product-quantity { grid-area: qty; }
.woocommerce-cart table.cart td.product-remove { grid-area: rm; }
.woocommerce-cart table.cart td.product-subtotal { grid-area: price; text-align: right; }
.woocommerce-cart table.cart dl.variation { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-sm); }
.woocommerce-cart table.cart dl.variation dt,
.woocommerce-cart table.cart dl.variation dd { margin: 0; display: inline; float: none; }
.woocommerce-cart .fj-pcode { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-base); font-weight: 400; }
.woocommerce-cart .fj-pcode b { color: var(--fj-ink-soft); }
.fj-lipack {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  background: rgba(43, 76, 155, 0.06);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--space-1) var(--space-3);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--fj-ink-soft);
}

/* Stepper — D5 .step geometry, 48px targets (same look as the PDP stepper,
   restated here because the PDP rules are .single-product-scoped). */
.woocommerce-cart .fj-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--line-ctl);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-top: var(--space-2);
  vertical-align: middle;
}
.woocommerce-cart .fj-qty-stepper button {
  min-width: 48px;
  min-height: 48px;
  background: #fff;
  color: var(--fj-navy);
  font-size: var(--text-xl);
  font-weight: 700;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.woocommerce-cart .fj-qty-stepper button:hover,
.woocommerce-cart .fj-qty-stepper button:focus {
  background: var(--paper);
  color: var(--fj-navy);
}
.woocommerce-cart .fj-qty-stepper .quantity { margin: 0; display: inline-flex; }
.woocommerce-cart .fj-qty-stepper input.qty {
  width: 64px;
  min-height: 48px;
  border: 0;
  border-left: 2px solid var(--line-ctl);
  border-right: 2px solid var(--line-ctl);
  border-radius: 0;
  text-align: center;
  font-weight: 700;
  color: var(--fj-ink);
  background: #fff;
}
.woocommerce-cart .fj-line-total--cart {
  display: block;
  margin: var(--space-2) 0 0;
  background: rgba(43, 76, 155, 0.06);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--fj-ink);
  max-width: max-content;
}
.fj-line-total--cart:empty { display: none; }
.woocommerce-cart .fj-rm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--err);
  font-weight: 700;
  font-size: var(--text-base);
}

/* Volume nudge (D5 .nudge — lever 2). Text sits on the pale nudge surface at
   --warn (5.91:1 on white, comfortably ≥4.5 on #FFF6E9). */
.fj-cart-nudge {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-3);
  background: var(--fj-nudge-bg);
  border: 2px solid var(--fj-nudge-line);
  border-radius: 14px;
  padding: var(--space-3) var(--space-4);
}
.fj-cart-nudge__txt { flex: 1 1 260px; min-width: 0; font-weight: 700; color: var(--warn); font-size: var(--text-base); }
.fj-cart-nudge__sub { display: block; margin-top: 3px; font-weight: 500; color: var(--warn); }
.fj-cart-nudge__btn {
  background: #fff;
  border: 2px solid var(--warn);
  color: var(--warn);
  border-radius: 12px;
  padding: 0 var(--space-4);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: var(--text-base);
  white-space: nowrap;
}
.fj-cart-nudge__btn:hover,
.fj-cart-nudge__btn:focus {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

/* Coupon + update row (the real actions cell — the no-JS path stays). */
.woocommerce-cart table.cart td.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
}
.woocommerce-cart td.actions .coupon { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.woocommerce-cart td.actions .coupon .input-text {
  min-height: 48px;
  border: 2px solid var(--line-ctl);
  border-radius: 12px;
  padding: 0 var(--space-3);
  width: 200px;
  background: #fff;
  color: var(--fj-ink);
}
.woocommerce-cart td.actions .button {
  min-height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
}

/* --- Summary (D5 .sum): sticky white card. Sticky works since T57 fixed the
   overflow-x substrate; desktop only (--stick is a desktop contract). --- */
.woocommerce-cart .cart-collaterals { position: relative; width: 100%; }
.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100% !important;
  float: none !important;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 24px;
  padding: var(--space-5);
}
@media (min-width: 1081px) {
  .woocommerce-cart .cart-collaterals .cart_totals { position: sticky; top: var(--stick); }
}
.woocommerce-cart .cart_totals h2 { font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.fj-destin {
  background: rgba(43, 76, 155, 0.06);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--fj-ink-soft);
  margin: 0 0 var(--space-2);
}
.fj-destin b { color: var(--fj-ink); }
.woocommerce-cart .cart_totals table.shop_table {
  border: 0;
  margin: 0;
  background: transparent;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  background: transparent;
  vertical-align: top;
}
.woocommerce-cart .cart_totals table.shop_table th { color: var(--muted); font-weight: 400; padding-right: var(--space-3); }
.woocommerce-cart .cart_totals table.shop_table td { text-align: right; color: var(--fj-ink); font-weight: 700; }
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
  border-top: 2px solid var(--navy);
  border-bottom: 0;
  padding-top: var(--space-4);
}
.woocommerce-cart .cart_totals tr.order-total th { color: var(--fj-ink); font-weight: 700; font-size: var(--text-lg); }
.woocommerce-cart .cart_totals tr.order-total .amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--fj-ink);
}
/* GST is itemised on its OWN row — the duplicate small print inside the
   order-total cell is hidden, never the tax row (information stays once). */
.woocommerce-cart .cart_totals tr.order-total small.includes_tax { display: none; }
.woocommerce-cart .cart_totals tr.fj-sumex-row td { border-bottom: 0; padding: var(--space-1) 0 0; }
.fj-sumex { display: block; color: var(--muted); font-size: var(--text-base); font-weight: 400; text-align: right; }
/* Shipping row: methods list + Woo's own calculator (the destination control) */
.woocommerce-cart .cart_totals .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; font-weight: 400; }
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li { margin: 0 0 var(--space-1); }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination { color: var(--muted); font-weight: 400; font-size: var(--text-sm); margin: var(--space-1) 0 0; }
.woocommerce-cart .cart_totals .shipping-calculator-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--royal);
}
.woocommerce-cart .cart_totals .shipping-calculator-form { margin-top: var(--space-2); text-align: left; font-weight: 400; }
.woocommerce-cart .cart_totals .shipping-calculator-form .form-row { margin-bottom: var(--space-2); }
.woocommerce-cart .cart_totals .shipping-calculator-form .input-text,
.woocommerce-cart .cart_totals .shipping-calculator-form select {
  width: 100%;
  min-height: 44px;
  border: 2px solid var(--line-ctl);
  border-radius: 12px;
  padding: 0 var(--space-3);
  background: #fff;
  color: var(--fj-ink);
}
.woocommerce-cart .wc-proceed-to-checkout { padding: var(--space-4) 0 0; margin: 0; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  width: 100%;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  border-radius: 14px;
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:focus {
  background: var(--royal);
  color: #fff;
}
.fj-sumsafe { text-align: center; color: var(--muted); font-size: var(--text-base); margin: var(--space-2) 0 0; }
.fj-sum-notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-3);
  background: var(--fj-nudge-bg);
  border: 2px solid var(--fj-nudge-line);
  border-radius: 14px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--warn);
}
.fj-sum-notice b { display: block; }

/* --- Risk trio + help strip after the cart (full width) --- */
.woocommerce-cart .fj-risk-trio { margin: var(--space-5) 0 0; }
.fj-helpstrip {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  flex-wrap: wrap;
  background: var(--navy);
  border-radius: 22px;
  padding: var(--space-5) var(--space-6);
  margin: var(--space-4) 0 var(--space-2);
}
.fj-helpstrip__lead { flex: 1 1 300px; min-width: 0; }
.fj-helpstrip b { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: #fff; }
.fj-helpstrip p { margin: var(--space-1) 0 0; color: rgba(255, 255, 255, 0.8); font-size: var(--text-base); }
.fj-helpstrip__acts { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-left: auto; }
.fj-helpstrip__acts a {
  background: #fff;
  color: var(--navy);
  border-radius: 13px;
  padding: 0 var(--space-5);
  font-weight: 700;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.fj-helpstrip__acts a:hover { background: var(--paper); color: var(--navy); }

/* --- Empty cart (D5 states) --- */
.fj-cartempty {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 24px;
  margin-top: var(--space-4);
}
.fj-cartempty__e { font-size: 64px; line-height: 1; }
.fj-cartempty h2 { margin: var(--space-3) 0 0; }
.fj-cartempty p { color: var(--muted); max-width: 46ch; margin: var(--space-2) auto 0; }
.fj-cartempty__acts { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }
.fj-cartempty__acts .button { min-height: 52px; display: inline-flex; align-items: center; border-radius: 12px; padding: 0 var(--space-5); }
.fj-cartempty__ph { margin-top: var(--space-5); }
.fj-cartempty__ph a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.woocommerce-cart .return-to-shop { display: none; } /* replaced by the honest D5 routes above */

/* --- Responsive: one column below 1081 (D5's break); tighter line grid on
   phones — layout drops, NO lever drops (every element keeps rendering). --- */
@media (max-width: 1080.98px) {
  .woocommerce-cart .cart-collaterals { margin-top: var(--space-4); }
}
@media (max-width: 768.98px) {
  /* One D5 line grid for the whole handheld range. Storefront's responsive
     table injects "Product:/Quantity:/Subtotal:" td::before labels here —
     scaffolding the D5 layout replaces (name, stepper and price stack are
     self-labelling); its right-alignment carries !important, matched. */
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas:
      "pic name"
      "pic price"
      "qty qty"
      "rm  rm";
    padding: var(--space-4);
  }
  .woocommerce-cart table.cart td { text-align: left !important; }
  .woocommerce-cart table.cart td::before { content: none !important; }
  .woocommerce-cart table.cart td.product-thumbnail { display: block !important; }
  .woocommerce-cart table.cart td.product-thumbnail img { width: 88px; height: 88px; }
  .woocommerce-cart table.cart td.product-subtotal { text-align: left !important; margin-top: var(--space-1); }
  .woocommerce-cart table.cart td.actions { padding: var(--space-4); }
  .woocommerce-cart td.actions .coupon .input-text { width: 100%; }
}

/* Line-price stack (D5 .liprice) */
.woocommerce-cart td.product-subtotal .fj-liprice__now {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--fj-ink);
}
.woocommerce-cart td.product-subtotal .fj-liprice__inc { display: block; color: var(--muted); font-size: var(--text-base); font-weight: 400; margin-top: 2px; }
.woocommerce-cart td.product-subtotal .fj-liprice__each { display: block; color: var(--royal); font-weight: 700; font-size: var(--text-base); margin-top: var(--space-2); }


/* ==========================================================================
   T60 · CHECKOUT — D5 Screen 2 on the CLASSIC checkout (v1.0.41).
   Tokens only (T54 law). New surface colours below are NAMED here, exactly
   as the T56 bar and T59 nudge tokens were.
   ========================================================================== */
:root {
  /* D5 pickbox (warehouse pickup card) — concept .pickbox */
  --fj-pick-bg:   #F2F8F8;
  --fj-pick-line: #BEDCDE;
  --fj-pick-ink:  #0F5B62;
  --fj-pick-sub:  #33555A;
  /* D5 .notice.good ink (surfaces reuse --fj-good-bg / --fj-good-line) */
  --fj-good-ink:  #1B5C31;
}

/* --- page furniture --- */
.woocommerce-checkout .fj-crumb { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-weight: 700; }
.woocommerce-checkout .fj-cosub { color: var(--muted); font-size: var(--text-lg); margin: 0 0 var(--space-4); }

/* --- the two-column grid: the FORM is the grid (its children are the
       Stripe express row, #customer_details, payment, helpline, summary) --- */
form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0 28px; align-items: start; }
form.checkout.woocommerce-checkout > * { grid-column: 1; min-width: 0; }
form.checkout.woocommerce-checkout > .fj-cosum { grid-column: 2; grid-row: 1 / span 9; align-self: stretch; }
/* Storefront''s own checkout layout floats #customer_details (52%) and
   #order_review (41%, right) — v1.0.44: neutralised so the T60 grid owns the
   page (the floats were measured fighting the grid: billing at 326px, the
   review card escaping its column). */
.woocommerce-checkout #customer_details.col2-set { width: 100%; float: none; }
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; margin: 0; }
.fj-cosum #order_review_heading, .fj-cosum #order_review { width: 100%; float: none; }
.fj-cosum #order_review_heading { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--navy); margin: 0 0 var(--space-3); }
form.checkout.woocommerce-checkout wc-order-attribution-inputs { display: none; }

/* --- cards --- */
.fj-cocard { background: #fff; border: 2px solid var(--line); border-radius: 24px; padding: 26px; margin-bottom: var(--space-5); }
.fj-cardhd { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.fj-cardnum { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; flex: none; }
.fj-cardhd h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--navy); margin: 0; }
.fj-cardsub { color: var(--muted); font-size: var(--text-base); margin: 0 0 var(--space-4) 52px; }

/* --- section 1 · choice --- */
.fj-pickbox { background: var(--fj-pick-bg); border: 2px solid var(--fj-pick-line); border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; }
.fj-pickbox b { color: var(--fj-pick-ink); font-size: 17px; display: block; }
.fj-pickbox p { color: var(--fj-pick-sub); font-size: var(--text-base); margin: 5px 0 0; }
.fj-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.fj-opt { border: 2.5px solid var(--line-ctl); border-radius: 18px; padding: 20px; background: #fff; display: flex; gap: 14px; align-items: flex-start; cursor: pointer; min-height: 44px; text-align: left; font: inherit; }
.fj-opt:hover { border-color: var(--ring); }
.fj-opt.on { border-color: var(--navy); background: var(--paper); box-shadow: 0 0 0 3px rgba(22, 32, 63, 0.08); }
.fj-opt__radio { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--ring); flex: none; margin-top: 2px; display: flex; align-items: center; justify-content: center; }
.fj-opt.on .fj-opt__radio { border-color: var(--navy); }
.fj-opt.on .fj-opt__radio::after { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--navy); }
.fj-opt__body b { font-size: var(--text-lg); color: var(--navy); display: block; }
.fj-opt__body p { color: var(--fj-ink-soft); font-size: var(--text-base); margin: 5px 0 0; }
.fj-opt__cost { font-weight: 800; color: var(--ok); font-size: var(--text-base); margin-top: 7px; display: block; }
.fj-opt[aria-checked="false"] .fj-opt__cost { color: var(--fj-ink-soft); }
.fj-opt.on .fj-opt__cost { color: var(--navy); }

/* --- section 2 · fields (Woo DOM restyled to the D5 field look) --- */
.woocommerce-checkout .woocommerce-billing-fields { background: #fff; border: 2px solid var(--line); border-radius: 24px; padding: 26px; margin-bottom: var(--space-5); }
.woocommerce-checkout .woocommerce-billing-fields > h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--navy); margin: 0 0 6px; }
.woocommerce-checkout .woocommerce-billing-fields .fj-cardsub { margin-left: 0; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.woocommerce-checkout .form-row { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; float: none; width: auto; }
.woocommerce-checkout .form-row.form-row-wide { grid-column: 1 / -1; }
.woocommerce-checkout .form-row label { font-size: var(--text-base); font-weight: 700; color: var(--fj-ink); line-height: 1.35; }
.woocommerce-checkout .form-row .woocommerce-input-wrapper { display: block; }
.woocommerce-checkout .form-row input.input-text { border: 2px solid var(--line-ctl); border-radius: 14px; padding: 15px 16px; font-size: 17px; min-height: 56px; background: #fff; color: var(--fj-ink); width: 100%; box-sizing: border-box; }
.woocommerce-checkout .form-row input.input-text:focus { border-color: var(--royal); box-shadow: 0 0 0 4px rgba(43, 76, 155, 0.18); outline: none; }
.woocommerce-checkout .form-row span.description { font-size: var(--text-base); color: var(--fj-ink-soft); margin: 0; display: block; }
.woocommerce-checkout .form-row.fj-hide { display: none !important; }
.woocommerce-checkout .form-row .required { color: var(--err); text-decoration: none; }
/* path switching — the delivery-only rows leave on pickup (D5 decision 3) */
form.checkout.fj-path-pickup .form-row.fj-deliveryonly { display: none; }
.fj-notice-good { border-radius: 16px; padding: 18px 20px; display: none; gap: 14px; align-items: flex-start; font-size: var(--text-base); margin-top: var(--space-4); background: var(--fj-good-bg); border: 2px solid var(--fj-good-line); color: var(--fj-good-ink); }
form.checkout.fj-path-pickup .fj-notice-good.fj-pickuponly { display: flex; }
.fj-notice-good b { display: inline; }
.fj-tradefoot { color: var(--muted); font-size: var(--text-base); margin: var(--space-3) 0 0; }
.woocommerce-checkout .form-row.fj-tradefield { border-top: 0; }
.woocommerce-checkout .form-row.fj-tradefield:first-of-type { border-top: 0; }
/* inline validation — Woo's own invalid state, D5 styling + instruction */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text { border-color: var(--err); background: #FFF7F6; }
.woocommerce-checkout .form-row.woocommerce-validated input.input-text { border-color: var(--ok); }
.fj-errmsg { display: flex; gap: 9px; align-items: flex-start; color: var(--err); font-size: var(--text-base); font-weight: 600; }

/* --- section 3 · payment (moved into the left column) --- */
.fj-copay .fj-cardsub { margin-bottom: var(--space-2); }
.woocommerce-checkout .fj-copay #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout .fj-copay #payment ul.payment_methods { border: 0; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: 14px; }
.woocommerce-checkout .fj-copay #payment ul.payment_methods li { border: 2.5px solid var(--line-ctl); border-radius: 18px; background: #fff; padding: 0; list-style: none; }
.woocommerce-checkout .fj-copay #payment ul.payment_methods li > label { display: flex; gap: 14px; align-items: center; padding: 19px 20px; cursor: pointer; min-height: 64px; font-size: 17.5px; font-weight: 700; color: var(--navy); }
.woocommerce-checkout .fj-copay #payment ul.payment_methods li input[name="payment_method"] { width: 22px; height: 22px; accent-color: var(--navy); margin: 0; }
.woocommerce-checkout .fj-copay #payment div.payment_box { background: var(--paper); border-top: 1px solid var(--line); padding: 18px 20px; margin: 0; font-size: var(--text-base); color: var(--fj-ink-soft); }
.woocommerce-checkout .fj-copay #payment div.payment_box::before { display: none; }
.woocommerce-checkout .fj-copay .place-order { padding: var(--space-4) 0 0; }
.woocommerce-checkout .fj-copay #place_order { width: 100%; background: var(--navy); color: #fff; border-radius: 16px; min-height: 64px; font-size: var(--text-lg); font-weight: 800; }
.woocommerce-checkout .fj-copay #place_order:hover { background: var(--royal); }
.fj-finalnote { color: var(--muted); font-size: var(--text-base); margin-top: var(--space-3); text-align: center; }

/* --- express row (Stripe mount) — chrome appears only when wallets mount --- */
form.checkout > #wc-stripe-express-checkout-element { margin-bottom: 0; }
form.checkout.fj-xpay-live > #wc-stripe-express-checkout-element { background: #fff; border: 2px solid var(--line); border-radius: 0 0 24px 24px; padding: 0 26px 26px; margin-bottom: 0; }
.fj-xpay-hd { background: #fff; border: 2px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; padding: 26px 26px 12px; }
.fj-xpay-hd h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--navy); margin: 0; }
.fj-xpay-hd p { color: var(--fj-ink-soft); font-size: var(--text-base); margin: 6px 0 0; }
form.checkout > #wc-stripe-express-checkout-button-separator { display: none; color: var(--muted); text-align: center; margin: 0 0 var(--space-5); }
form.checkout.fj-xpay-live > #wc-stripe-express-checkout-button-separator { display: block; }

/* --- sticky summary (right column) --- */
.fj-cosum__stick { position: sticky; top: var(--stick); }
.fj-cosum__stick > .fj-risk-trio--subset { margin-top: var(--space-4); grid-template-columns: 1fr; display: grid; }
.woocommerce-checkout .fj-cosum #order_review { background: #fff; border: 2px solid var(--line); border-radius: 24px; padding: 22px; }
/* v1.0.44: the real h3#order_review_heading carries the card title (styled above) — a generated-content duplicate was removed. */
.woocommerce-checkout .fj-cosum table.shop_table { border: 0; margin: 0; }
.woocommerce-checkout .fj-cosum table.shop_table td, .woocommerce-checkout .fj-cosum table.shop_table th { border-color: var(--line); font-size: var(--text-base); }
.woocommerce-checkout .fj-cosum .order-total .amount { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--fj-ink); }
.woocommerce-checkout .fj-cosum .fj-sumex-row td { border-top: 0; padding-top: 0; }
.woocommerce-checkout .fj-cosum .fj-sumex { color: var(--muted); font-size: var(--text-base); }
/* #122·2 — ONE OWNER FOR #shipping_method.
   These three rules are the pre-#121 styling for a PLAIN Woo radio list in the
   checkout summary. #121 replaced that list with the .fjs-list card picker, but
   these rules kept matching it and outranked it: at (1,2,2) they beat
   `html.fjs-js ul.fjs-list > li.fjs-more { display:none }` at (0,3,3), so the
   fold was dead on checkout — all 13 cards rendered, the expander flipped its
   own label and aria-expanded and moved nothing — and `display:flex` here also
   beat `.fjs-item { display:grid }`.
   The fix is subtraction, not !important: :not(.fjs-list) hands the picker back
   to the .fjs-* block outright, while leaving these rules in force for any
   plain #shipping_method list that is not the picker. */
.woocommerce-checkout .fj-cosum ul#shipping_method:not(.fjs-list) { list-style: none; margin: 0; padding: 0; }
.woocommerce-checkout .fj-cosum ul#shipping_method:not(.fjs-list) li { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; }
.woocommerce-checkout .fj-cosum ul#shipping_method:not(.fjs-list) input { accent-color: var(--navy); margin: 0; }

/* --- responsive: single column ≤1080 (concept breakpoint), summary
       between the fields and the payment card so the money is seen before
       the pay button; express row stays FIRST (DOM + order) --- */
@media (max-width: 1080px) {
  form.checkout.woocommerce-checkout { display: flex; flex-direction: column; }
  /* v1.0.46: EVERY direct child gets an explicit order — the JS-inserted
     .fj-xpay-hd and the .fj-cochoice card default to order 0 and were
     sorting ABOVE the wallet row (express row must stay FIRST on mobile). */
  form.checkout.woocommerce-checkout > .fj-xpay-hd { order: 1; }
  form.checkout.woocommerce-checkout > #wc-stripe-express-checkout-element { order: 2; }
  form.checkout.woocommerce-checkout > #wc-stripe-express-checkout-button-separator { order: 3; }
  form.checkout.woocommerce-checkout > .fj-cartacct { order: 4; }
  form.checkout.woocommerce-checkout > .fj-cochoice { order: 5; }
  form.checkout.woocommerce-checkout > #customer_details { order: 6; }
  form.checkout.woocommerce-checkout > .fj-cosum { order: 7; }
  form.checkout.woocommerce-checkout > .fj-cocard.fj-copay { order: 8; }
  form.checkout.woocommerce-checkout > .fj-helpstrip { order: 9; }
  .fj-cosum__stick { position: static; }
  .fj-choice { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
  .woocommerce-checkout .form-row.form-row-first, .woocommerce-checkout .form-row.form-row-last { grid-column: auto; }
  .fj-cocard, .woocommerce-checkout .woocommerce-billing-fields { padding: 18px; border-radius: 18px; }
}


/* ==========================================================================
   T61 · MY ACCOUNT — D5 Screen 3 (v1.0.47). Tokens only (T54 law). The new
   surface colours are NAMED here exactly as the T56 bar, T59 nudge and T60
   pickbox tokens were; every pairing is measured in the T61 report.
   ========================================================================== */
:root {
  /* D5 .stat tones — "ok" reuses --fj-good-bg / --fj-good-line / --fj-good-ink. */
  --fj-stat-open-bg:   #F6F8FC;
  --fj-stat-open-line: #DCE4F0;
  --fj-stat-open-ink:  #2F3A4D;
  --fj-stat-move-bg:   #FFF9EC;   /* pairs with the existing --fj-nudge-line */
  --fj-stat-move-ink:  #6E4A12;
  --fj-stat-late-bg:   #FFF4F2;
  --fj-stat-late-line: #F0C4BE;
  --fj-stat-late-ink:  #6E241C;
  /* D5 .acctnav + .panelhd */
  --fj-acctnav-ink:    #3D4657;
  --fj-acctnav-hover:  #F1F0EA;
  --fj-acct-head:      #FCFBF8;
}

/* --- the frame. Storefront floats the nav at 22.94% and the content at
       73.85% via `.woocommerce-account .woocommerce-MyAccount-*` (0,2,0);
       the selectors below are (0,5,0) so they win on SPECIFICITY, not merely
       on load order. Scoped to .logged-in because the same .woocommerce
       wrapper carries the sign-in form when signed out. --- */
.woocommerce-account.logged-in .entry-content > .woocommerce {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: 28px;
  /* start, not stretch: a stretched grid item is as tall as its track and
     position:sticky can then never engage (D5 concept defect 6, same shape). */
  align-items: start;
}
.woocommerce-account.logged-in .entry-content > .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .entry-content > .woocommerce > .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  min-width: 0;
}

/* --- account nav (D5 .acctnav). Sticky works only because T57 replaced
       Storefront's body/.site overflow-x:hidden with clip. --- */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
  position: sticky;
  top: var(--stick);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 22px;
  padding: 12px;
}
/* Storefront also pins the nav to 22.94% inside its own namespace, which left
   the 262px grid track 15.41px short. Same specificity fix. */
.woocommerce-account.logged-in .hentry .entry-content > .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .hentry .entry-content > .woocommerce > .woocommerce-MyAccount-content {
  width: 100%;
  box-sizing: border-box;
  float: none;
  min-width: 0;
}
/* 🔴 SPECIFICITY TRAP, measured 5/08 (same family as #103/#106): Storefront
   namespaces its account CSS under `.hentry .entry-content`, so
   `.hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a`
   is (0,5,2) and silently beat the (0,3,2) form first written here — the card
   and the sticky applied while display/padding/border did NOT, which reads as
   "half the rule worked". Matching the parent's namespace and adding one class
   makes these win on SPECIFICITY, not on load order. */
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li { margin: 0; padding: 0; border: 0; }
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-radius: 14px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--fj-acctnav-ink);
  min-height: 52px;
  box-sizing: border-box;
  text-decoration: none;
}
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:focus-visible { background: var(--fj-acctnav-hover); color: var(--navy); }
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--navy); color: #fff; }
/* The icon glyph is Storefront's OWN Font Awesome ::before — consumed rather
   than replaced (D5 wants an icon per row and one already exists). Storefront
   floats it right at 25% opacity; a float is ignored on a flex item, so the
   flex anchor above puts it first (left) on its own. Only the opacity and the
   spacing are ours. No emoji is introduced, so nothing new reaches a screen
   reader. */
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a::before {
  opacity: 1;
  margin-left: 0;
  width: 1.4em;
  text-align: center;
  flex: none;
}

/* --- dashboard: hello card --- */
.fj-acct-hello { background: #fff; border: 2px solid var(--line); border-radius: 24px; padding: 24px 26px; }
.fj-acct-hello h2 { font-family: var(--font-display); font-weight: 700; font-size: 29px; color: var(--navy); margin: 0; }
.fj-acct-hello p { color: var(--fj-ink-soft); font-size: 16.5px; margin: 6px 0 0; max-width: 70ch; }
.fj-acct-hello a { font-weight: 700; }

/* --- dashboard: quick actions --- */
.fj-acct-qgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.fj-acct-qa {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.fj-acct-qa:hover, .fj-acct-qa:focus-visible { border-color: var(--navy); transform: translateY(-4px); }
.fj-acct-qa__ic { font-size: var(--text-3xl); line-height: 1; }
.fj-acct-qa b { font-size: 17.5px; color: var(--navy); }
.fj-acct-qa__bo { font-size: var(--text-base); color: var(--fj-ink-soft); }
.fj-acct-qa__go { margin-top: auto; padding-top: var(--space-3); color: var(--royal); font-weight: 800; font-size: var(--text-base); display: inline-flex; align-items: center; min-height: 44px; }

/* --- dashboard: orders panel --- */
.fj-acct-panel { background: #fff; border: 2px solid var(--line); border-radius: 24px; margin-top: var(--space-5); overflow: hidden; }
.fj-acct-panelhd { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--line); background: var(--fj-acct-head); flex-wrap: wrap; }
.fj-acct-panelhd b { color: var(--navy); font-size: 19px; font-family: var(--font-display); font-weight: 700; }
.fj-acct-panelhd a { color: var(--royal); font-weight: 700; font-size: var(--text-base); min-height: 44px; display: inline-flex; align-items: center; }
/* Every row is its OWN grid, so `auto` tracks size per row and the columns
   drift out of line (measured: the head "When" sat 15px off its dates). fr
   tracks resolve identically for equal-width containers and the last two are
   fixed, so all rows align without display:contents (which would drop the
   row's own border). */
.fj-acct-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 170px 152px; gap: var(--space-4); padding: 16px 24px; border-bottom: 1px solid var(--line); align-items: center; font-size: 16.5px; }
.fj-acct-row:last-child { border-bottom: 0; }
.fj-acct-row b { color: var(--navy); }
.fj-acct-row--head { background: var(--fj-acct-head); font-weight: 700; color: var(--muted); font-size: var(--text-base); border-bottom: 2px solid var(--line); }
/* the head cell is a LABEL, not a money figure — it must not inherit the
   display-face money styling from .fj-acct-amt */
.fj-acct-row--head .fj-acct-amt { font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; color: var(--muted); }
.fj-acct-amt { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--navy); white-space: nowrap; text-align: right; display: block; font-variant-numeric: tabular-nums; }
.fj-acct-amt__note { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); color: var(--muted); }
.fj-acct-acts { display: flex; flex-direction: column; gap: 2px; }
.fj-acct-lk { color: var(--royal); font-weight: 700; font-size: var(--text-base); min-height: 44px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.fj-acct-back { margin-top: var(--space-5); }
.fj-acct-back a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
/* Storefront's `.hentry .entry-content a { text-decoration: underline }`
   (0,3,1) underlines EVERY link in the account content — including the
   whole-card quick actions, where three underlined body lines read as three
   separate links. Inline text links (the phone number in the hello card, the
   back link) keep their underline deliberately; cards and actions do not. */
.woocommerce-account .hentry .entry-content a.fj-acct-qa,
.woocommerce-account .hentry .entry-content a.fj-acct-qa *,
.woocommerce-account .hentry .entry-content .fj-acct-panelhd a,
.woocommerce-account .hentry .entry-content a.fj-acct-lk,
.woocommerce-account .hentry .entry-content .fj-acct-empty__acts a,
.woocommerce-account .hentry .entry-content .woocommerce-orders-table a.button,
.woocommerce-account .hentry .entry-content p.order-again a.button { text-decoration: none; }

/* --- status pills (D5 .stat) --- */
.fj-stat { display: inline-flex; align-items: center; gap: 7px; border-radius: 30px; padding: 7px 13px; font-size: var(--text-base); font-weight: 700; white-space: nowrap; }
.fj-stat--ok { background: var(--fj-good-bg); border: 1px solid var(--fj-good-line); color: var(--fj-good-ink); }
.fj-stat--open { background: var(--fj-stat-open-bg); border: 1px solid var(--fj-stat-open-line); color: var(--fj-stat-open-ink); }
.fj-stat--move { background: var(--fj-stat-move-bg); border: 1px solid var(--fj-nudge-line); color: var(--fj-stat-move-ink); }
.fj-stat--late { background: var(--fj-stat-late-bg); border: 1px solid var(--fj-stat-late-line); color: var(--fj-stat-late-ink); }

/* --- section leads (orders / addresses / details / sign-in) --- */
.fj-acct-lead { margin: 0 0 var(--space-5); }
.fj-acct-lead h2 { font-family: var(--font-display); font-weight: 700; font-size: 29px; color: var(--navy); margin: 0; }
.fj-acct-lead p { color: var(--fj-ink-soft); font-size: 16.5px; margin: 6px 0 0; max-width: 70ch; }

/* --- empty state (D5 .empty) --- */
.fj-acct-empty { background: #fff; border: 2px solid var(--line); border-radius: 24px; text-align: center; padding: 44px 24px; margin-top: var(--space-5); }
.fj-acct-empty__e { font-size: 64px; line-height: 1; }
.fj-acct-empty h2 { margin: var(--space-3) 0 0; font-size: var(--text-2xl); }
.fj-acct-empty p { color: var(--fj-ink-soft); font-size: 17px; max-width: 52ch; margin: 9px auto 0; }
.fj-acct-empty__acts { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.fj-acct-empty__acts .button { min-height: 52px; display: inline-flex; align-items: center; border-radius: 12px; padding: 0 var(--space-5); }

/* --- orders list + view-order tables (Woo DOM, D5 surface) --- */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table--order-details,
.woocommerce-account .woocommerce-table--order-downloads {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 24px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
  margin: 0 0 var(--space-6);
}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-table--order-details td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
  font-size: var(--text-base);
  text-align: left;
  vertical-align: middle;
  background: transparent;
}
.woocommerce-account .woocommerce-orders-table thead th,
.woocommerce-account .woocommerce-table--order-details thead th {
  background: var(--fj-acct-head);
  font-weight: 700;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
}
.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
.woocommerce-account .woocommerce-orders-table tbody tr:last-child th { border-bottom: 0; }
.woocommerce-account .woocommerce-orders-table__cell-order-number a { font-weight: 700; }
.woocommerce-account .woocommerce-orders-table__cell-order-total,
.woocommerce-account .woocommerce-table--order-details tfoot td { text-align: right; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions { text-align: right; white-space: nowrap; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
  border-radius: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-4);
  margin: 3px 0 3px 6px;
  font-size: var(--text-base);
}
.woocommerce-account .woocommerce-table--order-details tfoot th { text-align: right; font-weight: 700; color: var(--navy); }
.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child td .amount { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--navy); }
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account .woocommerce-Address-title h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--navy); }
.woocommerce-account p.order-again .button { border-radius: 12px; min-height: 52px; display: inline-flex; align-items: center; padding: 0 var(--space-5); }

/* --- addresses + forms --- */
.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
/* 🔴 Storefront pins these columns with `.col2-set.addresses .col-1 {width:41.1765%}`
   (0,3,0) — measured 214.11px inside a 519.99px grid track. Beaten here at
   (0,4,0), not with !important. */
.woocommerce-account .woocommerce-Addresses.col2-set .col-1,
.woocommerce-account .woocommerce-Addresses.col2-set .col-2 { width: 100%; float: none; box-sizing: border-box; }
.woocommerce-account .woocommerce-Address { background: #fff; border: 2px solid var(--line); border-radius: 24px; padding: 24px 26px; width: auto; float: none; }
.woocommerce-account .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* Storefront centres h2 inside .entry-content; the address-card title is a
   card heading and reads wrong centred against a left-aligned address. */
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--navy); text-align: left; }
.woocommerce-account .woocommerce-Address address { font-style: normal; color: var(--fj-ink-soft); font-size: 16.5px; margin-top: var(--space-3); }
.woocommerce-account form.woocommerce-EditAccountForm,
.woocommerce-account form.woocommerce-address-fields,
.woocommerce-account form.edit-account { background: #fff; border: 2px solid var(--line); border-radius: 24px; padding: 26px; }
.woocommerce-account .woocommerce-MyAccount-content form .form-row,
.woocommerce-account form.woocommerce-form-login .form-row,
.woocommerce-account form.woocommerce-form-register .form-row { margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: 7px; float: none; width: auto; }
.woocommerce-account .woocommerce-MyAccount-content form label,
.woocommerce-account form.woocommerce-form-login label,
.woocommerce-account form.woocommerce-form-register label { font-size: var(--text-base); font-weight: 700; color: var(--fj-ink); }
.woocommerce-account form.woocommerce-form-login input.input-text,
.woocommerce-account form.woocommerce-form-register input.input-text,
.woocommerce-account form.woocommerce-form-login .button,
.woocommerce-account form.woocommerce-form-register .button { font-family: inherit; }
/* B2BKing adds its own registration rows to form-register and they do NOT
   carry Woo's .input-text class, so the type selectors below are what keeps
   that column from rendering half-styled. */
.woocommerce-account form.woocommerce-form-login input.input-text,
.woocommerce-account form.woocommerce-form-register input.input-text,
.woocommerce-account form.woocommerce-form-register input[type="text"],
.woocommerce-account form.woocommerce-form-register input[type="email"],
.woocommerce-account form.woocommerce-form-register input[type="tel"],
.woocommerce-account form.woocommerce-form-register input[type="password"],
.woocommerce-account form.woocommerce-form-register select,
.woocommerce-account .woocommerce-MyAccount-content form input.input-text,
.woocommerce-account .woocommerce-MyAccount-content form select {
  border: 2px solid var(--line-ctl);
  border-radius: 14px;
  padding: 15px 16px;
  font-size: 17px;
  min-height: 56px;
  background: #fff;
  color: var(--fj-ink);
  width: 100%;
  box-sizing: border-box;
}
.woocommerce-account form.woocommerce-form-login input.input-text:focus,
.woocommerce-account form.woocommerce-form-register input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content form input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content form select:focus { border-color: var(--royal); box-shadow: 0 0 0 4px rgba(43, 76, 155, 0.18); outline: none; }
.woocommerce-account .woocommerce-MyAccount-content form .button,
.woocommerce-account form.woocommerce-form-login .button,
.woocommerce-account form.woocommerce-form-register .button { border-radius: 14px; min-height: 56px; display: inline-flex; align-items: center; padding: 0 var(--space-6); background: var(--navy); color: #fff; font-weight: 800; }
.woocommerce-account .woocommerce-MyAccount-content form .button:hover,
.woocommerce-account form.woocommerce-form-login .button:hover,
.woocommerce-account form.woocommerce-form-register .button:hover { background: var(--royal); }
.woocommerce-account .woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); border-radius: 16px; padding: var(--space-5); margin: var(--space-5) 0; }
.woocommerce-account .woocommerce-MyAccount-content fieldset legend { font-weight: 700; color: var(--navy); padding: 0 var(--space-2); }

/* --- signed-out sign-in form --- */
.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce-form-register { background: #fff; border: 2px solid var(--line); border-radius: 24px; padding: 26px; }
/* 🔴 Storefront's `.col2-set#customer_login .col-1 {width:41.1765%}` carries an
   ID — (1,2,0) — so the (0,2,0) form first written here lost and the sign-in
   card shrank to 214.11px inside a 519.99px column. Matched with the ID. */
.woocommerce-account:not(.logged-in) #customer_login .col-1,
.woocommerce-account:not(.logged-in) #customer_login .col-2 { float: none; width: 100%; box-sizing: border-box; }
.woocommerce-account:not(.logged-in) #customer_login { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-6); }
.woocommerce-account:not(.logged-in) #customer_login h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--navy); }
.fj-acct-lead--login h2 { font-size: var(--text-2xl); }

/* --- responsive. Below 769px the header is not sticky (owner carve-out,
       DECISION_LOG #106), so the nav must not be sticky either. --- */
@media (max-width: 1080px) {
  .woocommerce-account.logged-in .entry-content > .woocommerce { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5); }
  .fj-acct-qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fj-acct-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 150px 140px; gap: var(--space-3); padding: 16px; }
}
@media (max-width: 768.98px) {
  .woocommerce-account.logged-in .entry-content > .woocommerce { display: block; }
  .woocommerce-account.logged-in .woocommerce-MyAccount-navigation { position: static; margin-bottom: var(--space-5); }
  .woocommerce-account.logged-in .entry-content > .woocommerce > .woocommerce-MyAccount-content { margin-top: 0; }
  .fj-acct-qgrid { grid-template-columns: 1fr; }
  .fj-acct-row { grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); }
  .fj-acct-row--head { display: none; }
  .fj-acct-acts { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); grid-column: 1 / -1; }
  .fj-acct-hello, .fj-acct-panel, .fj-acct-empty, .fj-acct-qa { border-radius: 18px; }
  .fj-acct-hello { padding: 18px; }
  .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; }
  .woocommerce-account .woocommerce-orders-table th,
  .woocommerce-account .woocommerce-orders-table td { padding: 12px 16px; }
  .woocommerce-account .woocommerce-orders-table__cell-order-actions { text-align: left; }
}

/* ==========================================================================
   #121 — "How you'll get it" shipment picker (cart + checkout)
   Design: working_files/design_concepts/Direction_D5_SHIPMENT_PICKER.html,
   approved by Fred 6/08/2026. One component, one stylesheet, both pages.

   TOKENS: only tokens already in style.css :root are used — --navy, --royal,
   --teal, --ok, --muted, --line, --line-ctl, --ring, --font-display,
   --ease-out. The literal hexes below are the concept's own pickup/free card
   values, carried across byte-for-byte.

   TYPE NOTE: the concept sets the money figure in Fraunces 600. This theme
   loads Fraunces at weight 700 ONLY (T54 — 34.7kB single-weight subset), so
   600 would be synthesised by the browser. 700 is used instead. That is the
   theme's font law winning over the concept's weight, not a design change.
   ========================================================================== */

/* ---- the cell + the group ------------------------------------------------ *
 * #122·3 — the cart-totals <td> is text-align:right (it holds figures), and
 * that inherited straight through the picker: the pickup address, every carrier
 * name, every service and every ETA came out ragged-left. Measured on staging:
 * .fjs-name computed text-align:right on /cart, left on /checkout, from the
 * same markup. The component states its own alignment here, once; .fjs-price
 * re-asserts right for itself further down.
 * ------------------------------------------------------------------------- */
td.fjs-cell { text-align: left; }
/* The package name, printed by the template where the row's <th> used to be. */
.fjs-rowhd { font-size: 16px; font-weight: 600; line-height: 1.62; margin: 0 0 12px; }

.fjs { border: 0; padding: 0; margin: 0; min-width: 0; text-align: left; }
.fjs-sub { color: var(--muted); font-size: 15.5px; margin: 0 0 12px; line-height: 1.5; }

ul.fjs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

/* ---- the card ----------------------------------------------------------- */
ul.fjs-list > li.fjs-item {
  position: relative;
  display: grid;
  /* minmax(0,1fr), not 1fr: a grid track's automatic minimum is min-content, so
     a plain 1fr lets a long carrier name push the card wider than its cell. */
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 2.5px solid var(--line-ctl);
  border-radius: 16px;
  padding: 14px 16px;
  min-height: 76px;
  min-width: 0;
  margin: 0;
  line-height: 1.5;
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out);
}
ul.fjs-list > li.fjs-item:hover { border-color: #BCC5D6; }

/* Only one method in the package: core emits a hidden input, so there is no
   dot to make room for. */
ul.fjs-list > li.fjs-item--single { grid-template-columns: minmax(0, 1fr); }

/* The REAL Woo radio, restyled in place. Never replaced, never display:none —
   it keeps the group, arrow-key movement, the checked state, the accessible
   name and the posted value, all natively. */
.fjs-list .fjs-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid var(--ring);
  background: #fff;
  margin: 0;
  padding: 0;
  flex: none;
  cursor: pointer;
}
.fjs-list .fjs-radio:checked {
  border-color: var(--navy);
  background: radial-gradient(circle at center, var(--navy) 0 6.5px, #fff 6.5px);
}

/* The whole card is the label, so the whole card is the tap target.
 *
 * #122·1 — THE BLOCKER. This was `grid-template-columns: 104px 1fr auto`, and
 * inside the ~267px cart-totals cell the browser computed that middle track at
 * exactly 0px: the 104px logo track and the auto price track are both rigid, so
 * the body — which carries every word on the card — got what was left, which
 * was nothing. Measured on staging: body 0×2140, card 2176px tall, whole picker
 * 5382px. It looked fine at 807px and 513px only because the responsive switch
 * was keyed to the VIEWPORT (@media max-width:640px) while the thing actually
 * running out of room was the CONTAINER.
 *
 * The fix is a wrapping flex row of exactly TWO items — [.fjs-lead][.fjs-price]
 * — where .fjs-lead (mark + body) carries a min-width. A flex item does not
 * shrink below its min-width; it wraps instead. So when the price will not fit
 * beside the body, the PRICE moves to its own line and the body keeps its
 * width. There is no rigid track left that can crush anything, and the switch
 * is driven by the space this component actually has.
 *
 * WHY NOT @container: container queries were built and measured first. They
 * work, but `container-type: inline-size` removes the picker from its table
 * column's intrinsic width, and auto table layout then re-allocated that column
 * to the product-name column — the checkout summary went 382px -> 160px. This
 * needs no containment, so no table sizing changes.
 *
 * `min(230px, 100%)` and not a bare 230px: below ~230px of usable width the
 * percentage takes over and the lead shrinks with its cell instead of pushing a
 * horizontal scrollbar.
 *
 * MEASURED FLOOR (staging, 6/08/2026, cell width forced in 30px steps): zero
 * card overflow and zero label overflow at container widths 320 / 280 / 250 /
 * 230px. At 200px the label overflows its box by 16px and at 180px the card
 * itself overflows by 20px — that floor is the money string, whose amounts are
 * deliberately unbreakable, not the layout. The narrowest cell this component
 * actually gets in this build is 327px (checkout summary at 1440). */
.fjs-list .fjs-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  cursor: pointer;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-weight: 400;
}
.fjs-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 260px;
  min-width: min(230px, 100%);
}

/* SELECTED — driven by the input's own :checked state. The .is-selected twin
   is the fallback for engines without :has(); the footer script sets it. */
ul.fjs-list > li.fjs-item:has(.fjs-radio:checked),
ul.fjs-list > li.fjs-item.is-selected {
  border-color: var(--navy);
  background: #F7F9FD;
  box-shadow: 0 0 0 3px rgba(22, 32, 63, .08);
}

/* KEYBOARD FOCUS — the ring takes the whole card, so the indicator shape
   matches the target shape. */
ul.fjs-list > li.fjs-item:has(.fjs-radio:focus-visible),
ul.fjs-list > li.fjs-item.is-focus {
  outline: 3px solid var(--royal);
  outline-offset: 3px;
}

/* ---- carrier mark cell -------------------------------------------------- *
 * #122·1 — the cell is content-sized now, not a rigid 104px column. A rigid
 * 104px in front of the body is most of what crushed it; and with no carrier
 * artwork shipped, all 104px of it was holding a 52px tile. The logo variants
 * below keep the concept's fixed 104×44 plate, because THAT is where a fixed
 * cell earns its keep: it is what makes different carriers' marks line up.
 * ------------------------------------------------------------------------- */
.fjs-mark {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  padding: 0;
  box-sizing: border-box;
}
.fjs-mark img { width: auto; height: auto; object-fit: contain; display: block; align-self: center; }

/* Optical normalisation by aspect band — assigned per carrier from the real
   file at build (fj_121_logo_aspects). Never assumed.
   Concept section 4: minimum 8px clear space on all four sides; nothing of
   F&J's may enter the cell. */
.fjs-mark--wide,
.fjs-mark--mid,
.fjs-mark--sq { width: 104px; height: 44px; padding: 8px 8px 8px 0; }
.fjs-mark--wide img { max-height: 20px; max-width: 104px; }
.fjs-mark--mid  img { max-height: 24px; max-width: 96px; }
.fjs-mark--sq   img { max-height: 30px; max-width: 72px; }

/* F&J's own glyph tile — used for pickup, free, flat AND (since #122·7) any
   carrier with no artwork on file. Never a third-party mark, and never a drawn
   approximation of one. */
.fjs-mark--pickup { justify-content: center; padding: 0; }
.fjs-tile {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #E4F1F2;
  border: 1.5px solid #BEDCDE;
  color: #0F5B62;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.fjs-tile--free  { background: #E4F2E7; border-color: #C7E2CB; color: #155C2F; }
.fjs-tile--plain { background: #F2F5FA; border-color: #DCE4F0; color: var(--navy); }
.fjs-glyph { display: block; }

/* ---- body text ---------------------------------------------------------- */
/* flex: 1 1 auto + min-width: 0 — the body takes whatever the lead has left
   after the mark, and is allowed to be narrower than its longest word so a
   carrier name can never widen the card past its cell. */
.fjs-body { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.fjs-name { display: block; font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.28; }
.fjs-name .svc { font-weight: 500; color: #39424F; }
.fjs-when { display: block; margin-top: 3px; font-size: 15.5px; color: #3D4657; }
.fjs-when b { color: var(--navy); font-weight: 700; }
.fjs-meta { display: block; margin-top: 3px; font-size: 15.5px; color: var(--muted); }

.fjs-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.fjs-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.3;
}
.fjs-badge--cheap { background: var(--ok); color: #fff; }    /* 5.37:1 white on green */
.fjs-badge--fast  { background: var(--royal); color: #fff; } /* 8.05:1 white on royal */

/* ---- the money pair ----------------------------------------------------- *
 * The second flex item on the label row. margin-left:auto pins it right when it
 * shares the line with the body, and keeps it right when it wraps below.
 * white-space is normal, not nowrap: "ex GST ($36.25 inc GST)" must be allowed
 * to break BETWEEN its words in a narrow cell. The amounts themselves stay
 * unbreakable — see the .woocommerce-Price-amount rule below.
 * ------------------------------------------------------------------------- */
.fjs-price {
  flex: 0 0 auto;
  margin-left: auto;
  max-width: 100%;
  text-align: right;
  white-space: normal;
  font-variant-numeric: tabular-nums;
}
.fjs-price b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  line-height: 1.15;
}
.fjs-price > span { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.fjs-price .exlab { font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.fjs-price.free b { color: var(--ok); }
/* wc_price() wraps its output in <span class="woocommerce-Price-amount">; keep
   it inline so it does not break the pair onto extra lines. */
.fjs-price .woocommerce-Price-amount { display: inline; white-space: nowrap; }

/* ---- pickup card -------------------------------------------------------- */
ul.fjs-list > li.fjs-item--pickup { background: #F2F8F8; border-color: #8FBEC2; }
ul.fjs-list > li.fjs-item--pickup:hover { border-color: #5FA0A6; }
ul.fjs-list > li.fjs-item--pickup:has(.fjs-radio:checked),
ul.fjs-list > li.fjs-item--pickup.is-selected {
  border-color: var(--teal);
  background: #E9F4F5;
  box-shadow: 0 0 0 3px rgba(22, 124, 132, .12);
}
.fjs-item--pickup .fjs-radio:checked {
  border-color: var(--teal);
  background: radial-gradient(circle at center, var(--teal) 0 6.5px, #fff 6.5px);
}
.fjs-item--pickup .fjs-name { color: #0F5B62; }
.fjs-item--pickup .fjs-when,
.fjs-item--pickup .fjs-meta { color: #33555A; }
.fjs-item--pickup .fjs-price b { color: #0F5B62; }
.fjs-item--pickup .fjs-price > span { color: #33555A; }

/* ---- free-delivery card ------------------------------------------------- */
ul.fjs-list > li.fjs-item--free { background: #F1F8F2; border-color: #8FC49B; }
ul.fjs-list > li.fjs-item--free:has(.fjs-radio:checked),
ul.fjs-list > li.fjs-item--free.is-selected {
  border-color: var(--ok);
  background: #E8F4EA;
  box-shadow: 0 0 0 3px rgba(30, 122, 62, .12);
}
.fjs-item--free .fjs-radio:checked {
  border-color: var(--ok);
  background: radial-gradient(circle at center, var(--ok) 0 6.5px, #fff 6.5px);
}
.fjs-item--free .fjs-name { color: #155C2F; }
.fjs-item--free .fjs-when,
.fjs-item--free .fjs-meta { color: #2E4A36; }

/* ---- "or have it delivered" divider (an <li>, so the <ul> stays valid) --- */
ul.fjs-list > li.fjs-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 0 0;
  margin: 0;
  border: 0;
  background: none;
  min-height: 0;
}
ul.fjs-list > li.fjs-divider:before,
ul.fjs-list > li.fjs-divider:after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---- the fold ----------------------------------------------------------- *
 * PROGRESSIVE ENHANCEMENT. Everything here is scoped to html.fjs-js, a class
 * only the footer script adds. Script runs -> the fold exists and the button
 * works. Script fails -> nothing is ever hidden, every rate is on screen, and
 * the button hides itself rather than sitting there dead. T12's "every rate
 * reachable" therefore holds in both worlds.
 * ------------------------------------------------------------------------- */
html.fjs-js ul.fjs-list > li.fjs-more { display: none; }
html.fjs-js ul.fjs-list.is-open > li.fjs-more { display: grid; }
/* The guard: a checked rate can never be folded away, whatever the server
   decided. Independent of, and redundant with, the server-side promotion. */
html.fjs-js ul.fjs-list > li.fjs-more:has(.fjs-radio:checked) { display: grid; }
html:not(.fjs-js) .fjs-morebtn { display: none; }

.fjs-morebtn {
  margin-top: 12px;
  width: 100%;
  /* #122·4 — width:100% + padding + a 2px border overflows a content-box
     button by 44px. Everything about this control has to fit inside the cell. */
  box-sizing: border-box;
  max-width: 100%;
  background: #fff;
  border: 2px solid var(--navy);
  color: var(--navy);
  border-radius: 14px;
  padding: 12px 16px;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  min-height: 52px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.fjs-morebtn:hover { background: #F1F0EA; }
.fjs-morebtn:focus-visible { outline: 3px solid var(--royal); outline-offset: 3px; }
/* Chevron drawn in CSS — no icon font, no glyph that could fail to load. */
.fjs-chev {
  width: 9px;
  height: 9px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform .18s var(--ease-out);
}
.fjs-morebtn[aria-expanded="true"] .fjs-chev { transform: rotate(225deg); margin-top: 3px; }

/* ---- footnote ----------------------------------------------------------- */
.fjs-foot { margin: 12px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* ---- no viewport breakpoint ---------------------------------------------- *
 * #122·1 — the `@media (max-width: 640px)` block that used to live here has
 * been REMOVED, not moved. It was the bug: it re-laid the card out on the width
 * of the WINDOW, while the thing running out of room was the cell — so at a
 * 1440px viewport the cart cell was 267px wide and got the wide layout anyway,
 * and at 807px and 513px the same broken cell got the compact one and looked
 * fine. One layout now serves every width, and it reflows on the space it
 * actually has. The type sizes that block carried have become the only sizes.
 * ------------------------------------------------------------------------- */

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  ul.fjs-list > li.fjs-item,
  .fjs-chev { transition-duration: .01ms; }
}