.popular-choices { margin: 28px 0 24px; min-width: 0; }
.popular-choices__heading { text-align: center; margin: 0 16px 14px; }
.popular-choices__heading h2 { font-size: clamp(28px, 6vw, 38px); font-weight: 600; letter-spacing: -.04em; margin: 0; }
.popular-choices__heading p { margin: 8px 0 0; font: 400 13px/1.5 "Onest", sans-serif; color: #727681; }
.popular-choices__rail { --popular-width: clamp(232px, 72vw, 300px); position: relative; display: flex; gap: clamp(20px, 3vw, 28px); overflow-x: auto; padding: 12px max(16px, calc((100% - var(--popular-width)) / 2)) 12px; scroll-padding-inline: max(16px, calc((100% - var(--popular-width)) / 2)); scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.popular-choices__rail::-webkit-scrollbar { display: none; }
.popular-choice { --popular-scale: .92; --popular-lift: 6px; --popular-opacity: .82; flex: 0 0 var(--popular-width); position: relative; scroll-snap-align: center; transform: translateY(var(--popular-lift)) scale(var(--popular-scale)); transform-origin: center top; transition: transform .16s cubic-bezier(.23, 1, .32, 1), opacity .16s ease-out; opacity: var(--popular-opacity); }
.popular-choice.is-active { --popular-scale: 1; --popular-lift: 0px; --popular-opacity: 1; }
.popular-choice__link { display: block; color: #151719; text-decoration: none; }
.popular-choice__poster { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 20px; background: #eff2f5; }
.popular-choice__link:focus-visible { outline: 2px solid #087cdd; outline-offset: 5px; border-radius: 20px; }
.popular-choice__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.popular-choice__rank { position: absolute; top: 12px; left: 12px; padding: 6px 10px; border: 1px solid #ffffff60; border-radius: 10px; background: #14233180; backdrop-filter: blur(10px); color: white; font: 600 15px "Onest", sans-serif; }
.popular-choice__copy { text-align: center; padding: 12px 4px 0; font: 400 13px/1.45 "Onest", sans-serif; }
.popular-choice__copy span, .popular-choice__copy p { color: #727681; }
.popular-choice__copy h3 { font: 500 20px/1.3 "Onest", sans-serif; margin: 4px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.popular-choice__copy p { margin: 0 0 6px; }
.popular-choice__copy strong { font-size: 19px; font-weight: 600; color: #087cdd; }
.popular-choice .popular-choice__save { position: absolute; z-index: 2; inset: 8px 8px auto auto; width: 44px; height: 44px; color: white; background: #14233130; border-radius: 50%; }
.popular-choice__save svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.popular-choice__save[aria-pressed="true"] svg { fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .popular-choice { transform: none; opacity: 1; transition: none; } }