/* ══════════════════════════════════ BOILERPLATE CSS — auto-prepended by assembler Hero slideshow, product card swatches, secondary image, dropdown keyboard state, announcement carousel STYLE TOKENS — set these in :root via theme.liquid to vary per theme: --hero-height: 100vh | 85vh | 70vh --hero-text-align: flex-start | center | flex-end (horizontal) --hero-text-valign: flex-end | center (vertical) --hero-content-max-width: 560px | 680px | 100% --hero-heading-size: clamp(2.5rem, 5vw, 4rem) --hero-heading-weight: 400 | 600 | 700 --hero-heading-transform: none | uppercase --hero-heading-spacing: 0.02em | 0.08em | 0.15em --btn-radius: 100px | 4px | 0px --btn-transform: none | uppercase --btn-letter-spacing: 0 | 0.1em | 0.15em --nav-layout: single-row | stacked --logo-size: 1.4rem --logo-weight: 400 | 500 | 700 --logo-spacing: 0.25em | 0.15em | 0.05em --logo-transform: uppercase | none ══════════════════════════════════ */ /* ── HORIZONTAL OVERFLOW CATCH — generation-wide ── AI sections occasionally include fixed-width grids, wide tables (e.g. a plant-nursery care chart with 4 columns × content), or oversized SVGs that exceed the viewport on narrow screens. Without this rule, the whole page scrolls horizontally — the bug looks like the page is "broken" even though only one section overflows. `overflow-x: clip` on body prevents the page-wide scroll without breaking sticky positioning the way `overflow-x: hidden` would. */ html, body { overflow-x: clip; } /* ── ANTI-OVERLAP CATCH — generation-wide ── AI's sticky/fixed headers can clip the top of the first content section on initial render or near scroll-y = 0 (iframe contexts especially). Defensive measures: 1. scroll-padding-top on so anchor jumps don't land under the header 2. scroll-margin-top on every section so #section-anchor jumps land below header 3. min-padding-top on first content section's grid-row-1 cells (AI sections that use grid layouts where row 1 sits flush with header). Uses :where() so AI's intentional padding wins on specificity. */ :root { --header-h: 80px; } html { scroll-padding-top: var(--header-h, 80px); } body > .shopify-section { scroll-margin-top: var(--header-h, 80px); } body > :where(.shopify-section:not(.section-header):not(.section-announcement-bar)):first-of-type > section, body > :where(.shopify-section:not(.section-header):not(.section-announcement-bar)):first-of-type > div { /* AI sections inherit a safe minimum top padding when they don't define one. :where() means specificity is 0 — any AI rule with a real selector wins. */ padding-top: 1.5rem; } /* ── TAP-TARGET FLOOR — generation-wide ── A link that is a flex or grid item gets BLOCKIFIED to display: block, so a footer legal link counts as a standalone control while still being only as tall as its 11px text line — 18px, under the 24px a thumb needs. Same for the header wordmark (15px) and for a form field the AI left unstyled, which falls back to the browser's ~19px default. The class names on these elements are AI-authored and differ every generation (.f-bottom .right, .foot__bot nav, .head-inner), so this keys on structure and never on a class. Scoped to site chrome so editorial links in body copy are untouched — and min-width/min-height are ignored outright on a link that is still inline, so body copy is doubly safe. WHY min-height AND NOT the padding + equal-negative-margin trick used by .breadcrumbs__link: that pair is only layout-neutral when both halves land. Breadcrumb markup is ours, so nothing can separate them. Here the markup is the AI's, and it separates them two ways — a more specific AI rule can override the padding alone, and (measured on halcyon's mobile nav) an item whose cross size is set by its flex container absorbs the padding into its border box entirely. Either way the negative margin is left uncompensated and STACKS down a column: halcyon's mobile nav links each drifted up 6px more than the last, 72px by the bottom of the panel. min-height cannot come apart, and it grows a box only to the floor and never past it. Mobile only, at the 768px breakpoint this file already uses most: the floor is a touch concern, and it keeps the 1280px desktop render byte-identical. Verified against the 390px TINY-TAP check in research/handauth-runs/2026-08-27-ab-opus5/shoot-mobile.mjs. */ @media (max-width: 768px) { :is(header, footer, nav, address) a { min-height: 24px; min-width: 24px; /* min-height alone grows the box DOWNWARD from the text, which drops the link out of alignment with whatever it sits beside — measured on foldfathom, the header wordmark rose 4.4px off the icon row next to it. align-content re-centres the line box in the space the floor added. It does nothing at all when the floor is inert, it does not change the element's display type (so an anchor holding an icon plus a label is never re-flowed into flex items), and a browser too old to support it on a block container simply ignores it and lands back on the 4.4px offset rather than breaking. */ align-content: center; } form :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 24px; } } /* ── ACCESSIBILITY UTILITIES ── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── HERO SLIDESHOW ── */ .hero--slideshow { position: relative; min-height: var(--hero-height, 100vh); overflow: hidden; } .hero__slides { position: relative; width: 100%; height: var(--hero-height, 100vh); } .hero__slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.8s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), visibility 0s 0.8s; display: flex; align-items: var(--hero-text-valign, flex-end); justify-content: var(--hero-text-align, flex-start); pointer-events: none; } .hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.8s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), visibility 0s 0s; pointer-events: auto; z-index: 1; } /* Content fades out faster than background to prevent text overlap during crossfade */ .hero__slide .hero__slide-content { transition: opacity 0.3s ease; } .hero__slide:not(.is-active) .hero__slide-content { opacity: 0; } .hero__slide-media { position: absolute; inset: 0; } .hero__slide-image { width: 100%; height: 100%; object-fit: cover; } /* Video hero — hides static image when video is present */ .hero__slide-video { position: absolute; inset: 0; z-index: 1; } .hero__slide-video + .hero__slide-image--fallback { /* Fallback image hidden when video loads, shown if video fails */ } @media (max-width: 768px) { /* Optionally serve image-only on mobile to save bandwidth */ /* .hero__slide-video { display: none; } */ } .hero__slide-placeholder { width: 100%; height: 100%; background: var(--color-surface-alt, #f0f0f0); } .hero__slide-content { position: relative; z-index: 1; max-width: var(--hero-content-max-width, 560px); padding: 3rem 3rem 4.5rem; /* Use flexbox for reliable alignment of all children (heading, subheading, buttons). text-align alone fails because block children with max-width don't honor it. */ display: flex; flex-direction: column; align-items: var(--hero-text-align, flex-start); text-align: var(--hero-text-css-align, left); } .hero__overlay { position: absolute; inset: 0; /* Overlay ensures text readability over any hero image. Top strip always dark for nav. Base dim for text legibility. */ background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 20%), linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 45%), rgba(0,0,0,0.15); } /* Stacked headers have their own opaque cream background covering ~130px at the top. The overlay's top-dark band + base 15% dim create a visible edge where the opaque nav ends. For stacked layouts: drop top gradient AND base dim entirely — text readability is carried by the bottom gradient + the text-shadow on .hero__heading/subheading/eyebrow. */ body:has(.site-header[data-layout="stacked"]) .hero__overlay { background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 45%); } /* Hero text readability + typography override */ .hero--slideshow .hero__heading, .hero--slideshow .hero__subheading, .hero--slideshow .hero__eyebrow { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); } .hero__heading { font-family: var(--font-heading, serif) !important; font-style: normal !important; font-weight: var(--hero-heading-weight, 400) !important; /* --hero-heading-size is already a full clamp() value from the preset, e.g. clamp(2.5rem, 5vw, 4rem) — use it directly, don't nest in another clamp */ font-size: var(--hero-heading-size, clamp(2rem, 4vw, 3.2rem)) !important; letter-spacing: var(--hero-heading-spacing, 0.02em); text-transform: var(--hero-heading-transform, none); line-height: 1.1; margin: 0 0 0.4rem; } .hero__subheading { font-size: clamp(0.75rem, 1vw, 0.9rem); opacity: 0.8; max-width: 38ch; line-height: 1.5; margin: 0 0 1rem; } .hero__eyebrow { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 0.5rem; } /* Hero buttons — compact, understated */ .hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: var(--hero-text-align, flex-start); } .hero__actions .btn { padding: 0.55rem 1.4rem; font-size: 0.65rem; letter-spacing: 0.1em; } /* Hero slideshow text — always white on overlay */ .hero--slideshow .hero__slide-content { color: #fff; } .hero--slideshow .hero__eyebrow { color: rgba(255, 255, 255, 0.85); } .hero--slideshow .hero__slide .btn--primary { background: var(--color-background, #fff); color: var(--color-text, #2d2d2d); border-radius: var(--btn-radius, 100px); text-transform: var(--btn-transform, none); letter-spacing: var(--btn-letter-spacing, 0); } .hero--slideshow .hero__slide .btn--primary:hover { background: var(--color-primary); color: var(--color-background, #fff); } .hero--slideshow .hero__slide .btn--outline { border-color: rgba(255, 255, 255, 0.5); color: #fff; border-radius: var(--btn-radius, 100px); text-transform: var(--btn-transform, none); letter-spacing: var(--btn-letter-spacing, 0); } .hero--slideshow .hero__slide .btn--outline:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; } .hero--slideshow .hero__slide:not(:has(.hero__slide-image)) .hero__slide-content { color: var(--color-text, #2d2d2d); } .hero--slideshow .hero__slide:not(:has(.hero__slide-image)) .hero__overlay { display: none; } /* ── DEPTH PARALLAX LAYERS ── */ .hero__parallax-bg, .hero__parallax-mid, .hero__parallax-fg { position: absolute; inset: -20px; /* extra bleed so shifted layers don't reveal edges */ z-index: 0; will-change: transform; pointer-events: none; } .hero__parallax-bg img, .hero__parallax-mid img, .hero__parallax-fg img { width: 100%; height: 100%; object-fit: cover; } .hero__parallax-bg { z-index: 0; } .hero__parallax-mid { z-index: 1; } .hero__parallax-fg { z-index: 2; } /* When parallax is active, hide the default hero image */ .hero__slide--parallax .hero__slide-image { display: none; } /* Overlay and content sit above parallax layers */ .hero__slide--parallax .hero__overlay { z-index: 3; } .hero__slide--parallax .hero__slide-content { z-index: 4; } @media (prefers-reduced-motion: reduce) { .hero__parallax-bg, .hero__parallax-mid, .hero__parallax-fg { inset: 0; transform: none !important; } } /* Hero nav (arrows + dots) */ .hero__nav { position: absolute !important; bottom: 2rem !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; display: flex; align-items: center; gap: 1rem; z-index: 2; width: auto !important; } .hero__arrow { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; transition: background 0.2s ease; cursor: pointer; border: 1px solid rgba(255,255,255,0.25); } .hero__arrow:hover { background: rgba(255,255,255,0.3); } .hero__dots { display: flex; gap: 0.5rem; } .hero__dot { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--color-background, #fff) 40%, transparent); border: none; cursor: pointer; /* Reserve space for the active-state outline ring so layout doesn't jump */ outline: 1px solid transparent; outline-offset: 2px; transition: background 0.3s ease, transform 0.3s ease, outline-color 0.3s ease; } /* Active state uses THREE non-color cues (size, weight, outline ring) so a colorblind user can identify the active slide at a glance. */ .hero__dot.is-active { background: var(--color-background, #fff); transform: scale(1.35); outline-color: currentColor; } /* ── HERO NAV VARIANTS — driven by --hero-nav-style token ── */ /* MINIMAL — dots only, no arrows, subtle */ .hero--slideshow[data-nav-style="minimal"] .hero__arrow { display: none; } .hero--slideshow[data-nav-style="minimal"] .hero__dot { width: 6px; height: 6px; background: rgba(255,255,255,0.3); transition: background 0.3s ease, width 0.3s ease; border-radius: 50%; } .hero--slideshow[data-nav-style="minimal"] .hero__dot.is-active { background: #fff; /* Non-color active cue: scale up so colorblind users see current slide. */ transform: scale(1.4); width: 6px; outline-color: #fff; } /* DASH — horizontal dashes, no arrows */ .hero--slideshow[data-nav-style="dash"] .hero__arrow { display: none; } .hero--slideshow[data-nav-style="dash"] .hero__dots { gap: 0.4rem; } .hero--slideshow[data-nav-style="dash"] .hero__dot { width: 20px; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.3); transition: background 0.3s ease, width 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform: none; } .hero--slideshow[data-nav-style="dash"] .hero__dot.is-active { background: #fff; width: 36px; transform: none; } /* PILL — pill-shaped active, thin chevron arrows */ .hero--slideshow[data-nav-style="pill"] .hero__arrow { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; width: 20px; height: 20px; opacity: 0.6; } .hero--slideshow[data-nav-style="pill"] .hero__arrow:hover { opacity: 1; background: none; } .hero--slideshow[data-nav-style="pill"] .hero__dots { gap: 0.35rem; } .hero--slideshow[data-nav-style="pill"] .hero__dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.25); transition: background 0.3s ease, width 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform: none; } .hero--slideshow[data-nav-style="pill"] .hero__dot.is-active { background: #fff; width: 24px; transform: none; } /* Counter element — hidden by default, shown only for "number" nav style */ .hero__counter { display: none; } /* NUMBER — shows "1 / 3" counter, hides dots (requires JS support) */ .hero--slideshow[data-nav-style="number"] .hero__dots { display: none; } .hero--slideshow[data-nav-style="number"] .hero__counter { display: block; } .hero--slideshow[data-nav-style="number"] .hero__counter { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.15em; color: rgba(255,255,255,0.7); } .hero--slideshow[data-nav-style="number"] .hero__arrow { width: 24px; height: 24px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255,255,255,0.3); } .hero--slideshow[data-nav-style="number"] .hero__arrow:hover { border-color: rgba(255,255,255,0.6); background: none; } @media (max-width: 768px) { .hero--slideshow, .hero__slides { min-height: 60vh; } .hero__heading { /* Safety cap for mobile — preset clamp handles most cases, but very large presets (adventure: 7vw → 5rem) need a ceiling */ font-size: clamp(1.6rem, 6vw, 2.8rem) !important; } .hero__slide-content { padding: 2.5rem 1.5rem 3.5rem; } .hero__nav { bottom: 1rem; } } /* ── HERO VARIANTS: single-image / video / animation ── Share .hero__heading, .hero__subheading, .hero__overlay etc with the slideshow, but use a single fixed media layer (no slides). Content is sourced from `section.settings` instead of block settings. */ .hero--single-image, .hero--video, .hero--animation { position: relative; min-height: var(--hero-height, 100vh); overflow: hidden; display: flex; align-items: var(--hero-text-valign, flex-end); justify-content: var(--hero-text-align, flex-start); color: #fff; } .hero--single-image .hero__media, .hero--video .hero__media, .hero--animation .hero__media { position: absolute; inset: 0; z-index: 0; } .hero--single-image .hero__slide-image, .hero--video .hero__video, .hero--video .hero__video-svg, .hero--animation .hero__animation-bg { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } @media (prefers-reduced-motion: reduce) { .hero--video .hero__video-svg ellipse animate { display: none; } } .hero--single-image .hero__slide-content, .hero--video .hero__slide-content, .hero--animation .hero__slide-content { position: relative; z-index: 2; color: #fff; } /* Text shadow for readability on photo/video backgrounds */ .hero--single-image .hero__heading, .hero--single-image .hero__subheading, .hero--single-image .hero__eyebrow, .hero--video .hero__heading, .hero--video .hero__subheading, .hero--video .hero__eyebrow, .hero--animation .hero__heading, .hero--animation .hero__subheading, .hero--animation .hero__eyebrow { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); } .hero--single-image .hero__eyebrow, .hero--video .hero__eyebrow, .hero--animation .hero__eyebrow { color: rgba(255, 255, 255, 0.85); } /* CTAs match slideshow styling: white primary, ghost outline */ .hero--single-image .btn--primary, .hero--video .btn--primary, .hero--animation .btn--primary { background: var(--color-background, #fff); color: var(--color-text, #2d2d2d); border-radius: var(--btn-radius, 100px); text-transform: var(--btn-transform, none); letter-spacing: var(--btn-letter-spacing, 0); } .hero--single-image .btn--primary:hover, .hero--video .btn--primary:hover, .hero--animation .btn--primary:hover { background: var(--color-primary); color: var(--color-background, #fff); } .hero--single-image .btn--outline, .hero--video .btn--outline, .hero--animation .btn--outline { border-color: rgba(255, 255, 255, 0.5); color: #fff; border-radius: var(--btn-radius, 100px); text-transform: var(--btn-transform, none); letter-spacing: var(--btn-letter-spacing, 0); } .hero--single-image .btn--outline:hover, .hero--video .btn--outline:hover, .hero--animation .btn--outline:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; } /* Animation hero — drifting orbs over a brand-colored gradient. Uses --color-primary / --color-secondary so the look adapts to palette. */ .hero--animation .hero__animation-bg { background: radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--color-primary, #2563eb) 60%, transparent) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, color-mix(in srgb, var(--color-secondary, #1e293b) 70%, transparent) 0%, transparent 60%), linear-gradient(135deg, var(--color-secondary, #1e293b) 0%, var(--color-primary, #2563eb) 100%); overflow: hidden; } .hero--animation .hero__orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: hero-orb-drift 18s ease-in-out infinite; } .hero--animation .hero__orb--a { width: 38vw; height: 38vw; top: -8vw; left: -6vw; background: var(--color-primary, #2563eb); } .hero--animation .hero__orb--b { width: 32vw; height: 32vw; bottom: -10vw; right: -6vw; background: var(--color-accent, #f59e0b); animation-delay: -6s; animation-duration: 22s; } .hero--animation .hero__orb--c { width: 26vw; height: 26vw; top: 35%; left: 50%; background: var(--color-secondary, #1e293b); animation-delay: -12s; animation-duration: 26s; } @keyframes hero-orb-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(8vw, -4vw) scale(1.08); } 66% { transform: translate(-6vw, 5vw) scale(0.95); } } @media (prefers-reduced-motion: reduce) { .hero--animation .hero__orb { animation: none; } } /* ── INSTAGRAM FEED ── */ .instagram-feed { padding: 4rem 0; } .instagram-feed__header { text-align: center; margin-bottom: 2rem; } .instagram-feed__handle { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--color-primary, #2563eb); text-decoration: none; } .instagram-feed__handle:hover { text-decoration: underline; } .instagram-feed__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; } @media (max-width: 768px) { .instagram-feed__grid { grid-template-columns: repeat(3, 1fr); } } .instagram-feed__tile { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; } .instagram-feed__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #2563eb) 20%, transparent) 0%, color-mix(in srgb, var(--color-secondary, #1e293b) 20%, transparent) 100%); } .instagram-feed__note { text-align: center; margin-top: 1.5rem; font-size: 0.75rem; color: var(--color-text-muted, #999); font-style: italic; } /* ── PRODUCT CARD: SECONDARY IMAGE HOVER ── */ .product-card__image--primary, .product-card__image--secondary { transition: opacity 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); } .product-card__image--secondary { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } .product-card:hover .product-card__image--secondary { opacity: 1; } .product-card:hover .product-card__image--primary { opacity: 0; } /* ── PRODUCT CARD: COLOR SWATCHES ── */ .product-card__swatches { display: flex; gap: 0.35rem; margin-bottom: 0.3rem; } .product-card__swatch { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--color-border, rgba(0,0,0,0.1)); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; } .product-card__swatch:hover { border-color: var(--color-primary, #7a9e7e); transform: scale(1.2); } /* ── PRODUCT CARD: VARIANT SWATCHES (Color + Size + other options) ── Availability must NOT be communicated by color alone — Adam is colorblind. Sold-out state uses: (1) reduced opacity, (2) diagonal strikethrough line, (3) an aria-label suffix " - Sold out". */ .swatch-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.35rem; margin-bottom: 0.35rem; } .swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1.5px solid var(--color-border, rgba(0,0,0,0.15)); border-radius: 4px; font-size: 0.7rem; line-height: 1; letter-spacing: 0.02em; cursor: pointer; box-sizing: border-box; transition: border-color 0.15s ease, transform 0.15s ease; } .swatch--color { width: 22px; min-width: 22px; padding: 0; border-radius: 50%; } .swatch--text { background: transparent; color: var(--color-text, #1a1a1a); font-weight: 500; } .swatch:hover { border-color: var(--color-primary, currentColor); transform: scale(1.08); } /* Sold-out: opacity + diagonal strikethrough line (shape, not color). 0.55 rather than 0.4 — at 0.4 the value inside a text swatch was faint enough that you could see a size was gone but not read which one. */ .swatch--unavailable { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .swatch--unavailable::after { content: ""; position: absolute; top: 50%; left: -2px; right: -2px; height: 1.5px; background: currentColor; transform: rotate(-45deg); transform-origin: center; pointer-events: none; } .swatch--color.swatch--unavailable::after { background: #000; height: 2px; } .swatch--unavailable:hover { transform: none; } /* ── PRODUCT PAGE: the same swatch, doing a different job ── On a collection tile a swatch reports what exists, so 22px is right. On a product page it IS the buy control, and 22px is under half a thumb. These only raise the floor — an AI theme's own rule still wins, because this file is prepended to theme.css and anything written later at the same specificity overrides it. */ .product-option__swatch { min-width: 44px; height: auto; min-height: 44px; padding: 0 12px; font-size: 0.8125rem; } .product-option__swatch.swatch--color { width: 44px; min-width: 44px; height: 44px; padding: 0; } /* ── HEADER — transparent overlay, always visible ── */ .section-header { position: sticky; top: var(--announcement-h, 41px); z-index: 100; background: transparent; width: 100%; transition: background 0.3s ease, box-shadow 0.3s ease; isolation: isolate; } /* Pull hero up behind both announcement bar + header — ONLY for image- backed boilerplate heroes that intentionally use the transparent-header overlay pattern. For AI-authored editorial heroes (typography-driven, no full-bleed image), pulling the section up clips the heading behind the sticky header. We scope by hero type instead. Use ~ (general sibling) not + (adjacent) because Shopify CLI injects