/* Only card footers navigate; imagery remains a non-link with motion feedback. */
.family-carousel .family-art { cursor: default; }
.family-carousel .family-art img { transition: transform .4s ease, scale .2s ease; }
.family-carousel .family-foot { color: inherit; text-decoration: none; min-height: 44px; }
.family-carousel .family-foot:focus-visible { outline: 2px solid #a9bdd0; outline-offset: 4px; border-radius: 4px; }
.family-carousel { --family-card-width:360px; --family-card-height:466px; }
.family-navigation[hidden] { display:none; }
.family-carousel [data-family-status] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.family-carousel.is-ready .product-families { display:block; position:relative; height:calc(var(--family-card-height) + 44px); perspective:1200px; isolation:isolate; overflow:hidden; touch-action:pan-y pinch-zoom; }
.family-carousel.is-ready .product-family { position:absolute; left:50%; top:16px; width:var(--family-card-width); height:var(--family-card-height); min-height:0; padding:24px; transform:translateX(-50%); transform-origin:50% 50%; backface-visibility:hidden; transition:transform .7s cubic-bezier(.22,.7,.2,1),opacity .55s,border-color .3s; box-shadow:0 24px 40px -28px #000b; }
.family-carousel.is-ready .family-art { position:relative; inset:auto; width:auto; height:auto; flex:1; min-height:0; margin:12px -6px 20px; }
.family-carousel.is-ready .family-kicker { max-width:none; font-size:10px; }
.family-carousel.is-ready .family-foot { position:relative; flex:none; align-items:center; min-height:95px; padding-top:18px; border-top:1px solid #ffffff20; }
.family-carousel.is-ready .family-foot h3 { max-width:none; font-size:1.7rem; line-height:1.2; text-wrap:balance; }
.family-carousel.is-ready .family-foot div > span { display:block; max-width:none; font-size:12px; }
.family-carousel.is-ready .family-arrow { display:grid; width:24px; }
.family-carousel.is-ready .product-family[data-offset="0"] { opacity:1; z-index:4; border-color:#88aaca88; }
.family-carousel.is-ready .product-family[data-offset="-1"] { transform:translateX(-137%) translateZ(-135px) rotateY(30deg); opacity:.68; z-index:3; }
.family-carousel.is-ready .product-family[data-offset="1"] { transform:translateX(37%) translateZ(-135px) rotateY(-30deg); opacity:.68; z-index:3; }
.family-carousel.is-ready .product-family[data-offset="-2"] { transform:translateX(-209%) translateZ(-320px) rotateY(42deg); opacity:.28; z-index:2; }
.family-carousel.is-ready .product-family[data-offset="2"] { transform:translateX(109%) translateZ(-320px) rotateY(-42deg); opacity:.28; z-index:2; }
.family-carousel.is-ready .product-family[data-offset="3"] { transform:translateX(-50%) translateZ(-480px); opacity:0; z-index:1; }
.family-carousel.is-ready .product-family[inert] { pointer-events:none; }
.family-select { position:absolute; inset:0; z-index:5; width:100%; height:100%; padding:0; border:0; border-radius:inherit; background:transparent; cursor:pointer; }
.family-select[hidden] { display:none; }
.family-carousel .family-select:focus-visible { outline:2px solid #a9bdd0; outline-offset:-4px; }
.family-carousel .family-handle .family-art img { transform:rotate(-10deg); }
.family-carousel .family-stand .family-art img { padding:16px; }
.family-carousel .family-handlebar .family-art img { padding:0; }
/* Match the original three families: a gentle four-degree turn and 5px lift. */
@media (prefers-reduced-motion:no-preference) {
 .family-carousel .family-art:active img { scale: 1.025; }
 .family-carousel .family-handle:is(:hover,:focus-within) .family-art img { transform:rotate(-6deg) translateY(-5px); }
 .family-carousel .family-handlebar:is(:hover,:focus-within) .family-art img { transform:rotate(4deg) translateY(-5px); }
 .family-carousel .family-stand:is(:hover,:focus-within) .family-art img { transform:rotate(-4deg) translateY(-5px); }
 .family-carousel .family-exhaust:focus-within .family-art img { transform:rotate(8deg) translateY(-5px); }
 .family-carousel .family-chain:focus-within .family-art img { transform:rotate(-20deg) translateY(-5px); }
 .family-carousel .family-swingarm:focus-within .family-art img { transform:rotate(-8deg) translateY(-5px); }
}
.family-navigation { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:4px; }
.family-steppers { display:flex; align-items:center; gap:20px; }
.family-step { display:grid; place-items:center; width:44px; height:44px; border:1px solid #b2c9dd30; border-radius:50%; color:#d3dfeb; background:#b2c9dd08; cursor:pointer; transition:background .2s,border-color .2s; }
.family-step:hover { background:#b2c9dd18; border-color:#b2c9dd80; }
.family-position { font-size:12px; color:#a9bdd0; letter-spacing:.15em; font-variant-numeric:tabular-nums; }
@media(max-width:1000px) { .family-carousel { --family-card-width:320px; --family-card-height:440px; } }
@media(max-width:700px) {
 .family-carousel:not(.is-ready) .family-art { position:relative; inset:auto; width:100%; height:220px; margin:12px 0 20px; }
 .family-carousel:not(.is-ready) .family-foot { flex:none; padding-top:20px; border-top:1px solid #ffffff20; }
 .family-carousel { --family-card-width:min(76vw,320px); --family-card-height:410px; }
 .family-carousel.is-ready .product-families { width:100cqw; margin-left:calc(50% - 50cqw); }
 .family-carousel.is-ready .product-family { padding:20px; }
 .family-carousel.is-ready .family-foot h3 { font-size:1.5rem; }
 .family-carousel.is-ready .product-family[data-offset="-1"] { transform:translateX(-139%) translateZ(-180px) rotateY(35deg); }
 .family-carousel.is-ready .product-family[data-offset="1"] { transform:translateX(39%) translateZ(-180px) rotateY(-35deg); }
}
@media(prefers-reduced-motion:reduce) {
 .family-carousel.is-ready .product-family,.family-carousel .family-art img { transition:none; }
 .family-carousel.is-ready .product-family[data-offset] { transform:translateX(-50%); }
 .family-carousel.is-ready .product-family:not([data-offset="0"]) { opacity:0; visibility:hidden; }
 .family-carousel .family-art img,.family-carousel .product-family:hover .family-art img { transform:none; }
}