/* SFH2026 product slider + shared section chrome (Figma) */
.sfh-container { max-width: var(--cms2-max-width, 1280px); margin: 0 auto; }
.sfh-eyebrow {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #BE202E;
    line-height: 1.2;
}

@media (max-width: 760px) {
    .sfh-eyebrow { font-size: 12px; }
}
.sfh-heading-xl {
    margin: 0;
    font-size: clamp(34px, 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;
}
.sfh-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 6px;
    letter-spacing: 0.07em;
}

@media (max-width: 760px) {
    .sfh-section-header { font-size: 12px; }
}
/* .sfh-btn-arrow is shared chrome (grid, jumbotron, boardfinder, modeldetail all
   use it), but its sizing used to live only in hero/layouts/sfh2026.css — and cms2
   emits a layout's CSS only when that layout is on the page. On a page without a
   hero section the svg had no width at all and collapsed to nothing as a flex item.
   This file already hosts the theme's shared chrome (.sfh-container, .sfh-eyebrow). */
.sfh-btn-arrow { display: inline-flex; align-items: center; }
.sfh-btn-arrow svg { width: 28px; height: 9px; display: block; }
.sfh-link-btn .sfh-btn-arrow { color: #be202e; }
.sfh-link-btn:hover { text-decoration: underline; }
.sfh-viewall-bottom { display: none; }

.sfh-products { padding: 64px 20px; background: #fff; }
.sfh-products-grey { background: #f4f4f4; }

.sfh-carousel { position: relative; }
/* side arrows — circles vertically centered on the card photos */
.sfh-carousel-nav { display: contents; }
/* No arrows when the row already fits. site.js sets `cms2-carousel-fits` from the
   MEASURED overflow, so this is right at every width -- a PHP-side
   `count($rows) > $cols` would be wrong at half of them. Live example: "Apparel
   & accessories" holds 2 cards where 5 fit, and its arrows could never move
   anything. */
.cms2-carousel-fits .sfh-carousel-nav { display: none; }
.sfh-carousel-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 5;
    width: 46px; height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sfh-carousel-arrow svg { width: 18px; height: 12px; }
/* Overhang is 20px, not half the 46px circle: the section's gutter IS 20px, so a
   23px overhang pokes 3px past it and gave the whole page a 3px horizontal
   scroll at any viewport narrow enough for the grid to sit on its gutters
   (1440px with this site's 1465 max width). The circle still straddles the
   card edge; it just stops exactly on the page edge instead of past it. */
.sfh-carousel-prev {
    left: -20px;
    background: #fff;
    border: 1px solid #e5e5e5;
    color: #555;
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.sfh-carousel-prev:hover { background: #000; border-color: #000; color: #fff; }
.sfh-carousel-next {
    right: -20px;
    background: #be202e;
    border: 0;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.sfh-carousel-next:hover { background: #9d1a26; }

.sfh-product-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.sfh-product-track::-webkit-scrollbar { display: none; }

.sfh-product-card {
    flex: 0 0 calc((100% - 16px * (var(--items, 4) - 1)) / var(--items, 4));
    /* A flex item's min-width defaults to its min-content width, so the nowrap
       dims line below would widen the card past its basis instead of clipping. */
    min-width: 0;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.sfh-product-media {
    position: relative;
    background: #f4f4f4;
    overflow: hidden;
    /* aspect-ratio: 4/5; */
    aspect-ratio: 151/206;
}
/* The PHOTO panel is WHITE on a grey band. Most model shots are PNGs with a
   transparent background, so on #eaeaea they picked up the band's tone and
   stopped reading as product photography. The INFO panel below keeps the darker
   #eaeaea, and that is what still holds the card's edge against the section --
   which was the reason the darker tone was introduced in the first place. */
.sfh-products-grey .sfh-product-media { background: #fff; }
.sfh-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
a.sfh-product-card:hover .sfh-product-media img { transform: scale(1.04); }

/* Hover scrim — 40% black over the photo.
   A pseudo-element rather than a filter on the img: it also covers the grey
   backing that shows through photos with transparency, and it fades on its
   own timing instead of fighting the scale transform.
   Only on linked cards: an unlinked <article> reacting to hover would promise
   a click that is not there.
   The z-index is load-bearing — ::after is the media's LAST child, so without
   it the scrim paints over the BUY NOW pill and the discount badge. */
.sfh-product-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
a.sfh-product-card:hover .sfh-product-media::after { opacity: .2; }

.sfh-product-badge {
    position: absolute;
    z-index: 2;                  /* above the hover scrim */
    top: 12px; left: 12px;
    background: #be202e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 2px;
}

/* hover buy button — black pill with cart icon (Figma) */
.sfh-product-buy {
    position: absolute; z-index: 2; left: 50%; bottom: 20px; transform: translate(-50%, 8px);
    display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
    background: #000; color: #fff; border-radius: 999px; padding: 12px 22px;
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.sfh-buy-cart { width: 15px; height: 15px; flex: 0 0 auto; }
.sfh-product-card:hover .sfh-product-buy { opacity: 1; transform: translate(-50%, 0); }
.sfh-product-card:hover .sfh-product-info{ 
    /* background: #F4F4F4;  */
}


/* info panel — grey block under the photo */
.sfh-product-info {
    flex: 1;
    /* background: #f4f4f4; */
    /* padding: 25px 26px 18px */
    padding: 18px 0px
}

@media (max-width: 760px) {
    .sfh-product-info { padding: 16px 10px 16px; }
}

.sfh-products-grey .sfh-product-info { 
    /* background: #eaeaea;  */
}
.sfh-product-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
/* The old price used to share this row and set its height at 20px; it now sits
   beside the price instead, but the reservation stays -- it is what keeps a card
   whose feed sends no brand the same height as one that has a brand. */
.sfh-product-toprow { 
    /* margin-bottom: 4px; */
    min-height: 20px; 
}
.sfh-product-brand { margin: 0; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 7%; text-transform: uppercase; color: #898989; }
.sfh-product-name { margin: 0; font-size: 18px; font-weight: 700; color: #000; line-height: 1.2; }
/* Name over price, both left aligned -- NOT .sfh-product-row, which is the
   two-column brand/old-price arrangement above. modellist/layouts/c.php uses this
   same class: that layout borrows these class names and imports this file, so the
   two cards stay identical by construction rather than by remembering to edit
   both. A models list has no old price to hang on the right, which is why the
   flex row left its price marooned in the far corner of the card. */
.sfh-product-nameblock .sfh-price { padding-top: 8px; }
/* Always one line. The track is a flex row, so every card stretches to the
   tallest one; a single card whose dims wrapped to two lines therefore made all
   eight taller, and .sfh-product-info's flex:1 dumped the surplus as dead grey
   space under the other seven. The full string stays in the title attribute. */
.sfh-product-dims {
    margin: 6px 0 0;
    font-size: 13px;
    color: #898989;
    line-height: 1.5;
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
}
/* Now a <span> inside .sfh-price rather than its own <p> in the brand row, so it
   has to undo what it inherits there: that element is bold and red. Left at
   vertical-align:baseline and a smaller size than its host, which is what keeps
   it inside the price's own line box -- the track is a flex row, so a card one
   pixel taller would drag all of them with it. */
.sfh-price-old {
    margin: 0 0 0 8px;
    font-size: 13px;
    font-weight: 400;
    color: #a5a5a5;
    text-decoration: line-through;
}
.sfh-price { margin: 0; font-size: 15px; font-weight: 700; color: #BE202E; line-height: 1.2; }

@media (max-width: 760px) {
    .sfh-product-card { flex-basis: calc((100% - 16px * (var(--items-m, 1) - 1)) / var(--items-m, 1)); }
    /* Stack the header. The grid layouts (_sfh_header.php: brands/gear/sale)
       render their view-all as a bare .sfh-link-btn with no .sfh-viewall-top
       wrapper, so it is never hidden here — side by side it squeezed the
       heading into a narrow column while the space beside it went unused.
       No-op for productslider, whose header link IS hidden on this breakpoint
       and re-renders as .sfh-viewall-bottom under the carousel. */
    .sfh-section-header { margin-bottom: 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
    /* The view-all stays with the heading, under it — that is where Figma puts
       it. The header is a column at this breakpoint, so the link falls directly
       beneath the title. It used to be hidden here and re-rendered below the
       carousel instead, which put it after a row the reader has to swipe past. */
    .sfh-viewall-top { display: block; margin-top: -4px; }
    .sfh-viewall-bottom { display: none; }
    /* No arrows on a phone. The row is swipeable, and the next card is left
       peeking past the right edge (below) — that overhang is what tells a reader
       the row moves, the same way onboardstore.com.au does it. A pair of
       circular buttons on top of that is a second control for one gesture. */
    .sfh-carousel-nav { display: none; }

    /* Let the next card show. `--items-m` is 1 on these sections, which made a
       card exactly the track's width: the row looked like a static image with no
       hint that anything followed. The subtracted 44px is the peek plus its gap,
       so one swipe still lands the next card on the left edge (scroll-snap). */
    .sfh-product-card {
        flex-basis: calc((100% - 16px * (var(--items-m, 1) - 1)) / var(--items-m, 1) - 44px);
    }
    /* The track has to bleed to the screen edge or the peeking card is cut off
       by the section's own 20px gutter instead of running under it. */
    .sfh-product-track {
        margin-right: -20px;
        padding-right: 20px;
        scroll-padding-left: 0;
    }
    .sfh-carousel-arrow { position: static; transform: none; }
    /* buy button always visible on touch */
    .sfh-product-buy { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
    /* A card can be narrower than the pill's own label. At items_mobile 2 on a
       375px phone the card measures 116px while "VIEW DETAILS" measures 140px,
       and the pill is absolutely positioned and nowrap, so it simply hung out of
       both sides of the card (seen on the live /models page). Cap it to the card
       and let the label wrap inside it -- at items_mobile 1 the label still fits
       one line, so the ordinary case is unchanged. */
    .sfh-product-buy { max-width: calc(100% - 20px); white-space: normal; text-align: center; }
    /* Same cause, same card: name and price share one row via space-between, and
       76px of content width cannot hold "FEBS FISH" and "$832.00" side by side --
       the price was clipped at the card's edge. Wrapping drops it to its own
       line instead. No effect where the two already fit. */
    .sfh-product-row { flex-wrap: wrap; }
}