/* ============================================================
   SHOP BREADCRUMB + TITLE — shared component
   Used by: shop-all.html, products/product.html, and the three
   collections/*.html pages, all via the shared shop-header.njk
   include. Covers the breadcrumb nav (.shop-breadcrumb and its
   children) and the page heading (.shop-title, rendered by
   shop-header.njk only when parentCrumb/crumbs are unset — so
   product.html never triggers it). .shop-header itself (the
   wrapper) stays defined per-page since its padding intentionally
   varies per layout.

   .shop-title was previously redeclared in all four pages with a
   drifted font-size clamp — shop-all.html had been re-anchored to
   the 360px/1440px fluid formula (matching --page-padding's
   method) while the three collection pages were still on the
   original clamp(1.4rem, 2.2vw, 2.2rem) guess, which never even
   reaches its own 2.2rem cap at 1440px. Consolidated here on
   shop-all's corrected formula so a fifth page can't reintroduce
   the drift.

   Depends on tokens defined in tokens.css: --font-body,
   --weight-light, --weight-regular, --text-caption-long,
   --tracking-caption-long, --tracking-dropdown, --color-red.
============================================================ */

.shop-breadcrumb {
  font-family: var(--font-body);
  font-size: var(--text-caption-long);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-caption-long);
  text-transform: uppercase;
  color: var(--text-color-accent);
  margin-bottom: var(--space-3); /* 12px, was 1.2rem (~19.2px) */
}

.shop-breadcrumb a {
  color: var(--text-color-accent);
  transition: opacity 200ms ease;
}

.shop-breadcrumb a:hover {
  opacity: 0.6;
}

.shop-breadcrumb span {
  margin: 0 0.6rem;
}

.shop-title {
  font-family: var(--font-body);
  /* Anchored 360px→1440px (same interpolation method as
     --page-padding), reaches the full 2.2rem cap at 1440px. */
  font-size: clamp(1.4rem, 1.133rem + 1.185vw, 2.2rem);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--text-color-accent);
  line-height: 1;
}