/* SFH2026 gallery — the layout had NO stylesheet of its own and leaned entirely on
   the shared .sfh-* chrome, which lives in productslider/layouts/sfh2026.css. cms2
   emits a layout's CSS only when that layout is on the page, so on the About page
   (mediatext + gallery, no product slider) the band lost its container cap and the
   heading its type. These four rules are copied verbatim from the canonical file —
   duplication is the price of conditional stylesheet loading. */
.sfh-container { max-width: var(--cms2-max-width, 1280px); margin: 0 auto; }
.sfh-eyebrow {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #BE202E;
    line-height: 1.2;
}
.sfh-heading-xl {
    margin: 0;
    font-size: clamp(36px, 4.6vw, 42px);
    font-weight: 800;
    line-height: 120%;
    text-transform: uppercase;
    color: #000;
}
.sfh-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 38px;
}
/* Centre the gallery's header, per Figma.
 *
 * The rule copied above is productslider's two-column row — heading on the
 * left, "view all" on the right — and `space-between` is what puts them at
 * opposite ends. A gallery has no right-hand element, so its single child
 * shrink-wraps and sits at flex-start: the heading measured 405px wide at x=8
 * in a 1440px viewport, i.e. hard against the left edge. That is why the
 * `text-align: center` in page 5's custom_css looked like it did nothing — it
 * WAS centring the text, but only inside that narrow box.
 *
 * Scoped to .sfh-gallery on purpose: productslider ships its own copy of
 * .sfh-section-header and both stylesheets can load on one page, so an
 * unscoped override here would re-centre the slider headers too, depending on
 * which file happened to load last. */
.sfh-gallery .sfh-section-header { justify-content: center; }
.sfh-gallery .sfh-section-title { text-align: center; }