/* Fat Boy's — the visible breadcrumb on single product pages. Lane E, 2026-09-20.
   Enqueued only where is_product() by inc/schema.php, after site-counter.css when the
   counter look is on (else after style.css), so the tokens below already exist:
   --paper / --ink / --ink-soft / --meat / --text (mockup.css, site-counter.css).
   Every colour has a literal fallback that equals the counter-look token.

   Why it exists: WooCommerce emits BreadcrumbList JSON-LD only when the breadcrumb
   renders, and Google's guideline is to mark up what the visitor can see. The
   `.woocommerce` prefix matches the body class WooCommerce adds on its pages and
   out-specifies woocommerce.css (.woocommerce .woocommerce-breadcrumb, 0,2,0).

   2026-10-19 (local SEO wave 1): the four local pages print the same trail
   (fatboys_local_breadcrumb_html() in inc/schema.php) with the class .fb-page-crumbs. Those
   are ordinary pages with no `.woocommerce` body class, so every rule below also names
   `.page-article .fb-page-crumbs`, which carries the same specificity. */

.woocommerce .woocommerce-breadcrumb,
.page-article .fb-page-crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin:0 0 14px;
  padding:0;
  font-family:var(--text, "Chivo", "Helvetica Neue", Arial, sans-serif);
  font-size:.92rem;
  line-height:1.3;
  letter-spacing:.01em;
  color:var(--ink-soft, #56504a);
}

/* Each crumb is wrapped in .fb-crumb by the breadcrumb args filter in inc/schema.php.
   Links get their 44px tap height from padding on the box, not from font size. */
.woocommerce .woocommerce-breadcrumb .fb-crumb,
.page-article .fb-page-crumbs .fb-crumb{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  min-width:0;
}
.woocommerce .woocommerce-breadcrumb a,
.page-article .fb-page-crumbs a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 6px;
  color:var(--meat, #a41623);
  text-decoration:none;
  border-bottom:2px solid transparent;
  overflow-wrap:anywhere;
}
.woocommerce .woocommerce-breadcrumb .fb-crumb:first-child a,
.page-article .fb-page-crumbs .fb-crumb:first-child a{margin-left:-6px}
.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:focus-visible,
.page-article .fb-page-crumbs a:hover,
.page-article .fb-page-crumbs a:focus-visible{border-bottom-color:currentColor}
.woocommerce .woocommerce-breadcrumb a:focus-visible,
.page-article .fb-page-crumbs a:focus-visible{outline:3px solid var(--meat, #a41623);outline-offset:2px}

/* The current page: plain text, ink, bold, no link. */
.woocommerce .woocommerce-breadcrumb .fb-crumb:last-child,
.page-article .fb-page-crumbs .fb-crumb:last-child{
  padding:0 0 0 6px;
  font-weight:700;
  color:var(--ink, #1c1916);
  overflow-wrap:anywhere;
}

/* The separator between crumbs (aria-hidden in the markup). */
.woocommerce .woocommerce-breadcrumb .fb-crumb-sep,
.page-article .fb-page-crumbs .fb-crumb-sep{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 2px;
  color:var(--ink-soft, #56504a);
  opacity:.75;
  user-select:none;
}

@media (max-width:480px){
  .woocommerce .woocommerce-breadcrumb,
  .page-article .fb-page-crumbs{font-size:.88rem}
}