/* ==========================================================================
   Series filter rail — /products/
   --------------------------------------------------------------------------
   The same kf_series_rail / kf_series_tile elements the home page uses, and deliberately the same
   LOOK: 282x175 tiles, 15px gutter, the four-stop scrim, Roboto Condensed 21/26 in Kino Flo yellow.
   Those values are lifted from css/kf-home.css rather than reinterpreted, because a visitor who
   scrolls the home page and then lands on the catalogue should recognise the same strip.

   It is not simply an @import of that sheet: kf-home.css is 3,860 lines and defines generic
   classes (.kf-btn, .kf-container, .kf-display) that would bleed over the archive's own button and
   container rules. So the rail's rules — and only those — are restated here, scoped under
   .kf-shop-rail.

   What is NOT on the home page is the selected state. Here a tile is a filter control, so it has to
   read as on or off at a glance: a yellow ring, a lifted scrim, and a tick chip.
   ========================================================================== */

.kf-shop-rail {
    --kf-rail-yellow: var(--kf-yellow, #FED208);
    --kf-rail-tile-w: 282px;
    --kf-rail-tile-h: 175px;
}

.kf-shop-rail .kf-series__viewport { position: relative; }

.kf-shop-rail .kf-series__rail {
    display: flex;
    gap: 15px;
    list-style: none;
    margin: 0;
    /* Room below for the ring and the lift, so neither is clipped by the overflow. */
    padding: 4px 0 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    /* The rail keeps its own scrollbar hidden, exactly as on the home page — the tiles running past
       the edge are the affordance. */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.kf-shop-rail .kf-series__rail::-webkit-scrollbar { display: none; }

.kf-shop-rail .kf-series__item {
    flex: 0 0 auto;
    width: var(--kf-rail-tile-w);
    scroll-snap-align: start;
}

.kf-shop-rail .kf-series__tile {
    position: relative;
    display: block;
    width: 100%;
    height: var(--kf-rail-tile-h);
    border-radius: 6px;
    overflow: hidden;
    background: #1b1b1b;
    text-decoration: none;
    cursor: pointer;
}
.kf-shop-rail a.kf-series__tile:hover { text-decoration: none; }

.kf-shop-rail .kf-series__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.kf-shop-rail a.kf-series__tile:hover .kf-series__img { transform: scale(1.04); }

.kf-shop-rail .kf-series__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(0,0,0,.42) 0%,
        rgba(0,0,0,0)   38%,
        rgba(0,0,0,.30) 58%,
        rgba(0,0,0,.78) 100%);
}

.kf-shop-rail .kf-series__meta {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
}
.kf-shop-rail .kf-series__name {
    display: block;
    font: 700 21px/26px 'Roboto Condensed', 'Roboto', sans-serif;
    color: var(--kf-rail-yellow);
}
.kf-shop-rail .kf-series__desc {
    display: block;
    font: 400 14px/24px 'Roboto', sans-serif;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kf-shop-rail .kf-series__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font: 600 10px/15px 'Roboto', sans-serif;
    letter-spacing: .85px;
    text-transform: uppercase;
    color: var(--kf-rail-yellow);
}

/* --- selected -------------------------------------------------------------
   The ring is an inset shadow rather than a border so the tile does not change size when it turns
   on — a 3px border would reflow the whole strip on every click. */
.kf-shop-rail .kf-series__tile:focus-visible {
    outline: 2px solid #161616;
    outline-offset: 2px;
}
.kf-shop-rail .kf-series__tile[aria-pressed] { transition: box-shadow .15s ease; }
.kf-shop-rail .kf-series__tile[aria-pressed="true"] {
    box-shadow: inset 0 0 0 3px var(--kf-rail-yellow);
}
/* Selected tiles lift out of the photograph: less scrim so the image reads, since the ring is now
   carrying the contrast the type needs. */
.kf-shop-rail .kf-series__tile[aria-pressed="true"] .kf-series__scrim {
    background: linear-gradient(180deg,
        rgba(0,0,0,.30) 0%,
        rgba(0,0,0,0)   40%,
        rgba(0,0,0,.34) 60%,
        rgba(0,0,0,.80) 100%);
}

.kf-shop-rail .kf-series__tick {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: none;
    place-items: center;
    background: var(--kf-rail-yellow);
    color: #161616;
    font: 700 13px/1 'Roboto', sans-serif;
}
.kf-shop-rail .kf-series__tile[aria-pressed="true"] .kf-series__tick { display: grid; }

/* --- rail chrome: progress bar + edge arrows -------------------------------
   Injected by js/kf-rail.js — the same controller the home page uses, so the behaviour (0.8-viewport
   steps, thumb sized to the visible share, ends disabled rather than wrapping, one tab stop with
   arrow keys inside) is identical by construction rather than by imitation. The controller wraps the
   <ul> in .kf-rail and appends the track and the nav; everything below is only how they look.

   Restated here rather than reused from kf-home.css for the same reason as the tiles above: that
   sheet cannot be loaded on this page. The values match its .kf-series band. */
.kf-shop-rail .kf-rail { position: relative; }

/* Seven tiles fit on a very wide screen. When there is nothing to scroll the controller sets
   .is-static and the chrome goes — a progress bar at 100% and two dead arrows are noise. */
.kf-shop-rail .kf-rail.is-static .kf-rail__progress,
.kf-shop-rail .kf-rail.is-static .kf-rail__nav { display: none; }

.kf-shop-rail .kf-rail__progress {
    position: relative;
    height: 10px;
    margin: 18px 0 0;
    border-radius: 100px;
    overflow: hidden;
    /* The catalogue's rail sits on white, so the home page's #f9f9f9 track would be invisible.
       This is the shared default from kf-home.css, which is the value written for exactly this. */
    background: rgba(0,0,0,.12);
}
.kf-shop-rail .kf-rail__progress > span {
    position: absolute;
    inset-block: 0;
    left: 0;
    display: block;
    border-radius: 100px;
    background: var(--kf-rail-yellow);
    transition: transform .18s ease;
}

/* The arrows float over the tiles at the rail's own edges and fade in on hover, after
   chauvetdj.com — not parked in a corner where they would collide with the H1. `left/right: 12px`
   rather than the home page's `calc(50% - 680px + 12px)`: that figure is the page margin, which is
   correct for a full-bleed rail and wrong for one inside the archive's container. */
.kf-shop-rail .kf-rail__nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--kf-rail-tile-h);
    display: block;
    pointer-events: none;
}
.kf-shop-rail .kf-rail__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(0,0,0,.1);
    color: #161616;
    font: 400 22px/1 'Roboto', sans-serif;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
    transition: opacity .18s ease, background-color .15s ease, color .15s ease;
}
.kf-shop-rail .kf-rail__btn--prev { left: 12px; }
.kf-shop-rail .kf-rail__btn--next { right: 12px; }

/* focus-within as well as hover, so the arrows are visible to a keyboard user who has tabbed into
   the rail — they are aria-hidden and untabbable, but seeing them is how you know the arrow keys
   will do something. */
.kf-shop-rail .kf-rail:hover .kf-rail__btn:not(:disabled),
.kf-shop-rail .kf-rail:focus-within .kf-rail__btn:not(:disabled) { opacity: 1; }

/* Hidden rather than dimmed at the ends: they float on a tile, so one disappearing shifts nothing
   and a ghost arrow over the artwork reads as a defect. */
.kf-shop-rail .kf-rail__btn:disabled { opacity: 0; pointer-events: none; }

.kf-shop-rail .kf-rail__btn:hover:not(:disabled) {
    background: var(--kf-rail-yellow);
    border-color: var(--kf-rail-yellow);
    color: #161616;
}

/* The rail element ships a head/toggle/CTA for the home page. None of it belongs on a filter
   strip — the H1 is directly above and "All Products" is the page you are on. */
.kf-shop-rail .kf-series__head,
.kf-shop-rail .kf-series__all,
.kf-shop-rail .kf-eyebrow { display: none; }

@media (max-width: 639px) {
    .kf-shop-rail { --kf-rail-tile-w: 232px; --kf-rail-tile-h: 145px; }
    .kf-shop-rail .kf-series__name { font: 700 18px/22px 'Roboto Condensed', 'Roboto', sans-serif; }
    .kf-shop-rail .kf-series__desc { font-size: 13px; line-height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .kf-shop-rail .kf-series__img,
    .kf-shop-rail .kf-rail__progress > span,
    .kf-shop-rail .kf-rail__btn,
    .kf-shop-rail .kf-series__tile[aria-pressed] { transition: none; }
    .kf-shop-rail a.kf-series__tile:hover .kf-series__img { transform: none; }
}