/* The product page's related rows (related.js). The cards are the site's own .card; this file only lays out the
   row, its controls and the two motion modes (data-mode="drift" | "scroll"). */
.rr{--rr-card:clamp(188px,16.5vw,232px);--rr-gap:20px;display:grid;gap:56px;padding-block:72px 8px!important;margin-top:24px}
.rr-row{min-width:0}
.rr-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 0 20px}
.rr .rr-title{font-size:var(--fs-t)!important;font-weight:600!important;letter-spacing:-.01em!important;line-height:1.3!important;margin:0!important;color:var(--ink);text-wrap:balance;min-width:0}
.rr-ctl{display:flex;align-items:center;gap:8px;flex:none}
.rr-btn{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--pill);background:var(--tile);color:var(--navy);cursor:pointer;transition:background-color var(--t-fast) ease,transform var(--t-fast) var(--ease),opacity var(--t-fast) ease}
.rr-btn[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.rr-btn:hover:not(:disabled){background:var(--tile-2)}}
.rr-btn:active:not(:disabled){transform:scale(.94)}
.rr-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.rr-btn:disabled{opacity:.35;cursor:default}
.rr-btn svg{display:block}
.rr-pause{margin-inline-end:4px}
.rr-pause.is-paused{background:var(--navy);color:#fff}
@media(hover:hover) and (pointer:fine){.rr-pause.is-paused:hover{background:var(--navy-hover)}}

/* The row. Padding inside the view keeps the cards' focus ring and photo hover inside the clip. */
.rr-view{position:relative;padding-block:6px 4px;margin-block:-6px -4px}
.rr-track{display:flex;gap:var(--rr-gap);width:max-content;min-width:100%}
.rr-set{display:flex;gap:var(--rr-gap);flex:none}
.rr .card{flex:none;width:var(--rr-card)}
.rr .card .card-title{unicode-bidi:plaintext;text-align:right;min-height:calc(2em*1.35)}
.rr .card .card-line{flex-wrap:wrap}
/* Price and time only (the brief); the bid count stays on the product page. */
.rr .card .card-bids{display:none}
.rr .card .card-line .price{font-variant-numeric:tabular-nums;white-space:nowrap}
.rr .card .card-line .card-left{white-space:nowrap}

/* Drift: the view clips, the track moves (transform only, set by a Web Animation). 8px of inline padding (given
   back by the margin) keeps a card's focus ring inside the clip; the clipped edges fade so cards arrive and leave
   instead of being cut, and the fade steps aside while the keyboard is in the row. */
.rr-row[data-mode=drift] .rr-view{overflow:hidden;overflow:clip;padding-inline:8px;margin-inline:-8px;-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)} /* taste-skill-ignore: an edge fade (alpha mask), not a colour gradient */
.rr-row[data-mode=drift] .rr-view:focus-within{-webkit-mask-image:none;mask-image:none}
.rr-row[data-mode=drift] .rr-track{will-change:transform;min-width:0}

/* Still row: native sideways scroll, snapping to a card. */
.rr-row[data-mode=scroll] .rr-view{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rr-row[data-mode=scroll] .rr-view::-webkit-scrollbar{display:none}
.rr-row[data-mode=scroll] .rr .card,.rr-row[data-mode=scroll] .card{scroll-snap-align:start}
@media(prefers-reduced-motion:no-preference){html:not(.a11y-motion) .rr-row[data-mode=scroll] .rr-view{scroll-behavior:smooth}}

/* Loading: the site's skeleton cards, one row. */
.rr-skel .rr-view{overflow:hidden}
.rr-skel-h{display:block;width:min(220px,50%);height:24px;border-radius:8px;background:var(--tile)}
.rr-skel .card .cardbody span{display:block;height:12px;border-radius:6px;background:var(--tile);margin-top:6px}
.rr-skel .card .cardbody span:first-child{width:85%}.rr-skel .card .cardbody span:last-child{width:50%}

/* Tablets: a little tighter. Phones: no arrows (swipe), wider cards so the next one peeks in. */
@media(max-width:900px){.rr{--rr-card:clamp(176px,30vw,220px);--rr-gap:16px;gap:44px;padding-block:56px 8px!important}}
@media(max-width:600px){
 .rr{--rr-card:min(64vw,240px);--rr-gap:14px;gap:40px;padding-block:44px 8px!important}
 .rr-row[data-mode=scroll] .rr-prev,.rr-row[data-mode=scroll] .rr-next{display:none}
 .rr-head{margin-bottom:14px}
 /* The row runs to the screen edge; the first card still lines up with the page text. */
 .rr-row[data-mode=scroll] .rr-view{margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
}
@media(prefers-reduced-motion:reduce){.rr-btn{transition:none}}
html.a11y-motion .rr-btn{transition:none}