/** Shopify CDN: Minification failed Line 943:3 Unexpected "(" **/ /* ========================================================================== KISTLER DESIGN LAYER -------------------------------------------------------------------------- Everything in the 2026 design that the theme's Customizer settings cannot express. Loaded after main.css so equal-specificity rules win. WHAT BELONGS HERE Global design language only — type scale, tracking, buttons, hairlines. Per-section styling does NOT belong here; sections are still being rebuilt and CSS written against markup that is about to change is wasted. WHAT DOES NOT BELONG HERE Anything the Customizer already does. Colours, radii and fonts are set in theme settings (see WORKSHEET-theme-settings.md) and must not be duplicated here — two sources of truth for one value is how a palette drifts. COLOUR FORMAT The theme stores colours as Shopify `.rgb` triplets and reads them as rgb(var(--token)). Literal hexes below are only for values with no setting behind them. Source: design_handoff_kistler_site_001/CLAUDE.md + HANDOFF-README.md ========================================================================== */ /* ========================================================================== TYPE SCALE — 17 TOKENS. THE ONLY TYPE IN THE BUILD. -------------------------------------------------------------------------- Design's audit, 2026-09-27: the homepage comp and the five shared components between them carried 6 spellings of the font family, 18 sizes and 59 size/weight/tracking combinations; the theme had 35 sizes and 98 combinations of its own. This block replaces all of it. HOW TO USE IT Never write a px or rem font-size in a section again. Take all four properties from one token: .k-thing { font-size: var(--k-t-h2-size); font-weight: var(--k-t-h2-weight); letter-spacing: var(--k-t-h2-track); line-height: var(--k-t-h2-lh); } WHY CUSTOM PROPERTIES RATHER THAN UTILITY CLASSES Our sections are styled through scoped `{% style %}` blocks against their own class names, and most of the markup is generated — there is often no element to hang a utility class on. Properties also put the responsive steps for Display, H2, H3 and Stat in ONE place: the media queries below re-declare the token, and every element using it follows. A utility class would need the same breakpoints repeated per section, which is the drift we are removing. ⚠ RULES (Design §4) · No font-size in px or rem outside this block. · No letter-spacing except: -0.035, -0.01, 0, 0.01, 0.16, 0.18, 0.2, 0.26em. · No font-weight except 400, 500, 700, 900. · No font-family outside `body` and the form-element reset below. · Uppercase belongs to the heading, title, eyebrow, label and button tokens — never to body text. Two values live outside the scale, each used exactly once, both sanctioned: the hero kicker (--k-t-kicker-*) and the "Bend Strong" stat figure (46px, because it is words rather than a numeral). ========================================================================== */ :root { /* ONE family, named once. Pointed at the theme's own picker variable rather than a literal "Barlow", because this file's own rule is that anything the Customizer sets must not be duplicated here — two sources of truth for one value is how a palette drifts. The literal is the fallback if the picker ever goes missing. */ --k-font: var(--body-font-family, 'Barlow', system-ui, sans-serif); /* — Headings — */ --k-t-display-size: 13.2rem; --k-t-display-weight: 900; --k-t-display-track: -0.035em; --k-t-display-lh: 0.85; --k-t-h2-size: 5.6rem; --k-t-h2-weight: 900; --k-t-h2-track: -0.01em; --k-t-h2-lh: 0.95; --k-t-h3-size: 4rem; --k-t-h3-weight: 900; --k-t-h3-track: -0.01em; --k-t-h3-lh: 1; --k-t-stat-size: 5.2rem; --k-t-stat-weight: 900; --k-t-stat-track: -0.035em; --k-t-stat-lh: 0.9; /* — Titles — */ --k-t-title-size: 2.2rem; --k-t-title-weight: 900; --k-t-title-track: 0; --k-t-title-lh: 1.1; --k-t-titles-size: 1.9rem; --k-t-titles-weight: 900; --k-t-titles-track: 0.01em; --k-t-titles-lh: 1.2; --k-t-question-size: 2.2rem; --k-t-question-weight: 700; --k-t-question-track: 0; --k-t-question-lh: 1.3; /* — Body — */ --k-t-lead-size: 1.8rem; --k-t-lead-weight: 400; --k-t-lead-track: 0; --k-t-lead-lh: 1.75; --k-t-body-size: 1.6rem; --k-t-body-weight: 400; --k-t-body-track: 0; --k-t-body-lh: 1.7; --k-t-bodys-size: 1.5rem; --k-t-bodys-weight: 400; --k-t-bodys-track: 0; --k-t-bodys-lh: 1.7; --k-t-meta-size: 1.3rem; --k-t-meta-weight: 400; --k-t-meta-track: 0; --k-t-meta-lh: 1.5; --k-t-price-size: 1.8rem; --k-t-price-weight: 900; --k-t-price-track: 0; --k-t-price-lh: 1; /* — UI — */ --k-t-nav-size: 1.4rem; --k-t-nav-weight: 500; --k-t-nav-track: 0; --k-t-nav-lh: 1.4; --k-t-button-size: 1.5rem; --k-t-button-weight: 700; --k-t-button-track: 0.16em; --k-t-button-lh: 1; --k-t-buttons-size: 1.3rem; --k-t-buttons-weight: 700; --k-t-buttons-track: 0.16em; --k-t-buttons-lh: 1; --k-t-eyebrow-size: 1.2rem; --k-t-eyebrow-weight: 700; --k-t-eyebrow-track: 0.18em; --k-t-eyebrow-lh: 1.4; --k-t-label-size: 1.1rem; --k-t-label-weight: 700; --k-t-label-track: 0.2em; --k-t-label-lh: 1.4; /* — The two sanctioned exceptions — */ --k-t-kicker-size: 1.6rem; --k-t-kicker-weight: 700; --k-t-kicker-track: 0.26em; --k-t-kicker-lh: 1.4; --k-t-statword-size: 4.6rem; } #main-content:has(.blog-filter), #main-content:has(.cc-main-blog) { padding-bottom: 80px !important; } @media (max-width: 767px) { #main-content:has(.blog-filter), #main-content:has(.cc-main-blog) { padding-bottom: 48px !important; } } .decal-item input[type="radio"]:checked + label { background-color: #f1f1f1; } /* Contact page */ .k-cf .section--page-width { margin-left: auto; margin-right: auto; } /* Chat reamaze and rewards */ @media (max-width: 767px) { #reamaze-widget { left: auto !important; right: 16px !important; bottom: 16px !important; } } /* The four display tokens step down; everything else holds its size. Redeclaring the token is the whole point — no section carries its own breakpoint. */ /* Display steps down at 1080, not 1024 (Design, 2026-09-30 item 5). It is the only token on this breakpoint, so it gets its own block rather than moving h2 with it. */ @media (max-width: 1080px) { :root { --k-t-display-size: 8.8rem; } } @media (max-width: 1024px) { :root { --k-t-h2-size: 4.4rem; } } /* Stat figures step down at 1200 (Design, 2026-09-30 item 5), replacing the 40 that used to sit at 767. */ @media (max-width: 1200px) { :root { --k-t-stat-size: 3.8rem; } } @media (max-width: 767px) { :root { --k-t-display-size: 5.6rem; --k-t-h2-size: 3.6rem; /* 3.6rem, not 3rem, from 2026-09-30. Design collapsed the mobile heading sizes from eight values (30/32/34/36) to a single 36px: page H1, section H2, story heads and pull quotes all land here. `--k-t-h2-size` was already 36; this brings h3 into line. ⚠ The homepage technique tabs also read this token, and they must STAY at 30 or the three tabs wrap onto two rows. They now carry their own size in `kistler-technique-band.liquid` instead of following h3. If another surface ever needs the old 30, give it an explicit size there rather than moving this token back. */ --k-t-h3-size: 3.6rem; --k-t-statword-size: 3.8rem; } } /* ONE family declaration, and one reset. Form elements do not inherit the page font, which is why they are named here and nowhere else. */ /* `html` as well as `body`, so a scan of the document reports what actually renders. Without it the root element keeps the browser default (Times) and every non-rendering node under inherits it — which is why an audit could report 329 elements "using Times" while nothing visible did. */ html, body { font-family: var(--k-font); } button, input, select, textarea { font-family: var(--k-font); } :root { /* Design tokens with no Customizer equivalent. */ --k-ink: #25292C; --k-body: #4A5054; --k-meta: #686E72; /* (10-02c §1.6) Promo bar link inherited the UA black because Alchemy's --announcement-text-color is unset. Ink, set once — this element is the whole of the "65 instances across 28 pages" the audit reported. */ --k-hairline: #E4E6E7; --k-panel: #F7F8F8; --k-band: #F2F3F3; --k-red: #ED1C24; --k-red-hover: #C01319; --k-red-press: #8F0E13; --k-control-border: #C9CCCE; /* Heading tracking is NEGATIVE in the design (-0.01em / -0.02em). The Customizer slider is min=0, so it cannot express this — the setting is parked at 0 and the real value lives here. This is the single reason the type looks right rather than merely uppercase. */ /* Aligned to the scale: -0.01em is the H2/H3 tracking, and this variable feeds Alchemy's own headings. It was -0.02em, which is not one of the eight allowed values. */ --heading-letter-spacing: -0.01em; /* Design body copy is 16px / 1.7. The theme ships 1.5. */ --k-body-line-height: 1.7; /* Max 1440 (already set in theme settings) with 40px gutters, 20px ≤767. */ --gutter-sm: 20px; --gutter-md: 40px; --gutter-lg: 40px; } body { line-height: var(--k-body-line-height); } /* -------------------------------------------------------------------------- TYPE SCALE The theme derives every heading geometrically from --heading-base-size and --heading-type-scale. The design specifies absolute sizes per role instead, so H1 and H2 are pinned and the geometric scale is left to handle the rest. clamp() carries the ≤1024 step the design calls for without a media query. -------------------------------------------------------------------------- */ :root { /* --h1/--h2-font-size removed: the h2 and h3 tokens carry these, with their breakpoints in one place. A clamp() here was a second scale competing with them. */ } /* -------------------------------------------------------------------------- TYPE ROLES Named for what they are, never for how they look — the same discipline the design system uses. Applied as classes when sections are rebuilt. -------------------------------------------------------------------------- */ /* Eyebrow / label — 11–13px, 700, uppercase, wide tracking. */ .k-eyebrow, .eyebrow { font-size: var(--k-t-eyebrow-size); font-weight: var(--k-t-eyebrow-weight); letter-spacing: var(--k-t-eyebrow-track); line-height: var(--k-t-eyebrow-lh); text-transform: uppercase; } /* Panel section title — 20–22px, 900, uppercase, POSITIVE tracking. The one heading role that tracks wider rather than tighter. */ .k-panel-title { font-size: var(--k-t-titles-size); font-weight: var(--k-t-titles-weight); letter-spacing: var(--k-t-titles-track); line-height: var(--k-t-titles-lh); text-transform: uppercase; } /* Card headline — 19px, 900, uppercase, -0.01em. */ .k-card-title { font-size: var(--k-t-titles-size); font-weight: var(--k-t-titles-weight); letter-spacing: var(--k-t-titles-track); line-height: var(--k-t-titles-lh); text-transform: uppercase; } /* Large figure — 44px, 900, -0.03em. Stat numerals, not headings. */ .k-figure { font-size: var(--k-t-stat-size); font-weight: var(--k-t-stat-weight); letter-spacing: var(--k-t-stat-track); line-height: var(--k-t-stat-lh); } /* Meta — 13–14px secondary text. */ .k-meta { color: var(--k-meta); font-size: var(--k-t-meta-size); font-weight: var(--k-t-meta-weight); letter-spacing: var(--k-t-meta-track); line-height: var(--k-t-meta-lh); } /* -------------------------------------------------------------------------- BUTTONS The theme has two styles; the design has three. Primary and outline map to the theme's own settings. SECONDARY — solid ink — has no setting behind it and is defined here. Heights are the design system's ramp: 44 inline / 52 in-panel / 62 hero. Use these three; do not invent in-betweens. -------------------------------------------------------------------------- */ .btn { min-height: 44px; } /* The 52px floor needs centring with it, exactly as `.k-foot__pill` did. `.btn` is `display: inline-block` in main.css, so a floor taller than the natural height drops ALL the slack below the line box. Reported 2026-10-06 as "wrong padding" on the Technique Specific empty-state button: measured 52px tall with the label 13px from the top and 23px from the bottom. Natural height is 42px (24px line + 2x9px padding), so the floor was adding 10px and putting every pixel of it underneath the text. `inline-flex` keeps the button sitting inline the way `inline-block` did; only the internal alignment changes. Scoped to `--in-panel` rather than `.btn`, because `.btn` also dresses icon-only controls whose label is visually hidden and which centre by other means already. */ .btn--in-panel { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; } .btn--hero { min-height: 62px; } /* Primary hover — red darkens on light grounds. */ .btn--primary:hover, .btn-primary:hover { background-color: var(--k-red-hover); } /* Secondary — solid ink, white text, borderless. Hover goes red. */ .btn--secondary { background-color: var(--k-ink); border: none; color: #fff; } .btn--secondary:hover { background-color: var(--k-red); color: #fff; } /* Outline — the theme's "alt" button. Its single `button_alt_text_color` setting drives BOTH border and text, but the design wants a #C9CCCE border with #25292C text. The setting carries the text colour; the border is set here, and darkens to ink on hover. */ .btn--alt, .btn--outline { border-color: var(--k-control-border); } .btn--alt:hover, .btn--outline:hover { border-color: var(--k-ink); } /* -------------------------------------------------------------------------- HAIRLINES One divider weight and colour everywhere: 1px solid #E4E6E7. The design is explicit — no 2px dark rules, no red left-border accents, no decorative dividers. Where a red marker is wanted it is a full-width 4px TOP rule, never a left bar. -------------------------------------------------------------------------- */ .k-hairline { border: 0; border-top: 1px solid var(--k-hairline); margin: 0; } .k-rule-accent { border: 0; border-top: 4px solid var(--k-red); margin: 0; } /* -------------------------------------------------------------------------- LINKS Text links are red, with a 1px bottom border at 40% opacity, darkening to the press red on white. -------------------------------------------------------------------------- */ .k-link { border-bottom: 1px solid rgb(192 19 25 / 0.4); color: var(--k-red-hover); text-decoration: none; } .k-link:hover { border-bottom-color: var(--k-red-press); color: var(--k-red-press); } /* -------------------------------------------------------------------------- FULL-BLEED BANDS STAY SQUARE Radius is 3px on controls and containers, but full-bleed bands and imagery are square. Theme settings apply the radius globally, so it is removed here for anything explicitly marked full-bleed. -------------------------------------------------------------------------- */ .k-fullbleed, .k-fullbleed img { border-radius: 0; } /* ========================================================================== HEADER -------------------------------------------------------------------------- An exception to the "no per-section styling here" rule at the top of this file, and a deliberate one. `sections/header.liquid` is 41.7 KB and carries **26 third-party app injections**. It cannot be rebuilt without losing them, so unlike every other section it will never be replaced — only restyled. Its CSS is therefore permanent, not throwaway, and belongs with the design layer. Structure already matches the comp: 84px bar, inline nav, single-column dropdowns (`nav-columns--count-1`), right-hand icons, right-side drawer. Everything below is presentation. Source: design_handoff_kistler_site_001/Kistler Header.dc.html ========================================================================== */ /* Bar ---------------------------------------------------------------------- */ .header__layout { gap: 28px; max-width: 1440px; padding-inline: 28px; } /* Logo width is set by the header section's own `logo_width` setting (168px), not here. The wrapper is width-constrained with overflow:hidden, so sizing only the clipped the wordmark to "KISTLEI". */ /* Inline nav --------------------------------------------------------------- Comp: 14px / 700 / 0.14em / uppercase / white, with a 2px transparent bottom border that turns red on the active item. The border is always present so the row does not shift when an item becomes active. */ .inline-header-nav a { border-bottom: 2px solid transparent; font-size: var(--k-t-nav-size); font-weight: var(--k-t-nav-weight); letter-spacing: var(--k-t-nav-track); line-height: var(--k-t-nav-lh); text-transform: uppercase; } .inline-header-nav a:hover { color: var(--k-red); } .inline-header-nav .is-active > a, .inline-header-nav [aria-current='page'] { border-bottom-color: var(--k-red); } /* Dropdown panel ----------------------------------------------------------- Comp: white panel, 1px #E4E6E7, 3px radius, min-width 272px, soft shadow. ⚠ The element is `ul.nav-rows`, NOT `.nav-columns`. `.nav-columns` is the MEGA-MENU markup, which the theme only emits while the header has image blocks configured. Those were removed on 2026-09-25 because the design has no mega menu — see REVIEW-design-handoff.md — and the markup changed to a plain dropdown at the same moment, silently killing any CSS aimed at the old class. If these panels ever lose their styling, check this first. */ .header .nav-rows { background-color: #fff !important; border: 1px solid var(--k-hairline); border-radius: 3px; box-shadow: 0 24px 48px rgb(20 23 25 / 0.18); min-width: 272px; padding: 8px; } .header .nav-rows a { border-radius: 3px; color: var(--k-ink); font-size: var(--k-t-nav-size); font-weight: var(--k-t-nav-weight); letter-spacing: var(--k-t-nav-track); line-height: var(--k-t-nav-lh); padding: 10px 12px; } .header .nav-rows a:hover { background-color: var(--k-panel); color: var(--k-red); } /* ========================================================================== HEADER — three fixes from Design's reply, 2026-10-05. Header only. ========================================================================== */ /* A · NAV CENTRED BETWEEN LOGO AND ICONS Comp: a three-part flex row, logo · nav · icons, the nav centred in the space between the outer two. `.header__layout` is already `space-between` with `gap: 28px` and the logo/icons already carry a 170px flex-basis, so the middle column is correct — but the nav shrink-wrapped to 509px and sat at its START, packing against the logo. Measured at 1440: container 964px, nav 521px, nav starting at 236 when centred would be ~469. `.tier-1` is already `display: flex` but computes `justify-content: flex-end`, so main.css's own `center` rule is being overridden somewhere; setting it here, after main.css, is what makes it stick. */ .header--inline-visible.header--inline-logo-left .inline-header-nav, .header--inline-visible.header--inline-logo-left .inline-header-nav > .nav-row, .header--inline-visible.header--inline-logo-left .inline-header-nav .tier-1 { width: 100%; } .header--inline-visible.header--inline-logo-left .inline-header-nav .tier-1 { justify-content: flex-end; } /* Two things were reserving space that is not theirs, found by measuring: 1. The burger's `` keeps reserving 100px inside the menus container even though `.menu-toggle` inside it is display:none above the breakpoint. That 100px sits to the RIGHT of the nav, so the centre it computed was 50px too far left. Hiding the summary alone was not enough — the `
` holds the 100px itself — so the wrapper is collapsed to zero as well. Deliberately NOT `display: none`: `` lives inside it, and although it is position:fixed and unreachable above the breakpoint, collapsing rather than hiding leaves it intact. 2. The nav `ul` carries `margin-left: -12px`, which made sense when the row was packed against the logo and the first link's 10.5px padding needed cancelling. Centred, it is just a 12px skew. */ /* RIGHT-ALIGNED, not centred (Design D2, 2026-10-05g): the nav sits beside the utility icons, so it lands where the burger group sits below the breakpoint and the eye does not have to move. `auto` pushes the whole middle column right; `justify-content: flex-end` above packs the links to its end. This replaces the centring rule from 05b — the two fixes below it still apply, because a reserved 100px burger slot and a -12px ul margin are just as wrong against the right edge as they were against the centre. */ .header--inline-visible.header--inline-logo-left .header__menus-container { margin-inline-start: auto; } .header--inline-visible.header--inline-logo-left .header__menus-container > .main-menu-wrapper { flex: 0 0 0; width: 0; min-width: 0; } .header--inline-visible.header--inline-logo-left .header__menus-container > .main-menu-wrapper > summary { display: none; } .header--inline-visible.header--inline-logo-left .inline-header-nav .tier-1 > ul { margin-left: 0; } /* B · ACTIVE UNDERLINE MATCHES THE TEXT, NOT THE BOX There were TWO red bars. This file drew a `border-bottom` on the link, which spans the whole 63px box including its 10.5px padding either side; main.css draws an `::after` which is already text-width. Design: "the underline matches the text width", so the border goes and the ::after is the single underline. Measured at 1440: box 63px, glyphs 42px, border was painting all 63. 0.75em == the 10.5px padding at the nav's 14px, so the bar lands exactly on the content box. Kept in em so it tracks the font size rather than a frozen pixel. `:last-child` is excluded throughout — that is the red FIND MY ROD button, which is a filled pill and must never take an underline. */ .header .inline-header-nav .tier-1 > ul > li:not(:last-child) > a:hover, .header .inline-header-nav .tier-1 > ul > li:not(:last-child) > a:focus-visible { border-bottom-color: transparent; } .header .inline-header-nav .tier-1 > ul > li:not(:last-child) > a::after { left: 0.75em; /* B2 · THE UNDERLINE FOLLOWS THE TEXT, NOT THE 84px ROW (reported 2026-10-06) main.css pins this bar with `bottom: -4px`, which is 4px under the text only because the theme's link box hugs its text. Block A above gives the link `height: 84px` so the whole tab is hoverable, and `align-items: center` then leaves the text floating in the middle of that box -- so the bar stayed welded to the bottom of the row, 39px below the glyphs. Measured at innerWidth 1400: box 84px top 61 bottom 145, text bottom 110, bar at 149. Half the leftover space is the distance from the box bottom back up to the line box: (100% - 1.4em) / 2, where 1.4em is the declared line-height. Subtracting 4px from that reproduces main.css's own 4px offset against the text, so this restores the theme's intended spacing rather than inventing a new one. In em and %, so it tracks both the font size and any future change to the row height. */ bottom: calc((100% - 1.4em) / 2 - 4px); } .header .inline-header-nav .tier-1 > ul > li:not(:last-child) > a:hover::after, .header .inline-header-nav .tier-1 > ul > li:not(:last-child) > a.expanded::after, .header .inline-header-nav .tier-1 > ul > li:not(:last-child) > a.active::after { width: calc(100% - 1.5em); } /* C · PANEL SEAM — flush with the header, no border inside the dark band The panel carried `border-top: 20px solid transparent` as a hover bridge across the 20px of header that sits below the nav row. The white started flush at the header's bottom edge correctly, but the 1px LEFT and RIGHT borders ran the full border-box height, so they drew as two pale lines inside the dark band — which is what Design saw. The bridge is now a transparent ::before above the panel instead, so no border exists in that strip. `top` gains the same 20px the border used to contribute, which keeps the white edge exactly where it already was. */ .header .inline-header-nav .nav-rows { border-top-width: 0; top: 104px; } .header .inline-header-nav .nav-rows::before { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; } /* Icons -------------------------------------------------------------------- */ .header__icon-list a:hover, .header__icon-list button:hover { color: var(--k-red); } /* Mobile drawer ------------------------------------------------------------ Comp: right-aligned panel, min(420px, 100%), ground #141719 — the darkest of the three dark-band values — over a rgba(20,23,25,0.86) scrim. */ .menu-drawer, .drawer--menu .drawer__content { background-color: #141719; max-width: min(420px, 100%); } .menu-drawer a, .drawer--menu .drawer__content a { color: #fff; } /* Breakpoints -------------------------------------------------------------- The design's own: 1080 / 1024 / 767. Only the two that change the header are expressed here. */ @media (max-width: 767px) { .header__layout { gap: 12px; padding-inline: 20px; } .header .logo--image, .header .logo--image img { width: 88px; } } /* Nav weight and the FIND MY ROD call to action ------------------------------ The theme renders nav links at weight 500 and styles the FIND MY ROD link as a 2px white outline with a 5px radius. Neither comes from a rule this file could find: inspected in the browser, there is no inline style and no match in any readable stylesheet, so the source is a cross-origin app sheet and it uses !important. Hence the !important below — it is matching an existing one, not raising the stakes. ⚠ SELECTOR NOTE. The obvious selector, `a[href*='shop-all-rods']`, is WRONG: six anchors in the header share that href, including the "Shop" nav item and the mega-menu CTA images. Using it turned "Shop" into a red button. The CTA is identified instead as the LAST item of the inline nav's top tier. The real structure is .inline-header-nav > .nav-row.multi-level-nav > .tier-1 > ul > li > a — three levels deeper than it looks, so a direct-child combinator on .inline-header-nav silently matches nothing. This is fragile in one specific way: adding a menu item after "Find my rod" moves the button. The symptom would be the wrong item turning red. There is no setting that puts a class on a menu item, so position is the only stable hook available. */ .header .inline-header-nav .tier-1 > ul > li > a { font-weight: 700; } .header .inline-header-nav .tier-1 > ul > li:last-child > a { background-color: var(--k-red) !important; border: none !important; border-radius: 3px !important; color: #fff !important; font-size: var(--k-t-buttons-size); font-weight: var(--k-t-buttons-weight); letter-spacing: var(--k-t-buttons-track); line-height: var(--k-t-buttons-lh); min-height: 44px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; padding: 0 18px !important; text-transform: uppercase; } /* Comp hover: inverts to white ground with ink text. */ .header .inline-header-nav .tier-1 > ul > li:last-child > a:hover { background-color: #fff !important; color: var(--k-ink) !important; } /* -------------------------------------------------------------------------- READING MEASURE The design fixes the page at 1440px but never states a measure for body copy. Left unconstrained, prose in a rich-text band runs the full 1360px — about 200 characters a line, which is unreadable. 720px gives roughly 75 characters at 16px, which is the conventional range. It is a judgement, not a specified value: the only measure in the comps is the 620px subpage-header intro. Change the one number if the design says otherwise. ⚠ The section class is `cc-rich-text`, not `.rich-text`. It already ships a wrapper called `.reading-width` which, despite the name, is unconstrained (1360px on a 1440 page). Constraining that wrapper is the theme's own intended hook — do not add a max-width to the paragraphs instead. -------------------------------------------------------------------------- */ .cc-rich-text .reading-width { max-width: 72rem; } /* THE SAME UNCONSTRAINED WRAPPER, ON THE ARTICLE PAGE — reported 2026-10-06 as "need to add some paddings on the News inner page". It is the identical fault the block above describes, in the one other place the theme uses this wrapper, and it was missed when that fix went in. Measured on /blogs/kistler-news/trey-kistlers-2026-update at 1440: `.article.reading-width` computes `max-width: none` and renders 1360px, so the body copy sets the full width of the page with only the 40px page gutter either side. `.reading-width` in main.css carries `margin-inline: auto` and nothing else, so it centres a column it never actually narrows. 760px, not 72rem. The first pass used the rich-text wrapper's 72rem (720px); Design 06c F-25 corrected it to match `Kistler Article.dc.html`, which sets the article at `max-width: 760px`. That is also `kistler-page`'s own default measure, so the article, the 2026 page sections and the comp now all agree. The rich-text 72rem above is a different wrapper and deliberately stays as it is. */ .article.reading-width { max-width: 760px; } /* -------------------------------------------------------------------------- EMPTY STATE · TRUST STRIP Two of the design's eleven shared components. Both are snippets, so their CSS lives here rather than in a section's {% style %} block. -------------------------------------------------------------------------- */ /* Empty state — hairline box, centred, one button. Spec: padding 56px 40px, 20px/900 uppercase title, 15px/1.7 body max 440px. */ .k-empty { border: 1px solid var(--k-hairline); border-radius: 3px; padding: 56px 40px; text-align: center; } .k-empty__title { color: var(--k-ink); font-size: var(--k-t-titles-size); font-weight: var(--k-t-titles-weight); letter-spacing: var(--k-t-titles-track); line-height: var(--k-t-titles-lh); margin: 0; text-transform: uppercase; } .k-empty__body { color: var(--k-body); font-size: var(--k-t-bodys-size); font-weight: var(--k-t-bodys-weight); letter-spacing: var(--k-t-bodys-track); line-height: var(--k-t-bodys-lh); margin: 12px auto 24px; max-width: 440px; } /* Trust strip — card grid. Tracks follow the card count, capped at 4, so a set with fewer cards does not leave an empty column. */ .k-trust__grid { display: grid; gap: 1px; background-color: var(--k-hairline); border: 1px solid var(--k-hairline); border-radius: 3px; overflow: hidden; } @media (min-width: 768px) { .k-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1025px) { .k-trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .k-trust__card { background-color: #fff; padding: 28px 26px; } .k-trust__title { color: var(--k-ink); font-size: var(--k-t-titles-size); font-weight: var(--k-t-titles-weight); letter-spacing: var(--k-t-titles-track); line-height: var(--k-t-titles-lh); margin: 0 0 10px; text-transform: uppercase; } .k-trust__body { color: var(--k-body); font-size: var(--k-t-bodys-size); font-weight: var(--k-t-bodys-weight); letter-spacing: var(--k-t-bodys-track); line-height: var(--k-t-bodys-lh); margin: 0; } /* Product floor — promise block beside the four fact tiles. CLAUDE.md: "The always-on product floor owns the trust claims." The tiles themselves are the Trust Strip's grid, so they need no styling here. */ .k-floor__promise { margin-bottom: 28px; max-width: 62rem; } .k-floor__body { color: var(--k-body); font-size: var(--k-t-body-size); font-weight: var(--k-t-body-weight); letter-spacing: var(--k-t-body-track); line-height: var(--k-t-body-lh); margin: 12px 0 14px; } /* ========================================================================== HEADER ALIGNMENT (site-wide, 2026-09-26) sections/header.liquid lines 94-95 nest two wrappers that BOTH carry .header__layout, and the inner one also carries .container:
<- max-width:1440, padding:0 28px
<- max-width:1440, padding:0 28px Inside a
that already has 40px padding, those insets compound. The header's content ran 68 -> 1452 at a 1600px viewport while every other section ran 80 -> 1520, so the navigation sat ~68px narrower than the page and was flush left rather than centred. This is PRE-EXISTING: the same offset is on the live theme and on untouched product templates. It is not a side effect of the 2026 rod work. Fix: let the OUTER wrapper fill the header, and make the INNER one the single centred constraint. The outer keeps its ::before, which paints the sticky header background and is sized from --gutter, so leaving it full width is what lets that background span the whole viewport (0 -> 1600) instead of stopping short. The inner's duplicate ::before is switched off so the two backgrounds cannot stack. The proper fix is to delete the duplicated wrapper in header.liquid. That is a core Clean Canvas file and the element carries the sticky background, so it is done here in CSS instead - reversible, and no core file to re-merge on a theme update. ========================================================================== */ .header > .header__layout { max-width: none; width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .header .header__layout .header__layout.container { max-width: 1440px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* One header background, not two stacked. */ .header .header__layout .header__layout.container::before { display: none; } /* -------------------------------------------------------------------------- HEADER: horizontal overflow on narrow screens The header row is a flex container with `gap: 12px` and three children that all refuse to shrink: .header__menus-container flex: 0 0 88px .logo flex: 0 0 159px .header-icons flex: 0 0 88px 88 + 159 + 88 = 335px of children, plus two 12px gaps = 359px required. At a 375px viewport the row is 335px wide, so the header overflowed by exactly 24px and the whole page scrolled sideways. The logo is the only one of the three that can give ground without losing a tap target, so it is allowed to shrink and its image told to scale with it. `flex-shrink` only acts when there is not enough room, so wider screens are untouched and the logo keeps its full 159px. -------------------------------------------------------------------------- */ /* Scoped to narrow screens ONLY. Left unscoped this also shrank the DESKTOP logo, from its deliberate 170px down to 128px -- undoing the earlier fix for the logo being clipped to "KISTLEI". Desktop has room and must keep the full 170px. */ @media (max-width: 767px) { .header .logo { flex-shrink: 1; min-width: 0; } .header .logo img { max-width: 100%; height: auto; } } /* -------------------------------------------------------------------------- NAV: the About dropdown opened an empty tray on THIS theme CORRECTION to an earlier note here: the rule in main.css .nav-row ul.nav-columns li:not(.nav-ctas__cta) { display: none; } is NOT a bug. It is deliberate. It hides the text links in a mega menu so that only promo image blocks (.nav-ctas__cta) show, and on the LIVE theme that is exactly what happens — About shows three promo cards: "Apply to Team Kistler", "Tour The Kistler Factory" and "Testimonials". Verified by opening the live theme directly. The tray is empty on THIS theme because this theme's header has no promo blocks configured at all (block_order is empty), so the rule hides everything and nothing is left to take its place. Why About is a mega menu in the first place: header.liquid sets has_mega_drop_down when `link.levels > 1`, and the menu nests a redundant "About Us" item, whose URL is identical to About's, above the five real links. That extra level is the trigger. This rule un-hides the text links so the dropdown is usable here. It is a STOPGAP, not the fix — the design does not use mega menus at all, and the panel is still full width because a single shared #mega-menu-tier-2 sits at nav-row level rather than inside the About
  • , so it cannot be anchored or narrowed per item with CSS. The real fix is a menu change (flatten the About branch, or point this theme at the flat "new-main-menu" that already exists), which is store data shared with the live site and therefore Tim's call. See README. -------------------------------------------------------------------------- */ .nav-row ul.nav-columns li:not(.nav-ctas__cta) { display: none; } which hides every TEXT link in a mega menu, leaving only promo image blocks (.nav-ctas__cta). The header has no promo blocks configured at all (block_order is empty), so nothing was left to show. "About" is the only item that becomes a mega menu — header.liquid sets has_mega_drop_down when `link.levels > 1`, and About is the one menu item with a third level. So hovering About opened a full-width panel containing six links that were all display:none, plus the social/phone strip from the contact_info_in_mega setting. An empty dark tray. Verified 0x0 on those links both with and without the header alignment fix, so this is pre-existing and not a side effect of that work. Shop and Media are NOT mega menus and are unaffected by this rule. -------------------------------------------------------------------------- */ .nav-row ul.nav-columns li:not(.nav-ctas__cta) { display: block; } /* -------------------------------------------------------------------------- BREADCRUMBS Design: Home / Saltwater Rods / Salt Series container padding 20px 0, 13px/500, #686E72, 10px gap separator a literal "/" — the theme uses a chevron icon current #25292C, 700 The collection level is not added here. `snippets/breadcrumbs.liquid` already emits it on a product page whenever Shopify provides a `collection` — which it does when the visitor arrives through a collection (/collections/saltwater/products/...). Landing on a bare /products/ URL has no collection to name, which is why it shows Home / Product there. Only the prev/next product arrows keep their icons; the separator chevrons inside the list are replaced. -------------------------------------------------------------------------- */ .breadcrumbs { padding: 20px 0; color: var(--k-meta); font-size: var(--k-t-meta-size); font-weight: var(--k-t-meta-weight); letter-spacing: var(--k-t-meta-track); line-height: var(--k-t-meta-lh); } .breadcrumbs .breadcrumbs-list { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .breadcrumbs .breadcrumbs-list > li { display: flex; align-items: center; gap: 10px; } /* The chevron between crumbs, replaced with the design's slash. */ .breadcrumbs .breadcrumbs-list .icon { display: none; } .breadcrumbs .breadcrumbs-list > li:not(:last-child)::after { content: '/'; color: var(--k-meta); font-weight: 500; } .breadcrumbs .breadcrumbs-list__link { color: var(--k-meta); text-decoration: none; } .breadcrumbs .breadcrumbs-list__link:hover { color: var(--k-ink); } /* The page you are on. */ .breadcrumbs .breadcrumbs-list > li:last-child { color: var(--k-ink); font-weight: 700; } /* ========================================================================== FOOTER MUST SIT FLUSH — PROMPT-footer-fixes-round2 item 3 Alchemy gives every section a bottom margin (70px at desktop). On the LAST section of a page that margin has nothing below it to separate, so it collapses out through
    and pushes the footer down — a white strip between the last band and the dark footer. It showed on the home page, where the newsletter is last; the PDP escaped it only because the product floor is one of ours and carries no bottom margin. Zeroing it on the last section of any template fixes it everywhere at once rather than per page. The section wrapper AND its first child are covered because the margin sits on the inner `.section` element, not the `.shopify-section` wrapper. ========================================================================== */ main .main-content > .shopify-section:last-child, main .main-content > .shopify-section:last-child > * { margin-bottom: 0; } /* ── STAT BAR ─────────────────────────────────────────────────────────────────── ONE component, two surfaces: the homepage stat band and the product/collection trust strip. Design asked for a single shared snippet (trust-strip-go round) so the two cannot drift apart again — the homepage bar had already lost the 1080 step. Markup: snippets/kistler-stat-bar.liquid. Do not restyle either band locally. */ .k-statbar { background: #fff; border-top: 1px solid var(--k-hairline, #E4E6E7); border-bottom: 1px solid var(--k-hairline, #E4E6E7); padding: 48px 0 50px; } /* Geometry comes from the theme's own `.section--page-width`, which the markup also carries — NOT from a copy of it here. That class changes its inner padding by breakpoint (20px at 1024, 0 at 1440); a hardcoded 20px matched one width and missed the other, putting the first figure 20px off the product grid (Design, stat-bar-fixes round). Borrow the rule, never restate it. */ .k-statbar__pad { margin: 0 auto; } /* `start`, not `end`: only some columns carry a Meta line, and `end` dropped the figures of the ones that didn't. */ .k-statbar__grid { display: grid; grid-template-columns: repeat(var(--k-statbar-cols, 4), minmax(0, 1fr)); /* Column gap only. `gap: 32px` applied to the ROWS as well, and the rows here are the figure, the label and the meta line — so the space under each figure was the 32px row gap PLUS the label's own 14px margin, 46px in all, which is what read as too loose (user, 2026-10-28). The label's margin is now the single source of that spacing. */ gap: 0 32px; align-items: start; /* Three shared rows — figure, label, meta — so every card's label sits on the same line even when one figure wraps. Replaces the fixed figure height, which held the labels level but let a wrapped figure overflow its own box: at 1280 "Bend Strong" needs ~275px of track and gets ~243px, so its second line spilled ~6px above the figures beside it (reported 2026-10-16). */ grid-template-rows: auto auto auto; } /* The rule belongs to the column it precedes, so the row cannot end with a stray divider. */ .k-statbar__item { display: grid; grid-template-rows: subgrid; grid-row: span 3; position: relative; text-align: center; /* (2026-10-28, user) */ } /* The divider is drawn at the MIDDLE of the 32px gap rather than on the column's own left edge. The old `border-left` + `padding-left:32px` kept the spacing even only because the text was flush left; centred, that padding pushed every column but the first 32px off its own track. Absolutely positioned, so it never becomes a grid item and cannot disturb the subgrid rows. */ .k-statbar__item + .k-statbar__item::before { content: ''; position: absolute; left: -16px; top: 0; bottom: 0; width: 1px; background: var(--k-hairline, #E4E6E7); } /* EVERY figure gets the same line box, so a 46px word figure cannot lift its label above the 52px numerals beside it. The height follows the token, so it scales with the figure at each breakpoint on its own. */ .k-statbar__fig { display: flex; align-items: flex-end; justify-content: center; min-height: calc(var(--k-t-stat-size) * 0.9); color: var(--k-ink, #25292C); font-size: var(--k-t-stat-size); font-weight: var(--k-t-stat-weight); letter-spacing: var(--k-t-stat-track); line-height: 0.9; /* EVERY figure, not just the word ones: "30 days" was rendering mixed case beside an uppercase "ON FILE" and "EARN" (Design, stat-bar-fixes round). */ text-transform: uppercase; } /* Words are set a step down: at 52px "Bend Strong" outweighed the figures beside it. */ .k-statbar__fig--word { font-size: var(--k-t-statword-size); } .k-statbar__label { /* (2026-10-28) Was Label (11px) — the smallest step in the scale, and under a 52px figure it read as a footnote rather than as the thing the figure is counting. Now Meta size (13px) while keeping the Label weight and tracking, so it is still an uppercase label, just legible. Shared with the product and collection trust strips, which get the same lift. */ margin-top: 20px; color: var(--k-ink-2, #4A5054); font-size: 1.5rem; font-weight: var(--k-t-label-weight); letter-spacing: var(--k-t-label-track); line-height: var(--k-t-label-lh); text-transform: uppercase; } .k-statbar__meta { margin: 8px 0 0; max-width: 34ch; color: var(--k-meta, #686E72); font-size: var(--k-t-meta-size); line-height: 1.5; } .k-statbar__item[data-k-stat-pending] { visibility: hidden; } /* 2-up at 1080 — the comp's step. Four 52px figures in ~188px columns wrapped "Bend Strong" onto two lines. */ @media (max-width: 1080px) { .k-statbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } /* At 2-up the rule belongs between the PAIR, not before every item — item 3 starts a new band, so the desktop selector would draw a rule down the left edge of the second row. Turned off here and re-armed on the right-hand item of each pair. */ .k-statbar__item + .k-statbar__item::before { content: none; } .k-statbar__item:nth-child(2n)::before { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 1px; background: var(--k-hairline, #E4E6E7); } /* The row gap used to do this, but it padded out every figure as well. */ .k-statbar__item:nth-child(n + 3) { margin-top: 28px; } } /* 2x2 at 767 (Design, 2026-09-30 item 5). It was 1-up stacked, which made the four-item bar four screens tall on a phone. The vertical hairline treatment is the same as the 1080 step, and a horizontal rule separates the two rows. `grid-template-columns` is restated here rather than left to inherit — that is the rule for this component, because the base declaration reads `--k-statbar-cols` from an inline style on the element, which no media query can override. Every breakpoint states it. */ @media (max-width: 767px) { .k-statbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } .k-statbar__item + .k-statbar__item::before { content: none; } .k-statbar__item:nth-child(2n)::before { content: ''; position: absolute; left: -10px; top: 0; bottom: 0; width: 1px; background: var(--k-hairline, #E4E6E7); } /* The second row, on a four-item bar. `margin-top` replaces the row gap that used to sit above the rule; the padding below it is unchanged. */ .k-statbar__item:nth-child(n + 3) { margin-top: 24px; border-top: 1px solid var(--k-hairline, #E4E6E7); padding-top: 24px; } } /* (10-02c §1.6) Promo bar. announcement.css sets `.announcement a { color: inherit }` and loads after this file, so setting the anchor directly loses. Set it on the container instead and let `inherit` pick ink up. */ slide-show.announcement, .announcement-bar, [class*="announcement"] { color: var(--k-ink, #25292C); } /* (10-02c §1.8) --btn-border-radius resolves to 4px despite the Customizer setting being 3. Pin it to the house value once, rather than per button. */ :root { --btn-border-radius: 3px; } /* ============================================================================ (10-02e §1) Heading ramp — fixed steps, by tag. Alchemy derives h1..h6 from --heading-base-size x --heading-type-scale and then multiplies by a viewport term (--fluid-*), which is why headings measured on fractional sizes (33.4 / 26.8 / 21.6) and could never land on the house scale. Pinning the --h*-font-size tokens removes the fluid multiplier; the drops below are the house breakpoints, stated explicitly. --h0-font-size is deliberately NOT touched: the Display hero stays 132 / 88. ========================================================================== */ :root { --h1-font-size: 5.6rem; /* H2 56 — the subpage band owns the page H1 */ --h2-font-size: 5.6rem; /* H2 56 */ --h3-font-size: 4.0rem; /* H3 40 */ --h4-font-size: 2.2rem; /* Title 22 */ --h5-font-size: 1.9rem; /* Title S 19 */ --h6-font-size: 1.2rem; /* Eyebrow 12 */ } h6, .h6 { font-weight: 700; letter-spacing: 0.18em; } @media (max-width: 1024px) { :root { --h1-font-size: 4.4rem; } /* 44 */ } @media (max-width: 767px) { :root { --h1-font-size: 3.6rem; /* 36 */ --h2-font-size: 3.6rem; /* 36 */ --h3-font-size: 3.6rem; /* 36 */ } } /* (10-02e §1) Card and block titles must not ride the h2/h3 steps up. Pinned to Title 22 at every width, per Design's note. NOT .card__title: it renders at Body 16 and is not h3-styled, so pinning it to 22 pushed it UP by 6px. Left alone. */ .card__heading, .section__block--heading, h2.h3.card__heading, .multi-column .card__heading { font-size: 2.2rem; } /* (10-02k §3) Rich-text band headings come back up to H3 40 / 36. ── WHAT ACTUALLY CAUSED THE 22 ───────────────────────────────────────────── The `.h2` utility was never broken: main.css has `h2, .h2 { font-size: var(--h2-font-size) }` and that token is 5.6rem, so `.h2` reads the ramp correctly. The 22 came from the pin directly above — `.section__block--heading` was flattened to 2.2rem by 10-02e §1 ("block titles must not ride the h2/h3 steps up"). That pin caught the warranty and story bands along with the card titles it was aimed at. So this narrows the pin rather than touching the utility. Scoped to `.cc-rich-text` (the rich-text section's own class) and to blocks the merchant set to h2, which is what the design screens use. Newsletter, pop-up and image-banner bands keep their 22 — they are chrome, not page content, and a 40px heading in a pop-up overlay is out of proportion. */ .cc-rich-text .section__block--heading.h2 { font-size: 4.0rem; } @media (max-width: 767px) { .cc-rich-text .section__block--heading.h2 { font-size: 3.6rem; } } /* (10-02f §1) .section__subheading is an eyebrow, not a title — Design's call. Eyebrow 12 / 700 / .18, uppercase, red. */ .section__subheading { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--k-red, #ED1C24); } /* (10-02j §2.7) Page-body headings sit BELOW the subpage band's H1. `.rte` is page-record content, where an

    is a body heading, not a section heading. Without this they ride the new h2 step to 56 and compete with the band. Scoped to .rte only — section headings are untouched. */ .rte h2, .rte .h2 { font-size: 4.0rem; } @media (max-width: 767px) { .rte h2, .rte .h2 { font-size: 3.6rem; } } /* ── Cart drawer: quantity stepper ─────────────────────────────────────────── The same inherited bug already fixed on the rod PDP, in the one place it was still unscoped. `main.css` carries, from the old dark theme and not from stock Clean Canvas: div.qty-input { background-color: #1e1e1e !important; width: 100% !important; } That was fine when `input_text_color` was #f8f8f8. The 2026 palette sets it to #25292C, so in the drawer the number and the +/- buttons sat at **1.14:1** on a near-black slab — present, clickable, and invisible. Measured 2026-10-02. It bites here hardest because `cart_type` is `drawer`: this, not the cart page, is what opens on add-to-cart. `!important` is the only way to outrank `!important` in main.css. Scoped to `cart-drawer`, so the PDP, the cart page and everything else are untouched. The width is deliberately left alone — only the invisibility is the defect. */ cart-drawer div.qty-input { background-color: #fff !important; border: 1px solid var(--k-control-border); border-radius: 3px; } cart-drawer div.qty-input .qty-input__input, cart-drawer div.qty-input .qty-input__btn { background: transparent !important; color: var(--k-ink); } /* ── Rich-text tables: scroll, never clip ─────────────────────────────────── Design 10-03b §6. Page and article bodies are raw `page.content` / `article.content` — whatever was pasted into the admin, including tables sized in pixels or forced to 100%. Four reprinted TackleTour reviews and one tournament post carry tables 555–640px wide. At 375 they do not scroll the page; they are **clipped**, so the right-hand column is simply cut off and the reader never knows. The Shipping page had the same problem with three 551px tables. `display:block` is what makes a table scrollable — it stops the table box stretching to its content and lets the overflow apply. The trade is that the table no longer fills the column when it is narrower than the text, which is the right trade for data nobody can otherwise read. Deliberately global to `.rte` rather than per-article: it fixes every pasted table, including ones nobody has found yet, and leaves `page.content` raw. */ .rte table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Header nav row — Design 10-03j / 10-03k ------------------------------------ Four values were out against `Kistler Header.dc.html`, measured at 1400: tracking (normal vs .14em), item gap (none vs 22px), row height (58 vs 84) and the hover rule (absent). ⚠ The tracking is set HERE and not on `--k-t-nav-track`. That token is 0, which is correct — it also feeds `.header .nav-rows a`, the DROPDOWN links, which the comp sets at 14/500 with no tracking. Moving the token to .14em would have fixed the top row and quietly wrecked every dropdown. Different type, same name. The 84px comes from the comp's bar (`data-r="hdr"`, height:84px) with the links filling it. No height is set on `.header__layout`: it is `align-items:stretch`, so the links growing to 84 take the bar with them, and the mobile header — where `.inline-header-nav` is not shown — keeps its own height untouched. */ /* The row. The comp's bar is `data-r="hdr"`, height:84px, align-items:center. Two false starts worth recording. The row first measured 111 with the links already at 84: the extra 27px was an anonymous line box, because `.header__menus-container` is a block that holds the nav AND the mobile drawer toggle, an empty `inline-block` that sits on a text baseline. Making that container `display:flex` removed the line box but collapsed the row to 58 — the nav stopped stretching and the 84px links overflowed a 44px parent. So the height is declared rather than inferred, which is what the comp does anyway. The min-height is on the inner container and only above the breakpoint where the inline nav exists, so the mobile header is untouched. */ @media (min-width: 1200px) { .header .container.header__layout { align-items: center; min-height: 84px; } .header .header__menus-container { display: flex; align-items: center; align-self: stretch; } .header .inline-header-nav, .header .inline-header-nav > .nav-row.multi-level-nav, .header .inline-header-nav .tier-1 { height: 100%; } } .header .inline-header-nav .tier-1 > ul { display: flex; align-items: stretch; gap: 22px; } .header .inline-header-nav .tier-1 > ul > li > a { display: flex; align-items: center; height: 84px; letter-spacing: 0.14em; } /* Comp: `[data-r="navitem"]:hover [data-r="navlink"] { border-bottom-color: #ED1C24 }`. The 2px transparent border is already declared above, so the row does not shift. */ .header .inline-header-nav .tier-1 > ul > li > a:hover, .header .inline-header-nav .tier-1 > ul > li > a:focus-visible { border-bottom-color: var(--k-red); } /* The red CTA is the last item and must not inherit the 84px row: the comp draws it as a 44px pill centred in the bar, not a full-height tab. */ .header .inline-header-nav .tier-1 > ul > li:last-child > a { height: auto !important; letter-spacing: var(--k-t-buttons-track); } /* -------------------------------------------------------------------------- HEADER GUARDS — Design brief 2026-10-04 §B3. Two guards, nothing else. GUARD 1 · a nav label may never break mid-word. Without this the links render as SHO/P, ABOU/T, WARRANT/Y whenever the row is narrower than the text. It is in the comp and was simply missing here. GUARD 2 · the burger takes over below 1200px. Below the breakpoint the inline nav is hidden and the burger is shown, whatever the theme's own fit-detection decided. RAISED FROM 1024 TO 1200 on 2026-10-05 (Design D2): the five-item menu needs 758px of corridor for 28px clearance and 1024 only offers 614. Break-even measured at 1168. The other side of the breakpoint — making the nav APPEAR above 1200 — is handled by snippets/kistler-header-nav.liquid, which toggles `header--inline-visible` from the same width. This block and that snippet are two halves of one rule and must be changed together: `max-width: 1199.98px` here, `min-width: 1200px` there. Lives here, not in header.liquid, because this file is ours and header.liquid carries 12 Wholesale Hub marker blocks. -------------------------------------------------------------------------- */ /* Guard 1 */ .header .inline-header-nav .tier-1 > ul, .header .inline-header-nav .tier-1 > ul > li > a { white-space: nowrap; } /* -------------------------------------------------------------------------- KEYBOARD: open the dropdown on focus, not only on hover. Design brief 2026-10-04 §B2.3 — "the comp opens on :hover AND :focus-within". main.css opens the panel with: .nav-row .contains-children:hover .nav-rows, .nav-row .contains-children [aria-expanded=true] + .nav-rows so a pointer works and a Tab key does not. Measured 2026-10-05: :focus-within matched on all four top-level items while the panel stayed hidden, which left all 25 child links unreachable without a mouse. Same three declarations as the hover rule, no transition override, so focus and hover open identically. One extra class on the front for specificity; this file also loads after main.css. -------------------------------------------------------------------------- */ .header .nav-row .contains-children:focus-within .nav-rows { visibility: visible; max-height: 75vh; opacity: 1; } /* Guard 2 — the extra .header on the toggle selector beats `.header--inline-visible .menu-toggle { display: none }` on specificity, so no !important is needed. */ @media (max-width: 1199.98px) { .header .inline-header-nav { display: none; } .header.header--inline-visible .menu-toggle { display: flex; } } /* Dropdown links — the comp's own numbers: 11px 22px, and #C01319 on hover, which is k-red-hover, not k-red. MIXED CASE (Design 05r, released from the hold). `.inline-header-nav a` sets `text-transform: uppercase` for the TOP-LEVEL row, and the panel links are its descendants, so they were being uppercased too — "ALL FISHING RODS" where the comp reads "All Fishing Rods". The comp sets the panel at Menu 14/500 with no tracking, so the three type properties are restated here as well; the top-level row is untouched and stays uppercase. Values are literal because there is no `--k-t-menu-*` token family — `--k-t-nav-*` is the top-level row's 14/700/.14em, which is a different type at the same name. */ .header .nav-rows a { padding: 11px 22px; font-size: 14px; font-weight: 500; letter-spacing: normal; text-transform: none; } .header .nav-rows a:hover { color: var(--k-red-hover); } /* ============================================================================ (10-05d §2) Announcement reviews strip — "Trusted by anglers · N five-star reviews". Alchemy renders it in the announcement bar's own type: sentence case, ~12px regular, on white. The house style is the Eyebrow 12 band from Kistler Promo Bar.dc.html. Scoped to .cc-announcement, which is the section's own wrapper class, so nothing else on the page moves. font-family is restated on the element because Alchemy's announcement type tokens win otherwise. The two-class selector also beats the section's own {%- style -%} block, which sets .announcement__text font-size inline in the body and would otherwise win on order. The COPY is untouched: it stays the merchant's text setting, token and all. Uppercase is CSS, so the setting reads as written in the Customizer. ========================================================================== */ .cc-announcement announcement-bar { background: var(--k-band, #F2F3F3); border-bottom: 1px solid var(--k-hairline, #E4E6E7); } .cc-announcement .announcement__slide > figure { display: flex; align-items: center; justify-content: center; min-height: 40px; box-sizing: border-box; padding: 8px 20px; } .cc-announcement .announcement__text { font-family: 'Barlow', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--k-ink, #25292C); line-height: 1.2; } /* Stars and sentence on one row at the comp's 14px gap. The sentence is a bare text node beside the stars span, so it becomes an anonymous flex item and the gap applies to it. Wraps rather than overflowing on the narrowest phones; 8px is the row gap once it does. */ .cc-announcement .announcement__text > a { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; } /* The stars already carry these values from a