/* SFH2026 gear tiles — desktop grid, mobile one-per-view slider (Figma) */
.sfh-gear { padding: 64px 20px; background: #fff; }
/* double class beats the base .cms2-carousel-track flex rules */
.sfh-gear-grid.cms2-carousel-track {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    row-gap: 20px;
    column-gap: 20px;
    overflow: visible;
    scroll-snap-type: none;
}
.sfh-gear-tile {
    position: relative;
    display: block;
    overflow: hidden;
    /* aspect-ratio: 4/5; */
    aspect-ratio: 1 / 1;
    background: #f4f4f4;
}
.sfh-gear-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
a.sfh-gear-tile:hover img { transform: scale(1.05); }
.sfh-gear-tile::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45);
}
/* label centered over a full dark overlay (all breakpoints) */
.sfh-gear-label {
    position: absolute;
    left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    text-align: center;
    z-index: 2;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    /* text-transform: uppercase; */
    /* letter-spacing: 4%; */
    line-height: 1.2;
    height: 100%; display: flex; align-items: end; padding: 0px 15px 20px 15px
}

/* red promo card — one cell of the same grid, so it lines up with the photo
   tiles at every breakpoint instead of being a separate block */
.sfh-gear-promo {
    /* background: #be202e; */
    background: black;
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    color: #fff;
    text-decoration: none;
    transition: background .15s;
}
/* the photo tiles carry a dark overlay through ::after; the card must not */
.sfh-gear-promo::after { content: none; }
.sfh-gear-promo-eyebrow {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #F55A67;
}
.sfh-gear-promo-heading {
    margin: 0;
    font-size: clamp(22px, 1.9vw, 24px);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}
.sfh-gear-promo-text {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.5;
    opacity: .92;
}
/* pushed to the bottom of the card, matching the design */
.sfh-gear-promo-link {
    margin-top: auto;
    padding-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.sfh-gear-promo-link .sfh-btn-arrow svg { width: 28px; height: 9px; display: block; color: #F55A67; }
a.sfh-gear-promo:hover { 
    /* background: #9d1a26;  */
}

/* arrow buttons — hidden on desktop, shown as a row under the heading on mobile */
.sfh-gear-nav { display: none; }
.sfh-gear-arrow {
    width: 46px; height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sfh-gear-arrow svg { width: 18px; height: 12px; }
.sfh-gear-prev {
    background: #fff;
    border: 1px solid #e5e5e5;
    color: #555;
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.sfh-gear-prev:hover { background: #000; border-color: #000; color: #fff; }
.sfh-gear-next {
    background: #be202e;
    border: 0;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.sfh-gear-next:hover { background: #9d1a26; }

/* Tablet (761-1180px). In four columns the tiles are 167-270px square, and the
   promo card's copy needs 270-394px of height, so "Browse all accessories" was cut
   at every tablet width. Three columns with the promo spanning two gives it a wide,
   short box its copy fits in. With the promo fourth, the grid fills cleanly for 7
   photos (3 / promo+1 / 3). Labels are 18px here too, the same as the 2-column
   layout below 761px, so the size no longer jumps (18px -> 22px) inside the
   tablet range. */
@media (min-width: 761px) and (max-width: 1180px) {
    .sfh-gear-grid.cms2-carousel-track { grid-template-columns: repeat(3, 1fr); }
    .sfh-gear-promo { grid-column: span 2; aspect-ratio: auto; padding: 24px 28px; }
    .sfh-gear-promo-heading { font-size: 22px; }
    .sfh-gear-label { font-size: 18px; }
}

@media (max-width: 760px) {
    .sfh-gear { background: #f4f4f4; }
    /* Two-column grid, not a one-per-view carousel — per Figma.
     *
     * Every tile is visible at once, so the whole range reads in a glance
     * instead of behind six swipes; the arrows go with it, since there is
     * nothing left to page through. */
    .sfh-gear-nav { display: none; }
    .sfh-gear-grid.cms2-carousel-track {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        overflow: visible;
        scroll-snap-type: none;
    }
    .sfh-gear-tile {
        flex: none;
        border-radius: 0;
    }
    /* The promo keeps its content position (fourth), because the design turns
       the block over THERE: everything above it runs full width, everything
       below pairs up. `order: 99` used to push it to the foot, which made that
       turn invisible and left three lead tiles sharing rows with the rest. */
    .sfh-gear-promo { grid-column: 1 / -1; }

    /* Tiles before the promo: one per row, wide and shallow. */
    .sfh-gear-lead {
        grid-column: 1 / -1;
        aspect-ratio: 21 / 10;
    }
    /* The spotlight is the same full width, just given more height — that is the
       whole difference, so it reads as emphasis rather than as a different kind
       of tile. Chosen per section (spotlight_position), not hard-coded to an
       index, because which category deserves it is an editorial call. */
    .sfh-gear-lead.sfh-gear-spot { 
        /* aspect-ratio: 8 / 5;  */
        min-height: 290px;
        max-height: 290px;
        width: 100%;
    }
    /* The paired tiles below are near-square. */
    .sfh-gear-tile:not(.sfh-gear-lead):not(.sfh-gear-promo) { aspect-ratio: 1 / 1; }
    .sfh-gear-label { font-size: 18px; }
}

@media (max-width: 760px) {
    /* The card holds more than a label, so it grows past the tile ratio -- but by
       its own content, not to a floor. The 340px minimum left a band of empty red
       between the copy and the link that the design does not have; the tiles
       around it set the rhythm now. */
    .sfh-gear-promo { aspect-ratio: auto; min-height: 275px; }
}