/* Parade: three full-bleed conveyor lanes of product cards at different speeds. Hover or focus pauses a lane. */
:root{--sz:230px}
@media (max-width:600px){:root{--sz:170px}}
.belt{margin:0 calc(-1 * max(16px,env(safe-area-inset-right,0px))) 0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));display:flex;flex-direction:column;gap:18px;overflow:clip}
.track{display:flex;width:max-content;gap:16px;padding-inline:8px}
.lane{display:flex;gap:16px;animation:slide var(--dur,60s) linear infinite}
.t0{--dur:70s}.t1{--dur:95s;flex-direction:row-reverse}.t1 .lane{animation-direction:reverse}.t2{--dur:80s}
.track:hover .lane,.track:focus-within .lane,body.paused .lane{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 16px))}}
.ctl{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 22px}
.ctl .pill[aria-pressed="true"]{background:var(--band);color:var(--band-fg);border-color:var(--band)}
.card{width:var(--sz);flex:0 0 var(--sz);background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--fg);display:flex;flex-direction:column;overflow:hidden;transition:transform .15s,box-shadow .15s}
@media (hover:hover){.card:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 12px 26px rgba(10,20,50,.2)}}
.card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent)}
.card:active{transform:scale(.985)}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#fff}
.cap{display:flex;flex-direction:column;gap:3px;padding:8px 10px 10px;border-top:3px solid var(--accent);min-width:0}
.who{font-weight:800;font-size:1.05rem;line-height:1.1;letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere}
.who small{display:block;margin-top:3px;font-weight:500;font-size:.72rem;color:var(--muted);letter-spacing:.06em}
.pt{font-size:.82rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pr{font-weight:800;color:var(--accent-text);font-size:.92rem;font-variant-numeric:tabular-nums}
/* Touch screens: each row is a swipeable strip. parade.js adds the gentle drift and pauses it while you touch. */
.belt.touch .track{width:auto;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;flex-direction:row;padding-inline:0;-webkit-overflow-scrolling:touch}
.belt.touch .track::-webkit-scrollbar{display:none}
.belt.touch .lane{animation:none}
.belt.touch{margin-inline:0}
.belt.touch .track{padding-inline:max(16px,env(safe-area-inset-left,0px))}
@media (prefers-reduced-motion:reduce){.lane{animation:none}.belt{overflow-x:auto}.track{width:auto}.lane+.lane{display:none}.card{transition:none}.card:hover{transform:none}}