.focus-ready .picks-heading{margin-bottom:24px}
.focus-ready .focus-stage{--focus-size:320px;--step:256px;position:relative;display:block;overflow:hidden;height:384px;padding:0;margin:0;list-style:none;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:none;cursor:grab}
.focus-ready .focus-stage>li{position:absolute;left:50%;top:24px;width:var(--focus-size);height:var(--focus-size);display:block;transform:translateX(calc(-50% + var(--offset)*var(--step) + var(--drag-x,0px))) translateY(0) scale(1);opacity:1;z-index:5;transition:transform 800ms cubic-bezier(.22,1,.36,1),opacity 500ms cubic-bezier(.22,1,.36,1);transform-origin:center center;will-change:transform,opacity}
.focus-ready .focus-stage>li[hidden]{display:none}
.focus-ready .focus-stage>li.is-near{transform:translateX(calc(-50% + var(--offset)*var(--step) + var(--drag-x,0px))) translateY(24px) scale(.76);opacity:.58;z-index:3}
.focus-ready .focus-stage>li.is-far{transform:translateX(calc(-50% + var(--offset)*var(--step) + var(--drag-x,0px))) translateY(32px) scale(.58);opacity:.28;z-index:1}
.focus-ready .focus-stage.is-dragging{cursor:grabbing;user-select:none}
.focus-ready .focus-stage.is-dragging>li{transition:none}
.focus-ready .picks-card{display:block;width:100%;height:100%;border:0;box-shadow:none;background:transparent}
.focus-ready .picks-image,.focus-ready .picks-image img{width:100%;height:100%;aspect-ratio:1;border-radius:16px;object-fit:contain}
.focus-ready .picks-image img{inset:0;max-width:none}
.focus-ready .picks-copy[hidden]{display:none!important}
.focus-ready .focus-details{text-align:center;max-width:680px;min-height:96px;margin:0 auto;padding:0 16px 16px}
.focus-ready .focus-brand{display:block;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.08em;color:#65536e;margin-bottom:4px}
.focus-ready .focus-details h3{font-size:20px!important;line-height:28px!important;font-weight:500!important;margin:0!important;text-wrap:balance}
.focus-ready .focus-details a{color:#203c31;text-decoration:none;text-underline-offset:4px}
.focus-ready .focus-details a:hover{text-decoration:underline}
.focus-ready .focus-details a:focus-visible,.focus-ready .focus-stage:focus-visible{outline:2px solid #745683;outline-offset:4px}
.focus-ready .focus-counter{font-size:14px;line-height:20px;white-space:nowrap;color:#65536e;margin-right:12px;font-variant-numeric:tabular-nums}
.focus-ready .picks-controls{align-items:center}
.focus-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:900px){.focus-ready .focus-stage{--focus-size:288px;--step:224px;height:352px}}
@media(max-width:600px){.focus-ready .focus-stage{--focus-size:224px;--step:176px;height:288px}.focus-ready .focus-stage>li{top:16px}.focus-ready .picks-heading{gap:8px;margin-bottom:16px}.focus-ready .focus-counter{margin-right:4px;font-size:12px;line-height:16px}.focus-ready .focus-details h3{font-size:18px!important;line-height:28px!important}.focus-ready .focus-details{min-height:96px;padding-bottom:16px}.focus-ready .picks-controls button{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.focus-ready .focus-stage>li{transition:none}}

/* Dock comparison: transformed photos share a fixed interaction stage and baseline.
   Geometry reserves each scaled width plus a positive gap, so neighbors never overlap. */
.focus-ready .focus-stage{--dock-base:176px;height:336px}
.focus-ready .focus-stage>li,.focus-ready .focus-stage>li.is-near,.focus-ready .focus-stage>li.is-far{top:128px;width:var(--dock-base);height:var(--dock-base);transform-origin:50% 100%;transition:transform 500ms cubic-bezier(.22,1,.36,1),opacity 300ms cubic-bezier(.22,1,.36,1)}
.focus-ready .focus-stage.dock-hover>li{transition-duration:300ms,300ms}
.focus-ready .focus-stage.is-dragging>li{transition:none}
@media(max-width:600px){.focus-ready .focus-stage{--dock-base:64px;height:256px}.focus-ready .focus-stage>li{top:160px}}
@media(prefers-reduced-motion:reduce){.focus-ready .focus-stage>li,.focus-ready .focus-stage.dock-hover>li{transition:none}}

.focus-ready .picks-image,.focus-ready .picks-image img{border-radius:var(--dock-radius,8px)}

@media(max-width:600px){html[lang^="en"] .site-head .brand{gap:8px;min-width:0}html[lang^="en"] .site-head .brand strong{font-size:12px;line-height:16px;white-space:nowrap}}
