/* Featured riders (Povilas 2026-10-15, Figma "FINAL FEATURED RIDERS" 2210:6128): an endless, self-running
   carousel, one rider per slide (carousel.js). Phones: the 440 × 977 poster. Desktop (≥ 900px): the wide
   DESKTOP slide (Figma 2214:6129). Shared by the homepage and the Full custom product page. Square
   corners (Povilas 2026-10-14). */
.rider-block{position:relative}
.rider-block .carousel-track{position:relative;display:flex;gap:0;margin:0;padding:0;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.rider-block .carousel-track::-webkit-scrollbar{display:none}
.rider-block .carousel-track:focus-visible{outline:2px solid #242424;outline-offset:4px}
.rider-block .carousel-card{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start}
.rider-card{position:relative;border-radius:0;color:#fff}
.rider-card__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Phones and tablets: the poster */
.rider-card__poster{position:relative;max-width:440px;margin:0 auto;background:#262626;overflow:hidden}
.rider-card__art{display:block;width:100%;height:auto;max-width:none;aspect-ratio:440 / 977}
.rider-card__ig{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);border-radius:999px;transition:box-shadow .15s}
.rider-card__ig:hover{box-shadow:0 0 0 2px #ddb88d}
.rider-card__ig:focus-visible{outline:2px solid #ddb88d;outline-offset:3px}
.rider-card__wide{display:none}
@media(max-width:700px){
  .rider-block .carousel-track{margin-inline:calc(50% - 50vw)}
  .rider-card__poster{max-width:none}
}

/* Desktop: the wide DESKTOP slide (Povilas's Figma frame, 3661 × 2243), full width of the section */
@media(min-width:900px){
  .rider-card__poster{display:none}
  .rider-card__wide{position:relative;display:block;overflow:hidden;background:#262626}
  .rider-card__desk{display:block;width:100%;height:auto;max-width:none;aspect-ratio:3661 / 2243}
}

/* Controls: the homepage carousel's (home.css), repeated so product pages look the same */
.rider-block .carousel-controls{display:flex;align-items:center;justify-content:space-between;height:auto;margin-top:16px;font-size:11px;letter-spacing:.12em;color:#777}
.rider-block .carousel-controls>div{position:relative;display:flex;gap:9px}
.rider-block .carousel-controls button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #d8d8d8;border-radius:50%;background:#fff;color:#242424;cursor:pointer}
.rider-block .carousel-controls button svg{display:block;width:18px;height:18px}
.rider-block .carousel-controls button:hover{border-color:#242424;background:#f7f7f7}
.rider-block .carousel-controls .pause-accessible{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.rider-block .carousel-controls .pause-accessible:focus-visible{position:static!important;width:42px!important;height:42px!important;margin:0!important;overflow:visible!important;clip:auto!important;border:1px solid #222!important;outline:2px solid #222;outline-offset:2px}
@media(max-width:700px){.rider-block .carousel-controls{margin-top:13px}}
@media(prefers-reduced-motion:reduce){.rider-card__ig{transition:none}}