/** Shopify CDN: Minification failed

Line 3115:0 Unexpected ".404-page"
Line 3124:14 Unexpected ".404-page"
Line 3135:14 Unexpected ".404-page__title"
Line 3152:14 Unexpected ".404-page__link-list"

**/
/* ========================================
   AOF DESIGN SYSTEM LAYER
   Applies on top of Trade theme defaults.
   Uses CSS custom properties so Trade
   styles inherit where possible.
   ======================================== */

/* --- Google Fonts: Manrope (geometric, tighter than Montserrat) --- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* --- Global text sharpness ---
   Forces grayscale antialiasing on Mac/Chrome and switches Windows Chrome
   off ClearType to a lighter, sharper-looking rasterisation. text-rendering
   optimizeLegibility enables kerning + ligatures. Matches the crisp render
   END Clothing gets across nav, microcopy, and product tiles. */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Design Tokens --- */
:root {
  /* Typography — single family, weight-driven hierarchy */
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  /* !! DO NOT use --text-* / --space-* for sizing NEW work. The theme root
     is 10px (62.5%), so these resolve at ~HALF the px in the comments
     (--text-base = 10px actual, --space-xl = 40px actual). They are kept
     only because legacy rules depend on the rendered (half) values.
     Size new CSS in calibrated rem: 1.4rem = 14px. */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.25rem;   /* 20px */
  --text-xl: 1.75rem;   /* 28px */
  --text-2xl: 2.25rem;  /* 36px */
  --text-3xl: 3rem;     /* 48px */
  --text-4xl: 4rem;     /* 64px */

  /* Ink token referenced as rgb()/rgba() components site-wide. Was
     documented but never shipped — every rgba(var(--color-base-text), x)
     silently fell back to inherited/transparent until 2026-06-12. */
  --color-base-text: 18, 18, 18;

  /* Spacing */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2.5rem;    /* 40px */
  --space-xl: 4rem;      /* 64px */
  --space-2xl: 6rem;     /* 96px */
  --space-3xl: 8rem;     /* 128px */

  /* Layout */
  --container: 75rem;    /* 1200px */
  /* Shared content-band width for AOF sections. Caps the centred content
     column so large monitors get a calm margin band instead of bezel-to-
     bezel content. Tune here once; every aof-* section references it. */
  --aof-content-max: 1360px;

  /* ⚑ THE HOUSE RHYTHM (2026-09-19) — derived from the homepage, which is
     the benchmark, and now the only vertical and horizontal spacing any
     top-level band on any page is allowed to use.

     Before this, a band's padding was whatever the session that built that
     page happened to type: measured across the theme's own stylesheets the
     top padding of a section root ranged from 20px to 96px, and the gutter
     from 0 to 80px. Consistency was asserted page by page and never
     measured, which is exactly how it drifted.

     `tools/measure_page_rhythm.py` reads these back off the RENDERED page,
     because what Ben sees is the computed value, not the declaration. A
     band that does not repeat these numbers names itself in that report.

       --aof-gutter     side gutter, and the padding on `.page-width`
       --aof-band-y     vertical padding of a plain (white) band
       --aof-band-y-tint  the same for a tinted or ink band, which needs
                          more air or the colour reads as a stripe

     Do NOT add a fourth value. If a band needs different air, it needs a
     different surface, not a different number. */
  --aof-gutter: 16px;
  --aof-band-y: 30px;
  --aof-band-y-tint: 36px;

  /* Surfaces — the ONE separation token (DESIGN.md §3): grey and a
     hairline, never a rule, a shadow or a second grey. */
  --aof-surface: #fff;
  --aof-surface-tint: #f4f4f4;
  --aof-surface-ink: #1a1a1a;
  --aof-hairline: rgb(228, 228, 228);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* Hover scale for product images */
  --hover-scale: 1.03;
}

/* --- Font overrides via Trade's custom properties --- */
:root {
  --font-body-family: var(--font-body);
  --font-heading-family: var(--font-heading);
}

/* The house rhythm steps up at the same two widths the AOF sections have
   always used. The old `.page-width` grid broke at 768/1280 instead, so the
   two halves of the site reflowed at different viewport widths — fixed here
   by having one set of breakpoints for both. */
@media (min-width: 750px) {
  :root {
    --aof-gutter: 32px;
    --aof-band-y: 33px;
    --aof-band-y-tint: 44px;
  }
}

@media (min-width: 1200px) {
  :root {
    --aof-gutter: 48px;
    --aof-band-y: 36px;
    --aof-band-y-tint: 52px;
  }
}

/* --- Heading typography --- */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1, .h1 { line-height: 1.1; }
h2, .h2 { line-height: 1.12; }
h3, .h3 { line-height: 1.15; }
h4, .h4, h5, .h5, h6 { line-height: 1.2; }

/* --- Body typography --- */
body {
  font-family: var(--font-body);
  line-height: 1.6;
}

.text-body,
.rte,
p {
  line-height: 1.6;
}

/* --- Section padding: ONE source, not three (2026-09-19) ---------------
   An interior page band was getting its vertical space from three places
   at once, which is why the interior pages read as "too much air, and a
   different amount on every page" next to the homepage:

     1. this `.section` wrapper — 50px mobile / 60px desktop;
     2. the band's own `section-<id>-padding`, from the template JSON,
        whatever number the session that built that page happened to pick;
     3. `.section + .section { margin-top: --spacing-sections-* }` in
        base.css, between every pair.

   Measured live before this change: /pages/contact stacked a 60px wrapper
   on top of its own 36px band padding, so the real gap was 96px against
   the homepage's 36px.

   Now: the wrapper carries the house rhythm for bands that set no padding
   of their own, and stands down entirely for bands that do. The band owns
   its air, one number, everywhere. */
.section {
  padding-top: var(--aof-band-y);
  padding-bottom: var(--aof-band-y);
}

/* The band pads itself (every Dawn section that emits
   `section-<id>-padding` from its template settings), so the wrapper adds
   nothing. Without :has, such a band gets both and reads roomy rather than
   broken - a degradation, not a failure. */
.shopify-section:has(> [class*="-padding"]) {
  padding-top: 0;
  padding-bottom: 0;
}

/* ...and the band itself takes the house step, not the number in its own
   template JSON. Those settings each carried a hand-picked figure and Dawn
   then multiplied it by 0.7 or 0.75 for the phone, so /pages/methods came
   out at 27px and /pages/contact at 25px against the homepage's 30px -
   three rhythms nobody chose, from one number three sections rounded
   differently. Specificity (0,3,0) beats the generated `.section-<id>-padding`
   (0,1,0), so this wins wherever the page sets it. */
.shopify-section > [class*="-padding"] {
  padding-top: var(--aof-band-y);
  padding-bottom: var(--aof-band-y);
}

/* --- Product image hover --- */
.card__media .media img,
.product-card-wrapper .card .media img {
  transition: transform var(--duration-normal) var(--ease-out);
}

.card__media:hover .media img,
.product-card-wrapper .card:hover .media img {
  transform: scale(var(--hover-scale));
}

.card__media .media,
.product-card-wrapper .card .media {
  overflow: hidden;
}

/* =====================================================================
   END CLOTHING GLOBAL TYPOGRAPHY PASS (2026-05-18)
   Site-wide alignment to END's editorial monochrome system. Trade theme
   defaults are aggressive (Bold 700 with large heading scales); END uses
   restrained 600 weight, generous uppercase letter-spacing, and consistent
   #1a1a1a / #999 colour. Overrides are scoped to avoid touching the
   header (its own CSS) and the product detail page title.
   ===================================================================== */

/* On-page section headings (e.g. "Bestselling Items", "Shop by category",
   "From the Journal"). END spec: 22px / 600 / 2.2px LS / uppercase / #1a1a1a
   / line-height 30px. Broad selector — every H2 in a Shopify section EXCEPT
   the hero overlay heading (which has its own large editorial spec) and
   the product detail page title (kept large for emphasis). */
main .shopify-section:not(.section-aof-header-hero) h2:not(.facets__heading):not(.cart-drawer__title):not(.sr-only):not(.visually-hidden):not(.aof-section-heading):not(.aof-h2-editorial):not(.product-brand-block__heading):not(.product-rod-compare__heading):not(.totals__total):not(.rte *),
main .shopify-section:not(.section-aof-header-hero) .h2:not(.facets__heading):not(.aof-section-heading):not(.aof-h2-editorial):not(.totals__total):not(.rte *) {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #1a1a1a;
  line-height: 30px;
  margin-bottom: 24px;
}

/* =====================================================================
   THE EDITORIAL H2 (2026-09-15) — one class, every interior page
   The uppercase banner above is the register for a short label over a
   grid ("Bestselling items"). Interior pages also need a heading that
   reads as a sentence — "All Bass rods", "Not sure which rod?", "Compare
   the Crimson range", "About this rod" — and until now each page grew its
   own (product-brand-block__heading, product-rod-compare__heading, the
   brand page's section title), all excluded from the override one by one
   and none of them the same size. This is the single register they share:
   a step under the editorial H1 (2.8rem -> 3.2rem / 700), sentence case,
   the same tight tracking. Used by the collection toolbar, the Rod Finder
   band, the product accordions and compare band, and the brand-range
   groups. It is excluded from the override by class above, so the class
   is the whole opt-out.
   ===================================================================== */
.aof-h2-editorial {
  font-family: var(--font-body);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #1a1a1a;
  line-height: 1.2;
  margin: 0 0 1.2rem;
}

@media screen and (min-width: 750px) {
  .aof-h2-editorial {
    font-size: 2.4rem;
  }
}

/* Same register one step down, for a heading that labels a section inside
   a column rather than a band across the page (the product accordions). */
.aof-h2-editorial.aof-h2-editorial--compact {
  font-size: 1.6rem;
  line-height: 1.3;
}

/* Long-form prose headings inside rich text. The global H2 override above
   deliberately excludes .rte content (:not(.rte *)) — full-sentence prose
   headings must not render as 22px ALL-CAPS banner labels (uppercase is
   for short labels ≤4 words). Sentence case, weight-driven hierarchy. */
.rte h2 {
  font-size: 2rem;          /* 20px */
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-transform: none;
  color: #1a1a1a;
  margin: 3.2rem 0 1.2rem;
}

.rte h3 {
  font-size: 1.6rem;        /* 16px */
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
  color: #1a1a1a;
  margin: 2.4rem 0 0.8rem;
}

/* Shared interior page title — the END uppercase label register for
   utility/directory pages (blog index, cart, 404, account, brands A-Z,
   methods listing, plain pages). Editorial entity pages (brand, method,
   rod-range, guide topics, about pages) keep the sentence-case 700
   editorial ramp in their own CSS instead. Apply the class to the H1. */
.aof-page-title {
  font-family: var(--font-body);
  font-size: 2.4rem;        /* 24px mobile */
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a1a1a;
  line-height: 1.2;
  margin: 0 0 1.6rem;
}

@media (min-width: 750px) {
  .aof-page-title { font-size: 3.2rem; }  /* 32px */
}

/* Shared section header group — the reusable "small eyebrow over a larger
   heading" unit used on homepage sections and heroes site-wide.
   Wrap the eyebrow <p> and heading <h2> in a .aof-section-head; it owns the
   ONE consistent gap between them so the spacing no longer depends on each
   section's own parent layout (grid row-gap, flex column gap, etc.). Nest
   it as a single child inside whatever the section's outer layout is
   (e.g. beside a "view all" link, or at the top of a copy column). */
.aof-section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Shared on-page section eyebrow + heading.
   The rod-grid "Rods by technique" header is the canonical treatment; any
   section that wants to match it adds .aof-section-eyebrow on the eyebrow
   <p> and .aof-section-heading on the <h2>. The heading class is excluded
   from the global H2 override above (:not(.aof-section-heading)) so this
   single class — not a per-section ID hack — owns the heading type. */
.aof-section-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgb(102, 102, 102);
}

.aof-section-heading {
  margin: 0;
  padding: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #1a1a1a;
}

@media (min-width: 750px)  { .aof-section-heading { font-size: 30px; } }
@media (min-width: 990px)  { .aof-section-heading { font-size: 32px; } }
@media (min-width: 1200px) { .aof-section-heading { font-size: 32px; letter-spacing: -0.015em; } }

/* Shared section "view all" link — the small uppercase link with a trailing
   arrow that sits top-right of a section header. Rods-by-Technique is the
   canonical treatment; every section that has a top-right link adds
   .aof-section-view-all so they all read identically. Each section keeps
   only its own positioning (grid area / flex placement) in its own CSS. */
.aof-section-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.aof-section-view-all:hover { color: #555; }

.aof-section-view-all svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.aof-section-view-all:hover svg { transform: translateX(2px); }

/* Restore product detail page title — needs to remain large/distinct */
.product__title h1,
.product__title .h1 {
  font-size: 32px;
  letter-spacing: 1px;
  text-transform: none;
}

/* Sub-headings and card titles inside content sections. END uses 16-18px
   / 600 for these. Excludes product-card titles (set separately above) and
   product detail page H3s (which carry their own spec). */
.shopify-section .card__heading:not(.product-card-wrapper .card__heading),
.shopify-section .featured-blog__card-title,
.shopify-section .multicolumn-card__heading {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #1a1a1a;
  text-transform: none;
}

/* Body copy in rich-text / multicolumn / image-with-text blocks.
   END uses 14-16px / 400 / lh 1.6 / #1a1a1a. */
.shopify-section .rich-text__text,
.shopify-section .multicolumn-card__info,
.shopify-section .image-with-text__text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
}

/* Primary CTAs / buttons — END spec: black bg / white text / no border
   radius / 12px / 600 / uppercase / 1px LS / 40-44px height. The Trade
   default uses theme-button colours which we've already flipped to black
   via settings_data.json; this normalises shape and typography. */
.shopify-section .button:not(.button--tertiary),
.shopify-section button.button,
.shopify-section a.button,
main .button:not(.button--tertiary) {
  background: #1a1a1a;
  color: #FFFFFF;
  border: 1px solid #1a1a1a;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 28px;
  line-height: 1;
  min-height: 44px;
  transition: background 180ms ease, color 180ms ease;
}

.shopify-section .button:not(.button--tertiary):hover,
.shopify-section a.button:hover,
main .button:not(.button--tertiary):hover {
  background: #000000;
  color: #FFFFFF;
}

/* Outline / secondary button variant — black border, white bg, black text */
.shopify-section .button--secondary,
main .button--secondary {
  background: transparent;
  color: #1a1a1a;
  border: 1px solid #1a1a1a;
}
.shopify-section .button--secondary:hover,
main .button--secondary:hover {
  background: #1a1a1a;
  color: #FFFFFF;
}

/* Collection page H1 — large editorial. END uses 32-40px / 600 / uppercase /
   2px LS / #1a1a1a. Trade defaults to even larger Bold which dominates. */
/* (The old `.template-page main > .page-width > h1:first-child` selector was
   dead — the body class is `page-type-page` and .page-width is never a direct
   child of main. Plain-page H1s now opt in via .aof-page-title instead.) */
.collection-hero__title,
.template-collection main h1,
.template-search main h1 {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 16px;
}

/* Breadcrumb above page title — END uses small grey microtype. */
.template-collection .breadcrumb,
main .breadcrumb {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #999;
}
main .breadcrumb a {
  color: #999;
  text-decoration: none;
}
main .breadcrumb a:hover {
  color: #1a1a1a;
}

/* Generic anchor inside content sections — END uses inherited dark with
   subtle hover. Removes Trade's underline-by-default brand-link aesthetic. */
.shopify-section .rich-text a,
.shopify-section .multicolumn-card__info a,
.shopify-section .image-with-text__text a {
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================================
   PRODUCT CARD — END Clothing alignment (2026-05-18)
   END product cards use a quiet, editorial typography stack:
   title 14/400/0.28px LS / rgb(26,26,26), brand 14/400 grey, price
   14/400 black, no uppercase, no chunky bold. Image is flush to card
   edges (no padding gutter). The visual hierarchy comes from the image,
   not from typography weight.
   ===================================================================== */

/* Title — was 18.9px / 700 / 0.63px (theme heading scale).
   END spec: 14px / 400 / 0.28px / line-height 18px. Colour uses the theme
   foreground variable so the card flips correctly between light and dark
   colour schemes (some AOF collections are configured dark). */
.product-card-wrapper .card__heading,
.product-card-wrapper .card__heading a,
.card-wrapper.product-card-wrapper .card__information .card__heading a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.28px;
  line-height: 18px;
  color: rgb(var(--color-foreground));
  text-transform: none;
}

/* Brand chip ("TAILWALK" etc.) — was 10px uppercase 1.3px LS muted.
   END shows the brand at the same size/weight as the title and same
   colour. Promotes brand visibility over the current tiny caption. */
.product-card-wrapper .card-information .caption-with-letter-spacing,
.product-card-wrapper .card__information .caption-with-letter-spacing {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.28px;
  line-height: 18px;
  color: rgb(var(--color-foreground));
  text-transform: none;
  margin-bottom: 4px;
}

/* Price — match the same 14/400 line so the card reads as one block.
   Preserve the sale-price red treatment for sale items. */
.product-card-wrapper .price .price-item,
.product-card-wrapper .price__regular .price-item--regular,
.product-card-wrapper .price__sale .price-item--regular,
.product-card-wrapper .price__sale .price-item--sale {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.28px;
  line-height: 18px;
  color: rgb(var(--color-foreground));
}

/* Tighten the vertical rhythm under the image — END uses 8-12px between
   image and first text row, then 4px between text rows. Trade defaults
   to 11.2px between siblings which is acceptable; we just compress to 4. */
.product-card-wrapper .card-information > *:not(.visually-hidden:first-child)
  + *:not(.rating):not(.card__information-volume-pricing-note) {
  margin-top: 4px;
}

/* Image flush to card edges — Trade's `--image-padding` adds ~12px gutter
   around the product image which leaves a grey halo on END's look.
   Set padding to 0 only on product cards (not other card variants).
   Also strip the chunky 5.6px border + 8px radius Trade applies via the
   `card__inner` element — END cards have zero chrome around the image. */
.product-card-wrapper .card--standard > .card__inner,
.product-card-wrapper .card--media > .card__inner,
.product-card-wrapper .card__inner {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

/* Quick-add / Sold-out CTA under each card — keep functional, but quiet
   it down so the grid reads as imagery first. Borderless minimal style. */
.product-card-wrapper .quick-add__submit,
.product-card-wrapper .card__quick-add-button {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: none;
}

/* Sold-out / status badge overlay — END doesn't use overlay badges.
   Tone down the existing dark pill to a softer pebble so it reads as
   a status note, not a brand stamp. */
.product-card-wrapper .badge,
.product-card-wrapper .badge--bottom-left {
  background: rgba(26, 26, 26, 0.78);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: none;
  padding: 4px 10px;
  border-radius: 2px;
}

/* Quick-add / "Sold out" button under each card — END doesn't show CTAs
   under cards (the image IS the CTA). Hide the block by default; reveal
   on card hover so the function remains. Tighter, calmer button styling
   when visible. */
.product-card-wrapper .card__inline-link,
.product-card-wrapper .quick-add,
.product-card-wrapper .card__quick-add {
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
  margin-top: 12px;
}
.product-card-wrapper:hover .card__inline-link,
.product-card-wrapper:hover .quick-add,
.product-card-wrapper:hover .card__quick-add,
.product-card-wrapper:focus-within .quick-add,
.product-card-wrapper:focus-within .card__quick-add {
  opacity: 1;
  visibility: visible;
}

/* =====================================================================
   FOOTER — END Clothing pattern
   END footer spec: bg #FAFAFA (very light grey), 80px top padding,
   headings H3 14/600/1.4px LS/uppercase/#1a1a1a, links 14/400/#333
   line-height 22px, newsletter heading 20/600/2px LS/uppercase, input
   bordered, 0 border-radius, button matches global black CTA.
   ===================================================================== */
.shopify-section-group-footer-group .footer,
footer.footer,
.footer {
  background: #FAFAFA;
  color: #1a1a1a;
  padding-top: 80px;
}

.footer .footer-block__heading,
.footer h3,
.footer h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 16px;
  line-height: 22px;
}

/* Newsletter heading sits one tier larger — END spec 20/600/2px */
.footer .newsletter__heading,
.footer .footer-block--newsletter h2,
.footer .footer-block--newsletter h3 {
  font-size: 20px;
  letter-spacing: 2px;
}

.footer a,
.footer .footer-block__details-content a,
.footer .list-menu__item {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-decoration: none;
  line-height: 22px;
  padding: 0;
}
.footer a:hover {
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Newsletter input — END uses borderless underline + solid black submit */
.footer .newsletter-form__field-wrapper {
  border: 0;
}
.footer input[type="email"],
.footer .newsletter-form__field {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.3);
  border-radius: 0;
  padding: 8px 0;
  font-size: 14px;
  color: #1a1a1a;
}
.footer input[type="email"]:focus {
  border-bottom-color: #1a1a1a;
  outline: none;
  box-shadow: none;
}

.footer .newsletter-form__button {
  background: #1a1a1a;
  color: #FFFFFF;
  border: 0;
  border-radius: 0;
}
.footer .newsletter-form__button:hover {
  background: #000000;
}

/* Copyright / payment row at the bottom */
.footer .copyright,
.footer .footer__copyright,
.footer__copyright__content {
  font-size: 12px;
  color: #999;
  letter-spacing: 0.4px;
}
.footer .copyright a {
  color: #999;
}

/* =====================================================================
   FACETS / FILTER SIDEBAR — END Clothing exact recreation (2026-05-18)

   END's structure per filter section (310px wide sidebar, padding 0):
     1. Header row (h2/h3 + chevron) — 36px tall, NO border, margin-top
        24px to separate from previous section.
     2. 1px divider line directly UNDER the header (border-bottom on the
        next element, not border-top on the header).
     3. Body container — padding 0, contains items.
     4. Filter items — 30px tall, full-width, padding 0, flex with 12px
        gap from checkbox to label. NO border / margin between items.

   Typography:
     Header text: 14px / 600 / 1.4px LS / uppercase / rgb(26,26,26).
     Item label: 12px / 400 / sentence case / rgb(26,26,26) / lh 18px.
     Count: 12px / 400 / rgb(153,153,153) muted.
   ===================================================================== */
.facets,
.facets-wrap,
.facets-vertical,
.facets-vertical-form,
facet-filters-form {
  background: transparent !important;
  padding: 0 !important;
}

/* Section header — END spec: 36px row, 24px gap from previous section,
   NO border on the header itself. The 1px divider sits below the header
   via ::after pseudo-element. */
.facets__summary,
.facets__heading,
.facets-vertical .facets__summary,
.facets-vertical .facets-wrap-vertical .facets__summary {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  border: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  list-style: none !important;
  position: relative !important;
}

.facets__summary::-webkit-details-marker {
  display: none !important;
}

/* The 1px divider line directly below each section header — END renders
   this as its own thin element below the heading. We use border-bottom
   on the summary to achieve the same line at the same offset.
   ONLY apply on vertical facet layouts — horizontal layout (search page)
   doesn't need per-row dividers and they intersect label descenders. */
.facets-vertical .facets__summary::after,
facet-filters-form.facets-vertical .facets__summary::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: #eeeeee !important;
}

/* Section spacing — every disclosure (details element) gets 24px gap
   from the one above, matching END's section-to-section rhythm.
   No margin on first section so it sits flush under the "FILTER:" title. */
.facets-vertical .facets__disclosure,
.facets-vertical details.facets__disclosure-vertical,
details.facets__disclosure-vertical,
.facets-vertical .facets__disclosure-vertical {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.facets-vertical .facets__disclosure + .facets__disclosure,
.facets-vertical details.facets__disclosure-vertical + details.facets__disclosure-vertical {
  margin-top: 24px !important;
}

/* Chevron expand/collapse — small right-side arrow.
   Force inline-flex positioning + relative position so it sits next to
   the label, not absolutely positioned (Trade's default absolute pos
   overlaps the label text in horizontal facets — search page bug). */
.facets__summary .icon-caret,
.facets__summary svg.icon-caret,
.facets-vertical .facets__summary .icon-caret {
  width: 10px !important;
  height: 10px !important;
  margin-left: 8px !important;
  position: static !important;
  display: inline-block !important;
  flex: 0 0 10px !important;
  align-self: center !important;
  transition: transform 200ms ease !important;
  color: #1a1a1a !important;
  top: auto !important;
  right: auto !important;
}

/* Horizontal facets — summary lays out as inline-flex with text + caret */
.facets:not(.facets-vertical) .facets__summary,
facet-filters-form:not(.facets-vertical) .facets__summary {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  padding-right: 4px !important;
}

details[open] > .facets__summary .icon-caret {
  transform: rotate(180deg) !important;
}

/* Body container — sits below the divider, no padding, items stack
   flush. END uses no internal padding on the body. */
.facets__display-vertical {
  padding: 12px 0 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Item wrapper — strip Trade's row padding/margin so items sit 30px
   tall flush. */
.facets__item,
.facets-vertical .facets__item,
.facets-vertical .facets__list li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

.facets-vertical .facets__list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Item label — END spec: 30px row, full width, 0 padding, 12px gap.
   12/400 sentence case rgb(26,26,26), lh 18px. */
.facets__label,
.facets-vertical .facets__label {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.24px !important;
  text-transform: none !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  line-height: 18px !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
}

/* Kill every nested span / div's uppercase / weight overrides — Trade
   nests `.facet-checkbox__text` and `.facet-checkbox__text-label` inside
   the label and both pick up uppercase from a utility class. */
.facets__label *,
.facets-vertical .facets__label *,
.facets__label .facet-checkbox__text,
.facets__label .facet-checkbox__text-label,
.facets__label .caption-with-letter-spacing,
.facets__label .caption-large,
.facets__label .caption {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.24px !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #1a1a1a !important;
  line-height: 18px !important;
}

/* END Clothing-style count: the outer span (.facet-checkbox__text) wraps
   both the brand-name label and the raw "(n)" count text. Set the outer
   span grey so the count inherits grey, then restore dark on the inner
   label span (.facet-checkbox__text-label) which contains only the name. */
.facets__label .facet-checkbox__text {
  color: rgb(153, 153, 153) !important;
}

.facets__label .facet-checkbox__text-label {
  color: rgb(26, 26, 26) !important;
}

/* Hover — END uses a subtle colour shift, NOT an underline. */
.facets__label:hover,
.facets__label:hover * {
  color: #000 !important;
  text-decoration: none !important;
}

/* Native checkbox — END uses a custom square (16×16, 1px border, no
   radius). Hide the OS checkbox and draw our own via pseudo + checked
   state. */
.facets__label input[type="checkbox"],
.facets-vertical .facets__label input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border: 1px solid rgba(26, 26, 26, 0.4) !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  margin: 0 !important;
  position: relative !important;
  flex: 0 0 16px !important;
  cursor: pointer !important;
  transition: background 150ms ease, border-color 150ms ease !important;
}

.facets__label input[type="checkbox"]:checked,
.facets-vertical .facets__label input[type="checkbox"]:checked {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

.facets__label input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 5px !important;
  top: 1px !important;
  width: 4px !important;
  height: 9px !important;
  border: solid #FFFFFF !important;
  border-width: 0 1.5px 1.5px 0 !important;
  transform: rotate(45deg) !important;
}

/* Count after label, e.g. "(88)" — slightly muted */
.facets__label .label,
.facets__label-count,
.facets-vertical .facets__label .facets__label-count {
  color: #999 !important;
  font-weight: 400 !important;
}

/* Disable Trade's pink/blue focus ring on facets, use END's subtle dark */
.facets__label:focus-within,
.facets__summary:focus-visible {
  outline: 1px dotted rgba(26, 26, 26, 0.3) !important;
  outline-offset: 2px !important;
}

/* Trade renders BOTH a native <input type="checkbox"> AND a decorative
   <svg> + svg-wrapper as the checkbox visual. With my native-input
   styling above, the user sees two boxes side by side. Hide Trade's
   SVG visuals so only the styled native input remains. */
.facets__label svg:not(.icon-caret),
.facets__label .svg-wrapper,
.facet-checkbox > svg,
.facet-checkbox > .svg-wrapper {
  display: none !important;
}

/* Price filter body — stack vertically so the "highest price" text is
   on its own line and the £ FROM TO inputs sit clean on a second line.
   END puts the price label in muted grey above the inputs. Force block
   layout because Trade's `.facets__display-vertical` uses flex-row. */
.facets__display-vertical,
.facets__display {
  display: block !important;
  padding: 8px 0 16px !important;
}

.facets__header-vertical {
  display: block !important;
  margin-bottom: 12px !important;
  width: 100% !important;
}

.facets__selected {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #999 !important;
  text-transform: none !important;
  letter-spacing: 0.24px !important;
  display: block !important;
}

price-range.facets__price {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

price-range .field-currency {
  font-size: 12px !important;
  color: #1a1a1a !important;
  font-weight: 400 !important;
  flex: 0 0 auto !important;
}

price-range .field {
  flex: 1 1 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

price-range .field__input {
  width: 100% !important;
  height: 36px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(26, 26, 26, 0.3) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  background: #FFFFFF !important;
  letter-spacing: 0.24px !important;
}

price-range .field__input:focus {
  outline: none !important;
  border-color: #1a1a1a !important;
}

price-range .field__label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #999 !important;
}

.facets__price input,
.facets input[type="text"],
.facets input[type="number"] {
  border: 1px solid rgba(26, 26, 26, 0.3);
  border-radius: 0;
  font-size: 14px;
  padding: 8px;
  background: #FFFFFF;
}

/* Active filter chips above the grid */
.active-facets__button,
.active-facets__button-inner {
  border: 1px solid #1a1a1a;
  background: transparent;
  color: #1a1a1a;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: none;
  padding: 6px 12px;
}
.active-facets__button:hover {
  background: #1a1a1a;
  color: #FFFFFF;
}

/* Sort dropdown — minimal underline style */
.facets__form select,
.facet-filters select {
  border: 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.3);
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 6px 24px 6px 0;
  background: transparent;
  color: #1a1a1a;
  cursor: pointer;
}

/* =====================================================================
   PAGINATION — END pattern: minimal numbered links, no boxes
   ===================================================================== */
.pagination__list {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  list-style: none;
}

.pagination__item,
.pagination__item-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #1a1a1a;
  text-decoration: none;
  border: 0;
  background: transparent;
}

.pagination__item--current,
.pagination__item[aria-current="page"] {
  font-weight: 600;
  border-bottom: 2px solid #1a1a1a;
}

.pagination__item:hover {
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =====================================================================
   PRODUCT DETAIL PAGE (PDP)
   END PDP: large image gallery left, sticky info right. Title plain
   black 28-32px / 500. Price 18-20px. Swatches as small squares with
   1px border. Accordions calm — heading 14/600/uppercase.
   ===================================================================== */
.product__info-container .product__title,
.product__info-container .product__title h1 {
  font-family: var(--font-body);
  /* The editorial H1 register (2026-09-15) — the same one the split
     header uses on collection and brand-range pages, so the three pages
     of the shopping journey open on the same heading. It was END's 18px
     uppercase product-name span from 2026-05-20, which on a left-aligned
     column read as a label rather than the name of the thing being
     bought. Sentence case: a model code is already its own case. */
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  text-transform: none;
  line-height: 1.1;
  margin-bottom: 1rem;
}

@media screen and (min-width: 990px) {
  .product__info-container .product__title,
  .product__info-container .product__title h1 {
    font-size: 2.8rem;
  }
}

/* PDP vendor / context — END pattern: sentence case 14/400 muted grey,
   reads like the colour-line on the product card. Trade applies
   `.caption-with-letter-spacing` which forces uppercase + LS — overridden
   with !important since the Trade utility class wins on specificity. */
.product__info-container .product__text,
.product__info-container .product__vendor,
.product__info-container .caption-with-letter-spacing {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #999 !important;
  letter-spacing: 0.28px !important;
  text-transform: none !important;
  margin-bottom: 16px !important;
}

/* PDP context badges / small chip labels ("Part of", "By", "For",
   "Series page"). END uses 11px / 600 / 1px LS uppercase for such
   micro-labels — consistent with footer / facet headings. Trade defaults
   to 7.5px which reads as a typo. */
.product-context-badges__label,
.product-series-link__prefix {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #999 !important;
}

/* Spec sheet labels (LENGTH, CASTING WEIGHT, SECTIONS, ROD WEIGHT,
   TIP TYPE) — match the 11/600/1px micro-label spec. */
.product-spec-grid__label,
.product__specs dt,
.product-info__spec-label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #999 !important;
}

/* Spec values (the actual measurement next to the label) — body text,
   sentence case so "5'5\"" / "3g" / "Solid" reads naturally. */
.product-spec-grid__value,
.product__specs dd,
.product-info__spec-value {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.28px !important;
  text-transform: none !important;
  color: #1a1a1a !important;
}

/* =====================================================================
   CASE NORMALISATION — site-wide (2026-05-18)
   Ben's mandate: filter labels, product card brand, vendor — anything
   that's BODY content should be sentence case. Only section headings /
   micro-labels / CTAs are uppercase. Strip Trade's blanket
   `.caption-with-letter-spacing` uppercase application from any context
   that isn't an explicit heading/label.
   ===================================================================== */
main .caption-with-letter-spacing:not(.product-spec-grid__label):not(.product-context-badges__label):not(.product-series-link__prefix):not(.footer-block__heading):not(.facets__summary),
main .caption-large:not(.facets__summary):not(.product-spec-grid__label) {
  text-transform: none !important;
  letter-spacing: 0.28px !important;
  font-weight: 400 !important;
}

.product__info-container .price .price-item,
.product__info-container .price__regular .price-item--regular {
  font-family: var(--font-body);
  /* 2.4rem since 2026-09-15 (was 20px): beside the essential specs and
     the buying controls the price is the one number on the page, and it
     was the same size as a spec value. */
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

/* Variant swatches / labels — END uses small bordered squares */
.product-form__input--swatch input + label,
.product-form__input--pill input + label {
  border: 1px solid rgba(26, 26, 26, 0.3);
  border-radius: 0;
  background: #FFFFFF;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 400;
  padding: 8px 14px;
  min-width: 44px;
  transition: border-color 180ms ease, background 180ms ease;
}
.product-form__input--swatch input:checked + label,
.product-form__input--pill input:checked + label {
  border-color: #1a1a1a;
  background: #1a1a1a;
  color: #FFFFFF;
}

/* Add-to-cart and Buy-it-now buttons — END Clothing CTA spec (verified
   live 2026-05-19 against /gb/new-balance-m2002rda-m2002rda.html):
   44px tall / 16px / 1.6px tracking / black. We had 13px/1px/48px-min
   which left the button rendering at 78px tall with chunky padding —
   way bulkier than END. Constrain padding so 44px holds. */
.product-form__submit,
.shopify-payment-button__button {
  background: #1a1a1a !important;
  color: #FFFFFF !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 28px !important;
  line-height: 1 !important;
}
.product-form__submit:hover,
.shopify-payment-button__button:hover {
  background: #000000 !important;
}

/* Product accordion blocks — END uses thin dividers, calm uppercase */
.product .accordion,
.product__accordion {
  border-top: 1px solid #e6e6e6;
}
.product .accordion summary,
.product__accordion summary {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1a1a1a;
  padding: 16px 0;
}
.product .accordion__content,
.product__accordion-content {
  font-size: 14px;
  line-height: 22px;
  color: #1a1a1a;
}

/* =====================================================================
   CART DRAWER + CART PAGE
   END cart drawer is light, monochrome, with thin dividers and a
   prominent black "CHECKOUT" CTA.
   ===================================================================== */
cart-drawer,
.cart-drawer,
.drawer {
  background: #FFFFFF;
  color: #1a1a1a;
}

.cart-drawer__header h2,
.cart-drawer__title,
.cart__title,
main h1.cart__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #1a1a1a;
}

.cart-item__name,
.cart-item__details a {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  letter-spacing: 0.28px;
}

.cart-item__details,
.cart-item__option,
.product-option {
  font-size: 13px;
  color: #999;
  font-weight: 400;
}

.cart-item__price,
.cart__total,
.totals__total-value {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}

.cart__ctas .cart__checkout-button,
.cart__ctas button[name="checkout"],
.cart-drawer .cart__checkout-button {
  background: #1a1a1a !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  min-height: 48px !important;
}

/* Cart row divider */
.cart-items thead,
.cart-items th,
.cart-items td,
.cart-item {
  border-color: #e6e6e6;
}

/* =====================================================================
   IMAGE-WITH-TEXT / MULTICOLUMN / FEATURED CONTENT SECTIONS
   END pattern: image left or full-bleed, text restrained, button black.
   Heading already styled via the global H2 pass.
   ===================================================================== */
.image-with-text__heading,
.image-with-text__text,
.multicolumn-card__info {
  color: #1a1a1a;
}

.image-with-text__text p,
.multicolumn-card__info p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Multicolumn icon — END uses solid black or none. Strip any tint. */
.multicolumn-card .multicolumn-card__image-wrapper svg {
  color: #1a1a1a;
}

/* =====================================================================
   SEARCH RESULTS PAGE — re-use collection styles, soft hero
   ===================================================================== */
.template-search main .search__title,
.template-search main h1 {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #1a1a1a;
}
.template-search .search__input,
.template-search input[type="search"] {
  border: 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.3);
  border-radius: 0;
  font-size: 16px;
  padding: 12px 0;
  background: transparent;
}
.template-search .search__input:focus {
  border-bottom-color: #1a1a1a;
  outline: none;
}

/* =====================================================================
   ACCOUNT PAGES — login / register / order / addresses
   END uses minimal forms with underline inputs, black submit.
   ===================================================================== */
.template-customers-login main,
.template-customers-register main,
.template-customers-account main,
.template-customers-order main {
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 20px;
}

.template-customers-login h1,
.template-customers-register h1,
.template-customers-account h1,
.customer__title {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 24px;
}

.customer .field input,
.customer input[type="email"],
.customer input[type="password"],
.customer input[type="text"] {
  border: 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.3);
  border-radius: 0;
  padding: 12px 0;
  font-size: 14px;
  background: transparent;
  width: 100%;
}
.customer .field input:focus {
  border-bottom-color: #1a1a1a;
  outline: none;
  box-shadow: none;
}

.customer button[type="submit"],
.customer .button {
  background: #1a1a1a;
  color: #FFFFFF;
  border-radius: 0;
  border: 0;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  width: 100%;
  min-height: 44px;
}
.customer button[type="submit"]:hover {
  background: #000000;
}

.customer a {
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================================
   PAGE CONTAINER — ONE container for the whole site (2026-09-19)
   ---------------------------------------------------------------------
   There were TWO, from two different eras, and that is what made every
   interior page feel like a different website from the homepage:

     * the AOF sections (homepage, and everything built since) ran
       `--aof-content-max` 1360px inside 16/32/48px gutters, breaking at
       750 / 990 / 1200;
     * `.page-width` — every Dawn-inherited page: brands, techniques,
       contact, pick & mix, the collection grid, the account pages — ran
       the 2026-05-18 END grid, 1376px inside 80px gutters, breaking at
       768 / 1280.

   Measured live at a 1440 viewport before this change: the homepage
   content column was 1344px wide with 48px gutters, and every interior
   page was 1280px wide with 80px gutters. Every page edge sat in a
   different place, and the two families even REFLOWED at different
   widths, which is why the site felt unrelated page to page.

   The homepage is the benchmark, so the AOF container wins and
   `.page-width` is now expressed in the same tokens. Content-box with a
   1360px max plus the gutter as padding reproduces the homepage band
   exactly: 1344px at 1440, 1360px from 1456 up.
   ===================================================================== */
.page-width,
.page-width--narrow,
.page-width--medium {
  max-width: var(--aof-content-max) !important;
  padding-left: var(--aof-gutter) !important;
  padding-right: var(--aof-gutter) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: content-box !important;
}

/* Collection product grid — END uses 4 columns on desktop with 24px
   column gap and 40px row gap. Trade defaults to 3 columns desktop /
   2 mobile via the `grid--3-col-desktop` class on the <ul>. Force 4
   columns on the product grid only (collection-list grids stay user-
   configurable). Cards become ~240px wide at 1376 max-width matching
   END's 241px card. */
ul.product-grid,
ul.grid.product-grid,
ul#product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 40px 24px !important;
}

/* Reset Trade's flex-basis on the grid items so they fit the new
   grid columns rather than computing their own flex width. */
ul.product-grid > li,
ul.grid.product-grid > li,
ul#product-grid > li {
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
}

@media (max-width: 1100px) {
  ul.product-grid,
  ul.grid.product-grid,
  ul#product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  ul.product-grid,
  ul.grid.product-grid,
  ul#product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 16px !important;
  }
}

/* =====================================================================
   END FLUSH-CHROME PASS (2026-05-18)
   END uses essentially zero box-shadows and zero card-style border-radius
   site-wide. The only rounding END uses anywhere is 2-4px on chips and
   inputs. This pass strips Trade's default 8px card rounding, 8px-8px-0-0
   media top-rounding, and decorative shadows from every card / tile /
   popup / banner / form / modal surface. Header search pill (999px) and
   the drawer slide-in shadow are intentionally preserved.
   ===================================================================== */

/* Every Trade card variant — product, featured, multicolumn, image-with-
   text, blog/article, collection-list, range, colour. */
.card,
.card__inner,
.card__media,
.card__content,
.card-wrapper,
.card-wrapper .card,
.card--standard .card__inner,
.card--card .card__inner,
.card--media .card__inner,
.card--shape .card__inner,
.collection-list .card,
.collection-list__item,
.collection-list__item .card,
.featured-collection .card-wrapper,
.featured-collection .card__inner,
.multicolumn-card,
.multicolumn-card__image-wrapper,
.multicolumn-card__info,
.image-with-text__media,
.image-with-text__content,
.image-with-text__media--small,
.image-with-text__media--medium,
.image-with-text__media--large,
.image-with-text__media--adapt,
.article-card,
.article-card__image-wrapper,
.article-card-wrapper,
.featured-blog__post-image,
.range-card,
.colour-card,
.colour-card__media,
.testimonial-card {
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Strip Trade's 8px 8px 0 0 media top-only rounding (used by .card__media
   on any card variant — featured collection, multicolumn, etc.) */
.card__media,
.card__media .media,
.product-card-wrapper .card__media,
.product-card-wrapper .media,
.card__media .media img {
  border-radius: 0 !important;
}

/* Cart preview dropdown — replace 12px-radius + 16px-shadow look with
   END's thin border / flat surface. */
.aof-cart-preview {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid #e6e6e6 !important;
}

/* Newsletter / form blocks — flatten */
.newsletter,
.newsletter-form,
.newsletter-form__field-wrapper,
.newsletter-form input,
.newsletter-form button {
  border-radius: 0 !important;
}

/* Quantity / number / select inputs — flatten */
.quantity,
.quantity__input,
.quantity__button,
.select select,
select {
  border-radius: 0 !important;
}

/* Banner / slideshow — flush, no rounding */
.banner,
.banner__media,
.banner__content,
.banner__box,
.slideshow,
.slideshow__slide,
.slideshow__media {
  border-radius: 0 !important;
}

/* Modal / popup / dialog / drawer-inner — END is flat */
.modal,
.modal__content,
quick-add-modal,
quick-add-modal__content,
.cart-notification,
.cart-notification__links,
cart-drawer .cart-drawer__inner,
.pickup-availability-info,
.localization-form__select,
predictive-search {
  border-radius: 0 !important;
}

/* Mini-cart / cart-drawer item rows — flat */
.cart-drawer__items,
.cart-drawer .cart-item,
.cart-item__media,
.cart-item__image-container,
.cart-items img,
.cart-drawer__warnings {
  border-radius: 0 !important;
}

/* Notification / alert / toast / inline-error blocks */
.errors,
.success-message,
.form__message,
.shopify-payment-button__more-options {
  border-radius: 0 !important;
}

/* Tag chips / facet pills — END uses subtle 2px rounded chips, which is
   close to flat. Force to 2px so any Trade-leftover 999px pill on a
   non-search element gets normalised. */
.tag,
.tag--remove,
.facets__price input,
.facets-vertical input[type="text"],
.facets-vertical input[type="number"] {
  border-radius: 2px !important;
}

/* Strip all decorative drop-shadow filters Trade applies to "card--shape" */
.card--shape,
.card--shape.card--standard:not(.card--text) .card__inner,
.card--shape.card--card .card__inner,
.card--shape .card__media {
  filter: none !important;
  border-radius: 0 !important;
}

/* Borders on any `.card__inner` Trade variant — strip the chunky 5.6px
   border the gradient scheme adds. (Already done for product cards; broaden.) */
.card__inner,
.card-wrapper .card__inner,
.card--standard .card__inner,
.card--card .card__inner {
  border: 0 !important;
}

/* Featured-collection / cards-with-text on white now sit on transparent
   backgrounds — END puts cards directly on the page bg, no fill. */
.collection-list .card__inner,
.collection-list .card__content,
.featured-collection .card__inner {
  background: transparent !important;
}

/* Predictive search dropdown — flat END pattern */
predictive-search .predictive-search,
.predictive-search,
.predictive-search__results-groups-wrapper {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid #e6e6e6 !important;
}

/* =====================================================================
   PSEUDO-ELEMENT SHADOW KILL (2026-05-18)
   Trade theme draws its card "drop shadow" via .card__inner::after with
   a box-shadow on the pseudo-element — invisible to standard CSS
   inspection on the element itself. This block nukes every card-shadow
   ::before / ::after across every card variant, plus button shadow
   pseudo-elements, so the site reads truly flat (END pattern).
   ===================================================================== */
.card__inner::after,
.card__inner::before,
.card-wrapper .card__inner::after,
.card-wrapper .card__inner::before,
.card__media::after,
.card__media::before,
.card__content::after,
.card-wrapper::after,
.card-wrapper::before,
.product-card-wrapper .card::after,
.product-card-wrapper .card::before,
.product-card-wrapper .card__inner::after,
.product-card-wrapper .card__inner::before,
.range-card::after,
.range-card::before,
.colour-card::after,
.colour-card::before,
.article-card::after,
.article-card::before,
.multicolumn-card::after,
.multicolumn-card::before,
.image-with-text__media::after,
.image-with-text__media::before,
.collection-list .card::after,
.collection-list .card::before {
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
  border: 0 !important;
}

/* Trade also adds a shadow ::before on .button (the "raised" effect) and
   under quick-add submit. Strip them. */
.button::after,
.button::before,
.quick-add__submit::after,
.quick-add__submit::before,
.product-form__submit::after,
.product-form__submit::before,
.shopify-payment-button__button::after,
.shopify-payment-button__button::before {
  box-shadow: none !important;
  filter: none !important;
}

/* Override Trade's --shadow-* CSS variables at root so any rule that
   still references them (and any we haven't selector-matched) resolves
   to no shadow. Belt-and-braces against Trade's shadow tokens. */
:root {
  --shadow-horizontal-offset: 0px !important;
  --shadow-vertical-offset: 0px !important;
  --shadow-blur-radius: 0px !important;
  --shadow-opacity: 0 !important;
  --shadow-visible: false !important;
}

/* --- Scroll-reveal animation --- */
.aof-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.aof-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion is not optional (DESIGN.md §6) — and content visibility
   must never be gated on a transition. Also covers the product-image
   hover zoom defined above. */
@media (prefers-reduced-motion: reduce) {
  .aof-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .card__media .media img,
  .product-card-wrapper .card .media img,
  .range-card__media img {
    transition: none;
  }
  .card__media:hover .media img,
  .product-card-wrapper .card:hover .media img,
  .range-card:hover .range-card__media img {
    transform: none;
  }
}

/* --- Breadcrumb (enhanced) --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 1.6rem 0;
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.6);
}

.breadcrumb a {
  color: rgba(var(--color-foreground), 0.6);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.breadcrumb a:hover {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
}

.breadcrumb [aria-hidden="true"] {
  margin: 0 0.4rem;
  opacity: 0.4;
  user-select: none;
}

.breadcrumb [aria-current="page"] {
  color: rgb(var(--color-foreground));
  font-weight: 600;
}

/* --- Collection intro/body --- */
.collection__intro {
  max-width: 72rem;
  margin: 0 auto var(--space-lg);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.75);
}

.collection__body {
  max-width: 72rem;
  margin: var(--space-lg) auto 0;
  font-size: var(--text-base);
  line-height: 1.7;
  color: rgba(var(--color-foreground), 0.7);
}

.collection__body h2,
.collection__body h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

/* --- Product colour description --- */
.product__colour-description {
  font-size: var(--text-sm);
  color: rgba(var(--color-foreground), 0.6);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
}

/* --- PDP "Ask Ben" link (rods) — quiet advice path under the buy buttons.
       Calibrated rem (10px root), not the half-size --text-* tokens. --- */
.product__ask-ben {
  margin: 1.2rem 0 0;
  text-align: left;
}

.product__ask-ben-link {
  font-size: 1.3rem;
  color: rgba(var(--color-foreground), 0.72);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.product__ask-ben-link:hover,
.product__ask-ben-link:focus-visible {
  color: rgb(var(--color-foreground));
}

/* --- Pick 'n' Mix price details (pack qty + RRP under main price) --- */
.pnm-price-details {
  font-size: var(--text-sm);
  color: rgba(var(--color-foreground), 0.65);
  margin: var(--space-xs) 0 var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}

.pnm-price-details__sep {
  color: rgba(var(--color-foreground), 0.35);
}

/* --- Product range intro (Pick 'n' Mix cross-link) --- */
.product__range-intro {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(var(--color-foreground), 0.03);
  border: 1px solid rgba(var(--color-foreground), 0.1);
  border-radius: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.7);
}

.product__range-intro a {
  display: inline-block;
  margin-top: var(--space-xs);
  font-weight: 600;
  color: rgb(var(--color-link));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ========================================
   COLLECTION RANGE TEMPLATE
   Pick 'n' Mix colour card grid
   ======================================== */

.range-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  padding: 0;
  margin: 0;
  list-style: none;
}

@media screen and (min-width: 750px) {
  .range-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}

@media screen and (min-width: 990px) {
  .range-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Colour card --- */
.colour-card {
  display: flex;
  flex-direction: column;
  background: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), 0.08);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.colour-card:hover {
  box-shadow: 0 4px 16px rgba(var(--color-foreground), 0.08);
}

.colour-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}

.colour-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal) var(--ease-out);
}

.colour-card:hover .colour-card__media img {
  transform: scale(var(--hover-scale));
}

.colour-card__info {
  padding: var(--space-sm);
}

.colour-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 var(--space-2xs);
  color: rgb(var(--color-foreground));
}

.colour-card__price {
  font-size: var(--text-sm);
  color: rgba(var(--color-foreground), 0.7);
  margin: 0 0 var(--space-xs);
}

/* --- Quantity stepper --- */
.qty-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-xs);
}

.qty-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(var(--color-foreground), 0.15);
  background: transparent;
  color: rgb(var(--color-foreground));
  font-size: var(--text-base);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
  line-height: 1;
  padding: 0;
}

.qty-stepper__btn:first-child {
  border-radius: 4px 0 0 4px;
}

.qty-stepper__btn:last-child {
  border-radius: 0 4px 4px 0;
}

.qty-stepper__btn:hover {
  background: rgba(var(--color-foreground), 0.05);
}

.qty-stepper__input {
  width: 40px;
  height: 32px;
  border: 1px solid rgba(var(--color-foreground), 0.15);
  border-left: 0;
  border-right: 0;
  text-align: center;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  color: rgb(var(--color-foreground));
  background: transparent;
  -moz-appearance: textfield;
}

.qty-stepper__input::-webkit-inner-spin-button,
.qty-stepper__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Add to Cart button (range card) --- */
.colour-card__atc {
  display: block;
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  border-radius: 4px;
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: opacity var(--duration-fast) ease;
}

.colour-card__atc:hover {
  opacity: 0.85;
}

.colour-card__atc:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.colour-card__atc--success {
  background: #16a34a;
  color: #fff;
}

/* ========================================
   RANGE CARD GRID
   Category pages that display child range
   collections as cards (e.g. Pick 'n' Mix
   Shads → Grass Minnow L, Power Shad 4…).
   Shares .range-grid layout with colour cards.
   ======================================== */

/* Square, white, 1px hairline, no shadow — the system card contract.
   Hover keeps only the sanctioned image zoom (no lift, no shadow). */
.range-card {
  background: #fff;
  border: 1px solid rgb(228, 228, 228);
  border-radius: 0;
  overflow: hidden;
}

.range-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.range-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}

.range-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal) var(--ease-out);
}

.range-card:hover .range-card__media img {
  transform: scale(var(--hover-scale));
}

.range-card__info {
  padding: 1.6rem;
}

.range-card__brand {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(var(--color-foreground), 0.6);
  margin: 0 0 0.4rem;
}

.range-card__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: rgb(var(--color-foreground));
  letter-spacing: -0.01em;
}

.range-card__spec {
  font-size: var(--text-sm);
  color: rgba(var(--color-foreground), 0.7);
  margin: 0 0 var(--space-2xs);
}

.range-card__count {
  font-size: 1.3rem;
  color: rgba(var(--color-foreground), 0.6);
  margin: 0;
}

/* ========================================
   COLLECTION VIEW TOGGLE
   Generic N-way view switcher. Sets
   `data-view="<id>"` on <html>. Opt-in
   visibility rules below the toggle bar.
   ======================================== */

.view-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-xs) 0 var(--space-md);
}

.view-toggle__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(var(--color-foreground), 0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.view-toggle__buttons {
  display: inline-flex;
  border: 1px solid rgba(var(--color-foreground), 0.15);
  border-radius: 999px;
  overflow: hidden;
  background: rgb(var(--color-background));
}

.view-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(var(--color-foreground), 0.75);
  cursor: pointer;
  transition: background var(--duration-fast) ease,
              color var(--duration-fast) ease;
  min-height: 40px;
}

.view-toggle__btn:hover {
  background: rgba(var(--color-foreground), 0.04);
  color: rgb(var(--color-foreground));
}

.view-toggle__btn--active {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}

.view-toggle__btn--active:hover {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}

/* --- View visibility rules ---
   Hide sections whose Shopify wrapper id ends in the key of the
   non-matching view. Keys are set in the template JSON (e.g.
   "product-grid", "rod-range-grid"). Shopify renders wrappers as
   <div id="shopify-section-template--<uuid>__<key>">.                  */

html[data-view="ranges"]   [id$="__product-grid"],
html[data-view="ranges"]   .js-view-products {
  display: none !important;
}

html[data-view="products"] [id$="__rod-range-grid"],
html[data-view="products"] .js-view-ranges {
  display: none !important;
}

/* Before the JS sets a view, hide the ranges grid so we don't
   flash both grids on first paint. Products is the default. */
html:not([data-view]) [id$="__rod-range-grid"],
html:not([data-view]) .js-view-ranges {
  display: none;
}

/* --- Pair With section --- */
.pair-with {
  margin-top: var(--space-xl);
}

.pair-with__heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

/* --- Range schema (visually hidden) --- */
.range-schema {
  display: none;
}

/* ========================================
   METHOD LISTING (directory page)
   /pages/methods — tile grid of method metaobjects
   ======================================== */

.method-listing__heading {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1.6rem;
}

@media (min-width: 750px) {
  .method-listing__heading { font-size: 3.2rem; }
}

.method-listing__intro {
  max-width: 72ch;
  margin: 0 0 2.4rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.75);
}

.method-listing__grid {
  margin-top: var(--space-md);
}

.method-listing__empty {
  font-size: var(--text-base);
  color: rgba(var(--color-foreground), 0.6);
}

/* =====================================================================
   COLLECTION BANNER — compact when no image (2026-05-19)
   main-collection-banner.liquid always renders a hero wrapper even when
   show_collection_image is false. Without an image the wrapper still
   reserves vertical space, creating a huge empty block above the grid.
   Force the inner wrapper to its natural text height when the image
   class isn't present.
   ===================================================================== */
.collection-hero:not(.collection-hero--with-image) .collection-hero__inner {
  padding-top: 8px;
  padding-bottom: 0;
  min-height: 0;
}

.collection-hero:not(.collection-hero--with-image) .collection-hero__text-wrapper {
  width: 100%;
  max-width: 1200px;
}

/* The shopify-section wrapper around the collection-banner adds 60px
   top + 60px bottom from Trade's `section` class. With no hero image
   that's 120px of dead vertical space above the grid. Collapse it
   when the inner hero has no image. */
.shopify-section.section:has(.collection-hero:not(.collection-hero--with-image)) {
  padding-top: 0 !important;
  padding-bottom: 8px !important;
}

/* Fallback for browsers without :has — target by class-on-main-collection */
.shopify-section .collection-hero:not(.collection-hero--with-image) {
  margin: 0;
}

/* Tighten the product-grid section top padding too when it follows
   a collection-banner */
.shopify-section.section + .shopify-section.section {
  /* no-op base — product-grid keeps its 28px from template settings */
}

/* Collection intro (custom.seo.intro) — END muted lede above the grid */
.collection-hero .collection__intro {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #555;
  max-width: 720px;
  margin: 12px 0 0;
}

/* =====================================================================
   PRODUCT CARD — force consistent aspect-ratio on every media slot
   so products with no images don't collapse the row above and create
   a "missing tile" gap in the grid. END Clothing uses 1:1 cards.
   ===================================================================== */
.product-card-wrapper .card__media,
.product-card-wrapper .card .media,
.product-card-wrapper .media--transparent {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  /* White cell so a pure-white product photo letterboxes seamlessly into
     the square (no grey band top/bottom). Rod/lure shots are studio-on-white;
     run a white-point normalise on any incoming set that isn't pure 255 white. */
  background: #fff;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}

.product-card-wrapper .card__media img,
.product-card-wrapper .card .media img,
.product-card-wrapper .media--transparent img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  /* Bottom-align (END "shoe" effect): landscape photo hugs the title, white
     space falls above the image rather than splitting top/bottom. */
  object-position: bottom !important;
}

/* Placeholder SVG when product has no image */
.product-card-wrapper .placeholder-svg,
.product-card-wrapper .card__media svg.placeholder-svg {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  object-fit: contain !important;
  padding: 28% !important;
  opacity: 0.18 !important;
  background: #f4f4f4 !important;
}

/* Reset the inline --ratio-percent hack Trade injects per card. The
   aspect-ratio CSS above handles sizing; the padding-bottom hack
   conflicts. */
.product-card-wrapper .card,
.product-card-wrapper .card__inner {
  padding-bottom: 0 !important;
}
.product-card-wrapper .card.ratio,
.product-card-wrapper .card__inner.ratio {
  padding-bottom: 0 !important;
}
.product-card-wrapper .card__inner.ratio::before,
.product-card-wrapper .card.ratio::before {
  display: none !important;
}

/* =====================================================================
   PRODUCT PAGE — single column when product has no media (2026-05-19)
   main-product.liquid adds `.product--no-media` to the wrapper when
   product.media.size == 0. Trade's section-main-product.css still keeps
   the grid--2-col-tablet split because the if/else is on the wrapper not
   the grid class. Force the info container to span full width and centre
   when no media is present so the page doesn't render as half-empty.
   ===================================================================== */
.product--no-media,
.product.product--no-media,
.product.product--no-media.grid--2-col-tablet {
  display: block !important;
  max-width: 920px !important;
  margin-inline: auto !important;
}

.product--no-media .product__media-wrapper {
  display: none !important;
}

.product--no-media .product__info-wrapper {
  width: 100% !important;
  max-width: 720px !important;
  margin-inline: auto !important;
}

/* =====================================================================
   PRODUCT PAGE — force proper CSS grid 2-col layout on desktop
   (2026-05-19)

   Trade's `.product` element uses display:flex with both children sized
   flex:1 0 auto. With our END page-width override the children compute
   to 45% + 55% = 100% in spirit, but the flex algorithm uses intrinsic
   widths (612 + 798 = 1410px) which exceeds the 1361px container and
   wraps the media-wrapper BELOW the info-wrapper. The page then looks
   completely broken — info on left, huge white wasteland on right where
   the gallery should be, then gallery shows up far below.

   Force the layout to CSS grid 2-col with the gallery on the LEFT (END
   pattern — image first) and sticky info on the right, regardless of
   the Trade `product--right` setting which causes wrap.
   ===================================================================== */
@media (min-width: 990px) {
  /* END Clothing PDP proportions (verified live 2026-05-19 against
     /gb/new-balance-m2002rda-m2002rda.html): gallery 603px / info 700px
     / gap 40px. Total ~1343px sitting inside END's ~1441px content box.
     Translates to a ~46/54 fr split — info column is WIDER than the
     gallery so it carries size selectors, accordions, copy etc.

     align-items: stretch (NOT start) is deliberate — END's scroll
     behaviour relies on the info grid cell being as tall as the gallery
     so the sticky info content has room to travel. With `start` the
     cell collapses to content height and sticky has nowhere to go. */
  .product:not(.product--no-media) {
    display: grid !important;
    grid-template-columns: minmax(0, 603fr) minmax(0, 700fr) !important;
    gap: 40px !important;
    align-items: stretch !important;
  }

  .product:not(.product--no-media) > .product__media-wrapper {
    max-width: none !important;
    width: 100% !important;
    flex: initial !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .product:not(.product--no-media) > .product__info-wrapper {
    max-width: none !important;
    width: 100% !important;
    flex: initial !important;
    padding-right: 0 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  /* When media_position is `left` keep visual order matching schema */
  .product.product--left:not(.product--no-media) {
    grid-template-columns: minmax(0, 603fr) minmax(0, 700fr) !important;
  }

  /* END PDP scroll mechanic: the info CONTENT block is position:sticky
     inside the (tall, gallery-height) info cell. It pins below the
     header while the image stack scrolls, then releases at the bottom.
     Trade adds .product__column-sticky when enable_sticky_info is on and
     sets position:sticky; top:3rem — we only need to bump `top` to clear
     the 57px sticky AOF header (57 + 16 breathing room = 73px). */
  .product__info-wrapper .product__column-sticky {
    position: sticky !important;
    top: 73px !important;
    align-self: start !important;
  }

  /* The info content is a readable column, left-aligned in its cell
     (2026-09-15 — it was 420px centred, END's pattern, and the centred
     stack was the one thing on the three shopping pages that did not
     line up with anything else). 56rem holds the two-column spec grid
     and a full-width buy button without either looking stretched. */
  .product__info-wrapper .product__info-container {
    max-width: 56rem !important;
    margin-inline: 0 !important;
  }
}

/* The buy button and payment buttons fill the info column (2026-09-15;
   they were 340px centred). box-sizing:border-box is still required —
   Trade's submit button is content-box, so padding and borders would
   otherwise add to the width. */
.product__info-container .product-form__buttons,
.product__info-container .product-form__submit,
.product__info-container .shopify-payment-button,
.product__info-container .shopify-payment-button__button {
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
}

/* =====================================================================
   The PDP info column is LEFT-ALIGNED (2026-09-15)
   It was centred (END's pattern, 2026-05-20). Every other interior page
   now opens with a left-aligned split header, so the product page
   reading centred was the inconsistency Ben named. Title, price, specs,
   chips, buttons, accordions: all on the same left edge.
   ===================================================================== */
.product__info-container {
  text-align: left !important;
}

.product__info-container .product-form__quantity .quantity,
.product__info-container quantity-input {
  margin-inline: 0 !important;
}

/* Sold-out pill removed from the PDP — the ATC button already states
   "SOLD OUT", so the pill beside the price was redundant. The Sale
   badge (.price__badge-sale) is left intact. */
.product__info-container .price__badge-sold-out {
  display: none !important;
}

/* Quantity stepper — square corners. Everything else on the PDP
   (buttons, spec cells, tabs) is 0-radius; Trade's --inputs-radius left
   the quantity box rounded and out of place. */
.product__info-container .quantity,
.product__info-container .quantity::before,
.product__info-container .quantity::after,
.product__info-container .quantity__input,
.product__info-container .quantity__button {
  border-radius: 0 !important;
}

/* Tablet + mobile (<990px): single column, gallery on top, info below.
   END drops the side-by-side layout here — at tablet widths a 2-col
   grid leaves both columns cramped ("squished into the middle"). The
   sticky pin, the 420px info column and the 340px button cap are all
   desktop-only refinements; on small screens info + buttons go
   full-width within the .page-width gutters (5rem ≥750px / 1.5rem
   below). This breakpoint matches the tab section, which also expands
   to stacked panels below 990px. */
@media (max-width: 989px) {
  .product:not(.product--no-media) {
    display: flex !important;
    flex-direction: column !important;
  }
  .product:not(.product--no-media) > .product__media-wrapper {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .product:not(.product--no-media) > .product__info-wrapper {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }
  .product__info-wrapper .product__column-sticky {
    position: static !important;
    top: auto !important;
  }
  .product__info-wrapper .product__info-container {
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  .product__info-container .product-form__buttons,
  .product__info-container .product-form__submit,
  .product__info-container .shopify-payment-button,
  .product__info-container .shopify-payment-button__button {
    max-width: 100% !important;
  }
}

/* Gallery container — END pattern: full width within the column, square
   aspect-ratio for primary image, thumbnails below or side. Constrain the
   tall sticky-column height so the gallery doesn't stretch to 1235px. */
.product__media-wrapper media-gallery {
  display: block;
  position: static !important;
}

.product__media-wrapper .product-media-container,
.product__media-wrapper .product__media-list {
  max-width: 100% !important;
}

.product__media-wrapper .product__media-item .product__media {
  /* Use the image's natural aspect ratio (Trade exposes --preview-ratio
     as an inline style on the .product-media-container parent — see
     section-main-product.css around L1290). Default 1.5 (3:2 landscape)
     for the rare case the variable is missing. AOF product photos are
     overwhelmingly landscape — forcing 1:1 here left a half-empty box
     above the image because object-fit:contain centred the landscape
     photo in a too-tall square. */
  aspect-ratio: var(--preview-ratio, 1.5) !important;
  width: 100% !important;
  background: #FAFAFA;
  position: relative !important;
  /* Trade also uses the legacy padding-top:var(--ratio-percent) hack to
     size .product-media-container .media. Zero it out — otherwise it
     stacks on top of the modern aspect-ratio and inflates the box. */
  padding-top: 0 !important;
}

.product__media-wrapper .product__media-item .product__media img,
.product__media-wrapper .product__media-item .product__media model-viewer,
.product__media-wrapper .product__media-item .product__media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  position: absolute !important;
  inset: 0 !important;
}

/* Override Trade's media-gallery `product__column-sticky` which was
   making the gallery container stick at scrollwise positions and stretch
   to fill the sticky viewport box. */
.product__media-wrapper .product__column-sticky {
  position: static !important;
  top: auto !important;
}

/* =====================================================================
   METHOD PAGE — compact when no hero image (2026-05-19)
   When featured_image is blank, the hero text sits in a left-aligned
   half-width column with the other half empty. Centre and constrain
   instead so the page doesn't read as broken.
   ===================================================================== */
.method-page__hero:not(.method-page__hero--has-image) {
  display: block;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
  padding-top: 24px;
  padding-bottom: 32px;
}

.method-page__hero:not(.method-page__hero--has-image) .method-page__hero-text {
  max-width: 720px;
}

/* (Type overrides for the imageless method hero removed 2026-06-12 —
   they forced a 40px uppercase H1 that diverged from the unified
   editorial entity-page title register (28/32px / 700 / sentence case).
   component-method-page.css owns .method-page__title / __intro type.) */

/* =====================================================================
   BREADCRUMBS — END Clothing pattern (2026-05-19)
   END uses very small, all-caps, wide-tracked microtype with a chevron
   separator. The breadcrumb sits flush left under the header at the top
   of the content area.
   ===================================================================== */
.breadcrumb-ui {
  padding: 18px 0 6px;
}

.breadcrumb-ui .breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-family: var(--font-body);
  /* END Clothing PDP spec (verified live 2026-05-19 against
     /gb/new-balance-m2002rda-m2002rda.html): 14px / mixed case / tight
     letter-spacing / black text. We had this uppercased + tracked-out
     like a label — END uses it as body-weight breadcrumb. */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.35px;
  text-transform: none;
  color: #1a1a1a;
}

.breadcrumb-ui .breadcrumb-list li {
  display: flex;
  align-items: center;
  line-height: 1.4;
}

/* Separator: single chevron between items, matching END's pattern.
   The base.css default (.breadcrumb-list li:not(:last-child)::after { content: "›" })
   also fires but with no padding — override here for spacing + colour. */
.breadcrumb-ui .breadcrumb-list li:not(:last-child)::after {
  content: '›';
  display: inline-block;
  padding: 0 8px;
  color: rgba(26, 26, 26, 0.45);
  opacity: 1;
  font-weight: 400;
}

/* Belt-and-braces: kill any ::before pseudo-separator from earlier AOF
   override revisions so we don't double up. */
.breadcrumb-ui .breadcrumb-list li + li::before {
  content: none !important;
}

.breadcrumb-ui .breadcrumb-list a {
  color: #999;
  text-decoration: none;
  transition: color 150ms ease;
}

.breadcrumb-ui .breadcrumb-list a:hover {
  color: #1a1a1a;
  text-decoration: none;
}

.breadcrumb-ui .breadcrumb-list [aria-current="page"] {
  color: #1a1a1a;
  font-weight: 600;
}

/* (Legacy .method-page__breadcrumb-list block removed 2026-06-12 — it
   collided with component-method-page.css producing double separators.
   Method pages now use the shared .breadcrumb-ui / .breadcrumb-list
   classes above, the single canonical breadcrumb treatment.) */

/* =====================================================================
   FOOTER — graceful compact mode when only one block configured
   The Quick Links-only footer reads as broken. Centre and pad the
   single-block state until more blocks are added in Theme Editor.
   ===================================================================== */
.footer .footer__blocks-wrapper {
  display: grid !important;
  gap: 32px 48px !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  text-align: left;
}

.footer .footer-block {
  text-align: left;
}

.footer .footer-block ul,
.footer .footer-block__details-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer .footer-block ul li,
.footer .footer-block__details-content ul li {
  margin: 0;
  padding: 0;
}

/* Social row in footer — END uses horizontal row of small icons, not
   a vertical stack. */
.footer ul.list-social,
.footer .footer__list-social,
.footer .list-social {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  align-items: center !important;
}

.footer ul.list-social li {
  margin: 0 !important;
  padding: 0 !important;
}

.footer .list-social__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  color: #1a1a1a !important;
}

.footer .list-social__link svg {
  width: 18px !important;
  height: 18px !important;
}

/* Newsletter block stands apart, centred and prominent */
.footer .footer-block--newsletter {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
}

/* Payment row at the very bottom — END inlines it next to copyright */
.footer .footer__content-bottom-wrapper {
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.footer .list-payment {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer .list-payment__item {
  margin: 0;
}

.footer .list-payment__item img,
.footer .list-payment__item svg {
  height: 22px;
  width: auto;
}

/* =====================================================================
   PRODUCT — Trust badges row (delivery / specialist / returns)
   Three columns, icon top, heading + body small. END pattern.
   ===================================================================== */
.product-trust-badges,
.product__trust-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
  padding: 20px 0;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

.product-trust-badges__item,
.product__trust-badge {
  text-align: center;
}

.product-trust-badges__icon,
.product__trust-badge svg {
  display: inline-block;
  width: 28px;
  height: 28px;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.product-trust-badges__title,
.product__trust-badge-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #1a1a1a;
  margin: 0 0 4px;
  line-height: 1.3;
}

.product-trust-badges__body,
.product__trust-badge-body {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: #777;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 600px) {
  .product-trust-badges,
  .product__trust-badges {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* =====================================================================
   ARTICLE / BLOG PAGE — editorial polish (2026-05-19)
   END-style long-form article: large display title, byline, generous
   prose width, careful typography rhythm.
   ===================================================================== */
.template-article main {
  background: #FFFFFF;
}

.article-template,
.template-article .article {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.template-article .article__header h1,
.template-article .article-template__title,
.template-article h1.article__title {
  font-family: var(--font-body);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 16px 0 12px;
  text-transform: none;
}

.template-article .article__author,
.template-article .article__date,
.template-article .article-template__author {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 24px;
}

.template-article .article__content,
.template-article .article-template__content,
.template-article .rte {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: #1a1a1a;
}

.template-article .article__content p,
.template-article .rte p {
  margin: 0 0 20px;
}

.template-article .article__content h2,
.template-article .rte h2 {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.1px;
  text-transform: none;
  margin: 40px 0 12px;
  color: #1a1a1a;
}

.template-article .article__content h3,
.template-article .rte h3 {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  margin: 32px 0 10px;
  color: #1a1a1a;
}

.template-article .article__content blockquote,
.template-article .rte blockquote {
  border-left: 3px solid #1a1a1a;
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  font-size: 19px;
  font-style: italic;
  color: #333;
}

.template-article .article__content img,
.template-article .rte img {
  width: 100%;
  height: auto;
  margin: 24px 0;
}

.template-article .article__image,
.template-article .article-template__hero,
.template-article .article-template__hero-container {
  max-width: 1100px;
  margin: 0 auto 24px;
}

.template-article .article__image img,
.template-article .article-template__hero img {
  width: 100%;
  height: auto;
}

/* =====================================================================
   404 PAGE — END minimal treatment (2026-05-19)
   Centred large display number, short body, link cluster to common
   destinations. Brand-coloured.
   ===================================================================== */
.template-404 main,
.template-404 .shopify-section {
  background: #FFFFFF;
}

.template-404 .page-width,
.404-page,
.template-404 .404-page {
  max-width: 560px !important;
  margin: 0 auto;
  text-align: center;
  padding: 64px 24px;
}

.template-404 h1,
.template-404 .404-page h1 {
  font-family: var(--font-body);
  font-size: 96px;
  font-weight: 700;
  letter-spacing: -2px;
  color: #1a1a1a;
  line-height: 1;
  margin: 0 0 8px;
}

.template-404 h2,
.template-404 .404-page__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 16px;
}

.template-404 p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin: 0 0 24px;
}

.template-404 .404-page__link-list,
.template-404 .button {
  margin-top: 12px;
}

/* =====================================================================
   POPULAR RANGES HERO CLUSTER (2026-05-19)
   END's /footwear/sneakers pattern: 3 small text links right under the
   page title pointing to the most-relevant sub-collections.
   Rendered by snippets/collection-popular-ranges.liquid; reads
   collection.metafields.custom.popular_collections (list.collection_reference).
   ===================================================================== */
.popular-ranges {
  margin: 12px 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #999;
}

.popular-ranges__label {
  color: #1a1a1a;
  font-weight: 600;
}

.popular-ranges__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.popular-ranges__item {
  margin: 0;
  padding: 0;
}

.popular-ranges__link {
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(26, 26, 26, 0.25);
  transition: text-decoration-color 150ms ease;
}

.popular-ranges__link:hover {
  text-decoration-color: #1a1a1a;
}

/* ============================================================
   Shared editorial pull-quote
   ------------------------------------------------------------
   The italic-serif pull-quote that sits top-left over a feature
   image. Used by the Rods-by-Technique featured tile
   (.aof-rg__featured-quote) and the Meet Ben / Rod Finder
   portrait (.aof-bf__portrait-quote). This base owns the
   typography, responsive sizing and positioning so the two read
   identically; each section layers ONLY its own colour (and, for
   Ben, a text-shadow + curly quote marks) on top in its own CSS.
   Defined here because design-system.css is the one stylesheet
   loaded site-wide — section CSS loads later in the body, so a
   per-section colour override wins at equal specificity.
   ============================================================ */
/* Shared editorial italic — the Times serif italic "voice" used for the
   pull-quotes over images AND the Field Notes footer line. One definition so
   they can never drift into looking like different fonts. Size + line-height
   are left to each context that uses it. */
.aof-editorial-italic {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.aof-editorial-quote {
  position: absolute;
  top: 24px;
  left: 20px;
  right: auto;
  max-width: 82%;
  z-index: 2;
  margin: 0;
  /* Type (family/style/weight/tracking) comes from .aof-editorial-italic.
     Sized to read as a soft pull-quote, not a headline — ~12% smaller than
     a display line, with tight line-height so it sits quietly in the frame. */
  font-size: 13px;
  line-height: 1.35;
}

@media (min-width: 750px) {
  .aof-editorial-quote { top: 32px; left: 28px; font-size: 14px; max-width: 70%; }
}

@media (min-width: 990px) {
  .aof-editorial-quote { top: 44px; left: 38px; font-size: 16px; max-width: 64%; line-height: 1.4; }
}

@media (min-width: 1200px) {
  .aof-editorial-quote { top: 52px; left: 48px; font-size: 18px; max-width: 66%; }
}

/* Light variant — for placing the pull-quote over a darker or photographic
   background (e.g. the Ben portrait), where the default dark-grey ramp
   would disappear. Soft light grey rather than pure white so it stays
   understated, with a faint shadow for separation across varied imagery.
   The default (no modifier) stays dark grey for light backgrounds like the
   rod-grid misty image. */
.aof-editorial-quote--light {
  color: #e6e6e6;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.30);
}

/* --- The third spacing source, latched shut (2026-09-19) ---------------
   `.section + .section { margin-top: var(--spacing-sections-*) }` in
   base.css puts a gap between every pair of sections on top of the padding
   both of them already carry. It reads 0 today because
   `settings.spacing_sections` is 0 - but that is a number in the theme
   editor, so one click in Shopify admin reopens a third opinion about
   every seam on the site, belonging to neither band and visible in no
   stylesheet. Latched here so the house rhythm cannot be overridden by
   accident. Sections meet edge to edge; the air comes from the bands. */
.shopify-section.section + .shopify-section.section,
.section + .section {
  margin-top: 0;
}

/* =====================================================================
   THE BLACK PILL — the one small ink tag (2026-09-19)
   ---------------------------------------------------------------------
   Ben, on the Rod Finder: "we did build in some little black button type
   box things for little featured titles and stuff like that. For numbers
   and things like that. They're not buttons but they're just a little bit
   more. I don't mind those."

   It existed twice, both times inside the Rod Finder's own stylesheet and
   at two different sizes, so nothing else on the site could reach it. It
   is a house component now, defined once here.

   It is NOT a button: no hover, no cursor, no focus ring. Use it for a
   short ordinal or a label on a featured title - `Step 1`, `01`, `New`.
   Never as a section eyebrow by reflex: numbered markers on bands that
   are not an ordered sequence are on the DESIGN.md §9 ban list.
   ===================================================================== */
.aof-pill,
.aof-rf__step-num,
.aof-rf__group-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 9px;
  background: var(--aof-surface-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  /* The 1 is a narrower glyph than the 2 and the 3, so an auto-width tag
     made the first one shorter and the text column beside it started two
     pixels early - a ragged left edge down three rows. Tabular figures
     make every digit the same width, so the tags match without pinning a
     hand-measured one. */
  font-variant-numeric: tabular-nums;
}

.aof-pill--lg,
.aof-rf__group-num {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: none;
}